:root{
    --ink:#0c0d18;
    --ink-2:#13142a;          /* intro grain transition only — stays fixed */
    --surface-2:#13142a;      /* project-thumb base, themed */
    --paper:#ece7dd;
    --paper-dim:#a9a59c;
    --line: rgba(236,231,221,0.14);
    --glass-rgb:236,231,221;
    --card-rgb:236,231,221;
    --accent:#3f6f96;
    --accent-light:#8fb8d6;   /* constant: used only against the always-dark thumb art */
    --accent-text:#8fb8d6;    /* themed emphasis color, swaps with the page background */
    --ripple-rgb:143,184,214;
    --blend-water:screen;
    --ink-rgb:12,13,24;

    /* ---- verre dépoli (glassmorphism) ---- */
    --glass-blur: blur(16px) saturate(1.45);
    --glass-blur-soft: blur(10px) saturate(1.3);
    --glass-bg: rgba(var(--glass-rgb),0.06);
    --glass-bg-strong: rgba(var(--glass-rgb),0.55);

    /* ---- animation tokens (driven by [data-anim] profile) ---- */
    --ease-water: cubic-bezier(.2,.72,.24,1);   /* settles like a wave reaching shore */
    --ease-soft:  cubic-bezier(.16,1,.3,1);     /* long, breathy ease-out */
    --rev-dur: .95s;
    --rev-shift: 30px;
    --rev-blur: 6px;
    --rev-scale: .986;
    --rev-stagger: .09s;
    --rev-ease: var(--ease-water);
    --theme-dur: .5s;
    --hero-dur: .9s;
  }

  /* Profile A — "Onde" : water-forward, gentle overshoot-free settle */
  [data-anim="onde"]{
    --rev-dur:.95s; --rev-shift:30px; --rev-blur:6px; --rev-scale:.986;
    --rev-stagger:.09s; --rev-ease:var(--ease-water);
    --theme-dur:.55s; --hero-dur:.9s;
  }
  /* Profile B — "Souffle" : slower, near-pure fade, minimal travel */
  [data-anim="souffle"]{
    --rev-dur:1.35s; --rev-shift:14px; --rev-blur:2px; --rev-scale:.994;
    --rev-stagger:.14s; --rev-ease:var(--ease-soft);
    --theme-dur:.8s; --hero-dur:1.25s;
  }

  [data-theme="light"]{
    --ink:#eef1ef;
    --surface-2:#dde6e9;
    --paper:#12141f;
    --paper-dim:#5c5d68;
    --line: rgba(18,20,31,0.12);
    --glass-rgb:18,20,31;
    --card-rgb:18,20,31;
    --accent:#2f5a7d;
    --accent-text:#1f4f73;
    --ripple-rgb:47,90,125;
    --blend-water:multiply;
    --ink-rgb:238,241,239;
  }

  html{ transition:background-color var(--theme-dur) var(--ease-soft); }
  body{ transition:background-color var(--theme-dur) var(--ease-soft), color var(--theme-dur) var(--ease-soft); }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  html,body{
    background:var(--ink);
    color:var(--paper);
    font-family:'Inter',sans-serif;
    overflow-x:clip; /* aucun débordement horizontal sur mobile */
  }

  :focus-visible{
    outline:2px solid var(--accent-text);
    outline-offset:3px;
    border-radius:6px;
  }

  ::selection{ background:var(--accent); color:var(--paper); }

  a{ color:inherit; }

  /* ===================================================
     STAGE — intro loader + hero (first viewport)
     =================================================== */
  #stage{
    position:relative;
    width:100%;
    height:100vh;
    height:100svh; /* mobile : hauteur visible réelle, barre d'URL comprise */
    background:var(--ink);
  }

  #water{
    position:fixed;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    mix-blend-mode:screen;
    opacity:1;
    pointer-events:none;
  }

  /* ---------- loader ---------- */
  #loader{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:30;
  }
  /* halo sous-marin qui respire pendant que les mots apparaissent */
  #loader::before{
    content:"";
    position:absolute;
    left:50%; top:50%;
    width:min(72vmin, 640px); height:min(72vmin, 640px);
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,
      rgba(63,111,150,0.30) 0%,
      rgba(63,111,150,0.14) 34%,
      rgba(143,184,214,0.05) 58%,
      transparent 72%);
    filter:blur(18px);
    animation:loaderGlow 3.6s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes loaderGlow{
    0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(0.94); }
    50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); }
  }
  @media (prefers-reduced-motion: reduce){
    #loader::before{ animation:none; opacity:.7; }
  }
  #loader-text{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:700;
    font-size:clamp(20px, 3.4vw, 40px);
    letter-spacing:-0.01em;
    color:var(--paper);
    white-space:nowrap;
    display:flex;
    gap:0.4ch;
  }
  #loader-text span{
    opacity:0;
    transform:translateY(14px);
    filter:blur(7px);
    transition:opacity .6s var(--ease-water), transform .6s var(--ease-water), filter .6s var(--ease-water);
  }
  /* le dernier mot — "Livrer." — prend la couleur de l'eau */
  #loader-text span:last-child{
    background:linear-gradient(120deg, #8fb8d6 0%, #5c8fb8 55%, #8fb8d6 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:#8fb8d6;
  }
  #loader-text span.show{ opacity:1; transform:translateY(0); filter:blur(0); }
  #loader-text.collapse span{
    opacity:0; transform:translateY(-6px); filter:blur(6px);
    transition:opacity .4s ease, transform .4s ease, filter .4s ease;
  }

  #dot{
    position:absolute;
    top:50%; left:50%;
    width:10px; height:10px;
    border-radius:50%;
    background:#8fb8d6;
    box-shadow:0 0 14px rgba(143,184,214,0.8), 0 0 34px rgba(63,111,150,0.5);
    transform:translate(-50%,-50%) scale(0);
    opacity:0;
    transition:opacity .35s ease, transform .35s cubic-bezier(.5,0,.2,1);
    z-index:31;
  }
  #dot.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  #dot.pulse{ animation:pulse 1.1s ease-in-out infinite; }
  /* anneaux d'onde émis par la goutte, comme à la surface de l'eau */
  #dot::before, #dot::after{
    content:"";
    position:absolute; inset:-3px;
    border-radius:50%;
    border:1.5px solid rgba(143,184,214,0.65);
    opacity:0;
  }
  #dot.pulse::before{ animation:dotRing 1.1s ease-out infinite; }
  #dot.pulse::after{ animation:dotRing 1.1s ease-out .38s infinite; }
  @keyframes dotRing{
    from{ transform:scale(1); opacity:.7; }
    to{ transform:scale(5.5); opacity:0; }
  }
  @keyframes pulse{
    0%,100%{ transform:translate(-50%,-50%) scale(1); }
    50%{ transform:translate(-50%,-50%) scale(1.35); }
  }
  @media (prefers-reduced-motion: reduce){
    #dot::before, #dot::after{ display:none; }
  }

  #reveal{
    position:absolute;
    top:50%; left:50%;
    width:14px; height:14px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    overflow:hidden;
    z-index:25;
    opacity:1;
    transition:width 1.15s cubic-bezier(.62,0,.2,1), height 1.15s cubic-bezier(.62,0,.2,1), border-radius 1.15s ease, opacity .7s ease .15s;
  }
  #reveal.grow{ width:300vmax; height:300vmax; border-radius:0; }
  #reveal.fade{ opacity:0; }
  /* onde circulaire qui précède le cercle, comme la crête d'une vague */
  #ring{
    position:absolute;
    top:50%; left:50%;
    width:14px; height:14px;
    border-radius:50%;
    border:2px solid rgba(143,184,214,0.55);
    transform:translate(-50%,-50%) scale(1);
    opacity:0;
    pointer-events:none;
    z-index:26;
  }
  #ring.go{ animation:ringGo 1.3s cubic-bezier(.5,0,.15,1) forwards; }
  @keyframes ringGo{
    0%{ transform:translate(-50%,-50%) scale(1); opacity:.9; border-width:2px; }
    100%{ transform:translate(-50%,-50%) scale(160); opacity:0; border-width:.5px; }
  }
  @media (prefers-reduced-motion: reduce){
    #ring{ display:none; }
  }
  /* couleur unie — le cercle qui grandit est un aplat bleu océan */
  #reveal::before{
    content:"";
    position:absolute; inset:-20%;
    background:#3f6f96;
  }

  /* ===================================================
     RIDEAUX DE MARÉE — deux couches unies à bord de vague
     qui remontent pour dévoiler le site
     =================================================== */
  .curtain{
    position:fixed; left:0; top:0;
    width:100%; height:100vh;
    height:100lvh; /* couvre toujours tout l'écran, même barre d'URL rétractée */
    display:none;
    pointer-events:none;
    will-change:transform;
  }
  .curtain.on{ display:block; }
  .curtain::after{
    content:"";
    position:absolute; top:calc(100% - 1px); left:0;
    width:100%; height:56px;
    background-repeat:repeat-x;
    background-size:150px 56px;
  }
  #curtain1{ z-index:25; background:#3f6f96; }
  #curtain1::after{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='56'><path d='M0,28 C18.75,9 37.5,9 56.25,28 C75,47 93.75,47 112.5,28 C131.25,9 150,9 150,28 L150,0 L0,0 Z' fill='%233f6f96'/></svg>");
  }
  #curtain2{ z-index:24; background:#8fb8d6; }
  #curtain2::after{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='56'><path d='M0,28 C18.75,9 37.5,9 56.25,28 C75,47 93.75,47 112.5,28 C131.25,9 150,9 150,28 L150,0 L0,0 Z' fill='%238fb8d6'/></svg>");
  }
  .curtain.up{
    transform:translateY(calc(-100% - 60px));
    transition:transform 1.5s cubic-bezier(.72,0,.2,1);
  }
  #curtain2.up{ transition-duration:1.65s; }
  @media (prefers-reduced-motion: reduce){
    .curtain.up{ transition-duration:.01ms; }
  }

  /* ---------- hero ---------- */
  #hero{
    position:absolute; inset:0; z-index:10;
    opacity:0;
    transition:opacity .5s ease;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:28px 36px 36px;
  }
  #hero.show{ opacity:1; }

  /* staggered hero entrance — each piece rises out of the water */
  #hero nav, #hero .hero-name, #hero .avatar, #hero .hero-foot p, #hero .scroll-cue{
    opacity:0;
    transform:translateY(22px);
    filter:blur(5px);
    transition:opacity var(--hero-dur) var(--rev-ease),
               transform var(--hero-dur) var(--rev-ease),
               filter var(--hero-dur) var(--rev-ease);
  }
  #hero.show nav{ transition-delay:.05s; }
  #hero.show .hero-name{ transition-delay:.18s; }
  #hero.show .avatar{ transition-delay:.34s; }
  #hero.show .hero-foot p:first-child{ transition-delay:.42s; }
  #hero.show .hero-foot p:last-child{ transition-delay:.50s; }
  #hero.show .scroll-cue{ transition-delay:.62s; }
  #hero.show nav, #hero.show .hero-name, #hero.show .avatar,
  #hero.show .hero-foot p, #hero.show .scroll-cue{
    opacity:1; transform:translateY(0); filter:blur(0);
  }
  #hero.show .scroll-cue{ opacity:1; }
  .avatar{ transition:opacity var(--hero-dur) var(--rev-ease), transform var(--hero-dur) var(--rev-ease), filter var(--hero-dur) var(--rev-ease); }
  @media (prefers-reduced-motion: reduce){
    #hero nav, #hero .hero-name, #hero .avatar, #hero .hero-foot p, #hero .scroll-cue{
      transition-duration:.01ms; transform:none; filter:none;
    }
  }

  nav{ display:flex; align-items:center; justify-content:space-between; }
  .book-btn{
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.06em;
    color:var(--paper); background:var(--glass-bg); border:1px solid var(--line);
    -webkit-backdrop-filter:var(--glass-blur-soft);
    backdrop-filter:var(--glass-blur-soft);
    padding:10px 18px; border-radius:999px; cursor:pointer;
    transition:background .25s ease, color .25s ease, border-color .25s ease;
  }
  .book-btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
  .nav-links{ display:flex; gap:28px; }
  .nav-links a{ font-size:13px; font-weight:600; text-decoration:none; opacity:.85; transition:opacity .2s ease; }
  .nav-links a:hover{ opacity:1; }

  .hero-mid{ position:relative; display:flex; align-items:center; justify-content:center; flex:1; }
  h1{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800; letter-spacing:-0.03em;
    line-height:0.86; font-size:clamp(56px, 11vw, 130px); text-align:center; color:var(--paper);
  }

  /* ------ bloc nom : vague + rôle sous le titre ------ */
  .hero-name{
    display:flex; flex-direction:column; align-items:center;
    gap:clamp(14px, 2.4vh, 22px);
  }
  /* reflet d'eau qui glisse lentement sur le nom */
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .hero-name h1{
      background:linear-gradient(var(--paper), var(--paper)); /* filet de sécurité si color-mix inconnu */
      background:linear-gradient(112deg,
        var(--paper) 0%, var(--paper) 40%,
        color-mix(in srgb, var(--accent) 55%, #ffffff) 50%,
        var(--paper) 60%, var(--paper) 100%);
      background-size:230% 100%;
      background-position:100% 0;
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      color:transparent;
      animation:nameSheen 7.5s ease-in-out infinite;
    }
  }
  @keyframes nameSheen{
    0%{ background-position:100% 0; }
    55%{ background-position:0% 0; }
    100%{ background-position:100% 0; }
  }
  /* la vague coule sous le nom (motif périodique : boucle invisible) */
  .name-wave{
    width:clamp(120px, 15vw, 180px); height:12px;
    color:var(--accent); overflow:hidden; display:block;
  }
  .name-wave path{ animation:waveFlow 5s linear infinite; }
  @keyframes waveFlow{ to{ transform:translateX(-48px); } }
  .hero-role{
    font-family:'Inter', sans-serif;
    font-size:clamp(10px, 1.2vw, 13px); font-weight:600;
    letter-spacing:.22em; text-transform:uppercase; line-height:1.9;
    text-align:center; color:var(--paper-dim);
    padding:0 16px;
  }
  @media (prefers-reduced-motion: reduce){
    .hero-name h1, .name-wave path{ animation:none; }
  }
  @media (max-width:640px){
    .hero-role{ letter-spacing:.15em; }
  }
  .avatar{
    /* décalé vers le bas : le badge "Disponible" ne passe plus sous le bouton de thème */
    position:absolute; top:36px; right:0;
    width:clamp(92px,9vw,124px); height:clamp(92px,9vw,124px);
    border-radius:22px;
    border:1px solid var(--line);
    background:rgba(var(--glass-rgb),0.10);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    box-shadow:0 18px 40px rgba(0,0,0,0.35);
  }
  .avatar img{
    width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block;
    border-radius:inherit; overflow:hidden;
    transform:scale(1.02);
    transition:transform 1.2s var(--ease-water), filter 1.2s var(--ease-water);
  }
  .avatar::after{
    content:""; position:absolute; inset:0; border-radius:inherit;
    box-shadow:inset 0 0 0 1px rgba(var(--glass-rgb),0.35);
    background:linear-gradient(150deg, rgba(63,111,150,0.22), transparent 55%);
    mix-blend-mode:screen; pointer-events:none;
  }
  #hero:hover .avatar img{ transform:scale(1.08); }
  /* live status dot */
  .avatar-status{
    position:absolute; top:0; right:0;
    display:flex; align-items:center; gap:6px;
    transform:translate(-10px, calc(-100% - 8px));
    font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    color:var(--paper-dim); white-space:nowrap;
  }
  .avatar-status i{
    width:7px; height:7px; border-radius:50%; background:#57c98a;
    box-shadow:0 0 0 0 rgba(87,201,138,0.6); animation:pulseDot 2.4s ease-out infinite;
  }
  @keyframes pulseDot{
    0%{ box-shadow:0 0 0 0 rgba(87,201,138,0.55); }
    70%{ box-shadow:0 0 0 7px rgba(87,201,138,0); }
    100%{ box-shadow:0 0 0 0 rgba(87,201,138,0); }
  }

  .hero-foot{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .hero-foot p{ max-width:380px; font-size:14.5px; font-weight:500; line-height:1.45; }
  .hero-foot p:last-child{ text-align:right; margin-left:auto; }
  .hero-foot a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--paper-dim); }

  .scroll-cue{
    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
    font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-dim);
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .scroll-cue::after{
    content:""; width:1px; height:26px; background:var(--paper-dim);
    animation:scrollCue 1.8s ease-in-out infinite;
  }
  @keyframes scrollCue{ 0%,100%{ opacity:.2; transform:scaleY(.4); } 50%{ opacity:1; transform:scaleY(1); } }

  @media (max-width:640px){
    #hero{ padding:20px 18px 24px; }
    .hero-foot{ flex-direction:column; }
    .hero-foot p:last-child{ text-align:left; margin-left:0; }
    .nav-links{ gap:16px; }
    .scroll-cue{ display:none; }
  }

  /* ===================================================
     SHARED SECTION LAYOUT
     =================================================== */
  main, .contact{ position:relative; z-index:1; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 36px; }
  section{ padding:120px 0; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    color:var(--paper-dim); margin-bottom:36px;
  }
  .eyebrow::before{
    content:"";
    width:26px; height:8px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='8'><path d='M0,4 C3.25,1 6.5,1 9.75,4 C13,7 16.25,7 19.5,4 C22.75,1 26,1 26,4' fill='none' stroke='%238fb8d6' stroke-width='1.4'/></svg>");
    background-repeat:no-repeat;
    flex-shrink:0;
  }
  .reveal{
    opacity:0;
    transform:translateY(var(--rev-shift)) scale(var(--rev-scale));
    filter:blur(var(--rev-blur));
    transition:opacity var(--rev-dur) var(--rev-ease),
               transform var(--rev-dur) var(--rev-ease),
               filter var(--rev-dur) var(--rev-ease);
    transition-delay:calc(var(--reveal-i, 0) * var(--rev-stagger));
    will-change:opacity, transform, filter;
  }
  .reveal.in-view{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); will-change:auto; }
  /* directional variants — set via JS for rhythm */
  .reveal.from-left{ transform:translate(calc(var(--rev-shift) * -0.9), 0) scale(var(--rev-scale)); }
  .reveal.from-right{ transform:translate(calc(var(--rev-shift) * 0.9), 0) scale(var(--rev-scale)); }
  .reveal.from-left.in-view, .reveal.from-right.in-view{ transform:translate(0,0) scale(1); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ transition-duration:.01ms; transform:none; filter:none; }
  }

  /* ===================================================
     WAVE DIVIDER — recurring water motif between sections
     =================================================== */
  .wave-divider{
    position:relative;
    z-index:1;
    width:100%;
    height:44px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='44'><path d='M0,22 C18.75,7 37.5,7 56.25,22 C75,37 93.75,37 112.5,22 C131.25,7 150,7 150,22' fill='none' stroke='%238fb8d6' stroke-width='1.5' stroke-opacity='0.5'/></svg>");
    background-repeat:repeat-x;
    background-position:0 center;
    animation:waveScroll 10s linear infinite;
  }
  .wave-divider.dim{ opacity:.55; height:32px; }
  @keyframes waveScroll{ from{ background-position-x:0; } to{ background-position-x:-150px; } }
  @media (prefers-reduced-motion: reduce){
    .wave-divider{ animation:none; }
  }
  [data-theme="light"] .eyebrow::before{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='8'><path d='M0,4 C3.25,1 6.5,1 9.75,4 C13,7 16.25,7 19.5,4 C22.75,1 26,1 26,4' fill='none' stroke='%232f5a7d' stroke-width='1.4'/></svg>");
  }
  [data-theme="light"] .wave-divider{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='44'><path d='M0,22 C18.75,7 37.5,7 56.25,22 C75,37 93.75,37 112.5,22 C131.25,7 150,7 150,22' fill='none' stroke='%232f5a7d' stroke-width='2' stroke-opacity='0.85'/></svg>");
  }

  /* ===================================================
     ABOUT — statement + bio
     =================================================== */
  .statement{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:800; text-transform:uppercase; letter-spacing:-0.02em;
    line-height:0.98; font-size:clamp(30px, 5.4vw, 60px);
    max-width:980px; margin-bottom:56px;
  }
  .statement em{ font-style:normal; color:var(--accent-text); }

  .about-copy{ display:grid; grid-template-columns:1fr 1fr; gap:56px; max-width:1000px; }
  .about-copy p{ font-size:15px; color:var(--paper-dim); line-height:1.7; margin-bottom:18px; }
  .about-copy p:last-child{ margin-bottom:0; }
  .about-copy strong{ color:var(--paper); font-weight:600; }

  /* about layout with sticky portrait */
  .about-layout{ display:grid; grid-template-columns:1fr 320px; gap:72px; align-items:start; }
  .about-main{ min-width:0; }
  .about-layout .about-copy{ grid-template-columns:1fr; max-width:none; }
  .about-portrait{
    position:sticky; top:96px; margin:0;
  }
  .about-portrait .frame{
    position:relative; border-radius:20px; overflow:hidden;
    border:1px solid var(--line);
    box-shadow:0 30px 70px rgba(0,0,0,0.4);
    aspect-ratio:4/5;
  }
  .about-portrait img{
    width:100%; height:100%; object-fit:cover; display:block;
    transform:scale(1.03);
    transition:transform 1.4s var(--ease-water);
  }
  .about-portrait:hover img{ transform:scale(1.08); }
  .about-portrait .frame::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 55%, rgba(8,9,18,0.55));
    pointer-events:none;
  }
  .about-portrait figcaption{
    position:absolute; left:16px; right:16px; bottom:14px; z-index:2;
    display:flex; justify-content:space-between; align-items:flex-end;
    font-size:12px; color:var(--paper);
  }
  .about-portrait figcaption b{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; letter-spacing:-.01em; font-size:15px; }
  .about-portrait figcaption span{ color:rgba(236,231,221,0.7); font-weight:500; }
  /* reveal: rises + un-blurs like the rest, plus a clip wipe */
  .about-portrait .frame{ clip-path:inset(0 0 0 0 round 20px); }
  .about-portrait.reveal{ --rev-shift:40px; }
  @media (max-width:920px){
    .about-layout{ grid-template-columns:1fr; gap:44px; }
    .about-portrait{ position:static; max-width:360px; }
  }

  @media (max-width:760px){
    .about-copy{ grid-template-columns:1fr; gap:24px; }
  }

  /* ===================================================
     STACK
     =================================================== */
  .stack-intro{ max-width:600px; font-size:15px; color:var(--paper-dim); line-height:1.6; margin:-8px 0 40px; }
  .stack-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
  .stack-group{
    position:relative; overflow:hidden;
    padding:26px 24px 24px;
    border:1px solid var(--line); border-radius:18px;
    background:rgba(var(--glass-rgb),0.05);
    -webkit-backdrop-filter:var(--glass-blur-soft);
    backdrop-filter:var(--glass-blur-soft);
    transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
  }
  .stack-group:hover{ transform:translateY(-5px); border-color:var(--accent); box-shadow:0 20px 46px rgba(0,0,0,0.24); }
  .stack-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .stack-ico{
    width:38px; height:38px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:12px; border:1px solid var(--line);
    background:rgba(var(--glass-rgb),0.08);
    color:var(--accent);
  }
  .stack-ico svg{ width:19px; height:19px; }
  .stack-group h4{
    font-family:'Bricolage Grotesque', sans-serif; font-size:15px; font-weight:700;
    color:var(--paper);
  }
  .stack-sub{ font-size:13px; color:var(--paper-dim); line-height:1.55; margin-bottom:18px; }
  .stack-group ul{ list-style:none; display:flex; flex-wrap:wrap; gap:9px; }
  .stack-group li{
    font-size:13px; color:var(--paper-dim); border:1px solid var(--line); border-radius:8px;
    padding:8px 13px;
    background:rgba(var(--glass-rgb),0.04);
    -webkit-backdrop-filter:var(--glass-blur-soft);
    backdrop-filter:var(--glass-blur-soft);
    transition:color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease;
  }
  .stack-group li:hover{ transform:translateY(-2px); background:rgba(var(--glass-rgb),0.08); }
  .stack-group li:hover{ color:var(--paper); border-color:var(--accent); }
  /* compétences phares : chip teintée à l'accent */
  .stack-group li.lead{
    color:var(--paper); font-weight:600;
    border-color:rgba(63,111,150,0.55);
    background:rgba(63,111,150,0.16);
    border-color:color-mix(in srgb, var(--accent) 55%, transparent);
    background:color-mix(in srgb, var(--accent) 15%, transparent);
  }

  @media (max-width:990px){
    .stack-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .stack-group:last-child{ grid-column:1 / -1; }
  }
  @media (max-width:640px){
    .stack-grid{ grid-template-columns:1fr; gap:16px; }
    .stack-group:last-child{ grid-column:auto; }
  }

  /* ===================================================
     PROJECTS — full-width sticky stacking cards
     =================================================== */
  .work{ padding-bottom:60px; }
  .work-intro{ max-width:600px; font-size:15px; color:var(--paper-dim); line-height:1.6; margin-bottom:24px; }

  .work-stack{ position:relative; }
  .project-card{
    position:sticky;
    top:90px;
    margin-bottom:40px;
    border:1px solid var(--line);
    border-radius:22px;
    overflow:hidden;
    background:rgba(var(--ink-rgb),0.72);
    -webkit-backdrop-filter:blur(20px) saturate(1.25);
    backdrop-filter:blur(20px) saturate(1.25);
    box-shadow:0 -10px 40px rgba(0,0,0,0.35);
    transition:border-color .35s ease, transform .5s var(--ease-water), opacity .5s var(--ease-water), filter .5s var(--ease-water);
    transform-origin:center top;
    display:grid;
    grid-template-columns:1.15fr 1fr;
    min-height:380px;
  }
  .project-card:hover{ border-color:var(--accent); }

  /* visual side */
  .project-thumb{ position:relative; overflow:hidden; min-height:380px; }
  .project-thumb::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.16) 48%, transparent 64%);
    transform:translateX(-130%);
    transition:transform .9s ease;
    z-index:2; pointer-events:none;
  }
  .project-card:hover .project-thumb::before{ transform:translateX(130%); }
  .project-thumb::after{
    content:"";
    position:absolute; inset:-20%;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode:overlay; opacity:.55;
  }
  .work-stack .project-card:nth-child(6n+1) .project-thumb{ background:radial-gradient(120% 110% at 18% 18%, #355b80 0%, transparent 58%), radial-gradient(120% 110% at 82% 82%, #1c1d33 0%, transparent 60%), var(--surface-2); }
  .work-stack .project-card:nth-child(6n+2) .project-thumb{ background:radial-gradient(120% 110% at 82% 22%, #4d3f66 0%, transparent 58%), radial-gradient(120% 110% at 18% 82%, #1c1d33 0%, transparent 60%), var(--surface-2); }
  .work-stack .project-card:nth-child(6n+3) .project-thumb{ background:radial-gradient(120% 110% at 50% 12%, #2c6a63 0%, transparent 58%), radial-gradient(120% 110% at 22% 88%, #1c1d33 0%, transparent 60%), var(--surface-2); }
  .work-stack .project-card:nth-child(6n+4) .project-thumb{ background:radial-gradient(120% 110% at 82% 82%, #6b4f3a 0%, transparent 58%), radial-gradient(120% 110% at 14% 22%, #1c1d33 0%, transparent 60%), var(--surface-2); }
  .work-stack .project-card:nth-child(6n+5) .project-thumb{ background:radial-gradient(120% 110% at 22% 82%, #3f6f96 0%, transparent 58%), radial-gradient(120% 110% at 88% 14%, #1c1d33 0%, transparent 60%), var(--surface-2); }
  .work-stack .project-card:nth-child(6n+6) .project-thumb{ background:radial-gradient(120% 110% at 72% 28%, #5a4368 0%, transparent 58%), radial-gradient(120% 110% at 14% 88%, #1c1d33 0%, transparent 60%), var(--surface-2); }

  .project-thumb{ position:relative; overflow:hidden; min-height:380px; display:flex; align-items:center; justify-content:center; }

  /* ---- laptop mock inside the project thumb ---- */
  .laptop{
    position:relative;
    width:min(82%, 360px);
    perspective:1500px;
    z-index:2;
    container-type:inline-size;
    container-name:lap;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .35s var(--ease-water);
  }
  .laptop:active{ transform:scale(.985); }
  .laptop:focus-visible{ outline:2px solid var(--accent-text); outline-offset:8px; border-radius:14px; }
  .laptop-lid{
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    transform-style:preserve-3d;
    transform-origin:50% 100%;
    transform:rotateX(-4deg);
    transition:transform 1.05s cubic-bezier(.66,0,.2,1);
    will-change:transform;
  }
  .project-card:hover .laptop[data-open="true"] .laptop-lid{ transform:rotateX(-7deg); }
  /* fermé : l'écran bascule vers l'avant sur le clavier (comme un vrai portable),
     et s'arrête à -84° pour laisser voir le capot alu en légère plongée */
  .laptop[data-open="false"] .laptop-lid{
    transform:rotateX(-84deg);
    transition-duration:.9s;
    transition-timing-function:cubic-bezier(.55,0,.25,1);
  }
  .lid-face, .lid-back{
    position:absolute; inset:0;
    border-radius:13px 13px 7px 7px;
    overflow:hidden;
  }
  .lid-face{
    background:#0a0b15;
    border:2px solid rgba(236,231,221,0.16);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.55);
    opacity:1;
    transition:opacity .3s ease .3s;   /* l'écran réapparaît quand le capot se redresse */
  }
  /* en se fermant, l'écran s'assombrit puis disparaît à mi-course */
  .laptop[data-open="false"] .lid-face{ opacity:0; transition:opacity .28s ease .22s; }
  .lid-face .mini, .lid-face .mini-img{ transition:filter .5s ease; }
  .laptop[data-open="false"] .lid-face .mini,
  .laptop[data-open="false"] .lid-face .mini-img{ filter:brightness(.4); }
  .lid-back{
    background:linear-gradient(158deg,#d8dbe2,#a7acb8 52%,#888d99);
    border:2px solid rgba(0,0,0,0.18);
    opacity:0;
    transition:opacity .3s ease .05s;
  }
  .laptop[data-open="false"] .lid-back{ opacity:1; transition:opacity .3s ease .32s; }
  .lid-back::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(118deg,transparent 42%,rgba(255,255,255,0.45) 50%,transparent 58%);
    transform:translateX(-120%);
    transition:transform 1s ease .25s;
  }
  .laptop[data-open="false"] .lid-back::after{ transform:translateX(0); }
  /* petite pomme d'eau au centre du capot, clin d'œil au thème */
  .lid-back::before{
    content:""; position:absolute; top:50%; left:50%;
    width:12%; aspect-ratio:1; transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #9fc4de, #3f6f96 70%);
    opacity:.85;
    box-shadow:inset 0 1px 2px rgba(255,255,255,0.5), 0 1px 3px rgba(0,0,0,0.25);
  }
  .laptop-deck{
    position:relative;
    width:116%; left:-8%;
    height:13px; margin-top:-2px;
    border-radius:2px 2px 11px 11px;
    background:linear-gradient(180deg,#bcc0cb,#7d8190);
    box-shadow:0 16px 28px rgba(0,0,0,0.5);
    transition:box-shadow .9s ease;
    z-index:5;
  }
  /* fermé : la machine repose à plat, l'ombre se resserre sous elle */
  .laptop[data-open="false"] .laptop-deck{
    box-shadow:0 8px 16px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.4);
  }
  .laptop-deck::before{
    content:""; position:absolute; top:0; left:6%; right:6%; height:2px;
    background:rgba(0,0,0,0.32);
  }
  .laptop-deck::after{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:56px; height:5px; border-radius:0 0 7px 7px;
    background:linear-gradient(180deg,#70747f,#9aa0ab);
  }

  /* mini-render of the site shown on the screen */
  .mini{
    position:absolute; inset:0;
    padding:8.5cqw 9cqw 8cqw;
    display:flex; flex-direction:column; justify-content:space-between;
    background:
      radial-gradient(120% 95% at 20% 12%, rgba(63,111,150,0.55), transparent 58%),
      radial-gradient(120% 95% at 85% 88%, rgba(28,29,51,0.9), transparent 60%),
      #0a0b15;
    color:#ece7dd; font-family:'Inter',sans-serif;
  }
  .mini-nav{
    display:flex; justify-content:space-between; align-items:center;
    font-size:1.7cqw; letter-spacing:.06em; color:rgba(236,231,221,0.72);
  }
  .mini-nav b{ border:1px solid rgba(236,231,221,0.3); border-radius:99px; padding:.45em .8em; font-weight:600; }
  .mini-title{
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.03em;
    line-height:.86; font-size:8.2cqw; text-align:center; text-wrap:balance;
  }
  .mini-foot{
    display:flex; justify-content:space-between; gap:6cqw;
    font-size:1.5cqw; color:rgba(236,231,221,0.55); line-height:1.45;
  }

  /* image du projet affichée sur l'écran du portable */
  .mini-img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; display:block;
    background:#0a0b15;
  }

  /* lid close / open control */
  .lid-toggle{
    position:absolute; top:22px; right:24px; z-index:6;
    width:34px; height:34px; border-radius:50%;
    background:rgba(var(--glass-rgb),0.12);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--line); color:var(--paper);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
  }
  .lid-toggle:hover{ border-color:var(--accent); background:rgba(var(--glass-rgb),0.18); transform:translateY(-1px); }
  .lid-toggle svg{
    position:absolute; width:15px; height:15px;
    transition:opacity .3s ease, transform .3s var(--ease-water);
  }
  .lid-toggle .ic-open{ opacity:0; transform:scale(.6); }
  .lid-toggle.closed .ic-close{ opacity:0; transform:scale(.6); }
  .lid-toggle.closed .ic-open{ opacity:1; transform:scale(1); }
  @media (prefers-reduced-motion: reduce){
    .laptop-lid{ transition-duration:.01ms; }
  }
  @media (max-width:820px){
    .laptop{ width:min(74%, 300px); }
  }

  .project-no{
    position:absolute; top:22px; left:24px; z-index:2;
    font-family:'Bricolage Grotesque', sans-serif; font-weight:700;
    font-size:14px; color:rgba(255,255,255,0.6); letter-spacing:.04em;
  }

  /* text side */
  .project-body{
    padding:44px 46px;
    display:flex; flex-direction:column; justify-content:center;
    position:relative;
  }
  .project-links{ position:absolute; top:24px; right:26px; display:flex; gap:10px; z-index:3; }
  .project-links a{
    width:38px; height:38px; border-radius:50%; background:rgba(var(--glass-rgb),0.08);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; font-size:14px; color:var(--paper);
    border:1px solid var(--line); transition:border-color .2s ease, background-color .2s ease;
  }
  .project-links a:hover{ border-color:var(--accent); background:rgba(var(--glass-rgb),0.14); }
  .project-body h3{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800; letter-spacing:-0.02em;
    font-size:clamp(28px, 3.2vw, 40px); line-height:1.02; margin-bottom:18px;
  }
  .project-body p{ font-size:15px; color:var(--paper-dim); line-height:1.65; margin-bottom:28px; max-width:440px; }
  .project-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }
  .project-tags span{
    font-size:12px; font-weight:600; color:var(--accent-text); border:1px solid var(--line);
    border-radius:999px; padding:7px 14px;
  }

  @media (max-width:820px){
    .project-card{ grid-template-columns:1fr; min-height:0; top:70px; }
    .project-thumb{ min-height:200px; }
    .project-body{ padding:30px 26px 34px; }
  }

  /* ===================================================
     PROMO banner
     =================================================== */
  .promo{
    padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:rgba(var(--glass-rgb),0.03);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
    backdrop-filter:blur(14px) saturate(1.2);
  }
  .promo .wrap{
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
    gap:32px; padding:72px 36px;
  }
  .promo h3{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800; letter-spacing:-0.02em;
    font-size:clamp(26px, 3.6vw, 42px); max-width:540px; line-height:1.08;
  }
  .promo-side{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
  .promo-side p{ font-size:14px; color:var(--paper-dim); max-width:280px; line-height:1.5; }
  .btn-solid{
    display:inline-block; background:var(--paper); color:var(--ink); font-weight:600;
    font-size:13.5px; padding:13px 24px; border-radius:999px; text-decoration:none;
    white-space:nowrap; transition:transform .25s ease;
  }
  .btn-solid:hover{ transform:translateY(-2px); }

  /* ===================================================
     TESTIMONIALS
     =================================================== */
  .testi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:22px; margin-top:8px; }
  .testi-card{
    position:relative; overflow:hidden;
    border:1px solid var(--line); border-radius:16px; padding:28px 26px;
    background:rgba(var(--card-rgb),0.05);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    backdrop-filter:blur(14px) saturate(1.3);
    box-shadow:0 12px 34px rgba(0,0,0,0.18);
    transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
  }
  .testi-card:hover{ transform:translateY(-6px) rotate(-0.3deg); border-color:var(--accent); box-shadow:0 22px 50px rgba(0,0,0,0.28); }
  .testi-card:nth-child(even):hover{ transform:translateY(-6px) rotate(0.3deg); }
  .testi-mark{
    font-family:'Bricolage Grotesque', sans-serif; font-size:42px; font-weight:800;
    color:var(--accent); line-height:1; display:block; margin-bottom:10px;
  }
  .testi-text{ font-size:14px; color:var(--paper); line-height:1.65; margin-bottom:22px; }
  .testi-name{ font-size:13.5px; font-weight:700; }
  .testi-role{ font-size:12px; color:var(--paper-dim); margin-top:2px; }

  /* ===================================================
     CARD RIPPLE — water-disturbance on hover
     =================================================== */
  .ripple{
    position:absolute;
    top:0; left:0;
    border-radius:50%;
    background:radial-gradient(circle, rgba(var(--ripple-rgb),0.55) 0%, rgba(var(--ripple-rgb),0.18) 45%, rgba(var(--ripple-rgb),0) 72%);
    mix-blend-mode:var(--blend-water);
    pointer-events:none;
    transform:translate(-50%,-50%) scale(0);
    animation:rippleExpand 1.1s cubic-bezier(.22,.6,.3,1) forwards;
    z-index:4;
  }
  @keyframes rippleExpand{
    from{ transform:translate(-50%,-50%) scale(0); opacity:.9; }
    to{ transform:translate(-50%,-50%) scale(1); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .ripple{ display:none; }
  }

  /* ===================================================
     CONTACT / FOOTER
     =================================================== */
  .contact{ padding:140px 0 0; text-align:center; }
  .contact h2{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800; letter-spacing:-0.03em;
    line-height:0.96; font-size:clamp(38px, 7vw, 78px); margin-bottom:18px;
  }
  .contact .lead{ font-size:15px; color:var(--paper-dim); max-width:420px; margin:0 auto 40px; }
  .cta-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
  .btn-primary{
    background:var(--paper); color:var(--ink); padding:14px 28px; border-radius:999px;
    font-weight:600; font-size:14px; text-decoration:none; transition:transform .25s ease;
  }
  .btn-primary:hover{ transform:translateY(-2px); }
  .btn-secondary{
    border:1px solid var(--line); color:var(--paper); padding:14px 28px; border-radius:999px;
    font-weight:600; font-size:14px; text-decoration:none;
    background:var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur-soft);
    backdrop-filter:var(--glass-blur-soft);
    transition:border-color .25s ease, color .25s ease, background-color .25s ease;
  }
  .btn-secondary:hover{ border-color:var(--accent); color:var(--accent-text); }
  .contact-links{ display:flex; justify-content:center; gap:26px; margin-top:56px; }
  .contact-links a{ font-size:13px; font-weight:600; color:var(--paper-dim); text-decoration:none; transition:color .2s ease; }
  .contact-links a:hover{ color:var(--paper); }
  .footer-bottom{
    margin-top:80px; padding:26px 36px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
    font-size:12px; color:var(--paper-dim);
  }
  .footer-bottom a{ color:var(--paper-dim); text-decoration:underline; text-underline-offset:3px; }

  @media (max-width:760px){
    section{ padding:80px 0; }
    .promo .wrap{ padding:56px 24px; flex-direction:column; align-items:flex-start; }
    .footer-bottom{ flex-direction:column; text-align:center; }
  }

  /* ===================================================
     SCROLL PROGRESS — filet d'eau qui monte avec la page
     =================================================== */
  #scrollProgress{
    position:fixed; top:0; left:0; z-index:40;
    width:100%; height:2px;
    transform:scaleX(0); transform-origin:0 50%;
    background:linear-gradient(90deg, var(--accent), var(--accent-text));
    pointer-events:none;
  }

  /* ===================================================
     TOPBAR — nav flottante en verre, apparaît au scroll
     =================================================== */
  .topbar{
    position:fixed; top:14px; left:50%;
    z-index:22;
    display:flex; align-items:center; gap:22px;
    padding:9px 10px 9px 20px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(var(--glass-rgb),0.10);
    -webkit-backdrop-filter:blur(22px) saturate(1.6);
    backdrop-filter:blur(22px) saturate(1.6);
    box-shadow:0 14px 40px rgba(0,0,0,0.28);
    transform:translate(-50%,-160%);
    opacity:0;
    transition:transform .6s var(--ease-water), opacity .5s ease, background-color var(--theme-dur) ease;
  }
  .topbar.show{ transform:translate(-50%,0); opacity:1; }
  .topbar .brand{
    font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.02em;
    font-size:14px; color:var(--paper); text-decoration:none; white-space:nowrap;
  }
  .topbar-links{ display:flex; gap:16px; }
  .topbar-links a{
    font-size:12.5px; font-weight:600; text-decoration:none;
    color:var(--paper-dim); transition:color .2s ease;
  }
  .topbar-links a:hover{ color:var(--paper); }
  .topbar .topbar-cta{
    font-size:12px; font-weight:600; letter-spacing:.04em;
    color:var(--ink); background:var(--paper);
    padding:8px 16px; border-radius:999px; text-decoration:none; white-space:nowrap;
    transition:transform .25s ease;
  }
  .topbar .topbar-cta:hover{ transform:translateY(-1px); }
  @media (max-width:640px){
    .topbar{ gap:14px; padding:8px 8px 8px 16px; }
    .topbar-links{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){
    .topbar{ transition-duration:.01ms; }
  }

  /* ===================================================
     THEME TOGGLE — floating, persistent across scroll
     =================================================== */
  .theme-toggle{
    position:fixed;
    right:22px; top:16px;
    z-index:20;
    width:46px; height:46px;
    border-radius:50%;
    background:var(--glass-bg-strong);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    color:var(--paper);
    opacity:0;
    pointer-events:none;
    transition:opacity .5s ease, border-color .25s ease, transform .25s ease, background-color .5s ease;
  }
  .theme-toggle.show{ opacity:1; pointer-events:auto; }
  .theme-toggle:hover{ border-color:var(--accent); transform:translateY(-2px); }
  .theme-toggle svg{
    position:absolute;
    width:19px; height:19px;
    transition:opacity .35s ease, transform .45s ease;
  }
  .theme-toggle .icon-sun{ opacity:0; transform:rotate(-80deg) scale(.5); }
  .theme-toggle .icon-moon{ opacity:1; transform:rotate(0) scale(1); }
  [data-theme="light"] .theme-toggle .icon-sun{ opacity:1; transform:rotate(0) scale(1); }
  [data-theme="light"] .theme-toggle .icon-moon{ opacity:0; transform:rotate(80deg) scale(.5); }

  /* le bouton occupe l'angle supérieur droit : la nav du hero s'arrête avant */
  #hero nav{ padding-right:64px; }

  @media (max-width:640px){
    .theme-toggle{ right:16px; top:12px; width:42px; height:42px; }
    #hero nav{ padding-right:48px; }
  }

  /* ===================================================
     ANIM PROFILE SWITCHER — compare Onde vs Souffle live
     =================================================== */
  .anim-switch{
    position:fixed;
    left:22px; bottom:22px;
    z-index:20;
    display:flex; align-items:center; gap:4px;
    padding:4px;
    border-radius:999px;
    background:rgba(var(--glass-rgb),0.45);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--line);
    opacity:0; transform:translateY(8px);
    pointer-events:none;
    transition:opacity .5s ease, transform .5s var(--ease-water), background-color var(--theme-dur) ease;
  }
  .anim-switch.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .anim-switch .label{
    font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--paper-dim); padding:0 8px 0 10px; white-space:nowrap;
  }
  .anim-switch button{
    font-family:'Inter',sans-serif;
    font-size:12px; font-weight:600; letter-spacing:.02em;
    color:var(--paper-dim); background:transparent; border:0;
    padding:7px 14px; border-radius:999px; cursor:pointer;
    transition:color .3s ease, background-color .3s ease;
  }
  .anim-switch button:hover{ color:var(--paper); }
  .anim-switch button[aria-pressed="true"]{
    color:var(--ink); background:var(--paper);
  }
  @media (max-width:640px){
    .anim-switch{ left:16px; bottom:16px; }
    .anim-switch .label{ display:none; }
  }

  /* ===================================================
     OPTIMISATIONS DE RENDU
     =================================================== */
  /* sections sous la ligne de flottaison : rendu différé par le navigateur */
  #parcours, #contact{
    content-visibility:auto;
    contain-intrinsic-size:auto 900px;
  }
  /* le backdrop-filter coûte cher sur mobile : verre allégé sous 640px */
  @media (max-width:640px){
    :root{
      --glass-blur: blur(10px) saturate(1.3);
      --glass-blur-soft: blur(6px) saturate(1.2);
    }
    .project-card{
      -webkit-backdrop-filter:blur(12px) saturate(1.2);
      backdrop-filter:blur(12px) saturate(1.2);
    }
  }

  /* ===================================================
     RESPONSIVE — mobile & tablette
     =================================================== */

  /* interactions tactiles : pas d'effets dépendants du survol,
     cibles de touch plus grandes */
  @media (hover:none){
    .testi-card:hover{ transform:none; }
    .laptop:hover{ transform:none; }
    .lid-toggle{ width:44px; height:44px; } /* cible tactile ≥ 44px */
    .project-links a{ width:44px; height:44px; }
  }

  /* --- Tablette --- */
  @media (max-width:820px){
    .wrap{ padding:0 26px; }
    .contact-links{ flex-wrap:wrap; gap:18px 26px; }
  }

  /* --- Mobile --- */
  @media (max-width:640px){
    .wrap{ padding:0 20px; }

    /* hero : titre recalibré, avatar réduit qui ne chevauche plus la nav */
    #hero h1{ font-size:clamp(42px, 15vw, 68px); line-height:0.92; }
    .avatar{ width:72px; height:72px; border-radius:16px; }
    .avatar-status{ display:none; }
    .nav-links{ flex-wrap:wrap; row-gap:8px; }

    /* titres de sections */
    .contact h2{ font-size:clamp(32px, 11vw, 46px); }
    .contact{ padding-top:96px; }
    .contact .lead{ padding:0 8px; }
    .btn-primary{ display:inline-block; width:100%; max-width:340px; text-align:center; }

    /* cartes projets : liens et numéro resserrés */
    .project-links{ top:14px; right:14px; }
    .project-no{ top:14px; left:16px; }
    .lid-toggle{ top:14px; right:14px; }
    .project-body h3{ font-size:24px; }

    /* témoignages plus compacts */
    .testi-card{ padding:22px 20px; }
  }

  /* --- Très petits écrans (≤ 380px) --- */
  @media (max-width:380px){
    #hero h1{ font-size:clamp(36px, 14vw, 46px); }
    .wrap{ padding:0 16px; }
    #hero{ padding:16px 14px 20px; }
    .statement{ font-size:clamp(24px, 8.5vw, 30px); }
    .stack-group li{ padding:7px 10px; font-size:12px; }
  }

  /* --- Paysage bas (téléphone tourné) : le hero respire quand même --- */
  @media (max-height:480px) and (orientation:landscape){
    #hero h1{ font-size:clamp(34px, 16vh, 60px); }
    .avatar{ width:60px; height:60px; }
    .scroll-cue{ display:none; }
    .theme-toggle{ top:10px; }
    .anim-switch{ bottom:10px; }
  }

  /* ===================================================
     PERF — les sections hors écran ne sont ni mises en page
     ni peintes tant qu'on n'en approche pas. 'auto' mémorise
     la taille réelle après le premier rendu (pas de saut d'ascenseur).
     Volontairement PAS sur #about / .work : leurs animations au scroll
     lisent une géométrie qui doit rester toujours calculée.
     =================================================== */
  .stack, .testimonials, .contact{ content-visibility:auto; }
  .stack{ contain-intrinsic-size:auto 480px; }
  .testimonials{ contain-intrinsic-size:auto 720px; }
  .contact{ contain-intrinsic-size:auto 520px; }