/* =========================================================
   Référencement 24 : Design System
   Dark editorial / studio premium
   Gabriel Montaut · Consultant SEO Dordogne
   ========================================================= */

/* --- Reset minimal & box-sizing --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
.ph-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}
input, button, textarea, select { font: inherit; color: inherit; }

/* --- Design tokens (dark, HSL) — défaut --- */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  /* Brand colors (HSL) */
  --bg: hsl(0 0% 4%);          /* #0a0a0a */
  --surface: hsl(0 0% 8%);     /* #141414 */
  --surface-2: hsl(0 0% 10%);  /* #1a1a1a */
  --stroke: hsl(0 0% 12%);     /* #1f1f1f */
  --stroke-2: hsl(0 0% 18%);   /* #2d2d2d */
  --muted: hsl(40 8% 76%);     /* #c9c4b9 : APCA Lc ≈ 82 vs bg (body text safe) */
  --muted-2: hsl(40 6% 58%);   /* #989489 : meta/captions, APCA Lc ≈ 62 (non-essentiel) */
  --text: hsl(40 14% 92%);     /* #eeeae1 : off-white warm, réduit le halation (Legge, Lupton) */
  --text-dim: hsl(40 11% 85%); /* #dcd6c8 : lead/sous-titres, APCA Lc ≈ 88 */
  --ink: hsl(0 0% 0%);         /* bandes ink / fondus section */

  /* Signature gradient (hover only) */
  --accent-gradient: linear-gradient(90deg, #89AACC 0%, #4E85BF 100%);
  --accent-gradient-rev: linear-gradient(90deg, #4E85BF 0%, #89AACC 100%);

  /* Accents de marque (secondaire / tertiaire) : repos, faible dose */
  --brand-secondary: #4d87b2;
  --brand-tertiary: #79439a;
  --scroll-progress-gradient: linear-gradient(
    90deg,
    var(--brand-secondary),
    var(--brand-tertiary) 55%,
    #89AACC
  );

  /* Typography : échelle modulaire Major Third (1.25), fluide via clamp()
     Socle cognitif : body ≥ 17px (Reichenstein), échelle harmonique (Bringhurst §3.1),
     clamp() pour adaptation viewport sans media queries (Kadlec/Mandel). */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --fs-xs:   0.8125rem;                            /* 13px : labels, meta */
  --fs-sm:   0.9375rem;                            /* 15px : UI, captions */
  --fs-base: 1rem;                                 /* 16px : fallback */
  --fs-md:   clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);  /* 17 → 19 body */
  --fs-lg:   clamp(1.1875rem, 1.10rem + 0.45vw, 1.375rem);   /* 19 → 22 lead */
  --fs-xl:   clamp(1.375rem, 1.22rem + 0.75vw, 1.625rem);    /* 22 → 26 */
  --fs-2xl:  clamp(1.75rem, 1.50rem + 1.20vw, 2.25rem);      /* 28 → 36 h3 */
  --fs-3xl:  clamp(2.125rem, 1.70rem + 2.00vw, 2.875rem);    /* 34 → 46 h2 */
  --fs-4xl:  clamp(2.75rem, 2.10rem + 3.20vw, 4.25rem);      /* 44 → 68 h1 */
  --fs-5xl:  clamp(3.5rem, 2.70rem + 4.00vw, 5.5rem);        /* 56 → 88 display */

  /* Line-heights : plus courte à mesure que la taille augmente (Butterick, Bringhurst §2.1)
     Jamais < 1 sauf rare display. 1.6 sur body pour haute lisibilité en dark mode. */
  --lh-display: 1.04;   /* titres XL, 40px+ */
  --lh-tight:   1.12;   /* h1/h2 */
  --lh-snug:    1.25;   /* h3/h4 */
  --lh-normal:  1.6;    /* body : sweet spot Tinker/Paterson sur dark */
  --lh-relaxed: 1.75;   /* lead, longs paragraphes */

  /* Letter-spacing : tracking optique (tighter pour gros corps, looser pour petits)
     Règle de Carter : à grand corps, l'œil comble les espaces, donc resserrer. */
  --tr-display: -0.022em;
  --tr-h:       -0.014em;
  --tr-body:     0;
  --tr-ui:      -0.005em;
  --tr-label:    0.14em;    /* eyebrows, small caps */

  /* Measure (longueur de ligne) : Bringhurst : 45–75 cpl optimal, 66 idéal.
     À utiliser comme max-width sur les blocs de texte longs. */
  --measure-tight: 42ch;
  --measure:       66ch;
  --measure-wide:  78ch;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  /* Air égal avant / après un CTA mid (entre deux blocs de contenu) */
  --cta-mid-gap: clamp(var(--sp-7), 5vw, var(--sp-8));

  /* Layout */
  --wrap: 72rem;
  --wrap-tight: 48rem;
  --wrap-wide: 84rem;
  /* No rounded corners : editorial / print look */
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-full: 0;

  /* Elevation (dark) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 200ms;
  --t: 400ms;
  --t-slow: 800ms;

  /* Liens texte : filet animé (repos sans underline, hover entrant, leave sortant) */
  --link-line-h: calc(max(1px, 0.07em) + 1px);
  --link-line-h-hover: calc(max(1.5px, 0.085em) + 1px);
  --link-line-w: 100%;
  --link-line-hover: linear-gradient(
    90deg,
    var(--brand-secondary) 0%,
    color-mix(in srgb, var(--brand-tertiary) 92%, var(--brand-secondary)) 100%
  );
  --link-ext-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E");
  --link-motion-enter: 520ms;
  --link-motion-leave: 380ms;

  /* Verre « frosted » façon Apple liquid glass :
     - tint légèrement plus transparent pour laisser lire le mesh
     - backdrop avec contrast() : redonne du mordant après le saturate (évite le "brouillard plat")
     - edges : hairline blanc + rim micro-contour → bord plus défini, plus net
     - elev : 5 couches = rim extérieur + highlight haut + ombre basse (inset) + ombre de pose + contact
  */
  --glass-tint: color-mix(in srgb, var(--surface) 34%, transparent);
  --glass-tint-strong: color-mix(in srgb, var(--surface) 48%, transparent);
  --glass-bg: var(--glass-tint);
  --glass-bg-strong: var(--glass-tint-strong);
  --glass-edge: hsl(0 0% 100% / 0.14);
  --glass-edge-bright: hsl(0 0% 100% / 0.22);
  --glass-border: var(--glass-edge);
  --glass-backdrop: blur(0.85rem) saturate(1.4);
  --glass-backdrop-lg: blur(1.1rem) saturate(1.5);
  /* Empilement Apple-like :
       1) rim extérieur (0.5px) : détoure sans alourdir
       2) highlight intérieur haut (1px) : reflet spéculaire du bord sup.
       3) ombre intérieure basse (1px) : donne l'épaisseur de la plaque
       4) inner-outline très doux : unifie le bord sur fonds clairs/sombres
       5+6) ombre de pose + ombre de contact (plus courte, plus marquée) */
  --glass-plate-elev:
    0 0 0 0.5px hsl(0 0% 100% / 0.06),
    inset 0 1px 0 hsl(0 0% 100% / 0.18),
    inset 0 -1px 0 hsl(0 0% 0% / 0.22),
    inset 0 0 0 1px hsl(0 0% 100% / 0.02),
    0 0.75rem 2.25rem hsl(0 0% 0% / 0.22),
    0 0.25rem 0.5rem hsl(0 0% 0% / 0.08);
  --glass-shadow: var(--glass-plate-elev);
  --glass-stack: var(--glass-tint);
  --glass-stack-strong: var(--glass-tint-strong);
  /* Halftone bento + stats (calque ::before, survol) : moins dense, points plus discrets */
  --r24-glass-dots-pattern: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--text) 5.5%, transparent) 0.04rem,
    transparent 0.1rem
  ) 0 0 / 0.85rem 0.85rem repeat;

  /* Meta / chrome (JS theme-color) */
  --theme-color: #0a0a0a;
}

/* --- Design tokens (light fork) --- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: hsl(40 28% 98%);         /* #faf8f4 */
  --surface: hsl(40 22% 96%);    /* #f5f2eb */
  --surface-2: hsl(40 16% 93%);  /* #ede8df */
  --stroke: hsl(40 12% 86%);     /* #ddd6c9 */
  --stroke-2: hsl(40 10% 78%);   /* #cbc2b2 */
  /* Grade texte AA+ sur crème (3 niveaux + meta) :
     text (principal) > text-dim (secondaire : body / lead)
     > muted (tertiaire : UI / cards) > muted-2 (meta / captions) */
  --text: hsl(40 22% 9%);        /* #1a1610 — titres */
  --text-dim: hsl(40 16% 14%);   /* #29241c — body / p / lead */
  --muted: hsl(40 12% 22%);      /* #3d362c — secondaire UI */
  --muted-2: hsl(40 9% 30%);     /* #544c40 — meta / captions */
  /* Pause « ink » : bande teintée marque (pas de noir — trop cassant en clair) */
  --ink: color-mix(in srgb, var(--brand-secondary) 9%, color-mix(in srgb, var(--brand-tertiary) 6%, var(--surface-2)));

  --shadow-sm: 0 1px 2px hsl(40 20% 20% / 0.08);
  --shadow: 0 8px 24px hsl(40 20% 20% / 0.1);
  --shadow-lg: 0 30px 80px hsl(40 20% 20% / 0.14);

  --glass-tint: color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-tint-strong: color-mix(in srgb, var(--surface) 88%, transparent);
  --glass-bg: var(--glass-tint);
  --glass-bg-strong: var(--glass-tint-strong);
  --glass-edge: hsl(40 20% 20% / 0.12);
  --glass-edge-bright: hsl(40 20% 20% / 0.2);
  --glass-border: var(--glass-edge);
  --glass-backdrop: blur(0.85rem) saturate(1.25);
  --glass-backdrop-lg: blur(1.1rem) saturate(1.3);
  --glass-plate-elev:
    0 0 0 0.5px hsl(40 20% 20% / 0.06),
    inset 0 1px 0 hsl(0 0% 100% / 0.72),
    inset 0 -1px 0 hsl(40 20% 20% / 0.06),
    inset 0 0 0 1px hsl(40 20% 20% / 0.03),
    0 0.75rem 2.25rem hsl(40 20% 20% / 0.1),
    0 0.25rem 0.5rem hsl(40 20% 20% / 0.05);
  --glass-shadow: var(--glass-plate-elev);
  --glass-stack: var(--glass-tint);
  --glass-stack-strong: var(--glass-tint-strong);
  --r24-glass-dots-pattern: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--text) 6%, transparent) 0.04rem,
    transparent 0.1rem
  ) 0 0 / 0.85rem 0.85rem repeat;

  --theme-color: #faf8f4;
  /* Mesh light inchangé (ne suit pas le boost dark) */
  --home-mesh: linear-gradient(
    var(--home-angle, 168deg),
    color-mix(in srgb, var(--brand-secondary) 14%, transparent) 0%,
    transparent 45%,
    color-mix(in srgb, var(--brand-tertiary) 12%, transparent) 100%
  );
}

/* --- Design tokens (a11y / accessible) ---
   Overlay html[data-a11y="on"] par-dessus dark|light.
   Auto-on si prefers-contrast: more (sauf override manuel r24-a11y). */
html[data-a11y="on"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f2f2;
  --stroke: #111111;
  --stroke-2: #333333;
  --text: #111111;
  --text-dim: #111111;
  --muted: #222222;
  --muted-2: #333333;
  --ink: #e6e6e6;

  /* Accents fort contraste (pas d'info par la seule couleur : liens soulignés + focus) */
  --brand-secondary: #005a9c;
  --brand-tertiary: #6b1a8a;
  --accent-gradient: linear-gradient(90deg, #005a9c 0%, #003d6b 100%);
  --accent-gradient-rev: linear-gradient(90deg, #003d6b 0%, #005a9c 100%);
  --scroll-progress-gradient: linear-gradient(90deg, #005a9c, #6b1a8a 55%, #003d6b);

  --font-sans: "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Atkinson Hyperlegible", "Segoe UI", Georgia, serif;
  --fs-md: clamp(1.125rem, 1.04rem + 0.4vw, 1.25rem);
  --fs-lg: clamp(1.25rem, 1.14rem + 0.5vw, 1.4375rem);
  --lh-display: 1.25;
  --lh-tight: 1.35;
  --lh-snug: 1.4;
  --lh-normal: 1.7;
  --lh-relaxed: 1.85;
  --tr-display: 0.01em;
  --tr-h: 0.01em;
  --tr-body: 0.02em;
  --tr-ui: 0.01em;

  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.18);
  --shadow: 0 4px 12px hsl(0 0% 0% / 0.2);
  --shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.22);

  /* Surfaces opaques : glass / blur off */
  --glass-tint: #ffffff;
  --glass-tint-strong: #ffffff;
  --glass-bg: #ffffff;
  --glass-bg-strong: #ffffff;
  --glass-edge: #111111;
  --glass-edge-bright: #111111;
  --glass-border: #111111;
  --glass-backdrop: none;
  --glass-backdrop-lg: none;
  --glass-plate-elev: 0 0 0 2px #111111;
  --glass-shadow: 0 0 0 2px #111111;
  --glass-stack: #ffffff;
  --glass-stack-strong: #ffffff;
  --r24-glass-dots-pattern: none;

  --home-mesh: none;
  --link-line-hover: none;
  --theme-color: #ffffff;
}

/* Coordonnées lumière sur la plaque (JS + lissage) : transitions fluides type matière. */
@property --gp-x { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --gp-y { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --gp-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* --- Base --- */
html { scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Repère d’empilement : <main> (z 1) contient le mesh ; le spot est en section ::after (sous le verre, au-dessus du mesh). */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-body);
  color: var(--text);
  position: relative;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 58% at 100% -8%, color-mix(in srgb, var(--brand-secondary) 26%, transparent), transparent 55%),
    radial-gradient(ellipse 78% 50% at -8% 108%, color-mix(in srgb, var(--brand-tertiary) 21%, transparent), transparent 52%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* OpenType : ligatures standards + kerning + chiffres tabulaires pour data,
     ss01 (alt a à crochet Inter), cv11 (single-storey a en italic),
     évite la confusion I/l/1 en corps. */
  font-feature-settings: "kern", "liga", "calt", "ss01", "cv11";
  font-variant-ligatures: common-ligatures contextual;
  font-optical-sizing: auto;
  /* Césure FR : min 3 char de part et d'autre, évite les "pl-" orphelins */
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-chars: 7 3 3;
  overflow-x: hidden;
}
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse 90% 58% at 100% -8%, color-mix(in srgb, var(--brand-secondary) 10%, transparent), transparent 55%),
    radial-gradient(ellipse 78% 50% at -8% 108%, color-mix(in srgb, var(--brand-tertiary) 8%, transparent), transparent 52%),
    var(--bg);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
html[data-a11y="on"] body {
  background: var(--bg);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
main {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

/* Paragraphes : mesure optimale + text-wrap pretty pour éviter veuves/orphelines
   (Chrome 117+, Safari 17.4+). Fallback dégradé gracieusement. */
p {
  text-wrap: pretty;
}
p + p { margin-top: 0.9em; }
/* Mesure appliquée uniquement sur prose longue (article, wrap-tight, lead) : préserve les cartes/grilles */
.prose p, .wrap-tight p, article p { max-width: var(--measure); }
.prose, article { max-width: var(--measure-wide); }

/* Titres : wrap balance (répartit les lignes de façon équilibrée),
   tracking négatif, line-height resserré, césure désactivée (jamais couper un titre). */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  hyphens: manual;
  letter-spacing: var(--tr-h);
  line-height: var(--lh-tight);
  font-weight: 600;
}
h1 { font-size: var(--fs-4xl); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-xl); line-height: var(--lh-snug); }

/* Lead : paragraphe d'intro, corps plus grand + interlignage plus aéré */
.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-dim);
  max-width: var(--measure);
  text-wrap: pretty;
}

/* Chiffres proportionnels pour le corps, tabulaires pour data */
.num-tabular, table, .stat-value, .price, time {
  font-variant-numeric: tabular-nums;
}

/* Liens texte : filet animé (repos sans underline, hover G→D, leave D→G) */
a {
  color: color-mix(in srgb, var(--brand-secondary) 34%, var(--text));
  text-decoration: none;
  position: relative;
  transition: color var(--link-motion-leave) var(--ease);
}
a::after {
  content: "";
  position: absolute;
  /* Body/prose : filet 100 % — pas de transform-origin:center (casse l’anim G→D) */
  left: 0;
  width: var(--link-line-w);
  bottom: -0.12em;
  height: var(--link-line-h);
  background: var(--link-line-hover);
  transform: scaleX(0);
  transform-origin: 100%;
  transition:
    transform var(--link-motion-leave) var(--ease-out),
    height var(--link-motion-leave) var(--ease-out),
    bottom var(--link-motion-leave) var(--ease-out);
  pointer-events: none;
}
a:hover,
a:focus-visible {
  color: var(--brand-secondary);
  background-image: var(--link-line-hover);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: color var(--link-motion-enter) var(--ease-out);
}
a:hover::after,
a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: 0%;
  height: var(--link-line-h-hover);
  bottom: -0.14em;
  transition:
    transform var(--link-motion-enter) cubic-bezier(0.22, 1, 0.36, 1),
    height var(--link-motion-enter) var(--ease-out),
    bottom var(--link-motion-enter) var(--ease-out);
}
:is(
  .prose,
  article,
  .blog-article__body,
  .site-footer,
  .breadcrumb,
  .chat-agent__bubble,
  .chat-agent__hint,
  .page-photo-credit--prefooter
) a[href^="http"]:not([href*="montaut.eu"]) {
  padding-inline-end: 0.72em;
}
:is(
  .prose,
  article,
  .blog-article__body,
  .site-footer,
  .breadcrumb,
  .chat-agent__bubble,
  .page-photo-credit--prefooter
) a[href^="http"]:not([href*="montaut.eu"])::before {
  content: "";
  position: absolute;
  top: 0.02em;
  right: 0;
  width: 0.55em;
  height: 0.55em;
  background-color: currentColor;
  opacity: 0.72;
  mask: var(--link-ext-glyph) center / contain no-repeat;
  -webkit-mask: var(--link-ext-glyph) center / contain no-repeat;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  a::after {
    transition: none;
  }
}
.brand,
.brand:hover,
.skip-link,
.skip-link:focus,
.site-header .nav-primary a,
.site-header .nav-primary .nav-group-toggle,
.site-header .nav-cta a,
.nav-mobile a,
.nav-mobile .nav-submenu a,
.nav-mobile .nav-mobile-cta a,
.toc a,
.chapters-toc a,
.journal-item,
.journal-item:hover,
.card .card-link,
.card:hover .card-link,
.works-item,
a.explorations-item,
.cards--metiers-bergerac .card-read-more,
.cards--metiers-bergerac .card-read-more:hover,
.chat-agent__sources a,
.chat-agent__sources a:hover,
.btn,
.btn-primary,
.btn-cta,
.btn-ghost,
.btn-brand,
.btn-accent,
.site-footer .brand,
.site-footer .brand:hover,
.logo-strip-track a,
.logo-strip-track a:hover,
.blog-article__share-btn,
.blog-article__share-btn:hover,
.blog-article__share-item,
.blog-article__share-item:hover {
  text-decoration: none;
}
:is(
  .brand,
  .skip-link,
  .nav-mobile a,
  .nav-mobile .nav-mobile-cta a,
  .toc a,
  .journal-item,
  .card .card-link,
  .works-item,
  a.explorations-item,
  .cards--metiers-bergerac .card-read-more,
  .chat-agent__sources a,
  .btn,
  .btn-primary,
  .btn-cta,
  .btn-ghost,
  .btn-brand,
  .btn-accent,
  .site-footer .brand,
  .logo-strip-track a,
  .blog-article__share-btn,
  .blog-article__share-item
)::after,
:is(
  .brand,
  .skip-link,
  .btn,
  .btn-primary,
  .btn-cta,
  .btn-ghost,
  .btn-brand,
  .btn-accent,
  .site-footer .brand,
  .logo-strip-track a,
  .blog-article__share-btn,
  .blog-article__share-item
)::before {
  content: none;
  display: none;
}
/* UI : pas de dégradé clip texte (garde color / currentColor des enfants) */
:is(
  .brand,
  .skip-link,
  .nav-mobile a,
  .nav-mobile .nav-mobile-cta a,
  .toc a,
  .journal-item,
  .card .card-link,
  .works-item,
  a.explorations-item,
  .cards--metiers-bergerac .card-read-more,
  .chat-agent__sources a,
  .btn,
  .btn-primary,
  .btn-cta,
  .btn-ghost,
  .btn-brand,
  .btn-accent,
  .site-footer .brand,
  .logo-strip-track a,
  .blog-article__share-btn,
  .blog-article__share-item
):is(:hover, :focus-visible) {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

::selection {
  background: color-mix(in srgb, var(--brand-secondary) 72%, var(--text));
  color: var(--bg);
}

/* --- Accessibility --- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--text); color: var(--bg); padding: var(--sp-3) var(--sp-5);
  z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid #89AACC; outline-offset: 3px; }

/* --- Layout helpers --- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--sp-5); }
.wrap-tight { width: 100%; max-width: var(--wrap-tight); margin: 0 auto; padding-inline: var(--sp-5); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding-inline: var(--sp-5); }
.section { padding-block: clamp(4rem, 9vw, 7rem); position: relative; }
.section--compact { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-soft {
  background:
    linear-gradient(
      168deg,
      color-mix(in srgb, var(--brand-secondary) 14%, var(--surface)) 0%,
      var(--surface) 40%,
      color-mix(in srgb, var(--brand-tertiary) 11%, var(--surface)) 100%
    );
}
.section-dim {
  background: linear-gradient(
    185deg,
    color-mix(in srgb, var(--brand-tertiary) 12%, var(--surface-2)),
    color-mix(in srgb, var(--brand-secondary) 6%, var(--surface-2))
  );
}

/* ============================================================
   Accueil : système d'alternance unifié (refonte v2)
   Principe : UN mesh partagé + variation d'angle/teinte subtile,
   UN masque de bord symétrique, transitions ink↔couleur propres.
   Recherche appliquée :
   - Gestalt : loi de continuité (transitions fluides sans cassure)
   - Law of common region : ink bands = pauses visuelles intentionnelles
   - Variance tonale < 8% entre sections adjacentes (éviter la fatigue rétinienne)
   - Fade symétrique 10% (évite les bandes horizontales perçues : Mach bands)
   ============================================================ */
:root {
  /* Marquee footer : une seule durée, boucle = 2× .marquee-seg + keyframes -50% (ne pas retirer la copie) */
  --marquee-duration: 42s;
  /* Mesh unique : base TRANSPARENTE (pas --bg).
     Raison : le mesh se pose en ::before sur des sections aux fonds variés
     (section-soft, section-dim, solid --bg, hero image au-dessus). Avec une base
     transparente, la couleur de la section sous-jacente transparaît uniformément
     et les raccords d'une section à l'autre deviennent invisibles. */
  /* Dark : opacité mesh +~25–30% relatif (light redéfinit --home-mesh) */
  --home-mesh: linear-gradient(
    var(--home-angle, 168deg),
    color-mix(in srgb, var(--brand-secondary) 18%, transparent) 0%,
    transparent 45%,
    color-mix(in srgb, var(--brand-tertiary) 15%, transparent) 100%
  );
  /* Masque de bord : fade généreux 14% haut & bas.
     Chaque section traverse : noir (0-14%) → couleur (14-86%) → noir (86-100%).
     Résultat à la jonction de deux sections : noir (fin A) → noir (début B) :
     aucune cassure de couleur, rythme "respiré" comme sur la homepage. */
  --home-edge: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  /* Jonction avec un ink band : fade asymétrique plus long côté ink */
  --home-edge-to-ink: linear-gradient(to bottom, transparent 0%, black 14%, black 74%, transparent 100%);
  --home-edge-from-ink: linear-gradient(to bottom, transparent 0%, transparent 26%, black 32%, black 86%, transparent 100%);
}

/* Forcer le fond noir de base sur toutes les sections qui reçoivent le mesh.
   Sans ça, .section-soft / .section-dim imposent leur propre gradient et le
   fade du mesh révèle leur teinte : on perd la transition via noir. */
main > section.section:not(.section--ink) {
  background: var(--bg);
}

/* Jonctions ink : masques sur le calque mesh (seul le ::before) : le spot (::after) ne doit pas être masqué. */
main > section.section:not(.section--ink):has(+ .section--ink)::before {
  mask-image: var(--home-edge-to-ink);
  -webkit-mask-image: var(--home-edge-to-ink);
}
main > section.section--ink + section.section:not(.section--ink)::before {
  mask-image: var(--home-edge-from-ink);
  -webkit-mask-image: var(--home-edge-from-ink);
}

main > section.section > *:not(dialog) {
  position: relative;
  z-index: 2;
}

/* Ink bands : pauses visuelles (loi de common region) + halo curseur (même radial, fixed au viewport). */
main > section.section--ink,
main > section.section--ink.section-soft {
  background: var(--ink);
  border-block: 1px solid var(--stroke);
}
/* Sections ink : spot dynamique géré par .r24-spot[data-tone="ink"] global, pas de halo statique. */
main > section.section--ink::before,
main > section.section--ink::after { display: none; }

/* : Sections courantes : mesh en ::before, spot en ::after (entre mesh et contenu : backdrop-filter OK) : */
main > section.section:not(.section--ink)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    var(--home-mesh),
    radial-gradient(ellipse 85% 60% at 12% 22%, color-mix(in srgb, var(--brand-secondary) 32%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse 70% 75% at 88% 80%, color-mix(in srgb, var(--brand-tertiary) 28%, transparent) 0%, transparent 60%);
  background-attachment: scroll, scroll, scroll;
  mask-image: var(--home-edge);
  -webkit-mask-image: var(--home-edge);
}
/* Dark only : cran de plus sur les radiaux section (light garde les valeurs ci-dessus) */
html[data-theme="dark"] main > section.section:not(.section--ink)::before {
  background:
    var(--home-mesh),
    radial-gradient(ellipse 85% 60% at 12% 22%, color-mix(in srgb, var(--brand-secondary) 40%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse 70% 75% at 88% 80%, color-mix(in srgb, var(--brand-tertiary) 35%, transparent) 0%, transparent 60%);
}
html[data-theme="dark"] main > section.explorations::before {
  background:
    linear-gradient(hsl(0 0% 0% / 0.2), hsl(0 0% 0% / 0.2)),
    var(--home-mesh),
    radial-gradient(ellipse 55% 80% at 50% 50%, color-mix(in srgb, var(--brand-secondary) 26%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 45% 65% at 8% 45%, color-mix(in srgb, var(--brand-tertiary) 28%, transparent) 0%, transparent 60%);
}
/* Spot dynamique géré par .r24-spot global → pas de halo statique sur le ::after. */
main > section.section:not(.section--ink)::after { display: none; }

/* : Explorations : mesh ::before, spot ::after : */
main > section.explorations { --home-angle: 168deg; background: var(--bg); }
main > section.explorations::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(hsl(0 0% 0% / 0.2), hsl(0 0% 0% / 0.2)),
    var(--home-mesh),
    radial-gradient(ellipse 55% 80% at 50% 50%, color-mix(in srgb, var(--brand-secondary) 20%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 45% 65% at 8% 45%, color-mix(in srgb, var(--brand-tertiary) 22%, transparent) 0%, transparent 60%);
  background-attachment: scroll, scroll, scroll, scroll;
  mask-image: var(--home-edge);
  -webkit-mask-image: var(--home-edge);
}
/* Spot dynamique géré par .r24-spot global → pas de halo statique sur le ::after. */
main > section.explorations::after { display: none; }
/* Jonction ink → explorations (balise sans .section) : masque sur le mesh = ::before */
main > section.section--ink + section.explorations::before {
  mask-image: var(--home-edge-from-ink);
  -webkit-mask-image: var(--home-edge-from-ink);
}
main > section.explorations:has(+ .section--ink)::before {
  mask-image: var(--home-edge-to-ink);
  -webkit-mask-image: var(--home-edge-to-ink);
}
main > section.explorations .explorations-columns { z-index: 1; }
main > section.explorations .explorations-content { z-index: 2; }

/* ── Transitions ink ↔ couleur ──────────────────────────────
   Une section colorée voisine d'un ink reçoit un gradient interne
   qui "fond" son extrémité adjacente vers le noir : évite toute
   cassure brutale. La largeur du fondu est constante (14vh / 8rem)
   pour un rythme prévisible. */

/* Colorée → Ink : extrémité basse assombrie */
main > section.section:not(.section--ink):has(+ .section--ink) {
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) calc(100% - 14vh), var(--ink) 100%);
}
/* Ink → Colorée : extrémité haute assombrie */
main > section.section--ink + section.section:not(.section--ink) {
  background: linear-gradient(to bottom, var(--ink) 0%, var(--bg) 14vh, var(--bg) 100%);
}

@keyframes homeSectionAuroraAir {
  0% {
    transform: translate(-11%, -3%) scale(1.04) rotate(-1.2deg);
    opacity: 0.82;
  }
  50% {
    transform: translate(10%, 2%) scale(1.1) rotate(0.5deg);
    opacity: 1;
  }
  100% {
    transform: translate(4%, 8%) scale(1.06) rotate(1.4deg);
    opacity: 0.88;
  }
}
@keyframes homeSectionGrainAir {
  0% { transform: translate(0, 0); }
  100% { transform: translate(0.8%, 0); }
}
@keyframes homeSectionAuroraVelvet {
  0% {
    transform: translate(3%, 6%) scale(1.08) rotate(1.5deg);
    opacity: 0.74;
  }
  50% {
    transform: translate(-8%, -9%) scale(1.12) rotate(-0.8deg);
    opacity: 1;
  }
  100% {
    transform: translate(6%, -4%) scale(1.05) rotate(0.6deg);
    opacity: 0.84;
  }
}
@keyframes homeSectionGrainVelvet {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-0.4%, 0.5%) rotate(0.2deg); }
}
@keyframes homeExplorationsAurora {
  0% {
    transform: translate(0, 4%) scale(1.06);
    opacity: 0.76;
  }
  50% {
    transform: translate(0, -1%) scale(1.09);
    opacity: 0.94;
  }
  100% {
    transform: translate(0, -6%) scale(1.11);
    opacity: 1;
  }
}
@keyframes homeExplorationsGrain {
  0% { transform: translate(0, 0); opacity: 0.08; }
  100% { transform: translate(0, 1.2%); opacity: 0.13; }
}

/* Typewriter : curseur clignotant à la fin du h1 hero */
.typewriter-cursor {
  display: inline-block;
  width: 0.06em;
  height: 0.82em;
  margin-left: 0.08em;
  vertical-align: -0.08em;
  background: currentColor;
  animation: typewriterBlink 0.85s step-end infinite;
}
@keyframes typewriterBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .typewriter-cursor { animation: none; opacity: 0.7; }
}

/*
  Plaques de verre (data-glass-plate) : specular highlight qui SUIT la souris
  (radial centré sur --gp-x/--gp-y, pas de bande linéaire). Le rim opposé est
  éclairé subtilement via un box-shadow inset directionnel piloté par --gp-angle.
*/
[data-glass-plate] {
  --gp-x: 50%;
  --gp-y: 50%;
  --gp-angle: 0deg;
  transition: box-shadow 0.45s var(--ease-out), border-color 0.4s var(--ease-out), background 0.45s var(--ease-out);
}
[data-glass-plate]::before {
  transition: opacity 0.55s var(--ease-out);
}
:is(.card, .row, .stat, .hero-card, .journal-item, .faq details, .zone-grid li, .prose blockquote, .btn:not(.btn-cta):not(.btn-primary), .explorations-item, .quote, .testimonial-card, .cta-band, .blog-featured)[data-glass-plate]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  /* Specular radial centré sur le curseur — vrai reflet glossy. */
  background: radial-gradient(
    circle 16rem at var(--gp-x) var(--gp-y),
    hsl(0 0% 100% / 0.18) 0%,
    hsl(0 0% 100% / 0.07) 22%,
    transparent 50%
  );
  mix-blend-mode: plus-lighter;
  opacity: 0.9;
  animation: r24-specular-in 0.45s var(--ease-out) both;
}
@keyframes r24-specular-in {
  from { opacity: 0; }
  to { opacity: 0.9; }
}
/* Bento + stat : on superpose le pattern halftone sous le specular (multi-layer
   dans le même ::before) — pas besoin d'un second pseudo. */
:is(.bento .card, .stat)[data-glass-plate]::before {
  background:
    radial-gradient(
      circle 16rem at var(--gp-x) var(--gp-y),
      hsl(0 0% 100% / 0.18) 0%,
      hsl(0 0% 100% / 0.07) 22%,
      transparent 50%
    ),
    var(--r24-glass-dots-pattern);
}
/* Rim doux qui s'éclaire côté curseur — donne l'épaisseur du verre. */
:is(.card, .hero-card, .quote, .testimonial-card, .cta-band, .journal-item, .blog-featured)[data-glass-plate] {
  box-shadow:
    inset calc(cos(var(--gp-angle)) * 1.5rem) calc(sin(var(--gp-angle)) * 1.5rem) 2rem -1.5rem hsl(0 0% 100% / 0.18),
    inset 0 1px 0 hsl(0 0% 100% / 0.08),
    var(--glass-shadow, 0 0.75rem 2.25rem hsl(0 0% 0% / 0.22));
}
.works-item[data-glass-plate]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 0;
  background: radial-gradient(
    circle 12rem at var(--gp-x) var(--gp-y),
    hsl(0 0% 100% / 0.13) 0%,
    hsl(0 0% 100% / 0.04) 22%,
    transparent 48%
  );
  mix-blend-mode: plus-lighter;
  opacity: 1;
  animation: r24-specular-in 0.45s var(--ease-out) both;
}

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--lh-snug);
  color: var(--text);
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-block-end: var(--sp-4); letter-spacing: -0.025em; }
h2[id] { scroll-margin-top: clamp(5.5rem, 14vw, 7.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-block-end: var(--sp-3); }
h4 { font-size: var(--fs-lg); margin-block-end: var(--sp-2); }

h1 strong, h2 strong, h3 strong, h4 strong { color: inherit; }

p { max-width: 68ch; color: var(--text-dim); }
p + p { margin-top: var(--sp-4); }

/* Gras : teinte marque (titres h1–h4 restent gérés par leurs règles) */
strong,
b {
  color: color-mix(in srgb, var(--brand-secondary) 26%, color-mix(in srgb, var(--brand-tertiary) 12%, var(--text)));
  font-weight: 600;
}

.lead {
  font-size: clamp(var(--fs-md), 1.4vw, var(--fs-lg));
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 56ch;
}
.lead .lead-highlight {
  display: inline;
  padding: 0.08em 0.28em;
  font: inherit;
  font-weight: 500;
  line-height: inherit;
  color: var(--bg);
  background: var(--text);
  border-radius: 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Eyebrow : uppercase, tracking large, muted : signature */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-secondary) 22%, var(--muted));
  padding: 0;
  border: 0;
  background: none;
  margin-block-end: var(--sp-5);
  border-radius: 0;
}
.eyebrow::before {
  content: "";
  width: 1.5rem; height: 1px;
  background: linear-gradient(90deg, var(--brand-secondary), var(--brand-tertiary));
  border-radius: 0;
  opacity: 1;
}
h2.eyebrow {
  line-height: var(--lh-normal);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.3em;
  margin-block-end: var(--sp-5);
}
.eyebrow--identity {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.eyebrow--identity::before {
  background: var(--text-dim);
}

.muted { color: color-mix(in srgb, var(--brand-tertiary) 16%, var(--muted)); }

/* Serif italic : réservé aux moments "éditoriaux" (nom, mot cyclé, em) */
.serif-italic,
em.serif,
.hero h1:not(.hero-sub) em,
.hero .hero-headline em,
.role-cycle {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* --- Buttons : pill + verre (sans anneau dégradé au survol) --- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.85rem 1.5rem;
  font-weight: 500;
  font-size: var(--fs-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.btn:hover { transform: none; }

/* Ghost : verre neutre + bordure */
.btn-ghost {
  background: var(--glass-bg);
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand-secondary) 28%, var(--stroke-2));
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
}
.btn-ghost:hover {
  background: var(--glass-bg-strong);
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand-secondary) 42%, transparent);
}

/* Kept aliases for compat (même logique verre) */
.btn-brand {
  background: color-mix(in srgb, var(--text) 82%, transparent);
  color: var(--bg);
  border-color: hsl(0 0% 100% / 0.2);
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
}
.btn-brand:hover { background: color-mix(in srgb, var(--bg) 52%, transparent); color: var(--text); border-color: var(--glass-border); }
.btn-accent {
  background: color-mix(in srgb, var(--text) 82%, transparent);
  color: var(--bg);
  border-color: hsl(0 0% 100% / 0.2);
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
}
.btn-accent:hover { background: color-mix(in srgb, var(--bg) 52%, transparent); color: var(--text); border-color: var(--glass-border); }

/* CTA prioritaire : plaque claire (off-white DA), texte sombre, contraste élevé sur fond dark. */
.btn-primary,
.btn-cta {
  background: var(--text);
  color: var(--bg);
  border-color: color-mix(in srgb, var(--text) 68%, var(--stroke-2));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.35),
    0 0.25rem 0.75rem color-mix(in srgb, var(--bg) 32%, transparent);
}
.btn-primary:hover,
.btn-cta:hover {
  background: color-mix(in srgb, var(--text) 90%, var(--brand-secondary));
  color: var(--bg);
  border-color: color-mix(in srgb, var(--brand-secondary) 24%, var(--text));
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.42),
    0 0.35rem 1rem color-mix(in srgb, var(--bg) 38%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand-secondary) 18%, transparent);
}
.btn-primary:focus-visible,
.btn-cta:focus-visible {
  outline-color: color-mix(in srgb, var(--brand-secondary) 72%, var(--text));
}

/* Cartes / heroes : verrouille le rendu opaque clair. */
.card-foot__cta.btn-cta,
.hero-cta .btn-cta {
  background: var(--text);
  color: var(--bg);
  border-color: color-mix(in srgb, var(--text) 68%, var(--stroke-2));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.35),
    0 0.25rem 0.75rem color-mix(in srgb, var(--bg) 32%, transparent);
}
.card-foot__cta.btn-cta:hover,
.hero-cta .btn-cta:hover {
  background: color-mix(in srgb, var(--text) 90%, var(--brand-secondary));
  color: var(--bg);
  border-color: color-mix(in srgb, var(--brand-secondary) 24%, var(--text));
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.42),
    0 0.35rem 1rem color-mix(in srgb, var(--bg) 38%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand-secondary) 18%, transparent);
}

