:root {

  /* Palette chaude "Vintage Apple" */
  --cream:      #FAF7F0;
  --warm-white: #F3EEE4;
  --paper:      #EDE8DC;
  --black:      #181412;
  --charcoal:   #2E2A26;
  --gray:       #6B665E;
  --light-gray: #D8D3C8;
  --border:     #CAC5BA;

  /* Arc-en-ciel Apple */
  --r-green:  #61B93A;
  --r-yellow: #F7C32E;
  --r-orange: #EC7B1C;
  --r-red:    #D62B2B;
  --r-purple: #8C32CC;
  --r-blue:   #3B88CA;

  /* Statuts / dérivés */
  --p-success: #2DAD6F;
  --p-error:   #D93025;

  /* Polices */
  --font-display: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
  --font-body:    'Source Sans 3', 'Source Sans 3 Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Courier New', 'Courier', monospace; /* section-num (audit v10 L1) */
}


/* ── COUCHE 2 : SÉMANTIQUE ─────────────────────────────────────
   Aliases par rôle. Les composants n'utilisent QUE ces tokens.
   ──────────────────────────────────────────────────────────── */

:root {

  /* ── Couleurs / Fond ── */
  --color-bg:             var(--cream);       /* fond principal de page   */
  --color-surface:        var(--warm-white);  /* fond de carte / section  */
  --color-surface-raised: var(--paper);       /* carte surélevée / hover  */
  --color-surface-white:  #FDFBF7;            /* cartes FAQ, exp — blanc chaud aligne palette (audit v9) */
  --color-map-fill:       var(--paper);       /* #EBE5DA — fond transparent-border map */

  /* ── Couleurs / Loader (splash screen rétro) ── */

  /* ── Couleurs / Texte ── */
  --color-text:           var(--black);       /* corps de texte principal */
  --color-text-secondary: var(--charcoal);    /* sous-titres, méta        */
  --color-text-muted:     var(--gray);        /* labels, tags             */
  --color-text-subtle:    var(--light-gray);  /* placeholders, hints      */
  --color-text-invert:    var(--cream);       /* texte sur fond sombre    */

  /* ── Couleurs / Accent ── (corrige --accent non défini) */
  --accent:               var(--r-orange);   /* #EC7B1C — accent primaire */
  --accent-hover:         #d46814;           /* -12% luminosité           */
  --accent-bright:        #F59A4D;           /* hover CTA sur fond sombre (audit v8) */
  --hero-bg:              #0A0908;           /* fond fallback du hero (audit v8)      */
  --accent-text:          #A84F07;           /* orange foncé, 4.6:1 sur crème — texte uniquement */
  --accent-faint:         rgba(236, 123, 28, 0.08);  /* fond teinté léger */
  --accent-border:        rgba(236, 123, 28, 0.25);  /* bordure tintée    */
  /* Libellés d'étapes études de cas : variantes >=4.5:1 sur warm-white (audit v13) */
  --case-red:             #A31C1C;
  --case-blue:            #1C5A92;
  --case-green:           #1B6E38;

  /* ── Couleurs / Headings sur fond clair ── (corrige --dark non défini) */
  --dark:                 var(--charcoal);   /* #2E2A26                   */

  /* ── Couleurs / Bordure ── */
  --color-border:         var(--border);
  --color-border-subtle:  rgba(0, 0, 0, 0.07);
  --color-border-medium:  rgba(0, 0, 0, 0.10);

  /* ── Couleurs / Statuts ── */
  --color-success:             var(--p-success);
  --color-success-pulse:       rgba(45, 173, 111, 0.45);  /* animation start  */
  --color-success-pulse-strong: rgba(45, 173, 111, 0.55); /* double-ring outer */
  --color-success-pulse-soft:   rgba(45, 173, 111, 0.20); /* double-ring inner */
  --color-success-pulse-end:    rgba(45, 173, 111, 0);    /* animation end    */
  --color-error:               var(--p-error);
  --color-error-pulse:         rgba(217, 48, 37, 0.45);
  --color-error-pulse-end:     rgba(217, 48, 37, 0);
  --color-error-faint:         rgba(217, 48, 37, 0.08);
  --color-error-border:        rgba(217, 48, 37, 0.25);
  --color-error-text:          #C42017;  /* texte erreur : 5,1:1 sur warm-white */
  /* Statut "en cours" : bleu (le rouge = erreur, sémantique réservée) */
  --color-active:              var(--r-blue);
  --color-active-pulse:        rgba(59, 136, 202, 0.45);
  --color-active-faint:        rgba(59, 136, 202, 0.10);
  --color-active-border:       rgba(59, 136, 202, 0.35);
  --color-active-text:         #2B679C;  /* 4,7:1 sur warm-white */
  --color-warning:             var(--r-yellow);

  /* ── Couleurs / Loader rétro Mac OS Classic ── */
  --color-retro-grey:          #cccccc;  /* fond Mac OS Classic            */
  --color-retro-bevel-light:   #ffffff;  /* bord haut/gauche 3D Mac        */
  --color-retro-bevel-mid:     #808080;  /* bord bas/droite 3D Mac         */
  --color-retro-bevel-dark:    #404040;  /* ombre forte (boîte inner)      */
  --color-retro-rainbow-g:     #5EBD3E;  /* badge hover: vert              */
  --color-retro-rainbow-y:     #FFB900;  /* badge hover: jaune             */
  --color-retro-rainbow-o:     #F78200;  /* badge hover: orange            */
  --color-retro-rainbow-r:     #E23838;  /* badge hover: rouge             */

  /* ── Couleurs / Overlay ── */
  --overlay-dark:    rgba(24, 20, 18, 0.40);
  --overlay-dark-sm: rgba(24, 20, 18, 0.18);

  /* ── Cream sur fond sombre ── */
  --color-on-dark-subtle:  rgba(250, 247, 240, 0.07);
  --color-on-dark-faint:   rgba(250, 247, 240, 0.10);
  --color-on-dark-dim:     rgba(250, 247, 240, 0.12);
  --color-on-dark-muted:   rgba(250, 247, 240, 0.15);
  --color-on-dark-border:  rgba(250, 247, 240, 0.22);
  --color-on-dark-mid:     rgba(250, 247, 240, 0.55);
  --color-on-dark-hint:    rgba(250, 247, 240, 0.75);
  --color-on-dark-soft:    rgba(250, 247, 240, 0.80);
  --color-on-dark-text:    rgba(250, 247, 240, 0.88);

  /* ── Couleurs / Footer & nav ── */
  --color-footer-bg:        var(--black);
  --color-nav-bg:           rgba(250, 247, 240, 0.94); /* --cream à 94%      */
  --color-footer-text:      rgba(255, 255, 255, 0.65);
  --color-footer-secondary: rgba(255, 255, 255, 0.50); /* sous-titre footer  */
  --color-footer-subtle:    rgba(255, 255, 255, 0.55);
  --color-footer-divider:   rgba(255, 255, 255, 0.10);
  --color-footer-hover-bg:  rgba(255, 255, 255, 0.08);


  /* ── Ombres ── (valeurs exactes calquées sur le code) */
  --shadow-sm:    0 2px  8px  rgba(24, 20, 18, 0.07);
  --shadow-md:    0 8px  24px rgba(24, 20, 18, 0.10);
  --shadow-lg:    0 12px 32px rgba(0,  0,  0,  0.09);  /* stat/exp cards     */
  --shadow-xl:    0 14px 36px rgba(0,  0,  0,  0.10);  /* edu/benev hover    */
  --shadow-hover: 0 8px  24px rgba(0,  0,  0,  0.14);  /* btn:hover          */
  --shadow-card:  0 4px  20px rgba(0,  0,  0,  0.08);  /* faq:hover          */
  --shadow-panel:  0 8px  32px rgba(24, 20, 18, 0.14);  /* inline panel       */
  --shadow-drawer: -2px 0 40px rgba(24, 20, 18, 0.18);  /* panneau latéral    */
  --shadow-hero-float-idle: drop-shadow(0 8px  16px rgba(24, 20, 18, 0.10));
  --shadow-hero-float-up:   drop-shadow(0 18px 32px rgba(24, 20, 18, 0.16));
  --shadow-retro-sm: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.55));
  --shadow-retro-md: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.60));
  --shadow-travel:   0 4px 12px rgba(0, 0, 0, 0.20);


  /* ── Rayons ── */
  --radius-hairline: 1px;
  --radius-xs:     2px;
  --radius-sm:     3px;
  --radius-md:     6px;
  --radius-lg:     10px;
  --radius-focus:  4px;        /* outline focus ring            */
  --focus-outline: #C75F0E;    /* focus ring : 3:1+ sur cream/warm-white/paper */

  /* Curseurs Classic Mac OS (pixel-art System 7, liseré blanc, lisibles sur clair et sombre) */
  --cur-arrow: url('/img/cursor-mac-arrow.png') 0 0, default;
  --cur-hand:  url('/img/cursor-mac-hand.png') 6 0, pointer;
  --focus-ring: 0 0 0 3px var(--accent-faint), 0 0 0 5px var(--accent); /* box-shadow focus composite */
  --radius-form:   8px;        /* inputs, quiz option cards     */
  --radius-xl:     20px;       /* pill compact (lang toggle)    */
  --radius-pill:   100px;
  --radius-circle: 50%;


  /* ── Transitions / Durées ── */
  --ease-spring:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-default:  ease;
  --ease-material:  cubic-bezier(0.4, 0, 0.2, 1);  /* tiroir / Material standard */
  --ease-retro-steps: steps(3, end);               /* animation saccadée retro   */

  --duration-micro:   0.12s;   /* animation retro saccadée     */
  --duration-instant: 0.08s;
  --duration-fast:    0.15s;
  --duration-ui:      0.18s;   /* micro-interactions boutons   */
  --duration-base:    0.20s;   /* couleurs, opacity            */
  --duration-card:    0.22s;   /* cartes (transform+shadow)    */
  --duration-slow:    0.25s;   /* transform simple             */
  --duration-slower:  0.30s;   /* box-shadow FAQ               */
  --duration-medium:  0.28s;   /* fade intermédiaire (feedback <300 ms) */
  --duration-panel:   0.40s;   /* glissement tiroir/drawer     */
  --duration-reveal:  0.50s;   /* entrée en scène sections (0.70 → 0.50, audit v10 M19) */

  --transition-color:     color var(--duration-base),
                          border-color var(--duration-base);
  --transition-card:      transform var(--duration-card) var(--ease-spring),
                          box-shadow var(--duration-card) var(--ease-spring);
  --transition-transform: transform var(--duration-slow) var(--ease-default);
  --transition-btn:       transform var(--duration-ui)   var(--ease-spring),
                          background var(--duration-base) var(--ease-default),
                          box-shadow var(--duration-ui)  var(--ease-spring);
  --transition-fade:      opacity var(--duration-slow) var(--ease-smooth),
                          transform var(--duration-slow) var(--ease-smooth);
  --transition-opacity:   opacity var(--duration-base) var(--ease-default);
  --transition-faq:       box-shadow var(--duration-slower) var(--ease-default),
                          border-color var(--duration-slower) var(--ease-default);


  /* ── Z-index ── */
  --z-base:     0;
  --z-raised:   1;
  --z-dropdown: 10;
  --z-sticky:   100;
  --z-nav:      200;  /* > FAB (150) : la nav reste au-dessus (audit v8 L24) */
  --z-drawer:   1050;  /* faq-panel */
  --z-modal:    1100;  /* recruiter-modal */
  --z-fab:           150;
  --z-quiz-backdrop: 1040;
  --z-quiz:          1041;
  --z-faq-backdrop:  var(--z-drawer);
  --z-faq:           calc(var(--z-drawer) + 1);
  --z-rec-backdrop:  var(--z-modal);
  --z-rec:           calc(var(--z-modal) + 1);
  --z-toast:    1200;  /* tooltips au-dessus des panels */
  --z-progress: 1300;  /* skip-link au-dessus des dialogs */
  --z-lightbox: 1400;  /* lightbox galerie voyages        */
  --z-egg:      1500;  /* easter eggs (rainbow, CRT, About) */


  /* ── Layout ── */
  --max-w:      940px;
  --max-w-text: 720px;
  --max-w-faq:  900px;


  /* ── Échelle d'espacement (base 4pt) ── */
  --space-1:  4px;
  --space-1-5: 6px;
  --space-3-5: 14px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:  12px;
  --space-4:  16px;
  --space-4-5: 18px;
  --space-5:  20px;
  --space-6:  24px;
  --space-6-5: 26px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-13: 52px;
  --space-18: 72px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --shadow-photo-ring: 0 0 0 5px rgba(10, 9, 8, 0.6); /* anneau photo hero */
  --tracking-label: 0.5px;


  /* ── Typographie ── */
  --text-xs:   0.75rem;    /* 12px */
  --text-2xs:  0.8125rem;  /* 13px — micro UI labels         */
  --text-sm:   0.875rem;   /* 14px */
  --text-md:   0.9375rem;  /* 15px — secondary body          */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-xl-2: 1.375rem;   /* 22px — card titles             */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-icon: 1.75rem;    /* 28px — emoji/icon display      */
  --text-lede: 1.0625rem;  /* lede des page-heros (audit v9) */
  --text-quote: clamp(3.25rem, 6vw, 4.5rem); /* guillemet temoignage (audit v9) */
  --text-hero: 2.625rem;   /* 42px — stat numbers            */

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.65;
  --leading-body:   1.7;
  --leading-loose:  1.8;

  --tracking-wide:  0.12em;  /* letterspacing labels uppercase */
  --tracking-wider: 0.15em;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;
}




    
/* Perf: defer rendering of below-fold heavy sections */
/* Perf below-fold : estimations par section (audit v11 M3) — réduit le saut de
   mise en page au premier scroll quand la hauteur réelle s'écarte de la valeur. */
#voyages   { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
#faq       { content-visibility: auto; contain-intrinsic-size: auto 1500px; }
#contact   { content-visibility: auto; contain-intrinsic-size: auto 1600px; }
#temoignage{ content-visibility: auto; contain-intrinsic-size: auto 620px; }
#projets   { content-visibility: auto; contain-intrinsic-size: auto 2000px; }

