/* ==========================================================================
   Portfolio — Ange Bonkoski
   Identité « ardoise et brume » : fond gris brume, encre presque noire,
   un seul accent bleu pétrole, panneaux en verre liquide.

   SOMMAIRE (Ctrl+F sur le numéro pour sauter à une partie)
    1. Police            8. Boutons            15. GitHub
    2. Variables         9. Sections           16. Contact
    3. Base             10. Profil             17. Pied de page, haut de page
    4. Décor d'ambiance 11. Compétences        18. Apparitions
    5. Verre liquide    12. Parcours           19. Responsive
    6. Navigation       13. Projets            20. Préférences d'accessibilité
    7. Hero             14. Carrousel          21. Impression
   ========================================================================== */

/* 1. POLICE ----------------------------------------------------------------
   Instrument Sans (licence SIL OFL), un seul fichier variable : graisse 400→700
   et largeur 75 %→100 % (les titres sont légèrement condensés). Servie par le site. */
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;
  src:url('../fonts/instrument-sans-latin-standard-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-stretch:75% 100%;font-display:swap;
  src:url('../fonts/instrument-sans-latin-standard-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* 2. VARIABLES ------------------------------------------------------------- */
:root{
  /* Couleurs (contrastes mesurés sur le fond --bg) */
  --bg:#EDF0F1;            /* brume */
  --surface:#FFFFFF;
  --ink:#14181D;           /* encre : 15,6:1 */
  --ink-2:#46505A;         /* texte secondaire : 7,2:1 */
  --ink-3:#59636D;         /* texte discret : 5,3:1 */
  --accent:#1D5A66;        /* bleu pétrole : 6,8:1 (blanc sur pétrole : 7,8:1) */
  --accent-deep:#143F48;
  --accent-soft:rgba(29,90,102,.10);
  --accent-line:rgba(29,90,102,.30);
  --ok:#24704C;            /* « disponible » : 5,2:1, toujours accompagné d'un texte */
  --line:rgba(20,24,29,.09);
  --line-2:rgba(20,24,29,.16);

  /* Verre */
  --glass-top:rgba(255,255,255,.58);
  --glass-bottom:rgba(255,255,255,.34);
  --glass-edge:rgba(255,255,255,.60);
  --glass-blur:14px;

  /* Ombres : une courte et nette, une longue et diffuse, teintée par l'accent */
  --shadow-1:0 1px 2px rgba(20,24,29,.05),0 10px 26px -14px rgba(20,24,29,.22);
  --shadow-2:0 1px 2px rgba(20,24,29,.04),0 18px 44px -22px rgba(20,24,29,.28),0 46px 90px -50px rgba(29,90,102,.30);

  /* Formes */
  --r-xl:34px; --r-lg:26px; --r-md:18px; --r-sm:12px;

  /* Mouvement */
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.45,.64,1);

  --sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* 3. BASE ------------------------------------------------------------------ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:6.5rem;-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
ul{list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
/* hidden="until-found" (détails repliés) doit rester trouvable par Ctrl+F : on ne le force pas en display:none */
[hidden]:not([hidden="until-found"]){display:none !important;}
h1,h2,h3,h4{color:var(--ink);text-wrap:balance;}
p,li{text-wrap:pretty;}
p{color:var(--ink-2);}
strong{font-weight:650;}
::selection{background:rgba(29,90,102,.18);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px;}

.skip-link{
  position:absolute;left:1rem;top:-5rem;z-index:6000;
  padding:.8rem 1.3rem;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;text-decoration:none;
  transition:top .25s var(--ease);
}
.skip-link:focus-visible{top:1rem;}
@supports not selector(:focus-visible){.skip-link:focus{top:1rem;}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
main{position:relative;z-index:2;}

/* Pastille « disponible » : point vert et onde douce */
.dot-live{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);flex-shrink:0;}
.dot-live::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ok);
  opacity:.5;animation:pulse 2.8s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.4);opacity:.6;}100%{transform:scale(2.2);opacity:0;}}

/* 4. DÉCOR D'AMBIANCE --------------------------------------------------------
   Derrière toute la page : une trame de points (repère technique discret) et
   des halos très flous qui dérivent lentement. C'est ce que le verre réfracte
   et floute : sans décor derrière lui, un verre n'a rien à montrer.
   Positionné en « absolute » sur toute la hauteur, et NON en « fixed » : Chrome
   ne fournit pas correctement le décor d'un calque fixe aux filtres de réfraction
   (une zone vide rectangulaire apparaissait dans le verre). */
