/* Polices hebergees sur le domaine : plus rapide qu'un CDN tiers,
     et plus aucune requete vers Google Fonts (rien a declarer cote RGPD). */
  @font-face{
    font-family:'Archivo';
    src:url('/fonts/archivo-var.woff2') format('woff2-variations');
    font-weight:100 900;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:'Inter';
    src:url('/fonts/inter-var.woff2') format('woff2-variations');
    font-weight:100 900;font-style:normal;font-display:swap;
  }

  :root{
    /* Palette relevee directement dans le CV : blanc pur, gris #C8C5C5, noir.
       Les neutres portent une legere dominante chaude (canal rouge +2/+3),
       comme sur le CV, ce qui les accorde au jaune sans les faire virer. */
    --bg:#0B0A0A;
    --bg-alt:#121110;
    --card:#1A1918;
    --card-2:#212020;
    --border:rgba(255,255,255,.10);
    --text:#FFFFFF;
    --muted:#8C8887;
    --muted-2:#C8C5C5;
    --yellow:#FFBD59;
    --yellow-deep:#E9A23F;
    --yellow-ink:#0B0A0A;
    --yellow-soft:rgba(255,189,89,.14);
    --yellow-on-light:#6E5210;
    /* anciens accents pastel ramenes au gris : la charte est noir / gris / blanc */
    --pastel-blue:#C8C5C5;
    --pastel-pink:#C8C5C5;
    --pastel-lav:#C8C5C5;
    --light-bg:#F2F1F0;
    --light-card:#FFFFFF;
    --light-text:#0B0A0A;
    --light-muted:#6B6867;
    --light-border:rgba(11,10,10,.14);
    /* angles resserres : le CV n'utilise que des rectangles francs */
    --r-lg:16px;
    --r-md:11px;
    --r-sm:7px;
  }  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,.logo{
    font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
    letter-spacing:-.025em;
    font-weight:700;
  }
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}
  .container{width:min(1180px,90%);margin-inline:auto;}
  .container-narrow{width:min(760px,90%);margin-inline:auto;}
  /* 150px fixes créaient jusqu'à 300px de vide entre deux sections sur petit écran */
  section{padding:clamp(68px,8.5vw,112px) 0;position:relative;z-index:1;background-color:var(--bg);}
  section.light{background-color:var(--light-bg);}
  .light{background:var(--light-bg);color:var(--light-text);}
  .light .muted-txt{color:var(--light-muted);}
  .light .eyebrow{color:var(--yellow-on-light);}
  .eyebrow{
    color:var(--yellow);
    font-weight:600;
    font-size:.78rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    margin-bottom:20px;
    display:inline-block;
  }
  h2{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:700;line-height:1.05;margin-bottom:24px;}
  .section-head{max-width:720px;margin-bottom:70px;}
  .section-head p{color:var(--muted-2);font-size:1.15rem;line-height:1.65;}
  .light .section-head p{color:var(--light-muted);}

  /* Le contenu reste visible par défaut : l'animation ne s'active que si JS a pris la main.
     Sans ça, une erreur JS ou un scroll rapide laissait des écrans entièrement vides. */
  .js-reveal .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);}
  .js-reveal .reveal.visible{opacity:1;transform:translateY(0);}
  .reveal-delay-1.visible{transition-delay:.07s;}
  .reveal-delay-2.visible{transition-delay:.14s;}
  .reveal-delay-3.visible{transition-delay:.21s;}
  @media (prefers-reduced-motion:reduce){
    .js-reveal .reveal{opacity:1;transform:none;transition:none;}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  }

  header{
    position:fixed;top:0;left:0;right:0;z-index:200;
    background:rgba(11,10,10,.65);
    backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
  .logo{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;}
  .logo span{color:var(--yellow);}
  .nav-links{display:flex;gap:30px;font-size:.83rem;font-weight:500;align-items:center;}
  .nav-links a{color:var(--muted-2);transition:color .2s;letter-spacing:.01em;}
  .nav-links a:hover{color:var(--text);}

  /* Les 4 projets étaient 4 entrées de menu : regroupés sous « Projets » */
  .has-sub{position:relative;}
  .sub-toggle{
    background:none;border:0;cursor:pointer;color:var(--muted-2);
    font:inherit;letter-spacing:.01em;display:flex;align-items:center;gap:6px;padding:0;
    transition:color .2s;
  }
  .sub-toggle:hover,.has-sub:hover .sub-toggle,.sub-toggle[aria-expanded="true"]{color:var(--text);}
  .sub-toggle::after{
    content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translateY(-2px);transition:transform .25s;
  }
  .has-sub:hover .sub-toggle::after,.sub-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px);}
  .submenu{
    position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
    background:rgba(14,14,15,.97);backdrop-filter:blur(20px);
    border:1px solid var(--border);border-radius:var(--r-sm);
    padding:10px;min-width:190px;display:flex;flex-direction:column;gap:2px;
    opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;
    box-shadow:0 20px 45px rgba(0,0,0,.5);
  }
  .has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
  .submenu a{display:block;padding:9px 14px;border-radius:9px;white-space:nowrap;}
  .submenu a:hover{background:rgba(255,255,255,.06);color:var(--text);}
  /* zone tampon : évite que le menu se ferme en descendant la souris */
  .has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px;}
  .nav-cta{
    border:1px solid rgba(255,255,255,.18);padding:9px 20px;border-radius:100px;
    font-size:.8rem;font-weight:600;transition:border-color .2s,color .2s,background .2s;
  }
  .nav-cta:hover{border-color:var(--yellow);color:#000;background:var(--yellow);}
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;z-index:210;}
  .burger span{width:22px;height:1.5px;background:var(--text);}

  .hero{
    min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;position:relative;overflow:hidden;padding-top:80px;
  }
  .hero-bg{
    position:absolute;inset:0;z-index:-2;
    background-image:url('../img/hero-micheletty-chapiteau.webp');
    background-size:cover;background-position:center 30%;
  }
  /* sur mobile, la version 800px suffit : 18 Ko au lieu de 61 Ko */
  @media (max-width:800px){
    .hero-bg{background-image:url('../img/hero-micheletty-chapiteau-800.webp');}
  }
  .hero-overlay{
    position:absolute;inset:0;z-index:-1;
    background:
      linear-gradient(180deg, rgba(11,10,10,.55) 0%, rgba(11,10,10,.72) 55%, rgba(11,10,10,.95) 100%),
      radial-gradient(ellipse 55% 45% at 50% 15%, rgba(255,189,89,.10), transparent 60%);
  }
  .hero-eyebrow{
    color:var(--yellow);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
    font-weight:600;margin-bottom:28px;
  }
  /* Ligne de disponibilité : l'information qu'un recruteur cherche en premier */
  .hero-status{
    margin-top:34px;display:inline-flex;align-items:center;gap:10px;
    font-size:.84rem;color:var(--muted-2);
    background:rgba(255,255,255,.05);border:1px solid var(--border);
    padding:10px 20px;border-radius:100px;backdrop-filter:blur(10px);
  }
  .hero-status .dot{
    width:7px;height:7px;border-radius:50%;background:var(--yellow);flex:none;
    box-shadow:0 0 0 0 rgba(255,189,89,.6);animation:pulseDot 2.4s ease-out infinite;
  }
  @keyframes pulseDot{ 70%{box-shadow:0 0 0 9px rgba(255,189,89,0);} 100%{box-shadow:0 0 0 0 rgba(255,189,89,0);} }
  .hero h1{
    font-size:clamp(2.8rem,8vw,6.2rem);
    font-weight:700;line-height:1.02;letter-spacing:-.03em;
    max-width:1000px;margin-bottom:28px;
  }
  .hero h1 .grad{
    background:linear-gradient(90deg,var(--yellow),#fff 65%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero .sub{
    font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted-2);max-width:640px;margin-bottom:46px;font-weight:300;
  }
  .hero .sub strong{color:var(--text);font-weight:600;}
  .btn-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
  .btn{
    display:inline-block;padding:15px 34px;border-radius:100px;
    font-weight:600;font-size:.9rem;letter-spacing:.01em;
    transition:transform .25s cubic-bezier(.16,1,.3,1), background .2s, color .2s, box-shadow .3s;
  }
  .btn-primary{background:var(--yellow);color:var(--yellow-ink);}
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(255,189,89,.22);}
  .btn-outline{color:var(--text);border:1px solid rgba(255,255,255,.22);}
  .btn-outline:hover{border-color:var(--yellow);color:var(--yellow);transform:translateY(-3px);}
  .scroll-cue{
    position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted-2);font-size:.72rem;
    letter-spacing:.15em;text-transform:uppercase;animation:bob 2.2s ease-in-out infinite;
  }
  .scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--yellow),transparent);}
  @keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,10px);}}

  /* Stats strip */
  .stats-strip{padding:100px 0;}
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;}
  .stat-item .num{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(2.4rem,4.5vw,3.6rem);letter-spacing:-.02em;margin-bottom:10px;}
  .stat-item .lbl{font-size:.92rem;color:var(--light-muted);line-height:1.4;max-width:220px;}

  .statement{padding:150px 0;}
  .statement p{
    font-family:'Archivo','Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:clamp(1.6rem,3.6vw,2.7rem);
    line-height:1.35;letter-spacing:-.01em;color:var(--muted-2);
  }
  .statement strong{color:var(--text);font-weight:700;}
  .statement em{font-style:normal;color:var(--yellow);}

  .featured{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .feat-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:90px;}
  .feat-header h2{margin-bottom:14px;}
  .feat-meta{display:flex;gap:36px;flex-wrap:wrap;}
  .feat-meta div .label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:6px;}
  .feat-meta div .val{font-size:1rem;font-weight:600;}

  .feat-row{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-bottom:150px;}
  .feat-row:last-child{margin-bottom:0;}
  .feat-row.reverse{direction:rtl;}
  .feat-row.reverse > *{direction:ltr;}
  .feat-num{font-family:'Archivo',sans-serif;font-weight:800;font-size:1rem;color:var(--yellow);margin-bottom:18px;letter-spacing:.05em;}
  .feat-row h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;margin-bottom:18px;line-height:1.15;}
  .feat-row p{color:var(--muted-2);font-size:1.02rem;margin-bottom:10px;}
  .feat-row ul{margin-top:16px;}
  .feat-row ul li{color:var(--muted-2);font-size:.96rem;padding:6px 0;padding-left:20px;position:relative;}
  .feat-row ul li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:1px;background:var(--yellow);}

  /* Bloc technique repliable : lisible pour un client, complet pour un chef op */
  .tech-details{margin-top:24px;border-top:1px solid var(--border);padding-top:16px;}
  .tech-details summary{
    cursor:pointer;list-style:none;color:var(--muted);font-size:.82rem;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:9px;
    transition:color .2s;
  }
  .tech-details summary::-webkit-details-marker{display:none;}
  .tech-details summary:hover{color:var(--yellow);}
  .tech-details summary::before{
    content:"+";font-size:1rem;line-height:1;color:var(--yellow);transition:transform .25s;
  }
  .tech-details[open] summary::before{content:"–";}
  .tech-details ul{margin-top:14px;}
  .tech-details li{font-size:.88rem;color:var(--muted);}

  /* Images : <img> réelles (alt + srcset + lazy) posées en couverture du conteneur.
     --dom = couleur dominante affichée avant chargement, évite le flash noir. */
  .media-card, .gallery-item{background-color:var(--dom,var(--card));margin:0;}
  .media-card > img, .gallery-item > img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .5s ease;
  }
  .media-card > img.loaded, .gallery-item > img.loaded{opacity:1;}

  .media-card{
    aspect-ratio:4/3;border-radius:var(--r-lg);position:relative;overflow:hidden;
    border:1px solid var(--border);
    display:flex;align-items:flex-end;padding:26px;
    transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .3s;
  }
  .media-card:hover{transform:scale(1.015);border-color:rgba(255,189,89,.4);}
  .media-card::before{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);
  }
  .media-card .cap{position:relative;z-index:2;font-size:.8rem;color:var(--muted-2);}
  .media-card .cap b{display:block;color:#fff;font-size:.96rem;margin-bottom:2px;}

  .tag{
    font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;
    padding:4px 12px;border-radius:100px;display:inline-block;
  }
  .tag-yellow{background:var(--yellow-soft);color:var(--yellow);border:1px solid rgba(255,189,89,.4);}
  .tag-blue{background:rgba(200,197,197,.12);color:var(--pastel-blue);border:1px solid rgba(200,197,197,.4);}
  .tag-pink{background:rgba(200,197,197,.12);color:var(--pastel-pink);border:1px solid rgba(200,197,197,.4);}
  .tag-lav{background:rgba(200,197,197,.12);color:var(--pastel-lav);border:1px solid rgba(200,197,197,.4);}

  .ai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:20px;}
  .ai-card{
    background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:32px 28px;
    transition:border-color .3s, transform .3s;
  }
  .ai-card:hover{border-color:rgba(255,189,89,.4);transform:translateY(-6px);}
  .ai-card .ai-icon{
    width:44px;height:44px;border-radius:var(--r-sm);background:var(--yellow-soft);
    display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--yellow);font-weight:700;font-family:'Archivo',sans-serif;
  }
  .ai-card h4{font-size:1.08rem;font-weight:700;margin-bottom:10px;font-family:'Archivo',sans-serif;}
  .ai-card p{color:var(--muted);font-size:.9rem;}

  .marquee-section{padding:120px 0;overflow:hidden;}
  .marquee-wrap{
    overflow:hidden;position:relative;
    mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  }
  .marquee-track{display:flex;gap:64px;width:max-content;animation:scrollL 32s linear infinite;padding:22px 0;}
  .marquee-track.rev{animation:scrollR 32s linear infinite;}
  @keyframes scrollL{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @keyframes scrollR{from{transform:translateX(-50%);}to{transform:translateX(0);}}
  .logo-item{display:flex;align-items:center;gap:12px;color:var(--muted-2);white-space:nowrap;font-size:1rem;font-weight:500;opacity:.75;transition:opacity .3s;}
  .logo-item:hover{opacity:1;}
  .logo-item img{width:30px;height:30px;object-fit:contain;filter:grayscale(1) brightness(1.6);opacity:.85;}
  .logo-item .logo-fallback{display:none;font-family:'Archivo',sans-serif;font-weight:600;}
  .marquee-label{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;margin-bottom:20px;font-weight:600;}

  .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:18px;}
  .gallery-item{
    position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);
    display:flex;flex-direction:column;justify-content:flex-end;padding:20px;
    transition:transform .45s cubic-bezier(.16,1,.3,1);
  }
  .gallery-item:hover{transform:translateY(-6px);}
  .gallery-item:hover > img{transform:scale(1.04);}
  .gallery-item > img{transition:opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1);}
  .gallery-item::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.8) 100%);}
  .gallery-item .g-tag{position:absolute;top:16px;left:16px;z-index:3;}
  .gallery-item .g-title{position:relative;font-weight:600;font-size:1rem;z-index:2;color:#fff;}
  .gallery-item .g-sub{position:relative;color:var(--muted-2);font-size:.78rem;z-index:2;}
  .gallery-item.big{grid-column:span 2;grid-row:span 2;}
  .gallery-item.wide{grid-column:span 2;}

  @media (max-width:900px){
    .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px;}
    .gallery-item.big{grid-column:span 2;grid-row:span 1;}
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:36px;}
  }

  .exp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;}
  .exp-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:32px;}
  .exp-card .tl-date{color:var(--yellow);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;}
  .exp-card h3{font-family:'Archivo',sans-serif;font-size:1.2rem;font-weight:700;margin:10px 0 2px;}
  .exp-card .org{color:var(--muted);font-size:.88rem;display:block;margin-bottom:16px;}
  .exp-card ul li{color:var(--muted-2);font-size:.9rem;padding:5px 0 5px 18px;position:relative;}
  .exp-card ul li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:1px;background:var(--yellow);}

  .chip-cloud{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;}
  .free-chip{
    border:1px solid var(--border);border-radius:100px;padding:11px 20px;font-size:.86rem;
    color:var(--muted-2);background:var(--card);display:flex;align-items:center;gap:8px;
  }
  .free-chip b{color:var(--yellow);font-weight:600;}

  .formation-grid{margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
  .formation-card{border:1px solid var(--border);padding:22px;background:var(--card);border-radius:var(--r-md);}
  .formation-card .tl-date{color:var(--yellow);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;display:block;margin-bottom:8px;}
  .formation-card h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:.98rem;margin-bottom:4px;}
  .formation-card span.org{color:var(--muted);font-size:.85rem;}

  .about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center;}
  .about-photo{
    aspect-ratio:3/4;border-radius:var(--r-lg);border:1px solid var(--light-border);
    overflow:hidden;margin:0;box-shadow:0 30px 60px rgba(0,0,0,.12);
  }
  .about-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;}
  .about p{color:var(--light-muted);margin-bottom:18px;font-size:1.05rem;}
  .chip-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
  .chip{border:1px solid var(--light-border);border-radius:100px;padding:9px 18px;font-size:.82rem;color:var(--light-muted);background:#fff;}
  .chip b{color:var(--yellow-on-light);font-weight:600;}

  /* était margin-inline:auto 80px -> bloc décentré vers la gauche malgré text-align:center */
  .contact-cta{text-align:center;max-width:680px;margin:0 auto 80px;}
  .contact-cta h2{margin-bottom:20px;}
  .contact-cta p{color:var(--muted-2);font-size:1.1rem;}
  .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;}
  .contact-info .item{margin-bottom:26px;}
  .contact-info .label{color:var(--yellow);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;display:block;margin-bottom:6px;}
  .contact-info .val{font-size:1.05rem;font-weight:500;display:inline-block;}
  a.val{border-bottom:1px solid transparent;transition:border-color .2s,color .2s;}
  a.val:hover{color:var(--yellow);border-bottom-color:var(--yellow);}
  .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;}
  :focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:4px;}
  .skip-link{
    position:absolute;left:12px;top:-60px;z-index:400;background:var(--yellow);color:var(--yellow-ink);
    padding:11px 20px;border-radius:0 0 10px 10px;font-weight:700;font-size:.85rem;transition:top .2s;
  }
  .skip-link:focus{top:0;}
  form{display:flex;flex-direction:column;gap:16px;}
  input,textarea{
    background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);
    padding:15px 18px;font-family:'Inter';font-size:.95rem;
  }
  input:focus,textarea:focus{outline:none;border-color:var(--yellow);}
  textarea{resize:vertical;min-height:130px;}
  .submit-btn{
    align-self:flex-start;background:var(--yellow);color:var(--yellow-ink);border:none;border-radius:100px;
    padding:15px 36px;font-weight:700;letter-spacing:.01em;cursor:pointer;font-size:.9rem;
    transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  }
  .submit-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(255,189,89,.22);}
  .form-note{font-size:.8rem;color:var(--muted);margin-top:-4px;}

  footer{border-top:1px solid var(--border);padding:50px 0;text-align:center;color:var(--muted);font-size:.85rem;}
  footer .socials{display:flex;justify-content:center;gap:16px;margin-bottom:22px;}
  footer .socials a{color:var(--text);border:1px solid var(--border);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;transition:border-color .2s,color .2s,transform .2s;}
  footer .socials a:hover{border-color:var(--yellow);color:var(--yellow);transform:translateY(-3px);}

  @media (max-width:900px){
    .nav-links{
      position:fixed;inset:0;background:var(--bg);z-index:190;
      flex-direction:column;justify-content:center;align-items:center;gap:30px;font-size:1.25rem;
      transform:translateY(-110%);transition:transform .35s cubic-bezier(.16,1,.3,1);
    }
    .nav-links.open{transform:translateY(0);}
    .nav-cta{display:none;}
    .burger{display:flex;}
    /* sous-menu : déplié en liste sur mobile, pas de survol possible au doigt */
    .has-sub{display:flex;flex-direction:column;align-items:center;gap:16px;}
    .sub-toggle{font-size:1.25rem;pointer-events:none;color:var(--muted);}
    .sub-toggle::after{display:none;}
    .submenu{
      position:static;transform:none;opacity:1;visibility:visible;
      background:none;border:0;box-shadow:none;padding:0;backdrop-filter:none;
      align-items:center;gap:14px;font-size:1.1rem;
    }
    .has-sub::after{display:none;}
    .feat-row,.feat-row.reverse{grid-template-columns:1fr;direction:ltr;}
    .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px;}
    .feat-header{margin-bottom:44px;}
    .feat-row{margin-bottom:64px;}
  }

  /* Halogen glow utilities */
  .halogen{position:relative;}
  .halogen::before{
    content:"";position:absolute;z-index:-1;
    width:70%;height:60%;top:-10%;left:15%;
    background:radial-gradient(ellipse at center, rgba(255,189,89,.16), transparent 70%);
    filter:blur(10px);pointer-events:none;
  }
  .glow-card{
    aspect-ratio:4/3;border-radius:var(--r-lg);position:relative;overflow:hidden;
    border:1px solid var(--border);
    display:flex;align-items:flex-end;padding:26px;
    background:
      radial-gradient(circle at 25% 15%, rgba(255,189,89,.35), transparent 45%),
      radial-gradient(circle at 80% 75%, rgba(255,189,89,.10), transparent 55%),
      linear-gradient(160deg,#1C1A17,var(--bg) 65%);
    transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .3s;
  }
  .glow-card:hover{transform:scale(1.015);border-color:rgba(255,189,89,.4);}
  .glow-card .cap{position:relative;z-index:1;font-size:.8rem;color:var(--muted-2);}
  .glow-card .cap b{display:block;color:#fff;font-size:.96rem;margin-bottom:2px;}
  .glow-card .beam{
    position:absolute;top:-20%;left:10%;width:2px;height:70%;
    background:linear-gradient(var(--yellow),transparent);
    transform:rotate(18deg);opacity:.5;filter:blur(1px);
  }
  .glow-card .beam.b2{left:22%;height:55%;opacity:.3;transform:rotate(14deg);}

  /* Bulb logo */
  .bulb-logo{display:flex;align-items:center;gap:9px;}
  .bulb-logo svg{width:22px;height:22px;flex-shrink:0;}

  /* Timeline */
  .frise{position:relative;padding-left:46px;margin-top:70px;}
  .frise-line{
    position:absolute;left:13px;top:6px;bottom:6px;width:2px;
    background:linear-gradient(180deg, var(--yellow) 0%, rgba(255,189,89,.5) 30%, rgba(255,189,89,.15) 70%, transparent 100%);
    box-shadow:0 0 12px rgba(255,189,89,.5);
  }
  .frise-item{position:relative;padding-bottom:52px;}
  .frise-item:last-child{padding-bottom:0;}
  .frise-dot{
    position:absolute;left:-46px;top:2px;width:28px;height:28px;border-radius:50%;
    background:var(--bg);border:2px solid var(--yellow);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 16px rgba(255,189,89,.55);
  }
  .frise-dot span{width:8px;height:8px;border-radius:50%;background:var(--yellow);}
  .frise-item .fr-date{color:var(--yellow);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;}
  .frise-item h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.08rem;margin:6px 0 4px;}
  .frise-item p{color:var(--muted-2);font-size:.9rem;max-width:560px;}

  .reels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:50px;}
  .reel-embed{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);background:var(--card);}
  .yt-embed{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);background:var(--bg);}
  .yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

  /* Façade « clic pour lire » : YouTube ne se charge qu'au clic.
     Avant, 2 iframes chargeaient ~1 Mo de JS et posaient des cookies dès l'arrivée. */
  .yt-facade{border:0;padding:0;cursor:pointer;display:block;width:100%;}
  .yt-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .3s,transform .5s;}
  .yt-facade:hover img{opacity:1;transform:scale(1.03);}
  .yt-facade .yt-play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:68px;height:48px;border-radius:12px;background:rgba(10,10,10,.72);
    border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s;
  }
  .yt-facade:hover .yt-play{background:var(--yellow);transform:translate(-50%,-50%) scale(1.06);}
  .yt-facade .yt-play::before{content:"";border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px;transition:border-color .25s;}
  .yt-facade:hover .yt-play::before{border-left-color:var(--yellow-ink);}
  .yt-facade .yt-label{
    position:absolute;left:0;right:0;bottom:0;padding:34px 18px 15px;text-align:left;
    font-size:.84rem;font-weight:600;color:#fff;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
  }
  .yt-facade:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;}

  /* Filament continu, arrondi, en zigzag sur tout le site.
     Il passait au-dessus du contenu (z-index:5) et traversait le H1 du héro :
     repassé sous le contenu et démarré après le héro. */
  .site-filament{
    position:absolute;top:100vh;left:0;width:100%;height:calc(100% - 100vh);
    z-index:0;pointer-events:none;opacity:.55;
  }
  .site-filament svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;}
  .site-filament .fil-glow{
    fill:none;stroke:var(--yellow-deep);stroke-width:5px;stroke-linecap:round;
    opacity:.35;filter:blur(3px);
    vector-effect:non-scaling-stroke;
  }
  .site-filament .fil-core{
    fill:none;stroke:url(#filGrad);stroke-width:2.6px;stroke-linecap:round;
    filter:drop-shadow(0 0 5px rgba(233,162,63,.85)) drop-shadow(0 0 12px rgba(233,162,63,.5));
    stroke-dasharray:10 7;
    animation:filFlow 4.5s linear infinite;
    vector-effect:non-scaling-stroke;
  }
  @keyframes filFlow{ to{ stroke-dashoffset:-340; } }
  .light .site-filament{opacity:.35;}
  /* Conservé sur mobile (60% du trafic) mais discret, et l'animation est coupée
     pour ne pas faire tourner un repaint permanent sur batterie. */
  @media (max-width:900px){
    .site-filament{opacity:.28;}
    .site-filament .fil-glow{display:none;}
    .site-filament .fil-core{animation:none;}
  }

  /* Ampoule héro : allumage animé */
  .hero-bulb{
    position:absolute;top:78px;left:50%;transform:translateX(-50%);
    width:104px;height:158px;z-index:3;pointer-events:none;
  }
  @media (max-width:700px){ .hero-bulb{width:78px;height:118px;top:70px;} }
  .hero-bulb svg{width:100%;height:100%;overflow:visible;}
  .hero-bulb .bulb-glow{
    opacity:0;
    animation:bulbIgnite 2.4s ease-out .3s forwards, bulbFlicker 5s ease-in-out 3s infinite;
  }
  .hero-bulb .bulb-glass{fill:rgba(255,255,255,.03);stroke:rgba(255,189,89,.55);stroke-width:1.1;}
  .hero-bulb .bulb-fil{stroke:var(--yellow-deep);stroke-width:1.3;fill:none;stroke-linecap:round;opacity:0;
    animation:bulbIgnite 2.4s ease-out .3s forwards;}
  @keyframes bulbIgnite{
    0%{opacity:0;filter:drop-shadow(0 0 0px rgba(233,162,63,0));}
    30%{opacity:.25;filter:drop-shadow(0 0 5px rgba(233,162,63,.45));}
    45%{opacity:.08;}
    62%{opacity:.9;filter:drop-shadow(0 0 16px rgba(233,162,63,.8));}
    100%{opacity:1;filter:drop-shadow(0 0 24px rgba(233,162,63,.95)) drop-shadow(0 0 46px rgba(233,162,63,.5));}
  }
  @keyframes bulbFlicker{
    0%,100%{opacity:1;} 92%{opacity:1;} 94%{opacity:.72;} 96%{opacity:1;} 97%{opacity:.85;} 98%{opacity:1;}
  }

  /* =====================================================================
     FLUIDITÉ — navigation, repérage et confort de défilement
     Ajouté le 21/08/2026. Bloc autonome : rien au-dessus n'est modifié.
     ===================================================================== */

  /* 1. Les ancres s'arrêtaient sous l'en-tête fixe : on réserve sa hauteur. */
  section[id]{scroll-margin-top:92px;}

  /* 2. En-tête qui se resserre dès qu'on quitte le haut de page. */
  header{transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;}
  header nav{transition:padding .3s cubic-bezier(.16,1,.3,1);}
  header.is-scrolled{
    background:rgba(11,10,10,.88);
    border-bottom-color:rgba(255,255,255,.10);
    box-shadow:0 10px 30px -20px rgba(0,0,0,.9);
  }
  header.is-scrolled nav{padding:11px 0;}

  /* 3. Jauge de progression : on sait toujours où on en est dans la page. */
  .scroll-progress{
    position:absolute;left:0;bottom:-1px;height:2px;width:100%;
    transform:scaleX(0);transform-origin:0 50%;
    background:linear-gradient(90deg,var(--yellow),var(--yellow-deep));
    transition:transform .1s linear;pointer-events:none;
  }

  /* 4. Lien actif : la section en cours s'allume dans le menu. */
  .nav-links a.is-active,
  .nav-links .has-sub.is-active > .sub-toggle{color:var(--yellow);}
  .nav-links > li > a,
  .nav-links > li > .sub-toggle{position:relative;}
  .nav-links > li > a::after,
  .nav-links > li > .sub-toggle::before{
    content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;
    background:var(--yellow);border-radius:2px;
    transform:scaleX(0);transform-origin:50% 50%;
    transition:transform .28s cubic-bezier(.16,1,.3,1);
  }
  .nav-links > li > a.is-active::after,
  .nav-links > li.is-active > .sub-toggle::before{transform:scaleX(1);}
  /* la flèche du sous-menu ne doit pas hériter du soulignement */
  .sub-toggle::before{width:auto;}

  /* 5. Retour en haut — la page fait plusieurs écrans de haut. */
  .to-top{
    position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:180;
    width:46px;height:46px;border-radius:50%;border:1px solid var(--border);
    background:rgba(18,17,16,.86);backdrop-filter:blur(14px);color:var(--text);
    display:grid;place-items:center;cursor:pointer;
    opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
    transition:opacity .3s,transform .3s cubic-bezier(.16,1,.3,1),visibility .3s,border-color .2s,background .2s;
  }
  .to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
  .to-top:hover{border-color:var(--yellow);color:var(--yellow);background:rgba(20,20,20,.92);}
  .to-top svg{width:17px;height:17px;}

  /* 6. Menu mobile : croix animée, entrée en cascade, page verrouillée. */
  .burger span{transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s;transform-origin:center;}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0);}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  body.nav-open{overflow:hidden;}

  @media (max-width:900px){
    /* L'en-tête porte un backdrop-filter, ce qui en fait le bloc conteneur de tout
       descendant en position:fixed. Le panneau de menu se retrouvait donc enfermé
       dans la hauteur de la barre (64 px) au lieu de couvrir l'écran : liens en
       vrac par-dessus la page, sans fond. On redonne des dimensions explicites. */
    .nav-links{
      inset:auto;top:0;left:0;
      width:100vw;
      height:100vh;height:100dvh;
      background:var(--bg);
      overflow-y:auto;
      padding:88px 24px 48px;
      justify-content:flex-start;
    }
    .nav-links > li{
      opacity:0;transform:translateY(14px);
      transition:opacity .34s ease,transform .34s cubic-bezier(.16,1,.3,1);
    }
    .nav-links.open > li{opacity:1;transform:translateY(0);}
    .nav-links.open > li:nth-child(1){transition-delay:.06s;}
    .nav-links.open > li:nth-child(2){transition-delay:.10s;}
    .nav-links.open > li:nth-child(3){transition-delay:.14s;}
    .nav-links.open > li:nth-child(4){transition-delay:.18s;}
    .nav-links.open > li:nth-child(5){transition-delay:.22s;}
    .nav-links.open > li:nth-child(6){transition-delay:.26s;}
    .nav-links.open > li:nth-child(7){transition-delay:.30s;}
    /* cibles tactiles confortables */
    .nav-links a{display:block;padding:6px 4px;}
    /* le soulignement d'ancrage n'a pas de sens en pleine page */
    .nav-links > li > a::after,.nav-links > li > .sub-toggle::before{display:none;}
    section[id]{scroll-margin-top:74px;}
  }

  /* 7. Respect du réglage système « moins d'animations ». */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .scroll-progress,.to-top,.nav-links > li{transition:none;}
  }

  /* =====================================================================
     ALTERNANCE FRANCHE — sections claires
     Le site enchaine desormais noir et blanc, comme les deux colonnes du CV.
     Ce bloc donne a chaque composant sa version sur fond clair.
     ===================================================================== */

  .chapo{font-size:1.1rem;max-width:600px;color:var(--muted-2);}
  .light .chapo{color:var(--light-muted);}

  section.light{background:var(--light-bg);color:var(--light-text);}
  section.light.featured{
    background:var(--light-bg);
    border-top:1px solid var(--light-border);
    border-bottom:1px solid var(--light-border);
  }
  .light h1,.light h2,.light h3,.light h4{color:var(--light-text);}
  .light .eyebrow{color:var(--yellow-on-light);}
  .light .muted-txt,.light .section-head p{color:var(--light-muted);}

  /* En-tete de projet */
  .light .feat-meta div .label{color:var(--light-muted);}
  .light .feat-meta div .val{color:var(--light-text);}
  .light .feat-num{color:var(--yellow-on-light);}
  .light .feat-row p{color:var(--light-muted);}
  .light .feat-row ul li{color:var(--light-muted);}
  .light .feat-row ul li::before{background:var(--light-text);}

  /* Cartes */
  .light .ai-card,
  .light .exp-card,
  .light .formation-card,
  .light .free-chip{background:var(--light-card);border-color:var(--light-border);}
  .light .ai-card:hover,
  .light .media-card:hover{border-color:rgba(11,10,10,.32);}
  .light .ai-card p,
  .light .exp-card .org,
  .light .exp-card ul li,
  .light .formation-card span.org,
  .light .free-chip{color:var(--light-muted);}
  .light .ai-card .ai-icon{background:rgba(11,10,10,.06);color:var(--light-text);}
  .light .exp-card ul li::before{background:var(--light-text);}
  .light .tl-date,.light .free-chip b{color:var(--yellow-on-light);}

  /* Boutons */
  .light .btn-outline{color:var(--light-text);border-color:rgba(11,10,10,.26);}
  .light .btn-outline:hover{background:var(--light-text);color:var(--light-bg);border-color:var(--light-text);}

  /* Visuels : la photo garde son degrade sombre, seule la bordure change */
  .light .media-card,
  .light .gallery-item,
  .light .yt-embed,
  .light .glow-card{border-color:var(--light-border);}

  /* Etiquettes hors photo */
  .light .tag-yellow{background:rgba(255,189,89,.24);color:#5C4409;border-color:rgba(110,82,16,.34);}
  .light .tag-blue,.light .tag-pink,.light .tag-lav{
    background:rgba(11,10,10,.06);color:var(--light-muted);border-color:var(--light-border);
  }
  /* Etiquettes posees SUR une photo : elles restent sombres pour rester lisibles */
  .light .gallery-item .g-tag{
    background:rgba(11,10,10,.80);color:#fff;border-color:rgba(255,255,255,.28);
  }
  .light .gallery-item .g-tag.tag-yellow{background:var(--yellow);color:var(--yellow-ink);border-color:transparent;}
  .light .gallery-item .g-sub,.light .media-card .cap{color:var(--muted-2);}

  /* Details techniques */
  .light .tech-details{border-top-color:var(--light-border);}
  .light .tech-details summary{color:var(--light-text);}
  .light .tech-details li{color:var(--light-muted);}

  /* Le filament decoratif ne doit pas trainer sur les fonds blancs */
  .light .site-filament{opacity:.18;}

  /* Contact et champs de formulaire en section claire */
  .light .contact-info .label{color:var(--yellow-on-light);}
  .light a.val:hover{color:var(--yellow-on-light);border-bottom-color:var(--yellow-on-light);}


  /* =====================================================================
     PAGE CV — /cv/
     ===================================================================== */

  .cv-intro{
    padding:clamp(120px,14vw,180px) 0 clamp(60px,7vw,90px);
    background:var(--bg);text-align:left;
  }
  .cv-intro h1{
    font-size:clamp(2.6rem,7vw,5rem);line-height:.98;letter-spacing:-.035em;
    font-weight:800;margin:0 0 14px;
  }
  .cv-role{
    font-family:'Archivo',sans-serif;font-weight:600;
    font-size:clamp(1.05rem,2.2vw,1.5rem);color:var(--yellow);
    letter-spacing:-.01em;margin-bottom:22px;
  }
  .cv-lede{color:var(--muted-2);font-size:1.1rem;max-width:640px;line-height:1.65;margin-bottom:38px;font-weight:300;}
  .cv-actions{justify-content:flex-start;}
  .cv-actions .btn{display:inline-flex;align-items:center;gap:10px;}
  .cv-actions .btn svg{width:17px;height:17px;flex:none;}
  .cv-meta{
    margin-top:26px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  }

  /* La feuille : le CV posé comme une page imprimée sur un fond clair */
  .cv-page{padding:clamp(56px,7vw,90px) 0;}
  .cv-sheet{margin:0;display:flex;flex-direction:column;align-items:center;gap:20px;}
  .cv-sheet a{
    display:block;width:min(880px,100%);
    border:1px solid var(--light-border);
    box-shadow:0 40px 90px -50px rgba(11,10,10,.55), 0 2px 8px rgba(11,10,10,.06);
    background:#fff;
    transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s;
  }
  .cv-sheet a:hover{
    transform:translateY(-4px);
    box-shadow:0 54px 110px -50px rgba(11,10,10,.6), 0 3px 12px rgba(11,10,10,.09);
  }
  .cv-sheet img{width:100%;height:auto;display:block;}
  .cv-sheet figcaption{
    font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--light-muted);text-align:center;
  }
  .cv-sheet figcaption a{color:var(--yellow-on-light);border-bottom:1px solid currentColor;}

  /* Version texte */
  .cv-texte{padding:clamp(80px,9vw,120px) 0;background:var(--bg-alt);border-top:1px solid var(--border);}
  .cv-cols{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;}
  .cv-cols h3{
    font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
    color:var(--yellow);margin-bottom:28px;padding-bottom:12px;border-bottom:1px solid var(--border);
  }
  .cv-poste{margin-bottom:34px;}
  .cv-poste h4{font-family:'Archivo',sans-serif;font-size:1.08rem;font-weight:700;margin:6px 0 3px;color:var(--text);}
  .cv-poste .org{display:block;color:var(--muted);font-size:.88rem;margin-bottom:12px;}
  .cv-poste ul{margin:0;}
  .cv-poste ul li{
    color:var(--muted-2);font-size:.9rem;line-height:1.6;padding:5px 0 5px 18px;position:relative;
  }
  .cv-poste ul li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:1px;background:var(--yellow);}
  .cv-poste ul li b{color:var(--text);font-weight:600;}
  .cv-bloc{margin-bottom:20px;}
  .cv-bloc-t{
    display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);font-weight:600;margin-bottom:5px;
  }
  .cv-bloc p{color:var(--muted-2);font-size:.92rem;line-height:1.7;}

  @media (max-width:900px){
    .cv-cols{grid-template-columns:1fr;gap:52px;}
    .cv-sheet a{width:100%;}
  }

  /* À l'impression, seul le CV est utile */
  @media print{
    header,footer,.to-top,.cv-intro,.cv-texte,.skip-link,.site-filament{display:none!important;}
    .cv-page{padding:0;background:#fff;}
    .cv-sheet a{border:0;box-shadow:none;width:100%;}
    .cv-sheet figcaption{display:none;}
  }

  /* Le halo doré est pensé pour un fond noir : sur blanc il ne laisse qu'une tache. */
  .light .halogen::before{display:none;}

  /* Le bandeau de disponibilité était le texte le moins lisible de la page
     alors qu'il porte l'information la plus utile. Fond opaque, texte blanc. */
  .hero-status{
    color:var(--text);font-weight:500;
    background:rgba(11,10,10,.72);
    border-color:rgba(255,255,255,.22);
  }
  .hero-status b{color:var(--yellow);font-weight:600;}