/* ---------- TOKENS ---------- */
  :root{
    --bg:#F5F0E8;
    --ink:#2C1810;
    --gold:#8B5A2B;
    --gold-rgb:139,90,43;
    --muted:#7A6B5A;
    --rule:rgba(140,123,107,0.28);
    --card:#FAF5ED;
    --card-edge:rgba(44,24,16,0.08);
    --card-hover:#FFFDF8;
    --ink-rgb:44,24,16;
    --bg-rgb:245,240,232;
    --shadow-rgb:44,24,16;
    --maxw:1240px;
    --gutter:clamp(20px, 5vw, 72px);
    --sidew:216px;
    color-scheme:light;
  }
  /* Nuit chaude, desaturee. Le fond clair doit son elegance a sa retenue
     chromatique ; le sombre applique la meme regle plutot que d'inverser la
     teinte a saturation egale, ou le brun vire a la boue. Ecart entre canaux
     ramene de 15 a 6 sur le fond : il reste chaud, il n'est plus colore. Du
     coup le dore est la seule chose saturee de la page, donc il porte. */
  :root[data-theme="dark"]{
    --bg:#15120F;
    --ink:#EFEAE2;
    --gold:#D2A468;
    --gold-rgb:210,164,104;
    --muted:#A99C8B;
    --rule:rgba(233,223,209,0.15);
    --card:#221E1A;
    --card-edge:rgba(233,223,209,0.10);
    --card-hover:#2A2621;
    --ink-rgb:239,234,226;
    --bg-rgb:21,18,15;
    --shadow-rgb:0,0,0;
    color-scheme:dark;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'DM Sans', system-ui, sans-serif;
    font-weight:400;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  ::selection{background:var(--gold);color:var(--bg);}

  /* ---------- A11Y : SKIP LINK ---------- */
  .skip-link{
    position:absolute;left:-9999px;top:-9999px;
    z-index:999;padding:14px 22px;
    background:var(--ink);color:var(--bg);
    font-family:'Poppins', sans-serif;font-weight:500;font-size:13px;
    text-decoration:none;border-radius:4px;
  }
  .skip-link:focus{
    left:16px;top:16px;
    outline:2px solid var(--gold);outline-offset:3px;
  }

  /* ---------- A11Y : FOCUS-VISIBLE GLOBAL ---------- */
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible,
  input:focus-visible,
  textarea:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
    border-radius:2px;
  }
  /* Override for trigger that had its own focus-visible */
  .lang-trigger:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

  /* ---------- A11Y : VISITED LINKS (subtle nuance) ---------- */
  a:visited:not(.cta):not(.nav-mark):not(.nav-icon):not(.back-to-top):not(.skip-link){
    /* keep ink color; modern UX rarely uses purple visited; we use a soft shift */
    color:inherit;
  }

  /* ---------- LOADER ---------- */
  .loader{
    position:fixed;inset:0;background:var(--bg);z-index:1000;
    display:flex;align-items:center;justify-content:center;
    animation:loaderAutoHide 1.1s forwards;
    transition:opacity .4s ease, visibility .4s ease;
  }
  /* C'est le CSS qui commande la sortie, pas le JS : sinon un script.js lent ou
     absent laisse l'ecran de chargement par-dessus une page deja lisible. Le
     contenu etant entierement dans le HTML, ce voile n'a qu'un role, masquer le
     bref instant ou les polices ne sont pas encore appliquees. Le JS ne fait
     qu'accelerer la sortie quand il arrive a temps. */
  .loader.hide{animation:none;opacity:0;visibility:hidden;pointer-events:none;}
  @keyframes loaderAutoHide{
    0%, 55%{opacity:1;visibility:visible;}
    100%{opacity:0;visibility:hidden;pointer-events:none;}
  }
  .loader-mark{
    font-family:'Poppins', sans-serif;
    font-weight:700;font-size:48px;color:var(--ink);
    letter-spacing:-0.02em;
    position:relative;
  }
  .loader-mark::after{
    content:"";position:absolute;left:0;right:0;bottom:-12px;
    height:1px;background:var(--gold);
    transform-origin:left;transform:scaleX(0);
    animation:loadbar .8s ease forwards;
  }
  @keyframes loadbar{to{transform:scaleX(1);}}

  /* ---------- SQUELETTE DE CHARGEMENT ----------
     Le contenu de la page est dans le HTML : il s'affiche des reception. Le menu
     et le pied de page, eux, sont recuperes en fetch depuis partials/, donc ils
     arrivent apres. Sans rien, l'utilisateur voit un site sans navigation le
     temps du trajet reseau. Ces formes occupent la place exacte du vrai menu,
     s'affichent sans attendre le JS puisqu'elles sont dans le HTML, et sont
     remplacees a l'arrivee du partial. */
  .sk{
    display:block;border-radius:4px;
    background:
      linear-gradient(90deg,
        rgba(var(--ink-rgb),0.06) 0%,
        rgba(var(--ink-rgb),0.13) 50%,
        rgba(var(--ink-rgb),0.06) 100%);
    background-size:220% 100%;
    animation:skShimmer 1.6s ease-in-out infinite;
  }
  @keyframes skShimmer{
    from{background-position:120% 0;}
    to{background-position:-120% 0;}
  }

  /* barre du haut : meme position, meme rythme que .nav */
  .sk-top{
    position:fixed;top:0;left:0;right:0;z-index:50;
    padding:22px var(--gutter);
    display:flex;align-items:center;justify-content:space-between;
    pointer-events:none;
  }
  .sk-top-right{display:flex;align-items:center;gap:14px;}
  .sk-mark-sm{width:52px;height:22px;}
  .sk-dot{width:18px;height:18px;border-radius:50%;}
  .sk-pill{width:74px;height:34px;border-radius:999px;}

  /* menu vertical : masque sous 901px, comme .side-nav */
  .sk-side{display:none;}
  @media (min-width:901px){
    .sk-side{
      position:fixed;top:0;left:0;bottom:0;width:var(--sidew);
      display:flex;flex-direction:column;
      padding:30px 24px 28px 30px;
      background:var(--bg);
      border-right:1px solid var(--rule);
      z-index:55;pointer-events:none;
    }
    .sk-side .sk-mark{width:56px;height:26px;margin-bottom:auto;}
    .sk-side-links{display:flex;flex-direction:column;gap:14px;margin-bottom:26px;}
    .sk-side-links .sk{height:11px;}
    .sk-side-links .sk:nth-child(1){width:76px;}
    .sk-side-links .sk:nth-child(2){width:104px;}
    .sk-side-links .sk:nth-child(3){width:88px;}
    .sk-side-links .sk:nth-child(4){width:70px;}
    .sk-side-links .sk:nth-child(5){width:84px;}
    .sk-side-links .sk:nth-child(6){width:48px;}
    .sk-side-links .sk:nth-child(7){width:66px;}
    .sk-toggle{width:58px;height:30px;border-radius:999px;}
    /* la barre du haut se decale comme .nav pour ne pas passer sous le menu */
    .sk-top{left:var(--sidew);justify-content:flex-end;}
    .sk-top .sk-mark-sm{display:none;}
  }

  /* pied de page : occupe la hauteur du vrai pour eviter le saut a l'arrivee */
  .sk-footer{
    padding:96px var(--gutter) 60px;
    display:flex;flex-direction:column;align-items:center;gap:44px;
    border-top:1px solid var(--rule);
  }
  .sk-footer-mark{width:120px;height:30px;}
  .sk-footer-cols{
    display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:44px;
    width:100%;max-width:880px;
  }
  .sk-footer-col{display:flex;flex-direction:column;align-items:center;gap:11px;}
  .sk-footer-col .sk{height:10px;width:100%;max-width:96px;}
  .sk-footer-col .sk:first-child{max-width:70px;height:11px;margin-bottom:7px;}
  @media (max-width:760px){
    .sk-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;}
    .sk-footer{padding:64px var(--gutter) 48px;}
  }

  @media (prefers-reduced-motion: reduce){
    .sk{animation:none;background:rgba(var(--ink-rgb),0.09);}
  }

  /* Menu de secours : affiche si partials/nav.html reste injoignable. Volontairement
     reduit a l'essentiel, circuler dans le site, mais style pour ne pas donner
     l'impression d'une page cassee. */
  .nav--fallback{
    background:rgba(var(--bg-rgb),0.94);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid var(--rule);
    gap:20px;flex-wrap:wrap;
  }
  .nav-fallback-links{
    list-style:none;margin:0;padding:0;
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;
  }
  .nav-fallback-links a{
    font-family:'Poppins', sans-serif;font-size:11px;font-weight:500;
    letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
    transition:color .2s ease;
  }
  .nav-fallback-links a:hover{color:var(--gold);}
  @media (min-width:901px){
    body.chrome-fallback{padding-left:0;}
    body.chrome-fallback .nav{left:0;justify-content:space-between;}
    body.chrome-fallback .nav .nav-mark{display:block;}
  }

  /* ---------- CURSOR ACCENT ---------- */
  .cursor-accent{
    position:fixed;top:0;left:0;
    width:14px;height:14px;border-radius:50%;
    background:var(--gold);
    pointer-events:none;z-index:9999;
    transform:translate3d(-50%,-50%,0);
    transition:width .22s ease, height .22s ease, opacity .22s ease, background .22s ease;
    opacity:0;
    mix-blend-mode:multiply;
  }
  .cursor-accent.is-visible{opacity:0.55;}
  .cursor-accent.is-hover{
    width:38px;height:38px;opacity:0.32;
  }
  /* multiply assombrit : sur un fond sombre le point disparaissait. screen
     eclaircit, c'est l'operation symetrique. */
  :root[data-theme="dark"] .cursor-accent{mix-blend-mode:screen;}
  @media (hover:none), (pointer:coarse){
    .cursor-accent{display:none;}
  }

  /* ---------- PARTICLES ---------- */
  .particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
  .particle{
    position:absolute;width:2px;height:2px;border-radius:50%;
    background:var(--ink);
    animation:drift linear infinite;
  }
  @keyframes drift{
    0%{transform:translate(0,0);}
    100%{transform:translate(var(--dx, 40px), var(--dy, -120px));}
  }

  /* ---------- NAV ---------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    padding:22px var(--gutter);
    display:flex;align-items:center;justify-content:space-between;
    transition:background .3s ease, backdrop-filter .3s ease;
  }
  .nav.scrolled{
    background:rgba(var(--bg-rgb),0.92);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .nav-mark{
    font-family:'Poppins', sans-serif;
    font-weight:700;font-size:22px;letter-spacing:-0.02em;
  }
  .nav-mark span{color:var(--gold);}
  .lang-dropdown{position:relative;}

  /* ---------- SIDE NAV (menu vertical, desktop) ---------- */
  .side-nav{display:none;}
  @media (min-width:901px){
    body{padding-left:var(--sidew);}
    .nav{left:var(--sidew);justify-content:flex-end;}
    .nav .nav-mark{display:none;}
    .side-nav{
      position:fixed;top:0;left:0;bottom:0;width:var(--sidew);
      display:flex;flex-direction:column;
      padding:30px 24px 28px 30px;
      background:var(--bg);
      border-right:1px solid var(--rule);
      z-index:55;
      overflow-y:auto;
    }
  }
  /* le logo en haut, margin-bottom:auto ancre le reste du menu en bas */
  .side-mark{font-size:24px;margin-bottom:auto;flex:none;}
  .side-links{display:flex;flex-direction:column;gap:2px;}
  .side-links a{
    position:relative;
    font-family:'Poppins', sans-serif;font-size:12px;font-weight:500;
    letter-spacing:0.08em;text-transform:uppercase;
    color:var(--muted);
    padding:8px 0 8px 20px;
    transition:color .2s ease;
  }
  .side-links a::before{
    content:"";position:absolute;left:0;top:50%;
    width:11px;height:1.5px;background:var(--gold);
    transform:translateY(-50%) scaleX(0);transform-origin:left;
    transition:transform .25s ease;
  }
  .side-links a:hover{color:var(--ink);}
  .side-links a.active{color:var(--ink);}
  .side-links a:hover::before,
  .side-links a.active::before{transform:translateY(-50%) scaleX(1);}
  .side-links-sub a{font-size:11px;letter-spacing:0.1em;}

  /* ---------- SIDE NAV : DROPDOWN "PLUS" ---------- */
  .side-more{display:flex;flex-direction:column;}
  .side-more-trigger{
    display:flex;align-items:center;gap:8px;
    background:none;border:none;cursor:pointer;
    padding:8px 0 8px 20px;text-align:left;
    font-family:'Poppins', sans-serif;font-size:12px;font-weight:500;
    letter-spacing:0.08em;text-transform:uppercase;
    color:var(--muted);
    transition:color .2s ease;
  }
  .side-more-trigger:hover,
  .side-more.open .side-more-trigger,
  .side-more.has-active .side-more-trigger{color:var(--ink);}
  .side-more-chevron{width:9px;height:6px;flex:none;transition:transform .2s ease;}
  .side-more.open .side-more-chevron{transform:rotate(180deg);}
  .side-links-sub{padding-left:12px;}
  .side-links-sub[hidden]{display:none;}

  /* ---------- THEME TOGGLE (light / dark) ---------- */
  .theme-toggle{
    display:inline-flex;align-items:center;
    margin-top:36px;align-self:flex-start;
    padding:0;background:none;border:none;cursor:pointer;
  }
  .theme-toggle-track{
    display:inline-flex;align-items:center;gap:6px;
    border:1px solid var(--rule);border-radius:999px;
    padding:3px;
    transition:border-color .25s ease;
  }
  .theme-toggle:hover .theme-toggle-track{border-color:var(--muted);}
  .theme-toggle .tt-icon{
    width:26px;height:26px;padding:6px;border-radius:50%;
    color:var(--muted);opacity:.55;
    stroke-width:1.5;
    transition:background-color .25s ease, color .25s ease, opacity .25s ease;
  }
  :root:not([data-theme="dark"]) .theme-toggle .tt-sun,
  :root[data-theme="dark"] .theme-toggle .tt-moon{
    background:var(--gold);color:var(--bg);opacity:1;stroke-width:2.2;
  }
  .mobile-menu .theme-toggle{margin:36px auto 0;align-self:center;}

  /* ---------- NAV CONTACT ICONS (LinkedIn + Email) ---------- */
  .nav-contact{
    display:flex;align-items:center;gap:14px;
    margin-right:16px;
  }
  .nav-icon{
    width:18px;height:18px;
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--ink);opacity:.7;transition:opacity .2s ease, color .2s ease;
  }
  .nav-icon svg{width:100%;height:100%;}
  .nav-icon:hover{opacity:1;color:var(--gold);}

  /* ---------- BACK TO TOP BUTTON ---------- */
  .back-to-top{
    position:fixed;bottom:24px;right:24px;
    width:44px;height:44px;
    background:var(--ink);color:var(--bg);
    border:none;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease;
    z-index:40;
    box-shadow:0 2px 12px rgba(var(--shadow-rgb),0.18);
  }
  .back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);}
  .back-to-top:hover{background:var(--gold);}
  .back-to-top svg{width:18px;height:18px;}

  /* ---------- MOBILE MENU : LANG SWITCHER ---------- */
  .mobile-menu-lang{
    display:flex;gap:12px;align-items:center;
    margin-top:36px;
    padding-top:28px;
    border-top:1px solid var(--rule);
  }
  .mobile-lang-btn{
    background:transparent;
    border:1px solid var(--rule);
    border-radius:999px;
    padding:8px 18px;
    font-family:'Poppins', sans-serif;font-weight:600;font-size:12px;
    letter-spacing:0.15em;color:var(--ink);
    cursor:pointer;transition:all .2s ease;
    min-width:56px;
  }
  .mobile-lang-btn:hover{border-color:var(--gold);color:var(--gold);}
  .mobile-lang-btn.active{
    background:var(--ink);color:var(--bg);border-color:var(--ink);
  }
  .lang-trigger{
    display:inline-flex;align-items:center;gap:8px;
    border:1px solid var(--ink);border-radius:999px;
    padding:6px 12px 6px 10px;
    font-family:'Poppins', sans-serif;font-size:12px;font-weight:600;
    letter-spacing:0.08em;background:transparent;cursor:pointer;
    color:var(--ink);transition:background .2s ease, color .2s ease;
  }
  .lang-trigger:hover{background:var(--ink);color:var(--bg);}
  .lang-flag{display:inline-flex;align-items:center;line-height:1;}
  .lang-flag-svg{width:18px;height:12px;border-radius:1.5px;display:block;}
  .lang-chevron{width:10px;height:7px;transition:transform .2s ease;}
  .lang-dropdown.open .lang-chevron{transform:rotate(180deg);}
  .lang-menu{
    position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
    list-style:none;padding:6px;margin:0;
    background:var(--bg);border:1px solid var(--ink);
    border-radius:14px;min-width:88px;
    box-shadow:0 4px 16px rgba(var(--shadow-rgb),0.08);
    z-index:60;
  }
  .lang-menu[hidden]{display:none;}
  .lang-opt{
    display:flex;align-items:center;gap:8px;
    padding:7px 12px;border-radius:999px;cursor:pointer;
    font-family:'Poppins', sans-serif;font-size:12px;font-weight:600;
    letter-spacing:0.08em;color:var(--ink);
    transition:background .15s ease, color .15s ease;
    outline:none;
  }
  .lang-opt:hover, .lang-opt:focus-visible{background:rgba(var(--ink-rgb),0.06);}
  .lang-opt.active{background:var(--ink);color:var(--bg);}

  /* ---------- LAYOUT ---------- */
  section{
    position:relative;
    padding:clamp(48px,6vh,72px) var(--gutter);
    max-width:var(--maxw);
    margin:0 auto;
  }
  /* Les ancres atterrissent sur l'eyebrow (01. ...), pas sous la nav vitrée */
  section[id]{scroll-margin-top:44px;}
  /* Premiere section des sous-pages : degager la nav fixe */
  main > section:first-child:not(.hero){
    padding-top:clamp(92px,12vh,116px);
  }
  .eyebrow{
    font-family:'Poppins', sans-serif;
    font-size:12px;font-weight:500;
    letter-spacing:0.22em;text-transform:uppercase;
    color:var(--muted);
    display:inline-flex;align-items:center;gap:14px;
    margin-bottom:28px;
  }
  .eyebrow::before{
    content:"";width:36px;height:1px;background:var(--gold);
  }
  h2.section-title{
    font-family:'Poppins', sans-serif;font-weight:600;
    font-size:clamp(32px,4.2vw,52px);line-height:1.08;
    letter-spacing:-0.02em;margin:0 0 28px;
    color:var(--ink);
  }
  .section-lede{
    font-family:'DM Sans', sans-serif;
    font-size:clamp(17px,1.4vw,20px);
    color:var(--muted);
    margin:0 0 28px;text-wrap:pretty;
  }

  /* ---------- BREADCRUMB (fil d'Ariane) ---------- */
  .breadcrumb{
    display:flex;align-items:center;gap:11px;
    font-family:'Poppins', sans-serif;font-size:12px;font-weight:500;
    letter-spacing:0.16em;text-transform:uppercase;
    color:var(--muted);margin:0 0 20px;
  }
  .breadcrumb a{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--muted);transition:color .2s ease;
  }
  .breadcrumb a:hover{color:var(--gold);}
  .breadcrumb a svg{width:15px;height:15px;}
  .breadcrumb-sep{width:18px;height:1px;background:var(--rule);flex:none;}
  .breadcrumb [aria-current="page"]{color:var(--ink);}

  /* ---------- SECTION PREVIEW (aperçus sur la landing) ---------- */
  .section-preview{
    list-style:none;margin:0 0 24px;padding:0;
    width:fit-content;max-width:100%;
  }
  .section-preview-item{
    display:grid;
    grid-template-columns:minmax(116px,168px) 1fr;
    gap:6px 28px;align-items:baseline;
    padding:18px 28px 18px 2px;
    border-bottom:1px solid var(--rule);
  }
  .section-preview-tag{
    font-family:'Poppins', sans-serif;font-size:11px;font-weight:600;
    letter-spacing:0.13em;text-transform:uppercase;color:var(--gold);
    line-height:1.55;
  }
  .section-preview-body{display:flex;flex-direction:column;gap:3px;}
  .section-preview-title{
    font-family:'Poppins', sans-serif;font-weight:500;
    font-size:clamp(16px,1.45vw,19px);line-height:1.32;
    letter-spacing:-0.01em;color:var(--ink);text-wrap:balance;
  }
  .section-preview-meta{
    font-family:'DM Sans', sans-serif;font-size:13.5px;font-weight:400;
    letter-spacing:0;text-transform:none;color:var(--muted);line-height:1.45;
  }
  @media (max-width:600px){
    .section-preview-item{grid-template-columns:1fr;gap:5px;padding:16px 2px;}
  }

  /* ---------- PREVIEW EN COLONNES (Bénévolat) ---------- */
  .preview-cols{
    display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
    margin:0 0 24px;
  }
  .preview-cols--2{grid-template-columns:repeat(2,1fr);}
  .preview-cols--4{grid-template-columns:repeat(4,1fr);gap:28px;}
  @media (max-width:1040px){
    .preview-cols--4{grid-template-columns:repeat(2,1fr);row-gap:32px;}
  }
  .preview-col{
    display:flex;flex-direction:column;gap:6px;
    padding-top:16px;border-top:1px solid var(--gold);
  }
  @media (max-width:700px){
    .preview-cols{grid-template-columns:1fr;gap:20px;width:fit-content;max-width:100%;}
  }

  /* ---------- PAGE NAV (sauter d'une page sœur à l'autre) ---------- */
  .page-nav{
    margin-top:84px;
    border-top:1px solid var(--ink);
    padding-top:30px;
  }
  .page-nav-label{
    display:block;margin-bottom:22px;
    font-family:'Poppins', sans-serif;font-size:11px;font-weight:500;
    letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);
  }
  .page-nav-links{display:flex;flex-wrap:wrap;gap:16px;}
  .page-nav-link{
    flex:1 1 280px;
    display:flex;align-items:center;gap:18px;
    padding:14px 0;
  }
  .page-nav-link--next{justify-content:flex-end;}
  .page-nav-link--next .page-nav-link-text{align-items:flex-end;text-align:right;}
  .page-nav-link--prev{justify-content:flex-start;}
  .page-nav-link-text{display:flex;flex-direction:column;gap:5px;min-width:0;}
  .page-nav-link-eyebrow{
    font-family:'Poppins', sans-serif;font-size:10px;font-weight:500;
    letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);
  }
  .page-nav-link-title{
    font-family:'Poppins', sans-serif;font-weight:600;
    font-size:clamp(16px,1.5vw,19px);letter-spacing:-0.01em;line-height:1.25;
    color:var(--ink);text-wrap:balance;
  }
  .page-nav-link:hover .page-nav-link-title{
    text-decoration:underline;text-decoration-color:var(--gold);
    text-underline-offset:4px;text-decoration-thickness:1.5px;
  }
  .page-nav-link svg{
    width:20px;height:20px;color:var(--gold);flex:none;
    transition:transform .2s ease;
  }
  .page-nav-link--next:hover svg{transform:translateX(4px);}
  .page-nav-link--prev:hover svg{transform:translateX(-4px);}
  @media (max-width:600px){
    .page-nav-link{flex-basis:100%;}
  }

  /* ---------- HERO ---------- */
  .hero{
    min-height:100dvh;
    max-width:var(--maxw);margin:0 auto;
    padding:140px var(--gutter) 80px;
    display:grid;grid-template-columns:1fr 1fr;gap:60px;
    align-items:center;
    position:relative;z-index:1;
  }
  .hero-left{position:relative;}
  .hero-hello{
    font-family:'DM Sans', sans-serif;
    font-size:clamp(17px,1.5vw,21px);
    color:var(--muted);
    margin:0 0 16px;
    opacity:0;animation:fadeUp .6s ease forwards .2s;
  }
  .hero-name{
    font-family:'Poppins', sans-serif;font-weight:700;
    font-size:clamp(48px,11vw,128px);line-height:.96;
    letter-spacing:-0.035em;margin:0 0 8px;color:var(--ink);
    position:relative;
    text-shadow:
      0 1px 0 rgba(var(--shadow-rgb),.04),
      0 2px 0 rgba(var(--shadow-rgb),.03),
      0 3px 0 rgba(var(--shadow-rgb),.025),
      0 4px 0 rgba(var(--shadow-rgb),.02),
      0 6px 18px rgba(var(--shadow-rgb),.08);
    opacity:0;animation:fadeUp .5s ease forwards;
  }
  .hero-name .ln{display:block;}
  .hero-name .shimmer{
    background:linear-gradient(90deg,
      var(--ink) 0%,
      var(--ink) 40%,
      var(--gold) 50%,
      var(--ink) 60%,
      var(--ink) 100%);
    background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:shimmer 5.5s ease-in-out infinite;
  }
  @keyframes shimmer{
    0%,100%{background-position:200% 0;}
    50%{background-position:-100% 0;}
  }
  .hero-title{
    font-family:'Poppins', sans-serif;font-weight:500;
    font-size:clamp(15px,1.3vw,18px);letter-spacing:0.04em;
    color:var(--ink);margin:20px 0 0;line-height:1.4;
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    opacity:0;animation:fadeUp .6s ease forwards .55s;
  }
  .hero-location{
    font-weight:400;font-size:0.85em;color:var(--muted);
  }
  .hero-tagline{
    font-family:'DM Sans', sans-serif;font-weight:300;
    font-size:clamp(14px,1.2vw,16px);line-height:1.6;
    margin:36px 0 48px;color:var(--ink);
    opacity:0;animation:fadeUp .7s ease forwards .7s;
  }
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;
    opacity:0;animation:fadeUp .6s ease forwards .9s;}
  .cta{
    font-family:'Poppins', sans-serif;font-weight:500;font-size:14px;
    letter-spacing:0.04em;padding:14px 28px;border-radius:6px;
    transition:all .25s ease;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
  }
  .cta-primary{background:var(--ink);color:var(--bg);}
  .cta-primary:hover{background:var(--gold);color:var(--ink);}
  .cta-primary:active{transform:scale(0.97) translateY(1px);}
  .cta-secondary{background:transparent;color:var(--ink);border:1px solid var(--ink);}
  .cta-secondary:hover{background:var(--ink);color:var(--bg);}
  .cta-secondary:active{transform:scale(0.97) translateY(1px);}
  .cta svg{width:14px;height:14px;}

  /* ---------- AVATAR ---------- */
  .hero-right{
    position:relative;display:flex;align-items:center;justify-content:center;
    min-height:520px;
    opacity:0;animation:fadeIn 1s ease forwards .4s;
  }
  /* Portrait détouré posé sur un disque : le disque est le cadre, la tête le
     dépasse par le haut. L'image est donc plus haute que le disque et calée
     sur son bas — d'où la largeur > 100 % (ratio du fichier : 900 × 971). */
  .hero-photo{
    position:relative;margin:0;
    width:min(400px,100%);aspect-ratio:1;
  }
  .hero-photo::before{
    content:"";position:absolute;inset:0;
    border-radius:50%;
    border:2px solid var(--gold);
    background:rgba(139,90,43,0.07);
    box-shadow:0 18px 40px -22px rgba(28,16,10,0.45);
  }
  /* Le buste est detoure par le disque, seule la tete sort du cadre. Le masque
     est l'union de deux couches (mask-composite: add) :
       - tout ce qui est au-dessus de 31.4 % de la hauteur de l'image,
       - le disque lui-meme, exprime dans le repere de l'image.
     31.4 % est la hauteur ou la silhouette croise le cercle : la coupe tombe
     pile sur l'intersection des deux contours, donc elle ne se voit pas. Elle
     escamote aussi le bas plat de la photo source, qui finit hors du disque.
     Les valeurs dependent de width:118% et du ratio du fichier (764 x 840) :
     les recalculer si l'un des deux change. */
  .hero-photo img{
    position:absolute;
    left:50%;bottom:0;transform:translateX(-50%);
    width:118%;height:auto;display:block;
    -webkit-mask-image:
      linear-gradient(to bottom, #000 31.4%, transparent 31.4%),
      radial-gradient(42.4% 38.5% at 50% 61.5%, #000 99%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, #000 31.4%, transparent 31.4%),
      radial-gradient(42.4% 38.5% at 50% 61.5%, #000 99%, transparent 100%);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-composite:source-over;mask-composite:add;
  }
  /* Avec le menu vertical, la colonne de contenu perd 216px : on plafonne le nom
     en fonction de la largeur restante pour rendre sa place a l'illustration. */
  @media (min-width:901px){
    .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:48px;}
    .hero-name{font-size:clamp(48px, calc((100vw - var(--sidew)) * 0.086), 106px);}
  }

  /* ---------- SCROLL CUE ---------- */
  .scroll-cue{
    position:absolute;left:var(--gutter);bottom:42px;
    font-family:'Poppins', sans-serif;font-size:11px;font-weight:500;
    letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);
    display:flex;align-items:center;gap:14px;
    opacity:0;animation:fadeUp .6s ease forwards 1.8s;
  }
  .scroll-cue .line{
    width:36px;height:1px;background:var(--muted);position:relative;overflow:hidden;
  }
  .scroll-cue .line::after{
    content:"";position:absolute;inset:0;background:var(--ink);
    transform:translateX(-100%);animation:trickle 2.5s ease-in-out infinite;
  }
  @keyframes trickle{
    0%{transform:translateX(-100%);}
    50%{transform:translateX(0);}
    100%{transform:translateX(100%);}
  }

  /* ---------- À PROPOS ---------- */
  /* La colonne de gauche ne porte qu'un titre et une ligne : elle prenait 42 %
     de la largeur, et son vide suivait la lecture puisqu'elle est collante.
     Reequilibree au profit du texte, qui gagne la mesure qui lui manquait. */
  .about-grid{
    display:grid;grid-template-columns:minmax(200px,3.2fr) 7fr;
    gap:clamp(40px,5vw,80px);align-items:start;
  }
  .about-intro{position:sticky;top:110px;}
  .about-intro .section-title{margin-bottom:18px;}
  .about-intro .section-lede{margin-bottom:0;font-size:clamp(18px,1.5vw,22px);}
  /* Fer a gauche, pas justifie. La justification demande une mesure large pour
     repartir les blancs ; a 53 caracteres elle creusait des rivieres et forcait
     des coupures a chaque ligne, jusqu'a neuf mots coupes par ecran sur mobile. */
  .about-body p{
    font-size:clamp(18px,1.5vw,22px);line-height:1.55;
    margin:0 0 22px;color:var(--ink);font-weight:400;
    text-align:left;hyphens:none;
    text-wrap:pretty;
  }
  .about-meta{
    margin-top:36px;
    display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:28px 40px;
    padding-top:32px;border-top:1px solid var(--rule);
  }
  @media (max-width:700px){
    .about-meta{grid-template-columns:repeat(2, minmax(0,1fr));}
  }
  .meta-item .k{
    font-family:'Poppins', sans-serif;font-size:11px;font-weight:500;
    letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
    margin-bottom:6px;
  }
  .meta-item .v{
    font-family:'Poppins', sans-serif;font-size:15px;font-weight:500;color:var(--ink);
  }

  /* ---------- COMPÉTENCES ---------- */
  .skills-list{
    margin-top:0;
  }
  .skill-row{
    display:grid;grid-template-columns:80px 1fr;gap:32px;
    padding:28px 0;
    border-bottom:1px solid var(--rule);
    align-items:baseline;
  }
  .skill-row-num{
    font-family:'Poppins', sans-serif;font-weight:600;
    font-size:13px;letter-spacing:0.22em;
    color:var(--gold);
  }
  .skill-row-title{
    font-family:'Poppins', sans-serif;font-weight:600;
    font-size:14px;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--ink);
    margin:0 0 12px;
  }
  .skill-row-stack{
    font-size:16px;line-height:1.7;color:var(--muted);
    margin:0;text-wrap:pretty;
  }
  .skill-row-stack strong{
    font-weight:600;color:var(--ink);
  }
  .skills-additional{
    margin-top:28px;
    display:flex;flex-wrap:wrap;gap:14px 20px;
    font-size:14.5px;color:var(--muted);
    align-items:baseline;
  }
  .skills-additional-label{
    font-family:'Poppins', sans-serif;font-weight:500;
    font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--ink);
  }
  .skills-additional-list{
    color:var(--muted);
  }

  /* ---------- TIMELINE STATS & IMPACT ---------- */
  .t-stats{
    display:flex;flex-wrap:nowrap;align-items:stretch;
    gap:0;
    margin:20px 0 0;
  }
  .t-stat{
    display:flex;flex-direction:column;gap:7px;
    padding:0 22px;
    border-left:1px solid var(--rule);
    flex:1 1 0;min-width:0;
  }
  .t-stat:first-child{padding-left:0;border-left:none;}
  .t-stat-num{
    font-family:'Poppins', sans-serif;font-weight:600;
    font-size:20px;letter-spacing:-0.01em;
    color:var(--gold);line-height:1;
  }
  .t-stat-lab{
    font-family:'DM Sans', sans-serif;font-size:14px;line-height:1.32;
    color:var(--ink);text-wrap:pretty;
  }
  .t-impact{
    margin:18px 0 0;padding-top:16px;
    border-top:1px solid var(--rule);
    font-family:'DM Sans', sans-serif;font-size:15px;line-height:1.6;
    color:var(--muted);text-wrap:pretty;
  }
  .t-impact-eyebrow{
    font-family:'Poppins', sans-serif;font-size:10px;font-weight:600;
    letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);
    display:block;margin-bottom:8px;
  }

  /* ---------- EXPERIENCE TIMELINE ---------- */
  .timeline{
    position:relative;padding-left:42px;
  }
  .timeline::before{
    content:"";position:absolute;left:12px;top:8px;bottom:8px;
    width:1px;background:var(--rule);
  }
  .t-item{position:relative;padding-bottom:56px;}
  .t-item:last-child{padding-bottom:0;}
  .t-icon{
    position:absolute;left:-42px;top:0;
    width:26px;height:26px;border-radius:50%;
    background:var(--bg);border:1px solid var(--ink);
    display:flex;align-items:center;justify-content:center;
  }
  .t-icon svg{width:13px;height:13px;}
  .t-date{
    font-family:'Poppins', sans-serif;font-size:11px;font-weight:500;
    letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
    margin-bottom:8px;
  }
  .t-role{
    font-family:'Poppins', sans-serif;font-weight:600;font-size:22px;
    color:var(--ink);margin:0 0 4px;letter-spacing:-0.01em;
  }
  .t-org{
    font-family:'DM Sans', sans-serif;font-size:14px;font-style:italic;
    color:var(--gold);margin-bottom:14px;
  }
  .t-desc{
    color:var(--ink);font-size:16px;line-height:1.62;
    text-wrap:pretty;margin:0;

  }
  .t-bullets{
    list-style:none;padding:0;margin:0;
  }
  .t-bullets li{
    position:relative;
    padding-left:22px;
    color:var(--ink);font-size:16px;line-height:1.62;
    margin-bottom:10px;
    text-wrap:pretty;

  }
  .t-bullets li:last-child{margin-bottom:0;}
  .t-bullets li::before{
    content:"•";
    position:absolute;
    left:4px;
    top:0;
    color:var(--gold);
    font-size:18px;
    line-height:1.62;
  }

  /* ---------- PROJETS ---------- */
  .projects-stack{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    perspective:1800px;
  }
  .project{
    background:var(--card);
    padding:24px 26px;
    border-radius:6px;
    display:flex;flex-direction:column;gap:0;
    transform-style:preserve-3d;
    transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, background-color .3s ease;
    /* le filet interieur porte la separation : sur un fond sombre l'ecart de
       luminance entre deux surfaces se tasse, l'ombre seule ne suffit plus.
       En inset pour ne pas decaler la grille. */
    box-shadow:inset 0 0 0 1px var(--card-edge), 0 1px 0 rgba(var(--shadow-rgb),0.04);
    position:relative;
  }
  .project::before{
    content:"";position:absolute;inset:0;border-radius:6px;
    background:linear-gradient(135deg, rgba(139,90,43,0.06) 0%, rgba(139,90,43,0) 35%);
    pointer-events:none;
  }
  .project:hover{
    background:var(--card-hover);
    box-shadow:inset 0 0 0 1px var(--card-edge), 0 18px 50px -25px rgba(var(--shadow-rgb),0.25);
  }
  .project-num{
    font-family:'Poppins', sans-serif;font-weight:700;font-size:11px;
    color:var(--gold);letter-spacing:0.12em;margin-bottom:12px;
    text-transform:uppercase;
    line-height:1;
    display:flex;align-items:center;gap:10px;
  }
  .project-num::after{content:"";flex:1;height:1px;background:var(--rule);max-width:40px;}
  .project-head{
    display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
    margin-bottom:12px;
  }
  .project-title{
    font-family:'Poppins', sans-serif;font-weight:600;
    font-size:clamp(16px,1.4vw,20px);line-height:1.25;
    margin:0;color:var(--ink);letter-spacing:-0.01em;
    flex:1 1 auto;
    text-wrap:balance;
  }
  .pill{
    font-family:'Poppins', sans-serif;font-size:11px;font-weight:600;
    letter-spacing:0.1em;text-transform:uppercase;
    padding:4px 11px;border-radius:999px;
    background:rgba(var(--gold-rgb),0.10);
    border:1px solid rgba(var(--gold-rgb),0.38);
    color:var(--gold);
    display:inline-flex;align-items:center;gap:6px;
    white-space:nowrap;
  }
  .pill.dot::before{
    content:"";width:5px;height:5px;border-radius:50%;background:var(--ink);
    animation:blink 1.6s ease-in-out infinite;
  }
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:.35;}}
  .project-desc{
    color:var(--ink);font-size:14px;line-height:1.58;
    margin:0 0 16px;text-wrap:pretty;
    flex:1;

  }
  .tools-row{
    display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;
  }

  /* Contour plutot qu'aplat. En aplat, la meme regle donnait du texte fonce sur
     dore en clair (2.42:1) et du texte clair sur dore en sombre (1.9:1) : illisible
     des deux cotes, et en sombre les pastilles devenaient l'element le plus lourd
     de la carte. Le contour tient le contraste dans les deux themes et rend aux
     pastilles leur rang de marque secondaire. */
  .tool{
    font-family:'Poppins', sans-serif;font-size:10px;font-weight:600;
    letter-spacing:0.08em;text-transform:uppercase;
    padding:3px 9px;border-radius:999px;
    background:rgba(var(--gold-rgb),0.10);
    border:1px solid rgba(var(--gold-rgb),0.38);
    color:var(--gold);
  }
  .gh-link{
    font-family:'Poppins', sans-serif;font-size:12px;font-weight:500;
    color:var(--ink);display:inline-flex;align-items:center;gap:8px;
    border-bottom:1px solid var(--ink);padding-bottom:2px;
    transition:color .2s, border-color .2s;
  }
  .gh-link:hover{color:var(--gold);border-color:var(--gold);}
  .gh-link svg{width:13px;height:13px;}

  /* ---------- PROJECTS — line variant for "Autres travaux" ---------- */

  /* ---------- PROJECT HERO — full-width featured spotlight (inherits standard card look) ---------- */
  .project.project-hero{
    grid-column:1 / -1;
    transform:none !important;
  }
  .project.project-hero .project-title{max-width:48ch;}
  .project.project-hero .project-desc{max-width:68ch;}

  /* ---------- PROJECTS — line variant for "Autres travaux" ---------- */
  .project.project-line{
    grid-column:1 / -1;
    background:transparent;
    padding:26px 0 28px;
    border-radius:0;
    border-top:1px solid var(--rule);
    box-shadow:none !important;
    transform:none !important;
    display:block;
    transition:none;
  }
  .project.project-line:hover{
    background:transparent;
    box-shadow:none !important;
  }
  .project.project-line::before{content:none;}
  .project-subcategory + .project.project-line{border-top:none;}
  .project-category + .project.project-line{border-top:none;}
  .project.project-line .project-body{display:flex;flex-direction:column;}
  .project.project-line .project-num{display:none;}
  .project.project-line .project-head{margin:0 0 10px;display:block;}
  .project.project-line .project-title{
    font-family:'Poppins', sans-serif;font-weight:600;
    font-size:clamp(17px,1.5vw,21px);letter-spacing:-0.01em;line-height:1.3;
    color:var(--ink);margin:0;
    text-wrap:balance;
    transition:color .2s ease;
  }
  .project.project-line:hover .project-title{color:var(--gold);}
  .project.project-line .project-desc{
    display:block;
    font-family:'DM Sans', sans-serif;font-size:15px;line-height:1.55;
    color:var(--muted);margin:0 0 16px;text-wrap:pretty;
  }
  .project.project-line .tools-row{
    margin:0 0 14px;flex-wrap:wrap;gap:6px;justify-content:flex-start;
  }
  .project.project-line .tool{white-space:nowrap;}
  .project.project-line .docs-row{
    margin:0;justify-content:flex-start;gap:20px;flex-wrap:wrap;
  }
  @media (max-width: 900px){
    .project.project-line{padding:22px 0 24px;}
    .project.project-line .project-title{white-space:normal;text-overflow:clip;}
    .project.project-line .docs-row{justify-content:flex-start;flex-wrap:wrap;}
    /* .contact prefixe : bat la regle de base (meme specificite, plus bas dans le fichier) */
    .contact .contact-intents{flex-direction:column;gap:0;}
    /* garder LinkedIn + Substack cote a cote = 3 lignes au total */
    .contact .contact-intent-pair{flex-wrap:nowrap;gap:18px clamp(16px,4vw,40px);}
  }


  .project-body{display:flex;flex-direction:column;flex:1;}

  .project-fictif{
    position:absolute;top:24px;right:14px;
    font-family:'Poppins',sans-serif;font-size:7.5px;font-weight:500;
    letter-spacing:0.12em;text-transform:uppercase;
    color:var(--muted);opacity:0.7;
    z-index:2;
    white-space:nowrap;
    line-height:1;
  }

  /* ---------- PROJECT CATEGORIES ---------- */
  .project-category{
    grid-column:1 / -1;
    padding:20px 0 12px;
    margin-top:16px;
    border-bottom:1px solid var(--ink);
    display:flex;align-items:baseline;gap:16px;
  }
  .project-category:first-child{margin-top:0;}
  .project-category-label{
    font-family:'Poppins', sans-serif;font-weight:600;
    font-size:clamp(16px,1.6vw,20px);letter-spacing:-0.02em;color:var(--ink);
  }
  .project-category-count{
    font-family:'Poppins',sans-serif;font-size:10px;font-weight:500;
    letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
    margin-left:auto;text-align:right;
  }
  .project-subcategory{
    grid-column:1 / -1;
    display:flex;align-items:center;gap:12px;
    padding:14px 0 6px;
  }
  .project-subcategory-label{
    font-family:'Poppins',sans-serif;font-size:10px;font-weight:600;
    letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);
  }
  .project-subcategory::after{
    content:"";flex:1;height:1px;background:var(--rule);
  }
  .projects-see-more{
    grid-column:1 / -1;
    display:flex;justify-content:flex-end;
    padding:8px 0 0;
  }
  .see-more-link{
    display:inline-flex;align-items:center;gap:10px;
    font-family:'Poppins',sans-serif;font-size:12px;font-weight:500;
    letter-spacing:0.14em;text-transform:uppercase;
    color:var(--ink);opacity:.72;
    padding:8px 14px;border:1px solid var(--rule);border-radius:999px;
    transition:opacity .2s ease, border-color .2s ease, background .2s ease;
  }
  .see-more-link:hover{
    opacity:1;border-color:var(--gold);background:rgba(139,90,43,0.05);
  }
  .see-more-link svg{width:14px;height:14px;color:var(--gold);transition:transform .25s ease;}
  .see-more-link:hover svg{transform:translateX(3px);}

  /* ---------- DOCS ROW ---------- */
  .docs-row{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
    margin-top:4px;
  }

  /* ---------- FORMATION ---------- */
  .edu-grid{
    display:flex;flex-direction:column;gap:56px;
  }
  .edu-items{
    display:block;width:fit-content;max-width:100%;
  }
  .edu-col h3,
  .collab-channels-title{
    font-family:'Poppins', sans-serif;font-weight:600;font-size:14px;
    letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);
    margin:0 0 24px;display:flex;align-items:center;gap:14px;
  }
  .edu-col h3::after{content:"";flex:1;height:1px;background:var(--rule);}
  .edu-item{padding:18px 28px 18px 0;border-top:1px solid var(--rule);}
  .edu-item:first-of-type{border-top:none;padding-top:0;}
  .edu-item:last-child{padding-bottom:0;}
  .edu-title{
    font-family:'Poppins', sans-serif;font-weight:600;font-size:17px;
    color:var(--ink);margin:0 0 4px;letter-spacing:-0.005em;
  }
  .edu-org{font-style:italic;color:var(--gold);font-size:13px;margin-bottom:4px;}
  .edu-date{
    font-family:'Poppins', sans-serif;font-size:11px;font-weight:500;
    letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
    margin-bottom:8px;
  }
  .edu-desc{color:var(--muted);font-size:14px;line-height:1.55;margin:0;}

  /* lien "voir le certificat" (ouvre l'aperçu en modale) */
  .cert-view{
    font-family:'Poppins', sans-serif;font-size:11px;font-weight:500;
    letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);
    background:none;border:0;padding:0;margin-top:6px;cursor:pointer;
    display:inline-block;
    border-bottom:1px solid transparent;
    transition:border-color .2s ease;
  }
  .edu-desc + .cert-view{margin-top:10px;}
  .cert-view:hover{border-bottom-color:var(--gold);}
  .cert-view:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px;}

  /* sous-sections de la colonne Certifications (MEAL, gestion de projet, ...) */
  .cert-group + .cert-group{margin-top:38px;}
  /* largeur commune : sans ça chaque groupe cale ses filets sur son plus long
     libellé et les traits se retrouvent en escalier d'un groupe à l'autre */
  .edu-items--certs{width:100%;max-width:560px;}

  /* desktop : chaque sous-section etale ses certificats en colonnes. Le nombre
     de colonnes est porte par une classe sur le groupe (--cols-3, -2, -1), a
     ajuster si le nombre de certificats du groupe change. Cote a cote, les
     filets horizontaux n'ont plus de sens : la gouttiere separe les entrees. */
  @media (min-width: 1000px){
    .cert-group--cols-3 .edu-items--certs,
    .cert-group--cols-2 .edu-items--certs{
      max-width:none;
      display:grid;gap:0 48px;align-items:start;
    }
    .cert-group--cols-3 .edu-items--certs{grid-template-columns:repeat(3, minmax(0, 1fr));}
    .cert-group--cols-2 .edu-items--certs{grid-template-columns:repeat(2, minmax(0, 1fr));}
    .cert-group--cols-3 .edu-item,
    .cert-group--cols-2 .edu-item{border-top:none;padding:0 0 0 0;}

    /* Les titres de certificats n'ont pas tous la meme hauteur : sur une ou deux
       lignes selon leur longueur. Sans subgrid, l'organisme, la date et le lien
       demarraient donc a des hauteurs differentes d'une colonne a l'autre. Ici
       chaque entree reprend les lignes du groupe, donc chaque element retrouve
       ses voisins. Les entrees plus courtes laissent simplement des lignes vides. */
    @supports (grid-template-rows: subgrid){
      .cert-group--cols-3 .edu-items--certs{grid-template-rows:repeat(4, auto);}
      .cert-group--cols-2 .edu-items--certs{grid-template-rows:repeat(5, auto);}
      .cert-group--cols-3 .edu-item,
      .cert-group--cols-2 .edu-item{display:grid;grid-template-rows:subgrid;align-content:start;}
      .cert-group--cols-3 .edu-item{grid-row:span 4;}
      .cert-group--cols-2 .edu-item{grid-row:span 5;}
      /* bouton inline-block : en cellule de grille il s'etirerait sur toute la colonne */
      .cert-group--cols-3 .cert-view,
      .cert-group--cols-2 .cert-view{justify-self:start;}
    }
  }
  .cert-group-title{
    font-family:'Poppins', sans-serif;font-weight:500;font-size:11px;
    letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);
    margin:0 0 20px;display:inline-flex;align-items:center;gap:12px;
  }
  .cert-group-title::before{content:"";width:20px;height:1px;background:var(--gold);}

  /* modules certifiés rattachés à une formation (ex. AI Bootcamp) */
  .cert-modules{
    margin-top:14px;padding-left:16px;
    border-left:1px solid var(--rule);
    display:flex;flex-direction:column;gap:12px;
  }
  .cert-modules-label{
    font-family:'Poppins', sans-serif;font-size:10px;font-weight:500;
    letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
  }
  .cert-module{display:flex;flex-direction:column;align-items:flex-start;}
  .cert-module-name{
    font-family:'Poppins', sans-serif;font-weight:500;font-size:14px;
    color:var(--ink);
  }
  .cert-module-date{
    font-family:'Poppins', sans-serif;font-size:10px;font-weight:500;
    letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
    margin-top:3px;
  }
  .cert-module .cert-view{margin-top:5px;}

  /* ---------- COLLABORER (2 volets : pro bono + professionnel) ---------- */
  /* Six services a plat, remplis colonne par colonne (grid-auto-flow:column sur
     3 lignes) pour garder l'ordre de lecture d'origine. Chaque service occupe
     deux lignes, titre puis description, et les reprend en subgrid : les deux
     colonnes partagent donc les memes lignes. Sans ca, un titre qui passe sur
     deux lignes decalait toute la suite de sa colonne. */
  .collab-grid{
    display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(3, auto);
    grid-auto-flow:column;
    width:fit-content;max-width:100%;justify-content:start;gap:0 64px;
    margin:0 0 36px;
  }
  .collab-grid .edu-item{padding-top:8px;padding-bottom:8px;}
  .collab-grid .edu-item:nth-child(1),
  .collab-grid .edu-item:nth-child(4){border-top:none;padding-top:0;}
  .collab-grid .edu-item:nth-child(3),
  .collab-grid .edu-item:nth-child(6){padding-bottom:0;}
  @supports (grid-template-rows: subgrid){
    .collab-grid{grid-template-rows:repeat(6, auto);}
    .collab-grid .edu-item{
      display:grid;grid-row:span 2;grid-template-rows:subgrid;
      align-content:start;
    }
  }
  @media (max-width:700px){
    .collab-grid{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;gap:0;}
    .collab-grid .edu-item{display:block;grid-row:auto;}
    .collab-grid .edu-item:nth-child(4){border-top:1px solid var(--rule);padding-top:8px;}
    .collab-grid .edu-item:nth-child(3){padding-bottom:8px;}
  }

  /* ---------- CONTACT ---------- */
  .contact{padding-bottom:80px;}
  .contact-intro{
    font-family:'DM Sans', sans-serif;font-weight:300;
    font-size:clamp(20px,2vw,28px);line-height:1.4;
    margin:0 0 30px;color:var(--ink);text-wrap:pretty;max-width:62ch;
  }

  .contact-intents{
    display:flex;flex-direction:row;align-items:flex-start;gap:0 48px;
    max-width:920px;
  }

  .contact-intent{
    padding:22px 0;
    border-top:0px solid var(--rule);
    flex:1;
  }
  .contact-intent:last-child{border-bottom:0px solid var(--rule);}

  .contact-intent-label{
    font-family:'Poppins', sans-serif;font-weight:500;font-size:11px;
    letter-spacing:0.22em;text-transform:uppercase;
    color:var(--gold);margin:0 0 12px;
  }

  .contact-intent-link{
    display:inline-flex;align-items:center;gap:12px;
    color:var(--ink);text-decoration:none;
    font-family:'Poppins', sans-serif;font-weight:500;
    font-size:clamp(16px,1.4vw,19px);
    line-height:1.2;width:fit-content;
    transition:color .25s ease, gap .25s ease;
  }
  .contact-intent-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;
    color:var(--ink);transition:color .25s ease;flex-shrink:0;
  }
  .contact-intent-icon svg{width:100%;height:100%;}
  .contact-intent-arrow{
    width:14px;height:14px;
    transition:transform .25s ease;flex-shrink:0;color:var(--gold);
  }
  .contact-intent-link:hover{color:var(--gold);gap:16px;}
  .contact-intent-link:hover .contact-intent-icon{color:var(--gold);}
  .contact-intent-link:hover .contact-intent-arrow{transform:translateX(4px);}

  /* SECONDARY pair layout */
  .contact-intent-pair{
    display:flex;flex-wrap:wrap;gap:18px 40px;
  }

  /* ---------- SUBSTACK FEATURE ---------- */
  .substack-card{
    margin-top:28px;padding:32px 36px;
    border-radius:6px;
    background:var(--card);
    box-shadow:inset 0 0 0 1px var(--card-edge);
    display:flex;align-items:flex-start;gap:28px;
    max-width:640px;
  }
  .substack-icon{
    flex-shrink:0;width:44px;height:44px;border-radius:8px;
    background:var(--ink);display:flex;align-items:center;justify-content:center;
  }
  .substack-icon svg{width:26px;height:26px;}
  .substack-body{}
  .substack-label{
    font-family:'Poppins', sans-serif;font-weight:600;font-size:13px;
    letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);
    margin-bottom:6px;
  }
  .substack-title{
    font-family:'Poppins', sans-serif;font-weight:700;
    font-size:clamp(20px,2.2vw,28px);letter-spacing:-0.02em;
    color:var(--ink);margin:0 0 8px;line-height:1.1;
  }
  .substack-desc{
    font-family:'DM Sans', sans-serif;font-size:15px;line-height:1.5;
    color:var(--muted);margin:0 0 16px;max-width:44ch;
  }
  .substack-link{
    font-family:'Poppins', sans-serif;font-size:13px;font-weight:500;
    color:var(--ink);display:inline-flex;align-items:center;gap:8px;
    border-bottom:1px solid var(--ink);padding-bottom:2px;
    transition:color .2s, border-color .2s;
  }
  .substack-link:hover{color:var(--gold);border-color:var(--gold);}
  .substack-link svg{width:12px;height:12px;}

  /* ---------- SUBSTACK ARTICLE LIST ---------- */
  .substack-articles{
    margin-top:56px;
  }
  .substack-articles-eyebrow{
    font-family:'Poppins', sans-serif;font-weight:600;font-size:11px;
    letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);
    margin:0 0 20px;
  }
  .substack-article{
    display:block;
    padding:32px 0 34px;
    border-top:1px solid var(--rule);
    position:relative;
  }
  .substack-article-meta{
    display:flex;align-items:center;gap:10px;
    margin-bottom:14px;
  }
  .substack-article-topic{
    font-family:'Poppins', sans-serif;font-weight:600;font-size:10.5px;
    letter-spacing:0.22em;text-transform:uppercase;
    color:var(--gold);
  }
  .substack-article-sep{
    color:var(--muted);font-size:11px;opacity:0.6;
  }
  .substack-article-date{
    font-family:'Poppins', sans-serif;font-size:11px;font-weight:500;
    letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);
  }
  .substack-article-title{
    font-family:'Poppins', sans-serif;font-weight:600;
    font-size:clamp(17px,1.5vw,21px);letter-spacing:-0.01em;line-height:1.3;
    color:var(--ink);margin:0 0 10px;
    text-wrap:balance;
    transition:color .2s ease;
  }
  .substack-article:hover .substack-article-title{color:var(--gold);}
  .substack-article-desc{
    font-family:'DM Sans', sans-serif;font-size:15px;line-height:1.55;
    color:var(--muted);margin:0 0 14px;text-wrap:pretty;
  }
  .substack-article-link{
    font-family:'Poppins', sans-serif;font-size:11.5px;font-weight:600;
    letter-spacing:0.16em;text-transform:uppercase;
    color:var(--ink);display:inline-flex;align-items:center;gap:10px;
    transition:gap .25s ease, color .2s;
  }
  .substack-article-link svg{width:11px;height:11px;transition:transform .25s ease;}
  .substack-article:hover .substack-article-link{color:var(--gold);}
  .substack-article:hover .substack-article-link svg{transform:translateX(4px);}

  .substack-see-more{
    grid-column:1 / -1;
    display:flex;justify-content:flex-end;
    padding:20px 0 0;
  }

  /* ---------- FOOTER (centered hero-style) ---------- */
  footer{
    background:rgba(var(--ink-rgb), 0.04);
    border-radius:36px 36px 0 0;
    margin:0;padding:0;
    position:relative;
  }
  .footer-inner{
    max-width:var(--maxw);
    margin:0 auto;
    padding:clamp(72px, 10vh, 120px) var(--gutter) 56px;
    display:flex;flex-direction:column;align-items:center;text-align:center;
  }

  .footer-tag{
    margin:0 0 56px;max-width:60ch;
  }
  .footer-tag-line{
    font-family:'DM Sans', sans-serif;font-weight:400;
    font-size:clamp(16px, 1.3vw, 19px);line-height:1.55;
    color:var(--ink);margin:0;
  }
  .footer-tag-sub{
    font-weight:300;color:var(--muted);
    margin-top:6px;
  }

  .footer-grid{
    display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:44px;
    width:100%;max-width:880px;
    padding:0 0 48px;
    border-bottom:1px solid var(--rule);
  }
  .footer-col{
    display:flex;flex-direction:column;align-items:center;text-align:center;
  }
  .footer-col-title{
    font-family:'Poppins', sans-serif;font-weight:600;font-size:11px;
    letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);
    margin:0 0 18px;
  }
  .footer-col ul{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;gap:11px;align-items:center;
  }
  .footer-col a{
    font-family:'DM Sans', sans-serif;font-size:14.5px;
    color:var(--ink);
    display:inline-flex;align-items:center;gap:8px;
    transition:color .2s ease;
    position:relative;
  }
  .footer-col a::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;
    height:1px;background:var(--gold);
    transform:scaleX(0);transform-origin:center;
    transition:transform .25s ease;
  }
  .footer-col a:hover{color:var(--gold);}
  .footer-col a:hover::after{transform:scaleX(1);}
  .footer-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:14px;height:14px;color:var(--muted);
    transition:color .2s ease;
  }
  .footer-icon svg{width:100%;height:100%;}
  .footer-col a:hover .footer-icon{color:var(--gold);}

  .footer-copy{
    margin-top:36px;
    font-family:'Poppins', sans-serif;font-size:11px;font-weight:500;
    letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
    display:flex;flex-direction:column;gap:8px;align-items:center;
  }

  /* ---------- REVEALS ---------- */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease-out, transform .6s ease-out;}
  .reveal.in{opacity:1;transform:translateY(0);}
  .reveal-delay-1{transition-delay:.08s;}
  .reveal-delay-2{transition-delay:.16s;}
  .reveal-delay-3{transition-delay:.24s;}

  /* ---------- ACCESSIBILITY : reduced motion ---------- */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
    }
    .reveal{opacity:1;transform:none;}
    .particles, .cursor-accent{display:none !important;}
    .loader{animation:none;opacity:0;visibility:hidden;}
  }

  /* lang fade */
  body.lang-switching [data-fr],
  body.lang-switching [data-en],
  body.lang-switching [data-ht]{opacity:0;transition:opacity .2s ease;}

  @keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
  @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

  /* ---------- PROJECT "EN SAVOIR PLUS" CTA ---------- */
  /* Sits in .docs-row, aligned right of the GitHub link. Matches .gh-link style. */
  .project-more{
    background:transparent;border:0;padding:0 0 2px;
    font-family:'Poppins', sans-serif;font-size:12px;font-weight:500;
    color:var(--ink);
    display:inline-flex;align-items:center;gap:8px;
    border-bottom:1px solid var(--ink);
    cursor:pointer;
    transition:color .2s, border-color .2s, gap .2s;
    margin-left:auto;
  }
  .project-more:hover{color:var(--gold);border-color:var(--gold);gap:12px;}
  .project-more .arr{transition:transform .25s ease;display:inline-block;}
  .project-more:hover .arr{transform:translateX(3px);}

  /* ---------- MODAL OVERLAY ---------- */
  .modal-overlay{
    position:fixed;inset:0;z-index:200;
    background:rgba(12, 9, 7, 0.66);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
    display:flex;align-items:center;justify-content:center;
    padding:24px;
  }
  .modal-overlay.open{opacity:1;visibility:visible;}

  .modal{
    position:relative;
    width:min(720px, 100%);
    max-height:min(86vh, 720px);
    /* surface elevee : sur la page assombrie par le voile, un fond identique
       a la page ne se detacherait plus */
    background:var(--card);
    border-radius:10px;
    box-shadow:
      0 30px 80px -20px rgba(0,0,0,.55),
      0 0 0 1px var(--card-edge);
    overflow:hidden;
    display:flex;flex-direction:column;
    transform:translateY(24px) scale(0.97);
    opacity:0;
    transition:transform .42s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
  }
  .modal-overlay.open .modal{transform:translateY(0) scale(1);opacity:1;}

  /* faint top hairline in gold — REMOVED on request */
  .modal::before{ content:none; }

  /* background SVG illustration — transparent watermark */
  .modal-bg-illus{
    position:absolute;
    right:-40px;bottom:-40px;
    width:340px;height:340px;
    pointer-events:none;
    opacity:0.07;
    color:var(--ink);
    z-index:0;
  }
  .modal-bg-illus svg{width:100%;height:100%;display:block;}

  /* close button */
  .modal-close{
    position:absolute;top:18px;right:18px;
    width:36px;height:36px;border-radius:50%;
    background:transparent;border:1px solid var(--rule);
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    color:var(--ink);transition:all .2s ease;z-index:5;
    padding:0;
  }
  .modal-close:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);}
  .modal-close svg{width:14px;height:14px;}

  /* header */
  .modal-header{
    padding:36px 44px 20px;
    position:relative;z-index:2;
    flex:0 0 auto;
  }
  .modal-eyebrow{
    font-family:'Poppins', sans-serif;font-size:11px;font-weight:500;
    letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);
    display:inline-flex;align-items:center;gap:14px;margin-bottom:14px;
  }
  .modal-eyebrow::before{
    content:"";width:28px;height:1px;background:var(--gold);
  }
  .modal-title{
    font-family:'Poppins', sans-serif;font-weight:600;
    font-size:clamp(22px, 2.4vw, 28px);line-height:1.18;
    letter-spacing:-0.018em;
    color:var(--ink);margin:0;padding-right:48px;
    text-wrap:balance;
  }

  /* tabs */
  .modal-tabs{
    display:flex;gap:0;
    padding:0 44px;
    border-bottom:1px solid var(--rule);
    position:relative;z-index:2;
    overflow-x:auto;
    overflow-y:hidden;
    flex:0 0 auto;
    scrollbar-width:none;
  }
  .modal-tabs::-webkit-scrollbar{display:none;}
  .modal-tab{
    background:transparent;border:none;
    padding:14px 0;margin-right:28px;
    font-family:'Poppins', sans-serif;font-size:12px;font-weight:500;
    letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);
    cursor:pointer;position:relative;
    white-space:nowrap;
    transition:color .2s ease;
  }
  .modal-tab:hover{color:var(--ink);}
  .modal-tab.active{color:var(--ink);font-weight:600;}
  .modal-tab::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;
    height:2px;background:var(--gold);
    transform:scaleX(0);transform-origin:center;
    transition:transform .3s ease;
  }
  .modal-tab.active::after{transform:scaleX(1);}

  /* content body — scrollable */
  .modal-body{
    padding:28px 44px 24px;
    overflow-y:auto;
    flex:1 1 auto;
    min-height:0;
    position:relative;z-index:2;
    scrollbar-width:thin;
    scrollbar-color:var(--rule) transparent;
  }
  .modal-body::-webkit-scrollbar{width:6px;}
  .modal-body::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px;}

  .tab-panel{
    display:none;
    animation:tabFade .3s ease;
  }
  .tab-panel.active{display:block;}
  @keyframes tabFade{
    from{opacity:0;transform:translateY(6px);}
    to{opacity:1;transform:translateY(0);}
  }
  .tab-panel p{
    font-family:'DM Sans', sans-serif;
    font-size:15.5px;line-height:1.65;
    color:var(--ink);margin:0 0 14px;
    text-wrap:pretty;
  }
  .tab-panel p:last-child{margin-bottom:0;}
  .tab-panel .panel-label{
    font-family:'Poppins', sans-serif;font-size:10px;font-weight:600;
    letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);
    margin-bottom:10px;
  }

  /* outils tab — méthodes section */
  .modal-methodes{margin:0 0 24px;padding:0 0 22px;border-bottom:1px solid var(--rule);}
  .modal-methodes-label{
    font-family:'Poppins',sans-serif;font-size:10px;font-weight:600;
    letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);
    margin:0 0 12px;
    display:flex;align-items:center;gap:10px;
  }
  .modal-methodes-label::before{
    content:"";width:18px;height:1px;background:var(--gold);
  }
  .modal-methodes-row{
    display:flex;flex-wrap:wrap;gap:8px;
  }
  /* .tool est desormais un contour par defaut : cette surcharge faisait double emploi */

  /* outils tab — list of tools with role */
  .tools-list{list-style:none;padding:0;margin:0;}
  .tools-list li{
    display:grid;grid-template-columns:140px 1fr;gap:18px;
    padding:12px 0;border-top:1px solid var(--rule);
    align-items:baseline;
  }
  .tools-list li:first-child{border-top:none;padding-top:0;}
  .tools-list .t-name{
    font-family:'Poppins', sans-serif;font-weight:600;font-size:13px;
    color:var(--ink);letter-spacing:0.02em;
  }
  .tools-list .t-role{
    font-family:'DM Sans', sans-serif;font-size:14px;color:var(--muted);
    line-height:1.5;text-wrap:pretty;
  }
  .tools-phase{margin-bottom:22px;}
  .tools-phase:last-child{margin-bottom:0;}
  .tools-phase-label{
    font-family:'Poppins',sans-serif;font-size:10px;font-weight:600;
    letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);
    margin:0 0 12px;
    display:flex;align-items:center;gap:10px;
  }
  .tools-phase-label::before{
    content:"";width:18px;height:1px;background:var(--gold);
  }

  /* chiffres tab — key figures */
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    gap:28px 32px;
    margin:0;padding:8px 0 0;
  }
  .stat-cell{
    display:flex;flex-direction:column;gap:8px;
    padding:0 0 0 16px;
    border-left:1px solid var(--rule);
    position:relative;
  }
  .stat-cell .num{
    font-family:'Poppins', sans-serif;font-weight:700;
    font-size:clamp(28px, 3.4vw, 38px);line-height:1;
    letter-spacing:-0.02em;color:var(--ink);
  }
  .stat-cell .lab{
    font-family:'Poppins', sans-serif;font-size:10px;font-weight:500;
    letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);
    line-height:1.4;
  }
  .stat-cell .sub{
    font-family:'DM Sans', sans-serif;font-size:13px;color:var(--muted);
    line-height:1.5;text-wrap:pretty;margin-top:2px;
  }
  .stats-cta{
    display:inline-flex;align-items:center;gap:10px;
    margin-top:28px;padding-top:20px;
    border-top:1px solid var(--rule);
    width:100%;
    font-family:'Poppins', sans-serif;font-size:13px;font-weight:500;
    letter-spacing:0.04em;
    color:var(--ink);
    transition:color .2s ease, gap .2s ease;
    text-decoration:none;
  }
  .stats-cta .lead{
    font-family:'DM Sans', sans-serif;font-size:11px;font-weight:400;
    letter-spacing:0.18em;text-transform:uppercase;
    color:var(--muted);margin-right:4px;
  }
  .stats-cta .arr{
    display:inline-block;transition:transform .2s ease;
    font-size:15px;line-height:1;color:var(--gold);
  }
  .stats-cta:hover{color:var(--gold);gap:14px;}
  .stats-cta:hover .arr{transform:translate(2px,-2px);}

  /* footer — always-visible GitHub */
  .modal-footer{
    padding:18px 44px 22px;
    border-top:1px solid var(--rule);
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    background:rgba(var(--bg-rgb),0.7);
    position:relative;z-index:2;
    flex-wrap:wrap;
  }
  .modal-fictif-tag{
    font-family:'Poppins',sans-serif;font-size:10px;font-weight:500;
    letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
  }
  .modal-github{
    font-family:'Poppins', sans-serif;font-size:13px;font-weight:500;
    color:var(--ink);display:inline-flex;align-items:center;gap:10px;
    border:1px solid var(--ink);
    padding:8px 16px;border-radius:6px;
    transition:all .2s ease;
    margin-left:auto;
  }
  .modal-github:hover{background:var(--ink);color:var(--bg);}
  .modal-github svg{width:14px;height:14px;}

  /* ---------- MODALE CERTIFICAT (visionneuse PDF) ---------- */
  .modal--cert{
    width:min(960px, 100%);
    max-height:min(92vh, 940px);
  }
  .modal--cert .modal-header{padding:32px 44px 18px;}
  .cert-viewer{
    flex:0 1 auto;min-height:0;
    display:flex;align-items:center;justify-content:center;
    padding:22px 44px 26px;
  }
  .cert-image{
    display:block;
    max-width:100%;max-height:min(66vh, 700px);
    width:auto;height:auto;
    border:1px solid var(--rule);border-radius:4px;
    background:#fff;
    box-shadow:0 12px 34px -18px rgba(28,16,10,.5);
  }

  /* responsive */
  @media (max-width: 640px){
    .modal-overlay{padding:16px;align-items:center;}
    .modal{max-height:88vh;width:100%;}
    .modal-header{padding:30px 24px 16px;}
    .modal-tabs{padding:0 24px;}
    .modal-tab{margin-right:20px;font-size:11px;}
    .modal-body{padding:22px 24px 18px;}
    .modal-footer{padding:14px 24px 18px;}
    .modal-bg-illus{width:220px;height:220px;right:-30px;bottom:-30px;}
    .tools-list li{grid-template-columns:1fr;gap:4px;}
    .modal-title{font-size:20px;padding-right:36px;}
    .modal--cert .modal-header{padding:30px 24px 16px;}
    .cert-viewer{padding:16px 24px 20px;}
  }

  /* prevent body scroll when modal open */
  body.modal-open, body.menu-open{overflow:hidden;}

  /* ---------- MOBILE MENU ---------- */
  .hamburger{
    display:none;
    flex-direction:column;justify-content:center;align-items:center;
    gap:5px;width:36px;height:36px;cursor:pointer;
    background:transparent;border:0;padding:0;
    position:relative;z-index:60;
  }
  .hamburger span{
    display:block;width:22px;height:1.5px;
    background:var(--ink);border-radius:2px;
    transition:transform .3s ease, opacity .3s ease;
    transform-origin:center;
  }
  .hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  /* Dix entrees a plat debordaient la hauteur de l'ecran : le basculeur de theme,
     place en dernier, finissait hors champ et devenait inatteignable. Deux sous-menus
     repliables, les memes que sur desktop, ramenent la liste a sept entrees.
     Le defilement reste actif comme filet pour les ecrans courts (paysage). */
  .mobile-menu{
    position:fixed;top:0;left:0;right:0;bottom:0;z-index:49;
    background:var(--bg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:26px;
    padding:92px 24px 32px;
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
  }
  .mobile-menu.open{opacity:1;pointer-events:all;}
  .mobile-menu-links{
    display:flex;flex-direction:column;align-items:center;gap:22px;
  }
  .mobile-menu a{
    font-family:'Poppins', sans-serif;font-weight:600;
    font-size:clamp(22px,5.4vw,32px);letter-spacing:-0.01em;
    color:var(--ink);text-decoration:none;
    position:relative;
  }
  .mobile-menu a::after{
    content:"";position:absolute;left:0;right:0;bottom:-4px;
    height:1px;background:var(--gold);
    transform:scaleX(0);transform-origin:left;
    transition:transform .25s ease;
  }
  .mobile-menu a:hover::after{transform:scaleX(1);}

  /* sous-menus repliables du menu mobile */
  .mobile-more{display:flex;flex-direction:column;align-items:center;gap:16px;}
  .mobile-more-trigger{
    display:inline-flex;align-items:center;gap:10px;
    background:none;border:none;padding:0;cursor:pointer;
    font-family:'Poppins', sans-serif;font-weight:600;
    font-size:clamp(22px,5.4vw,32px);letter-spacing:-0.01em;
    color:var(--ink);
  }
  .mobile-more-chevron{
    width:13px;height:9px;flex:none;color:var(--gold);
    transition:transform .25s ease;
  }
  .mobile-more.open .mobile-more-chevron{transform:rotate(180deg);}
  .mobile-sub{
    display:flex;flex-direction:column;align-items:center;gap:14px;
  }
  .mobile-sub[hidden]{display:none;}
  .mobile-sub a{
    font-size:clamp(16px,4vw,20px);font-weight:500;color:var(--muted);
  }

  /* ---------- TOUCH DEVICES: kill sticky :hover ---------- */
  /* On touch devices, tapping a button triggers :hover and it persists
     until the user taps elsewhere. Force-revert every hover rule so
     buttons/links return to their default state immediately after tap. */
  @media (hover: none){
    .side-links a:hover{color:var(--muted);}
    .side-links a:hover::before{transform:translateY(-50%) scaleX(0);}
    .side-links a.active:hover{color:var(--ink);}
    .side-links a.active:hover::before{transform:translateY(-50%) scaleX(1);}
    .side-more-trigger:hover{color:var(--muted);}
    .side-more.open .side-more-trigger:hover{color:var(--ink);}
    .theme-toggle:hover .theme-toggle-track{border-color:var(--rule);}
    .cta-primary:hover{background:var(--ink);color:var(--bg);}
    .cta-secondary:hover{background:transparent;color:var(--ink);}
    .cta-primary:active{background:var(--gold);color:var(--ink);transform:none;}
    .cta-secondary:active{background:var(--ink);color:var(--bg);transform:none;}
    .project:hover{box-shadow:none;}
    .gh-link:hover{color:inherit;border-color:currentColor;}
    .project.project-line:hover .project-title{color:inherit;}
    .contact-link:hover,
    .contact-link:hover .c-icon{color:inherit;}
    .contact-link:hover .c-label{border-color:currentColor;}
    .substack-link:hover{color:inherit;border-color:currentColor;}
    .substack-article:hover .substack-article-title{color:inherit;}
    .substack-article:hover .substack-article-link{color:inherit;}
    .substack-article:hover .substack-article-link svg{transform:none;}
    .project-more:hover{color:inherit;border-color:currentColor;gap:8px;}
    .project-more:hover .arr{transform:none;}
    .modal-close:hover{
      background:transparent;color:var(--ink);border-color:var(--ink);
    }
    .modal-tab:hover{color:inherit;}
    .stats-cta:hover{color:var(--gold);gap:10px;}
    .stats-cta:hover .arr{transform:none;}
    .modal-github:hover{background:transparent;color:var(--ink);}
    .mobile-menu a:hover::after{transform:scaleX(0);}
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 1100px){
    .projects-stack{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width: 560px){
    .projects-stack{grid-template-columns:1fr !important;}
  }
  @media (max-width: 900px){
    .hero{grid-template-columns:1fr;gap:36px;padding-top:120px;min-height:auto;}
    /* min-height:0 : la valeur fixe heritee de l'ancienne illustration laissait
       jusqu'a 79px de vide sous le portrait, l'ecart reel variait donc de 68 a
       87px selon la largeur. La photo definit sa hauteur, le gap fait le reste. */
    .hero-right{order:-1;min-height:0;}
    .hero-photo{width:min(260px,66%);}
    .annot{display:none;}
    .about-grid{grid-template-columns:1fr;gap:36px;}
    .about-intro{position:static;}
    .project{padding:18px 18px;}
    .projects-stack{grid-template-columns:repeat(2,1fr);gap:14px;perspective:none;}
    .edu-grid{gap:40px;}
    .edu-items{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 44px;}
    .scroll-cue{display:none;}
    .hamburger{display:flex;}
    .project-fictif{
      position:static;
      order:-1;
      display:inline-block;
      margin:0 0 10px;
    }
    /* contact icons stay visible on mobile, grouped to the right with the lang pill + burger */
    .nav-contact{display:flex;margin-left:auto;margin-right:10px;gap:6px;}
    .nav-icon{width:34px;height:34px;}      /* larger tap target */
    .nav-icon svg{width:18px;height:18px;}  /* keep icon visually 18px, centered */
    .lang-dropdown{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;}  /* centrée dans la nav */
    .lang-menu{left:50%;right:auto;transform:translateX(-50%);}  /* centré sous la pastille */
    .particles{display:none;}
    .back-to-top{bottom:18px;right:18px;width:40px;height:40px;}
    .t-stats{display:grid;grid-template-columns:repeat(3,1fr);row-gap:20px;}
    .t-stat{padding:0 14px;}
    .t-stat:nth-child(3n+1){border-left:none;padding-left:0;}
  }
  @media (max-width: 580px){
    section{padding:clamp(32px,5vh,44px) var(--gutter);}
    .skill-row{grid-template-columns:1fr;gap:8px;padding:24px 0;}
    /* deux colonnes jusqu'en bas : une seule etirait le pied de page en
       une longue liste a defiler */
    .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;}
    .skill-row-num{font-size:11px;}
  }
  @media (min-width:901px){
    .mobile-pills{display:none;}
  }

  /* ---------- PRINT STYLES ---------- */
  @media print{
    *, *::before, *::after{
      background:transparent !important;
      color:#000 !important;
      box-shadow:none !important;
      text-shadow:none !important;
    }
    body{font-size:11pt;line-height:1.5;color:#000;background:#fff;}
    .nav, .mobile-menu, .hamburger, .particles, .cursor-accent,
    .scroll-cue, .loader, .back-to-top, .lang-dropdown,
    .nav-contact, .skip-link, .modal-overlay, .side-nav, .cert-view{display:none !important;}
    body{padding-left:0 !important;}
    main, section{page-break-inside:avoid;break-inside:avoid;}
    h1, h2, h3{page-break-after:avoid;break-after:avoid;}
    a{color:#000 !important;text-decoration:underline;}
    a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444;}
    .project-fictif, .modal-fictif-tag{border:1px solid #000;}
  }