/* ===== RESET ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* Tokens : couches 1 (primitives) + 2 (semantique) en tete de fichier — bloc fallback duplique supprime (audit v9 H11) */
    :root { color-scheme: light; }

    /* Sticky nav.menubar = 44px — compensation des ancres (44 + 8 de marge) */
    html { scroll-padding-top: 52px; }

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

    /* ===== HERO BACKGROUND — subtle vintage linen texture ===== */
    header {
      background-image: radial-gradient(circle, oklch(0.87 0.008 60) 1px, transparent 1px);
      background-size: 18px 18px;
      background-color: var(--cream);
    }

    body {
      font-family: var(--font-body);
      background: var(--cream);
      color: var(--black);
      font-size: var(--text-base);
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }

    /* ===== RAINBOW BAR ===== */
    .rainbow-bar {
      height: 10px;
      display: flex;
      width: 100%;
    }
    .rainbow-bar span { flex: 1; display: block; }
    .rainbow-bar span:nth-child(1) { background: var(--r-green); }
    .rainbow-bar span:nth-child(2) { background: var(--r-yellow); }
    .rainbow-bar span:nth-child(3) { background: var(--r-orange); }
    .rainbow-bar span:nth-child(4) { background: var(--r-red); }
    .rainbow-bar span:nth-child(5) { background: var(--r-purple); }
    .rainbow-bar span:nth-child(6) { background: var(--r-blue); }

    /* ===== NAV ===== */
    nav {
      position: sticky;
      top: 0;
      z-index: var(--z-nav);
      background: var(--color-nav-bg);
      border-bottom: 1px solid var(--border);
      padding: 0 var(--space-10); /* height geree par nav.menubar (44px, menubar.css) — 58px mort supprime (audit v9) */
      display: flex;
      justify-content: space-between;
      align-items: center;
    }


    /* ===== NAV ACTIONS (right cluster) ===== */
    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-1-5);
      flex-shrink: 0;
    }
    .nav-divider {
      width: 1px;
      height: 18px;
      background: var(--border);
      flex-shrink: 0;
      margin: 0 2px;
    }

    /* ===== LANG TOGGLE ===== */
    #lang-toggle {
      background: none;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-1) 11px;
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: var(--fw-semi);
      letter-spacing: var(--tracking-label);
      cursor: var(--cur-hand, pointer);
      color: var(--charcoal);
      transition: var(--transition-color);
      white-space: nowrap;
      margin-left: 0;
      flex-shrink: 0;
    }
    #lang-toggle:hover { border-color: var(--accent-hover); color: var(--accent-text); }

    /* ===== HERO ===== */
    .hero-wrap {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: var(--space-18) var(--space-10) var(--space-20);
      display: grid;
      grid-template-columns: 1fr 240px;
      gap: var(--space-16);
      align-items: start;
    }
    .hero-eyebrow {
      opacity: 0;
      transform: translateX(-14px);
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-xs);
      font-weight: var(--fw-semi);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gray);
      margin-bottom: var(--space-5);
    }
    .hero-eyebrow::before { content: none; }
    h1.hero-name {
      text-wrap: balance;
      font-family: var(--font-display);
      font-size: clamp(50px, 9vw, 100px); /* floor abaissé : plus de clip <360px (audit v13.2) */
      font-weight: var(--fw-black);
      line-height: 0.92;
      letter-spacing: -3px;
      color: var(--black);
      margin-bottom: var(--space-7);
    }
    h1.hero-name span {
      display: block;
      overflow: hidden;         /* clip le contenu intérieur */
      padding-bottom: 0.06em;   /* évite que les descentes soient coupées */
    }
    h1.hero-name span > .word-inner {
      display: block;
      transform: translateY(110%);
      opacity: 0;
    }
    h1.hero-name span:nth-child(1) > .word-inner { animation-delay: 0.05s; }
    h1.hero-name span:nth-child(2) > .word-inner { animation-delay: 0.22s; }
    @keyframes wordReveal {
      to { transform: translateY(0); opacity: 1; }
    }
    @keyframes heroSlideIn {
      to { transform: translateX(0); opacity: 1; }
    }
    /* Animations d'entrée opt-in (audit v13.3) : déclarées hors reduced-motion ;
       l'état de repos visible est garanti par le garde reduce en fin de fichier. */
    @media (prefers-reduced-motion: no-preference) {
      .hero-eyebrow { animation: heroSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards; }
      h1.hero-name span > .word-inner { animation: wordReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
      .hero-tagline { animation: heroSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards; }
      .hero-pills .pill { animation: pillIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
      .hero-cta .btn { animation: pillIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
      .section-header.anim-in .section-num { animation: numPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
      .case-more > .case-step { animation: caseStepIn .28s var(--ease-smooth, cubic-bezier(0.22, 1, 0.36, 1)) both; }
      .parallax-bg-inner { animation: mac-impact 0.82s cubic-bezier(0.16, 1, 0.3, 1) both; }
    }
    .hero-tagline {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-style: italic;
      color: var(--charcoal);
      line-height: 1.45;
      max-width: 420px;
      margin-bottom: var(--space-7);
      opacity: 0;
      transform: translateX(-16px);
    }
    .hero-pills {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2-5);
      margin-bottom: var(--space-9);
    }
    .pill {
      font-size: var(--text-xs);
      font-weight: var(--fw-semi);
      letter-spacing: 0.4px;
      padding: var(--space-1-5) 15px;
      border: 1.5px solid var(--charcoal);
      border-radius: var(--radius-pill);
      color: var(--charcoal);
      transition: var(--transition-color);
    }
    .pill:hover { border-color: var(--r-orange); color: var(--accent-text); }
    .pill.dark { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
    .hero-cta { display: flex; gap: var(--space-3-5); flex-wrap: wrap; align-items: center; }
    .hero-report-link {
      flex-basis: 100%;
      width: fit-content;
      margin-top: 2px;
      font-size: var(--text-sm);
      font-weight: var(--fw-semi);
      color: var(--cream);
      text-decoration: underline;
      text-decoration-color: var(--accent);
      text-decoration-thickness: 1.5px;
      text-underline-offset: 4px;
      transition: text-decoration-color .18s ease;
    }
    .hero-report-link:hover { text-decoration-color: var(--cream); }
    .hero-report-link:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: var(--radius-focus, 4px);
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-6);
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: var(--fw-semi);
      text-decoration: none;
      border-radius: var(--radius-sm);
      transition: var(--transition-btn);
    }
    @media (hover: hover) and (pointer: fine) {
      .btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
    }
    .btn:active { transform: scale(0.97) translateY(0); box-shadow: none; transition-duration: 0.08s; }
    .btn-primary { background: var(--black); color: var(--cream); }
    .btn-primary:hover { background: var(--charcoal); }
    .btn-secondary { background: transparent; color: var(--black); border: 1.5px solid var(--black); }
    .btn-secondary:hover { background: var(--paper); }

    /* Photo */
    .hero-photo-wrap {
      padding-top: var(--space-3);
      position: relative;
    }
    /* Rainbow Apple ring — masked to show only the outer band */
    .hero-photo-wrap::before {
      content: '';
      position: absolute;
      width: 264px;
      height: 264px;
      border-radius: var(--radius-circle);
      background: conic-gradient(
        var(--r-green)   0deg   60deg,
        var(--r-yellow)  60deg  120deg,
        var(--r-orange)  120deg 180deg,
        var(--r-red)     180deg 240deg,
        var(--r-purple)  240deg 300deg,
        var(--r-blue)    300deg 360deg
      );
      top: 5px;
      left: -7px;
      z-index: 3;
      /* Cut out the centre so only the outer ring is visible */
      -webkit-mask: radial-gradient(circle, transparent 122px, black 126px);
      mask:         radial-gradient(circle, transparent 122px, black 126px);
    }
    .hero-photo-frame {
      width: 250px;
      height: 250px;
      background: var(--charcoal);
      border-radius: var(--radius-circle);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: var(--z-raised);
      box-shadow: var(--shadow-photo-ring);
    }
    .hero-photo-frame img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 18%;
    }
    /* ===== SECTION BASE ===== */

    /* ============================================================
       PARALLAX HERO — "Hello, Marius."
       ============================================================ */

    header {
      position: relative;
      min-height: 85dvh;
      overflow: hidden;
      display: flex;
      align-items: center;
      background-color: var(--hero-bg);   /* fond fallback si image absente */
    }

    /* ── Couche 1 : image Mac — outer (scroll parallax via JS transform) ── */
    /* will-change géré dynamiquement par parallax.js (activé au scroll, relâché au repos) */
    .parallax-bg {
      position: absolute;
      top: 10%;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: min(440px, 50%);
      aspect-ratio: 649 / 513;
      z-index: 0;
      opacity: 0.68;           /* valeur au repos ; JS écrase au scroll */
    }

    /* ── Couche 1 inner : porte le bg + animation d'entrée ────────────── */
    .parallax-bg-inner {
      width: 100%;
      height: 100%;
      background-image: url('/mac-hello.webp');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      animation-delay: 0.06s;
    }

    /* Impact : chute depuis le haut avec micro-compression à l'atterrissage */
    @keyframes mac-impact {
      0%  { transform: translateY(-140px) scale(1.10); opacity: 0; }
      8%  { opacity: 1; }
      66% { transform: translateY(9px)   scale(0.972); }
      83% { transform: translateY(-3px)  scale(1.006); }
      100%{ transform: translateY(0)     scale(1);     }
    }

    /* Couche 2 : overlay sombre pour lisibilité du texte */
    .parallax-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(8, 7, 6, 0.72) 0%,
        rgba(8, 7, 6, 0.52) 50%,
        rgba(8, 7, 6, 0.68) 100%
      );
      z-index: 1;
    }

    /* Couche 4 : hero-wrap au-dessus de tout */
    header .hero-wrap {
      position: relative;
      z-index: 4;
    }

    /* Entrée hero après que le Mac a atterri (delay calé sur fin d'impact) */
    @media (prefers-reduced-motion: no-preference) {
      header .hero-wrap {
        animation: hero-reveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: 0.70s;
      }
    }

    @keyframes hero-reveal {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Texte hero adapté sur fond sombre */
    header h1.hero-name .word-inner {
      color: var(--cream) !important;
    }

    header .hero-tagline {
      color: var(--warm-white) !important;
      opacity: 0.9;
    }

    header .hero-eyebrow {
      color: var(--color-on-dark-text) !important;
    }

    header .pill {
      background: var(--color-on-dark-faint) !important;
      border: 1px solid var(--color-on-dark-border) !important;
      color: var(--cream) !important;
    }

    header .pill.dark {
      background: var(--cream) !important;
      color: var(--charcoal) !important;
      border-color: transparent !important;
    }

    header .btn-secondary {
      color: var(--cream);
      border-color: var(--color-on-dark-mid);
    }
    header .btn-secondary:hover {
      background: var(--color-on-dark-dim);
      border-color: var(--color-on-dark-soft);
    }


    /* Scroll hint : souris animée */
    .parallax-scroll-hint {
      position: absolute;
      bottom: 36px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2);
      opacity: 0;
      transition: opacity 0.3s var(--ease-smooth);
      pointer-events: none;
    }

    .parallax-scroll-hint.visible { opacity: 0.75; }

    .parallax-scroll-hint span {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--cream);
    }

    .parallax-scroll-mouse {
      width: 20px;
      height: 32px;
      border: 1.5px solid var(--color-on-dark-mid);
      border-radius: 10px;
      position: relative;
    }

    .parallax-scroll-mouse::after {
      content: '';
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
      width: 3px;
      height: 7px;
      background: var(--color-on-dark-hint);
      border-radius: 2px;
    }
    @media (prefers-reduced-motion: no-preference) {
      .parallax-scroll-mouse::after { animation: parallaxMouseBounce 1.6s ease-in-out infinite; } /* declaration gardee (audit v10 L13) */
    }

    /* Fin de cycle a opacity:0 : volontaire, le point disparait puis reapparait
       au cycle suivant (affordance de scroll) — audit v10 L14 ecarte */
    @keyframes parallaxMouseBounce {
      0%   { transform: translateX(-50%) translateY(0);    opacity: 1; }
      60%  { transform: translateX(-50%) translateY(10px); opacity: 0; }
      100% { transform: translateX(-50%) translateY(0);    opacity: 0; }
    }

    /* Mobile : pas de will-change (iOS Safari) */
    @media (max-width: 767px) {
      .parallax-bg { top: 0; will-change: auto; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .parallax-bg,
      .parallax-bg-inner { animation: none !important; will-change: auto; }
      .parallax-bg        { opacity: 0.68 !important; transform: none !important; }
      .parallax-bg-inner  { opacity: 1    !important; transform: none !important; }
      header .hero-wrap   { animation: none !important; opacity: 1 !important; transform: none !important; }
    }

    .section {
      padding: var(--space-18) var(--space-10);
      max-width: var(--max-w);
      margin: 0 auto;
    }
    /* Fond alterné une section sur deux — full-width */
    #main-content > section:nth-of-type(even) {
      background-color: var(--warm-white);
      max-width: 100%;
      padding-left:  max(40px, calc(50vw - 430px));
      padding-right: max(40px, calc(50vw - 430px));
    }
    .section-header {
      display: flex;
      align-items: flex-start;
      gap: var(--space-4);
      margin-bottom: var(--space-13);
    }
    .section-num {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: var(--fw-bold);
      font-style: normal;
      color: var(--cream);
      background: var(--charcoal);
      width: 28px;
      height: 20px;
      border-radius: var(--radius-sm);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      top: 5px;
    }
    #about       .section-num { background: var(--r-green); color: var(--black); }
    #experience  .section-num { background: var(--r-yellow); color: var(--charcoal); }
    #education   .section-num { background: var(--r-orange); color: var(--black); }
    #skills      .section-num { background: var(--r-red); color: var(--cream); }
    #publications .section-num { background: var(--r-purple); color: var(--cream); }
    [aria-labelledby="benev-title"] .section-num { background: var(--r-blue); color: var(--black); }
    #voyages     .section-num { background: var(--r-green); color: var(--black); }
    h2.section-title {
      position: relative;
      padding-bottom: var(--space-3-5);
    }
    h2.section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 60px;
      height: 3px;
      background: linear-gradient(to right,
        var(--r-green) 16.6%, var(--r-yellow) 16.6% 33.2%,
        var(--r-orange) 33.2% 49.8%, var(--r-red) 49.8% 66.4%,
        var(--r-purple) 66.4% 83%, var(--r-blue) 83%
      );
      border-radius: var(--radius-xs);
      transform-origin: left center;
    }
    :where(html.js-ready) h2.section-title::after {
      transform: scaleX(0);
      transition: transform var(--duration-reveal) var(--ease-smooth) var(--duration-fast);
    }
    .section-header.anim-in h2.section-title::after { transform: scaleX(1); }
    h2.section-title {
      text-wrap: balance;
      font-family: var(--font-display);
      font-size: clamp(30px, 4vw, 42px);
      font-weight: var(--fw-bold);
      letter-spacing: -1px;
      line-height: 1.1;
      color: var(--black);
    }

    /* ===== ABOUT ===== */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: var(--space-16);
      align-items: start;
    }
    .about-text p {
      max-width: var(--max-w-text); /* mesure de ligne (audit v7) */
      font-size: var(--text-base);
      color: var(--charcoal);
      line-height: 1.8;
      margin-bottom: var(--space-4-5);
    }
    .about-text strong { color: var(--black); font-weight: var(--fw-semi); }
    .about-intro {
      font-size: var(--text-lg);
      line-height: 1.65;
      color: var(--charcoal);
      padding-bottom: var(--space-1-5);
      border-bottom: 1px solid var(--color-border-subtle, var(--light-gray));
    }
    .about-stats { display: flex; flex-direction: column; gap: var(--space-5); }
    .stat-card {
      padding: 22px var(--space-6);
      background: var(--warm-white);
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }
    .stat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 7px;
      background: linear-gradient(to right,
        var(--r-green) 16.6%, var(--r-yellow) 16.6% 33.2%,
        var(--r-orange) 33.2% 49.8%, var(--r-red) 49.8% 66.4%,
        var(--r-purple) 66.4% 83%, var(--r-blue) 83%
      );
      transform: scaleY(0.57);
      transform-origin: top center;
      transition: transform var(--duration-slow) var(--ease-smooth); /* entrée : ease-out (audit v8 M-motion) */
    }
    .stat-card:hover::before { transform: scaleY(1); }
    @media (hover: hover) and (pointer: fine) {
      .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
      }
    }
    .stat-card { transition: var(--transition-card); }
    .stat-number {
      font-family: var(--font-display);
      font-size: var(--text-hero);
      font-weight: var(--fw-black);
      line-height: 1;
      color: var(--black);
    }
    :where(html.js-ready) .stat-card.anim-ready .stat-number {
      clip-path: inset(0 0 100% 0);
      transform: translateY(-6px);
      transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
                  transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
    }
    .stat-card.anim-in .stat-number {
      clip-path: inset(0 0 0% 0);
      transform: translateY(0);
    }
    .stat-label {
      font-size: var(--text-2xs);
      color: var(--gray);
      margin-top: var(--space-1-5);
      line-height: 1.5;
    }

    /* ===== EXPERIENCE ===== */
    .exp-list { display: flex; flex-direction: column; }
    .exp-item {
      display: grid;
      grid-template-columns: 170px 1fr;
      gap: var(--space-8);
      padding: var(--space-9) 0;
      border-bottom: 1px solid var(--light-gray);
      position: relative;
    }
    .exp-item::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 5px;
      background: linear-gradient(to right,
        var(--r-green) 16.6%, var(--r-yellow) 16.6% 33.2%,
        var(--r-orange) 33.2% 49.8%, var(--r-red) 49.8% 66.4%,
        var(--r-purple) 66.4% 83%, var(--r-blue) 83%
      );
      opacity: 0.5;
      transform: scaleY(0.6);
      transform-origin: top center;
      transition: var(--transition-fade);
    }
    .exp-item:hover::before { transform: scaleY(1); opacity: 1; }
    .exp-item:first-child { border-top: 1px solid var(--light-gray); }
    .exp-meta { padding-top: var(--space-1); }
    .exp-date {
      font-size: var(--text-xs);
      font-weight: var(--fw-semi);
      letter-spacing: 0.3px;
      color: var(--gray);
      margin-bottom: var(--space-3);
      line-height: 1.5;
    }
    .exp-badge {
      width: 72px; height: 72px;
      background-color: var(--color-retro-grey);
      border-top: 3px solid var(--color-retro-bevel-light);
      border-left: 3px solid var(--color-retro-bevel-light);
      border-right: 3px solid var(--color-retro-bevel-mid);
      border-bottom: 3px solid var(--color-retro-bevel-mid);
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-xl);
      cursor: var(--cur-arrow, default);
      transition: var(--transition-faq);
      image-rendering: pixelated;
    }
    .exp-badge:hover {
      box-shadow:
        3px 3px 0px var(--color-retro-rainbow-g),
        6px 6px 0px var(--color-retro-rainbow-y),
        9px 9px 0px var(--color-retro-rainbow-o),
        12px 12px 0px var(--color-retro-rainbow-r);
    }
    .exp-badge:active {
      border-top: 3px solid var(--color-retro-bevel-mid);
      border-left: 3px solid var(--color-retro-bevel-mid);
      border-right: 3px solid var(--color-retro-bevel-light);
      border-bottom: 3px solid var(--color-retro-bevel-light);
      transform: translate(1px, 1px);
    }
    h3.exp-title {
      font-family: var(--font-display);
      font-size: var(--text-2xl); /* ratio h2/h3 >= 1.4 en mobile (audit v8 M13) */
      font-weight: var(--fw-bold);
      letter-spacing: -0.4px;
      color: var(--black);
      margin-bottom: var(--space-1);
    }
    .exp-company {
      font-size: var(--text-sm);
      font-weight: var(--fw-semi);
      color: var(--charcoal);
      margin-bottom: var(--space-3-5);
    }
    .exp-desc {
      max-width: var(--max-w-text); /* mesure de ligne (audit v7) */
      font-size: var(--text-md);
      color: var(--charcoal);
      line-height: 1.75;
      margin-bottom: var(--space-4);
    }
    .exp-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .tag {
      font-size: var(--text-xs);
      font-weight: var(--fw-semi);
      letter-spacing: 0.3px;
      padding: var(--space-1) var(--space-3);
      background: var(--warm-white);
      border: 1px solid var(--light-gray);
      border-radius: var(--radius-sm);
      color: var(--charcoal);
    }

    /* ===== EDUCATION ===== */
    .edu-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-5);
    }
    .edu-card {
      padding: var(--space-7) 30px;
      background: var(--warm-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      position: relative;
      overflow: hidden;
    }
    .edu-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 7px;
      opacity: 0.6;
      background: linear-gradient(to right,
        var(--r-green) 16.6%, var(--r-yellow) 16.6% 33.2%,
        var(--r-orange) 33.2% 49.8%, var(--r-red) 49.8% 66.4%,
        var(--r-purple) 66.4% 83%, var(--r-blue) 83%
      );
      transform: scaleY(0.57);
      transform-origin: top center;
      transition: var(--transition-fade);
    }
    .edu-card:hover::before { transform: scaleY(1); opacity: 1; }
    @media (hover: hover) and (pointer: fine) {
      .edu-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-xl);
      }
    }
    .edu-card { transition: var(--transition-card); }
    h3.edu-degree {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: var(--fw-bold);
      color: var(--black);
      margin-bottom: var(--space-1-5);
      letter-spacing: -0.3px;
    }
    .edu-school {
      font-size: var(--text-sm);
      font-weight: var(--fw-semi);
      color: var(--charcoal);
      margin-bottom: var(--space-1-5);
    }
    .edu-date { font-size: var(--text-xs); color: var(--gray); }
    .edu-note {
      font-size: var(--text-sm);
      color: var(--charcoal);
      margin-top: var(--space-3);
      line-height: 1.6;
    }

    /* ===== SKILLS ===== */
    .skills-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-5);
      margin-bottom: var(--space-5);
    }
    .skill-cat {
      padding: var(--space-6-5) var(--space-7);
      background: var(--warm-white);
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }
    /* Each skill column has its own Apple rainbow color */
    .skill-cat:nth-child(1)::before { background: var(--r-green); }
    .skill-cat:nth-child(2)::before { background: var(--r-yellow); }
    .skill-cat:nth-child(3)::before { background: var(--r-orange); }
    .skill-cat:nth-child(4)::before { background: var(--r-purple); }
    .skill-cat:nth-child(1) .skill-cat-title { border-bottom-color: var(--r-green); }
    .skill-cat:nth-child(2) .skill-cat-title { border-bottom-color: var(--r-yellow); }
    .skill-cat:nth-child(3) .skill-cat-title { border-bottom-color: var(--r-orange); }
    .skill-cat:nth-child(4) .skill-cat-title { border-bottom-color: var(--r-purple); }
    .skill-cat:nth-child(1) .dot { background: var(--r-green); }
    .skill-cat:nth-child(2) .dot { background: var(--r-yellow); }
    .skill-cat:nth-child(3) .dot { background: var(--r-orange); }
    .skill-cat:nth-child(4) .dot { background: var(--r-purple); }
    .skill-cat::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 7px;
      transform: scaleY(0.57);
      transform-origin: top center;
      transition: transform var(--duration-slow) var(--ease-smooth); /* entrée : ease-out (audit v8 M-motion) */
    }
    .skill-cat:hover::before { transform: scaleY(1); }
    .skill-cat-title {
      font-family: var(--font-display);
      font-size: var(--text-md);
      font-weight: var(--fw-bold);
      color: var(--black);
      margin-bottom: var(--space-4);
      padding-bottom: var(--space-3);
      border-bottom: 2px solid var(--black);
    }
    .skill-items { list-style: none; display: flex; flex-direction: column; gap: var(--space-2-5); }
    .skill-items li {
      font-size: var(--text-sm);
      color: var(--charcoal);
      display: flex;
      align-items: center;
      gap: var(--space-2-5);
    }
    .dot {
      width: 5px; height: 5px;
      background: var(--black);
      border-radius: var(--radius-circle);
      flex-shrink: 0;
    }
    .lang-row {
      display: flex;
      gap: var(--space-5);
    }
    .lang-item {
      flex: 1;
      padding: var(--space-4-5) var(--space-6);
      background: var(--warm-white);
      border: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .lang-name { font-weight: var(--fw-bold); font-size: var(--text-md); color: var(--black); }
    .lang-level { font-size: var(--text-2xs); color: var(--gray); }

    /* ===== PUBLICATIONS ===== */
    .pub-list { display: flex; flex-direction: column; gap: var(--space-5); }
    .pub-card {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 0;
      border: 1px solid var(--border);
      background: var(--warm-white);
      text-decoration: none;
      color: inherit;
      border-radius: var(--radius-sm);
      overflow: hidden;
      position: relative;
      transition: border-color var(--duration-base), transform var(--duration-fast), box-shadow var(--duration-base);
    }
    .pub-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 6px;
      z-index: var(--z-raised);
      background: linear-gradient(to right,
        var(--r-green) 16.6%, var(--r-yellow) 16.6% 33.2%,
        var(--r-orange) 33.2% 49.8%, var(--r-red) 49.8% 66.4%,
        var(--r-purple) 66.4% 83%, var(--r-blue) 83%
      );
      opacity: 0.55;
      transform: scaleY(0.5);
      transform-origin: top center;
      transition: var(--transition-fade);
    }
    .pub-card:hover::before { transform: scaleY(1); opacity: 1; }
    .pub-card:hover {
      border-color: var(--black);
      transform: translateX(4px);
      box-shadow: -4px 0 0 var(--black);
    }
    .pub-type-stripe {
      background: var(--paper);
      border-right: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-3) 0;
    }
    .pub-type-label {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-size: var(--text-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--gray);
    }
    .pub-body { padding: var(--space-6) var(--space-7); }
    h3.pub-title {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: var(--fw-bold);
      color: var(--black);
      margin-bottom: var(--space-1-5);
      line-height: 1.3;
      letter-spacing: -0.3px;
    }
    .pub-meta { font-size: var(--text-xs); color: var(--gray); margin-bottom: var(--space-2-5); }
    .pub-excerpt { max-width: var(--max-w-text); font-size: var(--text-sm); color: var(--charcoal); line-height: 1.65; }

    /* ===== BÉNÉVOLAT ===== */
    .benev-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-5);
    }
    .benev-card {
      padding: var(--space-6) var(--space-7);
      border: 1px solid var(--border);
      background: var(--warm-white);
      border-radius: var(--radius-sm);
      position: relative;
      overflow: hidden;
    }
    .benev-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 6px;
      background: linear-gradient(to right,
        var(--r-green) 16.6%, var(--r-yellow) 16.6% 33.2%,
        var(--r-orange) 33.2% 49.8%, var(--r-red) 49.8% 66.4%,
        var(--r-purple) 66.4% 83%, var(--r-blue) 83%
      );
      opacity: 0.55;
      transform: scaleY(0.5);
      transform-origin: top center;
      transition: var(--transition-fade);
    }
    .benev-card:hover::before { transform: scaleY(1); opacity: 1; }
    @media (hover: hover) and (pointer: fine) {
      .benev-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-xl);
      }
    }
    .benev-card { transition: var(--transition-card); }
    .benev-icon { font-size: var(--text-icon); margin-bottom: var(--space-3); }
    h3.benev-title {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: var(--fw-bold);
      color: var(--black);
      margin-bottom: var(--space-1);
    }
    .benev-org { font-size: var(--text-2xs); font-weight: var(--fw-semi); color: var(--charcoal); margin-bottom: var(--space-1); }
    .benev-date { font-size: var(--text-xs); color: var(--gray); }

    /* ===== CONTACT (dark) ===== */
    .contact-section {
      /* padding vertical 80px assumé : plus aéré que .section (72px), zone de conversion */
      background-color: var(--paper);
      background-image: radial-gradient(circle, oklch(0.86 0.008 75) 1px, transparent 1px);
      background-size: 20px 20px;
      padding: var(--space-20) var(--space-10);
    }
    .contact-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-16);
      align-items: start;
    }
    h2.contact-headline {
      font-family: var(--font-display);
      font-size: clamp(34px, 5vw, 54px);
      font-weight: var(--fw-black);
      line-height: 1.05;
      letter-spacing: -1.5px;
      color: var(--black);
    }
    h2.contact-headline em {
      font-style: italic;
      color: var(--accent-text);
    }
    .contact-sub {
      font-size: var(--text-md);
      color: var(--charcoal);
      margin-top: var(--space-5);
      line-height: 1.7;
    }
    .contact-links { display: flex; flex-direction: column; margin-top: var(--space-6-5); }
    .contact-link {
      display: flex;
      align-items: center;
      gap: var(--space-4-5);
      text-decoration: none;
      color: var(--black);
      padding: var(--space-3-5) 0;
      border-bottom: 1px solid var(--color-border-medium); /* perceptible en mode sombre (audit v8 L36) */
      transition: var(--transition-opacity);
    }
    .contact-link:focus-visible {
      background: var(--warm-white);
      outline: 2px solid var(--focus-outline);
      outline-offset: 0;
      border-radius: var(--radius-sm);
    }
    .contact-link:last-child { border-bottom: none; }
    .contact-link:hover { opacity: 0.7; }
    .contact-link:active { opacity: 0.5; }
    .c-icon {
      width: 46px; height: 46px;
      background: var(--warm-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-xl);
      flex-shrink: 0;
    }
    .c-label {
      font-size: var(--text-xs);
      color: var(--gray);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 3px;
    }
    .c-value { font-size: var(--text-md); font-weight: var(--fw-medium); }

    /* ===== FOOTER ===== */
    footer {
      background: var(--charcoal);
      padding: var(--space-9) var(--space-10) var(--space-7);
    }
    @media (max-width: 767px) {
      /* réserve sous le footer : le FAB fixe (52px) ne recouvre jamais tel:/mailto: (audit v8 M6) */
      footer { padding-bottom: var(--space-24); }
    }
    .footer-inner {
      max-width: var(--max-w);
      margin: 0 auto var(--space-4-5);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4) var(--space-10);
      justify-content: space-between;
      align-items: center;
    }
    .footer-id { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
    .footer-base {
      max-width: var(--max-w);
      margin: 0 auto;
      padding-top: var(--space-4);
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2) var(--space-10);
      justify-content: space-between;
      align-items: baseline;
    }
    @media (max-width: 700px) {
      .footer-inner, .footer-base, .footer-id { flex-direction: column; align-items: center; text-align: center; }
      .footer-coords { text-align: center; }
    }
    .footer-name {
      white-space: nowrap;
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: var(--fw-bold);
      color: var(--color-footer-text);
    }
    .footer-copy { font-size: var(--text-xs); color: var(--color-footer-text); } /* 5,7:1 sur charcoal (audit v13.2) */

    /* ===== ANIMATIONS ===== */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: no-preference) {
      .hero-text { animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
      .hero-photo-wrap { animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both; }
    }

    /* ===== DISPO PULSE DOT ===== */
    .dispo-dot {
      display: inline-block;
      position: relative;
      width: 8px;
      height: 8px;
      border-radius: var(--radius-circle);
      background: var(--color-success);
      flex-shrink: 0;
    }
    .nav-avail {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-xs);
      font-weight: var(--fw-semi);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--charcoal);
    }

    /* ===== PHOTO TICKER ===== */
    .hero-photo-wrap {
      position: relative;
      overflow: visible;
    }
    .hero-ticker {
      position: absolute;
      top: -23px;
      left: -35px;
      width: 320px;
      height: 320px;
      pointer-events: none;
      z-index: 2;
    }
    /* opt-in : animation declaree hors reduced-motion (audit v13) */
    @media (prefers-reduced-motion: no-preference) {
      .hero-ticker { animation: heroSpin 40s linear infinite; }
    }
    @keyframes heroSpin { to { transform: rotate(360deg); } }
    .hero-ticker svg { width: 100%; height: 100%; overflow: visible; }
    .hero-ticker text {
      font-size: var(--text-xs);
      letter-spacing: .26em;
      fill: var(--gray);
      text-transform: uppercase;
      font-weight: var(--fw-semi);
    }

    /* ===== EXP BULLET LIST ===== */
    .exp-bullets {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--space-4) 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-1-5);
    }
    .exp-bullets li {
      font-size: var(--text-md);
      color: var(--charcoal);
      line-height: 1.7;
      padding-left: var(--space-4-5);
      position: relative;
    }
    .exp-bullets li::before {
      content: '•';
      position: absolute;
      left: 0;
      color: var(--gray);
      font-weight: var(--fw-bold);
    }
    .exp-bullets .sub-li {
      padding-left: 30px;
      font-size: var(--text-sm); /* token (audit v7) */
      color: var(--gray);
    }
    .exp-bullets .sub-li::before { content: '↳'; left: 16px; font-weight: var(--fw-regular); }

    /* ===== EXPERIENCE STATUS DOTS ===== */
    .exp-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: var(--radius-circle);
      flex-shrink: 0;
      margin-bottom: var(--space-2-5);
    }
    .exp-dot--current {
      background: var(--color-active);
      position: relative;
    }
    .exp-dot--current::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: var(--radius-circle);
      border: 2px solid var(--color-active-pulse);
      opacity: 0;
    }
    @media (prefers-reduced-motion: no-preference) {
      .exp-dot--current::after { animation: currentPulse 2s ease-out infinite; }
    }
    @keyframes currentPulse {
      0%       { transform: scale(0.4); opacity: 0.9; }
      70%,100% { transform: scale(2); opacity: 0; }
    }
    .exp-dot--past {
      background: var(--light-gray);
    }
    .exp-date .now {
      color: var(--color-active-text);
      font-weight: var(--fw-bold);
    }
    .exp-item--current .exp-title {
      position: relative;
    }
    .exp-item--current .exp-title::after {
      content: 'En cours';
      display: inline-block;
      margin-left: var(--space-2-5);
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: var(--color-active-text);
      background: var(--color-active-faint);
      border: 1px solid var(--color-active-border);
      border-radius: var(--radius-pill);
      padding: 2px 9px;
      vertical-align: middle;
      position: relative;
      top: -2px;
    }
    :lang(en) .exp-item--current .exp-title::after { content: 'Ongoing'; } /* i18n du badge généré (audit v7 H2) */

    /* ===== PHOTO FLOAT — wrap entier (ring + ticker + frame flottent ensemble) ===== */
    @keyframes wrapFloat {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-7px); }
    }
    @keyframes frameGlow {
      0%, 100% { filter: var(--shadow-hero-float-idle); }
      50%       { filter: var(--shadow-hero-float-up); }
    }
    @media (hover: hover) and (pointer: fine) {
      /* Le wrap entier flotte : ring, ticker et photo montent ensemble */
      @media (prefers-reduced-motion: no-preference) {
        .hero-photo-wrap {
          animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both, wrapFloat 5s ease-in-out 0.8s infinite;
        }
        /* Le frame garde uniquement le glow d'ombre (pas de translateY en double) */
        .hero-photo-frame { animation: frameGlow 5s ease-in-out 0.8s infinite; }
      }
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 820px) {
      nav { padding: 0 var(--space-4); }
      .nav-avail { display: none; }
      .nav-divider { display: none; }
      .hero-ticker { display: none; }
      .hero-wrap {
        grid-template-columns: 1fr;
        padding: var(--space-12) var(--space-5) 56px;
        gap: var(--space-9);
      }
      .hero-photo-wrap { order: -1; }
      .hero-photo-frame { width: 150px; height: 150px; }
      .hero-photo-wrap::before {
        width: 174px; height: 174px; top: 0px; left: -12px;
        -webkit-mask: radial-gradient(circle, transparent 79px, black 83px);
        mask:         radial-gradient(circle, transparent 79px, black 83px);
      }
      .about-grid { grid-template-columns: 1fr; }
      .edu-grid { grid-template-columns: 1fr; }
      .skills-grid { grid-template-columns: 1fr 1fr; }
      .exp-item { grid-template-columns: 1fr; gap: var(--space-2-5); }
      .benev-grid { grid-template-columns: 1fr; }
      .contact-inner { grid-template-columns: 1fr; }
      .footer-inner { flex-direction: column; gap: var(--space-2-5); text-align: center; }
      .section { padding: var(--space-13) var(--space-5); }
    }
    @media (max-width: 480px) {
      .skills-grid { grid-template-columns: 1fr; }
      .lang-row { flex-direction: column; }
      /* audit v7 : à 320px, icône 64px + numéro + titre dépassaient de 15px */
      .section-header { flex-wrap: wrap; row-gap: var(--space-1); }
    }
    /* Palier fin pour petits mobiles (375-390px) */
    @media (max-width: 390px) {
      .section { padding: 44px var(--space-4); }
      #main-content > section:nth-of-type(even) { padding-left: var(--space-4); padding-right: var(--space-4); }
      .hero-wrap { padding: var(--space-9) var(--space-4) var(--space-12); gap: var(--space-7); }
    }
    /* Héro mobile : nom avant le badge de dispo (le pitch d'abord) */
    @media (max-width: 820px) {
      .hero-text-parallax { display: flex; flex-direction: column; }
      .hero-name { order: 1; }
      .hero-eyebrow { order: 2; margin-top: 2px; }
      .hero-tagline { order: 3; }
      .hero-pills { order: 4; }
    }
    /* Feedback tactile immédiat (pas de hover au doigt) */
    @media (hover: none), (pointer: coarse) {
      .mb-item:active, .mb-lang:active, .mb-more > summary:active,
      .qp-opt:active, .faq-sug:active, .fqb-btn:active, .faq-quiz-cta-btn:active,
      .rec-btn:active, #btn-recruiter:active, #btn-pdf:active,
      .ef-btn:active, .qr-chip:active, .country-chip:active,
      .btn:active, .faq-send:active, .faq-fab:active, .cta-primary:active,
      .pub-card:active, .faq-item summary:active, .faq-quiz-btn:active,
      .qp-close:active, .rec-close:active, .faq-close-btn:active {
        transform: scale(0.97);
        transition-duration: 0.06s;
      }
      .qp-opt:active { border-color: var(--black); }
      .travel-pin:active { transform: translate(-50%, -100%) scale(1.35); }
    }

    /* Touch: boost rainbow on scroll reveal */
    @media (hover: none) {
      .edu-card.rainbow-visible::before,
      .stat-card.rainbow-visible::before,
      .skill-cat.rainbow-visible::before,
      .exp-item.rainbow-visible::before,
      .pub-card.rainbow-visible::before,
      .benev-card.rainbow-visible::before {
        opacity: 1;
        height: 6px;
      }
    }

    /* ===== SCROLL ENTRANCE ANIMATIONS =====
       Gated par html.js-ready (posée par main.js) : sans JS ou avant
       son exécution, le contenu est pleinement visible. */
    :where(html.js-ready) .anim-ready {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity var(--duration-reveal) var(--ease-smooth),
                  transform var(--duration-reveal) var(--ease-smooth);
    }
    .anim-ready.anim-in { opacity: 1; transform: translateY(0); }
    .anim-stagger .anim-ready:nth-child(1) { transition-delay: 0.04s; }
    .anim-stagger .anim-ready:nth-child(2) { transition-delay: 0.09s; }
    .anim-stagger .anim-ready:nth-child(3) { transition-delay: 0.14s; }
    .anim-stagger .anim-ready:nth-child(4) { transition-delay: 0.19s; }
    .anim-stagger .anim-ready:nth-child(5) { transition-delay: 0.24s; }
    .anim-stagger .anim-ready:nth-child(6) { transition-delay: 0.29s; }
    .anim-stagger .anim-ready:nth-child(7) { transition-delay: 0.34s; }
    .anim-stagger .anim-ready:nth-child(8) { transition-delay: 0.39s; }

    /* Rainbow ring — même vitesse que le ticker */
    @keyframes ringRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    /* Rainbow bar — breathing shimmer */
    @keyframes rainbowBreath { 0%,100% { opacity:1; } 50% { opacity:.72; } }
    /* opt-in : animations idle declarees hors reduced-motion (audit v13) */
    @media (prefers-reduced-motion: no-preference) {
      .hero-photo-wrap::before { animation: ringRotate 40s linear infinite; }
      .rainbow-bar { animation: rainbowBreath 4s ease-in-out infinite; }
    }

    /* Pills — staggered entrance */
    .hero-pills .pill {
      opacity: 0;
      transform: translateY(10px) scale(0.95);
    }
    .hero-pills .pill:nth-child(1) { animation-delay: 0.55s; }
    .hero-pills .pill:nth-child(2) { animation-delay: 0.63s; }
    .hero-pills .pill:nth-child(3) { animation-delay: 0.71s; }
    .hero-pills .pill:nth-child(4) { animation-delay: 0.79s; }
    .hero-pills .pill:nth-child(5) { animation-delay: 0.87s; }
    .hero-pills .pill:nth-child(6) { animation-delay: 0.95s; }
    .hero-pills .pill:nth-child(7) { animation-delay: 1.03s; }
    @keyframes pillIn { to { opacity:1; transform: translateY(0) scale(1); } }

    /* CTA buttons — delayed entrance */
    .hero-cta .btn { opacity:0; transform: translateY(12px); }
    .hero-cta .btn:nth-child(1) { animation-delay: 0.85s; }
    .hero-cta .btn:nth-child(2) { animation-delay: 0.95s; }

    :where(html.js-ready) .about-text { opacity: 0; transform: translateX(-20px); transition: opacity var(--duration-reveal) var(--ease-smooth), transform var(--duration-reveal) var(--ease-smooth); }
    .about-text.anim-in { opacity: 1; transform: translateX(0); }


    /* Section number — pop bounce on enter */
    @keyframes numPop {
      0%   { transform: scale(0.5) translateY(4px); opacity:0; }
      65%  { transform: scale(1.15) translateY(-2px); opacity:1; }
      100% { transform: scale(1) translateY(0); }
    }

    /* Dispo dot — double ring pulse */
    @keyframes dispoPulseV2 {
      0%       { transform: scale(0.4); opacity: 0.9; }
      70%,100% { transform: scale(2.4); opacity: 0; }
    }
    .dispo-dot::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: var(--radius-circle);
      border: 2px solid var(--color-success-pulse-strong);
      opacity: 0;
    }
    @media (prefers-reduced-motion: no-preference) {
      .dispo-dot::after { animation: dispoPulseV2 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
    }

    /* ===== SR-ONLY (visuellement caché, lu par crawlers et AT) ===== */
    .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;
    }

    /* ===== SKIP LINK ===== */
    .skip-link {
      position: absolute;
      top: -100%;
      left: var(--space-4);
      background: var(--accent);
      color: #181412; /* fige : 6,5:1 sur orange, les deux modes */
      padding: var(--space-2) var(--space-4);
      border-radius: var(--radius-md);
      font-family: var(--font-body);
      font-weight: var(--fw-semi);
      font-size: var(--text-sm);
      text-decoration: none;
      z-index: var(--z-progress);
      transition: top var(--duration-fast) var(--ease-spring);
    }
    .skip-link:focus {
      top: var(--space-4);
      outline: 2px solid var(--black);
      outline-offset: 2px;
    }


    /* ===== FOCUS-VISIBLE — global focus ring (a11y clavier) ===== */
    /* Règle globale sécurisée : ne s'active qu'au clavier */
    :is(a, button, summary, input, [tabindex]):focus-visible {
      outline: 2px solid var(--focus-outline);
      outline-offset: 3px;
      border-radius: var(--radius-focus);
    }
    /* Boutons CTA */
    .btn:focus-visible {
      outline: 2px solid var(--focus-outline);
      outline-offset: 3px;
    }
    /* FAQ input — ring en remplacement de outline:none */
    .faq-input:focus-visible {
      border-color: var(--accent);
      box-shadow: var(--focus-ring);
    }
    /* Bouton send FAQ — ring clair sur fond orange */
    .faq-send:focus-visible {
      outline: 2px solid var(--black);
      outline-offset: 2px;
    }
    /* Bouton restart quiz — outline 3:1 (audit v11 L1, remplace box-shadow accent 2,5:1) */
    .qr-restart:focus-visible {
      outline: 2px solid var(--focus-outline);
      outline-offset: 2px;
    }
    /* Details/summary — accordéons FAQ et études de cas */
    details summary:focus-visible {
      outline: 2px solid var(--focus-outline);
      outline-offset: 3px;
    }

    /* ===== SAFE AREA — iPhone notch / Dynamic Island ===== */
    @supports (padding: max(0px)) {
      .hero-wrap,
      .section,
      .faq-section,
      .contact-section {
        padding-left:  max(40px, env(safe-area-inset-left));
        padding-right: max(40px, env(safe-area-inset-right));
      }
      nav {
        padding-left:  max(var(--space-6), env(safe-area-inset-left));
        padding-right: max(var(--space-6), env(safe-area-inset-right));
      }
    }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce) {
      .anim-ready, .hero-pills .pill, .hero-cta .btn, .about-text,
      .hero-tagline, .hero-eyebrow,
      h1.hero-name span > .word-inner,
      .qr-chips .qr-chip {
        opacity:1; transform:none; animation:none; transition:none;
      }
      .hero-photo-frame { animation:none !important; }
      .hero-photo-wrap { animation: none !important; opacity: 1; transform: none; }
      .hero-photo-wrap::before { animation:none !important; }
      .rainbow-bar { animation:none; }
      h2.section-title::after { transform:scaleX(1); transition:none; }
      .case-more > .case-step { animation: none; }
      .stat-card.anim-ready .stat-number { clip-path: none; transform: none; transition: none; }
      /* Statuts animés — neutralisés pour motion réduit */
      .hero-ticker { animation: none !important; }
      .dispo-dot::after { animation: none !important; opacity: 0; }
      .exp-dot--current::after { animation: none; opacity: 0; }
      /* Panels et modals : ouverture sans translation */
      #quiz-panel, .faq-panel, .rec-modal, .rec-backdrop, .faq-backdrop { transition: none; }
      .qp-result, .qr-chips .qr-chip, .case-more > .case-step, .faq-msg { animation: none; opacity: 1; transform: none; }
    }



    /* ===== ÉTUDES DE CAS ===== */
    .cases-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-5);
    }
    .case-card {
      border: 1px solid var(--border);
      background: var(--warm-white);
      border-radius: var(--radius-sm);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: var(--transition-card);
    }
    @media (hover: hover) and (pointer: fine) {
      .case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
    }
    .case-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 6px;
    }
    .case-card:nth-child(1)::before { background: var(--r-orange); }
    .case-card:nth-child(2)::before { background: var(--r-green); }
    .case-card:nth-child(3)::before { background: var(--r-purple); }
    .case-header { padding: var(--space-6) var(--space-6) var(--space-4); }
    .case-tag {
      font-size: var(--text-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--gray);
      margin-bottom: var(--space-2);
    }
    .case-title {
      font-family: var(--font-display);
      font-size: var(--text-xl) /* harmonisation H3 cards (audit v7) */;
      font-weight: var(--fw-bold);
      color: var(--black);
      line-height: 1.25;
      margin-bottom: var(--space-1);
    }
    .case-sub { font-size: var(--text-xs); color: var(--gray); }
    .case-body {
      padding: 0 var(--space-6) var(--space-4);
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }
    .case-step { display: flex; gap: var(--space-2-5); align-items: flex-start; }
    .case-step-label {
      font-size: var(--text-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.4px;
      text-transform: uppercase;
      min-width: 70px;
      flex-shrink: 0;
      padding-top: 2px;
    }
    .case-step:nth-child(1) .case-step-label { color: var(--case-red); }
    .case-step:nth-child(2) .case-step-label { color: var(--case-blue); }
    .case-step:nth-child(3) .case-step-label { color: var(--case-green); }
    .case-step-text {
      font-size: var(--text-sm);
      color: var(--charcoal);
      line-height: 1.6;
    }
    .case-result {
      margin-top: auto;
      background: var(--paper);
      border-top: 1px solid var(--border);
      padding: var(--space-3-5) var(--space-6);
      display: flex;
      gap: var(--space-6);
    }
    .case-kpi { text-align: center; }
    .case-kpi-val {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: var(--fw-black);
      color: var(--black);
      line-height: 1;
    }
    .case-kpi-label {
      font-size: var(--text-xs);  /* 0.75rem = 12px, minimum accessible */
      color: var(--gray);
      line-height: 1.4;
      margin-top: 3px;
    }
    @media (max-width: 820px) {
      .cases-grid { grid-template-columns: 1fr; }
    }
    /* ===== ÉTUDES DE CAS — collapsible details ===== */
    .case-more {
      margin-top: var(--space-1);
      border-top: 1px dashed var(--border);
      padding-top: var(--space-3);
    }
    .case-more > summary {
      list-style: none;
      cursor: var(--cur-hand, pointer);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      font-size: var(--text-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--accent-text);
      padding: var(--space-2) 0;
      min-height: 44px; /* cible tactile 44px (audit v7, relevee v10 H5) */
      user-select: none;
      transition: color .18s ease, transform .18s ease;
    }
    .case-more > summary::-webkit-details-marker { display: none; }
    .case-more > summary:hover { color: var(--charcoal); }
    .case-more-icon {
      width: 22px; height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1.5px solid currentColor;
      border-radius: 50%;
      font-size: var(--text-sm, 0.875rem);
      font-weight: var(--fw-bold);
      line-height: 1;
      transition: transform .25s var(--ease-spring, cubic-bezier(.16,1,.3,1)), background .18s ease, color .18s ease;
    }
    .case-more[open] > summary .case-more-icon {
      transform: rotate(45deg);
      background: var(--accent);
      color: var(--cream);
      border-color: var(--accent);
    }
    .case-more[open] > summary { color: var(--charcoal); }
    .case-more > .case-step {
      margin-top: var(--space-2-5);
    }
    .case-more > .case-step:nth-of-type(2) { animation-delay: .07s; }
    @keyframes caseStepIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    /* Re-color the labels inside <details> (they're no longer nth-child of .case-body) */
    .case-more .case-step:nth-of-type(1) .case-step-label { color: var(--case-blue); }
    .case-more .case-step:nth-of-type(2) .case-step-label { color: var(--case-green); }

    /* ===== Inline link hover — global subtle feedback ===== */
    .link-inline,
    a[href^="mailto:"]:not(.cta-primary):not(.contact-link),
    a[href^="https://github.com"]:not(.mb-item):not(.finder-row),
    .case-step-text a,
    .faq-answer a {
      color: var(--accent-text);
      text-decoration: none;
      background-image: linear-gradient(to right, var(--accent), var(--accent));
      background-size: 0% 1.5px;
      background-position: 0 100%;
      background-repeat: no-repeat;
      transition: background-size .25s var(--ease-smooth), color .18s var(--ease-smooth);
      padding-bottom: 1px;
    }
    .link-inline:hover,
    .case-step-text a:hover,
    .faq-answer a:hover {
      background-size: 100% 1.5px;
      color: var(--charcoal);
    }


    /* ===== TÉMOIGNAGE ===== */
    .temo-card {
      background: var(--charcoal);
      border: 1px solid var(--color-on-dark-subtle);
      border-radius: var(--radius-sm);
      padding: var(--space-9) var(--space-10);
      position: relative;
      overflow: hidden;
      max-width: 700px;
    }
    .temo-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 6px;
      background: linear-gradient(to right,
        var(--r-green) 16.6%, var(--r-yellow) 16.6% 33.2%,
        var(--r-orange) 33.2% 49.8%, var(--r-red) 49.8% 66.4%,
        var(--r-purple) 66.4% 83%, var(--r-blue) 83%
      );
    }
    .temo-openquote {
      font-family: var(--font-display);
      font-size: var(--text-quote);
      color: var(--r-orange);
      line-height: 0.6;
      margin-bottom: var(--space-4);
      display: block;
      opacity: 0.65; /* ancrage visuel du témoignage (audit v8 L36) */
    }
    .temo-quote {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-style: italic;
      color: var(--color-on-dark-text);
      line-height: 1.65;
      margin-bottom: var(--space-7);
    }
    .temo-footer {
      display: flex;
      align-items: center;
      gap: var(--space-3-5);
      flex-wrap: wrap;
    }
    .temo-avatar {
      width: 46px; height: 46px;
      border-radius: 50%;
      background: var(--charcoal);
      color: var(--cream);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: var(--fw-bold);
      font-size: var(--text-md);
      flex-shrink: 0;
      overflow: hidden;
    }
    .temo-avatar img {
      width: 100%; height: 100%;
      object-fit: cover;
      border-radius: 50%;
      display: block;
    }
    .temo-avatar-link {
      border-radius: 50%;
      flex-shrink: 0;
      cursor: var(--cur-hand, pointer);
      transition: box-shadow .2s, transform .2s;
      display: block;
      position: relative; /* ancre du tooltip ::after (audit v10 H1) */
    }
    .temo-avatar-link:focus-visible {
      outline: 2px solid var(--focus-outline);
      outline-offset: 3px;
      border-radius: 50%; /* ring rond sur avatar rond (audit v9 M19) */
    }
    .temo-avatar-link:hover {
      box-shadow: 0 0 0 3px var(--accent);
      transform: scale(1.06);
    }
    .temo-avatar-link:hover::after {
      content: '↗ Avis';
      position: absolute;
      bottom: calc(100% + 6px); /* au-dessus de l'avatar, jamais sous l'overflow:hidden de la carte (audit v10 H1) */
      left: 50%;
      transform: translateX(-50%);
      font-size: var(--text-xs);
      font-weight: var(--fw-bold);
      color: var(--accent);
      white-space: nowrap;
      pointer-events: none;
    }
    .temo-footer { position: relative; }
    .temo-name { font-weight: var(--fw-bold); font-size: var(--text-md); color: var(--cream); }
    .temo-role { font-size: var(--text-xs); color: var(--color-on-dark-hint); margin-top: 2px; }
    .temo-badge {
      margin-left: auto;
      font-size: var(--text-xs);
      font-weight: var(--fw-semi);
      color: var(--color-on-dark-hint);
      background: var(--color-on-dark-subtle);
      border: 1px solid var(--color-on-dark-muted);
      border-radius: var(--radius-pill);
      padding: 3px var(--space-2-5);
      white-space: nowrap;
    }
    #projets .section-num { background: var(--r-orange); color: var(--black); }
    #temoignage .section-num { background: var(--r-purple); }
    @media (max-width: 820px) {
      .temo-card { padding: var(--space-7) var(--space-6); }
      .temo-badge { display: none; }
    }

      /* ===== VOYAGES MAP : deplace dans css/voyages.css (audit v9 H8) =====
         Charge uniquement sur /voyages/ via pageCss (build.js). ===== */