/* Bandeau CTA clair : CTA sombre opaque (contraste sur fond clair). */
.cta-band .btn-cta {
  position: relative;
  z-index: 2;
  background-color: var(--bg);
  background-image: none;
  color: var(--text);
  border-color: var(--bg);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal;
  box-shadow: none;
}
.cta-band .btn-cta:hover,
.cta-band .btn-cta:focus-visible {
  background-color: color-mix(in srgb, var(--brand-secondary) 72%, var(--bg));
  background-image: none;
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand-secondary) 72%, var(--bg));
  box-shadow: none;
}
.cta-band .btn-ghost {
  background: transparent;
  color: color-mix(in srgb, var(--bg) 86%, var(--brand-secondary));
  border-color: color-mix(in srgb, var(--bg) 62%, var(--brand-secondary));
  box-shadow: none;
}
.cta-band .btn-ghost:hover,
.cta-band .btn-ghost:focus-visible {
  background: color-mix(in srgb, var(--text) 78%, var(--brand-secondary));
  color: var(--bg);
  border-color: color-mix(in srgb, var(--bg) 78%, var(--brand-secondary));
}
.cta-band .btn:focus-visible {
  outline-color: var(--bg);
  outline-offset: 3px;
}

.btn-lg { padding: 1rem 1.75rem; font-size: var(--fs-base); }
.btn .btn-icon {
  width: 1.125em;
  height: 1.125em;
  flex-shrink: 0;
}

/* --- Header / Nav : pill flottante centrée glass --- */
.site-header {
  position: fixed;
  top: 1rem; left: 0; right: 0;
  z-index: 50;
  display: flex; justify-content: center;
  pointer-events: none;
  transition: top var(--t) var(--ease);
}
/* Masque dégradé fixé en haut de viewport : caché par défaut (page non scrollée),
   apparaît dès qu'on scrolle pour empêcher le contenu de rester lisible derrière la pill.
   z-index 49 (juste sous la pill z-50). pointer-events:none → ne bloque rien. */
.site-header::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 5rem;
  background: linear-gradient(180deg,
    hsl(0 0% 3% / 0.85) 0%,
    hsl(0 0% 3% / 0.6) 45%,
    hsl(0 0% 3% / 0.25) 75%,
    transparent 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  z-index: -1;
}
.site-header.is-scrolled::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .site-header::before { transition: none; }
}
.site-header > .wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  padding-block: 0.7rem;
  display: flex; align-items: center; gap: var(--sp-4);
  overflow: visible;
  background: hsl(0 0% 8% / 0.62);
  border: 0;
  border-bottom: 1px solid hsl(0 0% 100% / 0.07);
  border-radius: var(--radius-full);
  backdrop-filter: saturate(180%) contrast(1.05) blur(20px);
  -webkit-backdrop-filter: saturate(180%) contrast(1.05) blur(20px);
  /* Verre sans cadre : highlight haut discret + ombre de pose (pas de rim 4 côtés) */
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.08),
    0 0.5rem 1.25rem hsl(0 0% 0% / 0.18);
  pointer-events: auto;
  transition: box-shadow var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), padding var(--t) var(--ease);
}
.site-header.is-scrolled > .wrap {
  background: hsl(0 0% 5% / 0.85);
  border-bottom-color: hsl(0 0% 100% / 0.1);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.1),
    0 0.65rem 1.75rem hsl(0 0% 0% / 0.32);
}
/* Mobile / compact : barre collée au top (pas de pill flottante) */
@media (max-width: 767.98px) {
  .site-header {
    top: 0;
    justify-content: stretch;
    padding-top: env(safe-area-inset-top, 0);
  }
  .site-header > .wrap {
    max-width: none;
    margin-inline: 0;
    border-radius: 0;
    box-shadow:
      inset 0 1px 0 hsl(0 0% 100% / 0.06),
      0 0.35rem 1rem hsl(0 0% 0% / 0.24);
  }
  .site-header.is-scrolled > .wrap {
    box-shadow:
      inset 0 1px 0 hsl(0 0% 100% / 0.08),
      0 0.5rem 1.25rem hsl(0 0% 0% / 0.32);
  }
}

.brand { display: inline-flex; align-items: center; gap: 0; color: var(--text); text-decoration: none; padding: 0 0.25rem; }
.brand:hover { color: var(--text); }
.brand-mark {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  flex: none;
  overflow: visible;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform var(--t) var(--ease), filter var(--t) var(--ease);
}
.brand:hover .brand-mark img {
  transform: rotate(-6deg) scale(1.06);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--brand-secondary) 72%, transparent)) drop-shadow(0 0 28px color-mix(in srgb, var(--brand-tertiary) 28%, transparent));
}
/* Header : logo seul (le nom / baseline est porté ailleurs, ex. hero) */
.site-header .brand-name { display: none; }
.brand-name { flex-direction: column; line-height: 1.1; font-family: var(--font-sans); font-weight: 500; }
.brand-name strong { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; }
.brand-name span { font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; }

/* Vertical separator in header : discret : masqué en mobile (nav inline absente)
   (sinon les deux nav-sep apparaissent collés → effet "double trait"). */
.site-header > .wrap > .nav-sep {
  width: 1px; height: 1.125rem;
  background: hsl(0 0% 100% / 0.08);
  flex: none;
}
@media (max-width: 767.98px) {
  .site-header > .wrap > .nav-sep { display: none; }
}

.nav-primary {
  display: none;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.1rem;
  flex: 1;
  justify-content: center;
  min-width: 0;
  /* Nav top-level : filet ~75 % centré (body reste à 100 %) */
  --link-line-w: 75%;
}
.nav-primary > a,
.nav-primary .nav-group-toggle {
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-primary .nav-group {
  flex-shrink: 0;
}
.nav-primary a {
  position: relative;
  padding: 0.55rem 0.95rem;
  color: var(--text-dim);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
  border-radius: var(--radius-full);
  transition: color var(--link-motion-leave) var(--ease);
}
/* Indicateur hover/actif : même filet animé que les liens texte (vars --link-line-*) */
.nav-primary a::after,
.nav-primary .nav-group-toggle::after {
  content: "";
  position: absolute;
  left: calc((100% - var(--link-line-w)) / 2);
  width: var(--link-line-w);
  bottom: -0.12em;
  height: var(--link-line-h);
  background: var(--link-line-hover);
  transform: scaleX(0);
  transform-origin: 100%;
  pointer-events: none;
  transition:
    transform var(--link-motion-leave) var(--ease-out),
    height var(--link-motion-leave) var(--ease-out),
    bottom var(--link-motion-leave) var(--ease-out);
}
/* Toggle : hors chevron+gap (sinon le filet paraît décalé à droite sous le libellé) */
.nav-primary .nav-group-toggle::after {
  --nav-line-trail: calc(0.85em + 0.35em);
  width: calc((100% - var(--nav-line-trail)) * 0.75);
  left: calc((100% - var(--nav-line-trail)) * 0.125);
}
/* Dégradé texte + fill transparent : top-level uniquement (pas .nav-submenu) */
.nav-primary > a:hover,
.nav-primary > a:focus-visible,
.nav-primary .nav-group-toggle:hover,
.nav-primary .nav-group-toggle:focus-visible {
  color: var(--brand-secondary);
  background-image: var(--link-line-hover);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: color var(--link-motion-enter) var(--ease-out);
}
.nav-primary > a:hover::after,
.nav-primary > a:focus-visible::after,
.nav-primary .nav-group-toggle:hover::after,
.nav-primary .nav-group-toggle:focus-visible::after,
.nav-primary .nav-group.is-open .nav-group-toggle::after,
.nav-primary > a.is-current::after,
.nav-primary .nav-group-toggle.is-current::after {
  transform: scaleX(1);
  transform-origin: 0%;
  height: var(--link-line-h-hover);
  bottom: -0.14em;
  transition:
    transform var(--link-motion-enter) cubic-bezier(0.22, 1, 0.36, 1),
    height var(--link-motion-enter) var(--ease-out),
    bottom var(--link-motion-enter) var(--ease-out);
}
.nav-primary > a.is-current {
  color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
  .nav-primary > a::after,
  .nav-primary .nav-group-toggle::after {
    transition: none;
  }
}

/* --- Nav group (menu déroulant desktop + accordéon mobile) --- */
.nav-group {
  position: relative;
  z-index: 1;
}
.nav-group-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.nav-chevron {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  opacity: 0.7;
  transition: transform 260ms var(--ease-out), opacity var(--t-fast) var(--ease);
}
.nav-group:hover .nav-chevron,
.nav-group:focus-within .nav-chevron {
  opacity: 1;
}
.nav-group.is-open .nav-chevron,
.nav-group[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* --- Nav group : apparence desktop --- */
.nav-primary .nav-group-toggle {
  position: relative;
  padding: 0.55rem 0.95rem;
  color: var(--text-dim);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
  border-radius: var(--radius-full);
  transition: color var(--link-motion-leave) var(--ease);
}
.nav-primary .nav-group.is-open .nav-group-toggle {
  color: var(--text);
}
.nav-primary .nav-group-toggle.is-current {
  color: var(--text);
}
/* Au-dessus des voisins flex pour que le panneau reste cliquable */
.nav-primary .nav-group:hover,
.nav-primary .nav-group:focus-within,
.nav-primary .nav-group.is-open {
  z-index: 30;
}
/* Pont invisible sous le bouton : évite de perdre le survol entre trigger et liste */
.nav-primary .nav-group::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.65rem;
  display: none;
}
@media (min-width: 960px) {
  .nav-primary .nav-group::after {
    display: block;
  }
}
.nav-primary .nav-submenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  min-width: 13rem;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: hsl(0 0% 6% / 0.92);
  border: 1px solid hsl(0 0% 100% / 0.08);
  border-radius: var(--radius-lg);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  box-shadow: 0 1.25rem 2.75rem hsl(0 0% 0% / 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -0.45rem) scale(0.98);
  transform-origin: top center;
  transition: opacity 220ms var(--ease-out),
    transform 260ms var(--ease-out),
    visibility 260ms var(--ease-out);
  z-index: 51;
}
.nav-primary .nav-group:hover .nav-submenu,
.nav-primary .nav-group:focus-within .nav-submenu,
.nav-primary .nav-group.is-open .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}
.nav-primary .nav-submenu a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.65rem 0.95rem 0.65rem 1.15rem;
  white-space: nowrap;
  color: var(--text-dim);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  transition:
    color 380ms cubic-bezier(0.4, 0, 0.2, 1),
    background 480ms cubic-bezier(0.22, 1, 0.36, 1),
    padding-left 620ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-primary .nav-submenu a::after { display: none; }
.nav-primary .nav-submenu a::before {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 50%;
  width: 1.1rem;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--brand-secondary), var(--brand-tertiary));
  opacity: 0;
  transform: translateY(-50%) scaleX(0.2);
  transform-origin: left center;
  pointer-events: none;
  transition:
    opacity 380ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-primary .nav-submenu a:hover,
.nav-primary .nav-submenu a:focus-visible {
  color: var(--text);
  background: hsl(0 0% 100% / 0.05);
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  padding-left: 2.5rem;
  transform: translateX(0.1rem);
}
.nav-primary .nav-submenu a:hover::before {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
}
.nav-primary .nav-submenu a.is-current {
  color: var(--text);
  padding-left: 2.5rem;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
.nav-primary .nav-submenu a.is-current::before {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
  width: 1.25rem;
}
@media (prefers-reduced-motion: reduce) {
  .nav-primary .nav-submenu a,
  .nav-primary .nav-submenu a::before {
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
    transform: none;
  }
  .nav-primary .nav-submenu a:hover,
  .nav-primary .nav-submenu a.is-current {
    transform: none;
  }
}
.nav-primary .nav-submenu .nav-submenu__disabled {
  display: flex;
  align-items: center;
  padding: 0.65rem 0.95rem 0.65rem 1.15rem;
  white-space: nowrap;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
  cursor: default;
  pointer-events: none;
}

/* Toujours visible (toggle thème) ; « Audit » dès 960px ; collé à droite */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
}
.nav-cta .btn-cta { display: none; }
.nav-cta .btn {
  padding: 0.55rem 1.05rem;
  font-size: 0.8125rem;
  gap: 0.4rem;
  letter-spacing: -0.005em;
}
.nav-cta .btn .btn-icon {
  width: 0.9em;
  height: 0.9em;
}
.nav-cta .btn:hover .btn-icon { transform: none; }

/* Mobile trigger : icônes "embarquées" dans la plaque glass : pas de bordure fermée par défaut (le rim de la pill structure déjà),
   feedback tactile sur :active (ink-press), hairline séparateur entre contact/menu. */
.nav-toggle {
  display: inline-grid; place-items: center;
  /* 40×40 visuel = 44 hit zone via padding inset (Apple HIG) */
  width: 40px; height: 40px;
  background: transparent;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    color 200ms var(--ease-out),
    transform 240ms cubic-bezier(0.34, 1.1, 0.64, 1);
}
.nav-toggle svg,
.nav-toggle .ph-icon {
  width: 18px;
  height: 18px;
  max-width: none;
  flex: none;
  stroke-width: 1.4;
  transition: transform 240ms var(--ease-out);
}
.nav-contact {
  margin-right: 0;
  color: color-mix(in srgb, var(--text) 68%, transparent);
}
/* Mobile : logo à gauche, thème + enveloppe + burger collés à droite */
@media (max-width: 767.98px) {
  /* Même hauteur visuelle que .brand-mark (40px) */
  .site-header > .wrap > .nav-toggle {
    width: 40px;
    height: 40px;
  }
  /* Contrebalance le gap du wrap pour rapprocher les 2 icônes */
  .site-header > .wrap > .nav-contact + .nav-toggle {
    margin-left: calc(-0.55 * var(--sp-4));
  }
  .nav-contact + .nav-toggle::before {
    left: -0.35rem;
  }
}
.nav-toggle:hover {
  background: hsl(0 0% 100% / 0.07);
  border-color: hsl(0 0% 100% / 0.1);
  color: var(--text);
}
.nav-contact:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--brand-secondary) 10%, hsl(0 0% 100% / 0.05));
  border-color: color-mix(in srgb, var(--brand-secondary) 38%, hsl(0 0% 100% / 0.12));
}
.nav-toggle:hover svg { transform: scale(1.06); }
.nav-toggle:active {
  transform: scale(0.92);
  background: hsl(0 0% 100% / 0.12);
  transition-duration: 120ms;
}
.nav-toggle:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-secondary) 55%, hsl(0 0% 100% / 0.2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-secondary) 22%, transparent);
}
/* Hairline séparateur entre "nav-contact" et "nav-toggle" : fade top/bottom */
.nav-contact + .nav-toggle::before {
  content: "";
  position: absolute;
  left: -0.55rem;
  top: 26%; bottom: 26%;
  width: 0.0625rem;
  background: linear-gradient(180deg, transparent, hsl(0 0% 100% / 0.16) 50%, transparent);
  pointer-events: none;
}
/* État "ouvert" : chip glass marqué + icône close */
.nav-toggle[aria-expanded="true"] {
  background: hsl(0 0% 100% / 0.1);
  border-color: hsl(0 0% 100% / 0.16);
  color: var(--text);
}
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle .icon-close { display: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle, .nav-toggle svg { transition: none; }
  .nav-toggle:active { transform: none; }
  .nav-toggle:hover svg { transform: none; }
}

/* ============================================
   Premium mobile drawer
   ============================================ */
html.nav-locked,
html.nav-locked body { overflow: hidden; touch-action: none; }

.nav-scrim {
  position: fixed; inset: 0;
  z-index: 48;
  background: radial-gradient(120% 80% at 80% 10%, hsl(0 0% 0% / 0.55), hsl(0 0% 0% / 0.78));
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease-out), visibility 0s linear 320ms;
}
.nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms var(--ease-out), visibility 0s linear 0s;
}

.nav-mobile {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 22rem);
  z-index: 49;
  /* CRITIQUE : .site-header parent a pointer-events:none (pattern header flottant) ;
     pointer-events HÉRITE → sans cette ligne, tous les clics dans le drawer passent
     à travers vers le scrim → fermeture du menu. */
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 4vw, 1.6rem) clamp(1rem, 3.6vw, 1.35rem) clamp(1rem, 3.6vw, 1.35rem);
  gap: 0.15rem;
  /* Verre tangible : base sombre SEMI-transparente (0.55–0.66) → le backdrop-filter
     traverse vraiment ; halos brand en angles ; double scrim derrière (z-48) déjà flouté
     → effet de profondeur "frosted glass" Apple-like. */
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--brand-secondary) 26%, transparent), transparent 55%),
    radial-gradient(80% 50% at 0% 100%, color-mix(in srgb, var(--brand-tertiary) 18%, transparent), transparent 60%),
    linear-gradient(180deg, hsl(0 0% 8% / 0.55) 0%, hsl(0 0% 4% / 0.66) 100%);
  border-left: 1px solid hsl(0 0% 100% / 0.1);
  /* Empilement Apple liquid-glass :
       1) rim intérieur très doux  → définit le bord
       2) highlight bord gauche    → lumière rasante (drawer attaqué par la droite)
       3) highlight haut            → reflet spéculaire du bord sup.
       4) ombre intérieure basse    → épaisseur de la plaque
       5+6) ombres ambiante + contact → pose sur le scrim */
  box-shadow:
    inset 0 0 0 0.5px hsl(0 0% 100% / 0.04),
    inset 1px 0 0 hsl(0 0% 100% / 0.14),
    inset 0 1px 0 hsl(0 0% 100% / 0.12),
    inset 0 -1px 0 hsl(0 0% 0% / 0.22),
    -2rem 0 4rem -1rem hsl(0 0% 0% / 0.55),
    -0.5rem 0 1rem -0.5rem hsl(0 0% 0% / 0.4);
  backdrop-filter: blur(28px) saturate(190%) contrast(1.06) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(1.06) brightness(1.04);
  transform: translate3d(102%, 0, 0);
  visibility: hidden;
  transition:
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 560ms;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile::before {
  content: "";
  position: absolute;
  top: clamp(1.1rem, 4vw, 1.6rem); bottom: clamp(1rem, 3.6vw, 1.35rem);
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand-secondary) 55%, transparent), transparent);
  opacity: 0;
  transition: opacity 520ms var(--ease-out) 200ms;
  pointer-events: none;
  z-index: 1;
}
/* Sheen spéculaire : gradient luminance haut (light from above) + subtle vignette à droite */
.nav-mobile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, hsl(0 0% 100% / 0.06) 0%, transparent 32%),
    radial-gradient(140% 80% at 100% 0%, hsl(0 0% 100% / 0.04), transparent 50%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 520ms var(--ease-out) 240ms;
  z-index: 0;
}
.nav-mobile.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition:
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}
.nav-mobile.is-open::before { opacity: 1; }
.nav-mobile.is-open::after { opacity: 1; }
/* Les enfants restent au-dessus des décorations */
.nav-mobile > * { position: relative; z-index: 2; }

.nav-mobile-close {
  align-self: flex-end;
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  margin: -0.15rem -0.15rem 0.35rem 0;
  background: transparent;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    color 200ms var(--ease-out),
    transform 240ms cubic-bezier(0.34, 1.1, 0.64, 1);
}
.nav-mobile-close:hover {
  color: var(--text);
  background: hsl(0 0% 100% / 0.07);
  border-color: hsl(0 0% 100% / 0.12);
}
.nav-mobile-close:active {
  transform: scale(0.92);
  background: hsl(0 0% 100% / 0.12);
  transition-duration: 120ms;
}
.nav-mobile-close:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-secondary) 55%, hsl(0 0% 100% / 0.2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-secondary) 22%, transparent);
}
.nav-mobile-close svg { width: 16px; height: 16px; stroke-width: 1.4; }

.nav-mobile-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in hsl, var(--text-dim) 60%, transparent);
  margin: 0.25rem 0.75rem 1.1rem;
  display: flex; align-items: center; gap: 0.55rem;
}
.nav-mobile-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, hsl(0 0% 100% / 0.12), transparent);
}

.nav-mobile > a,
.nav-mobile .nav-group-toggle {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.95rem 1rem;
  color: color-mix(in hsl, var(--text) 78%, transparent);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.04rem;
  letter-spacing: -0.01em;
  border-radius: var(--radius);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateX(14px);
  opacity: 0;
  transition:
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms var(--ease-out),
    color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    padding-left var(--t-fast) var(--ease);
}
/* Tap feedback (ink-press) : darken legèrement le fond sur :active */
.nav-mobile > a:active,
.nav-mobile .nav-group-toggle:active,
.nav-mobile .nav-submenu a:active {
  background: hsl(0 0% 100% / 0.05);
  transition-duration: 100ms;
}
.nav-mobile .nav-group-toggle { justify-content: space-between; }
.nav-mobile.is-open > a,
.nav-mobile.is-open .nav-group-toggle {
  transform: translateX(0);
  opacity: 1;
  transition-delay: calc(var(--nav-i, 0) * 55ms + 220ms), calc(var(--nav-i, 0) * 55ms + 220ms), 0s, 0s;
}
.nav-mobile > a::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 50%;
  width: 0.5rem;
  height: 1.5px;
  background: var(--accent-gradient);
  border-radius: 2px;
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: opacity var(--t-fast) var(--ease), transform 360ms var(--ease-out);
}
.nav-mobile > a:hover,
.nav-mobile > a.is-current,
.nav-mobile .nav-group-toggle:hover,
.nav-mobile .nav-group.is-open .nav-group-toggle,
.nav-mobile .nav-group-toggle.is-current { color: var(--text); }
.nav-mobile > a:hover,
.nav-mobile > a.is-current { padding-left: 1.55rem; }
.nav-mobile > a:hover::before,
.nav-mobile > a.is-current::before {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
}

.nav-mobile .nav-chevron {
  width: 1.05rem; height: 1.05rem;
  transition: transform 320ms var(--ease-out);
  opacity: 0.7;
}
.nav-mobile .nav-group.is-open .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-mobile .nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms var(--ease-out);
  margin: 0.15rem 0.5rem 0.25rem 1.1rem;
  border-left: 1px solid hsl(0 0% 100% / 0.08);
}
.nav-mobile .nav-submenu > div {
  overflow: hidden;
  min-height: 0;
  padding-left: 0.65rem;
}
.nav-mobile .nav-group.is-open .nav-submenu { grid-template-rows: 1fr; }
.nav-mobile .nav-submenu a {
  position: relative;
  display: block;
  padding: 0.6rem 0.85rem;
  font-size: 0.93rem;
  color: color-mix(in hsl, var(--text-dim) 85%, transparent);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.nav-mobile .nav-submenu a::before {
  content: "";
  position: absolute;
  left: 0.2rem; top: 50%;
  width: 0.35rem; height: 1px;
  background: currentColor;
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav-mobile .nav-submenu a:hover,
.nav-mobile .nav-submenu a.is-current { color: var(--text); padding-left: 1.15rem; }
.nav-mobile .nav-submenu a:hover::before,
.nav-mobile .nav-submenu a.is-current::before {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
}
.nav-mobile .nav-submenu .nav-submenu__disabled {
  display: block;
  padding: 0.6rem 0.85rem;
  font-size: 0.93rem;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  cursor: default;
  pointer-events: none;
}

.nav-mobile .nav-mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid hsl(0 0% 100% / 0.08);
  transform: translateY(10px);
  opacity: 0;
  transition: transform 520ms var(--ease-out), opacity 420ms var(--ease-out);
}
.nav-mobile.is-open .nav-mobile-cta {
  transform: translateY(0);
  opacity: 1;
  transition-delay: calc(var(--nav-i, 0) * 55ms + 260ms);
}
.nav-mobile .nav-mobile-cta a {
  justify-content: center;
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
}
.nav-mobile .nav-mobile-cta a::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-scrim,
  .nav-mobile,
  .nav-mobile > a,
  .nav-mobile .nav-group-toggle,
  .nav-mobile .nav-mobile-cta,
  .nav-mobile .nav-chevron,
  .nav-mobile .nav-submenu { transition-duration: 0.01ms !important; }
  .nav-mobile { transform: translate3d(0, 0, 0); }
  .nav-mobile > a,
  .nav-mobile .nav-group-toggle,
  .nav-mobile .nav-mobile-cta { transform: none; opacity: 1; }
}

/* Tablette+ : menu inline (plus de burger). CTA « Audit » dès desktop large. */
@media (min-width: 768px) {
  .nav-primary { display: inline-flex; align-items: center; flex-wrap: nowrap; }
  .nav-toggle { display: none; }
  .nav-primary a,
  .nav-primary .nav-group-toggle {
    padding-inline: 0.55rem;
    font-size: 0.8125rem;
  }
}
@media (min-width: 960px) {
  .nav-cta .btn-cta { display: inline-flex; }
  /* Compact : toggle thème + CTA Audit + libellés longs (nowrap) */
  .nav-primary a,
  .nav-primary .nav-group-toggle {
    padding-inline: 0.7rem;
    font-size: 0.875rem;
  }
}
@media (min-width: 1200px) {
  .nav-primary a,
  .nav-primary .nav-group-toggle {
    padding-inline: 0.85rem;
    font-size: 0.875rem;
  }
}
/* Tablette : enveloppe à droite (burger déjà masqué) */
@media (min-width: 768px) and (max-width: 959.98px) {
  .nav-contact {
    display: inline-grid;
    margin-left: 0;
    place-items: center;
  }
}

/* Reserve vertical space under fixed navbar */
body { padding-top: 0; }

/* --- Hero : base (toutes pages) --- */
.hero {
  position: relative;
  padding-block: 8rem 4rem;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
/* Pages secondaires avec fil d’Ariane (ex. à-propos) : même air sous header que .hero-media */
.hero:has(.breadcrumb):not(.hero-media):not(.hero--proof) {
  padding-block-start: clamp(6rem, 12vw, 9rem);
}
/* Hero immersif (index : .hero-bg radial, sans vidéo) */
.hero:has(> .hero-bg) {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: 9rem 5rem;
}

/* Fond immersif : radials marque (plus de vidéo) */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(60% 40% at 50% 45%, color-mix(in srgb, var(--brand-secondary) 52%, transparent) 0%, transparent 70%),
    radial-gradient(40% 50% at 70% 70%, color-mix(in srgb, var(--brand-tertiary) 46%, transparent) 0%, transparent 75%),
    var(--bg);
}
.hero-bg video {
  display: none;
}

/* Veil unifié : lisibilité (milieu — photo visible + texte lisible) */
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background: hsl(0 0% 0% / 0.16);
  pointer-events: none;
}
/* Fade vers --bg en bas : transition invisible avec la section suivante */
.hero-fade-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 12rem;
  z-index: 1;
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
  pointer-events: none;
}

.hero > .wrap {
  position: relative;
  z-index: 2;
}
.hero:has(> .hero-bg) > .wrap { text-align: center; }
.hero:has(> .hero-bg) .eyebrow { justify-content: center; margin-inline: auto; }
.hero:has(> .hero-bg) .eyebrow--identity {
  flex-wrap: wrap;
  max-width: min(100%, 42rem);
  text-wrap: balance;
}

/* Faux champ « recherche » : pill type Google dark, h1 sémantique + suggest GabIA */
.hero-search {
  position: relative;
  width: 100%;
  max-width: min(100%, 52rem);
  margin-inline: auto;
  margin-block-end: var(--sp-5);
  z-index: 4;
}
.hero-search.is-open {
  z-index: 36;
}
.hero-search.is-open .hero-search__panel {
  z-index: 1;
}
/* Suggest ouvert : sortir du piège stacking + overflow
   1) .hero { isolation:isolate } + main>section.section>* { z-index:2 } → la section
      suivante peignait AU-DESSUS du panel qui déborde du hero (home).
   2) .hero--proof__body (flex:1; min-height:0) clippe les abspos qui dépassent le
      wrap, même avec overflow:visible (clip flex Chrome) → le dock masquait GabIA.
   z-index hero > 2 (enfants de .section), sous le header (50). */
.hero:has(.hero-search.is-open) {
  overflow: visible;
  z-index: 5;
}
/* Au-dessus de .hero-proof--dock (même pattern que .nav-group.is-open) */
.hero:has(.hero-search.is-open) > .wrap {
  z-index: 36;
  overflow: visible;
}
.hero:has(.hero-search.is-open) .hero-proof--dock {
  z-index: 1;
  /* backdrop-filter / ombre haute : couches qui peignent sur le bas du panel */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.hero-search__glass {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 4.4rem;
  padding: 0.9rem 1.5rem 0.9rem 1.4rem;
  /* Google dark : charcoal uni, flat */
  background: #3c4043;
  border: 1px solid transparent;
  border-radius: 9999px;
  box-shadow: 0 0.12rem 0.35rem hsl(0 0% 0% / 0.28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: left;
  transition: box-shadow 0.2s ease, border-radius 0.2s ease;
}
/* Google melt : pill + panel = une seule surface charcoal */
.hero-search.is-open .hero-search__glass {
  border-color: hsl(0 0% 100% / 0.1);
  border-bottom-color: transparent;
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: none;
  position: relative;
  z-index: 2;
}
.hero-search.is-open .hero-search__glass:focus-within {
  border-color: hsl(0 0% 100% / 0.14);
  border-bottom-color: transparent;
}
.hero-search__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: #bdc1c6;
}
.hero-search__icon .ph-icon,
.hero-search__actions .ph-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
}
.hero-search__actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  margin-left: 0.5rem;
  padding-right: 0.15rem;
  color: #bdc1c6;
}
.hero-search__action {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.hero-search__field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.hero-search__query,
.hero:has(> .hero-bg) .hero-search__query {
  flex: 1;
  min-width: 0;
  width: 100%;
  margin: 0;
  margin-block-end: 0;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
  text-wrap: nowrap;
  overflow: hidden;
  color: #e8eaed;
}
.hero-search__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
  text-wrap: nowrap;
  overflow: hidden;
  color: transparent;
  caret-color: transparent;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.hero-search__input::-webkit-search-decoration,
.hero-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.hero-search.is-open .hero-search__query {
  visibility: hidden;
}
.hero-search.is-open .hero-search__input {
  color: #e8eaed;
  caret-color: #e8eaed;
}
.hero-search__input:focus-visible {
  outline: none;
}
/* Panel suggest (lazy GabIA — pas de chat inline) */
.hero-search__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem;
  max-height: min(22rem, 55vh);
  overflow: auto;
  text-align: left;
  border-radius: 1.25rem;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
  transform-origin: top center;
  animation: hero-search-panel-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Continuity Google : jointure sans gap, même fond, une ombre externe */
.hero-search.is-open .hero-search__panel {
  top: 100%;
  margin-top: -1px;
  padding-top: 0.35rem;
  border-radius: 0 0 1.5rem 1.5rem;
  border-color: hsl(0 0% 100% / 0.1);
  border-top: none;
  background: #3c4043;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 0.35rem 1.1rem hsl(0 0% 0% / 0.38);
  animation: none;
}
.hero-search__panel[hidden] {
  display: none !important;
  animation: none;
}
@keyframes hero-search-panel-in {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-search__panel {
    animation: none;
  }
  .hero-search__glass {
    transition: none;
  }
}
html.perf-lite .hero-search__panel {
  animation: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
}
html.perf-lite .hero-search.is-open .hero-search__panel {
  background: #3c4043;
}
.hero-search__suggests {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.hero-search__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 0;
  border-radius: 0.85rem;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease;
}
.hero-search__option-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--muted-2);
}
.hero-search__option-icon .ph-icon {
  width: 1.1rem;
  height: 1.1rem;
}
.hero-search__option-label {
  flex: 1;
  min-width: 0;
}
.hero-search__option:hover,
.hero-search__option:focus-visible,
.hero-search__option.is-active {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  outline: none;
}
.hero-search__ask {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0.2rem 0 0;
  padding: 0.75rem 0.85rem;
  border: 0;
  border-radius: 0.85rem;
  border-top: 1px solid var(--glass-edge);
  background: color-mix(in srgb, var(--brand-secondary) 12%, transparent);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease;
}
.hero-search__ask:hover,
.hero-search__ask:focus-visible {
  background: color-mix(in srgb, var(--brand-secondary) 20%, transparent);
  outline: none;
}
.hero-search__ask-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--brand-secondary);
}
.hero-search__ask-icon .ph-icon {
  width: 1.15rem;
  height: 1.15rem;
}
.hero-search__ask-label {
  flex: 1;
  min-width: 0;
}
.hero-search__ask-label strong {
  font-weight: 600;
}
.hero-search__ask-query {
  display: block;
  margin-top: 0.15rem;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Faux champ : sur étroit, une seule ligne (pilule intacte, typo fluide) */
@media (max-width: 40rem) {
  .hero-search__glass {
    align-items: center;
    gap: var(--sp-2);
    min-height: 2.85rem;
    padding: 0.5rem 0.9rem 0.5rem 1rem;
    border-radius: 9999px;
    container-type: inline-size;
  }
  .hero-search__icon {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
  }
  .hero-search__actions {
    gap: 0.7rem;
    margin-left: 0.25rem;
    padding-right: 0;
  }
  .hero-search__action {
    width: 1.15rem;
    height: 1.15rem;
  }
  .hero-search__query,
  .hero:has(> .hero-bg) .hero-search__query,
  .hero-search__input {
    flex: 1 1 0;
    min-width: 0;
    font-size: clamp(0.5rem, 0.08rem + 2.35vw, 1.25rem);
    line-height: 1.2;
    letter-spacing: -0.022em;
    white-space: nowrap;
    text-wrap: nowrap;
    overflow: hidden;
  }
  .hero-search__panel {
    top: calc(100% + 0.3rem);
    border-radius: 1rem;
    max-height: min(18rem, 50vh);
  }
  .hero-search.is-open .hero-search__glass {
    border-radius: 1.15rem 1.15rem 0 0;
  }
  .hero-search.is-open .hero-search__panel {
    top: 100%;
    margin-top: -1px;
    border-radius: 0 0 1.15rem 1.15rem;
    max-height: min(18rem, 50vh);
  }
  .hero-search__option,
  .hero-search__ask {
    padding: 0.65rem 0.7rem;
    font-size: 0.88rem;
  }
}

/* Hero headline : base (italique serif, taille standard pour pages secondaires).
   Exclusion .hero-search__query : le faux champ recherche reste sans-serif sur
   TOUTES les pages (home = vidéo hero-bg, pages service = aurora). */
.hero h1:not(.hero-sub):not(.hero-search__query),
.hero .hero-headline:not(.hero-search__query) {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-block-end: var(--sp-5);
}
.hero h1:not(.hero-sub) em,
.hero .hero-headline em {
  font-style: italic;
  color: var(--text);
  background: none;
  padding: 0;
}
.hero .hero-headline {
  margin-block-start: 0;
}
/* Hero immersif : titre grand (hors mode « faux champs » index) */
.hero:has(> .hero-bg) .hero-headline:not(.hero-search__query) {
  font-size: clamp(2.75rem, 9vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.hero-sub,
.hero h1.hero-sub {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2vw, 1.375rem);
  font-weight: 400;
  font-style: normal;
  color: var(--text-dim);
  margin-block-start: 0;
  margin-block-end: var(--sp-5);
  display: block;
  text-align: center;
  text-wrap: pretty;
}
.hero-sub .role-cycle {
  color: color-mix(in srgb, var(--brand-tertiary) 28%, color-mix(in srgb, var(--brand-secondary) 12%, var(--text)));
  display: inline-block;
  min-width: 6ch;
  text-align: left;
}
.hero-sub .role-cycle span {
  display: inline-block;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.hero-sub .role-cycle span.is-out {
  opacity: 0;
  transform: translateY(8px);
}

.hero .lead {
  margin: 0 auto var(--sp-6) auto;
  max-width: 52ch;
  color: var(--text-dim);
}
/* Heroes éditoriaux (fil d’Ariane, hors home centrée) : lead + CTA alignés au titre */
.hero:has(.breadcrumb):not(:has(> .hero-bg)) .lead {
  margin-inline: 0;
  margin-block: 0 var(--sp-6);
  max-width: min(42rem, 100%);
}
.hero:has(.breadcrumb):not(:has(> .hero-bg)) .hero-cta {
  justify-content: flex-start;
}
.hero-cta {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-6);
}
/* Heroes avec grille 2 colonnes (hors homepage centrée) : CTA alignés avec le texte */
.hero-grid .hero-cta { justify-content: flex-start; }
/* Mobile : empile les CTA en colonne pleine largeur → cohérence visuelle des boutons */
@media (max-width: 540px) {
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Les CTA prioritaires des heroes reprennent la variante .btn-cta globale (hors duo Google homepage). */
.hero:has(> .hero-bg) .hero-cta:not(.hero-cta--google) .btn-ghost {
  background: color-mix(in srgb, var(--bg) 20%, transparent);
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand-secondary) 55%, color-mix(in srgb, var(--brand-tertiary) 30%, var(--stroke-2)));
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
}
.hero:has(> .hero-bg) .hero-cta:not(.hero-cta--google) .btn-ghost:hover {
  background: color-mix(in srgb, var(--brand-secondary) 14%, color-mix(in srgb, var(--bg) 12%, transparent));
  border-color: color-mix(in srgb, var(--brand-tertiary) 42%, var(--brand-secondary));
  color: var(--text);
}

/* Home : CTA sous la barre = duo plat type Google (« Recherche Google » / « J'ai de la chance ») */
.hero:has(> .hero-bg) .hero-cta--google {
  margin-top: var(--sp-5);
  padding-block-end: 0.5rem;
  justify-content: center;
  gap: 0.875rem; /* ~14px, entre 12 et 16px Google */
}
.hero:has(> .hero-bg) .hero-cta--google .btn-ghost {
  min-width: 0;
  max-width: 100%;
  padding: 0.7rem 1.15rem;
  background: #303134;
  color: #e8eaed;
  border: 1px solid #3c4043;
  border-radius: 0.28rem;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-decoration: none;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0;
  cursor: pointer;
}
.hero:has(> .hero-bg) .hero-cta--google .btn-ghost:hover {
  background: #3c4043;
  color: #e8eaed;
  border-color: #5f6368;
  box-shadow: none;
  text-decoration: none;
}
@media (max-width: 40rem) {
  .hero:has([data-hero-search]) .hero-cta {
    display: none;
  }
}

/* Mobile : liste trending type Google (à la place des 2 boutons) */
.hero-search__trending {
  display: none;
}
@media (max-width: 40rem) {
  .hero-search__trending {
    display: block;
    width: 100%;
    max-width: min(100%, 52rem);
    margin-inline: auto;
    margin-block-start: var(--sp-4);
    text-align: left;
  }
  .hero-search.is-open .hero-search__trending {
    display: none;
  }
  .hero-search__trending-title {
    margin: 0 0 0.35rem;
    padding-inline: 0.15rem;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #e8eaed;
  }
  .hero-search__trending-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .hero-search__trending-item + .hero-search__trending-item {
    border-top: 1px solid hsl(0 0% 100% / 0.08);
  }
  .hero-search__trending-btn {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    margin: 0;
    padding: 0.85rem 0.15rem;
    border: 0;
    background: transparent;
    color: #e8eaed;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hero-search__trending-btn:hover,
  .hero-search__trending-btn:focus-visible {
    color: #fff;
  }
  .hero-search__trending-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand-secondary) 55%, #fff);
    outline-offset: 0.15rem;
    border-radius: 0.25rem;
  }
  .hero-search__trending-icon {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    color: #9aa0a6;
  }
  .hero-search__trending-icon svg,
  .hero-search__trending-icon .ph-icon {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
  .hero-search__trending-label {
    flex: 1;
    min-width: 0;
  }
  .hero-search__trending-btn--cta {
    color: #e8eaed;
    font-weight: 500;
  }
  .hero-search__trending-btn--cta .hero-search__trending-icon {
    color: #bdc1c6;
  }
  .hero-search__trending-btn--cta:hover,
  .hero-search__trending-btn--cta:focus-visible {
    color: #fff;
  }
  .hero-search__trending-btn--muted {
    color: #9aa0a6;
  }
  .hero-search__trending-btn--muted .hero-search__trending-icon {
    color: #5f6368;
  }
  .hero-search__trending-btn--muted:hover,
  .hero-search__trending-btn--muted:focus-visible {
    color: #bdc1c6;
  }
  html[data-theme="light"] .hero-search__trending-title,
  html[data-theme="light"] .hero-search__trending-btn {
    color: #202124;
  }
  html[data-theme="light"] .hero-search__trending-btn:hover,
  html[data-theme="light"] .hero-search__trending-btn:focus-visible {
    color: #000;
  }
  html[data-theme="light"] .hero-search__trending-item + .hero-search__trending-item {
    border-top-color: hsl(0 0% 0% / 0.08);
  }
  html[data-theme="light"] .hero-search__trending-icon {
    color: #70757a;
  }
  html[data-theme="light"] .hero-search__trending-btn--cta {
    color: #202124;
    font-weight: 500;
  }
  html[data-theme="light"] .hero-search__trending-btn--cta .hero-search__trending-icon {
    color: #5f6368;
  }
  html[data-theme="light"] .hero-search__trending-btn--cta:hover,
  html[data-theme="light"] .hero-search__trending-btn--cta:focus-visible {
    color: #000;
  }
  html[data-theme="light"] .hero-search__trending-btn--muted {
    color: #70757a;
  }
  html[data-theme="light"] .hero-search__trending-btn--muted .hero-search__trending-icon {
    color: #9aa0a6;
  }
  html[data-theme="light"] .hero-search__trending-btn--muted:hover,
  html[data-theme="light"] .hero-search__trending-btn--muted:focus-visible {
    color: #5f6368;
  }
}

/* Scroll indicator : SCROLL + ligne verticale animée */
.scroll-indicator {
  position: absolute;
  bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-secondary) 32%, var(--muted));
  pointer-events: none;
}
.scroll-indicator-line {
  position: relative;
  width: 1px; height: 40px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-secondary) 45%, transparent), color-mix(in srgb, var(--brand-tertiary) 35%, transparent));
  overflow: hidden;
}
.scroll-indicator-line::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, var(--brand-secondary), var(--brand-tertiary));
  animation: scrollDown 1.8s var(--ease-in-out) infinite;
}
@keyframes scrollDown {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

/* Legacy hero-card (aside) : conservé pour compat pages secondaires */
.hero-grid { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; align-items: center; text-align: left; }
.hero .breadcrumb + .hero-grid { margin-top: var(--sp-5); }
/* Hero plein média (ville + Dordogne) : fil d’Ariane en zone « repère », plus d’air avant titre + eyebrow */
.hero.hero-media .breadcrumb {
  margin-block-end: 0;
  font-size: clamp(0.625rem, 0.58rem + 0.35vw, 0.6875rem);
  letter-spacing: 0.1em;
  opacity: 0.95;
}
.hero.hero-media .breadcrumb ol {
  gap: 4px;
}
.hero.hero-media .breadcrumb + .hero-grid {
  margin-top: clamp(1.75rem, 5vw, 3rem);
}
/* Dark only : kicker + copy plus contrastés sur photo (ciel clair) */
html:not([data-theme="light"]):not([data-a11y="on"]) .hero.hero-media .breadcrumb a {
  color: color-mix(in srgb, var(--text) 90%, #fff);
  text-shadow: 0 1px 10px hsl(0 0% 0% / 0.45);
}
html:not([data-theme="light"]):not([data-a11y="on"]) .hero.hero-media .breadcrumb a:hover,
html:not([data-theme="light"]):not([data-a11y="on"]) .hero.hero-media .breadcrumb a:focus-visible {
  color: #fff;
}
html:not([data-theme="light"]):not([data-a11y="on"]) .hero.hero-media .breadcrumb [aria-current="page"] {
  color: #fff;
  text-shadow: 0 1px 10px hsl(0 0% 0% / 0.45);
}
html:not([data-theme="light"]):not([data-a11y="on"]) .hero.hero-media .breadcrumb li::after {
  color: hsl(0 0% 100% / 0.48);
}
html:not([data-theme="light"]):not([data-a11y="on"]) .hero.hero-media :is(h1, .lead) {
  text-shadow: 0 1px 14px hsl(0 0% 0% / 0.40);
}
html:not([data-theme="light"]):not([data-a11y="on"]) .hero.hero-media .eyebrow {
  color: color-mix(in srgb, var(--text) 94%, #fff);
  text-shadow: 0 1px 12px hsl(0 0% 0% / 0.42);
}
.hero-card {
  position: relative;
  isolation: isolate;
  background: var(--glass-stack);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
  color: var(--text-dim);
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card h3,
.hero-card__label { display: flex; align-items: center; gap: var(--sp-3); color: var(--text); margin: 0; font: inherit; font-weight: 600; }
.hero-lottie {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  max-block-size: 13rem;
  margin-inline: auto;
  margin-block-end: var(--sp-4);
  color: color-mix(in srgb, var(--brand-secondary) 55%, var(--text));
}
.hero-lottie__fallback { inline-size: 70%; block-size: auto; }
.hero-lottie.is-loaded > .hero-lottie__fallback { display: none; }
.hero-card h3 .dot,
.hero-card__label .dot {
  width: 8px; height: 8px;
  background: linear-gradient(145deg, var(--brand-secondary), var(--brand-tertiary));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-secondary) 22%, transparent);
}
.hero-card ul { list-style: none; padding: 0; margin: var(--sp-4) 0 0 0; display: grid; gap: var(--sp-3); }
.hero-card li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--text-dim); font-size: var(--fs-sm); }
.hero-card li svg { flex: none; width: 18px; height: 18px; color: color-mix(in srgb, var(--brand-secondary) 40%, var(--text)); opacity: 0.85; margin-top: 2px; }
.hero-card-meta { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid hsl(0 0% 100% / 0.08); display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-9); }
}

