/* ==========================================================
     TOKENS
     ========================================================== */
  :root {
    /* Couleurs — dérivées du logo, inversées en polarité claire */
    --bg:          #FBF5E2;
    --bg-2:        #F5EAC8;
    --bg-soft:     #FFFBEE;
    --bg-card:     #FFFDF5;

    --ink:         #02314B;
    --ink-mid:     #3B5874;
    --ink-soft:    #7A8FA8;
    --ink-faint:   #B4C1D1;

    --orange:      #EF7800;
    --orange-dk:   #D66500;
    --rust:        #E84E10;
    --amber:       #FFCE74;
    --amber-soft:  #FFE09D;

    --line:        rgba(2, 49, 75, 0.09);
    --line-2:      rgba(2, 49, 75, 0.16);

    /* Tokens nav + shadow (qui basculent en dark) */
    --nav-bg:      rgba(255, 251, 238, 0.78);
    --nav-border:  rgba(2, 49, 75, 0.08);
    --shadow-nav:  0 8px 28px -12px rgba(2, 49, 75, 0.12);
    --shadow-nav-compact: 0 14px 34px -16px rgba(2, 49, 75, 0.22);

    /* Typo — Onest (display + body), Google Fonts. Ronde, moderne, chaleureuse. */
    --font-display: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-sans:    'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Fluid type scale */
    --fs-xs:  clamp(.78rem, .76rem + .1vw, .84rem);
    --fs-sm:  clamp(.86rem, .84rem + .1vw, .92rem);
    --fs-md:  clamp(1rem, .96rem + .2vw, 1.1rem);
    --fs-lg:  clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
    --fs-xl:  clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
    --fs-2xl: clamp(2.2rem, 1.8rem + 2vw, 3.4rem);
    --fs-3xl: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
    --fs-4xl: clamp(4.5rem, 3rem + 7.5vw, 10rem);

    /* Rayons */
    --r-sm: 10px;
    --r-md: 18px;
    --r-lg: 28px;
    --r-xl: 42px;

    /* Shadows — subtiles, chaudes */
    --shadow-sm: 0 2px 8px -2px rgba(2,49,75,0.06);
    --shadow-md: 0 20px 40px -20px rgba(2,49,75,0.18), 0 4px 12px -4px rgba(2,49,75,0.08);
    --shadow-lg: 0 40px 80px -30px rgba(2,49,75,0.22), 0 10px 20px -10px rgba(2,49,75,0.10);
  }

  /* ==========================================================
     DARK THEME — scène "après le coucher", palette deep dusk
     ========================================================== */
  [data-theme="dark"] {
    --bg:          #02152A;
    --bg-2:        #082E48;
    --bg-soft:     #041E34;
    --bg-card:     #0D3558;

    --ink:         #FBF5E2;
    --ink-mid:     #C5CFDD;
    --ink-soft:    #8296AD;
    --ink-faint:   #45587A;

    --orange:      #FF9838;
    --orange-dk:   #EF7800;
    --rust:        #F6703A;
    --amber:       #FFCE74;
    --amber-soft:  #FFE09D;

    --line:        rgba(251, 245, 226, 0.08);
    --line-2:      rgba(251, 245, 226, 0.20);

    --nav-bg:      rgba(6, 28, 48, 0.72);
    --nav-border:  rgba(251, 245, 226, 0.10);
    --shadow-nav:  0 8px 28px -12px rgba(0, 0, 0, 0.55);
    --shadow-nav-compact: 0 18px 40px -18px rgba(0, 0, 0, 0.70);

    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 20px 40px -20px rgba(0, 0, 0, 0.60), 0 4px 12px -4px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, 0.75), 0 10px 20px -10px rgba(0, 0, 0, 0.40);
  }

  /* Transitions douces pour le switch de thème — limitées aux couleurs */
  body, .nav, .service, .project, .section--alt, .kicker, .fiche,
  .stack span, .service__tags span, .chip, .btn, .project__top span:last-child,
  .contact__copy, .foot, .hairline, .strip {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
  }

  /* ==========================================================
     RESET
     ========================================================== */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
  ::selection { background: var(--ink); color: var(--bg); }

  /* ==========================================================
     LAYOUT
     ========================================================== */
  .wrap {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  }

  /* ==========================================================
     DARK ATMOSPHERE — overrides scéniques (« après le coucher »)
     Les étoiles, le grain, les ambiances de nuit vivent ici.
     ========================================================== */

  /* Grain atmosphérique — posé au-dessus, presque invisible */
  [data-theme="dark"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* Champ d'étoiles — uniquement dans le hero, uniquement en dark */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity .6s ease;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image:
      radial-gradient(1.2px 1.2px at 7% 14%,  #FFFFFF 50%, transparent 100%),
      radial-gradient(1px   1px   at 13% 32%, rgba(255,229,170,.85) 50%, transparent 100%),
      radial-gradient(1px   1px   at 19% 8%,  rgba(255,255,255,.75) 50%, transparent 100%),
      radial-gradient(1.6px 1.6px at 24% 22%, rgba(255,225,160,.9) 50%, transparent 100%),
      radial-gradient(1px   1px   at 32% 48%, rgba(255,255,255,.55) 50%, transparent 100%),
      radial-gradient(1.2px 1.2px at 38% 12%, rgba(255,240,200,.8) 50%, transparent 100%),
      radial-gradient(1px   1px   at 44% 38%, rgba(255,255,255,.65) 50%, transparent 100%),
      radial-gradient(1.4px 1.4px at 51% 6%,  rgba(255,220,150,.9) 50%, transparent 100%),
      radial-gradient(1px   1px   at 58% 26%, rgba(255,245,210,.6) 50%, transparent 100%),
      radial-gradient(1px   1px   at 63% 52%, rgba(255,255,255,.45) 50%, transparent 100%),
      radial-gradient(1.6px 1.6px at 71% 16%, #FFFFFF 50%, transparent 100%),
      radial-gradient(1px   1px   at 77% 40%, rgba(255,235,180,.7) 50%, transparent 100%),
      radial-gradient(1.2px 1.2px at 83% 9%,  rgba(255,255,255,.8) 50%, transparent 100%),
      radial-gradient(1px   1px   at 88% 30%, rgba(255,220,160,.6) 50%, transparent 100%),
      radial-gradient(2px   2px   at 92% 15%, rgba(255,225,155,.95) 50%, transparent 100%),
      radial-gradient(1px   1px   at 96% 44%, rgba(255,255,255,.5) 50%, transparent 100%),
      radial-gradient(1px   1px   at 4% 55%,  rgba(255,240,200,.45) 50%, transparent 100%),
      radial-gradient(1.2px 1.2px at 28% 62%, rgba(255,255,255,.4) 50%, transparent 100%),
      radial-gradient(1px   1px   at 55% 68%, rgba(255,225,160,.35) 50%, transparent 100%),
      radial-gradient(1px   1px   at 82% 58%, rgba(255,255,255,.3) 50%, transparent 100%);
  }
  [data-theme="dark"] .hero::before { opacity: 1; }

  /* Une étoile plus grosse qui pulse — anchor de nuit */
  [data-theme="dark"] .hero::after {
    content: "";
    position: absolute;
    top: 13%; right: 18%;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #FFE5A0;
    box-shadow:
      0 0 6px 2px rgba(255,229,160,0.5),
      0 0 14px 4px rgba(255,200,100,0.25);
    z-index: 0;
    pointer-events: none;
    animation: starPulse 3.4s ease-in-out infinite;
  }
  @keyframes starPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.7; }
  }

  /* Soleil du hero — en dark il vire au brasier */
  [data-theme="dark"] .hero__sun {
    background: radial-gradient(circle,
      rgba(255, 245, 200, 0.55) 0%,
      rgba(255, 165, 60, 0.50) 20%,
      rgba(232, 78, 16, 0.32) 45%,
      rgba(70, 20, 60, 0.15) 65%,
      transparent 78%);
    opacity: 0.85;
    filter: blur(14px);
  }
  /* Halo de ciel du hero — plus deep */
  [data-theme="dark"] .hero__sky {
    background: radial-gradient(circle at 50% 70%,
      rgba(255, 170, 80, 0.22) 0%,
      rgba(232, 78, 16, 0.10) 25%,
      rgba(60, 20, 80, 0.08) 50%,
      transparent 70%);
  }

  /* Nav — en dark elle se drape sur le fond nuit */
  [data-theme="dark"] .nav {
    border-color: rgba(251, 245, 226, 0.10);
  }
  [data-theme="dark"] .nav.is-compact {
    box-shadow:
      var(--shadow-nav-compact),
      inset 0 0 0 1px rgba(255, 152, 56, 0.08);
  }

  /* Boutons primaires — deviennent des lampes allumées */
  [data-theme="dark"] .btn--primary {
    background: var(--orange);
    color: #0A1220;
    box-shadow:
      0 8px 20px -6px rgba(255, 152, 56, 0.45),
      0 0 0 1px rgba(255, 152, 56, 0.10);
  }
  [data-theme="dark"] .btn--primary:hover {
    background: var(--amber);
    box-shadow:
      0 14px 28px -8px rgba(255, 206, 116, 0.60),
      0 0 0 1px rgba(255, 206, 116, 0.20);
  }
  /* Bouton "ghost" — trait plus visible sur fond nuit */
  [data-theme="dark"] .btn--ghost {
    border-color: rgba(251, 245, 226, 0.25);
  }
  [data-theme="dark"] .btn--ghost:hover {
    background: var(--orange);
    color: #0A1220;
    border-color: var(--orange);
  }

  /* Toggle thème — l'icône soleil brille un peu */
  [data-theme="dark"] .theme-toggle .ico-sun {
    color: var(--amber);
    filter: drop-shadow(0 0 6px rgba(255, 206, 116, 0.5));
  }
  [data-theme="dark"] .theme-toggle:hover {
    border-color: var(--orange);
    background: rgba(255, 152, 56, 0.08);
  }

  /* Kicker de dispo — petit halo nuit */
  [data-theme="dark"] .kicker {
    background: rgba(13, 53, 88, 0.55);
    border-color: rgba(251, 245, 226, 0.15);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  }

  /* Strip stats — ambiance plus sombre */
  [data-theme="dark"] .strip {
    background: linear-gradient(180deg, rgba(13, 53, 88, 0) 0%, rgba(13, 53, 88, 0.35) 100%);
  }

  /* Cards services — hover glow orange */
  [data-theme="dark"] .service {
    background: var(--bg-soft);
    border-color: rgba(251, 245, 226, 0.08);
  }
  [data-theme="dark"] .service:hover {
    background: var(--bg-card);
    border-color: rgba(255, 152, 56, 0.22);
    box-shadow:
      0 24px 48px -24px rgba(0, 0, 0, 0.7),
      0 0 0 1px rgba(255, 152, 56, 0.10);
  }
  [data-theme="dark"] .service__ico {
    background: rgba(255, 152, 56, 0.10);
    color: var(--amber);
  }
  [data-theme="dark"] .service:hover .service__ico {
    background: var(--orange);
    color: #0A1220;
    box-shadow: 0 0 16px rgba(255, 152, 56, 0.40);
  }
  [data-theme="dark"] .service__tags span {
    background: rgba(251, 245, 226, 0.06);
    color: var(--ink-mid);
  }

  /* Réalisations — fond card + glow hover */
  [data-theme="dark"] .project {
    background: var(--bg-soft);
    border-color: rgba(251, 245, 226, 0.08);
  }
  [data-theme="dark"] .project:hover {
    border-color: rgba(255, 152, 56, 0.22);
    box-shadow:
      0 30px 60px -28px rgba(0, 0, 0, 0.75),
      0 0 0 1px rgba(255, 152, 56, 0.10);
  }
  [data-theme="dark"] .project__top span:last-child {
    background: rgba(255, 152, 56, 0.10);
    color: var(--amber);
  }

  /* Project thumbs — 4 scènes de nuit sur mesure */
  [data-theme="dark"] .project--1 .project__bg {
    background:
      radial-gradient(ellipse at 50% 15%, rgba(255, 200, 100, 0.50) 0%, transparent 45%),
      radial-gradient(circle at 80% 30%, rgba(255, 120, 40, 0.35) 0%, transparent 40%),
      linear-gradient(180deg, #2E0F1E 0%, #5A1A15 55%, #7A2B0A 100%);
  }
  [data-theme="dark"] .project--2 .project__bg {
    background:
      radial-gradient(circle at 25% 70%, rgba(255, 152, 56, 0.18) 0%, transparent 45%),
      radial-gradient(circle at 75% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
      linear-gradient(135deg, #020A1A 0%, #0A1E38 55%, #142C4A 100%);
  }
  [data-theme="dark"] .project--3 .project__bg {
    background:
      radial-gradient(ellipse at 50% 120%, rgba(255, 152, 56, 0.55) 0%, transparent 50%),
      radial-gradient(circle at 30% 30%, rgba(255, 220, 150, 0.10) 0%, transparent 40%),
      linear-gradient(180deg, #180820 0%, #3E1128 45%, #6A2415 100%);
  }
  [data-theme="dark"] .project--4 .project__bg {
    background:
      radial-gradient(circle at 80% 22%, rgba(255, 220, 150, 0.35) 0%, transparent 40%),
      radial-gradient(circle at 20% 80%, rgba(255, 152, 56, 0.12) 0%, transparent 45%),
      linear-gradient(145deg, #050F24 0%, #0F2344 70%);
  }
  /* Glyphes des projets — moins overlay en dark (plus lisible sur nuit) */
  [data-theme="dark"] .project__glyph {
    mix-blend-mode: normal;
    color: rgba(255, 229, 170, 0.82);
  }

  /* Section À propos — fond alt reste chaud mais deep */
  [data-theme="dark"] .section--alt {
    background: var(--bg-soft);
  }
  /* About media — bascule sur une scène nuit-braise */
  [data-theme="dark"] .about__media {
    background:
      radial-gradient(circle at 30% 18%, rgba(255, 230, 160, 0.30) 0%, transparent 45%),
      radial-gradient(circle at 75% 55%, rgba(255, 120, 40, 0.45) 0%, transparent 50%),
      radial-gradient(circle at 20% 90%, rgba(60, 20, 80, 0.35) 0%, transparent 55%),
      linear-gradient(180deg, #1A0A2E 0%, #4A1424 55%, #7A2810 100%);
  }
  [data-theme="dark"] .about__media::before { color: rgba(255, 229, 170, 0.95); }
  [data-theme="dark"] .about__media::after { color: rgba(2, 18, 30, 0.85); }

  /* Stack pills — plus de contraste en dark */
  [data-theme="dark"] .stack span {
    background: rgba(251, 245, 226, 0.04);
    border-color: rgba(251, 245, 226, 0.14);
  }
  [data-theme="dark"] .stack span:hover {
    background: var(--orange);
    color: #0A1220;
    border-color: var(--orange);
    box-shadow: 0 0 14px rgba(255, 152, 56, 0.35);
  }

  /* Contact — halo deep, email devient lampe */
  [data-theme="dark"] .contact::before {
    background: radial-gradient(circle at 50% 50%,
      rgba(255, 152, 56, 0.18) 0%,
      rgba(232, 78, 16, 0.08) 30%,
      rgba(60, 20, 80, 0.04) 50%,
      transparent 65%);
  }
  [data-theme="dark"] .contact__mail {
    background: var(--orange);
    color: #0A1220;
    box-shadow:
      0 16px 36px -10px rgba(255, 152, 56, 0.55),
      0 0 0 1px rgba(255, 152, 56, 0.20);
  }
  [data-theme="dark"] .contact__mail:hover {
    background: var(--amber);
    box-shadow:
      0 24px 48px -12px rgba(255, 206, 116, 0.70),
      0 0 0 1px rgba(255, 206, 116, 0.30);
  }
  [data-theme="dark"] .contact__copy {
    border-color: rgba(251, 245, 226, 0.18);
  }

  /* Foot — subtle */
  [data-theme="dark"] .foot { border-top-color: rgba(251, 245, 226, 0.08); }

  /* Sélection de texte — douce en nuit */
  [data-theme="dark"] ::selection {
    background: var(--orange);
    color: #0A1220;
  }

  /* ==========================================================
     NAV — flottante, arrondie, verre, animations scroll
     ========================================================== */
  .nav {
    position: fixed;
    top: 18px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 100;
    width: calc(100% - 2.5rem);
    max-width: 1200px;
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--nav-border);
    border-radius: 999px;
    box-shadow: var(--shadow-nav);
    padding: 10px 14px 10px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* entrée à l'arrivée */
    animation: navDrop .8s cubic-bezier(.34, 1.3, .64, 1) both;
    transform-origin: center top;
    transition:
      transform .45s cubic-bezier(.22, .61, .36, 1),
      opacity .45s,
      padding .35s cubic-bezier(.22, .61, .36, 1),
      max-width .45s cubic-bezier(.22, .61, .36, 1),
      box-shadow .35s,
      background-color .35s ease,
      border-color .35s ease;
  }
  .nav.is-compact {
    max-width: 860px;
    padding: 6px 8px 6px 16px;
    box-shadow: var(--shadow-nav-compact);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }
  .nav.is-hidden { transform: translateY(-120%); opacity: 0; }

  @keyframes navDrop {
    0%   { transform: translateY(-120%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

  /* Barre de progression du scroll — alignée sur la forme pill de la nav */
  .nav__progress {
    position: absolute;
    left: 28px; right: 28px;
    bottom: -7px;
    height: 3px;
    background: var(--line-2);
    border-radius: 999px;
    opacity: 0;
    transition: opacity .35s, left .45s cubic-bezier(.22, .61, .36, 1), right .45s cubic-bezier(.22, .61, .36, 1);
  }
  .nav.is-compact .nav__progress {
    left: 22px; right: 22px;
    opacity: 1;
  }
  .nav__progress-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      var(--rust) 0%,
      var(--orange) 45%,
      var(--amber) 100%);
    border-radius: 999px;
    transform-origin: left;
    transform: scaleX(var(--scroll-progress, 0));
    transition: transform .08s linear;
  }
  .nav__progress-dot {
    position: absolute;
    top: 50%;
    left: calc(var(--scroll-progress, 0) * 100%);
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 8px rgba(255, 206, 116, 0.65);
    transition: left .08s linear;
    pointer-events: none;
    z-index: 1;
  }
  .nav__progress-marker {
    position: absolute;
    top: 50%;
    left: var(--pos, 50%);
    transform: translate(-50%, -50%);
    width: 7px; height: 7px;
    border: 0;
    background: rgba(2, 49, 75, 0.28);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background .25s, transform .25s, box-shadow .25s;
    z-index: 2;
  }
  /* hit zone étendue pour toucher mobile */
  .nav__progress-marker::before {
    content: "";
    position: absolute;
    inset: -12px;
  }
  /* tooltip label au hover */
  .nav__progress-marker::after {
    content: attr(data-label);
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--bg-card);
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line-2);
  }
  .nav__progress-marker:hover {
    background: var(--orange);
    transform: translate(-50%, -50%) scale(1.45);
  }
  .nav__progress-marker:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .nav__progress-marker.is-active {
    background: var(--orange);
    box-shadow: 0 0 0 2px var(--bg), 0 0 10px rgba(239, 120, 0, 0.5);
  }

  /* Dark overrides progress bar */
  [data-theme="dark"] .nav__progress {
    background: rgba(251, 245, 226, 0.10);
  }
  [data-theme="dark"] .nav__progress-fill {
    box-shadow: 0 0 10px rgba(255, 152, 56, 0.55);
  }
  [data-theme="dark"] .nav__progress-dot {
    box-shadow: 0 0 14px rgba(255, 206, 116, 0.95);
  }
  [data-theme="dark"] .nav__progress-marker {
    background: rgba(251, 245, 226, 0.22);
  }
  [data-theme="dark"] .nav__progress-marker:hover,
  [data-theme="dark"] .nav__progress-marker.is-active {
    background: var(--orange);
    box-shadow: 0 0 0 2px var(--bg), 0 0 10px rgba(255, 152, 56, 0.75);
  }
  [data-theme="dark"] .nav__progress-marker::after {
    background: var(--bg-card);
    color: var(--ink);
    border-color: rgba(251, 245, 226, 0.15);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.02em;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
  }
  .nav.is-compact .brand { transform: scale(0.93); }
  .brand__mark {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ink);
    flex-shrink: 0;
    box-shadow: 0 4px 10px -4px rgba(2,49,75,0.3);
    transition: width .35s, height .35s;
  }
  .nav.is-compact .brand__mark { width: 26px; height: 26px; }
  .brand__mark img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }

  /* — Menu : chaque lien a sa propre pill au hover/active.
     Pas de container arrondi (évite le doublon avec la nav rounded) */
  .nav__links {
    display: flex;
    gap: 4px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .nav__links a {
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 999px;
    transition: color .2s ease, background-color .25s ease, box-shadow .25s ease;
    white-space: nowrap;
    position: relative;
  }
  .nav__links a:hover {
    background: rgba(2, 49, 75, 0.06);
  }
  .nav__links a.is-active {
    color: var(--orange);
    font-weight: 600;
    background: rgba(239, 120, 0, 0.09);
    box-shadow: inset 0 0 0 1px rgba(239, 120, 0, 0.26);
  }

  /* Dark mode — mêmes règles avec palette chaude */
  [data-theme="dark"] .nav__links a:hover {
    background: rgba(251, 245, 226, 0.07);
  }
  [data-theme="dark"] .nav__links a.is-active {
    color: var(--orange);
    background: rgba(255, 152, 56, 0.14);
    box-shadow:
      inset 0 0 0 1px rgba(255, 152, 56, 0.36),
      0 0 14px -2px rgba(255, 152, 56, 0.30);
  }

  /* En mode compact, le menu se resserre */
  .nav.is-compact .nav__links a {
    padding: 7px 12px;
    font-size: 13.5px;
  }

  /* — Groupe actions à droite (toggle + CTA) */
  .nav__actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* — Toggle dark mode */
  .theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--line-2);
    display: grid;
    place-items: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: background-color .25s, border-color .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
  }
  .theme-toggle:hover {
    border-color: var(--orange);
    transform: rotate(-18deg);
  }
  .theme-toggle:active { transform: rotate(-18deg) scale(.92); }
  .theme-toggle svg {
    position: absolute;
    width: 18px; height: 18px;
    color: var(--ink);
    transition: opacity .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1);
  }
  .theme-toggle .ico-moon { opacity: 1; transform: rotate(0) scale(1); }
  .theme-toggle .ico-sun  { opacity: 0; transform: rotate(-120deg) scale(0.5); }
  [data-theme="dark"] .theme-toggle .ico-moon { opacity: 0; transform: rotate(120deg) scale(0.5); }
  [data-theme="dark"] .theme-toggle .ico-sun  { opacity: 1; transform: rotate(0) scale(1); }

  @media (prefers-reduced-motion: reduce) {
    .nav { animation: none; }
    .theme-toggle:hover { transform: none; }
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -0.005em;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, background .25s;
    white-space: nowrap;
  }
  .btn--primary {
    background: var(--ink);
    color: var(--bg);
    box-shadow: 0 4px 12px -4px rgba(2, 49, 75, 0.35);
  }
  .btn--primary:hover {
    background: var(--orange);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(239, 120, 0, 0.5);
  }
  .btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-2);
  }
  .btn--ghost:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .btn--big {
    padding: 16px 28px;
    font-size: 16px;
  }
  .btn__arrow {
    display: inline-block;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
  }
  .btn:hover .btn__arrow { transform: translateX(4px); }

  @media (max-width: 820px) {
    .nav__links { display: none; }
    .nav { padding: 8px 8px 8px 18px; }
  }

  /* ==========================================================
     HERO
     ========================================================== */
  .hero {
    position: relative;
    padding-top: clamp(8rem, 16vh, 11rem);
    padding-bottom: clamp(4rem, 10vh, 7rem);
    overflow: hidden;
    text-align: center;
    background: var(--bg);
  }
  /* Le couchant : grand gradient radial en haut */
  .hero__sky {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 140vw;
    max-width: 1800px;
    aspect-ratio: 1;
    background:
      radial-gradient(circle at 50% 60%,
        rgba(255, 206, 116, 0.45) 0%,
        rgba(255, 206, 116, 0.22) 22%,
        rgba(239, 120, 0, 0.10) 40%,
        transparent 60%);
    pointer-events: none;
    z-index: 0;
  }
  /* Petit "soleil" orange au loin */
  .hero__sun {
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(340px, 52vw, 620px);
    aspect-ratio: 1;
    background: radial-gradient(circle,
      rgba(255, 250, 210, 0.9) 0%,
      rgba(255, 206, 116, 0.55) 35%,
      rgba(239, 120, 0, 0.25) 60%,
      transparent 72%);
    border-radius: 50%;
    filter: blur(8px);
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
    animation: floatSun 14s ease-in-out infinite;
  }
  @keyframes floatSun {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, -54%); }
  }

  .hero__inner { position: relative; z-index: 1; }

  .kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 10px;
    background: var(--bg-card);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-mid);
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
  }
  .kicker__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #3dcc75;
    box-shadow: 0 0 0 0 rgba(61, 204, 117, 0.7);
    animation: pulse 2.4s infinite;
  }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(61, 204, 117, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(61, 204, 117, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 204, 117, 0); }
  }

  .hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.04em;
    margin: 0;
    color: var(--ink);
  }
  .hero__title .accent {
    color: var(--orange);
    font-weight: 500;
    display: inline-block;
    transform: translateY(-0.02em);
  }

  .hero__subtitle {
    margin: 1.5rem auto 0;
    max-width: 720px;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw + 0.3rem, 1.55rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  .hero__lead {
    margin: 1.5rem auto 0;
    max-width: 740px;
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--ink-mid);
    font-weight: 400;
    text-wrap: pretty;
  }
  .hero__lead b { color: var(--ink); font-weight: 700; }

  .hero__ctas {
    margin-top: 2.4rem;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* ==========================================================
     STATS STRIP
     ========================================================== */
  .strip {
    padding-block: 2.5rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .strip__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  .stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .stat__num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ink);
  }
  .stat__num sup {
    color: var(--orange);
    font-size: 0.45em;
    font-weight: 500;
    top: -0.9em;
    margin-left: 2px;
  }
  .stat__label {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
    letter-spacing: -0.005em;
    margin-top: 8px;
  }
  @media (max-width: 760px) {
    .strip__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  }

  /* ==========================================================
     SECTION GENERICS — empilement sticky
     Chaque section se "pose" par-dessus la précédente au scroll.
     ========================================================== */
  .section {
    padding-block: clamp(5rem, 10vw, 9rem);
    position: relative;
    isolation: isolate;
  }

  /* Sections "empilables" : effet carte layered via radius + shadow + overlap.
     (pas de position:sticky — ça cassait le scroll et masquait le footer) */
  .section--services,
  .section--projets,
  .section--alt,
  .contact {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: 0 -14px 40px -15px rgba(2, 49, 75, 0.15);
    margin-top: -1.5rem;
    position: relative;
    z-index: 1;
  }
  /* Chaque section empilable passe au-dessus de la précédente (DOM order ne suffit pas ici avec les margins négatifs) */
  .section--services { z-index: 2; }
  .section--projets  { z-index: 3; }
  .section--alt      { z-index: 4; }
  .contact           { z-index: 5; }

  [data-theme="dark"] .section--services,
  [data-theme="dark"] .section--projets,
  [data-theme="dark"] .section--alt,
  [data-theme="dark"] .contact {
    box-shadow: 0 -18px 50px -18px rgba(0, 0, 0, 0.55);
  }

  /* — Services : papier à pois subtil, atmosphère "surface de travail" */
  .section--services {
    background-color: var(--bg);
    background-image:
      radial-gradient(circle at 1px 1px, rgba(2, 49, 75, 0.07) 0.8px, transparent 0);
    background-size: 22px 22px;
    overflow: hidden;
  }
  .section--services::after {
    content: "";
    position: absolute;
    top: -120px; right: -100px;
    width: 360px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(255, 206, 116, 0.30) 0%,
      rgba(239, 120, 0, 0.10) 40%,
      transparent 70%);
    z-index: -1;
    pointer-events: none;
  }

  /* — Projets : fond presque blanc pour laisser respirer les thumbs colorés */
  .section--projets {
    background: var(--bg-soft);
    margin-top: 0;
    overflow: hidden;
  }
  .section--projets::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 64px; height: 4px;
    background: var(--orange);
    border-radius: 0 0 999px 999px;
    opacity: 0.7;
    z-index: 2;
  }

  /* — À propos : la "pièce chaude", bg amber affirmé */
  .section--alt {
    background: var(--bg-2);
    margin-top: 0;
    overflow: hidden;
  }
  .section--alt::before {
    content: "";
    position: absolute;
    top: -200px; left: -100px;
    width: 480px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(255, 206, 116, 0.35) 0%,
      rgba(239, 120, 0, 0.12) 40%,
      transparent 70%);
    z-index: -1;
    pointer-events: none;
  }
  .section--alt::after {
    content: "";
    position: absolute;
    bottom: -80px; right: -60px;
    width: 240px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
      rgba(232, 78, 16, 0.22) 0%,
      rgba(232, 78, 16, 0.08) 40%,
      transparent 70%);
    z-index: -1;
    pointer-events: none;
  }

  /* — FAQ — "le feuilletoir" : questions/réponses dépliables */
  .section--faq {
    background: var(--bg);
  }
  .section--faq .section__head {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  }
  .faq {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .faq__item {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
  }
  .faq__item.is-open {
    border-color: rgba(239, 120, 0, 0.35);
    box-shadow: var(--shadow-sm);
  }
  .faq__q {
    cursor: pointer;
    width: 100%;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-display);
    font-size: clamp(1.02rem, 1.3vw + 0.5rem, 1.15rem);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
    letter-spacing: -0.01em;
    background: transparent;
    border: 0;
    text-align: left;
    transition: color .2s ease;
  }
  .faq__q:hover { color: var(--orange); }
  .faq__q:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
    border-radius: var(--r-md);
  }
  .faq__plus {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
    transition: background .3s ease, transform .3s ease;
  }
  .faq__plus::before,
  .faq__plus::after {
    content: "";
    position: absolute;
    background: var(--ink);
    transition: transform .3s ease, background-color .3s ease;
  }
  .faq__plus::before {
    width: 12px; height: 1.5px;
  }
  .faq__plus::after {
    width: 1.5px; height: 12px;
  }
  .faq__item.is-open .faq__plus {
    background: var(--orange);
  }
  .faq__item.is-open .faq__plus::before,
  .faq__item.is-open .faq__plus::after {
    background: var(--bg);
  }
  .faq__item.is-open .faq__plus::after {
    transform: scaleY(0);
  }
  .faq__a {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: opacity .25s ease;
    will-change: height, opacity;
  }
  .faq__a-inner {
    padding: 0 1.5rem 1.1rem;
    color: var(--ink-mid);
    font-size: 15.5px;
    line-height: 1.65;
  }
  .faq__item.is-open .faq__a {
    opacity: 1;
  }
  .faq__a-inner p { margin: 0; }
  .faq__a-inner p + p,
  .faq__a-inner p + ul,
  .faq__a-inner ul + p { margin-top: 0.9rem; }
  .faq__a-inner b { color: var(--ink); font-weight: 700; }
  .faq__prices {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .faq__prices li {
    padding-left: 1.1rem;
    position: relative;
  }
  .faq__prices li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.72em;
    width: 6px; height: 1.5px;
    background: var(--orange);
  }

  [data-theme="dark"] .faq__item {
    background: var(--bg-soft);
    border-color: rgba(251, 245, 226, 0.08);
  }
  [data-theme="dark"] .faq__item.is-open {
    background: rgba(13, 53, 88, 0.4);
    border-color: rgba(255, 152, 56, 0.45);
  }
  [data-theme="dark"] .faq__plus {
    background: rgba(251, 245, 226, 0.06);
  }
  [data-theme="dark"] .faq__plus::before,
  [data-theme="dark"] .faq__plus::after {
    background: var(--ink);
  }
  [data-theme="dark"] .faq__item.is-open .faq__plus {
    background: var(--orange);
  }
  [data-theme="dark"] .faq__item.is-open .faq__plus::before,
  [data-theme="dark"] .faq__item.is-open .faq__plus::after {
    background: var(--bg);
  }

  /* Dark overrides — ambiances de nuit */
  [data-theme="dark"] .section--services {
    background-color: var(--bg);
    background-image:
      radial-gradient(circle at 1px 1px, rgba(251, 245, 226, 0.05) 0.8px, transparent 0);
  }
  [data-theme="dark"] .section--services::after {
    background: radial-gradient(circle,
      rgba(255, 152, 56, 0.18) 0%,
      rgba(232, 78, 16, 0.08) 40%,
      transparent 70%);
  }
  [data-theme="dark"] .section--projets {
    background: var(--bg-soft);
  }
  [data-theme="dark"] .section--projets::before {
    background: var(--orange);
    box-shadow: 0 0 12px rgba(255, 152, 56, 0.55);
  }
  [data-theme="dark"] .section--alt::before {
    background: radial-gradient(circle,
      rgba(255, 152, 56, 0.20) 0%,
      rgba(232, 78, 16, 0.10) 40%,
      transparent 70%);
  }
  [data-theme="dark"] .section--alt::after {
    background: radial-gradient(circle,
      rgba(232, 78, 16, 0.25) 0%,
      rgba(60, 20, 80, 0.15) 40%,
      transparent 70%);
  }

  .section__head {
    max-width: 1200px;
    margin-bottom: clamp(3rem, 6vw, 5rem);
  }
  .section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
  }
  .section__eyebrow::before {
    content: "";
    width: 22px; height: 1.5px;
    background: var(--orange);
  }
  .section__title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -0.035em;
    margin: 0;
    color: var(--ink);
  }
  .section__title em {
    color: var(--orange);
    font-weight: 500;
  }
  .section__sub {
    margin-top: 1.2rem;
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--ink-mid);
    max-width: 56ch;
  }

  /* ==========================================================
     SERVICES
     ========================================================== */
  .services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  .service {
    background: var(--bg-card);
    border-radius: var(--r-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    border: 1px solid var(--line);
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s, border-color .4s;
    position: relative;
    overflow: hidden;
  }
  .service:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
  }
  .service::after {
    content: "";
    position: absolute;
    bottom: -50%;
    right: -30%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .5s;
    pointer-events: none;
  }
  .service:nth-child(1)::after { background: radial-gradient(circle, var(--amber-soft), transparent 60%); }
  .service:nth-child(2)::after { background: radial-gradient(circle, rgba(239,120,0,0.22), transparent 60%); }
  .service:nth-child(3)::after { background: radial-gradient(circle, rgba(232,78,16,0.22), transparent 60%); }
  .service:hover::after { opacity: 1; }

  .service__ico {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--bg-2);
    color: var(--ink);
    transition: background .4s, color .4s;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
  }
  .service__ico svg {
    width: 28px;
    height: 28px;
    display: block;
  }
  .service__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
  }
  .service:hover .service__ico {
    background: var(--ink);
    color: var(--bg);
  }
  .service__name {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 1.65rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0;
    position: relative;
    z-index: 1;
  }
  .service__body {
    color: var(--ink-mid);
    font-size: 15px;
    line-height: 1.55;
    flex: 1;
    position: relative;
    z-index: 1;
  }
  .service__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    position: relative;
    z-index: 1;
  }
  .service__tags span {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    padding: 4px 10px;
    background: var(--bg);
    border-radius: 999px;
  }

  @media (max-width: 900px) { .services { grid-template-columns: 1fr; } }

  /* ==========================================================
     PROJECTS
     ========================================================== */
  .projects {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
  }
  .project {
    grid-column: span 3;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s;
  }
  .project--wide { grid-column: span 4; }
  .project--tall { grid-column: span 2; }
  .project:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  .project__thumb {
    aspect-ratio: 16/10;
    position: relative;
    overflow: hidden;
    background: var(--ink);
  }
  .project--tall .project__thumb { aspect-ratio: 4/5; }
  .project__bg {
    position: absolute; inset: 0;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
  }
  .project:hover .project__bg { transform: scale(1.04); }

  /* Chaque placeholder est un mini-paysage unique */
  .project--1 .project__bg {
    background:
      radial-gradient(ellipse at 30% 20%, rgba(255,250,210,0.95) 0%, transparent 45%),
      radial-gradient(circle at 70% 30%, rgba(255,206,116,0.7) 0%, transparent 50%),
      linear-gradient(180deg, #FFE09D 0%, #EF7800 55%, #E84E10 100%);
  }
  .project--2 .project__bg {
    background:
      radial-gradient(circle at 25% 65%, rgba(255, 251, 238, 0.7) 0%, transparent 45%),
      linear-gradient(135deg, #02314B 0%, #1F4A6B 50%, #3B5874 100%);
  }
  .project--3 .project__bg {
    background:
      radial-gradient(ellipse at 50% 120%, rgba(255,206,116,0.5) 0%, transparent 50%),
      linear-gradient(180deg, #F5EAC8 0%, #FFCE74 45%, #EF7800 100%);
  }
  .project--4 .project__bg {
    background:
      radial-gradient(circle at 80% 20%, rgba(255,206,116,0.4) 0%, transparent 45%),
      linear-gradient(145deg, #3B5874 0%, #02314B 70%);
  }

  /* Petit pictogramme dans le thumb */
  .project__glyph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 251, 238, 0.92);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(4rem, 10vw, 8rem);
    letter-spacing: -0.05em;
    line-height: 0.85;
    mix-blend-mode: overlay;
    pointer-events: none;
  }

  .project__meta {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }
  .project__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--ink-soft);
    font-weight: 500;
    margin-bottom: 6px;
  }
  .project__top span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--bg);
    border-radius: 999px;
    color: var(--ink-mid);
  }
  .project__name {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.5vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    color: var(--ink);
  }
  .project__desc {
    font-size: 14.5px;
    color: var(--ink-mid);
    line-height: 1.5;
    margin-top: 2px;
  }
  .project__stack {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 12.5px;
    color: var(--ink-soft);
    font-weight: 500;
    letter-spacing: -0.005em;
  }

  @media (max-width: 900px) {
    .projects { grid-template-columns: 1fr; }
    .project, .project--wide, .project--tall { grid-column: 1 / -1; }
  }

  /* ==========================================================
     ABOUT
     ========================================================== */
  .about {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
  .about__media {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,250,210,0.85) 0%, transparent 50%),
      radial-gradient(circle at 70% 60%, rgba(255,206,116,0.6) 0%, transparent 50%),
      linear-gradient(180deg, #FFE09D 0%, #EF7800 55%, #E84E10 100%);
    box-shadow: var(--shadow-lg);
  }
  .about__media::before {
    content: "Romain";
    position: absolute;
    bottom: 28px; left: 28px;
    right: 28px;
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 700;
    line-height: 0.9;
    color: rgba(2, 49, 75, 0.92);
    letter-spacing: -0.045em;
  }
  .about__media::after {
    content: "Candau";
    position: absolute;
    bottom: 8px; left: 28px; right: 28px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 0.9;
    color: rgba(255, 251, 238, 0.85);
    letter-spacing: -0.03em;
  }
  .about__text h3 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 1.2rem;
  }
  .about__text h3 em {
    color: var(--orange);
    font-weight: 500;
  }
  .about__text p {
    margin: 0 0 1rem;
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--ink-mid);
    max-width: 58ch;
  }
  .about__text p:last-of-type { margin-bottom: 1.8rem; }
  .stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
  }
  .stack__label {
    display: block;
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
  }
  .stack span {
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    transition: background .25s, color .25s;
  }
  .stack span:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  @media (max-width: 900px) {
    .about { grid-template-columns: 1fr; }
    .about__media { max-width: 400px; margin-inline: auto; }
  }

  /* ==========================================================
     CONTACT
     ========================================================== */
  .contact {
    padding-block: clamp(5rem, 12vw, 10rem);
    text-align: center;
    overflow: hidden;
    background: var(--bg);
  }
  .contact::before {
    content: "";
    position: absolute;
    top: -30%; left: 50%;
    transform: translateX(-50%);
    width: 110vw; aspect-ratio: 1;
    background: radial-gradient(circle at 50% 50%,
      rgba(239, 120, 0, 0.12) 0%,
      rgba(232, 78, 16, 0.06) 30%,
      transparent 55%);
    pointer-events: none;
  }
  .contact__inner { position: relative; z-index: 1; }
  .contact__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }
  .contact__title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -0.04em;
    margin: 0 auto;
    max-width: 18ch;
  }
  .contact__title em { color: var(--orange); font-weight: 500; }
  .contact__sub {
    margin: 1.4rem auto 2.5rem;
    max-width: 520px;
    font-size: var(--fs-lg);
    color: var(--ink-mid);
    line-height: 1.5;
  }
  .contact__mail {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 30px;
    background: var(--ink);
    color: var(--bg);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .25s, box-shadow .25s;
    box-shadow: var(--shadow-md);
  }
  .contact__mail:hover {
    background: var(--orange);
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -12px rgba(239, 120, 0, 0.45);
  }
  .contact__mail .arr {
    display: inline-block;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
  }
  .contact__mail:hover .arr { transform: translateX(4px) rotate(-45deg); }

  .contact__secondary {
    margin-top: 2.5rem;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 14px;
  }
  .contact__secondary a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--ink-mid);
    font-weight: 500;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease;
  }
  .contact__secondary a::after {
    content: "↗";
    font-size: 12px;
    opacity: 0.55;
    transition: opacity .2s, transform .2s;
  }
  .contact__secondary a:hover {
    color: var(--orange);
    border-color: rgba(239, 120, 0, 0.35);
    background: rgba(239, 120, 0, 0.06);
  }
  .contact__secondary a:hover::after {
    opacity: 1;
    transform: translate(2px, -2px);
  }
  [data-theme="dark"] .contact__secondary a:hover {
    border-color: rgba(255, 152, 56, 0.40);
    background: rgba(255, 152, 56, 0.08);
  }

  /* ==========================================================
     FOOTER — enrichi multi-colonnes
     ========================================================== */
  .foot {
    padding-block: 4rem 2rem;
    border-top: 1px solid var(--line);
    background: var(--bg);
    position: relative;
  }
  [data-theme="dark"] .foot {
    background: var(--bg);
    border-top-color: var(--line-2);
  }
  .foot__top {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1.2fr 1fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--line);
  }
  [data-theme="dark"] .foot__top {
    border-bottom-color: var(--line-2);
  }

  /* Colonne brand */
  .foot__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    margin-bottom: 1rem;
  }
  .foot__brand-name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .foot__pitch {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-mid);
    margin: 0 0 1.2rem;
    max-width: 320px;
  }
  .foot__addr {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ink-soft);
    font-style: normal;
  }
  .foot__addr a {
    color: var(--ink-mid);
    font-weight: 500;
  }
  .foot__addr a:hover { color: var(--orange); }

  /* Colonnes listes */
  .foot__title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 1.2rem;
  }
  .foot__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
  .foot__list a {
    font-size: 14px;
    color: var(--ink-mid);
    transition: color .2s ease, transform .2s ease;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }
  .foot__list a:hover {
    color: var(--orange);
    transform: translateX(2px);
  }
  .foot__ext {
    font-size: 11px;
    opacity: 0.6;
  }

  /* Barre basse */
  .foot__bottom {
    padding-top: 1.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-soft);
  }
  .foot__copy { font-weight: 500; }
  .foot__legal {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  .foot__legal a {
    color: var(--ink-mid);
    font-weight: 500;
    transition: color .2s ease;
  }
  .foot__legal a:hover { color: var(--orange); }
  .foot__legal span { color: var(--ink-soft); opacity: 0.6; }

  @media (max-width: 960px) {
    .foot__top {
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem 2rem;
    }
    .foot__col--brand {
      grid-column: 1 / -1;
    }
  }
  @media (max-width: 560px) {
    .foot__top {
      grid-template-columns: 1fr;
      gap: 2rem;
      padding-bottom: 2rem;
    }
    .foot__bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
    }
  }

  /* ==========================================================
     ANIMATIONS
     ========================================================== */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1);
  }
  .reveal.is-in { opacity: 1; transform: translateY(0); }

  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .rise-1 { animation: rise .9s .05s cubic-bezier(.22, .61, .36, 1) both; }
  .rise-2 { animation: rise .9s .18s cubic-bezier(.22, .61, .36, 1) both; }
  .rise-2b{ animation: rise .9s .26s cubic-bezier(.22, .61, .36, 1) both; }
  .rise-3 { animation: rise .9s .32s cubic-bezier(.22, .61, .36, 1) both; }
  .rise-4 { animation: rise .9s .48s cubic-bezier(.22, .61, .36, 1) both; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
/* ==========================================================
   FORMULAIRE DE CONTACT
   ========================================================== */
.contact-form {
  max-width: 620px;
  margin: 2.5rem auto 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
@media (max-width: 560px) {
  .contact-form__row { grid-template-columns: 1fr; }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form__field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.contact-form__opt {
  color: var(--ink-soft);
  font-weight: 400;
}
.contact-form__field input,
.contact-form__field textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  color: var(--ink);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  width: 100%;
}
.contact-form__field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--ink-soft);
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(239, 120, 0, 0.12);
}