/* --- Backdrop --- */
#quiz-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-dark);
  z-index: var(--z-quiz-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-medium);
}
#quiz-backdrop.visible { opacity: 1; pointer-events: auto; }

/* --- Panel (droite, overflow visible pour laisser passer le tab) --- */
#quiz-panel {
  position: fixed;
  right: calc(-1 * min(400px, calc(100vw - 1.5rem)));
  top: 0;
  height: 100%;
  width: min(400px, calc(100vw - 1.5rem));
  background: var(--cream);
  box-shadow: var(--shadow-drawer);
  z-index: var(--z-quiz);
  overflow: visible;
  transition: right var(--duration-panel) var(--ease-material);
  display: flex;
  flex-direction: column;
}
#quiz-panel.open { right: 0; }
#quiz-panel[hidden] { display: none; } /* fermé : hors arbre a11y, modèle recruiter-modal (audit v8 H3) */
.qp-fallback { color: var(--gray); font-size: var(--text-md); }

/* --- Contenu scrollable interne --- */
.qp-inner {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cream);
}


.qp-rainbow {
  height: 3px;
  background: linear-gradient(to right,
    var(--r-green) 16.6%, var(--r-yellow) 16.6% 33.2%,
    var(--r-orange) 33.2% 49.8%, var(--r-red) 49.8% 66.4%,
    var(--r-purple) 66.4% 83%, var(--r-blue) 83%);
  flex-shrink: 0;
}
.qp-head {
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--light-gray);
  position: relative;
  flex-shrink: 0;
}
.qp-close {
  position: absolute;
  top: 16px; right: 16px;
  background: none; border: none; cursor: var(--cur-hand, pointer);
  font-size: var(--text-lg); color: var(--gray);
  width: 44px; height: 44px; /* cible 44px visuelle (audit v10 H5) */
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-circle);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.qp-close:hover { background: var(--paper); color: var(--black); }
.qp-title {
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: var(--fw-bold);
  color: var(--black); line-height: 1.2;
  margin-top: var(--space-1);
}
.qp-sub {
  font-family: var(--font-body);
  font-size: var(--text-xs); color: var(--gray);
  margin-top: 5px;
}
.qp-dots {
  display: flex; gap: var(--space-1);
  margin-top: var(--space-3-5);
}
.qp-dot {
  flex: 1; height: 3px;
  background: var(--light-gray);
  border-radius: var(--radius-xs);
  transition: background var(--duration-slower);
}
.qp-dot.active { background: var(--black); }
.qp-dot.done {
  background: linear-gradient(to right, var(--r-green), var(--r-blue));
}