/* Pages territoire (ville) : hero texte seul : aligné à gauche (fil d’Ariane), titre + chapô même largeur */
.hero.hero-media .hero-grid--copy-only {
  grid-template-columns: 1fr;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.hero.hero-media.hero-media--ville .hero-grid--copy-only {
  text-align: left;
  justify-items: stretch;
}
.hero.hero-media.hero-media--ville .hero-grid--copy-only .hero-cta {
  justify-content: flex-start;
}
.hero.hero-media.hero-media--ville .hero-copy {
  width: 100%;
  max-width: min(48rem, 100%);
  margin-inline: 0;
}
/* Titre romain : seul le <em> reste en italique serif */
.hero h1.hero-title--em-only {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.hero h1.hero-title--em-only em,
.hero h1.hero-title--em-only em.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
@media (min-width: 1024px) {
  .hero.hero-media.hero-media--ville .hero-copy {
    max-width: min(58rem, 100%);
  }
}
/* .hero-copy (pas un second .hero) : corrige l’ancien sélecteur .hero .lead qui ne matchait jamais */
.hero.hero-media.hero-media--ville .hero-copy .lead {
  max-width: none;
  width: 100%;
  margin: 0 0 var(--sp-6) 0;
  padding-inline: 0;
  /* Sur fond photo + veil : --text-dim / .lead muted trop faibles → AA via --text */
  color: var(--text);
}
.hero.hero-media.hero-media--ville {
  min-height: clamp(26rem, 58svh, 40rem);
}
.hero.hero-media.hero-media--ville .eyebrow {
  justify-content: flex-start;
  margin-inline: 0;
}
/* Eyebrow sous le h1 (hero média) : liseré plus court = sous-titre, pas 2ᵉ ligne de fil */
.hero.hero-media .hero-copy > h1 + .eyebrow::before {
  width: clamp(2rem, 8vw, 3.5rem);
  opacity: 1;
}

/* Illustrations section contexte : cathédrale (Périgueux), blason (Bergerac) */
.cathedral-icon-wrapper,
.bridge-icon-wrapper {
  position: relative;
  margin: var(--sp-6) 0 0 0;
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}
.bridge-icon-wrapper {
  justify-content: center;
}
.cathedral-icon-svg {
  width: 100%;
  max-width: min(32rem, 100%);
  height: auto;
  flex-shrink: 0;
}
.bridge-icon-svg,
.bridge-icon-img {
  width: 100%;
  max-width: min(32rem, 100%);
  height: auto;
  flex-shrink: 0;
}

/* Colonne gauche + illustration : typo et icône compactes pour aligner les hauteurs */
.split.split--cathedral-context > :first-child h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.split.split--cathedral-context > :first-child .lead {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.5;
}
.split.split--cathedral-context .cathedral-icon-svg {
  max-width: min(11.25rem, 100%);
  max-height: min(8.75rem, 100%);
  width: auto;
  height: auto;
}
.split.split--cathedral-context .cathedral-icon-wrapper {
  margin-block-start: var(--sp-5);
}
.split.split--bridge-context .bridge-icon-svg {
  max-width: min(16rem, 100%);
  max-height: min(12.5rem, 100%);
  width: auto;
  height: auto;
}
.split.split--bridge-context .bridge-icon-img {
  max-width: min(16rem, 100%);
  max-height: min(12.5rem, 100%);
  width: auto;
  height: auto;
}
@media (min-width: 900px) {
  .split.split--bridge-context .bridge-icon-img {
    max-width: min(24rem, 100%);
    max-height: min(18rem, 100%);
  }
  .split.split--cathedral-context > :first-child,
  .split.split--bridge-context > :first-child {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .split.split--cathedral-context .cathedral-icon-wrapper,
  .split.split--bridge-context .bridge-icon-wrapper {
    margin-top: auto;
    margin-bottom: 0;
  }
}
.cathedral-icon-wrapper__caption,
.bridge-icon-wrapper__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Closer Périgueux : contexte local + rail de leviers + CTA */
.local-closer {
  --local-closer-rail-gap: var(--sp-4);
}
.local-closer__intro {
  display: grid;
  gap: var(--sp-6);
  align-items: end;
  margin-block-end: var(--sp-7);
}
.local-closer__copy h2 {
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.local-closer__copy .lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-dim);
  max-width: 40rem;
}
.local-closer__prose {
  margin-block-start: var(--sp-4);
  max-width: 40rem;
}
.local-closer__prose p {
  margin-block: 0 var(--sp-3);
}
.local-closer__prose p:last-child {
  margin-block-end: 0;
}
.local-closer__mark {
  margin: 0;
  justify-content: center;
}
.local-closer__mark .cathedral-icon-svg,
.local-closer__mark .bridge-icon-svg,
.local-closer__mark .bridge-icon-img {
  max-width: min(16rem, 72vw);
  width: 100%;
  height: auto;
}
.local-closer__mark .bridge-icon-img {
  max-width: min(13.5rem, 58vw);
}
.local-closer__bridge {
  margin: 0 0 var(--sp-5);
  max-width: 36rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: color-mix(in srgb, var(--text) 88%, var(--brand-secondary));
}
.lever-rail {
  list-style: none;
  margin: 0 0 var(--sp-7);
  padding: 0;
  display: grid;
  gap: 0.2rem;
  border-block-start: 1px solid color-mix(in srgb, var(--brand-secondary) 22%, var(--glass-edge));
}
.lever-rail__item {
  --fit-accent: var(--brand-secondary);
  --fit-shift: 0rem;
  --fit-bloom: 0;
  --fit-beam-angle: 210deg;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding-block: var(--local-closer-rail-gap);
  padding-inline: var(--sp-3);
  margin-inline: calc(-1 * var(--sp-3));
  border-radius: 0;
  border-block-end: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, var(--glass-edge));
  background: radial-gradient(
    120% 90% at 0% 40%,
    color-mix(in srgb, var(--fit-accent) calc(var(--fit-bloom) * 16%), transparent) 0%,
    transparent 58%
  );
  transform: translate3d(var(--fit-shift), 0, 0);
  transition:
    transform 420ms var(--ease-out),
    background 420ms var(--ease-out),
    --fit-bloom 420ms var(--ease-out),
    border-color 280ms var(--ease);
}
.lever-rail__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  padding: 1px;
  background: conic-gradient(
    from var(--fit-beam-angle),
    transparent 0%,
    transparent 62%,
    color-mix(in srgb, var(--fit-accent) 70%, white) 72%,
    color-mix(in srgb, var(--fit-accent) 28%, transparent) 82%,
    transparent 92%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 280ms var(--ease);
}
.lever-rail__item > * {
  position: relative;
  z-index: 1;
}
.lever-rail__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--brand-secondary) 70%, var(--text));
  padding-block-start: 0.1em;
  transition: color 320ms var(--ease-out), transform 420ms var(--ease-out);
}
.lever-rail__title {
  margin: 0 0 0.2em;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  transition:
    color 320ms var(--ease-out),
    letter-spacing 420ms var(--ease-out),
    transform 420ms var(--ease-out);
}
.lever-rail__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  transition:
    color 400ms var(--ease-out) 30ms,
    transform 420ms var(--ease-out) 30ms;
}
.lever-rail__item:hover,
.lever-rail__item:focus-within {
  --fit-shift: 0.28rem;
  --fit-bloom: 1;
  border-color: color-mix(in srgb, var(--brand-secondary) 36%, var(--glass-edge));
}
.lever-rail__item:hover::before,
.lever-rail__item:focus-within::before {
  opacity: 1;
  animation: fitBorderBeam 1.7s linear infinite;
}
.lever-rail__item:hover .lever-rail__num,
.lever-rail__item:focus-within .lever-rail__num {
  color: color-mix(in srgb, var(--brand-tertiary) 40%, var(--brand-secondary));
  transform: translateX(0.08rem) scale(1.05);
}
.lever-rail__item:hover .lever-rail__title,
.lever-rail__item:focus-within .lever-rail__title {
  color: color-mix(in srgb, var(--brand-secondary) 18%, var(--text));
  letter-spacing: 0.008em;
  transform: translateX(0.1rem);
}
.lever-rail__item:hover .lever-rail__text,
.lever-rail__item:focus-within .lever-rail__text {
  color: color-mix(in srgb, var(--text) 90%, var(--muted));
  transform: translateX(0.06rem);
}
.lever-rail__item--bonus {
  border-block-end: none;
  --fit-accent: var(--brand-tertiary);
}
.lever-rail__item--bonus .lever-rail__num {
  color: color-mix(in srgb, var(--brand-tertiary) 55%, var(--brand-secondary));
  font-weight: 500;
}
.lever-rail__bonus-label {
  display: inline-block;
  margin-inline-end: 0.35em;
  font-family: var(--font-sans, inherit);
  font-style: normal;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.12em;
  color: color-mix(in srgb, var(--brand-tertiary) 50%, var(--brand-secondary));
  transition: color 280ms var(--ease);
}
.lever-rail__item--bonus:hover .lever-rail__bonus-label,
.lever-rail__item--bonus:focus-within .lever-rail__bonus-label {
  color: color-mix(in srgb, var(--brand-tertiary) 72%, var(--brand-secondary));
}
/* CTA mid local-closer : l'air avant/après est géré via --cta-mid-gap (voir UX polish). */
.local-closer .lever-rail:has(+ .cta-band) {
  margin-block-end: 0;
}
.local-closer .cta-band {
  margin-block-start: var(--cta-mid-gap);
  margin-block-end: 0;
}
@media (min-width: 800px) {
  /* 2 colonnes seulement si l'icône locale est présente. */
  .local-closer__intro:has(.local-closer__mark) {
    grid-template-columns: minmax(0, 1.35fr) minmax(12rem, 0.65fr);
    gap: var(--sp-8);
    align-items: end;
  }
  .local-closer__mark {
    justify-content: flex-end;
  }
  .local-closer__mark .cathedral-icon-svg {
    max-width: min(18rem, 100%);
  }
  .local-closer__mark .bridge-icon-svg,
  .local-closer__mark .bridge-icon-img {
    max-width: min(14.5rem, 100%);
  }
  /* Textes courts : grille 2 colonnes pour remplir la largeur utile du wrap. */
  .lever-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-6);
    row-gap: 0;
  }
  .lever-rail__item {
    grid-template-columns: 3.25rem 1fr;
    gap: var(--sp-4);
    padding-inline: var(--sp-4);
    margin-inline: 0;
  }
  .lever-rail__item:hover,
  .lever-rail__item:focus-within {
    --fit-shift: 0.35rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lever-rail__item,
  .lever-rail__num,
  .lever-rail__title,
  .lever-rail__text,
  .lever-rail__bonus-label {
    transition: none;
  }
  .lever-rail__item:hover,
  .lever-rail__item:focus-within {
    --fit-shift: 0;
  }
  .lever-rail__item:hover::before,
  .lever-rail__item:focus-within::before {
    animation: none;
  }
  .lever-rail__item:hover .lever-rail__num,
  .lever-rail__item:focus-within .lever-rail__num,
  .lever-rail__item:hover .lever-rail__title,
  .lever-rail__item:focus-within .lever-rail__title,
  .lever-rail__item:hover .lever-rail__text,
  .lever-rail__item:focus-within .lever-rail__text {
    transform: none;
  }
}

/* Cartouche périmètre en pied de page (même composant .hero-card, largeur de lecture) */
.territoire-hero-card {
  max-width: 44rem;
  margin-inline: auto;
}

/* Périmètre territorial : carte pleine largeur + contour Grand Périgueux */
.perimetre-map {
  position: relative;
  margin: 0;
  min-height: 18rem;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 28%, var(--glass-edge));
  background: var(--surface-2);
  box-shadow: var(--glass-shadow);
}
.perimetre-map--full {
  width: 100%;
  aspect-ratio: 21 / 10;
  min-height: clamp(18rem, 48vw, 28rem);
  max-height: 32rem;
  border-color: color-mix(in srgb, var(--brand-secondary) 34%, var(--glass-edge));
  box-shadow:
    var(--glass-shadow),
    inset 0 0 0 1px hsl(0 0% 100% / 0.03);
}
.perimetre-map__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: var(--bg);
}
.perimetre-map--full .leaflet-container {
  font: inherit;
  background: var(--bg);
}
.perimetre-map--full .leaflet-control-zoom a {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand-secondary) 28%, var(--stroke));
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
}
.perimetre-map--full .leaflet-control-zoom a:hover {
  background: color-mix(in srgb, var(--brand-secondary) 18%, var(--surface));
  color: var(--text);
}
.perimetre-map--full .leaflet-control-attribution {
  background: hsl(0 0% 0% / 0.55);
  color: var(--muted);
  font-size: 0.65rem;
  max-width: min(100%, 22rem);
}
.perimetre-map--full .leaflet-control-attribution a {
  color: color-mix(in srgb, var(--brand-secondary) 55%, var(--text));
}
.perimetre-map__tooltip {
  background: color-mix(in srgb, var(--surface) 92%, var(--brand-secondary) 8%) !important;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 40%, var(--stroke)) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important;
  font-size: var(--fs-xs) !important;
  padding: 0.25rem 0.5rem !important;
}
.perimetre-map__tooltip::before {
  border-top-color: color-mix(in srgb, var(--brand-secondary) 40%, var(--stroke)) !important;
}
.perimetre-map__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1rem;
  font-size: var(--fs-sm);
  color: var(--text);
  background: linear-gradient(to top, hsl(0 0% 0% / 0.78), hsl(0 0% 0% / 0.05));
  pointer-events: none;
}
.perimetre-map__pin {
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-secondary) 70%, var(--brand-tertiary));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-secondary) 55%, transparent);
  animation: perimetrePinPulse 2.4s ease-out infinite;
}
.zone-grid.perimetre-zones {
  margin-block-start: var(--sp-7);
  /* 12 communes → 2 lignes × 6 colonnes (desktop) ; spécificité > .zone-grid auto-fill. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 40em) {
  .zone-grid.perimetre-zones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .zone-grid.perimetre-zones {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.perimetre-zones li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 3.1rem;
  padding-block: 0.55rem;
  padding-inline: 0.65rem;
  white-space: normal;
  line-height: 1.25;
  border-radius: var(--radius);
  overflow-wrap: anywhere;
  hyphens: none;
}
.perimetre-zones .zone-grid__name {
  display: block;
  width: 100%;
  text-wrap: balance;
}
@keyframes perimetrePinPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-secondary) 50%, transparent); }
  70% { box-shadow: 0 0 0 0.7rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .perimetre-map__pin { animation: none; }
}

/* Hero proof band */
.hero-proof { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid hsl(0 0% 100% / 0.08); justify-content: center; }

/* Bandeau repères en bas du hero (création / refonte / automatisation) */
/* padding-top aligné sur .hero.hero-media (pages référencement) pour le fil d’Ariane */
.hero--proof {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: clamp(6rem, 12vw, 9rem) 0;
}
.hero--proof > .wrap {
  position: relative;
  z-index: 2;
}
.hero--proof__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.hero--proof__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.hero--proof .breadcrumb {
  flex-shrink: 0;
  align-self: flex-start;
  margin-block-end: 0;
  font-size: clamp(0.625rem, 0.58rem + 0.35vw, 0.6875rem);
  letter-spacing: 0.1em;
  opacity: 0.78;
}
.hero--proof .breadcrumb ol {
  gap: 4px;
}
.hero--proof .breadcrumb + .hero--proof__main {
  margin-top: clamp(1.75rem, 5vw, 3rem);
}
.hero--proof .hero-stack {
  width: 100%;
  max-width: min(100%, 52rem);
  margin-inline: auto;
}
.hero--proof .hero-search {
  width: 100%;
  margin-inline: auto;
}
.hero--proof .hero-proof--dock {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  margin-block: 0;
  padding: 0;
  min-height: clamp(3.75rem, 9vw, 4.5rem);
  border-top: 1px solid hsl(0 0% 100% / 0.1);
  background: color-mix(in srgb, var(--surface) 82%, hsl(0 0% 0% / 0.42));
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 -0.5rem 2rem hsl(0 0% 0% / 0.18);
}
.hero--proof .hero-proof--dock .hero-proof-item {
  flex: 1 1 25%;
  min-width: 0;
  padding: 0.65rem 0.35rem 0.55rem;
  border-inline-end: 1px solid hsl(0 0% 100% / 0.06);
}
.hero--proof .hero-proof--dock .hero-proof-item:last-child {
  border-inline-end: none;
}
.hero--proof .hero-proof--dock .hero-proof-item strong {
  font-size: clamp(1rem, 2.4vw, var(--fs-xl));
  line-height: 1.1;
}
.hero--proof .hero-proof--dock .hero-proof-item span {
  display: block;
  font-size: clamp(0.45rem, 1.55vw, 0.7rem);
  letter-spacing: clamp(0.06em, 0.35vw, 0.16em);
  line-height: 1.25;
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Hero création site : barre recherche + CTA */
.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}
.hero-stack .hero-search {
  margin-block-end: 0;
}
.hero-stack .hero-cta {
  margin-top: 0;
}
/* Mobile : les 2 CTA du hero création restent côte à côte */
@media (max-width: 767.98px) {
  .hero-stack .hero-cta {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
  }
  .hero-stack .hero-cta .btn {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    padding: 0.6rem 0.5rem;
    font-size: 0.8125rem;
    justify-content: center;
  }
  .hero-stack .hero-cta .btn .btn-icon {
    width: 0.95em;
    height: 0.95em;
  }
}
.hero-proof-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-proof-item strong {
  font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-xl);
  color: color-mix(in srgb, var(--brand-secondary) 26%, color-mix(in srgb, var(--brand-tertiary) 12%, var(--text)));
  letter-spacing: -0.02em;
}
.hero-proof-item span {
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--brand-secondary) 20%, color-mix(in srgb, var(--brand-tertiary) 14%, var(--muted)));
  text-transform: uppercase; letter-spacing: 0.2em; margin-top: 0.25rem;
}

/* --- Section heading --- */
.section-head { max-width: 52rem; margin-block-end: var(--sp-7); }
.section-head-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-block: 0 var(--sp-4);
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--text);
  max-width: none;
}
.section-head-title[id] { scroll-margin-top: clamp(5.5rem, 14vw, 7.5rem); }
.section-head .lead { margin-top: var(--sp-4); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; margin-inline: auto; }

/* --- Cards grid (generic + bento) --- */
.cards {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.cards-stack { grid-template-columns: 1fr; }

/* Cartes métiers Bergerac : extrait 8 lignes + « Lire la suite » */
.cards--metiers-bergerac .card-text-clamp {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1 1 auto;
  min-height: 0;
}
.cards--metiers-bergerac .card-text-clamp p {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
}
.cards--metiers-bergerac .card.is-expanded .card-text-clamp p {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.cards--metiers-bergerac .card-read-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-secondary) 38%, var(--muted));
  text-decoration: none;
  transition: color var(--t) var(--ease);
}
.cards--metiers-bergerac .card-read-more::after {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 53.66 90.34L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 53.66 90.34L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-fast) var(--ease);
}
.cards--metiers-bergerac .card-read-more[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.cards--metiers-bergerac .card-read-more:hover,
.cards--metiers-bergerac .card-read-more:focus-visible {
  color: color-mix(in srgb, var(--brand-secondary) 72%, var(--text));
}
.cards--metiers-bergerac .card-read-more:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-secondary) 55%, transparent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Bento 12-col signature */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
}
.bento > * { grid-column: span 12; }
@media (min-width: 960px) {
  .bento > .b-7 { grid-column: span 7; }
  .bento > .b-5 { grid-column: span 5; }
  .bento > .b-6 { grid-column: span 6; }
  .bento > .b-4 { grid-column: span 4; }
  .bento > .b-8 { grid-column: span 8; }
  .bento > .b-12 { grid-column: span 12; }
}

.card {
  position: relative;
  background: var(--glass-stack);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 22%, var(--glass-edge));
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow 0.5s var(--ease-out);
  display: flex; flex-direction: column; gap: var(--sp-3);
  min-height: 14rem;
  color: var(--text-dim);
  isolation: isolate;
  overflow: hidden;
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
}
/* Bento : halftone uniquement au survol (::before) : fond verre seul par défaut */
.bento .card {
  background: var(--glass-stack);
}
.bento .card::before,
.stat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background: var(--r24-glass-dots-pattern);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.bento .card:hover::before,
.stat:hover::before {
  opacity: 0.32;
}
@media (prefers-reduced-motion: reduce) {
  .bento .card::before,
  .bento .card:hover::before,
  .stat::before,
  .stat:hover::before {
    opacity: 0;
    transition: none;
  }
}
.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand-secondary) 30%, var(--stroke));
}
.card-icon {
  position: relative;
  width: 48px; height: 48px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--glass-bg);
  color: var(--brand-secondary);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 40%, var(--stroke-2));
  margin-block-end: var(--sp-3);
  overflow: hidden;
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
}
.card-icon::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent 0%, color-mix(in srgb, var(--brand-secondary) 45%, transparent) 15%, transparent 30%);
  animation: iconHalo 6s linear infinite;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.card:hover .card-icon::before,
.bento .card:hover .card-icon::before { opacity: 1; }
.card-icon svg {
  width: 24px; height: 24px;
  position: relative; z-index: 1;
  transition: transform var(--t) var(--ease-out);
}
.card:hover .card-icon svg {
  transform: scale(1.1);
}
@keyframes iconHalo {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .card-icon::before { animation: none; }
  .card:hover .card-icon svg { transform: none; }
}
.card h3 { font-size: 1.125rem; margin-block-end: var(--sp-2); color: var(--text); }

/* Bento prestations (home) : titres plus présents (sans filet ::after : évite le « trait » lumineux au survol). */
.bento .card h3 {
  font-size: clamp(1.3rem, 2.15vw, 1.58rem);
  letter-spacing: -0.03em;
  line-height: var(--lh-snug);
  color: color-mix(in srgb, var(--text) 91%, var(--brand-secondary) 9%);
  margin-block-end: var(--sp-2);
}
.bento .card:hover h3 {
  color: var(--text);
}

.card p { font-size: var(--fs-base); line-height: 1.55; color: var(--muted); margin: 0; }
/* Bloc d’actions en pied de carte (bento accueil) : un seul ↗ sur le lien discret ; CTA = .btn */
.card .card-foot {
  margin-top: auto;
  padding-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
}
.card .card-foot .card-link {
  margin-top: 0;
  padding-top: 0;
  align-self: flex-start;
}
.bento .card .card-foot__cta {
  width: 100%;
  max-width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
  padding: 0.9rem 1.25rem;
}
.bento .card .card-foot__cta .btn-icon {
  flex-shrink: 0;
}
:is(.card, .cta-band) .card-link {
  margin-top: auto; padding-top: var(--sp-3); padding-bottom: 0.4rem;
  font-weight: 500; font-size: var(--fs-sm); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  /* min-height pour atteindre ~44px de hit zone tactile sans alourdir visuellement */
  min-height: 2.25rem;
  color: color-mix(in srgb, var(--brand-secondary) 35%, var(--text-dim));
  transition: color var(--t-fast) var(--ease);
}
:is(.card, .cta-band) .card-link::after {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200 64V168a8 8 0 0 1-16 0V83.31L69.66 197.66a8 8 0 0 1-11.32-11.32L172.69 72H88a8 8 0 0 1 0-16H192a8 8 0 0 1 8 8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200 64V168a8 8 0 0 1-16 0V83.31L69.66 197.66a8 8 0 0 1-11.32-11.32L172.69 72H88a8 8 0 0 1 0-16H192a8 8 0 0 1 8 8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t) var(--ease);
}
:is(.card:hover, .cta-band:hover) .card-link { color: var(--text); }
:is(.card:hover, .cta-band:hover) .card-link::after { transform: translate(2px, -2px); }
.inline-link-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-start: 0.2em;
  vertical-align: -0.12em;
}

.card-feature { border-left: 2px solid color-mix(in srgb, var(--brand-secondary) 52%, var(--brand-tertiary)); }

/* Stack tech : titres seuls par défaut, détail à la demande. */
#stack .cards {
  align-items: start;
}
#stack .card {
  min-height: 0;
}
#stack .card h3 {
  margin-block-end: 0;
}

/* À propos · arsenal : grille 2×2, densité maîtrisée (sans étirement vertical) */
#arsenal .arsenal-bento {
  gap: var(--sp-3);
  align-items: start;
}
#arsenal .arsenal-bento .card {
  min-height: 0;
  padding: var(--sp-4) var(--sp-5);
  gap: var(--sp-2);
}
#arsenal .arsenal-bento .card-icon {
  width: 2.625rem;
  height: 2.625rem;
  margin-block-end: 0;
}
#arsenal .arsenal-bento .card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
#arsenal .arsenal-bento .card .eyebrow {
  margin-block-end: var(--sp-1);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
}
#arsenal .arsenal-bento .card h3 {
  margin-block-end: var(--sp-1);
}
#arsenal .arsenal-bento .card p + p {
  margin-top: var(--sp-3);
}
#arsenal .arsenal-bento .card-tags {
  margin: 0;
  padding-top: var(--sp-2);
  gap: 5px;
}
#arsenal .arsenal-bento .card:not(:has(p)) .card-tags {
  padding-top: var(--sp-1);
}
#arsenal .arsenal-bento .card-feature {
  gap: var(--sp-1);
}
#arsenal .arsenal-bento .card-feature h3 {
  margin-block-end: var(--sp-2);
}

/* --- Value rows / features : panneaux verre (espacement entre lignes) --- */
.rows { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.row {
  position: relative;
  isolation: isolate;
  display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-4) var(--sp-5);
  align-items: flex-start;
  padding: var(--sp-5) var(--sp-6);
  background: var(--glass-stack);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 20%, var(--glass-edge));
  border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
}
.row > * { position: relative; z-index: 1; }
.row-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-xl);
  font-weight: 400;
  color: color-mix(in srgb, var(--brand-secondary) 48%, var(--muted));
  letter-spacing: -0.02em;
}
.row h3 { margin: 0; font-size: var(--fs-lg); color: var(--text); }
.row p { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-sm); }
.row > .card-icon { margin-block-end: 0; }
.row:hover > .card-icon {
  background: var(--glass-bg-strong);
  color: color-mix(in srgb, var(--brand-secondary) 70%, var(--text));
  border-color: color-mix(in srgb, var(--brand-secondary) 50%, var(--stroke-2));
  transform: scale(1.05) rotate(-2deg);
}
.row:hover > .card-icon svg { transform: scale(1.1); }
.row:hover > .card-icon::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .row:hover > .card-icon { transform: none; }
  .row:hover > .card-icon svg { transform: none; }
}

/* --- Process création de site : timeline éditoriale, mobile-first --- */
.process-timeline {
  --process-marker-size: 3rem;
  --process-rail-width: 0.1875rem; /* 3px — barre centrale élargie */
  --process-progress: 0;
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  gap: clamp(var(--sp-6), 7vw, var(--sp-8));
}
.process-timeline::before,
.process-timeline::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: calc(var(--process-marker-size) / 2);
  inset-inline-start: calc(var(--process-marker-size) / 2 - var(--process-rail-width) / 2);
  width: var(--process-rail-width);
  border-radius: 999px;
}
/* Track (filet discret) */
.process-timeline::before {
  background: color-mix(in srgb, var(--brand-secondary) 32%, var(--stroke));
}
/* Fill : scaleY depuis le haut, --process-progress mis à jour en rAF (main.js) */
.process-timeline::after {
  background: linear-gradient(
    to bottom,
    var(--brand-secondary),
    color-mix(in srgb, var(--brand-secondary) 45%, var(--brand-tertiary)),
    var(--brand-tertiary)
  );
  transform: scaleY(var(--process-progress));
  transform-origin: top center;
}
.process-timeline__item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--process-marker-size) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  min-width: 0;
}
.process-timeline .process-timeline__marker {
  display: grid;
  place-items: center;
  width: var(--process-marker-size);
  aspect-ratio: 1;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 88%, var(--brand-secondary));
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 58%, var(--stroke-2));
  box-shadow: 0 0 0 var(--sp-2) color-mix(in srgb, var(--bg) 82%, transparent);
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* Marqueur « atteint » : le fill du rail a dépassé le carré → effet de complétude */
.process-timeline__item.is-reached .process-timeline__marker {
  color: #fff;
  background: linear-gradient(150deg, var(--brand-secondary), var(--brand-tertiary));
  border-color: color-mix(in srgb, var(--brand-secondary) 65%, #fff);
  box-shadow:
    0 0 0 var(--sp-2) color-mix(in srgb, var(--bg) 82%, transparent),
    0 0 1.4rem color-mix(in srgb, var(--brand-secondary) 45%, transparent);
  animation: marker-pop 0.44s var(--ease) both;
}
@keyframes marker-pop {
  0% { transform: scale(1); }
  55% { transform: scale(1.16); }
  100% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .process-timeline__item.is-reached .process-timeline__marker { animation: none; transform: none; }
}
.process-timeline__content {
  min-width: 0;
  padding-block-start: var(--sp-3);
  border-top: 1px solid color-mix(in srgb, var(--brand-secondary) 28%, var(--stroke));
}
.process-timeline__content h3 {
  color: var(--text);
  font-size: var(--fs-lg);
  text-wrap: balance;
}
.process-timeline__content p {
  max-width: var(--measure-tight);
  margin-block-start: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  .process-timeline { --process-progress: 1; }
}
@media (min-width: 64em) {
  .process-timeline {
    --process-marker-size: 3.5rem;
    gap: var(--sp-7);
  }
  .process-timeline::before,
  .process-timeline::after {
    inset-inline-start: calc(50% - var(--process-rail-width) / 2);
  }
  .process-timeline__item {
    grid-template-columns: minmax(0, 1fr) var(--process-marker-size) minmax(0, 1fr);
    gap: var(--sp-6);
    min-height: 8rem;
  }
  .process-timeline .process-timeline__marker {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--fs-xl);
  }
  .process-timeline__content {
    grid-row: 1;
    width: min(100%, 30rem);
    padding-block-start: var(--sp-4);
  }
  .process-timeline__item:nth-child(odd) .process-timeline__content {
    grid-column: 1;
    justify-self: end;
    text-align: end;
  }
  .process-timeline__item:nth-child(odd) .process-timeline__content p {
    margin-inline-start: auto;
  }
  .process-timeline__item:nth-child(even) .process-timeline__content {
    grid-column: 3;
  }
}

/* --- Fabrique : atelier de principes (création de site) --- */
.fabrique {
  display: grid;
  gap: var(--sp-7);
}
.fabrique__intro {
  max-width: 36rem;
}
.fabrique__intro .lead {
  margin-block-start: var(--sp-4);
}
.fabrique__atelier {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-6);
  position: relative;
}
.fabrique__pillar {
  --fabrique-accent: var(--brand-secondary);
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding-block-start: var(--sp-5);
  min-width: 0;
}
/* Filet unique : hairline 1 px en dégradé signature (comme le filet d'eyebrow),
   identique sur les quatre piliers. Les couleurs par pilier codaient des
   catégories inexistantes : accent unifié sur --brand-secondary. */
.fabrique__pillar::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--brand-secondary) 0%,
    color-mix(in srgb, var(--brand-tertiary) 55%, transparent) 55%,
    transparent 100%
  );
}
.fabrique__mark {
  display: grid;
  place-items: center;
  /* justify-self : sans lui, la variante --flags (width:auto) s'étire sur
     toute la colonne de grille au lieu de rester une pilule compacte. */
  justify-self: start;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--fabrique-accent);
  border: 1px solid color-mix(in srgb, var(--fabrique-accent) 42%, var(--stroke-2));
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--fabrique-accent) 14%, transparent),
      transparent 62%
    );
}
.fabrique__mark--flags {
  width: auto;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: 0.45rem;
  gap: 0.35rem;
  grid-auto-flow: column;
  align-items: center;
}
.fabrique__icon {
  width: 1.55rem;
  height: 1.55rem;
}
.fabrique__stroke {
  stroke-dasharray: 72;
  stroke-dashoffset: 0;
}
.fabrique__flag {
  display: block;
  width: 1.35rem;
  height: 0.9rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 35%, transparent);
}
.fabrique__flag--inline {
  display: inline-block;
  width: 1.05em;
  height: 0.7em;
  vertical-align: -0.08em;
  margin-inline: 0.2em 0.05em;
}
.fabrique__flag svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Titres d'items : anatomie standard du site (Inter 600), le serif romain
   créait une troisième voix typographique hors design system. */