body{position:relative;}
.ambient{position:absolute;top:0;left:0;right:0;height:100%;z-index:0;pointer-events:none;overflow:hidden;}
.ambient-grid{
  display:none; /* grille de points retirée */
}
.halo{position:absolute;border-radius:50%;animation:drift 32s ease-in-out infinite alternate;will-change:transform;}
.halo-1{width:62vmax;height:62vmax;left:-18vmax;top:-22vmax;background:radial-gradient(closest-side,rgba(29,90,102,.30),rgba(29,90,102,0));}
.halo-2{width:48vmax;height:48vmax;right:-14vmax;top:2vmax;background:radial-gradient(closest-side,rgba(84,112,150,.24),rgba(84,112,150,0));animation-duration:38s;animation-delay:-9s;}
.halo-3{width:56vmax;height:56vmax;left:18vmax;top:38%;background:radial-gradient(closest-side,rgba(205,190,166,.46),rgba(205,190,166,0));animation-duration:44s;animation-delay:-17s;}
.halo-4{width:40vmax;height:40vmax;right:-6vmax;top:62%;background:radial-gradient(closest-side,rgba(110,170,180,.30),rgba(110,170,180,0));animation-duration:35s;animation-delay:-23s;}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(4vmax,3vmax,0) scale(1.08);}
  100%{transform:translate3d(-3vmax,5vmax,0) scale(.95);}
}
/* Onglet en arrière-plan : les halos s'arrêtent (classe posée par main.js) */
.ambient.is-paused .halo{animation-play-state:paused;}

/* 5. VERRE LIQUIDE -----------------------------------------------------------
   Partout : verre dépoli (flou + saturation), arêtes éclairées, liseré qui
   capte la lumière, reflet qui suit le pointeur (--mx / --my, posés par main.js).
   Sur Chrome et Edge (ordinateur), glass.js ajoute une vraie réfraction : une carte
   de déformation calculée à la taille de chaque panneau courbe le décor sur les
   bords, comme l'épaisseur d'une lentille. */
.glass{
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,var(--glass-top),var(--glass-bottom));
  border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(170%);
          backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(20,24,29,.04),
    0 1px 1px rgba(20,24,29,.04),
    0 14px 34px -18px rgba(20,24,29,.26),
    0 44px 90px -48px rgba(29,90,102,.32);
}
/* Reflets : un éclat fixe (lumière venant d'en haut à gauche) + un éclat qui suit le pointeur */
.glass::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(110% 70% at 0% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),
    radial-gradient(320px circle at var(--mx,25%) var(--my,-30%),rgba(255,255,255,.60),rgba(255,255,255,0) 62%);
}
/* Liseré : la lumière traverse l'épaisseur du verre et ressort sur les bords opposés */
.glass::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.10) 32%,rgba(255,255,255,0) 58%,rgba(255,255,255,.55) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* Verre clair : presque transparent, le décor reste net et se courbe sur les bords.
   Réservé aux éléments flottants (navigation, badge, boutons, lentille du hero). */
.glass-clear{
  --glass-top:rgba(255,255,255,.30);--glass-bottom:rgba(255,255,255,.12);--glass-blur:2px;
  --glass-edge:rgba(255,255,255,.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 1px 0 0 rgba(255,255,255,.35),
    inset 0 -1px 1px rgba(20,24,29,.06),
    inset 0 -10px 18px -14px rgba(20,24,29,.18),
    0 1px 1px rgba(20,24,29,.05),
    0 12px 30px -16px rgba(20,24,29,.30);
}
/* Navigateurs sans réfraction (Safari, Firefox, mobile) : un peu plus de dépoli pour rester lisible */
html:not(.lg-supported) .glass-clear{--glass-top:rgba(255,255,255,.55);--glass-bottom:rgba(255,255,255,.32);--glass-blur:14px;}

/* Conteneur caché des filtres SVG de réfraction (créé par glass.js) */
.lg-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}