/* --- Corps du panel --- */
.qp-body {
  flex: 1;
  padding: 22px var(--space-6) 30px;
  display: flex;
  flex-direction: column;
}
.qp-question {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: var(--fw-bold);
  color: var(--black); line-height: 1.35;
  margin-bottom: var(--space-4-5);
}
.qp-opts { display: flex; flex-direction: column; gap: var(--space-2); }
.qp-opt {
  background: var(--warm-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-form);
  padding: var(--space-3) var(--space-3-5);
  cursor: var(--cur-hand, pointer);
  font-family: var(--font-body);
  text-align: left;
  transition: border-color var(--duration-ui) var(--ease-spring),
              background var(--duration-ui) var(--ease-spring),
              color var(--duration-ui) var(--ease-spring),
              transform var(--duration-ui) var(--ease-spring);
  display: flex; align-items: center; gap: var(--space-2-5);
}
.qp-opt .oi { font-size: var(--text-xl-2); width: 28px; text-align: center; flex-shrink: 0; }
.qp-opt .ol { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--charcoal); }
.qp-opt .od { font-size: var(--text-xs); color: var(--gray); margin-top: 2px; }
@media (hover: hover) and (pointer: fine) {
  .qp-opt:hover {
    border-color: var(--black);
    background: var(--paper);
    transform: translateX(4px);
  }
}
.qp-opt.selected {
  border-color: var(--black);
  background: var(--black);
  color: var(--cream);
}
.qp-opt.selected .ol { color: var(--cream); }
.qp-opt.selected .od { color: var(--light-gray); }
.qp-opt:disabled:not(.selected) { opacity: 0.4; cursor: var(--cur-arrow, default); } /* neutralisé homogène (audit v8 L23) */
.qp-opt:active { transform: scale(0.98); } /* feedback pression (audit v13) */