.fabrique__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.fabrique__text {
  margin: 0;
  max-width: 38ch;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  text-wrap: pretty;
  hyphens: none;
}
@media (min-width: 48em) {
  .fabrique__atelier {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-6);
    padding-block-start: var(--sp-2);
  }
  .fabrique__atelier::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--brand-secondary) 55%, transparent),
      color-mix(in srgb, var(--brand-tertiary) 40%, transparent),
      color-mix(in srgb, var(--brand-secondary) 25%, transparent)
    );
    opacity: 0.55;
  }
  .fabrique__pillar {
    padding-block-start: var(--sp-6);
  }
  .fabrique__pillar::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 0.85rem;
    background: var(--fabrique-accent);
  }
}
@media (min-width: 72em) {
  .fabrique {
    grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 2.1fr);
    gap: var(--sp-8) var(--sp-7);
    align-items: start;
  }
  .fabrique__intro {
    position: sticky;
    top: 6.5rem;
    max-width: none;
    padding-inline-end: var(--sp-4);
  }
  .fabrique__atelier {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-7);
    row-gap: var(--sp-8);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .fabrique__pillar.reveal:not(.is-visible) .fabrique__stroke {
    stroke-dashoffset: 72;
  }
  .fabrique__pillar.reveal.is-visible .fabrique__stroke {
    animation: fabrique-draw var(--t-slow) var(--ease-out) both;
  }
  .fabrique__pillar.reveal.is-visible:nth-child(2) .fabrique__stroke { animation-delay: 80ms; }
  .fabrique__pillar.reveal.is-visible:nth-child(3) .fabrique__stroke { animation-delay: 140ms; }
  .fabrique__pillar.reveal.is-visible:nth-child(4) .fabrique__stroke { animation-delay: 200ms; }
  .fabrique__pillar.reveal.is-visible .fabrique__flag {
    animation: fabrique-flag-in var(--t) var(--ease-out) both;
  }
  .fabrique__pillar.reveal.is-visible .fabrique__flag--de {
    animation-delay: 120ms;
  }
}
@keyframes fabrique-draw {
  from { stroke-dashoffset: 72; opacity: 0.35; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes fabrique-flag-in {
  from { opacity: 0; transform: translateY(0.25rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fabrique__stroke,
  .fabrique__flag {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Stats band : cellules verre --- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-2);
  border-top: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  padding-block: var(--sp-1);
}
.stat {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sp-6) var(--sp-5);
  overflow: hidden;
  background: var(--glass-stack);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 22%, var(--glass-edge));
  border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
}
.stat > * { position: relative; z-index: 1; }
.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--brand-tertiary) 52%, var(--muted));
  margin-block-end: var(--sp-2);
  line-height: 0;
}
.stat-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}
.stat strong {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--brand-tertiary) 22%, color-mix(in srgb, var(--brand-secondary) 10%, var(--text)));
}
.stat span {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--brand-secondary) 26%, color-mix(in srgb, var(--brand-tertiary) 10%, var(--muted)));
  margin-top: var(--sp-2);
}

/* --- Split / two-column content --- */
.split { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-9); } }
.split-reverse { direction: rtl; }
.split-reverse > * { direction: ltr; }

/* Pourquoi moi : grille éditoriale — intro + photo à gauche, cartes à droite */
@media (min-width: 900px) {
  .split.split--why {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(14rem, 1fr);
    align-items: stretch;
    gap: var(--sp-5) var(--sp-8);
  }
  .split.split--why .split--why-intro {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  .split.split--why .rows {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
  }
  .split.split--why .row {
    height: 100%;
    padding: var(--sp-4) var(--sp-5);
    align-items: center;
  }
  .split.split--why .split--why-photo {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    min-height: 0;
    height: 100%;
    margin-block-start: 0;
    aspect-ratio: auto;
  }
  .split.split--why .split--why-photo img {
    height: 100%;
    object-position: center 40%;
  }
}
@media (max-width: 899px) {
  .split.split--why .split--why-photo {
    margin-block-start: var(--sp-5);
  }
}

/* Pourquoi moi (création site) : intro étirée + flourish en pied de colonne */
@media (min-width: 900px) {
  .split.split--philo {
    align-items: stretch;
  }
  .split.split--philo .split--philo-intro {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .split.split--philo .split--philo-mark {
    margin-top: auto;
    padding-top: var(--sp-7);
  }
  .split.split--philo .split--philo-mark .flourish {
    margin-block: 0;
    width: clamp(9rem, 42%, 13rem);
    opacity: 0.7;
  }
}
@media (max-width: 899px) {
  .split.split--philo .split--philo-mark {
    display: none;
  }
}

/* --- Quote / Testimonial --- */
.quote {
  position: relative;
  isolation: isolate;
  background: var(--glass-stack);
  border: 1px solid color-mix(in srgb, var(--brand-tertiary) 25%, var(--glass-edge));
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  height: 100%;
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
}
.quote.is-center {
  max-width: 52rem;
  margin-inline: auto;
  height: auto;
  gap: var(--sp-5);
}
.quote blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.005em;
}
.quote blockquote::before { content: none; }
.quote-portrait {
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-6);
  min-height: 0;
}
.quote-portrait img {
  width: auto;
  max-width: min(19rem, 90%);
  max-height: min(17.5rem, 38vh);
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--brand-tertiary) 28%, var(--glass-edge));
  box-shadow: 0 0.35em 1.25em hsl(0 0% 0% / 0.22);
}
.quote footer {
  margin-top: auto;
  padding-top: var(--sp-5);
  display: flex; gap: var(--sp-3); align-items: center;
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--brand-tertiary) 14%, var(--muted));
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.quote footer strong { color: color-mix(in srgb, var(--brand-secondary) 15%, var(--text)); font-weight: 500; }

/* Témoignages : bordure simple (sans anneau / halo type relief) */
.quote.testimonial-card {
  border-color: color-mix(in srgb, var(--brand-secondary) 40%, var(--stroke-2));
  box-shadow: var(--glass-shadow);
}
.testimonial-icon {
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: var(--sp-5);
  color: color-mix(in srgb, var(--brand-secondary) 72%, var(--brand-tertiary));
  filter: drop-shadow(0 0 1rem color-mix(in srgb, var(--brand-secondary) 30%, transparent));
  transition: transform var(--t) var(--ease-out), color var(--t-fast) var(--ease);
}
.testimonial-card:hover .testimonial-icon {
  color: color-mix(in srgb, var(--brand-secondary) 84%, var(--text));
  transform: translateY(-0.15rem) rotate(-3deg);
}

/* --- Testimonials grid (2 colonnes desktop, stack mobile) --- */
.testimonials-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  margin-top: var(--sp-8);
}
@media (min-width: 768px) {
  .testimonials-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}
.testimonials-grid > .testimonial-card { margin: 0; }
.testimonials-grid + .stats { margin-top: var(--sp-8); }

/* --- FAQ (accordéon) : lisibilité, cibles tactiles, focus clavier
      Twist : compteur 01–n, filet de titre, accent ouvert, hover léger --- */
.section-faq .section-head {
  margin-bottom: 0;
  padding-bottom: var(--sp-6);
}
.section-faq .section-head::after {
  content: "";
  display: block;
  width: min(11rem, 38vw);
  height: 1px;
  margin: var(--sp-5) auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--brand-secondary) 45%, transparent) 35%,
    color-mix(in srgb, var(--brand-tertiary) 40%, transparent) 65%,
    transparent
  );
  opacity: 0.85;
}
.faq-wrap {
  width: 100%;
  margin-top: 0;
}
.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  align-items: start;
  counter-reset: faq-idx;
}
@media (min-width: 48em) {
  .faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-4);
    row-gap: var(--sp-2);
  }
}
@media (min-width: 64em) {
  .faq {
    column-gap: var(--sp-5);
  }
}
.faq details.faq-item {
  --faq-accent: color-mix(in srgb, var(--brand-secondary) 65%, var(--brand-tertiary));
  position: relative;
  isolation: isolate;
  background: var(--glass-stack);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, var(--glass-edge));
  border-radius: var(--radius-lg);
  padding: 0;
  counter-increment: faq-idx;
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    background var(--t) var(--ease),
    transform 0.35s var(--ease-out);
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .faq details.faq-item:hover {
    transform: translateY(-0.12rem);
  }
}
.faq details.faq-item:hover {
  border-color: color-mix(in srgb, var(--brand-secondary) 32%, var(--stroke-2));
  box-shadow:
    var(--glass-shadow),
    0 0 0 1px color-mix(in srgb, var(--brand-secondary) 10%, transparent);
}
.faq details.faq-item[open] {
  border-color: color-mix(in srgb, var(--brand-secondary) 40%, var(--stroke-2));
  background: color-mix(in srgb, var(--surface) 35%, var(--glass-stack));
  box-shadow:
    var(--glass-shadow),
    inset 3px 0 0 0 var(--faq-accent);
}
.faq details.faq-item > * { position: relative; z-index: 1; }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 3.25rem;
  padding: clamp(0.95rem, 2.5vw, 1.2rem) clamp(1rem, 3vw, 1.35rem);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq .faq-item > summary::before {
  content: counter(faq-idx, decimal-leading-zero);
  flex: 0 0 auto;
  align-self: flex-start;
  margin-inline-end: 0.65rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.2;
  font-family: var(--font-sans);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-secondary) 48%, var(--muted));
  min-width: 1.75rem;
  padding-top: 0.42em;
  font-variant-numeric: tabular-nums;
}
.faq details.faq-item[open] > summary::before {
  color: color-mix(in srgb, var(--brand-secondary) 25%, var(--text));
}
.faq .faq-summary__text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: var(--lh-snug);
  padding-block: 0.15em;
  letter-spacing: -0.01em;
}
.faq .faq-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -0.05rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 32%, var(--stroke));
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  color: color-mix(in srgb, var(--brand-secondary) 50%, var(--text-dim));
  transition:
    color var(--t) var(--ease),
    background var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.faq details.faq-item:hover .faq-chevron {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand-secondary) 48%, var(--stroke-2));
}
.faq details.faq-item[open] .faq-chevron {
  color: var(--text);
  background: color-mix(in srgb, var(--brand-secondary) 14%, var(--bg));
  border-color: color-mix(in srgb, var(--brand-secondary) 44%, var(--stroke-2));
}
.faq .faq-chevron__icon {
  display: block;
  transition: transform 0.35s var(--ease);
}
.faq details.faq-item[open] .faq-chevron__icon {
  transform: rotate(180deg);
}
.faq summary:focus { outline: none; }
.faq summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-secondary) 55%, var(--text));
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.faq .faq-answer {
  margin: 0;
  padding: 0 clamp(1rem, 2.2vw, 1.2rem) clamp(1.1rem, 2.2vw, 1.25rem);
  border-top: 1px solid color-mix(in srgb, var(--brand-secondary) 14%, var(--stroke));
  color: var(--text-dim);
  font-size: var(--fs-sm);
  line-height: 1.65;
  max-width: none;
  text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  .faq .faq-chevron__icon { transition: none; }
  .faq details.faq-item[open] .faq-chevron__icon { transform: rotate(180deg); }
  .faq details.faq-item { transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease); }
  .faq details.faq-item:hover { transform: none; }
}

/* --- CTA band : fond clair (même DA que #offres .offres-cta) --- */
.cta-band {
  position: relative;
  background: color-mix(in srgb, var(--text) 88%, var(--brand-secondary));
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 42%, var(--text));
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  grid-template-columns: 1fr;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.35),
    0 0.75rem 2.25rem color-mix(in srgb, var(--bg) 22%, transparent);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse 75% 80% at 100% 0%, color-mix(in srgb, var(--brand-tertiary) 18%, transparent), transparent 68%);
  filter: blur(32px);
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 {
  color: var(--bg);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.cta-band p {
  color: color-mix(in srgb, var(--bg) 76%, var(--brand-secondary));
}
.cta-band .eyebrow {
  color: color-mix(in srgb, var(--bg) 72%, var(--brand-secondary));
}
.cta-band .eyebrow::before {
  background: linear-gradient(90deg, var(--bg), color-mix(in srgb, var(--bg) 62%, var(--brand-tertiary)));
}
.cta-band .card-link {
  color: color-mix(in srgb, var(--bg) 78%, var(--brand-secondary));
}
.cta-band:hover .card-link {
  color: var(--bg);
}
.cta-band-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (min-width: 800px) {
  .cta-band { grid-template-columns: 1.4fr auto; }
}

/* CTA centré : une colonne, contenu et actions alignés au milieu. */
.cta-band--center {
  justify-items: center;
  text-align: center;
}
.cta-band--center > div {
  display: grid;
  justify-items: center;
  max-width: 42rem;
}
.cta-band--center .eyebrow {
  justify-content: center;
  margin-inline: auto;
}
.cta-band--center p {
  max-width: 38ch;
}
.cta-band--center .cta-band-actions {
  justify-content: center;
}
.cta-band--center .cta-band-actions .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
@media (min-width: 800px) {
  .cta-band--center {
    grid-template-columns: 1fr;
  }
}

/* CTA final création de site : titre compact, actions préservées à droite. */
.cta-band--site-project {
  padding: clamp(2rem, 5vw, 3.5rem);
}
.cta-band--site-project h2 {
  margin-block-end: 0;
  font-size: clamp(1.75rem, 1.2rem + 1vw, 2.25rem);
}
@media (min-width: 800px) {
  .cta-band--site-project {
    grid-template-columns: minmax(20rem, 1fr) auto;
    gap: clamp(var(--sp-5), 3vw, var(--sp-7));
  }
  .cta-band--site-project .cta-band-actions {
    justify-content: flex-end;
  }
}

/* CTA de choix d'offre : lecture à gauche, actions clairement regroupées à droite. */
#offres .offres-cta {
  padding: clamp(var(--sp-6), 4.5vw, var(--sp-7));
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  align-items: center;
}
#offres .offres-cta .eyebrow {
  margin-block-end: var(--sp-3);
}
#offres .offres-cta p {
  max-width: 62ch;
  margin-block-end: 0;
}
#offres .offres-cta h2 {
  max-width: 28ch;
  margin-block-end: var(--sp-3);
  font-size: clamp(1.65rem, 2.8vw, 2.25rem);
}
#offres .offres-cta .cta-band-actions {
  display: grid;
  width: 100%;
  gap: var(--sp-5);
  align-content: center;
}
#refonte-cta .cta-band-actions {
  flex-direction: column;
  align-items: flex-start;
}
#refonte-cta .cta-band-actions .card-link {
  margin-top: 0;
  padding-top: 0;
}
#offres .offres-cta .cta-band-actions .btn {
  width: 100%;
  white-space: normal;
}
@media (min-width: 800px) {
  #offres .offres-cta {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  }
  #offres .offres-cta .cta-band-actions {
    max-width: 21rem;
    justify-self: end;
  }
}

/* --- Breadcrumb --- */
/* Pas de padding-top : le .hero le gère déjà (8rem). */
.breadcrumb {
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--text-dim) 78%, var(--muted));
  padding: 0;
  margin-block-end: var(--sp-5);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumb li::after { content: "/"; margin-left: 6px; color: color-mix(in srgb, var(--text-dim) 55%, var(--muted)); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: color-mix(in srgb, var(--text-dim) 88%, var(--muted)); }
.breadcrumb a:hover,
.breadcrumb a:focus-visible { color: var(--brand-secondary); }
.breadcrumb [aria-current="page"] { color: var(--text); }

/* --- Prose (article body) --- */
.prose { max-width: 42rem; font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--text-dim); }
.prose h2 { color: var(--text); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.prose h3 { color: var(--text); margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.prose p { margin-top: var(--sp-3); color: var(--text-dim); }
.prose ul, .prose ol { margin: var(--sp-3) 0; padding-left: var(--sp-5); }
.prose li { margin-top: var(--sp-2); }
.prose strong {
  color: color-mix(in srgb, var(--brand-secondary) 32%, color-mix(in srgb, var(--brand-tertiary) 14%, var(--text)));
  font-weight: 600;
}
.prose a {
  color: var(--brand-secondary);
  font-weight: 500;
}
.prose a:hover,
.prose a:focus-visible {
  color: color-mix(in srgb, var(--brand-tertiary) 22%, var(--brand-secondary));
}
.prose blockquote {
  position: relative;
  isolation: isolate;
  margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, var(--glass-edge));
  border-left: 2px solid color-mix(in srgb, var(--brand-secondary) 45%, var(--brand-tertiary));
  background: var(--glass-stack);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--text);
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
}
.prose code { background: var(--surface-2); padding: 2px 6px; font-size: 0.9em; color: var(--text); }

/* --- Blog article (template éditorial, mesure étroite) --- */
.blog-article {
  max-width: none;
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4rem, 9vw, 7rem);
}
.blog-article__inner {
  width: 100%;
  max-width: var(--wrap-tight);
  margin: 0 auto;
  padding-inline: var(--sp-5);
}
.blog-article__breadcrumb {
  margin-block-end: clamp(0.85rem, 2vw, 1.25rem);
}
.blog-article__back {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-size: var(--fs-sm);
}
.blog-article__back a {
  color: var(--muted);
  text-decoration: none;
}
.blog-article__back a:hover,
.blog-article__back a:focus-visible {
  color: var(--text);
  text-decoration: underline;
}
.blog-article__title {
  font-size: clamp(2.15rem, 5.2vw, 3.35rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text);
  max-width: 18ch;
  margin: 0;
}
.blog-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  margin-block-start: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.blog-article__meta time,
.blog-article__meta span {
  color: color-mix(in srgb, var(--brand-secondary) 10%, var(--muted));
}
.blog-article__meta-sep {
  width: 1px;
  height: 0.85em;
  background: color-mix(in srgb, var(--brand-tertiary) 28%, var(--stroke));
}
.blog-article__lead {
  margin-block-start: var(--sp-6);
  max-width: var(--measure);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--brand-secondary) 12%, var(--muted));
}
.blog-article__byline {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-6);
  border-top: 1px solid color-mix(in srgb, var(--brand-secondary) 14%, var(--stroke));
}
.blog-article__byline-main {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
  flex: 1;
}
.blog-article__share {
  position: relative;
  margin-inline-start: auto;
  flex-shrink: 0;
}
.blog-article__share-btn {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 22%, var(--stroke));
  background: color-mix(in srgb, var(--brand-secondary) 6%, var(--surface-2));
  color: var(--text);
  cursor: pointer;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.blog-article__share-btn:hover,
.blog-article__share.is-open .blog-article__share-btn {
  background: color-mix(in srgb, var(--brand-secondary) 12%, var(--surface-2));
  border-color: color-mix(in srgb, var(--brand-tertiary) 35%, var(--stroke));
}
.blog-article__share-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-tertiary) 55%, transparent);
  outline-offset: 2px;
}
.blog-article__share-btn .ph-icon {
  width: 1.1rem;
  height: 1.1rem;
}
.blog-article__share-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 30;
  min-width: 11.5rem;
  padding: 0.35rem;
  display: grid;
  gap: 0.1rem;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, var(--stroke));
  box-shadow: 0 10px 28px hsl(0 0% 0% / 0.18);
}
.blog-article__share-menu[hidden] { display: none; }
.blog-article__share-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms var(--ease-out);
}
.blog-article__share-item:hover,
.blog-article__share-item:focus-visible {
  background: color-mix(in srgb, var(--brand-secondary) 10%, var(--surface-2));
  outline: none;
}
.blog-article__share-item .ph-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--muted);
}
.blog-article__share-toast {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 31;
  padding: 0.45rem 0.75rem;
  font-size: var(--fs-xs);
  color: var(--text);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 20%, var(--stroke));
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.2rem);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.blog-article__share-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.blog-article__avatar {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 22%, var(--stroke));
  background: var(--surface-2);
}
.blog-article__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-article__byline-text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.blog-article__byline-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.blog-article__byline-role {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.3;
}
.blog-article__hero {
  margin: clamp(2rem, 5vw, 3.25rem) 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 16%, var(--stroke));
  background: var(--surface-2);
}
.blog-article__hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.blog-article__hero figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
  border-top: 1px solid color-mix(in srgb, var(--brand-secondary) 12%, var(--stroke));
}
.blog-article__body {
  margin-block-start: clamp(2.25rem, 5vw, 3.5rem);
  max-width: var(--measure);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-dim);
}
.blog-article__body > :first-child { margin-top: 0; }
.blog-article__body h2 {
  color: var(--text);
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  letter-spacing: -0.02em;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: var(--sp-3);
  line-height: 1.25;
}
.blog-article__body h3 {
  color: var(--text);
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  line-height: 1.3;
}
.blog-article__body p { margin-top: var(--sp-4); max-width: none; }
.blog-article__body ul,
.blog-article__body ol {
  margin: var(--sp-4) 0;
  padding-left: var(--sp-5);
}
.blog-article__body li { margin-top: var(--sp-2); }
.blog-article__body a {
  color: var(--brand-secondary);
  font-weight: 500;
  text-decoration: none;
}
.blog-article__body a:hover,
.blog-article__body a:focus-visible {
  color: color-mix(in srgb, var(--brand-tertiary) 22%, var(--brand-secondary));
}
.blog-article__figure {
  margin: clamp(2rem, 4vw, 2.75rem) 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 14%, var(--stroke));
  background: var(--surface-2);
}
.blog-article__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.blog-article__figure figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.45;
}
.blog-article__figure--diagram img {
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--surface);
}
.blog-article__body .prose-formula {
  margin-top: var(--sp-4);
  overflow-x: auto;
}
.blog-article__body .prose-formula code {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.95em;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 12%, var(--stroke));
  border-radius: var(--radius);
}
.blog-article__body .table-wrap {
  margin-top: var(--sp-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.blog-article__body .prose-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.blog-article__body .prose-table th,
.blog-article__body .prose-table td {
  padding: 0.65em 0.75em;
  text-align: left;
  vertical-align: top;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 14%, var(--stroke));
}
.blog-article__body .prose-table th {
  color: var(--text);
  background: var(--surface-2);
  font-weight: 600;
}
.blog-article__body .prose-table td {
  color: var(--text-dim);
}
.blog-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  padding-block-start: var(--sp-6);
  border-top: 1px solid color-mix(in srgb, var(--brand-secondary) 14%, var(--stroke));
  list-style: none;
  padding-inline: 0;
  margin-inline: 0;
}
.blog-article__related {
  margin-block-start: clamp(3rem, 7vw, 4.5rem);
}
.blog-article__related-head {
  margin-block-end: var(--sp-5);
}
.blog-article__related-head h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.blog-article__related .journal-list {
  gap: var(--sp-3);
}
@media (max-width: 639px) {
  .blog-article__related .journal-item {
    grid-template-columns: 1fr;
    border-radius: var(--radius-lg);
    gap: var(--sp-2);
  }
  .blog-article__related .journal-title {
    flex-direction: column;
    gap: var(--sp-1);
  }
}

/* --- Blog index (listing éditorial, DA montaut.eu) --- */
.hero.blog-index-hero {
  padding-block-end: clamp(1.25rem, 2.5vw, 2rem);
}
.blog-index-hero .hero-aurora::before,
.blog-index-hero .hero-aurora::after {
  opacity: 0.1;
  filter: blur(48px);
}
.blog-index-hero .hero-aurora-svg {
  opacity: 0.06;
}
.blog-index-hero .breadcrumb {
  margin-block-end: var(--sp-4);
}
.blog-index-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--text);
  margin: var(--sp-3) 0 0;
  max-width: 22ch;
  text-wrap: balance;
}
.hero.blog-index-hero .blog-index-hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--brand-secondary) 48%, var(--text));
}
.blog-index-hero__lead {
  margin-block-start: var(--sp-4);
  max-width: var(--measure);
  color: var(--text-dim);
}

.blog-index-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-index-topics .tag {
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  background: color-mix(in srgb, var(--surface-2) 70%, var(--brand-secondary));
  border-color: color-mix(in srgb, var(--brand-secondary) 22%, var(--stroke));
}
.blog-index-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--brand-secondary) 55%, var(--text));
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 34%, var(--stroke));
  background: color-mix(in srgb, var(--brand-secondary) 10%, var(--surface));
}

.section.blog-index-featured {
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem);
  padding-inline: 0;
}
.section.blog-index-feed {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.section.blog-index-cta {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(3rem, 6vw, 5rem);
}
/* Battre .section + .section / .section-soft + .section (rythme UX polish) */
.section.blog-index-featured,
.section-soft.blog-index-featured + .section.blog-index-feed,
.section.blog-index-feed + .section.blog-index-cta {
  padding-block-start: clamp(1.25rem, 2.5vw, 1.85rem);
}
.blog-featured {
  position: relative;
  isolation: isolate;
  max-width: none;
  width: 100%;
  border-block: 1px solid color-mix(in srgb, var(--brand-secondary) 20%, var(--stroke));
  border-inline: 0;
  background: color-mix(in srgb, var(--surface) 88%, var(--glass-stack));
  backdrop-filter: blur(0.45rem) saturate(1.15);
  -webkit-backdrop-filter: blur(0.45rem) saturate(1.15);
  overflow: hidden;
}
.blog-featured > * { position: relative; z-index: 1; }
.blog-featured__link {
  display: grid;
  grid-template-columns: 1fr;
  text-decoration: none;
  color: inherit;
  min-height: 100%;
}
@media (min-width: 900px) {
  .blog-featured__link {
    grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.85fr);
    min-height: clamp(20rem, 32vw, 26rem);
  }
}
.blog-featured__media {
  position: relative;
  background: var(--surface-2);
  overflow: hidden;
}
.blog-featured__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 62%,
    color-mix(in srgb, var(--bg) 40%, transparent) 100%
  );
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 900px) {
  .blog-featured__media::after {
    background: linear-gradient(
      90deg,
      transparent 55%,
      color-mix(in srgb, var(--surface) 28%, transparent) 100%
    );
  }
}
.blog-featured__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 14rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 520ms var(--ease-out);
}
@media (min-width: 900px) {
  .blog-featured__media img {
    min-height: 100%;
    aspect-ratio: auto;
  }
}
.blog-featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3rem);
}
.blog-featured__body .eyebrow {
  margin: 0;
}
.blog-featured__meta {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
}
.blog-featured__title {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-h);
  color: var(--text);
  margin: var(--sp-1) 0 0;
  max-width: 28ch;
  text-wrap: balance;
}
.blog-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-secondary);
}
.blog-featured__cta .ph-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 220ms var(--ease-out);
}
.blog-featured__link:hover .blog-featured__media img,
.blog-featured__link:focus-visible .blog-featured__media img {
  transform: scale(1.03);
}
.blog-featured__link:hover .blog-featured__cta .ph-icon,
.blog-featured__link:focus-visible .blog-featured__cta .ph-icon {
  transform: translateX(0.2rem);
}
.blog-featured__link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-secondary) 65%, transparent);
  outline-offset: 0.2rem;
}
.blog-featured:focus-within {
  border-block-color: color-mix(in srgb, var(--brand-secondary) 38%, var(--stroke));
}

.blog-index-feed__head {
  margin-block-end: var(--sp-5);
}
.blog-index-feed__head .section-head-title {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  letter-spacing: -0.02em;
}
.blog-index-feed__list {
  gap: var(--sp-3);
}
/* Archive = grille journal homepage (1fr + meta) + extrait sous le titre */
.blog-index-item__main {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
}
.blog-index-feed__list .journal-title {
  align-items: baseline;
  min-width: 0;
  font-size: var(--fs-sm);
}
.blog-index-feed__list .journal-title > span:last-child {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.blog-index-item__excerpt {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-dim);
}
@media (max-width: 639px) {
  .blog-index-feed__list .journal-item {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
  .blog-index-feed__list .journal-title {
    flex-direction: column;
    gap: var(--sp-1);
  }
  .blog-index-feed__list .journal-title > span:last-child {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .blog-index-feed__list .journal-meta {
    white-space: normal;
  }
}

.blog-index-cta .cta-band {
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.22),
    0 0.5rem 1.5rem color-mix(in srgb, var(--bg) 16%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .blog-featured__media img,
  .blog-featured__cta .ph-icon {
    transition: none;
  }
  .blog-featured__link:hover .blog-featured__media img,
  .blog-featured__link:focus-visible .blog-featured__media img {
    transform: none;
  }
}

html[data-theme="light"] .hero.blog-index-hero .blog-index-hero__title em {
  color: color-mix(in srgb, var(--brand-secondary) 55%, var(--text));
}
html[data-theme="light"] .blog-index-hero .hero-aurora::before,
html[data-theme="light"] .blog-index-hero .hero-aurora::after {
  opacity: 0.08;
}
html[data-theme="light"] .blog-featured {
  border-block-color: color-mix(in srgb, var(--brand-secondary) 16%, var(--stroke));
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}
html[data-theme="light"] .blog-index-topics .tag {
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  background: color-mix(in srgb, var(--surface-2) 85%, var(--brand-secondary));
}
html[data-theme="light"] .blog-featured__meta {
  color: color-mix(in srgb, var(--text) 58%, var(--muted));
}
html[data-theme="light"] .blog-featured__media::after {
  background: linear-gradient(
    180deg,
    transparent 58%,
    color-mix(in srgb, var(--surface) 55%, transparent) 100%
  );
}
@media (min-width: 900px) {
  html[data-theme="light"] .blog-featured__media::after {
    background: linear-gradient(
      90deg,
      transparent 50%,
      color-mix(in srgb, var(--surface) 40%, transparent) 100%
    );
  }
}

/* --- Aside / sticky TOC column --- */
.layout-article { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); }
@media (min-width: 1000px) {
  .layout-article { grid-template-columns: 1fr 18rem; }
}
.toc {
  position: sticky; top: 6rem; align-self: start;
  padding: var(--sp-5);
  background: color-mix(in srgb, var(--brand-secondary) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand-tertiary) 22%, var(--stroke));
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
}
.toc strong {
  display: block; margin-bottom: var(--sp-3);
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-secondary) 35%, var(--muted));
}
.toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.toc a { color: var(--muted); text-decoration: none; display: block; padding: 6px 10px; border-radius: var(--radius); font-size: var(--fs-sm); }
.toc a:hover { background: color-mix(in srgb, var(--brand-tertiary) 10%, var(--surface-2)); color: var(--text); }

/* --- Check list --- */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.check-list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3); color: var(--text-dim); align-items: flex-start; }
.check-list li::before {
  content: ""; width: 18px; height: 18px; margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234d87b2'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-7 7a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L9 11.6l6.3-6.3a1 1 0 011.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center/16px;
  opacity: 0.85;
}

/* --- Cross list (negative) --- */
.cross-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.cross-list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3); color: var(--muted); align-items: flex-start; }
.cross-list li::before {
  content: ""; width: 18px; height: 18px; margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2379439a'%3E%3Cpath fill-rule='evenodd' d='M4.3 4.3a1 1 0 011.4 0L10 8.6l4.3-4.3a1 1 0 111.4 1.4L11.4 10l4.3 4.3a1 1 0 01-1.4 1.4L10 11.4l-4.3 4.3a1 1 0 01-1.4-1.4L8.6 10 4.3 5.7a1 1 0 010-1.4z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center/16px;
}

/* --- Fit board (profils clients : oui / non) --- */
.fit-board {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .fit-board {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
}
.fit-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--sp-5) var(--sp-6);
  background: var(--glass-stack);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, var(--glass-edge));
  border-radius: 0;
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
}
.fit-panel > * { position: relative; z-index: 1; }
.fit-panel--yes {
  border-color: color-mix(in srgb, var(--brand-secondary) 28%, var(--glass-edge));
  box-shadow:
    var(--glass-shadow),
    inset 2px 0 0 0 color-mix(in srgb, var(--brand-secondary) 72%, transparent);
}
.fit-panel--no {
  background: color-mix(in srgb, var(--surface) 42%, var(--glass-stack));
  border-color: color-mix(in srgb, var(--brand-tertiary) 28%, var(--glass-edge));
  box-shadow:
    var(--glass-shadow),
    inset 2px 0 0 0 color-mix(in srgb, var(--brand-tertiary) 68%, transparent);
}
.fit-panel__head {
  margin-block-end: var(--sp-5);
  padding-block-end: var(--sp-4);
  border-bottom: 1px solid hsl(0 0% 100% / 0.06);
}
.fit-panel__head h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  letter-spacing: -0.02em;
  color: var(--text);
}
@property --fit-bloom {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --fit-shift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0rem;
}
@property --fit-beam-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 210deg;
}
.fit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
}
.fit-list > li {
  --fit-accent: var(--brand-secondary);
  --fit-ink: color-mix(in srgb, var(--brand-secondary) 82%, var(--text));
  --fit-shift: 0rem;
  --fit-bloom: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: flex-start;
  padding: 0.7rem 0.8rem;
  margin-inline: -0.8rem;
  border-radius: 0;
  background: radial-gradient(
    120% 90% at 0% 40%,
    color-mix(in srgb, var(--fit-accent) calc(var(--fit-bloom) * 16%), transparent) 0%,
    transparent 58%
  );
  transform: translate3d(var(--fit-shift), 0, 0);
  transition:
    transform 420ms var(--ease-out),
    background 420ms var(--ease-out),
    --fit-bloom 420ms var(--ease-out);
}
/* Border-beam : anneau conique masqué (1px) */
.fit-list > li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--fit-beam-angle),
    transparent 0%,
    transparent 62%,
    color-mix(in srgb, var(--fit-accent) 70%, white) 72%,
    color-mix(in srgb, var(--fit-accent) 28%, transparent) 82%,
    transparent 92%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 280ms var(--ease);
}
.fit-list > li > * {
  position: relative;
  z-index: 1;
}
.fit-list > li:hover,
.fit-list > li:focus-within {
  --fit-shift: 0.28rem;
  --fit-bloom: 1;
}
.fit-list > li:hover::before,
.fit-list > li:focus-within::before {
  opacity: 1;
  animation: fitBorderBeam 1.7s linear infinite;
}
.fit-list--no > li {
  --fit-accent: var(--brand-tertiary);
  --fit-ink: color-mix(in srgb, var(--brand-tertiary) 78%, var(--text));
}
.fit-list__mark {
  position: relative;
  flex: none;
  width: 2.35rem;
  height: 2.35rem;
  margin-top: 0.05rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--fit-ink);
  background: color-mix(in srgb, var(--fit-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--fit-accent) 30%, transparent);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.08);
  transform: translateZ(0) scale(1) rotate(0deg);
  transition:
    color 360ms var(--ease-out),
    background 360ms var(--ease-out),
    border-color 360ms var(--ease-out),
    box-shadow 420ms var(--ease-out),
    transform 480ms cubic-bezier(0.34, 1.45, 0.64, 1);
}
.fit-list__mark::after {
  content: "";
  position: absolute;
  right: -0.12rem;
  bottom: -0.08rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  z-index: 2;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23e8f2f8'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-7 7a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L9 11.6l6.3-6.3a1 1 0 011.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E")
    no-repeat center / 0.65rem,
    color-mix(in srgb, var(--brand-secondary) 88%, #1a2a36);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 55%, var(--bg));
  transform: scale(1) rotate(0deg);
  transition:
    transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 360ms var(--ease-out);
}
.fit-list--no .fit-list__mark::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23f3e8f8'%3E%3Cpath fill-rule='evenodd' d='M4.3 4.3a1 1 0 011.4 0L10 8.6l4.3-4.3a1 1 0 111.4 1.4L11.4 10l4.3 4.3a1 1 0 01-1.4 1.4L10 11.4l-4.3 4.3a1 1 0 01-1.4-1.4L8.6 10 4.3 5.7a1 1 0 010-1.4z' clip-rule='evenodd'/%3E%3C/svg%3E")
    no-repeat center / 0.62rem,
    color-mix(in srgb, var(--brand-tertiary) 86%, #241428);
}
.fit-list__glyph {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform 480ms cubic-bezier(0.34, 1.45, 0.64, 1);
}
.fit-list > li:hover .fit-list__mark,
.fit-list > li:focus-within .fit-list__mark {
  transform: translateZ(0) scale(1.06) rotate(-3deg);
  border-color: color-mix(in srgb, var(--fit-accent) 50%, transparent);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.14),
    0 0.4rem 1rem -0.4rem color-mix(in srgb, var(--fit-accent) 45%, transparent);
}
.fit-list > li:hover .fit-list__mark::after,
.fit-list > li:focus-within .fit-list__mark::after {
  transform: scale(1.1) rotate(10deg);
}
.fit-list > li:hover .fit-list__glyph,
.fit-list > li:focus-within .fit-list__glyph {
  transform: translateY(-1px) scale(1.06) rotate(5deg);
}
.fit-list__title {
  display: block;
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--text);
  margin-block-end: 0.2rem;
  transition:
    color 320ms var(--ease-out),
    letter-spacing 420ms var(--ease-out),
    transform 420ms var(--ease-out);
}
.fit-list__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-dim);
  transition:
    color 400ms var(--ease-out) 30ms,
    transform 420ms var(--ease-out) 30ms;
}
.fit-list--no .fit-list__body {
  color: var(--muted);
}
.fit-list > li:hover .fit-list__title,
.fit-list > li:focus-within .fit-list__title {
  color: color-mix(in srgb, var(--fit-accent) 22%, var(--text));
  letter-spacing: 0.008em;
  transform: translateX(0.1rem);
}
.fit-list > li:hover .fit-list__body,
.fit-list > li:focus-within .fit-list__body {
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  transform: translateX(0.06rem);
}
@keyframes fitBorderBeam {
  to { --fit-beam-angle: 570deg; }
}
@media (prefers-reduced-motion: reduce) {
  .fit-list > li,
  .fit-list__mark,
  .fit-list__glyph,
  .fit-list__title,
  .fit-list__body,
  .fit-list__mark::after {
    transition: none;
  }
  .fit-list > li:hover,
  .fit-list > li:focus-within {
    --fit-shift: 0;
  }
  .fit-list > li:hover::before,
  .fit-list > li:focus-within::before {
    animation: none;
  }
  .fit-list > li:hover .fit-list__mark,
  .fit-list > li:focus-within .fit-list__mark,
  .fit-list > li:hover .fit-list__glyph,
  .fit-list > li:focus-within .fit-list__glyph,
  .fit-list > li:hover .fit-list__mark::after,
  .fit-list > li:focus-within .fit-list__mark::after,
  .fit-list > li:hover .fit-list__title,
  .fit-list > li:focus-within .fit-list__title,
  .fit-list > li:hover .fit-list__body,
  .fit-list > li:focus-within .fit-list__body {
    transform: none;
  }
}