/* 6. NAVIGATION ------------------------------------------------------------- */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:14px clamp(12px,3vw,28px) 0;pointer-events:none;}
.nav-shell{
  pointer-events:auto;max-width:1180px;margin:0 auto;height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 10px 0 12px;border-radius:999px;
  transition:box-shadow .5s var(--ease);
}
.navbar.is-scrolled .nav-shell{--glass-top:rgba(255,255,255,.62);--glass-bottom:rgba(255,255,255,.44);--glass-blur:6px;}
.nav-mark{display:inline-flex;align-items:center;gap:.65rem;min-height:44px;padding-right:.4rem;font-weight:650;font-size:1rem;letter-spacing:-.01em;text-decoration:none;}
.nav-mono{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--ink);color:#fff;font-size:.78rem;font-weight:700;font-stretch:85%;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.nav-links{position:relative;display:flex;align-items:center;gap:.15rem;}
.nav-links a{
  position:relative;z-index:1;display:block;padding:.55rem .9rem;border-radius:999px;
  font-size:.92rem;font-weight:500;color:var(--ink-2);text-decoration:none;transition:color .3s;
}
.nav-links a:hover,.nav-links a.active{color:var(--ink);}
/* Indicateur du lien actif : une goutte de verre clair qui glisse et s'étire d'un lien à l'autre */
.nav-indicator{
  position:absolute;left:0;top:50%;z-index:0;width:0;height:38px;margin-top:-19px;border-radius:999px;pointer-events:none;
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(20,24,29,.08),0 8px 18px -10px rgba(20,24,29,.30);
  opacity:0;transition:opacity .35s var(--ease);
}
.nav-indicator.is-visible{opacity:1;}
html:not(.gsap-active) .nav-indicator{transition:opacity .35s var(--ease),transform .5s var(--ease),width .5s var(--ease);}