/* --- Résultat --- */
@media (prefers-reduced-motion: no-preference) { .qp-result { animation: qpFadeIn 0.4s var(--ease-smooth, cubic-bezier(0.16,1,0.3,1)); } }
@keyframes qpFadeIn {
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}
.qr-icon  { font-size: var(--text-hero); margin-bottom: var(--space-2-5); }
.qr-name  { font-family: var(--font-display); font-size: var(--text-xl-2); font-weight: var(--fw-black); color: var(--black); line-height: 1.2; margin-bottom: var(--space-3); }
.qr-msg   { font-family: var(--font-body); font-size: var(--text-sm); color: var(--charcoal); line-height: 1.65; margin-bottom: var(--space-5); }
.qr-label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); margin-bottom: 9px; }
@keyframes chipIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.qr-chips { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .qr-chips .qr-chip {
    opacity: 0;
    animation: chipIn var(--duration-slow) var(--ease-smooth) forwards;
  }
}
.qr-chips .qr-chip:nth-child(1) { animation-delay: 0.05s; }
.qr-chips .qr-chip:nth-child(2) { animation-delay: 0.12s; }
.qr-chips .qr-chip:nth-child(3) { animation-delay: 0.19s; }
.qr-chips .qr-chip:nth-child(4) { animation-delay: 0.26s; }
.qr-chip {
  font: inherit;
  text-align: left;
  width: 100%;
  display: flex; align-items: center; gap: var(--space-2-5);
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: inset 3px 0 0 var(--r-green);
  padding: var(--space-2-5) var(--space-3);
  cursor: var(--cur-hand, pointer);
  transition: background var(--duration-ui) var(--ease-spring),
              transform var(--duration-ui) var(--ease-spring);
}
@media (hover: hover) and (pointer: fine) {
  .qr-chip:hover { background: var(--paper); transform: translateX(3px); }
}
.qr-chip .ci { font-size: var(--text-lg); flex-shrink: 0; }
.qr-chip .cl { font-family: var(--font-body); font-size: var(--text-2xs); font-weight: var(--fw-semi); color: var(--charcoal); }
.qr-chip .cs { font-family: var(--font-body); font-size: var(--text-xs); color: var(--gray); margin-top: 1px; }
.qr-restart {
  background: none; border: 1.5px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-2-5) var(--space-4);
  font-family: var(--font-body); font-size: var(--text-2xs); color: var(--gray);
  cursor: var(--cur-hand, pointer); width: 100%;
  transition: border-color var(--duration-ui) var(--ease-spring),
              color var(--duration-ui) var(--ease-spring);
}
@media (hover: hover) and (pointer: fine) {
  .qr-restart:hover { border-color: var(--black); color: var(--black); }
}