/* --- Journal : articles en pills horizontales --- */
.journal-list { display: grid; gap: var(--sp-3); }
.journal-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--glass-stack);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 22%, var(--stroke));
  border-radius: var(--radius-full);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
  text-decoration: none;
  color: var(--text);
  position: relative;
  isolation: isolate;
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
}
.journal-item > * { position: relative; z-index: 1; }
.journal-item:hover,
.journal-item:focus-visible {
  transform: translateX(4px);
  border-color: color-mix(in srgb, var(--brand-secondary) 32%, var(--stroke));
  color: var(--text);
}
.journal-title {
  display: flex; align-items: baseline; gap: var(--sp-4);
  font-size: var(--fs-md);
  font-weight: 500;
}
.journal-title .num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85em;
  color: color-mix(in srgb, var(--brand-tertiary) 55%, color-mix(in srgb, var(--brand-secondary) 18%, var(--muted)));
  font-weight: 400;
  min-width: 7ch;
  flex-shrink: 0;
  white-space: nowrap;
}
.journal-meta {
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--brand-secondary) 22%, color-mix(in srgb, var(--brand-tertiary) 16%, var(--muted)));
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.journal-more {
  margin-block-start: var(--sp-5);
}
.journal-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-secondary);
  text-decoration: none;
}
.journal-more a .ph-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 220ms var(--ease-out);
}
.journal-more a:hover .ph-icon,
.journal-more a:focus-visible .ph-icon {
  transform: translateX(0.2rem);
}

/* --- Explorations : galerie parallax 2 colonnes inclinées --- */
.explorations {
  position: relative;
  min-height: 130vh;
  padding-block: var(--sp-7);
  overflow: hidden;
}
.explorations-content {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  text-align: center;
  pointer-events: none;
}
.explorations-content > * { pointer-events: auto; }
.explorations-columns {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  z-index: 1;
  transform: rotate(-6deg);
  opacity: 0.28;
}
.explorations-col {
  display: flex; flex-direction: column; gap: var(--sp-4);
  will-change: transform;
}
.explorations-col-up { transform: translateY(-15%); }
.explorations-col-down { transform: translateY(15%); }
.explorations-item {
  position: relative;
  isolation: isolate;
  padding: var(--sp-6);
  background: var(--glass-stack);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 22%, var(--glass-edge));
  border-radius: var(--radius-lg);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--text);
  letter-spacing: -0.02em;
  min-height: 8rem;
  display: flex; align-items: center;
  text-decoration: none;
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
}
.explorations-item > * { position: relative; z-index: 1; }
a.explorations-item { transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
a.explorations-item:hover,
a.explorations-item:focus-visible {
  border-color: color-mix(in srgb, var(--brand-secondary) 42%, var(--stroke-2));
  background: var(--glass-stack-strong);
}
.explorations-heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: var(--lh-snug);
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--brand-secondary) 12%, color-mix(in srgb, var(--brand-tertiary) 10%, var(--text)));
}

/* --- Logo strip : défilement horizontal de logos clients --- */
.logo-strip {
  --logo-gap: 3.125rem;
  --logo-duration: 25s;
  position: relative;
  width: 100%;
  height: 9.375rem;
  margin-inline: auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent 100%);
}
.logo-strip-track {
  display: flex;
  flex-direction: row;
  width: fit-content;
  gap: var(--logo-gap);
  padding-block: 1.25rem;
  animation: logoStripScroll var(--logo-duration) linear infinite;
  will-change: transform;
}
.logo-strip-track a,
.logo-strip-track > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.logo-strip-track img {
  display: block;
  height: 5rem;
  width: auto;
  max-width: 11.25rem;
  object-fit: contain;
  transition: transform 300ms var(--ease);
}
/* Logos strip : variante claire (dark) / sombre (light) — même pattern show/hide que .theme-switch__icon */
.logo-strip__theme--light { display: none; }
html[data-theme="light"] .logo-strip__theme--dark { display: none; }
html[data-theme="light"] .logo-strip__theme--light { display: block; }
.logo-strip-track a:hover img {
  transform: scale(1.1);
}
@keyframes logoStripScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - (var(--logo-gap) / 2))); }
}
.logo-strip:hover .logo-strip-track {
  animation-play-state: paused;
}
@media (max-width: 48rem) {
  .logo-strip {
    --logo-gap: 1.875rem;
    --logo-duration: 20s;
    height: 7.5rem;
  }
  .logo-strip-track img { height: 3.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip-track { animation: none !important; }
  .logo-strip { -webkit-mask-image: none; mask-image: none; }
}

/* Variante statique centrée (ex. page locale Périgueux) */
.logo-strip--static {
  height: auto;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
.logo-strip--static .logo-strip-track {
  animation: none;
  flex-wrap: wrap;
  justify-content: center;
  width: min(100%, 56rem);
  margin-inline: auto;
  padding-inline: var(--sp-4);
  row-gap: var(--sp-4);
  will-change: auto;
}
.logo-strip--static:hover .logo-strip-track {
  animation-play-state: unset;
}


/* --- Marquee infinie (footer) : P1-05
   Chaque .marquee-track contient 2× .marquee-seg (copie identique) : l’anim translate3d(-50%)
   boucle sans saut. Ne pas enlever un segment ni couper l’anim (sanctuaire intégrité boucle).
   Perf : uniquement transform (pas left/margin) ; pause hors viewport via .anim-paused (IO). */
.marquee {
  --marquee-gap: var(--sp-7);
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-6);
  border-block: 1px solid color-mix(in srgb, var(--brand-secondary) 28%, var(--stroke));
  isolation: isolate;
  contain: layout paint;
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--marquee-gap);
  backface-visibility: hidden;
  animation: marqueeScroll var(--marquee-duration) linear infinite;
}
.marquee-seg {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--marquee-gap);
}
.marquee-item {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: flex; align-items: center; gap: var(--marquee-gap);
}
.marquee-item::after {
  content: "";
  width: 0.7em;
  height: 0.7em;
  flex: none;
  background: color-mix(in srgb, var(--brand-secondary) 35%, color-mix(in srgb, var(--brand-tertiary) 50%, var(--muted)));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240 128a15.79 15.79 0 0 1-10.5 15l-63.44 23.07L143 229.5a16 16 0 0 1-30 0L89.94 166.06 26.5 143a16 16 0 0 1 0-30L89.94 89.94 113 26.5a16 16 0 0 1 30 0l23.07 63.44L229.5 113A15.79 15.79 0 0 1 240 128Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240 128a15.79 15.79 0 0 1-10.5 15l-63.44 23.07L143 229.5a16 16 0 0 1-30 0L89.94 166.06 26.5 143a16 16 0 0 1 0-30L89.94 89.94 113 26.5a16 16 0 0 1 30 0l23.07 63.44L229.5 113A15.79 15.79 0 0 1 240 128Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes marqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --- Marquee métiers (création site) : bandeau incliné, tokens marque ---
   Glow : ::before + translate3d (compositor). Pas de background-position
   (repaint + box-shadow chaque frame = CPU). */
.marquee--metiers {
  --marquee-duration: 40s;
  --marquee-gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-block: clamp(1.75rem, 4vw, 3.25rem);
  margin-inline: -2%;
  width: 104%;
  padding-block: clamp(0.85rem, 1.5vw, 1.25rem);
  border: none;
  background: linear-gradient(
    122deg,
    var(--brand-tertiary) 0%,
    color-mix(in srgb, var(--brand-tertiary) 48%, var(--brand-secondary)) 42%,
    var(--brand-secondary) 100%
  );
  box-shadow:
    -0.6rem 0 1.4rem color-mix(in srgb, var(--brand-tertiary) 26%, transparent),
    0.6rem 0 1.4rem color-mix(in srgb, var(--brand-secondary) 22%, transparent);
  transform: rotate(-2.5deg);
  transform-origin: center;
  contain: layout paint;
}
.marquee--metiers::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 180%;
  pointer-events: none;
  background: linear-gradient(
    122deg,
    var(--brand-tertiary) 0%,
    color-mix(in srgb, var(--brand-tertiary) 48%, var(--brand-secondary)) 42%,
    var(--brand-secondary) 100%
  );
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation: marquee-metiers-glow 18s ease-in-out infinite alternate;
}
@keyframes marquee-metiers-glow {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-44.44%, 0, 0); }
}
.marquee--metiers .marquee-track {
  position: relative;
  z-index: 1;
}
.marquee--metiers .marquee-item {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: clamp(0.82rem, 1.15vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
}
.marquee--metiers .marquee-item::after {
  /* font-size:1em → annule le .marquee-item::after { font-size:0.4em } du polish pack
     (sinon width/height en em deviennent minuscules / irrégulières) */
  font-size: 1em;
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 72%, transparent);
  -webkit-mask: none;
  mask: none;
}
@media (max-width: 720px) {
  .marquee--metiers {
    transform: rotate(-1.5deg);
    width: 108%;
    margin-inline: -4%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee--metiers::before {
    animation: none;
    transform: none;
    width: 100%;
  }
  .marquee--metiers .marquee-track {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee--metiers .marquee-seg:last-child { display: none; }
  .marquee--metiers .marquee-seg {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.45rem;
  }
}

/* --- Loading screen --- */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-8) var(--sp-5);
  transition: opacity 700ms var(--ease-out), visibility 700ms var(--ease-out);
}
.loading-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-top,
.loading-bottom {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-secondary) 26%, color-mix(in srgb, var(--brand-tertiary) 12%, var(--muted)));
}
.loading-middle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--text);
  text-align: center;
  overflow: hidden;
  height: 1.1em;
  position: relative;
}
.loading-middle-word {
  display: block;
  transition: transform 500ms var(--ease-out), opacity 500ms var(--ease);
}
.loading-counter {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--brand-secondary) 35%, color-mix(in srgb, var(--brand-tertiary) 18%, var(--text)));
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* --- Zone list (pill minimal) --- */
/* Badge carbone (footer) : chip autonome, empreinte CO2 calculée en direct */
.eco-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.34rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 32%, var(--stroke));
  font-size: 0.72rem; line-height: 1;
  color: var(--muted);
  text-transform: none; letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
}
a.eco-badge::before,
a.eco-badge::after { content: none; display: none; }
.site-footer a.eco-badge,
.site-footer a.eco-badge:hover,
.site-footer a.eco-badge:focus-visible {
  color: var(--muted);
  padding-inline-end: 0.6rem;
}
.eco-badge__leaf { color: var(--brand-secondary); flex-shrink: 0; }
.eco-badge__val { color: var(--text); font-weight: 600; white-space: nowrap; }
.eco-badge__sub { color: var(--muted); }
@media (max-width: 30rem) { .eco-badge__sub { display: none; } }

/* Zone couverte : module structuré (en-tête + stat serif + puces + pont) */
.terroir-zone {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  border: 1px solid var(--stroke);
}
.terroir-zone__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.terroir-zone__lead {
  margin: 0 0 var(--sp-5);
  max-width: 62ch;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--muted);
}
.terroir-zone__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-shrink: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  white-space: nowrap;
}
.terroir-zone__count em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-secondary);
}
.terroir-zone__bridge {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--stroke);
  font-size: 0.92rem;
  color: var(--muted);
}
.terroir-zone__bridge a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-secondary) 45%, transparent);
  padding-bottom: 1px;
  transition: border-color var(--t-fast, 0.15s) ease;
}
.terroir-zone__bridge a:hover { border-bottom-color: var(--brand-secondary); }
.terroir-zone__bridge a .ph-icon { width: 0.85em; height: 0.85em; color: var(--brand-secondary); }
@media (max-width: 40rem) { .terroir-zone__head { flex-direction: column; gap: var(--sp-3); } }
/* Communes → puces de lieu compactes (taille du contenu, pas de cases vides) */
.terroir-zone .zone-grid.perimetre-zones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.terroir-zone .zone-grid li {
  display: flex; align-items: center; gap: 0.45rem;
  flex: 0 0 auto;
  min-height: unset;
  padding: 0.45rem 0.8rem;
  text-align: left;
  font-size: 0.82rem; line-height: 1.2;
}
/* Puce sur ::after : data-glass-plate réutilise ::before (position absolute) et faisait sauter la puce au hover. */
.terroir-zone .zone-grid li::after {
  content: ""; order: -1; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-secondary); flex-shrink: 0;
}
.terroir-zone .zone-grid li[data-glass-plate]::before { display: none; }

.zone-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); list-style: none; padding: 0; align-items: center; }
.zone-grid li {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  padding: 0.5rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 22%, var(--stroke));
  border-radius: var(--radius-full);
  background: var(--glass-stack);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  line-height: 1.25;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: 0 0.2em 0.5em hsl(0 0% 0% / 0.1);
}
.zone-grid li > * { position: relative; z-index: 1; }
.zone-grid li:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand-secondary) 42%, var(--stroke-2));
  background: var(--glass-stack-strong);
  box-shadow: 0 0.2em 0.5em hsl(0 0% 0% / 0.1), 0 0 0 1px color-mix(in srgb, var(--brand-secondary) 18%, transparent);
}

/* --- Footer --- */
.site-footer {
  background: var(--bg);
  color: var(--muted);
  padding-block: var(--sp-8) var(--sp-5);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--stroke);
}
.site-footer a:not(.brand) {
  color: color-mix(in srgb, var(--brand-secondary) 32%, var(--muted));
}
.site-footer a:not(.brand):hover,
.site-footer a:not(.brand):focus-visible {
  color: var(--brand-secondary);
}
.site-footer .brand,
.site-footer .brand:hover { color: var(--text); }
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--stroke); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr; } }
.footer-brand p {
  color: color-mix(in srgb, var(--brand-secondary) 14%, var(--muted));
  margin-top: var(--sp-3); font-size: var(--fs-xs); max-width: 32ch;
}
.footer-social { margin-top: var(--sp-4); }
.footer-social__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, var(--stroke));
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.footer-social__link:hover,
.footer-social__link:focus-visible {
  border-color: color-mix(in srgb, var(--brand-secondary) 40%, var(--stroke));
  background: color-mix(in srgb, var(--brand-secondary) 8%, transparent);
}
.footer-social__link .ph-icon {
  width: 1.1rem;
  height: 1.1rem;
}
.site-footer a.footer-social__link[href^="http"]:not([href*="montaut.eu"]) {
  padding-inline-end: 0;
}
.footer-social__link::after {
  display: none;
}
.site-footer a.footer-social__link[href^="http"]:not([href*="montaut.eu"])::before {
  top: 0.18em;
  right: 0.18em;
  width: 0.45em;
  height: 0.45em;
}
.footer-col__title {
  color: color-mix(in srgb, var(--brand-secondary) 24%, color-mix(in srgb, var(--brand-tertiary) 12%, var(--text)));
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: var(--sp-3); font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.footer-bottom {
  margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: flex-start; align-items: center;
  color: color-mix(in srgb, var(--brand-tertiary) 18%, var(--muted));
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.footer-bottom nav {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  margin-inline: auto;
  justify-content: center;
}
.footer-a11y {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 0.08em;
}
.footer-a11y__icon {
  width: 1.1em;
  height: 1.1em;
  text-decoration: none;
}
.footer-a11y:hover,
.footer-a11y:focus-visible {
  color: var(--text);
}
.footer-a11y[aria-checked="true"] {
  font-weight: 600;
  text-decoration-thickness: 0.12em;
}

/* --- Contact form --- */
.form { position: relative; display: grid; gap: var(--sp-4); max-width: 36rem; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 500; font-size: var(--fs-sm); color: var(--text); }
.field input, .field textarea, .field select {
  padding: 0.85rem 1rem;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  font-size: var(--fs-md);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand-secondary) 40%, #89AACC);
  background: color-mix(in srgb, var(--brand-secondary) 4%, var(--surface-2));
}
.field :is(input, textarea, select)[aria-invalid="true"] {
  border-color: color-mix(in srgb, #c4785a 55%, var(--stroke-2));
}
.field textarea { min-height: 140px; resize: vertical; }
.field small {
  color: color-mix(in srgb, var(--brand-tertiary) 14%, var(--muted));
  font-size: var(--fs-xs);
}
.field-error {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: color-mix(in srgb, #e0a090 62%, var(--text));
}
.field-error[hidden] { display: none; }
.form-inline { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.field-check { display: flex; align-items: flex-start; gap: var(--sp-2); font-weight: 400; font-size: var(--fs-sm); }
.field-check input[type="checkbox"] { margin-top: 3px; flex: none; }
.form[hidden] { display: none; }
.form-honey {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 0.0625rem;
  block-size: 0.0625rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
  border: 0;
}
.form button[disabled] { cursor: wait; opacity: 0.68; }
.form-status {
  min-block-size: 1.5em;
  color: var(--text-dim);
}
.form-status.is-error {
  color: color-mix(in srgb, #e0a090 62%, var(--text));
}
.form-success {
  align-content: center;
  min-block-size: 32rem;
}
.form-success__icon {
  inline-size: 4rem;
  block-size: 4rem;
  color: color-mix(in srgb, var(--brand-secondary) 65%, var(--text));
}
.form-success__icon path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: formSuccessDraw 600ms var(--ease-out) 120ms forwards;
}
@keyframes formSuccessDraw { to { stroke-dashoffset: 0; } }
.split-word { display: inline-block; }

/* --- Tag / badge --- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--brand-secondary) 6%, var(--surface));
  color: color-mix(in srgb, var(--brand-tertiary) 28%, var(--muted));
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 26%, var(--stroke));
}
.tag-brand, .tag-accent {
  background: color-mix(in srgb, var(--brand-tertiary) 8%, var(--surface-2));
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand-secondary) 22%, var(--stroke-2));
}

/* --- Halftone texture overlay (subtle) --- */
.halftone {
  position: relative;
}
.halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(hsl(0 0% 100% / 0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.4;
  z-index: 1;
}

/* --- Utility --- */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.text-center { text-align: center; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.mx-auto { margin-inline: auto; }
.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.hidden { display: none !important; }

/* --- Scroll progress : largeur via JS ; pulse d’opacité uniquement (clipé) --- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: calc(0.2rem + 2px);
  width: 0%;
  max-width: 100%;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0 0.1rem 0.1rem 0;
  background: var(--scroll-progress-gradient);
  opacity: 0.88;
  animation: scrollProgressPulse 3.6s ease-in-out infinite;
  will-change: width, opacity;
}
.scroll-progress::before,
.scroll-progress::after {
  content: none;
  display: none;
}
@keyframes scrollProgressPulse {
  0%, 100% { opacity: 0.78; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    animation: none;
    opacity: 0.95;
    filter: none;
  }
}

/* --- Retour en haut : chip verre (transparence + flou, comme le reste de l'UI) --- */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 4vw, 1.75rem);
  bottom: clamp(1rem, 4vw, 1.75rem);
  z-index: 90;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--text) 8%, var(--brand-secondary) 18%);
  border-radius: var(--radius-full);
  /* Peu de pigment : le flou amène la lisibilité (sinon le fond paraît un bloc plein) */
  background: color-mix(in srgb, var(--bg) 30%, transparent);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 0.4rem 1.35rem hsl(0 0% 0% / 0.32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem) scale(0.92) translateZ(0);
  pointer-events: none;
  transition:
    opacity var(--t) var(--ease-out),
    visibility var(--t) var(--ease-out),
    transform var(--t) var(--ease-out),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t) var(--ease),
    background var(--t-fast) var(--ease);
  isolation: isolate;
}
.back-to-top::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--accent-gradient);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--t) var(--ease);
}
.back-to-top svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  display: block;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1) translateZ(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  border-color: color-mix(in srgb, var(--brand-secondary) 42%, var(--text) 12%);
  box-shadow: 0 0.6rem 1.75rem hsl(0 0% 0% / 0.4), 0 0 1.25rem hsl(220 45% 45% / 0.1);
}
.back-to-top:hover::after {
  opacity: 0.22;
}
.back-to-top.is-visible:active {
  transform: translateY(0) scale(0.96) translateZ(0);
}

/* Mobile / Safari : fond souvent perçu comme plein : moins d’opacité + flou un peu plus fort, calque GPU pour -webkit-backdrop */
@media (max-width: 48rem) {
  .back-to-top {
    background: color-mix(in srgb, var(--bg) 18%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid color-mix(in srgb, var(--text) 6%, var(--brand-secondary) 14%);
    box-shadow: 0 0.3rem 1rem hsl(0 0% 0% / 0.22);
  }
  .back-to-top:hover {
    background: color-mix(in srgb, var(--bg) 30%, transparent);
  }
}

/* --- Reveal on scroll (blur-in signature) --- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ============================================
   Floating TOC (AWWARD, discreet, right-side)
   ============================================ */
.toc-float {
  position: fixed;
  top: 50%;
  right: clamp(0.9rem, 2vw, 1.5rem);
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.55rem 0.4rem 0.55rem 0.5rem;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.toc-float.is-ready { opacity: 1; }
@media (min-width: 1080px) {
  .toc-float[data-has-items="1"] { display: flex; }
}
.toc-float::before {
  content: "";
  position: absolute;
  top: 0.9rem; bottom: 0.9rem;
  right: 0.4rem;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--text) 18%, transparent) 15%,
    color-mix(in srgb, var(--text) 18%, transparent) 85%,
    transparent
  );
  pointer-events: none;
}
.toc-float-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  padding: 0.18rem 0.55rem 0.18rem 0.4rem;
  color: color-mix(in srgb, var(--text-dim) 72%, transparent);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 280ms var(--ease-out);
}
.toc-float-item-label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition:
    max-width 420ms var(--ease-out),
    opacity 280ms var(--ease-out),
    transform 420ms var(--ease-out);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 0.5rem, #000 calc(100% - 0.6rem), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 0.5rem, #000 calc(100% - 0.6rem), transparent 100%);
}
.toc-float-item-label-inner {
  display: inline-flex;
  gap: 2rem;
  white-space: nowrap;
  will-change: transform;
}
.toc-float-item-label-inner > span { display: inline-block; }
.toc-float-item.is-overflow:hover .toc-float-item-label-inner,
.toc-float-item.is-overflow:focus-visible .toc-float-item-label-inner {
  animation: toc-marquee var(--toc-marquee-dur-hover, 6s) linear 150ms infinite;
}
@keyframes toc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--toc-marquee-dx, 0px) * -1)); }
}
@media (prefers-reduced-motion: reduce) {
  .toc-float-item.is-overflow .toc-float-item-label-inner { animation: none !important; }
}
.toc-float-item-tick {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
  opacity: 0.85;
  transition: width 360ms var(--ease-out), opacity 280ms var(--ease-out), background 280ms var(--ease-out);
  flex-shrink: 0;
}
.toc-float-item:hover,
.toc-float-item:focus-visible,
.toc-float-item.is-active { color: var(--text); outline: none; }
.toc-float-item:hover .toc-float-item-tick,
.toc-float-item:focus-visible .toc-float-item-tick { width: 22px; opacity: 1; }
.toc-float-item.is-active .toc-float-item-tick {
  width: 28px;
  opacity: 1;
  background: linear-gradient(90deg, #89AACC, #4E85BF);
}
.toc-float-item:hover .toc-float-item-label,
.toc-float-item:focus-visible .toc-float-item-label {
  max-width: 14rem;
  opacity: 1;
  transform: translateX(0);
}
/* Group hover : signal de dépliabilité.
   Le curseur entre dans la zone TOC -> les ticks se réveillent et l'item actif
   dévoile son label. L'utilisateur comprend le pattern sans bruit passif au scroll. */
.toc-float:hover .toc-float-item-tick { opacity: 0.78; }
.toc-float:hover .toc-float-item.is-active .toc-float-item-label {
  max-width: 14rem;
  opacity: 1;
  transform: translateX(0);
}
.toc-float:hover .toc-float-item.is-overflow.is-active .toc-float-item-label-inner {
  animation: toc-marquee var(--toc-marquee-dur, 14s) linear 150ms infinite;
}
/* Grand écran : suffisamment de marge entre wrap (72rem) et bord de viewport
   pour que le label (14rem + paddings) ne croise jamais le contenu.
   Seuil calculé : 72rem (wrap) + 14rem (label) + ~70px (gap/tick/paddings) ≈ 1720px. */
@media (min-width: 1720px) {
  .toc-float-item.is-active .toc-float-item-label {
    max-width: 14rem;
    opacity: 1;
    transform: translateX(0);
  }
  .toc-float-item.is-overflow.is-active .toc-float-item-label-inner {
    animation: toc-marquee var(--toc-marquee-dur, 14s) linear 150ms infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .toc-float,
  .toc-float-item,
  .toc-float-item-label,
  .toc-float-item-tick { transition: none; }
}

/* --- Lenis compat --- */
html.has-lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* =========================================================
   UI ENHANCEMENT PACK · v1.0
   Réf. : UI-ENHANCEMENT-PROPOSAL.md
   Règles : aucune modification des tokens ; tout passe par
   nouvelles classes / modificateurs / ::before-::after / opt-in
   ========================================================= */

/* --- P0-02 · Grain global : désactivé (opt-in seulement via html.grain-fx) --- */
body::after { display: none; }
html.grain-fx body::after {
  display: block;
  content: "";
  position: fixed; inset: -1px;
  pointer-events: none;
  z-index: 180;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
  animation: grainShift 8s steps(8) infinite;
}
@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-1px, 1px); }
  40%      { transform: translate(1px, -1px); }
  60%      { transform: translate(-1px, -1px); }
  80%      { transform: translate(1px, 1px); }
}
@media (prefers-reduced-motion: reduce) {
  html.grain-fx body::after { animation: none; opacity: 0.025; }
}
html.no-fx-grain body::after { display: none; }

/* --- P0-01 · Hero portrait (cartoon, a-propos.html) --- */
.hero-portrait {
  position: relative;
  aspect-ratio: 4/5;
  max-width: 22rem;
  margin-inline: auto;
  border: 1px solid var(--stroke);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
}
.hero-card .hero-portrait {
  max-width: none;
  margin-block-end: var(--sp-5);
  aspect-ratio: 1/1;
}
.hero-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform 900ms var(--ease-out), filter 600ms var(--ease-out);
  will-change: transform;
}
.hero-portrait::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, transparent 55%, var(--bg) 100%);
}
.hero-portrait::after {
  content: "";
  position: absolute; inset: -1px;
  pointer-events: none; z-index: 3;
  background: var(--accent-gradient);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  mix-blend-mode: overlay;
}
.hero-portrait:hover img { transform: scale(1.04); }
.hero-portrait:hover::after { opacity: 0.18; }
.hero-portrait figcaption {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4);
  z-index: 4;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .hero-portrait img,
  .hero-portrait::after { transition: none; }
  .hero-portrait:hover img { transform: none; }
  .hero-portrait:hover::after { opacity: 0; }
}

/* --- P0-03 · Hero media (variant immersif pour pages secondaires) --- */
.hero.hero-media {
  position: relative;
  min-height: 70vh;
  padding-block: clamp(6rem, 12vw, 9rem) clamp(3rem, 6vw, 5rem);
  overflow: clip;
  display: flex;
  align-items: center;
}
.hero.hero-media > .wrap { position: relative; z-index: 2; width: 100%; }
.hero.hero-media .hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--bg);
  overflow: hidden;
}
.hero.hero-media .hero-bg svg,
.hero.hero-media .hero-bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.32;
  filter: grayscale(0.6) contrast(1.05) brightness(0.78);
}
.hero.hero-media .hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.78;
  filter: grayscale(0.16) contrast(1.05) brightness(0.96);
}
/* Photo fixe au scroll (desktop). overflow/clip-path ne suffisent pas :
   overflow ignore le fixed viewport ; clip-path en ferait le containing block
   (fixed → absolute). clip:rect sur .hero-bg (absolute) cadre la picture fixed
   sans changer son CB viewport — Chrome + Firefox. Mobile / reduced-motion : absolute. */
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  .hero.hero-media .hero-bg:has(img) {
    overflow: visible;
    clip: rect(0, auto, auto, 0);
  }
  .hero.hero-media .hero-bg picture {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
  }
  .hero.hero-media .hero-bg img {
    max-width: none;
  }
}
.hero.hero-media .hero-veil {
  position: absolute; inset: 0; z-index: 1;
  /* Haut plus opaque (ciel clair) → milieu un peu plus ouvert → bas pour ancrer le texte */
  background:
    linear-gradient(
      180deg,
      hsl(0 0% 4% / 0.58) 0%,
      hsl(0 0% 4% / 0.50) 42%,
      hsl(0 0% 4% / 0.62) 100%
    );
}
/* Photo réelle (Périgueux, Bergerac, Bordeaux…) : voile renforcé, photo encore lisible */
.hero.hero-media:has(.hero-bg img) .hero-veil {
  background:
    linear-gradient(
      180deg,
      hsl(0 0% 4% / 0.52) 0%,
      hsl(0 0% 4% / 0.40) 40%,
      hsl(0 0% 4% / 0.54) 100%
    );
}
.hero.hero-media .hero-fade-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 12rem; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
}

/* Crédit photo : une ligne discrète au-dessus du footer (pas de section dédiée) */
.page-photo-credit--prefooter {
  margin: 0 auto;
  padding-block: clamp(1rem, 2vw, 1.5rem) var(--sp-4);
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--muted);
}
.page-photo-credit--prefooter a {
  color: inherit;
}
.page-photo-credit--prefooter a:hover,
.page-photo-credit--prefooter a:focus-visible {
  color: var(--brand-secondary);
}

/* P2-02 · SVG topo pattern animé (hero secondaires "ville" + contact) */
.hero-bg-topo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.22;
  pointer-events: none;
}
.hero-bg-topo path {
  fill: none;
  stroke: hsl(0 0% 100% / 0.35);
  stroke-width: 1;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: topoDraw 14s var(--ease-out) forwards;
}
.hero-bg-topo path:nth-child(2) { animation-delay: 0.4s; stroke: color-mix(in srgb, var(--brand-secondary) 62%, transparent); }
.hero-bg-topo path:nth-child(3) { animation-delay: 0.8s; }
.hero-bg-topo path:nth-child(4) { animation-delay: 1.2s; }
.hero-bg-topo path:nth-child(5) { animation-delay: 1.6s; stroke: color-mix(in srgb, var(--brand-tertiary) 58%, transparent); }
@keyframes topoDraw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-topo path { animation: none; stroke-dashoffset: 0; }
}

/* --- P0-04 · Split-text kinetic typography --- */
.split-word {
  display: inline-block;
}
/* fallback sans JS/GSAP : tout reste visible */
[data-split="words"] { display: block; }

/* --- P0-06 · Selected Works (screenshots clients) --- */
/* Stratégie : grille 12 colonnes + grid-auto-rows à hauteur fixe.
   Les items n'ont PAS d'aspect-ratio en desktop → ils remplissent
   toujours parfaitement leur cellule, les rangées sont strictement
   alignées quel que soit le mix de spans (default 4 / wide 8).
   Mobile : stack vertical + aspect-ratio 4/3 pour cartes lisibles. */
.works {
  --works-gap: var(--sp-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--works-gap);
}
.works-item {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 22%, var(--stroke));
  background: color-mix(in srgb, var(--surface) 30%, transparent);
  aspect-ratio: 4/3;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease-out);
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
}
@media (min-width: 720px) {
  .works {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(13rem, 22vw, 20rem);
  }
  .works-item { grid-column: span 4; aspect-ratio: auto; }
  .works-item-wide { grid-column: span 8; }
  /* 6 réalisations : 8+4 puis 2×(6+6) pour éviter une dernière rangée vide */
  .works-item:nth-child(n+3):nth-child(-n+6) { grid-column: span 6; }
  /* Duo local (ex. page IA) : 2 cartes pleine largeur, sans toucher la home */
  .works.works--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .works.works--duo .works-item,
  .works.works--duo .works-item:nth-child(n+3):nth-child(-n+6) {
    grid-column: auto;
  }
}
@media (min-width: 960px) {
  .works { --works-gap: var(--sp-6); }
}
.works-item img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 400ms var(--ease-out);
}
.works-item::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 25%, hsl(0 0% 2% / 0.6) 55%, hsl(0 0% 0% / 0.96) 100%);
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.works-item:hover {
  border-color: color-mix(in srgb, var(--brand-secondary) 30%, var(--stroke));
  transform: translateY(-2px);
}
.works-item:hover img,
.works-item:focus-visible img { transform: scale(1.03); }
.works-caption {
  position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5);
  z-index: 3;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  pointer-events: none;
}
.works-caption strong,
.works-caption h3 {
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.works-caption span {
  color: color-mix(in srgb, var(--brand-secondary) 55%, #fff);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.works-badge {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  z-index: 3;
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  background: hsl(0 0% 0% / 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid hsl(0 0% 100% / 0.12);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}
.works-badge::after {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200 64V168a8 8 0 0 1-16 0V83.31L69.66 197.66a8 8 0 0 1-11.32-11.32L172.69 72H88a8 8 0 0 1 0-16H192a8 8 0 0 1 8 8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200 64V168a8 8 0 0 1-16 0V83.31L69.66 197.66a8 8 0 0 1-11.32-11.32L172.69 72H88a8 8 0 0 1 0-16H192a8 8 0 0 1 8 8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .works-item img, .works-item { transition: none; }
  .works-item:hover img { transform: none; }
  .works-item:hover { transform: none; }
}

/* --- P0-06b · Case study modal (dialog natif, DS-compliant) --- */
.case-study-modal {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--text);
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  inset: 0;
  overflow: hidden;
}
.case-study-modal::backdrop {
  background: hsl(0 0% 2% / 0.82);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}
.case-study-modal[open] {
  animation: csModalFade 380ms var(--ease-out);
}
.case-study-modal[open]::backdrop {
  animation: csBackdropFade 380ms var(--ease-out);
}
@keyframes csModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes csBackdropFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.case-study-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 64rem;
  height: 100%;
  max-height: 100vh;
  margin-inline: auto;
  background: var(--bg);
  border-left: 1px solid var(--stroke-2);
  border-right: 1px solid var(--stroke-2);
  transform: translateY(12px);
  opacity: 0;
  animation: csDialogIn 520ms var(--ease-out) 80ms forwards;
}
@keyframes csDialogIn {
  to { transform: none; opacity: 1; }
}
.case-study-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: hsl(0 0% 8% / 0.82);
  color: var(--text);
  border: 1px solid var(--stroke-2);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.case-study-close:hover,
.case-study-close:focus-visible {
  border-color: hsl(220 40% 55% / 0.5);
  background: var(--surface-2);
}
.case-study-close svg { width: 1.1rem; height: 1.1rem; }
.case-study-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.case-study-body {
  padding: clamp(var(--sp-7), 8vw, var(--sp-9)) clamp(var(--sp-5), 6vw, var(--sp-8)) var(--sp-9);
  display: grid;
  gap: var(--sp-6);
  max-width: 56rem;
  margin-inline: auto;
}
.case-study-body > .eyebrow { margin-bottom: calc(-1 * var(--sp-4)); }
.case-study-body h2 {
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  margin: 0;
}
.case-study-pull {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(var(--fs-lg), 2.4vw, var(--fs-xl));
  line-height: var(--lh-snug);
  color: var(--text-dim);
  max-width: 38rem;
  margin: 0;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--stroke-2);
}
.case-study-hero {
  margin: 0;
  border: 1px solid var(--stroke);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--surface);
}
.case-study-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: saturate(0.75) contrast(0.98);
}
/* Capture pleine hauteur du site (tout le scroll) : posée dans un cadre
   fixe qui scrolle verticalement sur hover/focus pour révéler le contenu. */