/* Honeypot anti-spam : strictement invisible mais accessible au DOM */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Case RGPD — checkbox custom */
.contact-form__rgpd {
  margin-top: 0.4rem;
  position: relative;
}
.contact-form__rgpd input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.contact-form__rgpd label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
}
.contact-form__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid var(--line-2);
  border-radius: 5px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.contact-form__check svg {
  width: 12px;
  height: 12px;
  color: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .15s ease, transform .15s ease;
}
/* Checked state */
.contact-form__rgpd input:checked + label .contact-form__check {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(239, 120, 0, 0.12);
}
.contact-form__rgpd input:checked + label .contact-form__check svg {
  opacity: 1;
  transform: scale(1);
}
/* Focus visible */
.contact-form__rgpd input:focus-visible + label {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.contact-form__rgpd a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-color: rgba(239, 120, 0, 0.35);
  text-underline-offset: 2px;
}
[data-theme="dark"] .contact-form__check {
  background: rgba(251, 245, 226, 0.04);
  border-color: rgba(251, 245, 226, 0.2);
}

.contact-form__footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.6rem;
}
.contact-form__note {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  max-width: 52ch;
  text-align: center;
}
.contact-form__note a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-color: rgba(239, 120, 0, 0.35);
  text-underline-offset: 2px;
}