/* --- Mise en valeur des expériences --- */
.exp-item.qz-hi {
  box-shadow: 0 0 0 3px var(--color-bg, var(--cream)),
              0 0 0 5px var(--r-green);
  border-radius: var(--radius-focus);
  transition: box-shadow var(--duration-slower);
}
.exp-item.qz-dim { opacity: 0.28; transition: opacity var(--duration-medium); }

/* ── FAQ Section ────────────────────────────────────────── */
.faq-section {
  padding: var(--space-20) var(--space-8) var(--space-16);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-subtle);
}
.faq-section .section-label {
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: var(--fw-semi);
  margin-bottom: var(--space-3);
}
.faq-section h2 {
  font-size: clamp(30px, 4vw, 42px); /* aligné sur h2.section-title (audit v7) */
  font-family: var(--font-display); /* fallback metrique restaure (audit v10 L1) */
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-10);
  line-height: 1.2;
  color: var(--dark);
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); /* min() : pas de scroll horizontal <=480px (audit v9 H2) */
  gap: var(--space-4);
  max-width: 900px;
}
.faq-item {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.faq-item:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--accent-text);
}
.faq-item summary {
  padding: 1.1rem 1.3rem;
  font-weight: var(--fw-semi);
  font-size: var(--text-md);
  cursor: var(--cur-hand, pointer);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  color: var(--dark);
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: var(--text-xl);
  font-weight: var(--fw-light);
  color: var(--accent-text);
  flex-shrink: 0;
  transition: transform .25s;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
/* Ouverture/fermeture animée de l'accordéon — hauteur réelle (audit v8 M8).
   Navigateurs sans ::details-content / interpolate-size : bascule instantanée. */
@media (prefers-reduced-motion: no-preference) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    height: 0;
    overflow: clip;
    transition: height var(--duration-slow) var(--ease-smooth),
                content-visibility var(--duration-slow) allow-discrete;
  }
  .faq-item[open]::details-content { height: auto; }
}
.faq-item[open] summary {
  color: var(--accent-text);
  border-bottom: 1px solid var(--color-border-subtle);
}
.faq-answer {
  padding: var(--space-4) 1.3rem 1.2rem;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-secondary);
}
/* ═══════════════════════════════════════════════════════════════
   FEATURE 1 — Vue Recruteur Pressé
   ═══════════════════════════════════════════════════════════════ */
.rec-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: var(--overlay-dark);
  z-index: var(--z-rec-backdrop);
  opacity: 0;
  transition: opacity var(--duration-medium, .35s) ease;
}
.rec-backdrop.visible { display: block; }
.rec-backdrop.active  { opacity: 1; }

.rec-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  width: min(480px, 92vw);
  background: var(--color-surface, var(--cream));
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-xl, 0 14px 36px rgba(0,0,0,.18));
  z-index: var(--z-rec);
  opacity: 0;
  transition: opacity var(--duration-medium, .35s) ease,
              transform var(--duration-medium, .35s) var(--ease-spring, cubic-bezier(.16,1,.3,1));
  pointer-events: none;
}
.rec-modal.active {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.rec-inner { padding: var(--space-8) var(--space-8) var(--space-7); }
.rec-eyebrow {
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: .6rem;
}
.rec-title {
  font-size: var(--text-2xl); font-weight: var(--fw-black);
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  color: var(--black); margin: 0 0 .65rem;
}
.rec-pitch {
  font-size: var(--text-md); line-height: 1.7; color: var(--charcoal);
  margin: 0 0 1.1rem;
  box-shadow: inset 3px 0 0 var(--accent);
  padding-left: .9rem;
}
.rec-avail {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--text-sm); color: var(--gray); margin-bottom: 1.4rem;
}
.rec-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--r-green); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(97,185,58,.25);
}
.rec-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.rec-mail { margin: .8rem 0 0; font-size: var(--text-sm); color: var(--gray); }
.rec-mail a { color: var(--accent-text); }
.rec-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem var(--space-5); border-radius: var(--radius-pill, 100px);
  font-size: var(--text-sm); font-weight: var(--fw-bold); text-decoration: none;
  cursor: var(--cur-hand, pointer); border: 2px solid transparent;
  transition: background var(--duration-ui, .18s), color var(--duration-ui, .18s),
              box-shadow var(--duration-ui, .18s), transform var(--duration-ui, .18s);
}
.rec-btn:hover { transform: translateY(-1px); }
.rec-btn--primary {
  background: var(--accent); color: var(--black);
}
.rec-btn--primary:hover { background: var(--charcoal); color: var(--cream); }
.rec-btn--secondary {
  background: transparent; color: var(--charcoal);
  border-color: var(--border);
}
.rec-btn--secondary:hover {
  background: var(--paper); border-color: var(--charcoal);
}
.rec-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 44px; height: 44px; border-radius: 50%; /* cible 44px visuelle (audit v10 H5) */
  border: none; background: var(--warm-white);
  color: var(--gray); font-size: var(--text-base); cursor: var(--cur-hand, pointer);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration-ui, .18s), color var(--duration-ui, .18s);
  line-height: 1;
}
.rec-close:hover { background: var(--paper); color: var(--black); }
/* nav button */
#btn-recruiter {
  padding: .32rem .72rem; border-radius: var(--radius-pill, 100px);
  border: 1.5px solid var(--accent-text); background: transparent;
  color: var(--accent-text); font-size: var(--text-xs); font-weight: var(--fw-bold);
  cursor: var(--cur-hand, pointer); white-space: nowrap; min-height: 36px;
  transition: background var(--duration-ui, .18s), color var(--duration-ui, .18s);
}
#btn-recruiter:hover { background: var(--accent); color: var(--black); }

/* ═══════════════════════════════════════════════════════════════
   FEATURE 2 — Export PDF ATS-Friendly
   ═══════════════════════════════════════════════════════════════ */
#btn-pdf {
  padding: .32rem .72rem; border-radius: var(--radius-pill, 100px);
  border: 1.5px solid var(--border); background: transparent;
  color: var(--charcoal); font-size: var(--text-xs); font-weight: var(--fw-bold);
  cursor: var(--cur-hand, pointer); white-space: nowrap; min-height: 36px; min-width: 36px;
  transition: background var(--duration-ui, .18s), border-color var(--duration-ui, .18s),
              color var(--duration-ui, .18s);
}
#btn-pdf:hover {
  background: var(--paper); border-color: var(--charcoal);
}
/* Cibles 44px sur les pilules de la nav : extension invisible, taille visuelle conservee
   car la barre fait 44px de haut (audit v10 H5) */
#btn-recruiter, #btn-pdf { position: relative; }
#btn-recruiter::after, #btn-pdf::after {
  content: ""; position: absolute; inset: -4px -2px; border-radius: var(--radius-pill);
}
/* ================================================================
   DARK MODE — prefers-color-scheme: dark
   Stratégie : remappage des primitives (couche 1) pour corriger
   toute la cascade en une seule passe + overrides ciblés pour
   les 5 éléments qui utilisent les primitives en mode "inversé"
   (fond sombre intentionnel : contact, footer, temo-card…).
   ================================================================ */