.case-study-full {
  margin: 0;
  border: 1px solid var(--stroke);
  background: var(--surface);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.case-study-full::after {
  content: attr(data-label);
  position: absolute;
  left: var(--sp-4); top: var(--sp-4);
  z-index: 2;
  padding: 4px 10px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  background: hsl(0 0% 8% / 0.7);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
.case-study-full-frame {
  height: clamp(22rem, 55vh, 36rem);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--stroke-2) transparent;
}
.case-study-full-frame::-webkit-scrollbar { width: 8px; }
.case-study-full-frame::-webkit-scrollbar-track { background: transparent; }
.case-study-full-frame::-webkit-scrollbar-thumb { background: var(--stroke-2); }
.case-study-full-frame img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.75) contrast(0.98);
}
.case-study-full-hint {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--stroke);
  background: var(--surface);
}
.case-study-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}
@media (min-width: 720px) {
  .case-study-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
  .case-study-grid--2-cols { grid-template-columns: repeat(2, 1fr); }
}
.case-study-grid > div > .eyebrow { display: block; margin-bottom: var(--sp-3); }
.case-study-grid > div > p { margin: 0; color: var(--text-dim); }
.case-study-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.case-study-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--stroke);
}
.case-study-meta {
  color: color-mix(in srgb, var(--brand-secondary) 20%, color-mix(in srgb, var(--brand-tertiary) 14%, var(--muted)));
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
html.cs-open { overflow: hidden; }
/* Curseur custom : monté dans <dialog> (top layer) : z-index au-dessus du contenu */
.case-study-modal .r24-cursor-dot,
.case-study-modal .r24-cursor-ring {
  z-index: 50;
}
html.has-cursor .case-study-modal a,
html.has-cursor .case-study-modal button,
html.has-cursor .case-study-modal [role="button"] { cursor: none; }
@media (prefers-reduced-motion: reduce) {
  .case-study-modal[open],
  .case-study-modal[open]::backdrop,
  .case-study-dialog { animation: none; }
  .case-study-dialog { transform: none; opacity: 1; }
}

/* --- Contact modal : bottom sheet mobile, panneau desktop --- */
@property --cm-beam-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 200deg;
}
.contact-modal {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--text);
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  inset: 0;
  overflow: hidden;
}
.contact-modal[open] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.contact-modal::backdrop {
  background: hsl(0 0% 2% / 0.78);
  backdrop-filter: blur(14px) saturate(128%);
  -webkit-backdrop-filter: blur(14px) saturate(128%);
}
.contact-modal[open]::backdrop {
  animation: cmBackdropIn 360ms var(--ease-out);
}
@keyframes cmBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.contact-modal__panel {
  --cm-beam-angle: 200deg;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(88dvh, 100%);
  margin-top: auto;
  margin-inline: auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 42%,
      hsl(0 0% 100% / 0.06) 50%,
      transparent 58%,
      transparent 100%
    ),
    var(--glass-stack, var(--surface));
  background-size: 220% 100%, auto;
  background-position: 120% 0, 0 0;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 28%, var(--glass-edge, var(--stroke-2)));
  border-bottom: none;
  border-radius: 1.1rem 1.1rem 0 0;
  box-shadow: var(--glass-shadow, 0 -1rem 3rem hsl(0 0% 0% / 0.35));
  backdrop-filter: var(--glass-backdrop-lg, blur(18px));
  -webkit-backdrop-filter: var(--glass-backdrop-lg, blur(18px));
  transform: translateY(110%);
  opacity: 0;
  overflow: hidden;
  isolation: isolate;
}
.contact-modal[open] .contact-modal__panel {
  animation: cmSheetIn 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.contact-modal[open].is-sheen .contact-modal__panel {
  background-position: -20% 0, 0 0;
  transition: background-position 900ms var(--ease-out);
}
@keyframes cmSheetIn {
  to { transform: translateY(0); opacity: 1; }
}
/* Border-beam (open only) */
.contact-modal__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: conic-gradient(
    from var(--cm-beam-angle),
    transparent 0%,
    transparent 58%,
    color-mix(in srgb, var(--brand-secondary) 72%, white) 70%,
    color-mix(in srgb, var(--brand-secondary) 22%, transparent) 82%,
    transparent 92%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.contact-modal[open] .contact-modal__panel::before {
  opacity: 1;
  animation: cmBeamSpin 2.4s linear infinite;
}
@keyframes cmBeamSpin {
  to { --cm-beam-angle: 560deg; }
}
.contact-modal__handle {
  width: 2.75rem;
  height: 0.28rem;
  margin: 0.45rem auto 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  flex: none;
}
.contact-modal__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 3;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 28%, var(--stroke-2));
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.contact-modal__close:hover,
.contact-modal__close:focus-visible {
  border-color: color-mix(in srgb, var(--brand-secondary) 48%, var(--stroke-2));
  background: var(--surface-2);
  transform: scale(1.04);
}
.contact-modal__close .ph-icon {
  width: 1.05rem;
  height: 1.05rem;
}
.contact-modal__head {
  position: relative;
  z-index: 1;
  padding: 0.3rem 1.1rem 0.55rem;
  padding-inline-end: 3rem;
  border-bottom: 1px solid hsl(0 0% 100% / 0.06);
  flex: none;
}
.contact-modal__head h2 {
  margin: 0;
  font-size: clamp(1.15rem, 3.6vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.contact-modal__lead {
  margin: 0.2rem 0 0.4rem;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--text-dim);
}
.contact-modal__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
}
.contact-modal__quick-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: color-mix(in srgb, var(--brand-secondary) 36%, var(--muted));
}
.contact-modal__quick-link .ph-icon {
  width: 0.9rem;
  height: 0.9rem;
}
.contact-modal__quick-link:hover {
  color: var(--text);
}
.contact-modal__scroll {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0.7rem 1.1rem 0.95rem;
  -webkit-overflow-scrolling: touch;
}
.contact-modal__form {
  gap: 0.55rem;
  max-width: none;
}
.contact-modal__row {
  display: grid;
  gap: 0.55rem;
}
.contact-modal__form .field {
  gap: 0.22rem;
}
.contact-modal__form .field label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}
.contact-modal__form .field input,
.contact-modal__form .field textarea,
.contact-modal__form .field select {
  padding: 0.55rem 0.75rem;
  font-size: var(--fs-sm);
}
.contact-modal__form .field textarea {
  min-height: 4rem;
  resize: vertical;
}
.contact-modal__form .field-check {
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-dim);
}
.contact-modal__form .form-status {
  margin: 0;
  min-block-size: 1.1em;
}
.contact-modal__form .btn {
  width: 100%;
  justify-content: center;
}
.contact-modal__success {
  text-align: center;
  min-block-size: 0;
  gap: 0.75rem;
  padding-block: 1.5rem;
}
.contact-modal__success .form-success__icon {
  margin-inline: auto;
  inline-size: 3rem;
  block-size: 3rem;
}
.contact-modal__success h2 {
  margin: 0;
  font-size: clamp(1.15rem, 3.2vw, 1.35rem);
}
.contact-modal__success .contact-modal__lead {
  margin: 0;
}
.contact-modal__success:not([hidden]) .contact-modal__check-path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: cmCheckDraw 620ms var(--ease-out) 120ms forwards;
}
@keyframes cmCheckDraw {
  to { stroke-dashoffset: 0; }
}
html.contact-open { overflow: hidden; }
@media (min-width: 720px) {
  .contact-modal[open] {
    display: grid;
    place-items: center;
    justify-content: stretch;
    padding: var(--sp-5);
  }
  .contact-modal__panel {
    width: min(100%, 44rem);
    height: auto;
    max-height: min(94dvh, 56rem);
    margin-top: 0;
    border-radius: var(--radius, 0.85rem);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-secondary) 28%, var(--glass-edge, var(--stroke-2)));
    transform: translateY(1.25rem) scale(0.98);
  }
  .contact-modal[open] .contact-modal__panel {
    animation: cmPanelIn 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  @keyframes cmPanelIn {
    to { transform: none; opacity: 1; }
  }
  .contact-modal__handle { display: none; }
  .contact-modal__head {
    padding: 0.75rem 1.35rem 0.65rem;
    padding-inline-end: 3.1rem;
  }
  .contact-modal__lead {
    margin: 0.2rem 0 0.4rem;
  }
  .contact-modal__scroll {
    padding: 0.75rem 1.35rem 1rem;
  }
  .contact-modal__form {
    gap: 0.55rem;
  }
  .contact-modal__row {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }
  .contact-modal__form .field input,
  .contact-modal__form .field textarea,
  .contact-modal__form .field select {
    padding: 0.55rem 0.75rem;
  }
  .contact-modal__form .field textarea {
    min-height: 4.5rem;
  }
  .contact-modal__form .form-status {
    min-block-size: 1em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-modal[open]::backdrop,
  .contact-modal[open] .contact-modal__panel {
    animation: none;
  }
  .contact-modal[open] .contact-modal__panel {
    transform: none;
    opacity: 1;
  }
  .contact-modal[open] .contact-modal__panel::before {
    animation: none;
  }
  .contact-modal__success:not([hidden]) .contact-modal__check-path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* --- P1-02 · Card hover reveal texture (dots) --- */
.card { position: relative; }
.card > * { position: relative; z-index: 1; }
.card .card-dots {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(hsl(0 0% 100% / 0.14) 1px, transparent 1px);
  background-size: 6px 6px;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.card:hover .card-dots { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) {
  .card .card-dots, .card:hover .card-dots { opacity: 0; transition: none; }
}
/* Fallback sans .card-dots markup : texture légère en ::after */
.card:not(:has(.card-dots))::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(hsl(0 0% 100% / 0.14) 1px, transparent 1px);
  background-size: 6px 6px;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
/* Bento : texture déjà gérée par --r24-glass-dots-pattern (évite double grille au survol) */
.bento .card::after { content: none; }
.card:not(:has(.card-dots)):hover::after { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) {
  .card:not(:has(.card-dots)):hover::after { opacity: 0; }
}

/* --- P1-03 · Tilt bento (base uniquement, le JS gère la rotation) --- */
.bento > .card {
  transform-style: preserve-3d;
}

/* --- P1-04 · Page transition overlay --- */
.page-transition-overlay {
  position: fixed; inset: 0;
  z-index: 220;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 380ms var(--ease-out),
    visibility 380ms var(--ease-out);
}
.page-transition-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
html.page-exit main,
html.page-exit .site-header,
html.page-exit .site-footer {
  filter: blur(6px);
  transition: filter 380ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay,
  html.page-exit main,
  html.page-exit .site-header,
  html.page-exit .site-footer {
    transition: none;
  }
  html.page-exit main,
  html.page-exit .site-header,
  html.page-exit .site-footer { filter: none; }
}

/* --- P1-05 · Marquee duo (2 lignes inversées) --- */
.marquee.is-duo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
}
.marquee.is-duo .marquee-track + .marquee-track {
  animation-direction: reverse;
  opacity: 0.55;
}
.marquee.is-duo .marquee-track + .marquee-track .marquee-item {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  color: var(--muted);
}

/* --- P1-06 · Image reveal clip diagonal (CSS base, GSAP finit) --- */
.reveal-clip {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 1.4s var(--ease-out);
}
.reveal-clip.is-visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
/* Portfolio : pas de clip-path — affichage immédiat au scroll */
.works .works-item {
  clip-path: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-clip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: none; }
}

/* --- P2-01 · Curseur custom (dot + ring) --- */
.r24-cursor-dot,
.r24-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9990;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
  mix-blend-mode: difference;
}
.r24-cursor-dot {
  width: 6px; height: 6px;
  background: var(--text);
  border-radius: 50%;
}
.r24-cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid hsl(0 0% 100% / 0.6);
  border-radius: 50%;
  transition:
    width 300ms var(--ease-out),
    height 300ms var(--ease-out),
    border-color 300ms var(--ease-out),
    opacity 300ms var(--ease-out);
}
.r24-cursor-ring.is-hover {
  width: 50px; height: 50px;
  border-color: color-mix(in srgb, var(--brand-secondary) 45%, #89AACC);
}
.r24-cursor-ring.is-click {
  width: 18px; height: 18px;
}
html.has-cursor,
html.has-cursor body { cursor: none; }
html.has-cursor a,
html.has-cursor button,
html.has-cursor [role="button"],
html.has-cursor summary,
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select { cursor: none; }
html.no-fx-cursor .r24-cursor-dot,
html.no-fx-cursor .r24-cursor-ring { display: none; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .r24-cursor-dot, .r24-cursor-ring { display: none !important; }
  html.has-cursor, html.has-cursor body { cursor: auto; }
}

/* --- P2-04 · SVG Dordogne scroll-drawn --- */
.dordogne-svg {
  width: 100%; height: auto;
  max-width: 14rem;
  margin-inline: auto;
  display: block;
}
.dordogne-svg path {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}
.dordogne-svg.is-drawn path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.5s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .dordogne-svg path { stroke-dashoffset: 0; transition: none; }
}

/* --- P2-05 · 404 signature glitch --- */
.glitch-404 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(6rem, 20vw, 14rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--text);
  position: relative;
  display: inline-block;
  text-shadow:
    2px 0 hsl(210 50% 70% / 0.8),
    -2px 0 hsl(220 60% 55% / 0.8);
  animation: glitch404 4s var(--ease-in-out) infinite alternate;
}
@keyframes glitch404 {
  0%, 40%, 60%, 100% {
    text-shadow: 2px 0 hsl(210 50% 70% / 0.8), -2px 0 hsl(220 60% 55% / 0.8);
    transform: translate(0, 0);
  }
  45% { text-shadow: 4px 0 hsl(210 50% 70% / 0.9), -3px 0 hsl(220 60% 55% / 0.9); transform: translate(-1px, 0); }
  50% { text-shadow: -3px 0 hsl(210 50% 70% / 0.9), 4px 0 hsl(220 60% 55% / 0.9); transform: translate(1px, 0); }
  55% { text-shadow: 2px 0 hsl(210 50% 70% / 0.8), -2px 0 hsl(220 60% 55% / 0.8); transform: translate(0, 1px); }
}
@media (prefers-reduced-motion: reduce) {
  .glitch-404 { animation: none; text-shadow: 1px 0 hsl(210 50% 70% / 0.4), -1px 0 hsl(220 60% 55% / 0.4); }
}

/* --- P2-06 · Signature manuscrite SVG --- */
.signature-svg {
  width: 100%; max-width: 9rem;
  height: auto; display: block;
  margin-top: var(--sp-4);
}
.signature-svg path {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  opacity: 0.85;
}
.signature-svg.is-drawn path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.4s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .signature-svg path { stroke-dashoffset: 0; transition: none; }
}

/* --- P2-07 · TOC chapitres fixed (desktop) --- */
.chapters-toc {
  position: fixed;
  top: 50%; right: clamp(1rem, 2.2vw, 2rem);
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: var(--sp-3);
  pointer-events: auto;
}
@media (min-width: 1200px) {
  body.has-chapters-toc .chapters-toc { display: flex; }
}
.chapters-toc a {
  display: flex; align-items: center;
  gap: var(--sp-3);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: color var(--t-fast) var(--ease);
}
.chapters-toc a::before {
  content: "";
  display: block;
  width: 18px; height: 1px;
  background: currentColor;
  opacity: 0.4;
  transition: width var(--t) var(--ease), opacity var(--t) var(--ease);
}
.chapters-toc a .chapters-label {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.chapters-toc a:hover,
.chapters-toc a.is-active { color: var(--text); }
.chapters-toc a:hover::before,
.chapters-toc a.is-active::before { width: 34px; opacity: 1; }
.chapters-toc a:hover .chapters-label,
.chapters-toc a.is-active .chapters-label { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .chapters-toc a,
  .chapters-toc a::before,
  .chapters-toc a .chapters-label { transition: none; }
}

/* --- P1-01 · Magnetic (marker d'état, JS gère le transform) --- */

/* --- Contact / Services : pictogrammes topo sur hero --- */
.hero.hero-media.is-contact .hero-bg {
  background:
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--brand-secondary) 42%, transparent), transparent 58%),
    radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--brand-tertiary) 32%, transparent), transparent 45%),
    var(--bg);
}

/* =========================================================
   UX POLISH PACK · v1.2 · rythme + animations SVG + visuels
   ========================================================= */

/* --- Harmonisation du rythme vertical entre sections --- */
.section + .section { padding-block-start: clamp(3rem, 7vw, 5.5rem); }
.section-soft + .section,
.section + .section-soft,
.section-dim + .section,
.section + .section-dim { padding-block-start: clamp(4rem, 9vw, 7rem); }

/*
  CTA mid : air égal au-dessus et en dessous du bandeau.
  Règle : une seule source d'espace de chaque côté (= --cta-mid-gap).
  - .section--cta-mid (bandeau seul) → padding = gap ; voisins à 0 sur le bord partagé.
  - .local-closer (bandeau en fin) → margin-start + padding-end = gap ; section suivante start = 0.
  Pas de :has() imbriqué (non supporté) : la classe marque les sections CTA-only.
  .blog-index-cta garde son rythme dédié.
*/
.section.section--cta-mid {
  padding-block: var(--cta-mid-gap);
}
.section:has(+ .section--cta-mid),
.section-soft:has(+ .section--cta-mid),
.section-dim:has(+ .section--cta-mid) {
  padding-block-end: 0;
}
.section--cta-mid + .section,
.section--cta-mid + .section-soft,
.section--cta-mid + .section-dim {
  padding-block-start: 0;
}

.section.local-closer:has(> .wrap > .cta-band:last-child) {
  padding-block-end: var(--cta-mid-gap);
}
.section.local-closer:has(> .wrap > .cta-band:last-child) + .section,
.section.local-closer:has(> .wrap > .cta-band:last-child) + .section-soft,
.section.local-closer:has(> .wrap > .cta-band:last-child) + .section-dim {
  padding-block-start: 0;
}

/* Blog index : ne pas hériter du gros rythme section-soft + section */
.section.blog-index-featured,
.section-soft.blog-index-featured + .section.blog-index-feed,
.section.blog-index-feed + .section.blog-index-cta {
  padding-block-start: clamp(1.25rem, 2.5vw, 1.85rem);
}

/* --- Universal card lift (étendu au-delà du bento) --- */
.card, .row, .journal-item {
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease-out);
}
.card:hover, .journal-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow);
  border-color: color-mix(in srgb, var(--brand-secondary) 28%, var(--stroke-2));
}
@media (prefers-reduced-motion: reduce) {
  .card, .row, .journal-item { transition: none; }
  .card:hover, .journal-item:hover { transform: none; }
}

/* --- FAQ : révélation réponse (accordéon) --- */
.faq details.faq-item { overflow: hidden; }
.faq details.faq-item[open] > .faq-answer {
  animation: faqReveal 0.4s var(--ease-out) both;
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-0.35rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq details.faq-item[open] > .faq-answer { animation: none; }
}

/* --- Flourish : SVG animé décoratif (signature) --- */
.flourish {
  display: block;
  width: clamp(140px, 22vw, 240px);
  height: auto;
  color: var(--brand-secondary);
  opacity: 0.85;
  margin-block: var(--sp-4);
}
.flourish path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: flourishDraw 2.4s var(--ease-out) 0.2s forwards;
}
@keyframes flourishDraw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flourish path { animation: none; stroke-dashoffset: 0; }
}

/* === Spotlight curseur (compositor-only) ===
   Un seul élément fixe translaté en GPU : zéro repaint sur le reste de la page.
   mix-blend-mode plus-lighter = ajout lumière → halo brillant au-dessus du contenu.
   Le JS pose --sx, --sy en pixels (coords viewport) lerpés depuis pointermove. */
.r24-spot {
  position: fixed;
  top: 0;
  left: 0;
  width: 32rem;
  height: 32rem;
  margin-left: -16rem;
  margin-top: -16rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--brand-secondary) 42%, transparent) 0%,
    color-mix(in srgb, var(--brand-tertiary) 26%, transparent) 32%,
    transparent 66%);
  mix-blend-mode: plus-lighter;
  opacity: 0;
  transform: translate3d(var(--sx, 50vw), var(--sy, 50vh), 0);
  will-change: transform, opacity;
  transition: opacity 0.6s var(--ease-out);
}
.r24-spot.is-on { opacity: 0.55; }
.r24-spot[data-tone="ink"] {
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--brand-secondary) 32%, transparent) 0%,
    color-mix(in srgb, var(--brand-tertiary) 18%, transparent) 32%,
    transparent 66%);
}
.r24-spot[data-tone="ink"].is-on { opacity: 0.42; }
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .r24-spot { display: none !important; }
}
html.perf-lite .r24-spot { display: none !important; }

/* === Magnetic CTA (compositor-only) ===
   Le JS pose --mx / --my en px (offset depuis le centre du bouton, clampé à ~10px).
   Snap-back fluide quand la souris quitte la zone. */
.is-magnetic {
  --mx: 0px;
  --my: 0px;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.is-magnetic.is-magnetized {
  transition: transform 0.18s cubic-bezier(.22, 1, .36, 1);
}
.is-magnetic:active {
  transition-duration: 0.12s;
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .is-magnetic { --mx: 0px; --my: 0px; transition: none; will-change: auto; }
}
html.perf-lite .is-magnetic { --mx: 0px; --my: 0px; }

/* === Tilt bento (compositor-only, sans GSAP) ===
   Le JS pose --tx / --ty (rotations en deg) + transform direct via style.
   Le CSS gère juste la transition de retour. */
.bento > .card {
  transition: transform 0.55s cubic-bezier(.22, 1, .36, 1);
  transform-style: preserve-3d;
}
.bento > .card.is-tilting {
  transition: transform 0.08s linear;
  will-change: transform;
}

/* --- Hero backdrop animé (pour heroes sans image/vidéo) --- */
.hero-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Dégradé ambiant : deux taches de lumière colorées, très subtiles */
.hero-aurora::before,
.hero-aurora::after {
  content: "";
  position: absolute;
  width: 50%; height: 70%;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.18;
  animation: auroraDrift 32s ease-in-out infinite alternate;
  transform: translateZ(0);
  will-change: transform;
}
html.perf-lite .hero-aurora::before,
html.perf-lite .hero-aurora::after { animation: none; }
.hero-aurora::before {
  top: -10%; left: -5%;
  background: var(--brand-secondary);
}
.hero-aurora::after {
  bottom: -20%; right: -5%;
  background: var(--brand-tertiary);
  animation-delay: -12s;
}
@keyframes auroraDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(3%, 4%); }
}
/* Lignes SVG topo : fines, tracées au chargement */
.hero-aurora-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.12;
}
.hero-aurora-svg path {
  fill: none;
  stroke: var(--brand-secondary);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: auroraDraw 4s var(--ease-out) 0.4s forwards;
}
.hero-aurora-svg path:nth-child(2) { stroke: var(--brand-tertiary); animation-delay: 1s; }
.hero-aurora-svg path:nth-child(3) { animation-delay: 1.6s; }
@keyframes auroraDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-aurora::before, .hero-aurora::after { animation: none; }
  .hero-aurora-svg path { animation: none; stroke-dashoffset: 0; }
}

/* --- Image decorative: ratio + fondu organique (pour photos Unsplash) --- */
.deco-photo {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.deco-photo--method {
  aspect-ratio: 3 / 2;
  margin-block-start: var(--sp-6);
}
.deco-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.05) brightness(0.92);
  transition: filter var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.deco-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--bg) 85%, transparent));
  pointer-events: none;
}
.deco-photo:hover img {
  filter: grayscale(0) contrast(1.05) brightness(1);
  transform: scale(1.03);
}

/* --- Micro-pulse sur .dot (indicateur "En bref") --- */
.hero-card .dot {
  animation: dotPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-secondary) 45%, transparent); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card .dot { animation: none; }
}

/* --- Card icon : pulse léger au hover de la card --- */
.card:hover .card-icon {
  background: var(--glass-bg-strong);
  color: color-mix(in srgb, var(--brand-secondary) 70%, var(--text));
  border-color: color-mix(in srgb, var(--brand-secondary) 50%, var(--stroke-2));
  transform: scale(1.05) rotate(-2deg);
}
.card-icon { transition: background var(--t) var(--ease), color var(--t) var(--ease),
                         border-color var(--t) var(--ease), transform var(--t) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .card:hover .card-icon { transform: none; }
}

/* --- Blockquote : grand guillemet SVG en filigrane (derrière le texte) --- */
.quote, .testimonial-card { position: relative; overflow: hidden; }
.quote::before {
  content: "";
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 9rem;
  height: 9rem;
  background: color-mix(in srgb, var(--brand-secondary) 18%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M100 56H40A16 16 0 0 0 24 72v64a16 16 0 0 0 16 16h60v8a32 32 0 0 1-32 32 8 8 0 0 0 0 16 48.05 48.05 0 0 0 48-48V72a16 16 0 0 0-16-16Zm0 80H40V72h60ZM216 56H156a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h60v8a32 32 0 0 1-32 32 8 8 0 0 0 0 16 48.05 48.05 0 0 0 48-48V72a16 16 0 0 0-16-16Zm0 80H156V72h60Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M100 56H40A16 16 0 0 0 24 72v64a16 16 0 0 0 16 16h60v8a32 32 0 0 1-32 32 8 8 0 0 0 0 16 48.05 48.05 0 0 0 48-48V72a16 16 0 0 0-16-16Zm0 80H40V72h60ZM216 56H156a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h60v8a32 32 0 0 1-32 32 8 8 0 0 0 0 16 48.05 48.05 0 0 0 48-48V72a16 16 0 0 0-16-16Zm0 80H156V72h60Z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}
.testimonial-card::before { content: none; }
.quote > *, .testimonial-card > * { position: relative; z-index: 1; }

/* --- CTA band : flèche animée qui se déplace --- */
.cta-band-arrow {
  display: inline-block;
  width: 28px; height: 28px;
  margin-inline-start: var(--sp-2);
  vertical-align: middle;
  color: var(--brand-secondary);
  animation: arrowPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes arrowPulse {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-band-arrow { animation: none; }
}

/* --- Row icon (expériences a-propos) --- */
.row-icon {
  width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  color: color-mix(in srgb, var(--brand-secondary) 62%, var(--text));
  margin-inline-start: var(--sp-2);
  opacity: 0.72;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.row-icon svg { width: 22px; height: 22px; }
.row:hover .row-icon { opacity: 1; transform: translateY(-2px); }
/* Mobile : icône repositionnée en top-right de la row pour éviter qu'elle "traîne"
   à la fin de la dernière ligne du h3 quand celui-ci wrap sur 2-3 lignes. */
@media (max-width: 720px) {
  .row { padding-right: calc(var(--sp-6) + 2.5rem); }
  .row .row-icon {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    margin: 0;
  }
}

/* --- Card tags : chips sémantiques SEO sous les cartes --- */
.card-tags {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.card-tags li {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  /* Padding-block ↑ pour atteindre ~28px de hauteur visible (chip plus tap-friendly).
     Le hit-zone réel est étendu par .card-tag-hint via inset négatif. */
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
              background var(--t) var(--ease);
}
.card-tags li:nth-child(odd) {
  color: color-mix(in srgb, var(--brand-secondary) 78%, var(--text-dim));
  border-color: color-mix(in srgb, var(--brand-secondary) 45%, var(--stroke-2));
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
}
.card-tags li:nth-child(even) {
  color: color-mix(in srgb, var(--brand-tertiary) 55%, color-mix(in srgb, var(--brand-secondary) 28%, var(--text-dim)));
  border-color: color-mix(in srgb, var(--brand-tertiary) 40%, var(--stroke));
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
}
.card:hover .card-tags li:nth-child(odd) {
  color: color-mix(in srgb, var(--brand-secondary) 90%, var(--text));
  border-color: color-mix(in srgb, var(--brand-secondary) 58%, var(--stroke-2));
  background: var(--glass-bg-strong);
}
.card:hover .card-tags li:nth-child(even) {
  color: color-mix(in srgb, var(--brand-tertiary) 65%, color-mix(in srgb, var(--brand-secondary) 25%, var(--text)));
  border-color: color-mix(in srgb, var(--brand-tertiary) 52%, var(--stroke-2));
  background: var(--glass-bg-strong);
}

/* Chips avec infobulles (survol / clic) */
.bento .card:has(.card-tags__item--hint) {
  overflow: visible;
  /* Indispensable : sans ça, isolation: isolate de .card casse le backdrop de l’infobulle = zéro flou. */
  isolation: auto;
}
/* Au-dessus des voisins bento (sous le header z=50) seulement quand une info est affichée */
.bento .card:has(.card-tag-hint:hover),
.bento .card:has(.card-tag-hint:focus-visible),
.bento .card:has(.card-tags__item--hint.is-hint-open) {
  position: relative;
  z-index: 45;
}
/* Chip = même rendu qu’un <li> texte ; bouton en overlay + infobulle hors flux (display:none par défaut) */
.card-tags__item--hint {
  position: relative;
}
.card-tags li.card-tags__item--hint,
.check-list li.card-tags__item--hint {
  z-index: 6;
  padding-inline-end: 1.75rem;
}
/* Host actif : au-dessus des frères (badges, cellules meta…) */
.card-tags__item--hint:has(.card-tag-hint:hover),
.card-tags__item--hint:has(.card-tag-hint:focus-visible),
.card-tags__item--hint:focus-within,
.card-tags__item--hint.is-hint-open {
  z-index: 220;
}
/* .card > * a tous z-index:1 — sans élévation du conteneur direct, un tip
   qui déborde (ex. facts → check-list) passe sous le contenu suivant. */
.card > *:has(.card-tag-hint:hover),
.card > *:has(.card-tag-hint:focus-visible),
.card > *:has(.card-tags__item--hint:focus-within),
.card > *:has(.card-tags__item--hint.is-hint-open),
.card > .card-tags__item--hint:has(.card-tag-hint:hover),
.card > .card-tags__item--hint:has(.card-tag-hint:focus-visible),
.card > .card-tags__item--hint:focus-within,
.card > .card-tags__item--hint.is-hint-open {
  z-index: 200;
}
.card-tags__item--hint::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 0.8rem;
  height: 0.8rem;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.72;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24A104 104 0 1 0 232 128 104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm16-40a8 8 0 0 1-8 8 16 16 0 0 1-16-16V128a8 8 0 0 1 0-16 16 16 0 0 1 16 16v40a8 8 0 0 1 8 8ZM112 84a12 12 0 1 1 12 12 12 12 0 0 1-12-12Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24A104 104 0 1 0 232 128 104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm16-40a8 8 0 0 1-8 8 16 16 0 0 1-16-16V128a8 8 0 0 1 0-16 16 16 0 0 1 16 16v40a8 8 0 0 1 8 8ZM112 84a12 12 0 1 1 12 12 12 12 0 0 1-12-12Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.card-tags__item--hint .card-tag-hint__label {
  pointer-events: none;
}
.card-tag-hint {
  position: absolute;
  /* Hit zone élargie au-delà du chip (Apple HIG 44×44) sans changer le visuel */
  inset: -10px -6px;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: help;
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  overflow: hidden;
}
.card-tag-hint:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-secondary) 65%, var(--stroke-2));
  outline-offset: 2px;
}
.card-tag-hint__tip {
  position: absolute;
  z-index: 300;
  left: 50%;
  top: auto;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 0.35rem;
  width: min(32rem, calc(100vw - 1.5rem));
  padding: 0.65rem 0.8rem;
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: left;
  color: var(--text);
  /* Opaque : le texte sous-jacent ne doit jamais transparaître */
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 40%, var(--glass-border));
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  pointer-events: none;
  display: none;
  hyphens: none;
  overflow-wrap: break-word;
  word-break: normal;
}
@media (hover: hover) and (pointer: fine) {
  .card-tag-hint:hover + .card-tag-hint__tip,
  .card-tag-hint:focus-visible + .card-tag-hint__tip {
    display: block;
  }
}
.card-tags__item--hint.is-hint-open .card-tag-hint__tip {
  display: block;
}

/* Perf : on retire le backdrop-filter des petits éléments décoratifs
   (boutons, chips, lignes, stats, journal, explorations, FAQ, works items…)
   pour soulager le compositor GPU. Le « verre » reste sur les éléments
   signature : .bento .card, .hero-search__glass, .nav-mobile, .case-study-modal,
   .back-to-top, et le .btn-ghost du CTA hero (override préservé). */