.nav-right{display:flex;align-items:center;gap:.8rem;}
.nav-status{display:flex;align-items:center;gap:.55rem;font-size:.82rem;color:var(--ink-2);padding-right:.2rem;}
.lang-toggle{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(20,24,29,.06);}
.lang-btn{min-width:40px;min-height:34px;padding:0 .7rem;border-radius:999px;font-size:.78rem;font-weight:650;letter-spacing:.03em;color:var(--ink-2);transition:background .3s var(--ease),color .3s;}
.lang-btn:hover{color:var(--ink);}
.lang-btn.is-active{background:var(--ink);color:#fff;}

.nav-toggle{display:none;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:'';display:block;width:18px;height:1.5px;border-radius:2px;background:var(--ink);position:relative;transition:transform .35s var(--ease),background .2s;}
.nav-toggle span::before{position:absolute;top:-6px;}
.nav-toggle span::after{position:absolute;top:6px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

.nav-mobile{
  display:none;position:fixed;z-index:999;top:86px;left:12px;right:12px;
  flex-direction:column;padding:.6rem;border-radius:var(--r-lg);
  --glass-top:rgba(255,255,255,.86);--glass-bottom:rgba(255,255,255,.74);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top center;
  transition:opacity .35s var(--ease),transform .45s var(--ease),visibility .35s;
}
.nav-mobile.is-open{opacity:1;visibility:visible;transform:none;}
.nav-mobile a{display:block;padding:.95rem 1.1rem;border-radius:14px;font-weight:550;color:var(--ink);text-decoration:none;}
.nav-mobile a:hover,.nav-mobile a:active{background:rgba(20,24,29,.05);}
.lang-toggle--menu{width:fit-content;margin:.6rem 1.1rem .5rem;}

/* 7. HERO ------------------------------------------------------------------ */
.hero{
  position:relative;z-index:2;display:flex;align-items:center;
  min-height:min(100svh,940px);padding:9rem clamp(1.25rem,4vw,3rem) 5rem;
}
.hero-grid{width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.eyebrow{display:block;margin-bottom:1.5rem;font-size:.95rem;font-weight:500;color:var(--ink-2);}
.hero-title{
  font-size:clamp(3.5rem,9.4vw,8.6rem);line-height:.86;font-weight:650;font-stretch:76%;letter-spacing:-.03em;
}
/* Chaque ligne du nom est un masque : le texte y monte à l'ouverture de la page */
.hero-title .line{display:block;overflow:hidden;padding:0 .04em .08em 0;margin-bottom:-.06em;}
.hero-title .line-in{display:inline-block;will-change:transform;}
.role{margin-top:1.5rem;font-size:clamp(1.15rem,2.1vw,1.5rem);font-weight:600;color:var(--accent);letter-spacing:-.01em;}
.lede{margin-top:.9rem;max-width:44ch;font-size:1.08rem;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem;}

.hero-visual{justify-self:end;width:100%;max-width:420px;display:flex;align-items:center;justify-content:flex-end;}
/* Le badge de disponibilité, simplement posé à droite du titre (plus de formes décoratives) */
.badge-float{position:relative;z-index:2;min-width:220px;padding:1rem 1.25rem;border-radius:20px;
  --glass-top:rgba(255,255,255,.66);--glass-bottom:rgba(255,255,255,.50);--glass-blur:10px;}
.badge-float .row{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600;color:var(--ink);}
.badge-float small{display:block;margin-top:.2rem;padding-left:1.2rem;font-size:.82rem;color:var(--ink-2);font-variant-numeric:tabular-nums;}

/* État de départ de l'ouverture (posé seulement si le JS tourne ; filet de sécurité dans boot.js) */
html.js:not(.reveal-failsafe):not(.intro-done) .intro{opacity:0;}
html.js:not(.reveal-failsafe):not(.intro-done) .hero-title .line-in{transform:translateY(108%);}

/* Emplacement d'image : fond neutre, et si l'image manque, une icône et sa légende */
.media-slot{position:relative;overflow:hidden;background:linear-gradient(160deg,#E4E9EB,#D6DDE0);}
.media-slot img{width:100%;height:100%;object-fit:cover;}
.media-slot.is-empty img{display:none;}
.media-slot.is-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;}
.media-slot.is-empty::before{
  content:'';width:32px;height:32px;opacity:.75;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359636D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.4'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E");
}
.media-slot.is-empty::after{content:attr(data-label);max-width:32ch;padding:0 1.3rem;text-align:center;font-size:.8rem;color:var(--ink-3);}

/* 8. BOUTONS ---------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:50px;padding:0 1.55rem;border-radius:999px;
  font-size:.96rem;font-weight:600;letter-spacing:-.005em;text-decoration:none;
  transition:scale .45s var(--spring),box-shadow .4s var(--ease),background-color .3s,border-color .3s;
}
.btn:active{scale:.965;}
.btn-primary{
  background:var(--accent);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.18),0 12px 26px -14px rgba(29,90,102,.75);
}
.btn-primary:hover{background:var(--accent-deep);}
.btn-ghost{
  background:rgba(255,255,255,.58);color:var(--ink);border:1px solid rgba(20,24,29,.12);
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px -12px rgba(20,24,29,.30);
}
.btn-ghost:hover{background:rgba(255,255,255,.85);border-color:rgba(20,24,29,.2);}
.btn svg{flex-shrink:0;}

/* 9. SECTIONS ---------------------------------------------------------------- */
section{position:relative;max-width:1180px;margin:0 auto;padding:6rem clamp(1.25rem,4vw,3rem);}
.section-title{
  max-width:16ch;margin-bottom:2.4rem;
  font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1;font-weight:650;font-stretch:80%;letter-spacing:-.025em;
}
.section-lede{max-width:58ch;margin:-1.2rem 0 2.4rem;font-size:1.06rem;}

/* 10. PROFIL ---------------------------------------------------------------- */
#profil{padding-top:2rem;}
.profile-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,.7fr);gap:1.25rem;align-items:stretch;}
.profile-panel{display:flex;align-items:center;padding:clamp(1.8rem,4vw,3rem);border-radius:var(--r-lg);}
.profile-panel .pull{font-size:clamp(1.15rem,1.9vw,1.42rem);line-height:1.5;font-weight:450;color:var(--ink);letter-spacing:-.005em;}
.profile-panel .qualities{margin-top:1.3rem;font-size:.95rem;}
.lang-row{display:grid;gap:1.25rem;}
.lang-row > div{
  display:flex;flex-direction:column;justify-content:center;padding:1.2rem 1.5rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow-1);
}
.lang-value{font-size:2.1rem;line-height:1;font-weight:650;font-stretch:78%;letter-spacing:-.02em;}
.lang-label{margin-top:.35rem;font-size:.86rem;color:var(--ink-2);}

/* 11. COMPÉTENCES -------------------------------------------------------------- */
.skills-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--r-lg);}
.skills-col{padding:2.1rem clamp(1.3rem,2.6vw,2.1rem);}
.skills-col + .skills-col{border-left:1px solid var(--line);}
.skills-col h3{margin-bottom:.7rem;font-size:1.04rem;font-weight:650;letter-spacing:-.01em;}
.skills-col p{font-size:.94rem;line-height:1.72;}
@media (max-width:1080px) and (min-width:861px){
  .skills-panel{grid-template-columns:repeat(2,minmax(0,1fr));}
  .skills-col + .skills-col{border-left:0;}
  .skills-col:nth-child(even){border-left:1px solid var(--line);}
  .skills-col:nth-child(n+3){border-top:1px solid var(--line);}
}