@media (prefers-color-scheme: dark) {

  :root {
    color-scheme: dark;

    /* ── Primitives — remappage cascade ──────────────────────────
       En clair :  cream = fond page   black = texte primaire
       En sombre : cream = fond sombre black = texte clair
       Tous les composants qui utilisent ces vars basculent
       automatiquement sans override supplémentaire.
    ─────────────────────────────────────────────────────────── */
    --cream:      #1B1815;   /* fond page → brun-noir chaud                */
    --warm-white: #232019;   /* surface carte → brun sombre                */
    --paper:      #2D2A25;   /* surface raised → brun moyen                */
    --black:      #EDE8DC;   /* texte principal → crème clair              */
    --charcoal:   #A09A93;   /* texte secondaire → gris chaud              */
    --gray:       #A8A29A;   /* texte atténué : 5:1+ sur toutes les surfaces sombres (audit v8 L22) */
    --border:     rgba(255, 255, 255, 0.11);
    --light-gray: rgba(255, 255, 255, 0.07);

    /* ── Tokens sémantiques (couche 2) ───────────────────────────
       La plupart héritent déjà des primitives remappées ci-dessus.
       On redéfinit explicitement ceux qui avaient des valeurs
       littérales ou qui nécessitent un ajustement fin.
    ─────────────────────────────────────────────────────────── */
    --color-bg:             #1B1815;
    --color-surface:        #232019;
    --color-surface-raised: #2D2A25;
    --color-surface-white:  #2A2722;
    --color-map-fill:       #2D2A25;

    --color-text:           #EDE8DC;
    --color-text-secondary: #C5C0B5;
    --color-text-muted:     #A8A29A;
    --color-text-subtle:    #565049;
    --color-text-invert:    #1B1815;

    --accent-text:          #F09A52;  /* texte accent : 4,5:1+ sur fonds sombres */
    --focus-outline:        #F09A52;  /* focus ring : 3:1+ sur les fonds sombres */
    --color-error-text:     #FF8A75;  /* texte erreur : 7,7:1 sur fond, 6,2:1 sur surfaces */
    --color-active-text:    #8FBEE6;  /* statut actif : >5:1 sur surfaces sombres */
    --color-active-faint:   rgba(127, 180, 224, 0.12);
    --case-red:             #F0928A;  /* tints clairs >=4,5:1 sur fond sombre (audit v13) */
    --case-blue:            #82B6E6;
    --case-green:           #8FD46A;
    --color-active-border:  rgba(127, 180, 224, 0.40);

    --color-border:         rgba(255, 255, 255, 0.11);
    --color-border-subtle:  rgba(255, 255, 255, 0.05);
    --color-border-medium:  rgba(255, 255, 255, 0.09);

    --color-nav-bg:         rgba(27, 24, 21, 0.94);
    --color-footer-bg:      #100F0D;

    --shadow-sm:    0 2px  8px  rgba(0, 0, 0, 0.40);
    --shadow-md:    0 8px  24px rgba(0, 0, 0, 0.50);
    --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-xl:    0 14px 36px rgba(0, 0, 0, 0.60);
    --shadow-hover: 0 8px  24px rgba(0, 0, 0, 0.65);
    --shadow-card:  0 4px  20px rgba(0, 0, 0, 0.45);
    --shadow-panel: 0 8px  32px rgba(0, 0, 0, 0.60);
  }

  /* ── Overrides ciblés : éléments en contexte "inversé" ──────────
     Ces éléments utilisent --charcoal / --black comme fond sombre
     intentionnel (pas comme texte). Sans override, ils deviendraient
     clairs en dark mode après le remappage des primitives.
  ────────────────────────────────────────────────────────────── */

  /* Contact section — points de trame adoucis en sombre */
  .contact-section {
    background-image: radial-gradient(circle, oklch(0.30 0.006 60) 1px, transparent 1px);
  }

  /* Footer — reste sur fond très sombre */
  footer { background: var(--color-footer-bg); }
  .footer-copy { color: var(--color-text-muted); }

  /* Témoignage card — utilisait var(--charcoal) comme surface */
  .temo-card {
    background: var(--color-surface-raised);
    border-color: var(--color-border-medium);
  }
  /* Avatar fallback (initiales) + nom — texte clair sur surface sombre */
  .temo-avatar { background: #3D3830; color: var(--color-on-dark-text); }
  .temo-name   { color: var(--color-on-dark-text); }

  /* Pills "dark" dans le héro — subtile sur fond sombre */
  header .pill.dark {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: var(--color-text) !important;
  }

  /* Boutons a fond orange : texte sombre fige (le remappage --black les rendait illisibles) */
  .rec-btn--primary, .fqb-btn, .faq-send, .faq-msg--user { color: #181412; }

/* .faq-msg--typing : sorti du bloc dark mode (audit v12) */

  /* Option de quiz sélectionnée : fond var(--black) devenu clair, la description
     en var(--light-gray) (blanc 7 %) devenait invisible → texte sombre */
  .qp-opt.selected .od { color: rgba(27, 24, 21, 0.65); }

  /* Section divider rainbow bars — légèrement atténuées */
  .rainbow-bar { opacity: 0.75; }

  /* Scroll progress bar — inchangée (colorée) */

  /* ── Hero parallax — texte cream → #1B1815 après remappage ────────────
     Le fond du hero est fixé par --hero-bg (#0A0908) (toujours sombre).
     Tous les sélecteurs texte qui utilisaient var(--cream) deviennent
     invisibles. On force les tokens "on-dark" (rgba literals, stables).
  ────────────────────────────────────────────────────────────────────── */
  header h1.hero-name .word-inner { color: var(--color-on-dark-text) !important; }
  header .hero-tagline            { color: var(--color-on-dark-soft)  !important; opacity: 0.9; }
  header .pill                    { color: var(--color-on-dark-text)  !important; }
  header .btn-secondary {
    color:        var(--color-on-dark-soft);
    border-color: var(--color-on-dark-mid);
  }
  .parallax-scroll-hint span { color: var(--color-on-dark-hint); }

}

@media print {
  /* Forcer le rendu de toutes les sections (content-visibility: auto → visible) */
  #voyages, #faq, #contact, #temoignage, #projets {
    content-visibility: visible !important;
    contain-intrinsic-size: unset !important;
  }

  nav, .rainbow-bar, .rainbow-bar-progress,
  #quiz-backdrop, #quiz-panel,
  .rec-backdrop, .rec-modal,
  #faq-backdrop, #faq-panel,
  .exp-filter,
  footer, .divider,
  #btn-recruiter, #btn-pdf, #btn-faq { display: none !important; }

  /* Reinitialisation print volontaire : papier blanc, encre #111, hors palette ecran (decision v10) */
  body {
    background: #fff !important; color: #111 !important;
    font-size: 10.5pt; line-height: 1.55;
  }
  .anim-ready { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  header { background: #fff !important; padding-top: 1.5cm !important; }
  .section { page-break-inside: avoid; margin-bottom: 1.2cm !important; }
  .exp-item { page-break-inside: avoid; }
  .edu-card, .benev-card { page-break-inside: avoid; }
  a { color: #111; text-decoration: none; }
  h1, h2, h3 { page-break-after: avoid; color: #111 !important; }
  .tag {
    background: #eee !important; color: #333 !important;
    border-color: #ccc !important;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE 3 — Filtre Expériences par Compétence
   ═══════════════════════════════════════════════════════════════ */
.exp-filter {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-8); align-items: center;
}
.ef-btn {
  padding: .38rem .85rem; border-radius: var(--radius-pill, 100px);
  min-height: 32px;
  border: 1.5px solid var(--border);
  background: transparent; color: var(--charcoal);
  font-size: var(--text-2xs); font-weight: var(--fw-semi); cursor: var(--cur-hand, pointer);
  transition: background var(--duration-ui, .18s), border-color var(--duration-ui, .18s),
              color var(--duration-ui, .18s), transform var(--duration-fast, .15s);
}
.ef-btn:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; border-radius: var(--radius-pill, 100px); }
.ef-btn:hover { background: var(--warm-white); border-color: var(--charcoal); }
/* feedback pression pointeur (audit v13.2) */
.ef-btn:active, #btn-recruiter:active, #btn-pdf:active, .cta-primary:active, .faq-quiz-cta-btn:active { transform: scale(0.97); }
.ef-btn.ef-btn--active {
  background: var(--black);
  border-color: var(--black);
  color: var(--cream);
}
.exp-item[hidden] { display: none !important; }
.exp-item {
  transition: opacity var(--duration-base, .20s) ease, transform var(--duration-card, .22s) var(--ease-spring, cubic-bezier(.16,1,.3,1));
}
.faq-quiz-cta { display: flex; flex-direction: column; gap: var(--space-4); }
.faq-quiz-cta-btn {
  align-self: flex-start;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-pill, 100px);
  border: none; background: var(--accent); color: var(--black);
  font-size: var(--text-sm); font-weight: var(--fw-bold); cursor: var(--cur-hand, pointer);
  transition: background var(--duration-ui, .18s), color var(--duration-ui, .18s), transform var(--duration-ui, .18s);
}
.faq-quiz-cta-btn:hover { background: var(--charcoal); color: var(--cream); transform: scale(1.03); }
/* Quiz item — CTA pleine largeur, 2 colonnes */
.faq-item--quiz {
  grid-column: 1 / -1;
  background: rgba(236, 123, 28, 0.06);
  border-color: rgba(236, 123, 28, 0.35);
  border-left: 4px solid var(--accent);
}
.faq-item--quiz:hover {
  background: rgba(236, 123, 28, 0.10);
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}
.faq-item--quiz > summary {
  color: var(--accent-text);
  font-weight: var(--fw-bold);
  font-size: var(--text-base);
  padding: 1.3rem var(--space-6);
}
.faq-item--quiz summary::after {
  content: "→";
  font-size: var(--text-lg);
  font-weight: var(--fw-semi);
  transform: none !important;
}
.faq-item--quiz[open] > summary::after {
  content: "↓";
}
/* Contenu interne en rangée sur la largeur disponible */
.faq-item--quiz .faq-quiz-cta {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  padding: 1.2rem var(--space-6) 1.4rem;
}
.faq-item--quiz .faq-quiz-cta p {
  flex: 1;
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}
.faq-item--quiz .faq-quiz-cta-btn {
  flex-shrink: 0;
  padding: .65rem var(--space-6);
  font-size: var(--text-sm);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .faq-item--quiz .faq-quiz-cta { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .faq-item--quiz .faq-quiz-cta-btn { white-space: normal; }
}

.ef-empty {
  padding: var(--space-8) 0; text-align: center;
  color: var(--gray); font-size: var(--text-sm);
  font-style: italic; letter-spacing: var(--tracking-wide, .04em);
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE 4 — FAQ Conversatif
   ═══════════════════════════════════════════════════════════════ */
/* ── FAQ FAB — bouton rond fixe bas droite ── */
.faq-fab {
  position: fixed;
  bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  right: max(28px, env(safe-area-inset-right, 0px));
  z-index: var(--z-fab);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--black);
  cursor: var(--cur-hand, pointer);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(236, 123, 28, 0.40), 0 2px 6px rgba(24, 20, 18, 0.14);
  transition: background var(--duration-ui, .18s) var(--ease-smooth),
              transform  var(--duration-ui, .18s) cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow var(--duration-ui, .18s) var(--ease-smooth);
  /* Entrée depuis le bas, légèrement décalée après le chargement */
  animation: fab-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.6s; /* audit v7 : perceptible à 1,2 s sur réseau lent */
}
.faq-fab:hover {
  background: var(--charcoal);
  color: var(--cream);
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(24, 20, 18, 0.22), 0 2px 6px rgba(24, 20, 18, 0.10);
}
.faq-fab:focus-visible {
  outline: 2px solid var(--black); /* 15,8:1 sur creme, 6:1 sur le bouton orange (audit v10 H4) */
  outline-offset: 3px;
}
@keyframes fab-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.82); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .faq-fab { animation: none; }
}
@media (max-width: 767px) {
  .faq-fab { bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px)); right: max(20px, env(safe-area-inset-right, 0px)); width: 48px; height: 48px; }
}

.faq-backdrop {
  display: none; position: fixed; inset: 0;
  background: var(--overlay-dark-sm, rgba(24,20,18,.18));
  z-index: var(--z-faq-backdrop); opacity: 0;
  transition: opacity var(--duration-medium, .35s) ease;
}
.faq-backdrop.visible { display: block; }
.faq-backdrop.active  { opacity: 1; }

.faq-panel {
  position: fixed; bottom: max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)); right: max(1.5rem, env(safe-area-inset-right, 0px));
  width: min(380px, calc(100vw - 2rem));
  max-height: 72vh;
  max-height: min(72dvh, calc(100dvh - 88px));
  background: var(--color-surface, var(--cream));
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-drawer, -2px 0 40px rgba(24,20,18,.18));
  z-index: var(--z-faq);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--duration-medium, .35s) var(--ease-spring, cubic-bezier(.16,1,.3,1)),
              transform var(--duration-medium, .35s) var(--ease-spring, cubic-bezier(.16,1,.3,1));
  pointer-events: none;
}
.faq-panel.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* hidden ne doit jamais être annulé par display:flex (a11y : panel hors arbre quand fermé) */
.faq-panel[hidden] { display: none; }
/* FAB masqué quand le panel est ouvert (chevauchement à 375px) */
/* ── Hint FAB premiere visite (audit v9 M29) ── */
.faq-fab-hint {
  position: fixed;
  bottom: max(36px, calc(env(safe-area-inset-bottom, 0px) + 24px));
  right: max(90px, calc(env(safe-area-inset-right, 0px) + 90px));
  z-index: var(--z-fab);
  display: none;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  padding: 7px 13px;
  border-radius: var(--radius-pill, 100px);
  box-shadow: 0 3px 12px rgba(24, 20, 18, 0.25);
  pointer-events: none;
  animation: fab-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 1.1s;
}
html.show-faq-hint .faq-fab-hint { display: block; }
body[data-page="faq"] .faq-fab-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .faq-fab-hint { animation: none; } }

body:has(.faq-panel.active) .faq-fab { opacity: 0; visibility: hidden; pointer-events: none; }
/* /faq/ : la page EST la FAQ, le FAB est redondant */
body[data-page="faq"] .faq-fab { display: none; }

.faq-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle, var(--light-gray));
  flex-shrink: 0;
}
.faq-title-label {
  font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--black);
}
.faq-close-btn {
  width: 44px; height: 44px; border-radius: 50%; /* cible 44px visuelle (audit v10 H5) */
  border: none; background: var(--warm-white);
  color: var(--gray); font-size: var(--text-sm); cursor: var(--cur-hand, pointer);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration-ui, .18s), color var(--duration-ui, .18s);
  line-height: 1; flex-shrink: 0;  position: relative; /* ancre du ::after d'extension tactile (audit v8 M4) */
}
.faq-close-btn:hover { background: var(--paper); color: var(--black); }
/* Zones tactiles étendues à ~48px sur les fermetures de panneaux (audit v8 M4) */
.qp-close::after, .rec-close::after, .faq-close-btn::after,
.faq-send::after, .faq-quiz-btn::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: var(--radius-circle);
}
.px-target { display: inline-block; vertical-align: -0.12em; margin-right: .35em; } /* cible pixel-art, remplace l'emoji (decision v10) */
.faq-quiz-btn .px-target, .fqb-icon .px-target { margin-right: 0; vertical-align: middle; }

.faq-quiz-banner {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 var(--space-4) .6rem;
  padding: .65rem .85rem;
  background: var(--warm-white);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-md, 6px);
  flex-shrink: 0;
}
.fqb-icon { font-size: var(--text-xl); flex-shrink: 0; }
.fqb-text { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.fqb-text strong { font-size: var(--text-2xs); color: var(--black); }
.fqb-text span { font-size: var(--text-xs); color: var(--gray); }
.fqb-btn {
  flex-shrink: 0; padding: .35rem .7rem;
  border-radius: var(--radius-pill, 100px);
  border: none; background: var(--accent); color: var(--black);
  font-size: var(--text-xs); font-weight: var(--fw-bold); cursor: var(--cur-hand, pointer); white-space: nowrap;
  transition: background var(--duration-ui, .18s), color var(--duration-ui, .18s), transform var(--duration-ui, .18s);
}
.fqb-btn:hover { background: var(--charcoal); color: var(--cream); transform: scale(1.04); }

.faq-quiz-btn {
  width: 32px; height: 32px; border-radius: 50%;
  position: relative; /* ancre zone tactile etendue (audit v9 H9) */
  border: none; background: var(--warm-white);
  font-size: var(--text-sm); cursor: var(--cur-hand, pointer);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration-ui, .18s), transform var(--duration-ui, .18s);
  line-height: 1; flex-shrink: 0;
}
.faq-quiz-btn:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; border-radius: 50%; }
.faq-quiz-btn:hover { background: var(--paper); transform: scale(1.1); }