.contact-form__feedback {
  font-size: 14px;
  padding: 0;
  border-radius: var(--r-md);
  transition: padding .2s ease, background .2s ease;
}
.contact-form__feedback.is-success,
.contact-form__feedback.is-error {
  padding: 14px 18px;
  margin-top: 0.5rem;
}
.contact-form__feedback.is-success {
  background: rgba(34, 139, 90, 0.1);
  color: #1a7a4f;
  border: 1px solid rgba(34, 139, 90, 0.3);
}
.contact-form__feedback.is-error {
  background: rgba(220, 50, 50, 0.08);
  color: #b42a2a;
  border: 1px solid rgba(220, 50, 50, 0.3);
}

/* Dark overrides */
[data-theme="dark"] .contact-form__field input,
[data-theme="dark"] .contact-form__field textarea {
  background: rgba(251, 245, 226, 0.04);
  border-color: rgba(251, 245, 226, 0.1);
  color: var(--ink);
}
[data-theme="dark"] .contact-form__field input:focus,
[data-theme="dark"] .contact-form__field textarea:focus {
  background: rgba(251, 245, 226, 0.06);
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 152, 56, 0.15);
}
[data-theme="dark"] .contact-form__feedback.is-success {
  background: rgba(72, 187, 120, 0.12);
  color: #8feaac;
  border-color: rgba(72, 187, 120, 0.3);
}
[data-theme="dark"] .contact-form__feedback.is-error {
  background: rgba(252, 129, 129, 0.12);
  color: #fca5a5;
  border-color: rgba(252, 129, 129, 0.3);
}