.btn,
.btn-primary,
.btn-cta,
.btn-brand,
.btn-accent,
.card-icon,
.card-tags li,
.card-tag-hint__tip,
.row,
.stat,
.quote,
.cta-band,
.works-item,
.journal-item,
.explorations-item,
.faq details.faq-item,
.case-study-meta,
.case-study-close {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Home CTA Google : plat — pas de verre */
.hero:has(> .hero-bg) .hero-cta--google .btn-ghost {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Verre : repli si pas de backdrop-filter (contrastes solides) */
@supports not ((backdrop-filter: blur(0.5rem)) or (-webkit-backdrop-filter: blur(0.5rem))) {
  .card, .hero-card, .journal-item, .explorations-item, .row, .stat, .quote, .cta-band, .faq details, .works-item, .card-tags li, .zone-grid li, .prose blockquote, .btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .card, .hero-card, .journal-item, .explorations-item, .row, .stat, .quote, .faq details, .works-item, .zone-grid li, .prose blockquote { background: var(--surface-2); }
  .cta-band { background: color-mix(in srgb, var(--text) 88%, var(--brand-secondary)); }
  .card-tags li:nth-child(odd) { background: color-mix(in srgb, var(--brand-secondary) 18%, var(--surface-2)); }
  .card-tags li:nth-child(even) { background: color-mix(in srgb, var(--brand-tertiary) 12%, var(--surface-2)); }
  .btn-ghost { background: var(--surface-2); }
  .btn-primary, .btn-cta { background: var(--text); color: var(--bg); }
  .btn-brand, .btn-accent { background: var(--text); color: var(--bg); }
  .card-icon { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .card-tag-hint__tip {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: color-mix(in srgb, var(--brand-secondary) 10%, var(--surface-2));
  }
}

@media (prefers-contrast: more) {
  .card, .hero-card, .journal-item, .explorations-item, .row, .stat, .quote, .cta-band, .faq details, .works-item, .card-tags li, .card-icon, .zone-grid li, .prose blockquote, .btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .card-tag-hint__tip {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface-2);
    border-color: var(--stroke-2);
  }
  .card, .hero-card, .journal-item, .explorations-item, .row, .stat, .quote, .faq details, .works-item, .zone-grid li, .prose blockquote { background: var(--surface-2); }
  .cta-band { background: color-mix(in srgb, var(--text) 92%, var(--brand-secondary)); }
  .card-tags li:nth-child(odd) { background: color-mix(in srgb, var(--brand-secondary) 20%, var(--surface-2)); }
  .card-tags li:nth-child(even) { background: color-mix(in srgb, var(--brand-tertiary) 15%, var(--surface-2)); }
  .btn-ghost { background: var(--surface-2); }
  .btn-primary, .btn-cta { background: var(--text); color: var(--bg); }
  .btn-brand, .btn-accent { background: var(--text); color: var(--bg); }
}

/* --- Footer : refonte lisibilité + rythme (v1.3) --- */

/* Brand-name stack correct dans le footer (bug display inline) */
.site-footer .brand-name { display: inline-flex; }
.site-footer .brand { align-items: center; gap: var(--sp-3); }
.site-footer .brand-name strong { color: var(--text); font-size: 1rem; }
.site-footer .brand-name span { color: color-mix(in srgb, #fff 60%, var(--muted)); }

/* Marquee : tailles raisonnables, respiration verticale, pas de collision avec ce qui suit */
.marquee:not(.marquee--metiers) {
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  border-block: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, var(--stroke));
}
.marquee-item {
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  color: color-mix(in srgb, #fff 88%, var(--muted));
}
.marquee-item::after { font-size: 0.4em; }
.marquee.is-duo { gap: clamp(0.5rem, 1.2vw, 1rem); padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.marquee.is-duo .marquee-track + .marquee-track { opacity: 1; }
.marquee.is-duo .marquee-track + .marquee-track .marquee-item {
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  color: color-mix(in srgb, var(--brand-secondary) 28%, color-mix(in srgb, #fff 70%, var(--muted)));
  font-style: italic;
  font-weight: 400;
}

/* Footer général */
.site-footer {
  padding-block: 0 var(--sp-4);
  color: color-mix(in srgb, #fff 72%, var(--muted));
}
.site-footer > .wrap { padding-block-start: clamp(3rem, 6vw, 5rem); }
.site-footer a:not(.brand):hover,
.site-footer a:not(.brand):focus-visible {
  color: #fff;
}

/* Grille : rythme horizontal + vertical généreux */
.footer-grid {
  gap: clamp(var(--sp-5), 5vw, var(--sp-7));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid color-mix(in srgb, #fff 10%, var(--stroke));
}
.footer-brand p {
  color: color-mix(in srgb, #fff 60%, var(--muted));
  margin-top: var(--sp-4);
  line-height: 1.6;
  max-width: 34ch;
}
.footer-col__title {
  color: color-mix(in srgb, var(--brand-secondary) 40%, #fff);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  margin-bottom: var(--sp-4);
}
.footer-col ul { gap: var(--sp-3); }
.footer-col ul a { color: color-mix(in srgb, #fff 82%, var(--muted)); }

/* Footer bottom : séparation franche, hiérarchie lisible */
.footer-bottom {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: var(--sp-4);
  color: color-mix(in srgb, #fff 55%, var(--muted));
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  gap: var(--sp-5);
}
.footer-bottom nav a { color: color-mix(in srgb, #fff 70%, var(--muted)); }

/* =========================================================
   /UI ENHANCEMENT PACK
   ========================================================= */

/* --- Reduced motion: neutralise les extras --- */
/* Important : on n'ENLÈVE PAS la vidéo ici (sinon fond noir total si l'OS
   a "animations réduites" activé). On la laisse s'afficher figée sur son poster. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg video { animation: none !important; }
  .scroll-indicator { display: none; }
  .scroll-progress { display: none; }
  .loading-screen { display: none !important; }
  .marquee-track { animation: none !important; }
  .cta-band::before { animation: none !important; }
  .back-to-top {
    transition-duration: 0.001ms;
  }
}

/* --- Print --- */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .hero-bg, .scroll-indicator, .loading-screen, .scroll-progress, .back-to-top,
  body::after, .r24-cursor-dot, .r24-cursor-ring, .chapters-toc, .page-transition-overlay { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  a::after,
  a::before { content: none; display: none; }
  .hero { min-height: auto; padding-block: 2rem; }
  .works-item img, .hero-portrait img { filter: none !important; }
}

/* Pause les animations infinies hors viewport (perf : coupe le travail GPU
   quand l'élément n'est pas visible). */
.anim-paused,
.anim-paused::before,
.anim-paused::after,
.anim-paused * { animation-play-state: paused !important; }

/* ============================================
   Perf-lite : low-end devices (saveData, 2-4 cores,
   <= 4 GB RAM, coarse pointer + narrow + few cores).
   On n'enlève aucun élément d'UI. On coupe uniquement
   les effets coûteux GPU/CPU (backdrop-filter, filtres
   d'image lourds, plaques de verre, mesh radiaux, grain).
   ============================================ */
html.perf-lite .nav-mobile,
html.perf-lite .nav-scrim,
html.perf-lite .nav-primary .nav-submenu,
html.perf-lite .toc-float,
html.perf-lite .site-header.is-scrolled,
html.perf-lite .works-badge,
html.perf-lite [data-glass-plate]::before,
html.perf-lite .hero-veil {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.perf-lite .card-tag-hint__tip {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--surface-2) !important;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35) !important;
}
html.perf-lite .works-item img {
  filter: none !important;
  transition: transform 300ms var(--ease-out) !important;
  will-change: auto !important;
}
html.perf-lite .works-item:hover img,
html.perf-lite .works-item:focus-visible img { filter: none !important; }
html.perf-lite .grain,
html.perf-lite .noise-overlay,
html.perf-lite .scroll-progress { display: none !important; }
html.perf-lite *,
html.perf-lite *::before,
html.perf-lite *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0ms !important;
}
html.perf-lite .typewriter-cursor,
html.perf-lite .marquee-track,
html.perf-lite .toc-float-item-label-inner,
html.perf-lite .role-cycle span,
html.perf-lite .loading-middle-word {
  animation-duration: initial !important;
}
html.perf-lite .reveal,
html.perf-lite .reveal-clip {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
  transition: none !important;
}
html.perf-lite main > section.section::before,
html.perf-lite main > section.section::after {
  background: transparent !important;
}
html.perf-lite .hero-aurora { display: none !important; }

/* Rendu économique : ne peint les sections qu'à l'approche du viewport.
   contain-intrinsic-size réserve la place pour éviter tout layout shift. */
@supports (content-visibility: auto) {
  /* Largeur de repli : ne pas utiliser 1px : sinon le texte s’enroule en une “tour” (hauteur gigantesque). */
  main > section.section,
  main > section.explorations,
  .cta-band {
    content-visibility: auto;
    contain-intrinsic-size: min(100%, var(--wrap, 72rem)) 720px;
  }
  main > section.hero { content-visibility: visible; }
}

/* =========================================================
   PREMIUM POLISH PACK · v1.4
   Header intelligent · view transitions · footer CTA ·
   compteurs stats · micro-interactions · scrollbar
   ========================================================= */

/* --- Header intelligent : se retire au défilement descendant,
   réapparaît dès qu'on remonte (plus d'espace de lecture). --- */
.site-header.is-hidden { top: -6rem; }
.site-header.is-hidden::before { opacity: 0; }

/* --- View transitions inter-pages (cross-document, fallback silencieux) :
   fondu + légère remontée, zéro JS, navigateurs non compatibles ignorent. --- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: r24-vt-out 240ms var(--ease) both; }
::view-transition-new(root) { animation: r24-vt-in 420ms var(--ease-out) both; }
@keyframes r24-vt-out { to { opacity: 0; } }
@keyframes r24-vt-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* --- Scrollbar : fine, sombre, teinte marque au survol --- */
html { scrollbar-width: thin; scrollbar-color: var(--stroke-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--stroke-2);
  border-radius: 8px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--brand-secondary) 40%, var(--stroke-2));
}

/* --- Works : badge toujours visible, caption qui se soulève au survol --- */
.works-caption { transition: transform var(--t) var(--ease-out); }
.works-item:hover .works-caption,
.works-item:focus-visible .works-caption { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .works-badge, .works-caption { transition: none; opacity: 1; transform: none; }
  .works-item:hover .works-caption { transform: none; }
}

/* --- Marquee : pause au survol (comme le logo-strip) --- */
.marquee:hover .marquee-track { animation-play-state: paused; }

/* --- Boutons : feedback tactile à l'appui + nudge d'icône --- */
.btn:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}
.btn.is-magnetic:active {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(0.97);
}
.btn:hover .btn-icon { transform: translateX(2px); }
.btn:hover .btn-icon:has(use[href$="#ph-arrow-up-right"]),
.btn:hover .btn-icon:has(use[href$="#ph-rocket-launch"]) {
  transform: translate(2px, -2px);
}
.btn:hover .btn-icon:has(use[href$="#ph-caret-down"]) {
  transform: translateY(2px);
}
.btn:hover .btn-icon:has(use[href$="#ph-envelope-simple"]),
.btn:hover .btn-icon:has(use[href$="#ph-phone"]),
.btn:hover .btn-icon:has(use[href$="#ph-calendar-check"]),
.btn:hover .btn-icon:has(use[href$="#ph-paper-plane-tilt"]) {
  transform: scale(1.08) rotate(-3deg);
}
.btn .btn-icon { transition: transform var(--t-fast) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn.is-magnetic:active { transform: none; }
  .btn:hover .btn-icon { transform: none; }
}

/* --- Reveal orchestré : stagger intra section-head (délai posé par JS) --- */
.reveal { transition-delay: var(--reveal-d, 0ms); }

/* --- Prestations homepage : cartes compactes + détail progressif --- */
.services-bento {
  align-items: start;
}
.services-bento > .service-card {
  width: 100%;
  max-width: none;
  min-height: 19rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  gap: var(--sp-2);
}
.services-bento .service-card .card-icon {
  width: 4.5rem;
  height: 4.5rem;
  margin-block-end: var(--sp-3);
  background: color-mix(in srgb, var(--brand-secondary) 10%, var(--glass-bg));
  border-color: color-mix(in srgb, var(--brand-secondary) 52%, var(--stroke-2));
}
.services-bento .service-card .card-icon svg {
  width: 2.25rem;
  height: 2.25rem;
}
.services-bento .service-card h3 {
  max-width: none;
  margin-block-end: var(--sp-1);
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  letter-spacing: -0.04em;
  line-height: 1.2;
}
@media (min-width: 40em) {
  .services-bento .service-card h3 {
    white-space: nowrap;
  }
}
.services-bento .service-card__pitch {
  max-width: 58ch;
  color: color-mix(in srgb, var(--text-dim) 88%, var(--muted));
  font-size: var(--fs-sm);
  line-height: 1.55;
  text-wrap: pretty;
}
.service-card__details {
  margin-block-start: auto;
  border-top: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, var(--stroke));
}
.service-card__details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 2.9rem;
  padding-block: 0.75rem;
  cursor: pointer;
  list-style: none;
  color: color-mix(in srgb, var(--brand-secondary) 45%, var(--text));
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.service-card__details > summary::-webkit-details-marker { display: none; }
.service-card__details > summary::marker { content: ""; }
.service-card__details > summary:hover { color: var(--text); }
.service-card__details > summary:focus { outline: none; }
.service-card__details > summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-secondary) 55%, var(--text));
  outline-offset: 0.2rem;
  border-radius: var(--radius-sm);
}
.service-card__details-label--open { display: none; }
.service-card__details[open] .service-card__details-label--closed { display: none; }
.service-card__details[open] .service-card__details-label--open { display: inline; }
.service-card__details-icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 30%, var(--stroke));
  border-radius: 50%;
  transition:
    transform 0.35s var(--ease-out),
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.service-card__details-icon::before,
.service-card__details-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  /* 2px : à 1px, la barre verticale (rotate 90°) tombe sur un demi-pixel
     après translate(-50%,-50%) et disparaît sur certains écrans → le « + »
     replié se lisait comme un « − ». */
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.service-card__details-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.service-card__details[open] .service-card__details-icon {
  transform: rotate(45deg);
  border-color: color-mix(in srgb, var(--brand-secondary) 52%, var(--stroke-2));
  background: color-mix(in srgb, var(--brand-secondary) 10%, transparent);
}
.service-card__details-body {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-3) var(--sp-2);
  border-top: 1px solid color-mix(in srgb, var(--brand-secondary) 12%, var(--stroke));
  animation: serviceDetailsIn 320ms var(--ease-out) both;
}
.service-card__details-body .card-tags {
  margin-block-start: var(--sp-1);
}
.service-card__expertises {
  position: relative;
  overflow: visible;
  isolation: auto;
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 22%, var(--stroke));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-secondary) 12%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface-2) 44%, transparent);
}
.service-card__expertises-title {
  display: block;
  margin-block-end: var(--sp-3);
  color: color-mix(in srgb, var(--brand-secondary) 48%, var(--text));
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.service-card__expertises .card-tags {
  margin: 0;
}
.service-card__details-body .card-link {
  align-self: start;
  margin-top: var(--sp-1);
  padding-top: 0;
}
.services-bento .service-card .card-foot {
  margin-top: 0;
  padding-top: var(--sp-1);
}
.services-bento .service-card .card-foot__cta {
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
}
.services-bento .service-card:has(.service-card__details[open]) {
  border-color: color-mix(in srgb, var(--brand-secondary) 42%, var(--stroke-2));
  box-shadow:
    var(--glass-shadow),
    inset 0.18rem 0 0 color-mix(in srgb, var(--brand-secondary) 52%, var(--brand-tertiary));
}
@media (min-width: 60em) {
  .services-bento {
    --accordion-column-gap: var(--sp-4);
  }
  .services-bento > .service-card {
    grid-column: span 6;
  }
  .services-bento > .service-card:has(.service-card__details[open]) {
    z-index: 20;
    width: calc(200% + var(--accordion-column-gap));
  }
  .services-bento > .service-card:has(.service-card__details[open]):nth-child(odd) {
    justify-self: start;
  }
  .services-bento > .service-card:has(.service-card__details[open]):nth-child(even) {
    justify-self: end;
  }
  .services-bento > .service-card:has(.service-card__details[open]):nth-child(odd) + .service-card,
  .services-bento > .service-card:has(+ .service-card:has(.service-card__details[open]):nth-child(even)) {
    opacity: 0 !important;
    pointer-events: none;
  }
  .services-bento > .service-card:has(.service-card__details[open]) .service-card__details-body {
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }
  .services-bento > .service-card:has(.service-card__details[open]) .service-card__details-body > p,
  .services-bento > .service-card:has(.service-card__details[open]) .service-card__details-body > .card-link {
    grid-column: 1;
  }
  .services-bento > .service-card:has(.service-card__details[open]) .service-card__expertises {
    grid-column: 2;
    grid-row: 1 / span 10;
  }
}
@media (max-width: 59.99em) {
  .services-bento > .service-card {
    min-height: 0;
  }
}
@keyframes serviceDetailsIn {
  from { opacity: 0; transform: translateY(-0.35rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card__details-icon,
  .service-card__details-body { transition: none; animation: none; }
}

/* --- Offres création web : lecture rapide + détails progressifs --- */
.offer-grid {
  align-items: start;
  gap: clamp(var(--sp-4), 3vw, var(--sp-6));
  grid-template-columns: 1fr;
}
@media (min-width: 42em) {
  .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.offer-grid > .offer-card {
  min-height: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  gap: 0;
}
.offer-grid > .offer-card:has(.card-tags__item--hint) {
  overflow: visible;
  isolation: auto;
}
.offer-grid > .offer-card:has(.card-tag-hint:hover),
.offer-grid > .offer-card:has(.card-tag-hint:focus-visible),
.offer-grid > .offer-card:has(.card-tags__item--hint.is-hint-open) {
  z-index: 45;
}
.offer-card__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  margin-block-end: 0;
}
.offer-card__header .card-icon {
  margin: 0;
}
.offer-card__step {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-secondary);
}
.offer-card__header h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.card .offer-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block: var(--sp-5) var(--sp-3);
  color: var(--text);
}
.offer-card__price .price {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.045em;
  background-image: var(--scroll-progress-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.offer-card__price-from {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-inline-end: calc(0.2em - var(--sp-2));
}
/* Tarif « à partir de » : préfixe muted + prix serif + icône i */
.offer-card__price.card-tags__item--hint {
  width: fit-content;
  max-width: 100%;
  padding-inline-end: 1.75rem;
  z-index: 6;
}
.offer-card__price.card-tags__item--hint .price {
  text-decoration: none;
}
.offer-card__price .card-tag-hint {
  inset: -0.35rem -0.15rem;
  border-radius: var(--radius);
}
.offer-card__price .card-tag-hint__tip {
  left: 0;
  transform: none;
  width: min(20rem, calc(100vw - 3rem));
  color: var(--text);
  font-size: 0.8rem;
  background: var(--surface-2);
}
.card .offer-card__pitch {
  max-width: 48ch;
  color: var(--text-dim);
  font-size: var(--fs-base);
  line-height: 1.55;
  text-wrap: pretty;
}
.offer-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 22%, var(--stroke));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 48%, transparent);
}
.offer-card__facts li {
  position: relative;
  min-width: 0;
  padding: var(--sp-3);
  text-align: center;
  border-inline-end: 1px solid color-mix(in srgb, var(--brand-secondary) 16%, var(--stroke));
}
.offer-card__facts li.card-tags__item--hint {
  z-index: 6;
}
.offer-card__facts li.card-tags__item--hint::after {
  top: var(--sp-2);
  right: var(--sp-2);
  transform: none;
}
.offer-card__facts .card-tag-hint {
  inset: 0;
}
/* Sous la cellule : évite de recouvrir le gros titre prix (« 2 journées ») au-dessus */
.offer-card__facts .card-tag-hint__tip {
  top: 100%;
  bottom: auto;
  margin-top: 0.35rem;
  margin-bottom: 0;
  width: min(20rem, calc(100vw - 3rem));
  background: var(--surface-2);
}
.offer-card__facts li:first-child .card-tag-hint__tip {
  left: 0;
  transform: none;
}
.offer-card__facts li:last-child .card-tag-hint__tip {
  right: 0;
  left: auto;
  transform: none;
}
.offer-card__facts li:last-child {
  border-inline-end: 0;
}
.offer-card__facts .ph-icon {
  margin: 0 auto var(--sp-2);
  font-size: 1rem;
  color: color-mix(in srgb, var(--brand-secondary) 68%, var(--muted));
  opacity: 0.82;
}
.offer-card__fact-content,
.offer-card__fact-content > strong,
.offer-card__fact-content > span {
  display: block;
}
.offer-card__fact-content > strong {
  color: var(--text);
  font-size: clamp(0.82rem, 1.7vw, 1rem);
  line-height: 1.2;
}
.offer-card__fact-content > span {
  margin-top: var(--sp-1);
  color: var(--muted);
  font-size: clamp(0.62rem, 1.3vw, 0.72rem);
  line-height: 1.25;
}
.offer-card .offer-card__highlights {
  margin-top: var(--sp-5);
  gap: var(--sp-2);
}
.offer-card .offer-card__highlights li {
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.offer-card .offer-card__details {
  margin-block-start: var(--sp-5);
}
.offer-card .service-card__details-body {
  gap: var(--sp-5);
  padding-block-end: var(--sp-3);
}
.offer-card__detail-section {
  display: grid;
  gap: var(--sp-3);
}
.offer-card__detail-section > strong {
  color: color-mix(in srgb, var(--brand-secondary) 42%, var(--text));
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.offer-card__detail-section .card-tags {
  margin: 0;
}
.offer-card__detail-section .check-list,
.offer-card__detail-section .cross-list {
  gap: var(--sp-3);
}
.offer-card .card-foot {
  margin-top: var(--sp-4);
  padding-top: 0;
}
.offer-card .card-foot__cta {
  width: 100%;
  max-width: 100%;
  min-height: 3rem;
  justify-content: center;
  text-align: center;
  white-space: normal;
}
/* CTA offres : variante sombre bordée (exception au .btn-cta clair global). */
.offer-grid .offer-card .card-foot__cta.btn-cta {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 32%, var(--stroke-2));
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow: var(--glass-shadow);
}
.offer-grid .offer-card .card-foot__cta.btn-cta:hover {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand-secondary) 42%, var(--text));
  box-shadow:
    var(--glass-shadow),
    0 0 0 1px color-mix(in srgb, var(--brand-secondary) 16%, transparent);
}
.offer-grid .offer-card .card-foot__cta.btn-cta:focus-visible {
  outline-color: color-mix(in srgb, var(--brand-secondary) 68%, var(--text));
}
.offer-card:has(.offer-card__details[open]) {
  border-color: color-mix(in srgb, var(--brand-secondary) 42%, var(--stroke-2));
  box-shadow:
    var(--glass-shadow),
    inset 0.15rem 0 0 color-mix(in srgb, var(--brand-secondary) 52%, var(--brand-tertiary));
}
@media (max-width: 30em) {
  .offer-card__header {
    grid-template-columns: 1fr;
  }
  .offer-card__facts li {
    padding-inline: var(--sp-2);
  }
}

/* --- Accordéons desktop : carte ouverte pleine largeur + composition éditoriale --- */
@media (min-width: 48em) {
  .faq {
    --accordion-column-gap: var(--sp-4);
  }
  .faq > details.faq-item[open] {
    z-index: 20;
    grid-column: span 1;
    width: calc(200% + var(--accordion-column-gap));
    max-width: none;
  }
  .faq > details.faq-item[open]:nth-child(odd) {
    justify-self: start;
  }
  .faq > details.faq-item[open]:nth-child(even) {
    justify-self: end;
  }
  .faq > details.faq-item[open]:nth-child(odd) + details.faq-item,
  .faq > details.faq-item:has(+ details.faq-item[open]:nth-child(even)) {
    opacity: 0 !important;
    pointer-events: none;
  }
}
@media (min-width: 64em) {
  .faq {
    --accordion-column-gap: var(--sp-5);
  }
}
.accordion-grid.is-layout-animating > * {
  transition: none !important;
}
.accordion-grid.is-layout-animating > .card:hover,
.accordion-grid.is-layout-animating > details.faq-item:hover {
  transform: none;
}

/* =========================================================
   /PREMIUM POLISH PACK
   ========================================================= */

/* =========================================================
   OFFER GRID · v1.1 — audit UX 2026-07
   Séquence lisible, comparabilité, signifiants
   ========================================================= */

/* Étapes, pas alternatives : connecteur « puis » entre les deux cartes */
.offer-grid--steps { position: relative; }
.offer-grid--steps::after {
  content: "puis";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: none;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text);
  background: color-mix(in srgb, var(--brand-secondary) 16%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 45%, var(--stroke-2));
  box-shadow: 0 0.4rem 1.2rem hsl(0 0% 0% / 0.45);
  pointer-events: none;
}
@media (min-width: 42em) {
  .offer-grid--steps::after { display: grid; }
  /* Cartes de même hauteur + détails/CTA ancrés en bas : les pieds de carte
     restent alignés quelle que soit la longueur du contenu au-dessus. */
  .offer-grid--steps { align-items: stretch; }
  .offer-grid--steps .offer-card .offer-card__details {
    margin-block-start: auto;
    padding-block-start: var(--sp-5);
  }
  .offer-grid--steps .offer-card .card-foot { margin-top: 0; }
}

/* Tag « conditions » : même slot sur les deux cartes — chip discret (base .tag), pas un bloc noir */
.offer-card .offer-card__terms {
  align-self: flex-start;
  margin-block: var(--sp-2) var(--sp-3);
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 3px 9px;
}
.card .offer-card__price:has(+ .offer-card__terms),
.card .offer-card__price:has(+ .offer-card__terms-row) {
  margin-block-end: 0;
}
/* Rangée de chips « conditions » : payable en deux fois + tarif réduit, côte à côte.
   Pas de z-index permanent : sinon les badges passent devant les tips de la grille meta. */
.offer-card__terms-row {
  position: relative;
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  margin-block: var(--sp-2) var(--sp-3);
}
.offer-card__terms-row:has(.card-tag-hint:hover),
.offer-card__terms-row:has(.card-tag-hint:focus-visible),
.offer-card__terms-row:has(.card-tags__item--hint:focus-within),
.offer-card__terms-row:has(.card-tags__item--hint.is-hint-open) {
  z-index: 200;
}
.offer-card__terms-row .offer-card__terms {
  align-self: auto;
  margin-block: 0;
}
/* Chip avec infobulle : le ⓘ est en absolute (::after) — réserve l’espace
   (spécificité > .offer-card .offer-card__terms { padding: 3px 9px }) */
.offer-card .offer-card__terms.offer-card__terms--hint {
  position: relative;
  padding-inline-end: 1.85rem;
  cursor: help;
}
/* Infobulle tarif réduit : pas le style tag, largeur bornée, ancrée sous le badge */
.offer-card__terms--hint .card-tag-hint__tip {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-family: var(--font-sans);
  text-align: left;
  left: auto;
  right: 0;
  transform: none;
  top: 100%;
  bottom: auto;
  margin-top: 0.35rem;
  margin-bottom: 0;
  width: min(18rem, calc(100vw - 3rem));
}

/* Cellules de faits : pas de césure sauvage dans les colonnes étroites */
.offer-card__facts { hyphens: none; }

/* Infobulles : signifiant visible — terme souligné pointillé + survol de cellule */
.offer-card__facts .offer-card__fact-content > strong {
  text-decoration: underline dotted color-mix(in srgb, var(--brand-secondary) 55%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}
.offer-card__facts li.card-tags__item--hint {
  transition: background var(--t-fast) var(--ease);
}
.offer-card__facts li.card-tags__item--hint:hover,
.offer-card__facts li.card-tags__item--hint:focus-within {
  background: color-mix(in srgb, var(--brand-secondary) 8%, transparent);
}
/* Spécificité > z-index:6 des cellules / prix : tip au-dessus des frères + sections suivantes */
.offer-card .card-tags__item--hint:has(.card-tag-hint:hover),
.offer-card .card-tags__item--hint:has(.card-tag-hint:focus-visible),
.offer-card .card-tags__item--hint:focus-within,
.offer-card .card-tags__item--hint.is-hint-open,
.offer-card__facts li.card-tags__item--hint:has(.card-tag-hint:hover),
.offer-card__facts li.card-tags__item--hint:has(.card-tag-hint:focus-visible),
.offer-card__facts li.card-tags__item--hint:focus-within,
.offer-card__facts li.card-tags__item--hint.is-hint-open {
  z-index: 220;
}
.offer-card__facts:has(.card-tag-hint:hover),
.offer-card__facts:has(.card-tag-hint:focus-visible),
.offer-card__facts:has(.card-tags__item--hint:focus-within),
.offer-card__facts:has(.card-tags__item--hint.is-hint-open) {
  z-index: 200;
}

/* Gouttière numéros (desktop) : intro + titres d’offres + pied partagent
   la même verticale de lecture. Mobile : numéros masqués, inset = 0. */
#prestations {
  --offer-menu-num-col: 3.5rem;
  --offer-menu-content-inset: 0rem;
}
@media (min-width: 900px) {
  #prestations {
    --offer-menu-content-inset: calc(var(--sp-4) + var(--offer-menu-num-col) + var(--sp-5));
  }
}
#prestations .section-head {
  max-width: min(100%, 64rem);
  padding-inline-start: var(--offer-menu-content-inset);
}

/* =========================================================
   OFFER MENU · prestations SEO des pages territoire
   Rangées éditoriales pleine largeur : composant distinct des
   cards (déjà très présentes sur ces pages). Numéro serif,
   pitch court, prix annoncé, flèche compacte. Le pont vers les
   autres prestations est le pied du menu, pas une phrase isolée.
   ========================================================= */
.offer-menu {
  border-block: 1px solid color-mix(in srgb, var(--brand-secondary) 24%, var(--stroke));
}
.offer-menu > * + * {
  border-top: 1px solid color-mix(in srgb, var(--brand-secondary) 14%, var(--stroke));
}
.offer-menu__row {
  position: relative;
  display: grid;
  /* Mobile : pile verticale (corps puis prix), le texte garde toute la largeur */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  padding: clamp(1.4rem, 3.5vw, 2.25rem) var(--sp-3);
  color: inherit;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
@media (min-width: 900px) {
  .offer-menu__row {
    grid-template-columns: var(--offer-menu-num-col) minmax(0, 1fr) auto 3.25rem;
    padding-inline: var(--sp-4);
  }
}
.offer-menu__row:hover,
.offer-menu__row:focus-visible,
.offer-menu__row:has(.offer-menu__stretch:focus-visible) {
  background: color-mix(in srgb, var(--brand-secondary) 7%, transparent);
}
/* Rangée avec infobulle prix : lien étiré sous le contenu, tip cliquable au-dessus */
.offer-menu__row--with-hint {
  cursor: pointer;
}
.offer-menu__stretch {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: inherit;
  text-decoration: none;
}
.offer-menu__row--with-hint > *:not(.offer-menu__stretch) {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.offer-menu__row--with-hint .card-tags__item--hint {
  z-index: 2;
  pointer-events: auto;
  padding-inline-end: 1.75rem;
}
.offer-menu__row--with-hint .card-tag-hint__tip {
  pointer-events: none;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.8rem;
  white-space: normal;
}
.offer-menu__row--with-hint:has(.card-tag-hint:hover),
.offer-menu__row--with-hint:has(.card-tag-hint:focus-visible),
.offer-menu__row--with-hint:has(.card-tags__item--hint.is-hint-open) {
  z-index: 45;
}
/* Chips scope offres SEO : tooltip sur le terme, sans pastille « i » */
.offer-menu__scope-term.card-tags__item--hint {
  display: inline;
  padding-inline-end: 0;
}
.offer-menu__row--with-hint .offer-menu__scope-term.card-tags__item--hint {
  padding-inline-end: 0;
}
.offer-menu__scope-term.card-tags__item--hint::after {
  content: none;
  display: none;
}
.offer-menu__scope-term .card-tag-hint__label {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
  text-decoration-color: color-mix(in srgb, var(--brand-secondary) 42%, var(--muted));
}
.offer-menu__scope-term .card-tag-hint {
  inset: -0.35em -0.12em;
}
.offer-menu__scope-term .card-tag-hint__tip {
  width: min(28rem, calc(100vw - 2rem));
  font-weight: 400;
}
/* Infobulle tarif (carte budget / hors chips) */
.budget-price-hint {
  display: inline-block;
  padding-inline-end: 1.75rem;
  margin-inline-end: 0.15em;
  vertical-align: baseline;
}
.card:has(.budget-price-hint) {
  overflow: visible;
  isolation: auto;
}
.card:has(.budget-price-hint .card-tag-hint:hover),
.card:has(.budget-price-hint .card-tag-hint:focus-visible),
.card:has(.budget-price-hint.is-hint-open) {
  position: relative;
  z-index: 45;
}
.offer-menu__num {
  display: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--brand-secondary) 48%, var(--muted));
}
@media (min-width: 900px) {
  .offer-menu__num { display: block; }
}
.offer-menu__body h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  letter-spacing: -0.02em;
  color: var(--text);
}
.offer-menu__flag {
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 42%, var(--stroke-2));
  background: color-mix(in srgb, var(--brand-secondary) 10%, transparent);
  color: color-mix(in srgb, var(--brand-secondary) 55%, var(--text));
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.offer-menu__pitch {
  margin: 0;
  max-width: 56ch;
  color: var(--text-dim);
  font-size: var(--fs-base);
  line-height: 1.55;
}
.offer-menu__scope {
  margin: var(--sp-2) 0 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-secondary) 36%, var(--muted));
  max-width: none;
}
.offer-menu__price {
  /* Mobile : prix et format sur une ligne, sous le pitch */
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  text-align: left;
}
@media (min-width: 900px) {
  .offer-menu__price {
    display: block;
    text-align: right;
  }
}
.offer-menu__price strong {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.offer-menu__price-meta {
  display: block;
  margin-top: 2px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-secondary) 24%, var(--muted));
  white-space: nowrap;
}
.offer-menu__go {
  display: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 32%, var(--stroke-2));
  color: color-mix(in srgb, var(--brand-secondary) 55%, var(--text-dim));
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
@media (min-width: 900px) {
  .offer-menu__go { display: grid; }
}
.offer-menu__go .ph-icon {
  font-size: 1.1rem;
  transition: transform var(--t) var(--ease-out);
}
.offer-menu__row:hover .offer-menu__go,
.offer-menu__row:focus-visible .offer-menu__go,
.offer-menu__row:has(.offer-menu__stretch:focus-visible) .offer-menu__go {
  border-color: color-mix(in srgb, var(--brand-secondary) 55%, var(--stroke-2));
  background: color-mix(in srgb, var(--brand-secondary) 14%, transparent);
  color: var(--text);
}
.offer-menu__row:hover .offer-menu__go .ph-icon,
.offer-menu__row:focus-visible .offer-menu__go .ph-icon,
.offer-menu__row:has(.offer-menu__stretch:focus-visible) .offer-menu__go .ph-icon {
  transform: translateX(3px);
}
/* Pied de menu : le pont vers les autres prestations, intégré */
.offer-menu__more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-4) var(--sp-3);
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--brand-secondary) 14%, var(--muted));
}
@media (min-width: 900px) {
  .offer-menu__more {
    padding-inline: var(--offer-menu-content-inset) var(--sp-4);
  }
}
.offer-menu__more-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .offer-menu__go .ph-icon { transition: none; }
  .offer-menu__row:hover .offer-menu__go .ph-icon { transform: none; }
}

/* =========================================================
   Chat agent (RAG) - bulle + fenetre flottante (drag / resize)
   ========================================================= */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body:has(.chat-agent) .back-to-top {
  left: auto;
  right: clamp(1rem, 4vw, 1.75rem);
  bottom: clamp(1rem, 4vw, 1.75rem);
}

.chat-agent {
  position: fixed;
  z-index: 85;
  left: max(1.5rem, env(safe-area-inset-left));
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  width: auto;
  font-family: var(--font-sans);
  pointer-events: none;
  hyphens: none;
  -webkit-hyphens: none;
}

/* --- FAB : plaque verre + border-beam marque (même technique que .fit-list) --- */
@property --chat-fab-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.chat-agent__fab {
  --chat-fab-beam-angle: 0deg;
  pointer-events: auto;
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 38%, var(--glass-border));
  border-radius: var(--radius);
  background: var(--glass-bg-strong);
  color: color-mix(in srgb, var(--brand-secondary) 42%, var(--text));
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: var(--glass-backdrop-lg);
  -webkit-backdrop-filter: var(--glass-backdrop-lg);
  box-shadow:
    var(--glass-shadow),
    0 0 0.85rem color-mix(in srgb, var(--brand-secondary) 28%, transparent);
  isolation: isolate;
  overflow: visible;
  animation: chat-agent-fab-breathe 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transition:
    opacity 0.36s var(--ease-out),
    transform 0.4s var(--ease-out),
    visibility 0.4s,
    border-color 0.28s var(--ease-out),
    box-shadow 0.32s var(--ease-out),
    background 0.28s var(--ease-out),
    color 0.28s var(--ease-out);
}
/* Contour animé : conic masqué en anneau (glacier → secondary → tertiary) */
.chat-agent__fab::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--chat-fab-beam-angle),
    transparent 0%,
    transparent 52%,
    #89AACC 64%,
    var(--brand-secondary) 74%,
    var(--brand-tertiary) 86%,
    transparent 96%
  );
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: chatFabBorderBeam 2.8s linear infinite;
}
.chat-agent__fab:hover,
.chat-agent__fab:focus-visible {
  animation: none;
  border-color: color-mix(in srgb, var(--brand-secondary) 58%, var(--glass-edge-bright));
  background: color-mix(in srgb, var(--brand-secondary) 16%, var(--glass-bg-strong));
  color: color-mix(in srgb, var(--brand-secondary) 28%, var(--text));
  transform: translateY(-0.08rem);
  box-shadow:
    0 0 0 0.5px hsl(0 0% 100% / 0.08),
    inset 0 1px 0 hsl(0 0% 100% / 0.2),
    inset 0 -1px 0 hsl(0 0% 0% / 0.2),
    0 0.85rem 2rem hsl(0 0% 0% / 0.28),
    0 0.3rem 0.6rem hsl(0 0% 0% / 0.1),
    0 0 1.1rem color-mix(in srgb, var(--brand-secondary) 36%, transparent);
  outline: 2px solid color-mix(in srgb, var(--brand-secondary) 55%, var(--text));
  outline-offset: 2px;
}
.chat-agent__fab:hover::before,
.chat-agent__fab:focus-visible::before {
  opacity: 1;
  animation-duration: 1.8s;
}
.chat-agent__fab-robot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  line-height: 0;
}
.chat-agent__fab-robot .ph-icon {
  width: 1.625rem;
  height: 1.625rem;
}
@keyframes chatFabBorderBeam {
  to { --chat-fab-beam-angle: 360deg; }
}
/* La bulle fond en douceur pendant que la fenetre emerge */
.chat-agent.is-expanded .chat-agent__fab,
.chat-agent.is-opening .chat-agent__fab {
  opacity: 0;
  transform: scale(0.88) translateY(0.22rem);
  visibility: hidden;
  pointer-events: none;
  animation: none;
}
.chat-agent.is-closing .chat-agent__fab {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0.1s;
}

/* Cue : pill contrasté + flèche SVG vers le coin supérieur droit du FAB */
.chat-agent__cue {
  position: absolute;
  left: calc(3.5rem + 0.2rem);
  bottom: calc(3.5rem - 0.15rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  overflow: visible;
  pointer-events: none;
  color: var(--text);
  transform-origin: 12% 88%;
  opacity: 1;
  transition:
    opacity 0.36s var(--ease-out),
    visibility 0.36s,
    transform 0.4s var(--ease-out);
}
.chat-agent__cue-text {
  font-family: var(--font-sans);
  font-size: clamp(0.7rem, 0.64rem + 0.22vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.15;
  white-space: nowrap;
  padding: 0.4em 0.75em;
  border-radius: var(--radius);
  color: var(--bg);
  background: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 82%, var(--brand-secondary));
  box-shadow:
    0 0.2rem 0.65rem hsl(0 0% 0% / 0.22),
    0 0.05rem 0.15rem hsl(0 0% 0% / 0.12);
  animation: chat-agent-cue-glow 3.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.chat-agent__cue-arrow {
  display: block;
  width: clamp(1.65rem, 1.4rem + 0.7vw, 2.05rem);
  height: auto;
  margin-left: 0.06rem;
  overflow: visible;
  color: var(--text);
  opacity: 0.96;
  transform-origin: 70% 15%;
  animation: chat-agent-cue-arrow 3.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.chat-agent.is-expanded .chat-agent__cue,
.chat-agent.is-opening .chat-agent__cue {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-0.2rem) translateY(0.12rem);
}
.chat-agent.is-closing .chat-agent__cue {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.1s;
}

/* Respiration unique : bordure / ombre, amplitude faible */
@keyframes chat-agent-fab-breathe {
  0%, 100% {
    border-color: color-mix(in srgb, var(--brand-secondary) 34%, var(--glass-border));
    box-shadow: var(--glass-shadow);
  }
  50% {
    border-color: color-mix(in srgb, var(--brand-secondary) 48%, var(--glass-border));
    box-shadow:
      0 0 0 0.5px hsl(0 0% 100% / 0.07),
      inset 0 1px 0 hsl(0 0% 100% / 0.18),
      inset 0 -1px 0 hsl(0 0% 0% / 0.22),
      inset 0 0 0 1px hsl(0 0% 100% / 0.02),
      0 0.75rem 2.25rem hsl(0 0% 0% / 0.22),
      0 0.25rem 0.5rem hsl(0 0% 0% / 0.08),
      0 0 0 1px color-mix(in srgb, var(--brand-secondary) 14%, transparent);
  }
}

/* Cue : pulse d'ombre doux + bob flèche (Apple-like, pas de néon) */
@keyframes chat-agent-cue-glow {
  0%, 100% {
    box-shadow:
      0 0.2rem 0.65rem hsl(0 0% 0% / 0.22),
      0 0.05rem 0.15rem hsl(0 0% 0% / 0.12);
  }
  50% {
    box-shadow:
      0 0.3rem 0.9rem hsl(0 0% 0% / 0.28),
      0 0.08rem 0.22rem hsl(0 0% 0% / 0.14);
  }
}
@keyframes chat-agent-cue-arrow {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-0.1rem, 0.12rem);
  }
}

/* --- Fenetre --- */
.chat-agent__shell {
  pointer-events: auto;
  position: fixed;
  z-index: 86;
  display: none;
  flex-direction: column;
  min-width: 20rem;
  min-height: 32.5rem;
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 94%, transparent) 100%);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1.1rem 2.75rem hsl(0 0% 0% / 0.45);
  overflow: hidden;
  will-change: transform, opacity;
}
.chat-agent.is-expanded .chat-agent__shell { display: flex; }
.chat-agent__shell[hidden] { display: none !important; }
.chat-agent.is-dragging .chat-agent__shell,
.chat-agent.is-resizing .chat-agent__shell {
  user-select: none;
  box-shadow: 0 1.4rem 3rem hsl(0 0% 0% / 0.55);
  transition: none !important;
}

/* Contenu : leger fade staggered a l'ouverture */
.chat-agent.is-opening .chat-agent__header,
.chat-agent.is-opening .chat-agent__messages,
.chat-agent.is-opening .chat-agent__composer,
.chat-agent.is-opening .chat-agent__hint {
  opacity: 0;
  transform: translateY(0.45rem);
  animation: chat-agent-content-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.chat-agent.is-opening .chat-agent__header { animation-delay: 0.12s; }
.chat-agent.is-opening .chat-agent__messages { animation-delay: 0.18s; }
.chat-agent.is-opening .chat-agent__composer { animation-delay: 0.24s; }
.chat-agent.is-opening .chat-agent__hint { animation-delay: 0.28s; }

@keyframes chat-agent-content-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.chat-agent__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.65rem 0.7rem 0.95rem;
  flex: none;
  border-bottom: 1px solid color-mix(in srgb, var(--stroke-2) 70%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 72%, transparent) 0%,
      color-mix(in srgb, var(--bg) 55%, transparent) 100%
    );
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.06);
  backdrop-filter: blur(0.65rem) saturate(1.25);
  -webkit-backdrop-filter: blur(0.65rem) saturate(1.25);
}
.chat-agent__brand {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
  cursor: grab;
  touch-action: none;
  padding: 0.1rem 0;
}
.chat-agent.is-dragging .chat-agent__brand,
.chat-agent.is-maximized .chat-agent__brand { cursor: default; }
.chat-agent:not(.is-maximized).is-dragging .chat-agent__brand { cursor: grabbing; }
.chat-agent__brand-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.chat-agent__status {
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-secondary) 85%, #fff);
  box-shadow: 0 0 0.45rem color-mix(in srgb, var(--brand-secondary) 55%, transparent);
}
.chat-agent__icon {
  width: 1rem;
  height: 1rem;
  display: block;
  margin: 0 auto;
}
.chat-agent__brand strong {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: var(--tr-h);
  color: var(--text);
  line-height: var(--lh-snug);
}
.chat-agent__brand > span {
  font-size: var(--fs-xs);
  color: var(--muted-2);
  letter-spacing: var(--tr-ui);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-agent__toolbar {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
  padding: 0.12rem;
  border: 1px solid color-mix(in srgb, var(--stroke-2) 80%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 45%, transparent);
}
.chat-agent__toolbar-sep {
  width: 1px;
  height: 1.05rem;
  margin: 0 0.2rem;
  background: color-mix(in srgb, var(--stroke-2) 90%, transparent);
  flex: none;
}
.chat-agent__icon-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.chat-agent__icon-btn:hover,
.chat-agent__icon-btn:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand-secondary) 35%, var(--stroke-2));
  background: color-mix(in srgb, var(--brand-secondary) 14%, var(--surface-2));
  outline: none;
}
.chat-agent__icon-btn:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}
.chat-agent__icon-btn--close:hover,
.chat-agent__icon-btn--close:focus-visible {
  border-color: color-mix(in srgb, hsl(0 55% 55%) 40%, var(--stroke-2));
  background: color-mix(in srgb, hsl(0 55% 45%) 16%, var(--surface-2));
}
.chat-agent.is-maximized .chat-agent__shell {
  border-radius: var(--radius);
}
.chat-agent.is-maximized .chat-agent__resize { display: none; }

.chat-agent__messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overscroll-behavior: contain;
  outline: none;
}
.chat-agent__messages:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand-secondary) 45%, transparent);
}

.chat-agent__msg {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  max-width: 98%;
  min-width: 0;
}
.chat-agent__msg--bot { align-self: flex-start; }
.chat-agent__msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
  max-width: 88%;
}
.chat-agent__avatar {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  margin-top: 0.2rem;
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  user-select: none;
}
.chat-agent__avatar--bot {
  color: var(--text);
  background: color-mix(in srgb, var(--brand-secondary) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--brand-secondary) 50%, var(--stroke-2));
}
.chat-agent__avatar--user {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--stroke-2);
}
.chat-agent__bubble {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: 1.5;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: anywhere;
  word-break: normal;
}
.chat-agent__bubble p { margin: 0 0 0.55em; }
.chat-agent__bubble p:last-child { margin-bottom: 0; }
.chat-agent__bubble strong { color: var(--text); font-weight: 600; }
.chat-agent__bubble a {
  color: var(--brand-secondary);
}
.chat-agent__bubble a:hover,
.chat-agent__bubble a:focus-visible { color: var(--text); }
.chat-agent__bubble--bot {
  background: transparent;
  color: var(--text-dim);
  border-left: 2px solid color-mix(in srgb, var(--brand-secondary) 55%, var(--stroke-2));
  border-radius: var(--radius);
  padding-left: 0.7rem;
}
.chat-agent__bubble--user {
  background: color-mix(in srgb, var(--brand-secondary) 18%, var(--surface));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 35%, var(--stroke-2));
}
.chat-agent__typing {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: 1.15rem;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  width: fit-content;
  flex: 0 0 auto;
}
.chat-agent__typing-dot {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 1px;
  background: color-mix(in srgb, var(--brand-secondary) 72%, var(--muted-2));
  opacity: 0.35;
  animation: chat-agent-typing 1.15s ease-in-out infinite;
}
.chat-agent__typing-dot:nth-child(2) { animation-delay: 0.16s; }
.chat-agent__typing-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes chat-agent-typing {
  0%,
  70%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
    transform: translateY(-0.18rem);
  }
}