/* 12. PARCOURS — la ligne se remplit au scroll et allume chaque étape franchie ---- */
.timeline{position:relative;max-width:760px;padding-left:2.7rem;}
.timeline-line{position:absolute;left:8px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--line-2);overflow:hidden;}
.timeline-line-fill{position:absolute;inset:0;background:linear-gradient(180deg,var(--accent),#3E8592);transform:scaleY(0);transform-origin:top;}
.timeline-item{position:relative;padding-bottom:2.5rem;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{
  position:absolute;left:calc(-2.7rem + 2px);top:.28rem;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:2px solid rgba(20,24,29,.22);
  transition:border-color .45s var(--ease),background-color .45s var(--ease),box-shadow .45s var(--ease),transform .5s var(--spring);
}
.timeline-item.is-passed .timeline-dot{border-color:var(--accent);background:#fff;box-shadow:0 0 0 5px var(--accent-soft);transform:scale(1.08);}
.timeline-item h3{margin-bottom:.25rem;font-size:1.1rem;font-weight:650;letter-spacing:-.01em;}
.timeline-date{display:block;margin-bottom:.5rem;font-size:.86rem;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.timeline-item p{max-width:58ch;font-size:.96rem;}

/* 13. PROJETS -------------------------------------------------------------- */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem;}
.project-card{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:rgba(255,255,255,.80);border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 #fff,var(--shadow-2);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
@media (hover:hover){
  .projects-grid > .project-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(20,24,29,.05),0 30px 60px -28px rgba(20,24,29,.32),0 60px 110px -60px rgba(29,90,102,.4);}
}
.project-card .media-slot{aspect-ratio:4/3;}
.project-body{padding:1.7rem 1.9rem 1.95rem;}
.project-meta{display:block;margin-bottom:.55rem;font-size:.84rem;font-weight:500;color:var(--ink-3);}
.project-body h3{margin-bottom:.65rem;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.15;font-weight:650;font-stretch:86%;letter-spacing:-.02em;}
.project-body p{margin-bottom:.9rem;font-size:.95rem;}
.project-body ul{display:flex;flex-direction:column;gap:.5rem;}
.project-body li{position:relative;padding-left:1.1rem;font-size:.9rem;color:var(--ink-2);}
.project-body li::before{content:'';position:absolute;left:0;top:.68em;width:6px;height:2px;border-radius:2px;background:var(--accent);}
.project-body li strong{color:var(--ink);}

/* Chiffres clés : trois repères lisibles en une seconde */
.project-body .project-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:.4rem 0 .3rem;}
.project-body .project-stats li{
  display:flex;flex-direction:column;gap:.35rem;padding:.9rem .95rem .95rem;border-radius:var(--r-sm);
  background:rgba(237,240,241,.8);border:1px solid var(--line);color:var(--ink-2);
}
.project-body .project-stats li::before{display:none;}
.stat-value{font-size:2.1rem;line-height:1;font-weight:650;font-stretch:78%;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;}
.stat-label{font-size:.8rem;line-height:1.35;}

/* « Nouveautés » : toujours visible, en italique, avec un point d'accent */
.badge-new{
  display:inline-flex;align-items:center;gap:.5rem;margin:1.25rem 0 .7rem;padding:.32rem .8rem .32rem .65rem;border-radius:999px;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-deep);
  font-size:.82rem;font-weight:600;font-style:italic;
}
.badge-new::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);}