/* ==========================================================
   COOKIES CONSENT (bannière bas-gauche + FAB réouverture)
   ========================================================== */
.cc {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  max-width: 400px;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 40px rgba(2, 49, 75, 0.12), 0 4px 12px rgba(2, 49, 75, 0.06);
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .35s ease;
}
.cc.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cc__inner {
  padding: 1.3rem 1.5rem 1.2rem;
}
.cc__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.55rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cc__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0 0 1rem;
}
.cc__desc a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-color: rgba(239, 120, 0, 0.35);
  text-underline-offset: 2px;
}

.cc__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  background: var(--bg-2);
  border-radius: var(--r-md);
}
.cc__option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
}
.cc__option input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--orange);
  flex-shrink: 0;
}
.cc__option input[type="checkbox"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cc__option b {
  color: var(--ink);
  font-weight: 600;
  display: block;
}
.cc__option em {
  display: block;
  color: var(--ink-soft);
  font-style: normal;
  font-size: 12px;
  margin-top: 2px;
}

.cc__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cc__btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
}
.cc__btn:hover { transform: translateY(-1px); }
.cc__btn:active { transform: translateY(0); }

.cc__btn--primary {
  background: var(--orange);
  color: var(--bg);
}
.cc__btn--primary:hover { background: var(--rust); }