.faq-messages {
  flex: 1; overflow-y: auto; padding: .9rem var(--space-4);
  display: flex; flex-direction: column; gap: .65rem;
  scroll-behavior: smooth;
}
.faq-msg {
  max-width: 85%; padding: .55rem .85rem;
  border-radius: var(--radius-md, 6px); font-size: var(--text-sm); line-height: 1.6;
}
.faq-msg--bot {
  background: var(--warm-white); color: var(--charcoal);
  border-radius: var(--radius-md, 6px) var(--radius-md, 6px) var(--radius-md, 6px) 2px;
  align-self: flex-start;
}
.faq-msg--user {
  background: var(--accent); color: var(--black);
  border-radius: var(--radius-md, 6px) var(--radius-md, 6px) 2px var(--radius-md, 6px);
  align-self: flex-end;
}

.faq-suggestions {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border-subtle, var(--light-gray));
  flex-shrink: 0;
}
.faq-sug {
  min-height: 44px; /* cible tactile 44px (audit v13, etait 36px v10 L22) */
  padding: .4rem .7rem; border-radius: var(--radius-pill, 100px);
  border: 1.5px solid var(--border);
  background: transparent; color: var(--charcoal);
  font-size: var(--text-xs); font-weight: var(--fw-semi); cursor: var(--cur-hand, pointer);
  transition: background var(--duration-ui, .18s), border-color var(--duration-ui, .18s);
}
.faq-sug:hover { background: var(--paper); border-color: var(--charcoal); }
.faq-sug:active { background: var(--paper); }

.faq-form {
  display: flex; gap: var(--space-2); padding: .7rem var(--space-4);
  border-top: 1px solid var(--color-border-subtle, var(--light-gray));
  flex-shrink: 0;
}
.faq-input {
  flex: 1; padding: var(--space-2) .8rem; border-radius: var(--radius-pill, 100px);
  border: 1.5px solid var(--border);
  background: var(--warm-white); color: var(--black);
  font-size: var(--text-base); /* >=16px : pas de zoom auto iOS */
  transition: border-color var(--duration-ui, .18s);
}
.faq-send {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; /* audit v10 L22 */
  position: relative; /* ancre zone tactile etendue (audit v9 H9) */
  border: none; background: var(--accent); color: var(--black);
  font-size: var(--text-base); cursor: var(--cur-hand, pointer); display: flex;
  align-items: center; justify-content: center;
  transition: background var(--duration-ui, .18s), color var(--duration-ui, .18s), transform var(--duration-ui, .18s);
}
.faq-send:hover { background: var(--charcoal); color: var(--cream); transform: scale(1.06); }

/* ── Prose voyages (contexte professionnel sous la carte) ── */
/* Chips pays : boutons (localisent l'épingle sur la carte) */
button.country-chip {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: var(--cur-hand, pointer);
  min-height: 44px; /* cible tactile 44px (audit v13, etait 32px) */
}
button.country-chip:hover { border-color: var(--charcoal); background: var(--warm-white); }
button.country-chip:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }

/* Icônes pixel-art inline (remplace les style= répétés) */
.icon-retro {
  display: inline-block;
  vertical-align: middle;
  image-rendering: pixelated;
  flex-shrink: 0;
  margin-right: 5px;
}
.section-header > img { image-rendering: pixelated; flex-shrink: 0; margin-right: var(--space-2); }
.c-icon img { image-rendering: pixelated; }
.calendly-inline-widget { min-width: 0; position: relative; width: 100%; height: 700px; /* min-width:0 : zéro scroll horizontal <=375px ; height = réservation anti-CLS (audit v7 H1) */ }
.cal-fallback { margin-top: var(--space-3-5); padding: var(--space-3-5) var(--space-4); font-size: var(--text-sm); line-height: 1.6; color: var(--charcoal); background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); } /* fallback si Calendly bloque (audit v13) */
.cal-fallback a { color: var(--accent-text); font-weight: var(--fw-semi); }
.faq-grid { margin: 0 auto; }
.faq-header-actions { display: flex; gap: .6rem; align-items: center; }
#voyages.section { background: var(--paper); max-width: 100%; padding: var(--space-18) 0; }
.voyages-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-10); }
@media (max-width: 820px) { .voyages-inner { padding: 0 var(--space-5); } }

.voyages-intro {
  /* ex sr-only rendu visible : contenu indexable (audit v10 M9) */
  max-width: 65ch;
  margin: 0 0 var(--space-6-5);
  color: var(--charcoal);
  font-size: var(--text-base);
  line-height: 1.7;
}
.voyages-prose {
  max-width: 65ch;
  margin: var(--space-12) auto 0;
  padding: 0 var(--space-10);
}
@media (max-width: 820px) { .voyages-prose { padding: 0 var(--space-5); } } /* colonne lisible a 375px (audit v10 M10) */
.voyages-prose p {
  color: var(--charcoal);
  font-size: var(--text-base);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

/* ── Coordonnées footer ── */
.footer-coords { font-size: var(--text-xs); color: var(--color-footer-text); flex: 0 1 auto; text-align: right; line-height: 2.1; } /* bloc contact aligné à droite (v8.3) */
.footer-coords a {
  color: var(--color-footer-text); text-decoration: none;
  /* Zone tactile >= 24px (WCAG 2.5.8) sans casser la ligne */
  display: inline-block; padding: 5px 2px; margin: -5px -2px;
}
.footer-coords a:hover { color: #FAF7F0; text-decoration: underline; }

/* ── CTA Contact (conversion) ── */
.contact-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3-5);
  margin-top: 30px;
}
.cta-primary {
  /* blocs layout + peinture fusionnes (audit v10 M13) ; radius aligne sur .btn (L17) */
  display: inline-block;
  padding: 15px var(--space-7);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: background-color .18s ease-out, color .18s ease-out, transform .18s ease-out;
  background: var(--accent);
  color: var(--black);
}
.cta-primary:hover { background: var(--accent-bright); transform: translateY(-1px); }
.contact-promise {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--charcoal);
}
@media (prefers-reduced-motion: reduce) {
  .cta-primary:hover { transform: none; }
}

/* ── Quiz inline (page FAQ) ── */
.quiz-inline-card {
  position: relative;
  max-width: 680px;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6-5) 30px 30px;
  overflow: hidden;
}
.quiz-inline-card .qp-rainbow { position: absolute; top: 0; left: 0; right: 0; }
.quiz-inline-card .qp-sub { margin: var(--space-2) 0 var(--space-3-5); }

/* ── Calendly inline ── */
.contact-calendly .cal-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: var(--space-2-5);
}
.calendly-inline-widget {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #FFFFFF; /* blanc pur volontaire : fond de l'iframe Calendly, hors palette (decision v10) */
}
.calendly-inline-widget:not(:has(iframe))::before {
  /* état d'attente visible dans la hauteur déjà réservée (audit v8 L27) */
  content: attr(data-loading);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-size: var(--text-md);
}
@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; }
}

/* ── Animations infinies : prefers-reduced-motion est le mécanisme d'arrêt
   retenu (décision Marius, audit v7 M4) ; pas de bouton pause en page.
   Les boucles du héro sont de plus suspendues hors viewport
   (html.hero-offscreen, posée par main.js). */

/* ===== CURSEURS CLASSIC MAC OS ===============================
   Flèche System 7 partout, main gantée sur l'interactif. Les
   éléments qui recevaient le pointer NATIF du navigateur (a, button,
   summary, select, label) sont couverts explicitement ; les
   cursor: pointer déclarés plus haut passent par var(--cur-hand). */
html, body { cursor: var(--cur-arrow, default); }
a, button, summary, select, label,
[role="button"], .js-calendly {
  cursor: var(--cur-hand, pointer);
}

/* ── Audit v7 : utilitaires (inline styles supprimés, CTA mini, pauses hors écran) ── */
.exp-badge img, .benev-icon img { display: block; image-rendering: pixelated; }
.exp-badge img { width: 60px; height: 60px; }
.benev-icon img { width: 56px; height: 56px; }
.hero-name .hero-accent-dot { color: var(--accent); display: inline; } /* bat h1.hero-name span { display:block } (fix v8.1) */
.galerie-wide { max-width: 100%; padding-left: max(40px, calc(50vw - 550px)); padding-right: max(40px, calc(50vw - 550px)); }
.footer-privacy { font-size: var(--text-xs); color: var(--color-footer-text); } /* 5,7:1 (audit v13.2) */
.footer-privacy a { color: var(--color-footer-text); text-decoration: underline; text-underline-offset: 2px; }
.footer-privacy a:hover { color: #FAF7F0; }
.cta-mini { text-align: center; padding: var(--space-16) var(--space-10) var(--space-18); border-top: 1px dashed var(--border); }
.cta-mini h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 32px);
  letter-spacing: -0.5px;
  margin: 0 0 var(--space-3-5);
  color: var(--black);
}
/* Filet arc-en-ciel signature sous le titre (audit v9.1) */
.cta-mini h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: var(--space-3-5) auto 0;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--r-green) 16.6%, var(--r-yellow) 16.6% 33.2%,
    var(--r-orange) 33.2% 49.8%, var(--r-red) 49.8% 66.4%,
    var(--r-purple) 66.4% 83%, var(--r-blue) 83%);
}
.cta-mini-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--charcoal);
  margin: 0 0 var(--space-7);
}
.cta-mini-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--space-3); }
.cta-mini .btn { margin: 0; min-height: 48px; } /* hauteurs identiques, alignement par flex */
.cta-mini-cv {
  display: inline-block;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: var(--transition-color);
}
.cta-mini-cv:hover { color: var(--accent-text); text-decoration-color: var(--accent-text); }
@media (max-width: 480px) {
  .cta-mini { padding: var(--space-12) var(--space-5) 56px; }
  .cta-mini-actions .btn { flex: 1 1 100%; justify-content: center; }
  .cta-mini-sub { flex-wrap: wrap; }
}
html.hero-offscreen .hero-photo-wrap,
html.hero-offscreen .hero-photo-wrap::before,
html.hero-offscreen .hero-photo-frame,
html.hero-offscreen .hero-ticker,
html.hero-offscreen .hero-ticker svg { animation-play-state: paused; }

/* ── Formulaire contact (Netlify Forms, audit v9) ── */
.contact-form-section { max-width: 720px; }
.cf-sub { color: var(--gray); font-size: var(--text-md); margin: -18px 0 var(--space-6-5); }
.cf-form { display: flex; flex-direction: column; gap: var(--space-4-5); }
.cf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-4-5); }
.cf-field { display: flex; flex-direction: column; gap: var(--space-1-5); }
.cf-field label { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--charcoal); }
.cf-field input, .cf-field textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--black);
  background: var(--color-surface-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-form, 8px);
  padding: var(--space-2-5) var(--space-3);
  transition: border-color var(--duration-base) var(--ease-smooth);
}
.cf-field textarea { resize: vertical; min-height: 120px; }
.cf-field input:hover, .cf-field textarea:hover { border-color: var(--charcoal); }
.cf-field input:focus-visible, .cf-field textarea:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 1px;
  border-color: var(--charcoal);
}
.cf-field input[aria-invalid="true"], .cf-field textarea[aria-invalid="true"] { border-color: var(--p-error); }
.cf-err { color: var(--color-error-text); font-size: var(--text-sm); margin: 0; }
.cf-submit { align-self: flex-start; }
.cf-submit[disabled] { opacity: 0.6; cursor: progress; }
.cf-status { font-size: var(--text-md); margin: 0; padding: var(--space-3) var(--space-3-5); border-radius: var(--radius-md); }
.cf-status--ok { background: rgba(45, 173, 111, 0.12); border: 1px solid var(--p-success); color: var(--charcoal); }
.cf-status--ko { background: rgba(217, 48, 37, 0.08); border: 1px solid var(--p-error); color: var(--charcoal); }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* (icones CTA retirees — texte seul, audit v12.1) */

/* Indicateur de saisie du FAQ (sorti du bloc dark, audit v12) */
.faq-msg--typing { color: var(--gray); letter-spacing: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .faq-msg--typing { animation: faqTyping 1.1s ease-in-out infinite; }
}
@keyframes faqTyping { 50% { opacity: 0.4; } }

/* Resultat du quiz : CTA de contact (audit v12 B) */
.qr-cta { display: flex; flex-wrap: wrap; gap: var(--space-2-5); justify-content: center; margin: var(--space-4-5) 0 var(--space-1); }

/* Anneaux de focus formes pour pilules/cartes (audit v12) */
.faq-sug:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; border-radius: var(--radius-pill, 100px); }
.rec-btn:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 3px; border-radius: var(--radius-pill, 100px); }
.pub-card:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ── Correctifs audit v14 ────────────────────── */
.fqb-btn, .faq-quiz-cta-btn { min-height: 44px; }
.pub-orcid { margin-top: var(--space-4); font-size: var(--text-sm); }
.pub-orcid a { color: var(--accent-text); font-weight: var(--fw-semi); text-decoration: none; }
.pub-orcid a:hover { text-decoration: underline; }
.pub-orcid a:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }

/* ================================================================
   GARDE FINALE prefers-reduced-motion.
   Doit rester en FIN de fichier : des regles d'animation declarees
   plus haut ont la meme specificite que les blocs reduce
   intermediaires et gagnaient a la cascade. Ne rien declarer apres.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .case-more > .case-step,
  .qp-result,
  .qr-chips .qr-chip,
  .section-header.anim-in .section-num,
  .hero-text,
  .hero-photo-wrap,
  .hero-photo-wrap::before,
  .hero-photo-frame,
  .hero-eyebrow,
  .hero-tagline,
  .word-inner,
  .hero-pills .pill,
  .faq-fab,
  .rainbow-bar,
  .parallax-scroll-mouse::after,
  .faq-fab-hint {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .faq-messages { scroll-behavior: auto; }
}