/* « Voir tous les détails » : pastille avec chevron qui pivote ; le bloc se déplie en hauteur */
.details-toggle{
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;margin-top:1.1rem;padding:.5rem 1.1rem;
  border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.7);
  font-size:.88rem;font-weight:600;color:var(--ink);transition:background-color .3s,border-color .3s;
}
.details-toggle::after{
  content:'';width:.45rem;height:.45rem;flex-shrink:0;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .45s var(--spring);
}
.details-toggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg);}
.details-toggle:hover{background:#fff;border-color:var(--accent-line);}
.project-body .badge-new,.project-body .details-toggle{align-self:flex-start;}
.project-more{max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .55s var(--ease),opacity .4s var(--ease),visibility 0s linear .55s;}
.project-more[hidden="until-found"]{visibility:visible;}
.project-more.is-open{opacity:1;visibility:visible;margin-top:.5rem;transition:max-height .55s var(--ease),opacity .45s var(--ease) .05s,visibility 0s;}
.more-group{margin:1.2rem 0 .6rem;font-size:.84rem;font-weight:650;color:var(--ink-3);}
.more-group:first-child{margin-top:.6rem;}
html:not(.js) .details-toggle{display:none;}
html:not(.js) .project-more{max-height:none;opacity:1;overflow:visible;visibility:visible;}

.project-card.feature{grid-column:1/-1;}
.project-card.feature .project-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.project-card.feature .media-slot{aspect-ratio:auto;height:100%;}
.project-card.feature .project-body{display:flex;flex-direction:column;justify-content:center;padding:2.5rem clamp(1.6rem,3vw,2.7rem);}
/* Carte principale (texte long) : l'image garde son format et reste visible pendant la lecture */
@media (min-width:861px){
  .projects-grid > .project-card.feature{overflow:clip;}
  .projects-grid > .project-card.feature .project-inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;}
  .projects-grid > .project-card.feature .media-slot{position:sticky;top:6rem;height:auto;aspect-ratio:4/3;}
  .projects-grid > .project-card.feature .project-body{justify-content:flex-start;}
}

/* 14. CARROUSEL — diapositives empilées, essuyage + parallaxe (GSAP), barre façon story */
.carousel{position:relative;margin-top:1.6rem;}
.carousel-viewport{position:relative;overflow:hidden;border-radius:var(--r-lg);}
.carousel-track{display:grid;}
.carousel-slide{grid-area:1/1;position:relative;opacity:0;pointer-events:none;clip-path:inset(0 0 0 100%);transition:opacity .7s var(--ease),clip-path .7s var(--ease);}
html.gsap-active .carousel-slide{transition:none;}
.carousel-slide.is-active{opacity:1;pointer-events:auto;clip-path:inset(0 0 0 0);z-index:2;}
.carousel-slide .project-card{height:100%;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.9);}
.carousel-slide .project-inner{height:100%;}
.media-slot img[data-fit="contain"]{object-fit:contain;padding:.9rem;}
.carousel-slide .media-slot img{transform:translateX(0) scale(1.06);}
html:not(.js) .carousel-slide{opacity:1;clip-path:none;pointer-events:auto;margin-bottom:1.4rem;}
html:not(.js) .carousel-progress,html:not(.js) .carousel-controls{display:none;}

.carousel-progress{display:flex;gap:6px;margin-bottom:.6rem;padding:0 .25rem;}
.carousel-seg{flex:1;height:24px;display:flex;align-items:center;border-radius:6px;}
.carousel-seg-bar{position:relative;display:block;width:100%;height:3px;border-radius:999px;background:var(--line-2);overflow:hidden;transition:height .25s var(--ease),background-color .3s;}
.carousel-seg:hover .carousel-seg-bar,.carousel-seg:focus-visible .carousel-seg-bar{height:6px;}
.carousel-seg[aria-selected="true"] .carousel-seg-bar{background:rgba(29,90,102,.28);}
.carousel-seg-fill{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;border-radius:inherit;}
.carousel-seg.is-done .carousel-seg-fill{transform:scaleX(1);}

.carousel-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.4rem;}
.carousel-btn{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:translate .45s var(--spring),scale .45s var(--spring);
}
.carousel-btn:hover{translate:0 -2px;}
.carousel-btn:active{scale:.94;}
.carousel-btn svg{width:18px;height:18px;}
.carousel-play svg{width:15px;height:15px;}
.carousel-counter{min-width:3.6em;text-align:center;font-size:.86rem;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;}