.cc__btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.cc__btn--secondary:hover {
  background: var(--bg-2);
  border-color: var(--ink-soft);
}

.cc__btn--ghost {
  background: transparent;
  color: var(--ink-mid);
  padding: 9px 12px;
}
.cc__btn--ghost:hover { color: var(--orange); }

/* Bouton flottant pour rouvrir */
.cc-fab {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9998;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--line-2);
  box-shadow: 0 6px 18px rgba(2, 49, 75, 0.1);
  cursor: pointer;
  display: none;
  place-items: center;
  transition: transform .25s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
}
.cc-fab.is-visible { display: grid; }
.cc-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(2, 49, 75, 0.14);
  color: var(--orange);
}
.cc-fab svg { width: 22px; height: 22px; }

/* Dark overrides */
[data-theme="dark"] .cc {
  background: var(--bg-soft);
  border-color: rgba(251, 245, 226, 0.12);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .cc__panel {
  background: rgba(251, 245, 226, 0.04);
}
[data-theme="dark"] .cc__btn--secondary {
  border-color: rgba(251, 245, 226, 0.15);
}
[data-theme="dark"] .cc__btn--secondary:hover {
  background: rgba(251, 245, 226, 0.06);
  border-color: rgba(251, 245, 226, 0.3);
}
[data-theme="dark"] .cc-fab {
  background: var(--bg-soft);
  border-color: rgba(251, 245, 226, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* Cloudflare Turnstile : centré */
.contact-form__turnstile {
  display: flex;
  justify-content: center;
  min-height: 0;
}

@media (max-width: 480px) {
  .cc {
    left: 12px;
    right: 12px;
    max-width: none;
    bottom: 12px;
  }
  .cc-fab { bottom: 12px; left: 12px; }
}

/* ==========================================================
   PAGE 404
   ========================================================== */
.error-hero {
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  padding-top: clamp(4rem, 9vw, 7rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.error-hero::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 206, 116, 0.28) 0%,
    rgba(239, 120, 0, 0.1) 40%,
    transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.error-hero::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(232, 78, 16, 0.2) 0%,
    rgba(232, 78, 16, 0.06) 40%,
    transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.error-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.error-hero__code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 14rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--ink);
  margin: 0 0 1.5rem;
  display: inline-flex;
  gap: 0.08em;
  align-items: center;
}
.error-hero__zero {
  color: var(--orange);
  display: inline-block;
  animation: error-zero-bounce 3.5s cubic-bezier(.22, .61, .36, 1) infinite;
}
@keyframes error-zero-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  15%      { transform: translateY(-14px) rotate(-8deg); }
  30%      { transform: translateY(0) rotate(0deg); }
  45%      { transform: translateY(-6px) rotate(4deg); }
  60%      { transform: translateY(0) rotate(0deg); }
}

.error-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3vw + 0.5rem, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 1.2rem;
  color: var(--ink);
}
.error-hero__title em {
  color: var(--orange);
  font-weight: 500;
  font-style: normal;
}