.chat-agent__sources {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  max-width: 98%;
  align-self: flex-start;
  flex: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  font-size: 0.68rem;
  line-height: 1.3;
  padding: 0.15rem 0 0.4rem calc(1.4rem + 0.45rem);
  min-height: 2rem;
  box-sizing: border-box;
}
.chat-agent__sources-label {
  color: var(--muted-2);
  flex: none;
  white-space: nowrap;
  line-height: 1.3;
}
.chat-agent__sources a {
  display: inline-flex;
  align-items: center;
  flex: none;
  max-width: 11rem;
  min-height: 1.55rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius);
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.chat-agent__sources a:hover,
.chat-agent__sources a:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand-secondary) 45%, var(--stroke-2));
  outline: none;
}

.chat-agent__composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
  margin: 0 0.65rem 0.35rem;
  padding: 0.4rem;
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  flex: none;
}
.chat-agent__input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0.55rem 0.85rem;
  font-size: var(--fs-sm);
  outline: none;
}
.chat-agent__input::placeholder { color: var(--muted-2); }
.chat-agent__composer:focus-within {
  border-color: color-mix(in srgb, var(--brand-secondary) 50%, var(--stroke-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-secondary) 25%, transparent);
}
.chat-agent__send {
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 68%, var(--stroke-2));
  border-radius: var(--radius-full);
  padding: 0.55rem 1rem;
  background: var(--brand-secondary);
  color: #0a0a0a;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tr-ui);
  cursor: pointer;
  white-space: nowrap;
}
.chat-agent__send:hover { filter: brightness(1.08); }
.chat-agent__send:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
.chat-agent__send:disabled {
  opacity: 0.55;
  cursor: wait;
}

.chat-agent__hint {
  margin: 0;
  padding: 0 1.5rem 0.5rem 0.9rem; /* droite: poignee resize */
  font-size: 0.65rem;
  line-height: 1.2;
  color: var(--muted-2);
  text-align: left;
  flex: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.chat-agent__hint::-webkit-scrollbar { display: none; }
.chat-agent__hint > * { flex: none; }
.chat-agent__hint a {
  color: var(--muted);
  white-space: nowrap;
  text-decoration: none;
}

/* Poignee de resize (coin bas-droit) */
.chat-agent__resize {
  position: absolute;
  right: 0.15rem;
  bottom: 0.15rem;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, transparent 46%, color-mix(in srgb, var(--muted-2) 70%, transparent) 48%, transparent 52%),
    linear-gradient(135deg, transparent 62%, color-mix(in srgb, var(--muted-2) 55%, transparent) 64%, transparent 68%);
  cursor: nwse-resize;
  touch-action: none;
}
.chat-agent__resize:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 1px;
  background-color: color-mix(in srgb, var(--brand-secondary) 18%, transparent);
}

@media (max-width: 40rem) {
  .chat-agent {
    left: 0.85rem;
    bottom: 0.85rem;
  }
  .chat-agent__brand { cursor: default; }
  .chat-agent__resize { display: none; }
  .chat-agent__toolbar [data-chat-maximize],
  .chat-agent__toolbar [data-chat-restore] { display: none; }
  .chat-agent__brand > span { white-space: normal; }
  .chat-agent__cue {
    left: calc(3.5rem + 0.12rem);
    bottom: calc(3.5rem - 0.1rem);
  }
  .chat-agent__cue-text {
    font-size: 0.68rem;
    padding: 0.36em 0.66em;
    letter-spacing: 0.03em;
  }
  .chat-agent__cue-arrow {
    width: clamp(1.55rem, 8vw, 1.9rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-agent__fab,
  .chat-agent__fab::before,
  .chat-agent__cue,
  .chat-agent__cue-text,
  .chat-agent__cue-arrow,
  .chat-agent__typing-dot { animation: none; }
  .chat-agent__fab::before {
    --chat-fab-beam-angle: 210deg;
    opacity: 0.78;
  }
  .chat-agent__typing-dot { opacity: 0.65; }
  .chat-agent__fab,
  .chat-agent__cue,
  .chat-agent__cue-text,
  .chat-agent__cue-arrow,
  .chat-agent__shell,
  .chat-agent.is-opening .chat-agent__header,
  .chat-agent.is-opening .chat-agent__messages,
  .chat-agent.is-opening .chat-agent__composer,
  .chat-agent.is-opening .chat-agent__hint {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .chat-agent__fab:hover { transform: none; }
  .chat-agent.is-expanded .chat-agent__fab,
  .chat-agent.is-expanded .chat-agent__cue {
    display: none;
  }
}

/* =========================================================
   Light theme : overrides composants (fork, pas remap naïf)
   ========================================================= */

/* Secondaire / labels : éviter le wash marque (color-mix brand → trop pâle sur crème) */
html[data-theme="light"] .eyebrow:not(.eyebrow--identity) {
  color: color-mix(in srgb, var(--brand-secondary) 8%, var(--muted));
}
html[data-theme="light"] .muted {
  color: var(--muted);
}

/* Ink bands en clair : wash marque + verre opaque, texte sombre (lisibilité) */
html[data-theme="light"] main > section.section--ink,
html[data-theme="light"] main > section.section--ink.section-soft {
  background:
    radial-gradient(ellipse 75% 70% at 8% 30%, color-mix(in srgb, var(--brand-secondary) 16%, transparent), transparent 62%),
    radial-gradient(ellipse 65% 60% at 92% 70%, color-mix(in srgb, var(--brand-tertiary) 14%, transparent), transparent 58%),
    var(--ink);
  border-block-color: color-mix(in srgb, var(--brand-secondary) 18%, var(--stroke));
  color: var(--text);
}
html[data-theme="light"] main > section.section--ink .stat {
  background: color-mix(in srgb, var(--bg) 92%, var(--brand-secondary));
  border-color: color-mix(in srgb, var(--brand-secondary) 28%, var(--stroke));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.8),
    0 0.35rem 1rem hsl(40 20% 20% / 0.08);
}
/* Specular plus-lighter = lavage du texte sur fond clair : off sur les stats */
html[data-theme="light"] main > section.section--ink .stat[data-glass-plate]::before {
  display: none;
}
html[data-theme="light"] main > section.section--ink .stat strong {
  color: var(--text);
}
html[data-theme="light"] main > section.section--ink .stat span {
  color: var(--muted);
}
html[data-theme="light"] main > section.section--ink .stat-icon {
  color: color-mix(in srgb, var(--brand-secondary) 55%, var(--text));
}

/* Explorations : voile moins dense sur fond clair */
html[data-theme="light"] main > section.explorations::before {
  background:
    linear-gradient(hsl(40 20% 98% / 0.35), hsl(40 20% 98% / 0.35)),
    var(--home-mesh),
    radial-gradient(ellipse 55% 80% at 50% 50%, color-mix(in srgb, var(--brand-secondary) 14%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 45% 65% at 8% 45%, color-mix(in srgb, var(--brand-tertiary) 12%, transparent) 0%, transparent 60%);
}

/* Header glass clair */
html[data-theme="light"] .site-header::before {
  background: linear-gradient(180deg,
    hsl(40 28% 98% / 0.9) 0%,
    hsl(40 28% 98% / 0.65) 45%,
    hsl(40 28% 98% / 0.28) 75%,
    transparent 100%);
}
html[data-theme="light"] .site-header > .wrap {
  background: hsl(40 28% 98% / 0.78);
  border-bottom-color: hsl(40 20% 20% / 0.1);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.85),
    0 0.5rem 1.25rem hsl(40 20% 20% / 0.1);
}
html[data-theme="light"] .site-header.is-scrolled > .wrap {
  background: hsl(40 28% 98% / 0.92);
  border-bottom-color: hsl(40 20% 20% / 0.14);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.9),
    0 0.65rem 1.75rem hsl(40 20% 20% / 0.14);
}
html[data-theme="light"] .site-header > .wrap > .nav-sep {
  background: hsl(40 20% 20% / 0.12);
}

/* Boutons aliases : bordures adaptées light */
html[data-theme="light"] .btn-brand,
html[data-theme="light"] .btn-accent {
  border-color: hsl(40 20% 20% / 0.16);
  box-shadow: var(--glass-shadow);
}

/* CTA / primary : plaque sombre sur fond clair (tokens inversés) ;
   renforce le hover avec un mix marque discret */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-cta,
html[data-theme="light"] .card-foot__cta.btn-cta,
html[data-theme="light"] .hero-cta .btn-cta {
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.12),
    0 0.25rem 0.75rem hsl(40 20% 20% / 0.16);
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn-cta:hover,
html[data-theme="light"] .card-foot__cta.btn-cta:hover,
html[data-theme="light"] .hero-cta .btn-cta:hover {
  background: color-mix(in srgb, var(--text) 88%, var(--brand-secondary));
  color: var(--bg);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.16),
    0 0.35rem 1rem hsl(40 20% 20% / 0.2),
    0 0 0 1px color-mix(in srgb, var(--brand-secondary) 22%, transparent);
}

/* Bandeau CTA : déjà îlot contrasté via tokens ; halo un peu plus marqué */
html[data-theme="light"] .cta-band {
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.08),
    0 0.75rem 2.25rem hsl(40 20% 20% / 0.14);
}
html[data-theme="light"] .cta-band .btn-cta {
  box-shadow: 0 0.2rem 0.6rem hsl(40 20% 10% / 0.2);
}
/* Hover/focus : fond teinté marque (sombre) → texte clair (--bg), pas --text foncé */
html[data-theme="light"] .cta-band .btn-cta:hover,
html[data-theme="light"] .cta-band .btn-cta:focus-visible {
  color: var(--bg);
}

/* Hero immersif light : voile crème quasi opaque (radials marque à peine visibles) */
html[data-theme="light"] .hero:has(> .hero-bg) .hero-veil {
  background: hsl(40 20% 98% / 0.94);
}
html[data-theme="light"] .hero:has(> .hero-bg) .hero-cta--google .btn-ghost {
  background: #f8f9fa;
  color: #3c4043;
  border: 1px solid #dadce0;
  box-shadow: none;
  text-decoration: none;
}
html[data-theme="light"] .hero:has(> .hero-bg) .hero-cta--google .btn-ghost:hover {
  background: #f1f3f4;
  color: #202124;
  border-color: #dadce0;
  box-shadow: 0 0.0625rem 0.0625rem hsl(0 0% 0% / 0.1);
  text-decoration: none;
}
/* Autres heroes : veil crème milieu — photo visible, CTA / titre contrastés */
html[data-theme="light"] .hero-veil {
  background: hsl(40 20% 98% / 0.30);
}
html[data-theme="light"] .hero.hero-media .hero-veil {
  background:
    linear-gradient(
      180deg,
      hsl(40 28% 98% / 0.64) 0%,
      hsl(40 28% 98% / 0.56) 42%,
      hsl(40 28% 98% / 0.72) 100%
    );
}
html[data-theme="light"] .hero.hero-media:has(.hero-bg img) .hero-veil {
  background:
    linear-gradient(
      180deg,
      hsl(40 28% 98% / 0.56) 0%,
      hsl(40 28% 98% / 0.46) 40%,
      hsl(40 28% 98% / 0.62) 100%
    );
}
/* Light : kicker / eyebrow plus denses (pas de text-shadow blanc) */
html[data-theme="light"] .hero.hero-media .breadcrumb {
  opacity: 1;
}
html[data-theme="light"] .hero.hero-media .breadcrumb a {
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
}
html[data-theme="light"] .hero.hero-media .breadcrumb [aria-current="page"] {
  color: var(--text);
}
html[data-theme="light"] .hero.hero-media .eyebrow {
  color: color-mix(in srgb, var(--brand-secondary) 14%, var(--text));
}
html[data-theme="light"] .hero.hero-media .hero-bg svg,
html[data-theme="light"] .hero.hero-media .hero-bg video {
  opacity: 0.32;
  filter: grayscale(0.28) contrast(1.02) brightness(1.08);
}
html[data-theme="light"] .hero.hero-media .hero-bg img {
  opacity: 0.78;
  filter: grayscale(0.08) contrast(1.03) brightness(1.02);
}

/* Faux champ Google light : pill blanc + ombre soft */
html[data-theme="light"] .hero-search__glass {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--text) 7%, #dfe1e5);
  box-shadow:
    0 0.0625rem 0.375rem 0.0625rem hsl(40 20% 20% / 0.12),
    0 0.0625rem 0.0625rem 0 hsl(40 20% 20% / 0.07);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="light"] .hero-search.is-open .hero-search__glass {
  border-color: color-mix(in srgb, var(--text) 10%, #dfe1e5);
  border-bottom-color: transparent;
  box-shadow: none;
}
html[data-theme="light"] .hero-search.is-open .hero-search__glass:focus-within {
  border-color: color-mix(in srgb, var(--text) 14%, #dfe1e5);
  border-bottom-color: transparent;
}
html[data-theme="light"] .hero-search.is-open .hero-search__panel {
  border-color: color-mix(in srgb, var(--text) 10%, #dfe1e5);
  background: #fff;
  box-shadow:
    0 0.25rem 0.75rem 0.0625rem hsl(40 20% 20% / 0.14),
    0 0.0625rem 0.125rem 0 hsl(40 20% 20% / 0.08);
}
html[data-theme="light"] .hero-search__icon,
html[data-theme="light"] .hero-search__actions {
  color: #5f6368;
}
html[data-theme="light"] .hero-search__query,
html[data-theme="light"] .hero:has(> .hero-bg) .hero-search__query {
  color: #202124;
}
html[data-theme="light"] .hero-search.is-open .hero-search__option {
  color: #202124;
}
html[data-theme="light"] .hero-search.is-open .hero-search__option-icon {
  color: #5f6368;
}
html.perf-lite[data-theme="light"] .hero-search.is-open .hero-search__panel {
  background: #fff;
}

/* Illustration cathédrale : suit data-theme, pas prefers-color-scheme */
html[data-theme="dark"] .sf-primary { fill: #E2E8F0; }
html[data-theme="dark"] .sf-secondary { fill: #0F172A; }
html[data-theme="dark"] .sf-accent { fill: #94A3B8; }
html[data-theme="dark"] .sf-detail-line { stroke: #94A3B8; }
html[data-theme="light"] .sf-primary { fill: #1E293B; }
html[data-theme="light"] .sf-secondary { fill: #F8FAFC; }
html[data-theme="light"] .sf-accent { fill: #64748B; }
html[data-theme="light"] .sf-detail-line { stroke: #64748B; }

/* Sous-menus desktop : panneau opaque clair + texte sombre */
html[data-theme="light"] .nav-primary .nav-submenu {
  background: color-mix(in srgb, var(--bg) 94%, var(--surface));
  border-color: color-mix(in srgb, var(--brand-secondary) 22%, var(--stroke));
  box-shadow: 0 1.25rem 2.75rem hsl(40 20% 20% / 0.14);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
html[data-theme="light"] .nav-primary .nav-submenu a {
  color: var(--text-dim);
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
html[data-theme="light"] .nav-primary .nav-submenu a:hover,
html[data-theme="light"] .nav-primary .nav-submenu a:focus-visible,
html[data-theme="light"] .nav-primary .nav-submenu a.is-current {
  color: var(--text);
  background: color-mix(in srgb, var(--brand-secondary) 10%, transparent);
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

/* Drawer mobile : fond clair lisible */
html[data-theme="light"] .nav-mobile {
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--brand-secondary) 14%, transparent), transparent 55%),
    radial-gradient(80% 50% at 0% 100%, color-mix(in srgb, var(--brand-tertiary) 10%, transparent), transparent 60%),
    linear-gradient(180deg, hsl(40 28% 98% / 0.94) 0%, hsl(40 22% 96% / 0.96) 100%);
  border-left-color: hsl(40 20% 20% / 0.12);
  box-shadow:
    inset 0 0 0 0.5px hsl(40 20% 20% / 0.04),
    inset 1px 0 0 hsl(0 0% 100% / 0.7),
    -1.5rem 0 3rem -1rem hsl(40 20% 20% / 0.18);
}
html[data-theme="light"] .nav-mobile > a,
html[data-theme="light"] .nav-mobile .nav-group-toggle {
  color: var(--text);
}
html[data-theme="light"] .nav-mobile .nav-submenu a {
  color: var(--text-dim);
}
html[data-theme="light"] .nav-mobile .nav-submenu a:hover,
html[data-theme="light"] .nav-mobile .nav-submenu a.is-current {
  color: var(--text);
}
html[data-theme="light"] .nav-mobile > a:active,
html[data-theme="light"] .nav-mobile .nav-group-toggle:active,
html[data-theme="light"] .nav-mobile .nav-submenu a:active {
  background: color-mix(in srgb, var(--brand-secondary) 8%, transparent);
}
html[data-theme="light"] .nav-mobile-close {
  color: var(--muted);
}
html[data-theme="light"] .nav-mobile-close:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-color: var(--stroke);
}
html[data-theme="light"] .nav-mobile-label {
  color: var(--muted);
}
html[data-theme="light"] .nav-mobile-label::after {
  background: linear-gradient(90deg, var(--stroke), transparent);
}

/* --- Theme toggle : carré compact dans la topbar (.nav-cta) --- */
.theme-switch.btn {
  flex: none;
  gap: 0.4em;
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tr-ui);
  line-height: 1;
  border-radius: var(--radius);
  overflow: visible;
}
.theme-switch .btn-icon {
  width: 1.05em;
  height: 1.05em;
}
/* Labels : piste suivante du cycle dark ↔ light. */
.theme-switch .theme-switch__label--to-dark { display: none; }
.theme-switch .theme-switch__label--to-light { display: inline; }
html[data-theme="light"] .theme-switch .theme-switch__label--to-light { display: none; }
html[data-theme="light"] .theme-switch .theme-switch__label--to-dark { display: inline; }

/* Carré compact dans .nav-cta (avant Audit) — icônes Phosphor seules */
.site-header .nav-cta .theme-switch--nav,
.theme-switch--nav {
  position: relative;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  gap: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: hsl(0 0% 100% / 0.14);
  border: 1px solid hsl(0 0% 100% / 0.28);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.12),
    0 1px 3px hsl(0 0% 0% / 0.28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
.theme-switch--nav:hover {
  background: hsl(0 0% 100% / 0.22);
  border-color: color-mix(in srgb, var(--brand-secondary) 55%, hsl(0 0% 100% / 0.35));
  color: var(--text);
}
/* Spécificité > .nav-cta .btn .btn-icon. display:none = un seul glyphe peint (pas de stack sun+moon). */
.nav-cta .theme-switch--nav .theme-switch__icon,
.theme-switch--nav .theme-switch__icon {
  width: 1.25rem;
  height: 1.25rem;
  max-width: none;
  grid-area: 1 / 1;
}
.nav-cta .theme-switch--nav .theme-switch__icon--sun,
.theme-switch--nav .theme-switch__icon--sun {
  display: block;
}
.nav-cta .theme-switch--nav .theme-switch__icon--moon,
.theme-switch--nav .theme-switch__icon--moon {
  display: none;
}
html[data-theme="light"] .nav-cta .theme-switch--nav .theme-switch__icon--sun,
html[data-theme="light"] .theme-switch--nav .theme-switch__icon--sun {
  display: none;
}
html[data-theme="light"] .nav-cta .theme-switch--nav .theme-switch__icon--moon,
html[data-theme="light"] .theme-switch--nav .theme-switch__icon--moon {
  display: block;
}

/*
  Motion « halo céleste » (une idée) :
  - idle : halo respirant sur le bouton + tilt lune / spin soleil
  - switch : entrée morph (scale + rotate) du glyphe qui apparaît
  - hover : label « Mode clair / Mode sombre » (spans déjà dans le DOM)
  display:none/block = un seul glyphe peint (pas de stack sun+moon).
*/
.theme-switch--nav::after {
  content: "";
  position: absolute;
  inset: -0.12rem;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0.95rem 0.16rem color-mix(in srgb, var(--brand-secondary) 55%, transparent),
    0 0 1.6rem 0.05rem color-mix(in srgb, var(--brand-tertiary) 28%, transparent);
}
/* Hint hover : réutilise .theme-switch__label (visually-hidden hors hover/focus). */
.theme-switch--nav .theme-switch__label {
  position: absolute;
  z-index: 60;
  left: 50%;
  top: calc(100% + 0.45rem);
  bottom: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(12rem, calc(100vw - 1.5rem));
  height: auto;
  margin: 0;
  padding: 0.35rem 0.55rem;
  overflow: visible;
  clip: unset;
  clip-path: none;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 40%, var(--glass-border));
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.theme-switch--nav .theme-switch__label--to-light { display: block; }
.theme-switch--nav .theme-switch__label--to-dark { display: none; }
html[data-theme="light"] .theme-switch--nav .theme-switch__label--to-light { display: none; }
html[data-theme="light"] .theme-switch--nav .theme-switch__label--to-dark { display: block; }
.theme-switch--nav:is(:hover, :focus-visible) .theme-switch__label {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
  .theme-switch--nav .theme-switch__label {
    transition: opacity 0.18s ease, visibility 0.18s ease;
  }
  @keyframes theme-halo-breathe {
    0%, 100% { opacity: 0.32; transform: scale(0.9); }
    50% { opacity: 0.95; transform: scale(1.08); }
  }
  @keyframes theme-icon-morph-in {
    from {
      opacity: 0;
      transform: scale(0.5) rotate(-52deg);
      filter: blur(1.5px);
    }
    to {
      opacity: 1;
      transform: scale(1) rotate(0deg);
      filter: blur(0);
    }
  }
  /* Tour complet sans saut : part d’un léger offset d’entrée. */
  @keyframes theme-sun-spin {
    from { transform: rotate(-22deg); }
    to { transform: rotate(338deg); }
  }
  @keyframes theme-moon-sway {
    0%, 100% { transform: rotate(-10deg) translateY(0); }
    50% { transform: rotate(14deg) translateY(-0.14rem); }
  }

  .theme-switch--nav::after {
    animation: theme-halo-breathe 3.6s ease-in-out infinite;
  }
  .theme-switch--nav:is(:hover, :focus-visible)::after {
    animation-play-state: paused;
    opacity: 0.78;
    transform: scale(1.04);
  }

  .nav-cta .theme-switch--nav .theme-switch__icon--sun,
  .theme-switch--nav .theme-switch__icon--sun {
    transform-box: fill-box;
    transform-origin: center;
    animation:
      theme-icon-morph-in 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      theme-sun-spin 14s linear 0.55s infinite;
  }
  .theme-switch--nav:is(:hover, :focus-visible) .theme-switch__icon--sun {
    animation-duration: 0.55s, 5.5s;
  }

  html[data-theme="light"] .nav-cta .theme-switch--nav .theme-switch__icon--moon,
  html[data-theme="light"] .theme-switch--nav .theme-switch__icon--moon {
    transform-box: fill-box;
    transform-origin: 50% 55%;
    animation:
      theme-icon-morph-in 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      theme-moon-sway 2.8s ease-in-out 0.55s infinite;
  }
  .theme-switch--nav:is(:hover, :focus-visible) .theme-switch__icon--moon {
    animation-duration: 0.55s, 1.55s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-switch--nav::after {
    content: none;
  }
  .nav-cta .theme-switch--nav .theme-switch__icon,
  .theme-switch--nav .theme-switch__icon {
    animation: none;
  }
  .theme-switch--nav .theme-switch__label {
    transition: none;
  }
}

.nav-cta {
  flex-shrink: 0;
}
.nav-cta .theme-switch--nav {
  padding: 0;
}
@media (max-width: 767.98px) {
  .site-header .nav-cta .theme-switch--nav {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
  }
}
html[data-theme="light"] .theme-switch--nav {
  background: hsl(40 14% 90%);
  border-color: hsl(40 20% 20% / 0.28);
  color: hsl(40 22% 14%);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.65),
    0 1px 2px hsl(40 20% 20% / 0.1);
}
html[data-theme="light"] .theme-switch--nav:hover {
  background: hsl(40 12% 84%);
  border-color: hsl(40 20% 20% / 0.38);
  color: hsl(40 24% 10%);
}
html[data-a11y="on"] .theme-switch--nav {
  background: #ffffff;
  border-color: #111111;
  color: #111111;
  box-shadow: none;
}
html[data-a11y="on"] .theme-switch--nav:hover {
  background: #f2f2f2;
  border-color: #000000;
  color: #000000;
}

/* Footer marquee + colonnes : polish pack mixe #fff (OK dark, illisible en light) */
html[data-theme="light"] .marquee:not(.marquee--metiers) {
  border-block-color: color-mix(in srgb, var(--brand-secondary) 28%, var(--stroke-2));
}
html[data-theme="light"] .marquee:not(.marquee--metiers) .marquee-item {
  color: var(--text-dim);
}
html[data-theme="light"] .marquee:not(.marquee--metiers) .marquee-item::after {
  background: color-mix(in srgb, var(--brand-tertiary) 42%, var(--muted));
}
html[data-theme="light"] .marquee.is-duo .marquee-track + .marquee-track .marquee-item {
  color: var(--muted);
}
html[data-theme="light"] .site-footer {
  color: var(--muted);
}
html[data-theme="light"] .site-footer .brand-name span {
  color: var(--muted-2);
}
html[data-theme="light"] .site-footer a:not(.brand):hover,
html[data-theme="light"] .site-footer a:not(.brand):focus-visible {
  color: var(--text);
}
html[data-theme="light"] .footer-grid {
  border-bottom-color: var(--stroke-2);
}
html[data-theme="light"] .footer-brand p {
  color: var(--muted);
}
html[data-theme="light"] .footer-social__link {
  border-color: var(--stroke-2);
}
html[data-theme="light"] .footer-social__link:hover,
html[data-theme="light"] .footer-social__link:focus-visible {
  border-color: color-mix(in srgb, var(--brand-secondary) 35%, var(--stroke-2));
  background: color-mix(in srgb, var(--brand-secondary) 8%, var(--surface));
}
html[data-theme="light"] .footer-col__title {
  color: color-mix(in srgb, var(--brand-secondary) 42%, var(--text));
}
html[data-theme="light"] .footer-col ul a {
  color: var(--text-dim);
}
html[data-theme="light"] .footer-bottom {
  color: var(--muted-2);
}
html[data-theme="light"] .footer-bottom nav a,
html[data-theme="light"] .footer-a11y {
  color: var(--muted);
}
html[data-theme="light"] .footer-a11y:hover,
html[data-theme="light"] .footer-a11y:focus-visible {
  color: var(--text);
}

/* Portfolio chips : glass noir + --text clair OK en dark ; en light --text est sombre → illisible */
html[data-theme="light"] .works-badge {
  background: var(--text);
  color: var(--bg);
  border-color: color-mix(in srgb, var(--text) 72%, var(--stroke-2));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Case study close : fond dark hardcodé + --text clair OK en dark ; en light --text sombre → illisible */
html[data-theme="light"] .case-study-close {
  background: var(--text);
  color: var(--bg);
  border-color: color-mix(in srgb, var(--text) 72%, var(--stroke-2));
}
html[data-theme="light"] .case-study-close:hover,
html[data-theme="light"] .case-study-close:focus-visible {
  background: color-mix(in srgb, var(--text) 82%, var(--surface-2));
  color: var(--bg);
  border-color: color-mix(in srgb, var(--brand-secondary) 35%, var(--stroke-2));
}

/* =========================================================
   Accessible overlay (data-a11y="on") : adaptation profonde
   Contraste max, surfaces opaques, typo Hyperlegible, focus 3px.
   Auto-on via prefers-contrast: more sauf override manuel (r24-a11y).
   ========================================================= */

html[data-a11y="on"] :focus-visible {
  outline: 3px solid #0000ee;
  outline-offset: 3px;
}

/* Glass / blur / specular : off */
html[data-a11y="on"] *,
html[data-a11y="on"] *::before,
html[data-a11y="on"] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-a11y="on"] [data-glass-plate]::before {
  display: none;
}
html[data-a11y="on"] .hero-aurora,
html[data-a11y="on"] .hero-aurora::before,
html[data-a11y="on"] .hero-aurora::after {
  opacity: 0;
  background: none;
  filter: none;
}

/* Liens : soulignement permanent (pas d'info par la seule couleur) */
html[data-a11y="on"] a:not(.btn):not(.brand):not(.nav-toggle):not(.footer-social__link) {
  color: #003366;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
  -webkit-text-fill-color: #003366;
  background-image: none;
}
/* Nav desktop : pas d’underline CSS (landmark + états) — évite largeur/wrap */
html[data-a11y="on"] .nav-primary > a {
  text-decoration: none;
  text-underline-offset: 0;
}
html[data-a11y="on"] a:not(.btn):not(.brand):not(.nav-toggle):not(.footer-social__link)::after,
html[data-a11y="on"] a:not(.btn):not(.brand):not(.nav-toggle):not(.footer-social__link)::before {
  display: none;
}
html[data-a11y="on"] a:not(.btn):not(.brand):not(.nav-toggle):not(.footer-social__link):hover,
html[data-a11y="on"] a:not(.btn):not(.brand):not(.nav-toggle):not(.footer-social__link):focus-visible {
  color: #000000;
  -webkit-text-fill-color: #000000;
  background-image: none;
  text-decoration-thickness: 0.14em;
}

html[data-a11y="on"] .muted {
  color: var(--muted);
}
html[data-a11y="on"] .eyebrow:not(.eyebrow--identity) {
  color: var(--muted);
}

/* Header opaque */
html[data-a11y="on"] .site-header::before {
  background: #ffffff;
}
html[data-a11y="on"] .site-header > .wrap {
  background: #ffffff;
  border-bottom: 2px solid #111111;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-a11y="on"] .site-header.is-scrolled > .wrap {
  background: #ffffff;
  border-bottom-color: #111111;
  box-shadow: none;
}
html[data-a11y="on"] .site-header > .wrap > .nav-sep {
  background: #333333;
}
html[data-a11y="on"] .nav-primary .nav-submenu {
  background: #ffffff;
  border: 2px solid #111111;
  box-shadow: none;
  backdrop-filter: none;
}
/* Pas de dégradé texte / fill transparent (top-level + toggles + sous-menus) */
html[data-a11y="on"] .nav-primary > a:hover,
html[data-a11y="on"] .nav-primary > a:focus-visible,
html[data-a11y="on"] .nav-primary .nav-group-toggle:hover,
html[data-a11y="on"] .nav-primary .nav-group-toggle:focus-visible {
  color: #000000;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  text-decoration: none;
}
html[data-a11y="on"] .nav-primary .nav-submenu a {
  color: #111111;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
html[data-a11y="on"] .nav-primary .nav-submenu a:hover,
html[data-a11y="on"] .nav-primary .nav-submenu a:focus-visible,
html[data-a11y="on"] .nav-primary .nav-submenu a.is-current {
  color: #000000;
  background: #f2f2f2;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
html[data-a11y="on"] .nav-mobile {
  background: #ffffff;
  color: #111111;
  backdrop-filter: none;
}
html[data-a11y="on"] .nav-mobile > a,
html[data-a11y="on"] .nav-mobile .nav-group-toggle {
  color: #111111;
}
html[data-a11y="on"] .nav-mobile .nav-submenu a {
  color: #222222;
}

/* Sections ink / explorations : fonds opaques */
html[data-a11y="on"] main > section.section--ink,
html[data-a11y="on"] main > section.section--ink.section-soft {
  background: var(--ink);
  border-block-color: #111111;
  color: var(--text);
}
html[data-a11y="on"] main > section.section--ink .stat {
  background: #ffffff;
  border: 2px solid #111111;
  box-shadow: none;
}
html[data-a11y="on"] main > section.section--ink .stat strong {
  color: #111111;
}
html[data-a11y="on"] main > section.section--ink .stat span {
  color: #222222;
}
html[data-a11y="on"] main > section.explorations::before {
  background: #ffffff;
}

/* CTA / boutons : contraste fort */
html[data-a11y="on"] .btn-primary,
html[data-a11y="on"] .btn-cta,
html[data-a11y="on"] .card-foot__cta.btn-cta,
html[data-a11y="on"] .hero-cta .btn-cta {
  background: #111111;
  color: #ffffff;
  border: 2px solid #111111;
  box-shadow: none;
}
html[data-a11y="on"] .btn-primary:hover,
html[data-a11y="on"] .btn-cta:hover,
html[data-a11y="on"] .card-foot__cta.btn-cta:hover,
html[data-a11y="on"] .hero-cta .btn-cta:hover {
  background: #000000;
  color: #ffffff;
}
html[data-a11y="on"] .btn-ghost {
  background: #ffffff;
  color: #111111;
  border: 2px solid #111111;
}

/* Footer / marquee : tokens a11y (pas de #fff cassé) */
html[data-a11y="on"] .marquee:not(.marquee--metiers) {
  border-block-color: #111111;
  background: #ffffff;
}
html[data-a11y="on"] .marquee:not(.marquee--metiers) .marquee-item {
  color: #111111;
}
html[data-a11y="on"] .marquee:not(.marquee--metiers) .marquee-item::after {
  background: #333333;
}
html[data-a11y="on"] .marquee.is-duo .marquee-track + .marquee-track .marquee-item {
  color: #222222;
}
html[data-a11y="on"] .site-footer {
  background: #ffffff;
  color: #222222;
  border-top: 2px solid #111111;
}
html[data-a11y="on"] .site-footer .brand-name span {
  color: #333333;
}
html[data-a11y="on"] .site-footer a:not(.brand) {
  color: #003366;
}
html[data-a11y="on"] .site-footer a:not(.brand):hover,
html[data-a11y="on"] .site-footer a:not(.brand):focus-visible {
  color: #000000;
}
html[data-a11y="on"] .footer-grid {
  border-bottom-color: #333333;
}
html[data-a11y="on"] .footer-brand p {
  color: #222222;
}
html[data-a11y="on"] .footer-social__link {
  border-color: #111111;
  color: #111111;
}
html[data-a11y="on"] .footer-social__link:hover,
html[data-a11y="on"] .footer-social__link:focus-visible {
  border-color: #000000;
  background: #f2f2f2;
  color: #000000;
}
html[data-a11y="on"] .footer-col__title {
  color: #111111;
}
html[data-a11y="on"] .footer-col ul a {
  color: #003366;
}
html[data-a11y="on"] .footer-bottom {
  color: #333333;
}
html[data-a11y="on"] .footer-bottom nav a,
html[data-a11y="on"] .footer-a11y {
  color: #003366;
}
html[data-a11y="on"] .footer-a11y:hover,
html[data-a11y="on"] .footer-a11y:focus-visible {
  color: #111111;
}

html[data-a11y="on"] .works-badge {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-a11y="on"] .case-study-close {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}
html[data-a11y="on"] .case-study-close:hover,
html[data-a11y="on"] .case-study-close:focus-visible {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

/* Logos / SVG cathédrale : variante claire */
html[data-a11y="on"] .logo-strip__theme--dark { display: none; }
html[data-a11y="on"] .logo-strip__theme--light { display: block; }
html[data-a11y="on"] .sf-primary { fill: #111111; }
html[data-a11y="on"] .sf-secondary { fill: #ffffff; }
html[data-a11y="on"] .sf-accent { fill: #333333; }
html[data-a11y="on"] .sf-detail-line { stroke: #333333; }

/* Hero search : opaque */
html[data-a11y="on"] .hero-search__glass,
html[data-a11y="on"] .hero-search.is-open .hero-search__glass,
html[data-a11y="on"] .hero-search.is-open .hero-search__panel {
  background: #ffffff;
  border: 2px solid #111111;
  box-shadow: none;
  backdrop-filter: none;
}
html[data-a11y="on"] .hero-search__query,
html[data-a11y="on"] .hero:has(> .hero-bg) .hero-search__query {
  color: #111111;
}
html[data-a11y="on"] .hero-veil,
html[data-a11y="on"] .hero.hero-media .hero-veil,
html[data-a11y="on"] .hero.hero-media:has(.hero-bg img) .hero-veil {
  background:
    linear-gradient(
      180deg,
      hsl(0 0% 100% / 0.92) 0%,
      hsl(0 0% 100% / 0.88) 45%,
      hsl(0 0% 100% / 0.94) 100%
    );
}
html[data-a11y="on"] .hero :is(h1, .hero-lead, .lead, .eyebrow, p) {
  color: #111111;
  text-shadow: none;
}
/* Titres : annuler tracking négatif / lh serré hard-codés hors tokens */
html[data-a11y="on"] :is(h1, h2, h3, h4, h5, h6),
html[data-a11y="on"] .hero h1,
html[data-a11y="on"] .hero h1 em,
html[data-a11y="on"] .hero h1.hero-sub,
html[data-a11y="on"] .hero h1.hero-title--em-only,
html[data-a11y="on"] .hero h1.hero-title--em-only em,
html[data-a11y="on"] .hero h1:not(.hero-sub):not(.hero-search__query),
html[data-a11y="on"] .hero .hero-headline:not(.hero-search__query),
html[data-a11y="on"] .hero:has(> .hero-bg) .hero-headline:not(.hero-search__query),
html[data-a11y="on"] .hero-search__query,
html[data-a11y="on"] .hero:has(> .hero-bg) .hero-search__query,
html[data-a11y="on"] .hero-search__input {
  letter-spacing: 0.01em;
}
html[data-a11y="on"] :is(h1, h2, h3, h4, h5, h6),
html[data-a11y="on"] .hero h1:not(.hero-sub):not(.hero-search__query),
html[data-a11y="on"] .hero .hero-headline:not(.hero-search__query),
html[data-a11y="on"] .hero:has(> .hero-bg) .hero-headline:not(.hero-search__query),
html[data-a11y="on"] .hero-search__query,
html[data-a11y="on"] .hero:has(> .hero-bg) .hero-search__query {
  line-height: 1.35;
}
html[data-a11y="on"] h1:not(.hero-search__query) {
  line-height: 1.25;
}
/* Widgets qui annulent outline : forcer le focus a11y */
html[data-a11y="on"] .nav-toggle:focus-visible,
html[data-a11y="on"] .nav-mobile-close:focus-visible,
html[data-a11y="on"] .hero-search__input:focus-visible,
html[data-a11y="on"] .hero-search__option:focus-visible,
html[data-a11y="on"] .hero-search__ask:focus-visible,
html[data-a11y="on"] .toc-float-item:focus-visible,
html[data-a11y="on"] .toc-float-item.is-active:focus-visible,
html[data-a11y="on"] .faq summary:focus-visible,
html[data-a11y="on"] .service-card__details > summary:focus-visible,
html[data-a11y="on"] .blog-article__share-item:focus-visible,
html[data-a11y="on"] .chat-agent__icon-btn:focus-visible,
html[data-a11y="on"] .chat-agent__sources a:focus-visible,
html[data-a11y="on"] .chat-agent__messages:focus-visible,
html[data-a11y="on"] .chat-agent__input:focus-visible,
html[data-a11y="on"] .chat-agent__send:focus-visible,
html[data-a11y="on"] .works-item:focus-visible,
html[data-a11y="on"] .theme-switch:focus-visible,
html[data-a11y="on"] .theme-switch--nav:focus-visible {
  outline: 3px solid #0000ee !important;
  outline-offset: 3px;
}