/* 15. GITHUB ---------------------------------------------------------------- */
.project-links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem;}
.github-next{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.6rem;
  margin-top:1.4rem;padding:1.35rem 1.6rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow-1);
}
.github-next p{flex:1 1 32ch;font-size:.96rem;}
.github-next p strong{color:var(--ink);}

/* 16. CONTACT --------------------------------------------------------------- */
.contact-card{max-width:660px;margin:0 auto;padding:3rem clamp(1.6rem,5vw,3.2rem);border-radius:var(--r-xl);text-align:center;}
.contact-status{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.6rem;padding:.5rem 1rem;border-radius:999px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);font-size:.86rem;font-weight:500;color:var(--ink-2);
}
.contact-card .glass-inner > p{margin-bottom:2rem;font-size:1.1rem;color:var(--ink);}
.contact-rows{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem;text-align:left;}
.contact-row{
  display:flex;align-items:center;gap:1rem;padding:.95rem 1.15rem;border-radius:16px;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(20,24,29,.04);
  text-decoration:none;transition:background-color .3s,transform .45s var(--spring),box-shadow .3s;
}
a.contact-row:hover{background:#fff;transform:translateY(-1px);box-shadow:0 10px 24px -16px rgba(20,24,29,.35);}
.contact-row .ico{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:38px;height:38px;border-radius:11px;background:var(--accent-soft);}
.contact-row .ico svg{width:18px;height:18px;stroke:var(--accent-deep);}
.contact-row .txt{min-width:0;}
.contact-row .txt small{display:block;font-size:.8rem;color:var(--ink-3);}
.contact-row .txt strong{font-size:.98rem;font-weight:600;color:var(--ink);}
.contact-row-wrap{display:flex;align-items:stretch;gap:.5rem;}
.contact-row-wrap .contact-row{flex:1;min-width:0;}
.copy-btn{
  width:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:16px;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);color:var(--ink-2);
  transition:background-color .3s,color .3s,transform .45s var(--spring);
}
.copy-btn:hover{background:#fff;color:var(--ink);}
.copy-btn:active{transform:scale(.94);}
.copy-btn.is-copied{color:var(--ok);}

/* 17. PIED DE PAGE, HAUT DE PAGE ----------------------------------------------- */
footer{position:relative;z-index:2;padding:2.6rem 1.5rem 3rem;text-align:center;border-top:1px solid var(--line);font-size:.86rem;}
footer > p{color:var(--ink-3);}
.legal{max-width:780px;margin:1.2rem auto 0;}
.legal summary{display:inline-flex;align-items:center;min-height:32px;cursor:pointer;list-style:none;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;}
.legal summary::-webkit-details-marker{display:none;}
.legal summary:hover{color:var(--ink);}
.legal[open] summary{margin-bottom:1rem;}
.legal-body{padding:1.4rem 1.6rem;border-radius:var(--r-md);text-align:left;line-height:1.65;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);color:var(--ink-2);}
.legal-body h2{margin-bottom:.8rem;font-size:1.08rem;}
.legal-body p{margin-bottom:.7rem;font-size:.88rem;}
.legal-body p:last-child{margin-bottom:0;}
.legal-body strong{color:var(--ink);}
.legal-body a{color:var(--accent-deep);text-underline-offset:2px;}

.back-to-top{
  position:fixed;right:1.3rem;bottom:1.3rem;z-index:800;width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  opacity:0;visibility:hidden;translate:0 12px;scale:.9;
  transition:opacity .4s var(--ease),translate .5s var(--spring),scale .5s var(--spring),visibility .4s;
}
.back-to-top.is-visible{opacity:1;visibility:visible;translate:0 0;scale:1;}
.back-to-top.is-visible:active{scale:.92;}