.error-hero__lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 540px;
  margin: 0 auto 2rem;
}

.error-hero__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.error-hero__links {
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.error-hero__links-label {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.error-hero__links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.error-hero__links li a {
  display: inline-flex;
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-mid);
  font-size: 13.5px;
  font-weight: 500;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.error-hero__links li a:hover {
  color: var(--orange);
  border-color: rgba(239, 120, 0, 0.35);
  background: rgba(239, 120, 0, 0.06);
  transform: translateY(-1px);
}

[data-theme="dark"] .error-hero__links {
  border-top-color: var(--line-2);
}
[data-theme="dark"] .error-hero__links li a:hover {
  border-color: rgba(255, 152, 56, 0.4);
  background: rgba(255, 152, 56, 0.08);
}

/* ==========================================================
   LEGAL PAGES  (mentions-legales + confidentialite)
   ========================================================== */

/* --- Hero --- */
.legal-hero {
  position: relative;
  padding-top: clamp(6.5rem, 10vh, 8rem);
  padding-bottom: clamp(2rem, 4vh, 3rem);
  overflow: hidden;
  text-align: center;
  background: var(--bg);
}

.legal-hero__glow {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 120vw;
  max-width: 1400px;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 65%,
      rgba(255, 206, 116, 0.32) 0%,
      rgba(239, 120, 0, 0.10) 35%,
      transparent 58%);
  pointer-events: none;
  z-index: 0;
}

.legal-hero__inner {
  position: relative;
  z-index: 1;
}

.legal-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}
.legal-breadcrumb a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .2s;
}
.legal-breadcrumb a:hover { color: var(--orange); }
.legal-breadcrumb span[aria-hidden] { opacity: 0.4; }