/* 18. APPARITIONS AU SCROLL ------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(18px);}
html:not(.gsap-active) .reveal{transition:opacity .9s var(--ease),transform .9s var(--ease);}
html.gsap-active .reveal:not(.in-view){transition:none;}
.reveal.in-view,html.reveal-failsafe .reveal,html:not(.js) .reveal{opacity:1;transform:none;}
html.reveal-failsafe .reveal:not(.in-view){transition:opacity .6s var(--ease),transform .6s var(--ease);}

/* 19. RESPONSIVE ---------------------------------------------------------------- */
@media (max-width:1040px){
  .nav-status{display:none;}
}
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav-mobile{display:flex;}
  .nav-shell{height:58px;}
  .nav-right{gap:.4rem;}
  .navbar .lang-toggle{display:none;}           /* la langue est dans le menu */
  .hero{min-height:0;padding-top:7.5rem;padding-bottom:3.5rem;}
  .hero-grid{grid-template-columns:1fr;gap:1.8rem;}
  /* Mobile : le badge de disponibilité se place sous les boutons */
  .hero-visual{justify-self:start;max-width:none;width:auto;aspect-ratio:auto;display:block;}
  .badge-float{display:inline-block;min-width:0;}
  .profile-grid{grid-template-columns:1fr;}
  .lang-row{grid-template-columns:1fr 1fr;}
  .skills-panel{grid-template-columns:1fr;}
  .skills-col + .skills-col{border-left:0;border-top:1px solid var(--line);}
  .project-card.feature .project-inner{grid-template-columns:1fr;}
  .projects-grid > .project-card.feature .media-slot{aspect-ratio:16/10;height:auto;}
  .carousel-slide .project-inner{grid-template-rows:auto 1fr;}
  .carousel-slide .media-slot{aspect-ratio:16/10;height:auto;}
  .carousel-slide .project-body{justify-content:flex-start;}
  section{padding:4.5rem 1.25rem;}
}
@media (max-width:480px){
  .navbar{padding:10px 10px 0;}
  .nav-mobile{top:76px;left:10px;right:10px;}
  .hero-title{font-size:clamp(3.2rem,17vw,4.6rem);}
  .hero-ctas .btn{flex:1 1 auto;}
  .project-body{padding:1.4rem 1.25rem 1.6rem;}
  .project-card.feature .project-body{padding:1.6rem 1.25rem 1.8rem;}
  .project-body .project-stats{gap:.35rem;}
  .project-body .project-stats li{padding:.75rem .65rem .8rem;}
  .stat-value{font-size:1.7rem;}
  .contact-card{padding:2.4rem 1.1rem;}
  .contact-row{gap:.75rem;padding:.85rem .9rem;}
  .contact-row-wrap{gap:.4rem;}
  .copy-btn{width:46px;}
}

/* 20. PRÉFÉRENCES D'ACCESSIBILITÉ --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .halo{animation:none;}
  .reveal{opacity:1;transform:none;}
}
/* Transparence réduite (réglage du système) : surfaces pleines, sans flou */
@media (prefers-reduced-transparency:reduce){
  .glass,.project-card,.btn-ghost{background:#fff !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
  .halo{display:none;}
}
/* Contraste élevé de Windows : les bords des panneaux restent visibles */
@media (forced-colors:active){
  .glass,.project-card,.contact-row,.lang-row > div{border:1px solid CanvasText;}
  .glass::before,.glass::after,.ambient{display:none;}
}

/* 21. IMPRESSION — un recruteur imprime souvent un profil ------------------------------ */
@media print{
  body{background:#fff;color:#000;}
  .navbar,.nav-mobile,.ambient,.badge-float,.back-to-top,.details-toggle,.carousel-progress,.carousel-controls{display:none !important;}
  a{color:#000;text-decoration:underline;}
  .glass,.project-card{background:#fff !important;box-shadow:none !important;border:1px solid #ccc !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
  .glass::before,.glass::after{display:none;}
  .reveal,.intro,.hero-title .line-in{opacity:1 !important;transform:none !important;transition:none !important;}
  .hero{min-height:0;padding:1rem 0;}
  section{padding:1.5rem 0;}
  .projects-grid > .project-card.feature .media-slot{position:static;}
  .project-more,.project-more[hidden]{display:block !important;content-visibility:visible !important;max-height:none !important;opacity:1 !important;visibility:visible !important;overflow:visible !important;}
  .carousel-viewport{overflow:visible;}
  .carousel-track{display:block !important;}
  .carousel-slide{position:relative !important;opacity:1 !important;clip-path:none !important;margin-bottom:1rem;}
  .carousel-slide .media-slot img{transform:none !important;}
  .hero-visual{aspect-ratio:auto;max-width:none;}
  .badge-float{position:static !important;}
  .timeline-item,.lang-row,.skills-col,.contact-row,.carousel-slide,.project-stats{break-inside:avoid;}
  .contact-row[href^="mailto"]::after{content:" — " attr(href);font-size:.75rem;color:#555;}
}