.legal-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px 7px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}
.legal-hero__badge svg {
  flex-shrink: 0;
  color: var(--orange);
}

.legal-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
}

.legal-hero__sub {
  margin: 1.2rem auto 0;
  max-width: 620px;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink-mid);
  text-wrap: balance;
}
.legal-hero__sub strong {
  color: var(--ink);
  font-weight: 600;
}

/* --- Body layout (sidebar TOC + content) --- */
.legal-body {
  padding-block: clamp(3rem, 6vh, 5rem);
  background: var(--bg);
}

.legal-body__col {
  width: 100%;
}

/* --- Cards --- */
.legal-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.legal-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
}

.legal-card__header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.legal-card__num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--orange);
  opacity: 0.5;
  line-height: 1;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.legal-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}

/* --- Typography inside cards --- */
.legal-card p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-mid);
  margin: 0 0 1rem;
}
.legal-card p:last-child { margin-bottom: 0; }

.legal-card p strong {
  color: var(--ink);
  font-weight: 600;
}

.legal-card a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-color: rgba(239, 120, 0, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.legal-card a:hover {
  text-decoration-color: var(--orange);
}

.legal-card h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  margin: 1.4rem 0 0.6rem;
}
.legal-card h3:first-of-type { margin-top: 0.4rem; }

.legal-card code {
  font-size: 0.88em;
  padding: 2px 7px;
  background: var(--bg-2);
  border-radius: 5px;
  color: var(--ink);
}

/* --- Definition list --- */
.legal-dl {
  margin: 0;
}
.legal-dl__row {
  display: flex;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.legal-dl__row:last-child { border-bottom: 0; }

.legal-dl dt {
  flex: 0 0 clamp(120px, 22%, 200px);
  font-weight: 600;
  color: var(--ink);
}
.legal-dl dd {
  margin: 0;
  color: var(--ink-mid);
  line-height: 1.5;
}
.legal-dl dd a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-color: rgba(239, 120, 0, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.legal-dl dd a:hover {
  text-decoration-color: var(--orange);
}

@media (max-width: 540px) {
  .legal-dl__row {
    flex-direction: column;
    gap: 2px;
  }
  .legal-dl dt { flex: none; }
}

/* --- Lists --- */
.legal-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 1rem;
}
.legal-list li {
  position: relative;
  padding: 8px 0 8px 20px;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-mid);
}
.legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.5;
}
.legal-list li strong {
  color: var(--ink);
  font-weight: 600;
}
.legal-list li a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-color: rgba(239, 120, 0, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.legal-list li a:hover {
  text-decoration-color: var(--orange);
}

/* rights list — slightly different styling */
.legal-list--rights li {
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid var(--line);
}
.legal-list--rights li:last-child { border-bottom: 0; }

/* --- Updated date --- */
.legal-updated {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  text-align: right;
}

/* --- Dark mode overrides --- */
[data-theme="dark"] .legal-hero__glow {
  background:
    radial-gradient(circle at 50% 65%,
      rgba(255, 152, 56, 0.12) 0%,
      rgba(239, 120, 0, 0.05) 35%,
      transparent 58%);
}
[data-theme="dark"] .legal-card code {
  background: rgba(251, 245, 226, 0.06);
}