/* Fantasy Agentique : système de design du site.
   Direction « tech moderne » retenue le 25/09/2026 : fond clair légèrement bleuté, bandes Nuit
   (pied de page), un seul accent braise, Geist et Geist Mono.
   Le mode sombre automatique reprend la palette Nuit.
   Remplace le style éditorial du design system publié sur claude.ai (https://claude.ai/artifact/YGYTGGid33ZEkagLX6u2rT).
   Règle : les couleurs, tailles, marges, arrondis et bordures passent par les tokens de la section 1. */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  color-scheme: light;

  /* Surfaces */
  --surface: #F6F7F9;          /* fond de page */
  --page-surface: #F6F7F9;     /* fond de page, jamais redéfini par les bandes Nuit (fondus) */
  --surface-raised: #FFFFFF;   /* cartes, champs */
  --surface-sunken: #EEF0F3;   /* cartes secondaires, pistes des barres */
  --surface-inset: #F9FAFB;    /* intérieur des visuels d'interface */

  /* Texte */
  --ink: #0E1116;              /* texte principal, 17,6:1 sur surface */
  --ink-muted: #5A6270;        /* texte secondaire, 5,7:1 sur surface */

  /* Bordures */
  --border: #E2E5EA;
  --border-strong: #CDD2DA;
  --border-control: #7A818D;   /* contour des champs, au moins 3:1 */

  /* Accent braise : la seule couleur d'accent */
  --braise: #C2410C;
  --braise-hover: #A8380A;
  --on-braise: #FFFFFF;
  --braise-ink: #9A3412;       /* accent en texte, 6,8:1 sur surface */
  --braise-soft: color-mix(in srgb, var(--braise) 10%, var(--surface-raised));
  --braise-line: color-mix(in srgb, var(--braise) 55%, transparent);

  /* Action neutre : envoi des formulaires */
  --action: #0E1116;
  --action-hover: #2A303A;
  --on-action: #FFFFFF;

  /* États */
  --focus: #C2410C;
  --success: #1A6B43;
  --success-soft: color-mix(in srgb, var(--success) 12%, var(--surface-raised));
  --danger: #B42318;

  /* Textures et effets */
  --grid-line: rgba(14, 17, 22, .055);
  --grid-size: 56px;
  --grid-glow: color-mix(in srgb, var(--braise) 50%, transparent);   /* lignes éclairées sous le curseur */
  --halo: color-mix(in srgb, var(--braise) 11%, transparent);
  --noise-opacity: .035;
  --card-sheen: none;
  --btn-sheen: inset 0 1px 0 rgba(255, 255, 255, .18);

  /* Ombres : discrètes, ce sont les bordures qui séparent les blocs */
  --shadow-xs: 0 1px 2px rgba(14, 17, 22, .05);
  --shadow-lift: 0 1px 2px rgba(14, 17, 22, .05), 0 14px 32px -18px rgba(14, 17, 22, .2);
  --shadow-window: 0 1px 2px rgba(14, 17, 22, .05), 0 30px 60px -30px rgba(14, 17, 22, .24);

  /* Typographie */
  --font-sans: "Geist", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-2xs: 11px;            /* détails des visuels d'interface uniquement */
  --text-xs: 12px;             /* étiquettes mono */
  --text-sm: 14px;             /* notes, sources, aides */
  --text-base: 16px;           /* texte courant, jamais moins */
  --text-md: 18px;             /* chapeaux, questions de la FAQ */
  --text-lg: 20px;             /* titres de carte */
  --text-xl: 24px;             /* montants */
  --text-2xl: 28px;
  --text-h2: clamp(30px, 1.6vw + 22px, 44px);
  --text-display: clamp(40px, 2.2vw + 24px, 56px);
  --leading-tight: 1.1;
  --leading-snug: 1.4;
  --leading-body: 1.625;
  --tracking-display: -0.035em;
  --tracking-tight: -0.03em;
  --tracking-label: .1em;

  /* Espacements, base 4 px */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 20px;
  --space-6: 24px; --space-8: 32px;  --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-24: 96px;

  /* Arrondis */
  --radius-xs: 6px;
  --radius-sm: 8px;            /* champs, petits boutons */
  --radius-md: 10px;           /* boutons */
  --radius-lg: 14px;           /* cartes */
  --radius-xl: 20px;           /* fenêtres, grands cadres */
  --radius-full: 999px;        /* badges, pastilles */

  /* Bordures */
  --border-width: 1px;
  --focus-ring: 2px solid var(--focus);

  /* Mise en page */
  --container: 1200px;
  --measure: 62ch;
  --tap-target: 44px;
  --field-height: 48px;
  --nav-height: 64px;

  /* Mouvement */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 500ms;
}

/* Mode sombre automatique : palette Nuit */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface: #0D1016;
    --page-surface: #0D1016;
    --surface-raised: #141821;
    --surface-sunken: #0A0C11;
    --surface-inset: #10131A;
    --ink: #E8EAF0;
    --ink-muted: #9AA3B5;
    --border: #232936;
    --border-strong: #323A4A;
    --border-control: #626C80;
    --braise: #F0784A;
    --braise-hover: #F58D65;
    --on-braise: #0D1016;
    --braise-ink: #F4A27E;
    --action: #E8EAF0;
    --action-hover: #FFFFFF;
    --on-action: #0D1016;
    --focus: #F0784A;
    --success: #5FD39A;
    --danger: #F97066;
    --grid-line: rgba(232, 234, 240, .045);
    --halo: color-mix(in srgb, var(--braise) 16%, transparent);
    --noise-opacity: .05;
    --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 45%);
    --btn-sheen: inset 0 1px 0 rgba(255, 255, 255, .22);
    --shadow-xs: none;
    --shadow-lift: 0 18px 40px -20px rgba(0, 0, 0, .7);
    --shadow-window: 0 0 0 1px rgba(0, 0, 0, .25), 0 30px 80px -30px rgba(0, 0, 0, .7);
  }
}

/* Bandes Nuit : les composants à l'intérieur prennent la palette sombre d'eux-mêmes.
   Les couleurs dérivées sont redéclarées, car une variable calculée ne suit pas la surcharge. */
.theme-night, .footer {
  color-scheme: dark;
  --surface: #0D1016;
  --surface-raised: #141821;
  --surface-sunken: #0A0C11;
  --surface-inset: #10131A;
  --ink: #E8EAF0;
  --ink-muted: #9AA3B5;
  --border: #232936;
  --border-strong: #323A4A;
  --border-control: #626C80;
  --braise: #F0784A;
  --braise-hover: #F58D65;
  --on-braise: #0D1016;
  --braise-ink: #F4A27E;
  --braise-soft: color-mix(in srgb, var(--braise) 12%, var(--surface-raised));
  --braise-line: color-mix(in srgb, var(--braise) 55%, transparent);
  --action: #E8EAF0;
  --action-hover: #FFFFFF;
  --on-action: #0D1016;
  --focus: #F0784A;
  --success: #5FD39A;
  --success-soft: color-mix(in srgb, var(--success) 12%, var(--surface-raised));
  --danger: #F97066;
  --grid-line: rgba(232, 234, 240, .045);
  --halo: color-mix(in srgb, var(--braise) 16%, transparent);
  --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 45%);
  --btn-sheen: inset 0 1px 0 rgba(255, 255, 255, .22);
  --shadow-xs: none;
  --shadow-lift: 0 18px 40px -20px rgba(0, 0, 0, .7);
  background-color: var(--surface);
  color: var(--ink);
}
/* En mode sombre, la bande Nuit se distingue du reste par un fond un cran plus profond */
@media (prefers-color-scheme: dark) {
  .theme-night, .footer {
    --surface: #080A0E;
    --surface-raised: #11151C;
    --surface-inset: #0C0F14;
    --border: #1F2530;
  }
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + var(--space-6)); }
body {
  margin: 0;
  font: 400 var(--text-base)/var(--leading-body) var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Grain très léger sur toute la page, derrière le contenu */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .container { padding-inline: var(--space-8); } }

.section { position: relative; overflow-x: clip; padding-block: var(--space-16); border-top: var(--border-width) solid var(--border); }
@media (min-width: 1024px) { .section { padding-block: var(--space-24); } }
.section-sunken { background: transparent; }
.section-head { margin-bottom: var(--space-12); }

.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 14px; height: 14px; }

/* ==========================================================================
   3. Typographie
   ========================================================================== */
.fa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fa-display { margin: 0; font: 600 var(--text-display)/1.04 var(--font-sans); letter-spacing: var(--tracking-display); color: var(--ink); text-wrap: balance; }
.fa-display .fa-sh-muted { display: block; }
.fa-sh { display: grid; gap: var(--space-4); max-width: 760px; }
.fa-sh-title { margin: 0; font: 600 var(--text-h2)/var(--leading-tight) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--ink); text-wrap: balance; }
.fa-sh-muted { color: var(--ink-muted); }
.fa-sh-lead { margin: 0; font-size: var(--text-md); line-height: 1.65; color: var(--ink-muted); max-width: var(--measure); }
.fa-h3 { margin: 0; font: 500 var(--text-lg)/var(--leading-snug) var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.fa-card-text { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink-muted); }
.fa-eyebrow, .fa-meta { margin: 0; font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--braise-ink); }
.fa-index { font: 400 var(--text-xs)/1 var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   4. Boutons
   ========================================================================== */
.fa-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-target);
  padding: 0 18px;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font: 500 15px/1.2 var(--font-sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.fa-btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.fa-btn:active { transform: translateY(1px); }
.fa-btn-arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .fa-btn:hover .fa-btn-arrow { transform: translateX(3px); } }
.fa-btn-braise { background: var(--braise); color: var(--on-braise); box-shadow: var(--btn-sheen); }
.fa-btn-braise:hover { background: var(--braise-hover); }
.fa-btn-primary { background: var(--action); color: var(--on-action); box-shadow: var(--btn-sheen); }
.fa-btn-primary:hover { background: var(--action-hover); }
.fa-btn-secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.fa-btn-secondary:hover { border-color: var(--border-control); }
.fa-btn-sm { min-height: 40px; padding: 0 14px; font-size: var(--text-sm); }
.fa-btn-block { display: flex; width: 100%; }
.fa-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 480px) { .btn-row .fa-btn { width: 100%; } }

/* ==========================================================================
   5. Badges et étiquettes d'état
   ========================================================================== */
.fa-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border: var(--border-width) solid transparent; border-radius: var(--radius-full); font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.fa-badge-launch { background: var(--braise-soft); color: var(--braise-ink); }
.fa-badge-neutral { background: var(--surface-sunken); color: var(--ink-muted); border-color: var(--border); }
.fa-badge-live { background: var(--surface-inset); color: var(--ink); border-color: var(--border-strong); }
.fa-badge-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--braise); }

.ui-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: var(--border-width) solid var(--border); border-radius: var(--radius-full); background: var(--surface-inset); font: 500 var(--text-2xs)/1 var(--font-mono); letter-spacing: .02em; color: var(--ink-muted); white-space: nowrap; }
.ui-tag-ok { background: var(--success-soft); border-color: transparent; color: var(--success); }
.ui-tag-accent { background: var(--braise-soft); border-color: transparent; color: var(--braise-ink); }
.ui-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ==========================================================================
   6. Navigation : pilule flottante translucide
   La barre reste en haut de l'écran ; sur l'accueil, l'accroche remonte dessous (margin-top négatif).
   ========================================================================== */
.nav-wrap {
  position: sticky; top: 0; z-index: 30;
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--space-4) 0;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  max-width: 1140px; min-height: 60px; margin: 0 auto; padding: 0 8px 0 22px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  border: var(--border-width) solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 14px 36px -18px rgba(14, 17, 22, .28), inset 0 1px 0 rgba(255, 255, 255, .55);
}
@media (prefers-color-scheme: dark) { .nav { box-shadow: 0 14px 36px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06); } }
/* Logo : symbole #fa-logo déclaré en haut de chaque page. F en métal foncé sur fond clair, en métal clair sur fond
   sombre (--fa-ink / --fa-lit) ; texte en currentColor. --fa-ag épaissit un peu AGENTIQUE, trop fin à cette taille. */
.wordmark { display: inline-flex; align-items: center; flex: none; color: var(--ink); text-decoration: none; line-height: 0; --fa-ag: .9; }
.wordmark .logo { display: block; width: auto; height: 40px; aspect-ratio: 465 / 100; }
.footer .wordmark, .theme-night .wordmark { --fa-ink: 0; --fa-lit: 1; }
.footer .wordmark { --fa-ag: .6; }
.footer .wordmark .logo { height: 48px; }
@media (prefers-color-scheme: dark) { .wordmark { --fa-ink: 0; --fa-lit: 1; } }
/* Petits écrans : le logo et le bouton « Appel gratuit » doivent tenir côte à côte dans la pilule */
@media (max-width: 399px) {
  .nav { padding-left: 16px; gap: var(--space-3); }
  .nav .wordmark .logo { height: 30px; }
}
/* Moins de 360 px, pages où le bouton reste dans la barre : le F seul (le SVG en preserveAspectRatio
   « xMinYMid slice » se recadre sur le F quand on réduit sa largeur) */
@media (max-width: 359px) {
  .nav:has(> .fa-btn:not(.nav-cta)) .wordmark .logo { width: 32px; aspect-ratio: auto; }
}
.nav-links { display: none; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.nav-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; font: 450 15px/1 var(--font-sans); color: var(--ink-muted); text-decoration: none; transition: color var(--dur-fast); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:focus-visible, .wordmark:focus-visible { outline: var(--focus-ring); outline-offset: 4px; border-radius: 4px; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.label-short { display: none; }
@media (max-width: 480px) {
  .label-long { display: none; }
  .label-short { display: inline; }
}
/* Bouton sombre arrondi : navigation et appel principal de l'accroche */
.fa-btn-dark { background: var(--action); color: var(--on-action); border-radius: var(--radius-full); box-shadow: 0 12px 28px -14px rgba(14, 17, 22, .55), var(--btn-sheen); }
.fa-btn-dark:hover { background: var(--action-hover); }
.nav .fa-btn-dark { min-height: 44px; padding: 0 20px; }
.fa-btn-lg { min-height: 56px; padding: 0 30px; font-size: 16px; }

/* ==========================================================================
   7. Accroche : réseau 3D (assets/hero3d.js), voile central, brume en bas
   ========================================================================== */
.hero {
  --nav-offset: 72px;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: min(100svh, 960px);
  margin-top: calc(-1 * var(--nav-offset));
  padding: calc(var(--nav-offset) + clamp(40px, 8vh, 96px)) 0 clamp(110px, 16vh, 180px);
  text-align: center;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 50% 42%, color-mix(in srgb, var(--braise) 7%, transparent), transparent 72%),
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--surface-raised) 85%, transparent), transparent 70%),
    var(--surface);
}
/* Repli statique (mouvement réduit, pas de WebGL, ou avant le chargement de la 3D) : semis de points */
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1.2px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 45%, transparent 18%, #000 52%, transparent 82%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 45%, transparent 18%, #000 52%, transparent 82%);
  transition: opacity 1s var(--ease-out);
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.hero.is-3d .hero-canvas { opacity: 1; }
.hero.is-3d .hero-bg::before { opacity: 0; }
/* Voile derrière le texte, pour garder un contraste AA au-dessus du réseau */
.hero-veil { position: absolute; inset: 0; background: radial-gradient(44% 40% at 50% 47%, color-mix(in srgb, var(--surface) 90%, transparent) 0%, color-mix(in srgb, var(--surface) 60%, transparent) 55%, transparent 100%); }
/* Brume en bas : transition douce vers la section suivante */
.hero-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(to top, var(--surface) 6%, color-mix(in srgb, var(--surface) 72%, transparent) 42%, transparent); }

.hero-inner { display: grid; justify-items: center; gap: var(--space-6); max-width: 1060px; }
.hero-title { margin: 0; font: 500 clamp(42px, 3.7vw + 17px, 72px)/1.04 var(--font-sans); letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
.hero-title span { display: block; color: var(--ink-muted); }
.hero-lead { margin: 0; max-width: 60ch; font-size: clamp(17px, .35vw + 15.5px, 19px); line-height: 1.65; color: var(--ink-muted); }
.hero-lead strong { font-weight: 600; color: var(--ink); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-8); margin-top: var(--space-2); }
/* Bouton du quiz : même forme de pilule que l'appel principal, en contour */
.hero-ctas .fa-btn-secondary { border-radius: var(--radius-full); }
.hero-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-target); font: 500 16px/1 var(--font-sans); color: var(--ink); text-decoration: none; }
.hero-link:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (hover: hover) { .hero-link:hover .fa-btn-arrow { transform: translateX(3px); } }
@media (max-width: 480px) { .hero-ctas .fa-btn { width: 100%; } }
.hero-stack { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.hero-stack li {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3);
  border: var(--border-width) solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-raised) 60%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 450 14px/1 var(--font-sans); color: var(--ink-muted);
}
.hero-stack .icon { width: 15px; height: 15px; color: var(--braise-ink); }

/* Pastille vitrée : accroche et portfolio */
.glass-pill {
  margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 34px; padding: 0 14px;
  border: var(--border-width) solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-raised) 62%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
@media (max-width: 480px) { .hide-sm { display: none; } }
.glass-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--braise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--braise) 25%, transparent), 0 0 12px var(--braise); }

/* ==========================================================================
   7 bis. Engagements et outils : badges en pilules, logos qui défilent
   La bande remonte dans la brume de l'accroche. Sans JavaScript ou avec mouvement réduit :
   logos à plat, centrés sur plusieurs lignes. assets/fx.js recopie la liste et pose .is-moving.
   ========================================================================== */
.trust { position: relative; z-index: 1; margin-top: calc(-1 * clamp(64px, 9vh, 110px)); padding-bottom: var(--space-12); overflow-x: clip; }
/* Badges en ligne, icône à gauche, sans puces */
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-3); margin: 0; padding: 0; list-style: none; }
.trust-badge {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4);
  border: var(--border-width) solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 12px 30px -20px rgba(14, 17, 22, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
  font: 500 14px/1 var(--font-sans); color: var(--ink); white-space: nowrap;
}
@media (prefers-color-scheme: dark) { .trust-badge { box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); } }
.trust-badge .icon { width: 16px; height: 16px; color: var(--braise-ink); }
@media (max-width: 480px) { .trust-badge { min-height: 36px; padding: 0 var(--space-3); font-size: 13px; } }

/* Bande « Outils que je maîtrise » : environ 100 px de haut. Marquee CSS pur, sans JavaScript :
   la piste contient deux moitiés identiques et glisse d'une moitié en 35 s. Chaque logo porte sa propre marge
   à droite (pas de gap), pour que les deux moitiés aient exactement la même largeur. */
.logo-band { display: grid; gap: 14px; margin-top: var(--space-10); }
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
.logo-track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: logo-scroll 35s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }
/* Logo à 50 % et en gris, couleur de la marque au survol. Le nom reste lisible (contraste AA), en gris. */
.logo-item { display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 48px 0 0; padding: 0; white-space: nowrap; color: var(--ink-muted); transition: color .3s var(--ease-out); }
.logo-item:hover { color: var(--ink); }
.logo-mark { display: block; flex: none; width: auto; height: 24px; aspect-ratio: 1; fill: var(--brand, currentColor); opacity: .5; filter: grayscale(1); transition: opacity .3s var(--ease-out), filter .3s var(--ease-out); }
.logo-item:hover .logo-mark { opacity: 1; filter: none; }
.logo-item span { font: 500 13px/1 var(--font-sans); }
@media (max-width: 639px) {
  .logo-item { margin-right: 32px; }
  .logo-mark { height: 20px; }
}
/* Mouvement réduit : logos à plat, centrés, sans les copies */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-track { width: auto; flex-wrap: wrap; justify-content: center; gap: 8px 32px; animation: none; }
  .logo-item { margin: 0; }
  .logo-item[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   8. Cartes
   ========================================================================== */
.fa-card {
  container-type: inline-size;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-sheen), var(--surface-raised);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease-out);
}
/* Bordure qui s'éclaire près du curseur (position posée par assets/fx.js) */
.fa-card::after {
  content: ""; position: absolute; inset: -1px; z-index: 1; padding: 1px;
  border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), var(--braise-line), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (hover: hover) {
  .fa-card:hover { border-color: var(--border-strong); }
  .fa-card:hover::after { opacity: 1; }
}
.fa-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 24px; }
.icon-tile { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--ink); }

/* ==========================================================================
   9. Services : grille de 2 colonnes égales (1 sur mobile), cartes de même hauteur
   ========================================================================== */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 800px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } }
.svc { gap: var(--space-3); min-width: 0; }
.svc-top { display: flex; align-items: center; gap: var(--space-3); }
.svc-label { margin: var(--space-1) 0 0; font: 500 var(--text-xs)/1.3 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--braise-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc .fa-h3 { text-wrap: balance; }
/* Deux blocs côte à côte en bas de la carte (l'un sous l'autre sur une carte étroite) */
.svc-rows { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: auto; padding-top: var(--space-2); }
@container (min-width: 420px) { .svc-rows { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.svc-row { margin: 0; display: grid; align-content: start; gap: var(--space-1); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border); }
.svc-row dt { font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.svc-row dd { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--ink); }
/* Bandeau du compteur d'heures, sous la grille */
.svc-quiz {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6);
  margin-top: var(--space-4); padding: var(--space-5) var(--space-6);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised);
}
.svc-quiz-text { flex: 1 1 320px; display: grid; gap: var(--space-1); min-width: 0; }
.svc-quiz-title { margin: 0; font: 500 var(--text-lg)/1.35 var(--font-sans); color: var(--ink); }
@media (max-width: 480px) { .svc-quiz .fa-btn { width: 100%; } }

/* ==========================================================================
   9 bis. Réalisations : une ligne de cartes en arc concave léger (assets/portfolio.js)
   Par défaut (sans JavaScript, mouvement réduit) : rangée statique qu'on fait défiler à la main.
   Avec JavaScript (.is-live) : le script place chaque carte (translate, rotateY, échelle, fondu aux bords).
   ========================================================================== */
.rz-section { overflow-x: clip; }
.rz {
  position: relative; overflow: hidden;
  padding: var(--space-5) 0 var(--space-5);
  border: var(--border-width) solid color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 24px;
  background: color-mix(in srgb, var(--surface-raised) 60%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -44px rgba(14, 17, 22, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
}
@media (prefers-color-scheme: dark) { .rz { box-shadow: 0 24px 60px -44px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05); } }
.rz-strip { position: relative; outline: none; }
.rz-strip:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); border-radius: 16px; }
.rz-track { display: flex; gap: 16px; }
/* Rangée statique */
.rz.is-static .rz-strip, .rz:not(.is-live) .rz-strip { overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--space-2) var(--space-6) var(--space-4); }
.rz.is-static .rz-card, .rz:not(.is-live) .rz-card { flex: none; scroll-snap-align: center; }
/* Rangée animée en arc : perspective sur la bande, cartes superposées au même endroit puis placées par le script */
.rz.is-live .rz-strip {
  height: 330px; overflow: hidden; perspective: 1500px; perspective-origin: 50% 45%;
  cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.rz.is-live .rz-strip.is-dragging { cursor: grabbing; }
.rz.is-live .rz-track { position: absolute; left: 50%; top: 22px; width: 0; height: 0; display: block; transform-style: preserve-3d; }
.rz.is-live .rz-card { position: absolute; left: 0; top: 0; will-change: transform, opacity; }

/* Carte : mini-maquette, puis badge, titre et secteur */
.rz-card {
  width: 220px; height: 280px;
  display: flex; flex-direction: column; gap: 12px; padding: 12px;
  border: var(--border-width) solid color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 16px;
  background: var(--surface-raised); color: var(--ink);
  box-shadow: 0 1px 2px rgba(14, 17, 22, .05), 0 18px 36px -20px rgba(14, 17, 22, .3);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.rz-card:hover { border-color: color-mix(in srgb, var(--braise) 45%, transparent); box-shadow: 0 1px 2px rgba(14, 17, 22, .05), 0 22px 44px -20px rgba(14, 17, 22, .38); }
.rz-card:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.rz-mock { display: flex; flex-direction: column; flex: 0 0 132px; overflow: hidden; border: var(--border-width) solid var(--border); border-radius: 10px; background: var(--surface-inset); }
.rz-bar { display: flex; align-items: center; gap: 4px; flex: none; height: 18px; padding: 0 8px; border-bottom: var(--border-width) solid var(--border); background: var(--surface-raised); }
.rz-bar i { width: 6px; height: 6px; border-radius: 50%; }
.rz-bar i:nth-child(1) { background: #FF5F57; }
.rz-bar i:nth-child(2) { background: #FEBC2E; }
.rz-bar i:nth-child(3) { background: #28C840; }
.rz-mock-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 7px; min-height: 0; padding: 10px; }
.rz-mock-body i, .rz-mock-body span { display: block; }
.rz-line { height: 6px; width: var(--w, 60%); border-radius: 3px; background: var(--border-strong); }
.rz-row { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 6px; border: var(--border-width) solid var(--border); border-radius: 6px; background: var(--surface-raised); }
.rz-pill { flex: none; width: 22px; height: 8px; border-radius: 99px; background: var(--border); }
.rz-pill.is-ok { background: color-mix(in srgb, var(--success) 50%, var(--surface-raised)); }
.rz-pill.is-accent { background: color-mix(in srgb, var(--braise) 55%, var(--surface-raised)); }
.rz-steps { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.rz-steps i { height: 3px; border-radius: 2px; background: var(--border-strong); }
.rz-steps .is-ok { background: var(--success); }
.rz-steps .is-accent { background: var(--braise); }
.rz-flow { display: flex !important; align-items: center; justify-content: center; }
.rz-node { flex: none; width: 24px; height: 24px; border: 1.5px solid var(--border-control); border-radius: 7px; background: var(--surface-raised); }
.rz-node.is-wide { width: 44px; }
.rz-node.is-accent { border-color: var(--braise); background: var(--braise-soft); }
.rz-node.is-ok { border-color: var(--success); }
.rz-link { flex: none; width: 14px; height: 1.5px; background: var(--border-control); }
.rz-subs { display: flex !important; justify-content: center; gap: 8px; }
.rz-subs i { width: 12px; height: 12px; border: 1.5px dashed var(--border-control); border-radius: 50%; }
.rz-cols { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 100%; }
.rz-cols > span { display: flex !important; flex-direction: column; gap: 5px; padding: 5px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.rz-cols i { height: 18px; border: var(--border-width) solid var(--border); border-radius: 4px; background: var(--surface-raised); }
.rz-cols i.is-accent { border-color: var(--braise-line); background: var(--braise-soft); }
.rz-bubble { height: 16px; width: var(--w, 60%); border: var(--border-width) solid var(--border); border-radius: 8px 8px 8px 3px; background: var(--surface-raised); }
.rz-bubble.is-me { align-self: flex-end; border-color: transparent; border-radius: 8px 8px 3px 8px; background: var(--braise-soft); }
.rz-kpis { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.rz-kpis i { height: 18px; border: var(--border-width) solid var(--border); border-radius: 5px; background: var(--surface-raised); }
.rz-kpis .is-accent { border-color: var(--braise-line); }
.rz-chart { display: flex !important; align-items: flex-end; gap: 4px; height: 44px; }
.rz-chart i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: linear-gradient(var(--braise), color-mix(in srgb, var(--braise) 30%, var(--surface-raised))); opacity: .8; }
.rz-m-app { align-items: center; }
.rz-phone { display: flex !important; flex-direction: column; gap: 6px; width: 64px; height: 100%; padding: 12px 8px 8px; border: 2px solid var(--ink); border-radius: 12px; background: var(--surface-raised); }
.rz-phone .rz-line { height: 4px; }
.rz-phone-btn { margin-top: auto; height: 10px; border-radius: 3px; background: var(--braise); }
.rz-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.rz-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: var(--border-width) solid var(--border); border-radius: var(--radius-full); background: var(--surface-sunken); font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.rz-badge.is-real { border-color: transparent; background: var(--braise-soft); color: var(--braise-ink); }
.rz-card-title { display: block; font: 600 16px/1.25 var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.rz-card-sector { display: block; font: 400 13px/1.3 var(--font-sans); color: var(--ink-muted); }
@media (max-width: 699px) {
  .rz.is-live .rz-strip { height: 250px; }
  .rz.is-live .rz-track { top: 18px; }
  .rz-card { width: 160px; height: 210px; gap: 8px; padding: 9px; border-radius: 14px; }
  .rz-mock { flex-basis: 96px; border-radius: 8px; }
  .rz-bar { height: 14px; padding: 0 6px; }
  .rz-bar i { width: 5px; height: 5px; }
  .rz-mock-body { gap: 5px; padding: 7px; }
  .rz-row { padding: 3px 5px; }
  .rz-node { width: 18px; height: 18px; }
  .rz-node.is-wide { width: 32px; }
  .rz-link { width: 9px; }
  .rz-cols i, .rz-kpis i { height: 12px; }
  .rz-chart { height: 28px; }
  .rz-bubble { height: 12px; }
  .rz-phone { width: 48px; padding: 8px 6px 6px; border-radius: 10px; }
  .rz-card-text { gap: 4px; }
  .rz-badge { height: 20px; padding: 0 7px; font-size: 10px; }
  .rz-card-title { font-size: 14px; }
  .rz-card-sector { font-size: 12px; }
}

/* Flèches rondes discrètes sous la ligne */
.rz-controls { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
.rz-arrow {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: var(--border-width) solid var(--border-strong); border-radius: 50%;
  background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-xs); cursor: pointer;
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.rz-arrow:hover { border-color: var(--border-control); }
.rz-arrow:active { transform: scale(.95); }
.rz-arrow .icon { width: 18px; height: 18px; }
.rz-noscript { margin: 0; padding: 0 var(--space-6); text-align: center; color: var(--ink-muted); }

/* Fenêtre de détail (<dialog>) : cachée par défaut, fond flou, fermeture par ×, Échap ou clic à côté */
.rz-modal {
  width: min(660px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 0; overflow: auto;
  border: var(--border-width) solid var(--border); border-radius: 20px;
  background: var(--surface-raised); color: var(--ink);
  box-shadow: 0 40px 100px -30px rgba(14, 17, 22, .55);
}
.rz-modal::backdrop { background: rgba(14, 17, 22, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rz-modal[open] { animation: rz-pop .28s var(--ease-out); }
@keyframes rz-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.rz-close-form { position: absolute; top: 14px; right: 14px; margin: 0; }
.rz-close { display: grid; place-items: center; width: 40px; height: 40px; border: var(--border-width) solid var(--border); border-radius: 50%; background: var(--surface-raised); font: 400 24px/1 var(--font-sans); color: var(--ink); cursor: pointer; }
.rz-close:hover { border-color: var(--border-control); }
.rz-modal-body { display: grid; gap: var(--space-5); padding: var(--space-8); }
@media (max-width: 559px) { .rz-modal-body { padding: var(--space-6) var(--space-5); } }
.rz-modal-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-right: 52px; }
.rz-modal-sector { font: 500 var(--text-xs)/1.3 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--braise-ink); }
.rz-modal-title { margin: 0; font: 600 clamp(22px, 1.2vw + 16px, 28px)/1.2 var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.rz-facts { margin: 0; display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .rz-facts { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); } .rz-fact:first-child, .rz-fact.is-result { grid-column: 1 / -1; } }
.rz-fact { display: grid; align-content: start; gap: var(--space-1); padding-top: var(--space-4); border-top: var(--border-width) solid var(--border); }
.rz-fact dt { font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.rz-fact dd { margin: 0; font-size: var(--text-base); line-height: 1.55; color: var(--ink); }
.rz-fact.is-result { padding: var(--space-3) var(--space-4); border-top: 0; border-left: 3px solid var(--braise); border-radius: 0 10px 10px 0; background: var(--surface-inset); }
.rz-fact.is-result dd { font-weight: 600; }
.rz-modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ==========================================================================
   10. Qui je suis
   Sans photo : titre à gauche, texte à droite. Avec la figure .about-photo : photo à gauche.
   ========================================================================== */
.about { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .about:has(> .about-photo) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); } }
.about-photo { position: relative; margin: 0; max-width: 380px; padding: 6px; border: var(--border-width) solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-lift); }
@media (min-width: 900px) { .about-photo { max-width: none; } }
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--radius-xl) - 6px); background: var(--surface-sunken); filter: saturate(.85) contrast(1.03); }
.about-body { display: grid; gap: var(--space-4); max-width: 760px; }
.about-body .fa-sh { margin-bottom: var(--space-4); }
@media (min-width: 900px) {
  .about:not(:has(> .about-photo)) .about-body { max-width: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-16); align-items: start; }
  .about:not(:has(> .about-photo)) .about-body > .fa-sh { grid-row: 1 / span 3; margin-bottom: 0; }
  .about:not(:has(> .about-photo)) .about-body > :not(.fa-sh) { grid-column: 2; }
}
.about-text { margin: 0; font-size: var(--text-md); line-height: 1.65; color: var(--ink); max-width: var(--measure); }
.about-meta { margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); padding-top: var(--space-4); border-top: var(--border-width) solid var(--border); }
.about-meta .fa-meta { color: var(--ink-muted); }
.about-link { display: inline-flex; align-items: center; min-height: var(--tap-target); font: 500 15px/1.3 var(--font-sans); color: var(--braise-ink); text-underline-offset: 3px; }
/* Mes expertises : liste courte sous la présentation */
.expertise { display: grid; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-5) var(--space-6); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--card-sheen), var(--surface-raised); box-shadow: var(--shadow-xs); max-width: var(--measure); }
.expertise-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.expertise-list li { position: relative; padding-left: 24px; font-size: var(--text-base); line-height: 1.5; color: var(--ink-muted); }
.expertise-list li::before { content: "→"; position: absolute; left: 0; top: 0; font-family: var(--font-mono); color: var(--braise-ink); }
.expertise-list b { font-weight: 600; color: var(--ink); }

/* ==========================================================================
   11. Méthode : flux en 4 étapes
   ========================================================================== */
.method .fa-sh { margin-bottom: var(--space-12); }
.method .steps { margin: 0; padding: 0; display: grid; gap: var(--space-4); isolation: isolate; }
@media (min-width: 1024px) { .method .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.method .fa-step {
  position: relative; list-style: none;
  display: grid; grid-template-columns: 32px 1fr; column-gap: var(--space-4); align-items: start; align-content: start;
  padding: var(--space-6);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  background: var(--card-sheen), var(--surface-raised); box-shadow: var(--shadow-xs);
}
@media (min-width: 1024px) { .method .fa-step { grid-template-columns: 1fr; row-gap: var(--space-5); } }
/* Liaison entre les étapes : verticale sur mobile, horizontale sur desktop */
.method .fa-step::before { content: ""; position: absolute; z-index: -1; left: calc(var(--space-6) + 15.5px); top: calc(var(--space-6) + 40px); bottom: calc(-1 * var(--space-4) - 1px); width: 1px; background: var(--border-strong); }
.method .fa-step:first-child::before { background: linear-gradient(var(--braise), var(--border-strong)); }
.method .fa-step-last::before { display: none; }
@media (min-width: 1024px) {
  .method .fa-step::before { left: calc(var(--space-6) + 40px); right: calc(-1 * var(--space-4) - 1px); top: calc(var(--space-6) + 15.5px); bottom: auto; width: auto; height: 1px; }
  .method .fa-step:first-child::before { background: linear-gradient(90deg, var(--braise), var(--border-strong)); }
}
.method .fa-step-dot { width: 32px; height: 32px; }
.method .fa-step-body { gap: var(--space-2); }

/* Timeline verticale de base (feuille de route du quiz) */
.steps { margin: 0; padding: 0; }
.fa-step { list-style: none; position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-4); padding-bottom: var(--space-8); }
.fa-step::before { content: ""; position: absolute; left: 13.5px; top: 32px; bottom: 4px; width: 1px; background: var(--border); }
.fa-step-last { padding-bottom: 0; }
.fa-step-last::before { display: none; }
.fa-step-dot { width: 28px; height: 28px; border-radius: var(--radius-full); border: var(--border-width) solid var(--border-control); background: var(--surface-raised); display: grid; place-items: center; font: 500 var(--text-xs)/1 var(--font-mono); color: var(--ink-muted); }
.fa-step:first-child .fa-step-dot { background: var(--braise); border-color: var(--braise); color: var(--on-braise); }
.fa-step-body { display: grid; gap: var(--space-1); padding-top: 2px; }
.fa-step-body .fa-card-text { margin-top: var(--space-1); }

/* Liens dans les notes et formulaires */
.source a, .price-note a, .form-privacy a, .form-status a, .legal-block a, .legal-mail { color: var(--braise-ink); text-underline-offset: 3px; }
.price-note { margin: var(--space-6) 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); }
.price-note + .price-note { margin-top: var(--space-2); }

/* ==========================================================================
   13. Offres
   ========================================================================== */
.block-head { display: grid; gap: var(--space-2); max-width: var(--measure); margin-bottom: var(--space-6); }

/* « Pourquoi moi » en questions-réponses : question à gauche, réponse à droite sur grand écran */
.why-list { margin: 0; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-xs); overflow: hidden; }
.why-item { display: grid; gap: var(--space-2); padding: var(--space-6); }
.why-item + .why-item { border-top: var(--border-width) solid var(--border); }
@media (min-width: 900px) { .why-item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); padding: var(--space-6) var(--space-8); } }
.why-item dt { display: flex; align-items: baseline; gap: var(--space-3); font: 500 var(--text-lg)/var(--leading-snug) var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.why-item dt .fa-index { color: var(--braise-ink); }
.why-item dd { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink-muted); max-width: var(--measure); }
.why-list + .grid-price { margin-top: var(--space-12); }

/* Comparatif « Pourquoi moi » en cartes */
.fa-compare { background: var(--surface-sunken); box-shadow: none; }
.fa-compare-mark { margin-left: auto; font: 500 var(--text-sm)/1 var(--font-mono); color: var(--ink-muted); }
.fa-compare-chosen { background: var(--card-sheen), var(--surface-raised); border-color: var(--braise-line); box-shadow: var(--shadow-lift); }
.fa-compare-chosen .fa-compare-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--braise-soft); color: var(--braise-ink); }
.fa-compare-chosen .fa-card-text { color: var(--ink); }

/* Cartes de prix */
.grid-price { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .grid-price { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-price { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fa-price { gap: var(--space-4); }
.fa-price .fa-card-top { justify-content: space-between; }
.fa-price-featured { border-color: var(--braise); box-shadow: 0 0 0 1px var(--braise), var(--shadow-lift); }
@media (hover: hover) { .fa-price-featured:hover { border-color: var(--braise); } }
.fa-price-amount { margin: 0; font: 500 var(--text-xl)/1.25 var(--font-mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.fa-price-from { display: block; margin-bottom: var(--space-1); font: 400 var(--text-sm)/1.4 var(--font-sans); letter-spacing: 0; color: var(--ink-muted); }
.fa-price-unit { margin-left: 2px; font: 400 var(--text-base)/1 var(--font-sans); letter-spacing: 0; color: var(--ink-muted); }
.fa-price-tax { display: inline-block; margin-left: var(--space-2); padding: 3px 6px; border: var(--border-width) solid var(--border); border-radius: var(--radius-xs); font: 500 var(--text-2xs)/1 var(--font-mono); letter-spacing: .08em; color: var(--ink-muted); vertical-align: 4px; white-space: nowrap; }
.fa-price-basis { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); }
.fa-price-list { margin: 0; padding: var(--space-4) 0 0; border-top: var(--border-width) solid var(--border); list-style: none; display: grid; gap: var(--space-2); font-size: var(--text-base); line-height: 1.45; color: var(--ink); }
.fa-price-list li { position: relative; padding-left: 24px; }
.fa-price-list li::before { content: "→"; position: absolute; left: 0; top: 0; font-family: var(--font-mono); color: var(--braise-ink); }
/* Suivi mensuel : carte large sous les trois offres de projet */
@media (min-width: 720px) {
  .fa-price-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--space-12); align-content: start; }
  .fa-price-wide > * { grid-column: 1; }
  .fa-price-wide > .fa-card-text { grid-column: 2; grid-row: 1 / span 2; }
  .fa-price-wide > .fa-price-list { grid-column: 2; grid-row: 3 / span 2; align-self: start; }
}
.after-cta { margin-top: var(--space-12); }

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.faq { max-width: 860px; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-xs); overflow: hidden; }
.fa-faq + .fa-faq { border-top: var(--border-width) solid var(--border); }
.fa-faq-q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: var(--tap-target); padding: var(--space-5) var(--space-6); font: 500 var(--text-md)/1.45 var(--font-sans); letter-spacing: -0.01em; color: var(--ink); transition: background-color var(--dur-fast); }
.fa-faq-q::-webkit-details-marker { display: none; }
@media (hover: hover) { .fa-faq-q:hover { background: var(--surface-inset); } }
.fa-faq-q:focus-visible { outline: var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-lg); }
.fa-faq-icon { flex: none; position: relative; width: 24px; height: 24px; border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-xs); }
.fa-faq-icon::before, .fa-faq-icon::after { content: ""; position: absolute; left: 6px; top: 10.5px; width: 10px; height: 1.5px; background: var(--ink); transition: transform var(--dur-fast) var(--ease-out); }
.fa-faq-icon::after { transform: rotate(90deg); }
.fa-faq[open] .fa-faq-icon::after { transform: rotate(0); }
.fa-faq-a { padding: 0 var(--space-6) var(--space-6); font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink-muted); max-width: calc(var(--measure) + 48px); }
.fa-faq-a p { margin: 0; }

/* ==========================================================================
   15. Contact et formulaires
   ========================================================================== */
.contact { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.rdv-card { gap: var(--space-4); }
.rdv-card .tel { color: var(--ink); font-weight: 500; }
.tel { white-space: nowrap; }
.form-grid { display: grid; gap: var(--space-4); }
#devis { padding: var(--space-6); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-xs); }
@media (min-width: 768px) { #devis { padding: var(--space-8); } }
.form-row { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.fa-field { display: grid; gap: var(--space-2); }
.fa-label { font: 500 15px/1.35 var(--font-sans); color: var(--ink); }
.fa-req { font-weight: 400; color: var(--ink-muted); }
.fa-input { width: 100%; min-height: var(--field-height); padding: 11px var(--space-4); border: var(--border-width) solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: 400 var(--text-base)/1.5 var(--font-sans); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.fa-input:hover { border-color: var(--ink-muted); }
.fa-input:focus-visible { outline: none; border-color: var(--braise); box-shadow: 0 0 0 3px color-mix(in srgb, var(--braise) 25%, transparent); }
textarea.fa-input { min-height: 120px; resize: vertical; }
.fa-hint { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); }
.honeypot { position: absolute; left: -9999px; }
.form-status { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); }
.form-status p { margin: 0; }
.form-status-title { font-weight: 600; }
.form-status-icon { font: 500 var(--text-base)/1.6 var(--font-mono); }
.form-status-success .form-status-icon { color: var(--success); }
.form-status-error .form-status-icon { color: var(--danger); }

/* ==========================================================================
   16. Pied de page (bande Nuit)
   ========================================================================== */
.footer { padding-block: var(--space-12); border-top: var(--border-width) solid var(--border); }
.footer-inner { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .footer-inner { grid-template-columns: 1fr auto; align-items: end; } }
.footer-tag { margin: var(--space-2) 0 0; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.5; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-muted); text-decoration: none; font-size: 15px; transition: color var(--dur-fast); }
.footer-links a:hover { color: var(--ink); }
.footer-links a:focus-visible, .footer .wordmark:focus-visible { outline: var(--focus-ring); outline-offset: 4px; border-radius: 4px; }
.footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); margin: 0; padding-top: var(--space-6); border-top: var(--border-width) solid var(--border); font: 400 var(--text-xs)/1.5 var(--font-mono); color: var(--ink-muted); }
.footer-legal a { color: inherit; text-underline-offset: 3px; transition: color var(--dur-fast); }
.footer-legal a:hover { color: var(--ink); }
.footer-legal a:focus-visible { outline: var(--focus-ring); outline-offset: 4px; border-radius: 4px; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.footer-legal .footer-cookies { min-height: 0; padding: 0; font: inherit; color: inherit; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-target); height: var(--tap-target); margin: -12px 0; border: var(--border-width) solid var(--border); border-radius: var(--radius-md); }
.social-icon { display: block; }

/* ==========================================================================
   17. Barre de réservation mobile et zones tactiles
   ========================================================================== */
.cta-mobile { display: none; }
@media (max-width: 639px) {
  /* Sur mobile, la barre du bas remplace le bouton de la navigation pour ne pas doubler l'appel */
  .js-cta .nav-cta { display: none; }
  .js-cta .cta-mobile { display: block; position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); z-index: 20; transform: translateY(calc(100% + var(--space-3) + env(safe-area-inset-bottom, 0px))); visibility: hidden; transition: transform .3s var(--ease-out), visibility 0s linear .3s; }
  .js-cta .cta-mobile.is-visible { transform: none; visibility: visible; transition: transform .3s var(--ease-out); }
  .cta-mobile .fa-btn { min-height: var(--field-height); box-shadow: var(--btn-sheen), 0 12px 28px -12px rgba(14, 17, 22, .45); }
  .fa-btn-sm { min-height: var(--tap-target); }
  .wordmark { display: inline-block; padding-block: 14px; margin-block: -14px; }
  .footer-links { row-gap: 0; }
  .footer-links a, .footer-legal a, .footer-legal .footer-cookies { display: inline-flex; align-items: center; min-height: var(--tap-target); min-width: var(--tap-target); }
  .footer-links .social-link { margin-block: 0; }
  .price-note a, .form-privacy a, .rdv-card .tel, .legal-facts a { display: inline-block; padding-block: 12px; margin-block: -8px; }
}

/* ==========================================================================
   18. Quiz
   ========================================================================== */
.quiz-page { max-width: 760px; margin: 0 auto; padding: var(--space-12) var(--space-4) var(--space-24); }
.quiz-intro { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
.quiz-card { background: var(--card-sheen), var(--surface-raised); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xs); }
@media (min-width: 640px) { .quiz-card { padding: var(--space-8); } }
.quiz-progress { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.quiz-bar { height: 6px; background: var(--surface-sunken); border-radius: var(--radius-full); overflow: hidden; }
.quiz-bar-fill { height: 100%; width: 0; background: var(--braise); border-radius: var(--radius-full); transition: width var(--dur) var(--ease-out); }
.quiz-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.quiz-question { margin: 0 0 var(--space-6); padding: 0; font: 600 26px/1.25 var(--font-sans); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.quiz-question:focus { outline: none; }
.quiz-options { display: grid; gap: var(--space-3); }
.quiz-option { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--field-height); padding: 12px var(--space-4); border: var(--border-width) solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-raised); cursor: pointer; font-size: var(--text-base); line-height: 1.5; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
@media (hover: hover) { .quiz-option:hover { border-color: var(--braise); background: var(--surface-inset); } }
.quiz-option input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--braise); }
.quiz-option input:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.quiz-option:has(input:checked) { border-color: var(--braise); background: var(--braise-soft); }
.quiz-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8); }
.quiz-error { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: 500; color: var(--danger); }
.quiz-result { display: grid; gap: var(--space-6); }
.quiz-result-head { display: grid; gap: var(--space-2); }
.quiz-result-title { margin: 0; font: 600 34px/1.18 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--ink); text-wrap: balance; }
.quiz-result-price { margin: 0; font: 500 var(--text-xl)/1.25 var(--font-mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.quiz-block { display: grid; gap: var(--space-3); padding-top: var(--space-6); border-top: var(--border-width) solid var(--border); }
.quiz-block .fa-price-list { padding-top: 0; border-top: 0; }
.quiz-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-6); border-top: var(--border-width) solid var(--border); }
@media (max-width: 480px) { .quiz-actions .fa-btn, .quiz-nav .fa-btn { flex: 1 1 100%; } .quiz-nav { flex-direction: column-reverse; } }
.quiz-note { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); }
.quiz-note a, .quiz-block a { color: var(--braise-ink); text-underline-offset: 3px; }

.quiz-versions { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .quiz-versions { grid-template-columns: repeat(3, 1fr); } }
.quiz-version { width: 100%; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; overflow: visible; }
.quiz-version:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.quiz-version-badge { position: absolute; top: -12px; right: var(--space-4); background: var(--action); color: var(--on-action); }
.quiz-version-nom { display: block; font-size: var(--text-xl); line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
.quiz-version .fa-card-text { display: block; color: var(--ink); }
.quiz-version-detail { display: block; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); }
.quiz-version-featured { border-color: var(--braise); box-shadow: 0 0 0 1px var(--braise), var(--shadow-lift); }
@media (hover: hover) { .quiz-version-featured:hover { border-color: var(--braise); } }
.quiz-version-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--space-2); font-weight: 500; color: var(--braise-ink); }
@media (hover: hover) { .quiz-version:hover .fa-btn-arrow { transform: translateX(3px); } }

.quiz-progress-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); }
.quiz-link { padding: 0; border: 0; background: none; font: 500 var(--text-sm)/1.4 var(--font-sans); color: var(--braise-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.quiz-link:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
.quiz-temps { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); }
.quiz-aide { margin: calc(var(--space-4) * -1) 0 var(--space-4); font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.quiz-grid { display: grid; gap: var(--space-4); }
.quiz-grid-row { display: grid; gap: var(--space-2); }
@media (min-width: 600px) { .quiz-grid-row { grid-template-columns: 1fr 210px; align-items: center; gap: var(--space-4); } }
.quiz-grid-row label { font-size: var(--text-base); line-height: 1.5; color: var(--ink); }
.quiz-textarea { min-height: 120px; resize: vertical; }

.quiz-result-title:focus { outline: none; }
/* Le temps récupérable, en tête du résultat */
.quiz-result-hours { display: grid; gap: var(--space-2); padding: var(--space-6); border: var(--border-width) solid var(--braise-line); border-radius: var(--radius-lg); background: var(--braise-soft); }
.quiz-result-hours-num { margin: 0; font: 500 40px/1.1 var(--font-mono); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); text-wrap: balance; }
.quiz-result-hours-num:focus { outline: none; }
.quiz-result-hours .fa-card-text { color: var(--ink); }
@media (max-width: 640px) { .quiz-result-hours-num { font-size: 32px; } }
.quiz-result-kicker { margin: 0 0 var(--space-2); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); }
.quiz-niveau { margin: 0; }
.quiz-priorites { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.quiz-prio { display: grid; gap: var(--space-2); padding: var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); background: var(--surface-inset); }
.quiz-prio:first-child { background: var(--braise-soft); border-color: var(--braise-line); }
.quiz-prio-titre { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 500; color: var(--ink); }
.quiz-prio-gain { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.quiz-prio .fa-price-list { padding-top: 0; border-top: 0; font-size: 15px; }
.quiz-table-wrap { overflow-x: auto; }
.quiz-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.quiz-table th, .quiz-table td { padding: 10px 8px; border-bottom: var(--border-width) solid var(--border); text-align: left; vertical-align: top; color: var(--ink); }
.quiz-table th:first-child, .quiz-table td:first-child { padding-left: 0; }
.quiz-table th:last-child, .quiz-table td:last-child { padding-right: 0; }
.quiz-table th { font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.quiz-table .num { text-align: right; white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.quiz-table tfoot td { font-weight: 600; border-bottom: 0; }
@media (max-width: 560px) {
  .quiz-table thead { display: none; }
  .quiz-table, .quiz-table tbody, .quiz-table tfoot, .quiz-table tr, .quiz-table td { display: block; width: 100%; }
  .quiz-table tr { padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border); }
  .quiz-table tfoot tr { border-bottom: 0; }
  .quiz-table td { display: flex; justify-content: space-between; gap: var(--space-3); padding: 2px 0; border: 0; }
  .quiz-table td:first-child { justify-content: flex-start; font-weight: 500; }
  .quiz-table td:first-child::before { content: none; }
  .quiz-table td::before { content: attr(data-label); color: var(--ink-muted); font-weight: 400; text-align: left; }
}
.quiz-valeur { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink); }
.quiz-hypotheses { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); }
.quiz-score { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.quiz-score-num { margin: 0; font: 500 44px/1.1 var(--font-mono); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.quiz-score-num span { font-size: var(--text-lg); font-weight: 500; letter-spacing: 0; color: var(--ink-muted); }
.quiz-bars { margin: 0; display: grid; gap: var(--space-3); }
.quiz-bars > div { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-1) var(--space-3); align-items: center; font-size: 15px; line-height: 1.45; }
.quiz-bars dt { color: var(--ink); font-weight: 500; }
.quiz-bars dd { margin: 0; }
.quiz-bar-dim { height: 8px; background: var(--surface-sunken); border-radius: var(--radius-full); overflow: hidden; }
.quiz-bar-dim span { display: block; height: 100%; background: var(--braise); border-radius: var(--radius-full); }
.quiz-bar-val { grid-column: 2; font-size: var(--text-sm); line-height: 1.4; color: var(--ink-muted); }
.quiz-roadmap { margin-top: var(--space-2); }

/* ==========================================================================
   19. Mentions légales et page 404
   ========================================================================== */
.legal-page { max-width: 760px; margin: 0 auto; padding: var(--space-12) var(--space-4) var(--space-24); }
.legal-intro { display: grid; gap: var(--space-3); }
.legal-updated { margin: 0; font: 400 var(--text-xs)/1.5 var(--font-mono); color: var(--ink-muted); }
.legal-block { display: grid; gap: var(--space-4); margin-top: var(--space-12); padding-top: var(--space-12); border-top: var(--border-width) solid var(--border); }
.legal-block h2 { margin: 0; font: 600 30px/1.2 var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--ink); text-wrap: balance; }
.legal-block .fa-h3 { margin-top: var(--space-4); }
.legal-block p, .legal-block li { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink-muted); max-width: var(--measure); }
.legal-block strong { font-weight: 500; color: var(--ink); }
.legal-block ul { margin: 0; padding-left: 20px; display: grid; gap: var(--space-3); }
.legal-facts { margin: 0; display: grid; gap: var(--space-3); padding: var(--space-6); background: var(--surface-raised); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); }
.legal-facts div { display: grid; gap: 2px; }
@media (min-width: 560px) { .legal-facts div { grid-template-columns: 180px 1fr; gap: var(--space-4); } }
.legal-facts dt { padding-top: 5px; font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.legal-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* Grille discrète en haut des pages secondaires */
body:has(.quiz-page, .legal-page, .rdv-page, .secu-page) { position: relative; }
body:has(.quiz-page, .legal-page, .rdv-page, .secu-page)::before { content: ""; position: absolute; inset: 0 0 auto; height: 520px; z-index: -1; pointer-events: none; background-image: radial-gradient(520px 320px at 20% 0%, var(--halo), transparent 70%), linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size); background-position: 0 0, -1px -1px, -1px -1px; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); }

/* Grille qui s'éclaire sous le curseur : accroche de l'accueil et haut des pages secondaires.
   Couche ajoutée par assets/fx.js (souris uniquement), alignée sur la grille fixe. */
.fx-grid-lit {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .4s var(--ease-out);
  background-image:
    radial-gradient(180px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--braise) 8%, transparent), transparent 70%),
    linear-gradient(to right, var(--grid-glow) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-glow) 1px, transparent 1px);
  background-size: auto, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
  background-position: 0 0, -1px -1px, -1px -1px;
  -webkit-mask-image: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), #000, transparent 70%);
  mask-image: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), #000, transparent 70%);
}
.fx-grid-lit.is-on { opacity: 1; }
/* Pages secondaires : même hauteur et même fondu vers le bas que la grille fixe */
.fx-grid-lit-page {
  inset: 0 0 auto; height: 520px; z-index: -1;
  -webkit-mask-image: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), #000, transparent 70%), linear-gradient(to bottom, #000 30%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), #000, transparent 70%), linear-gradient(to bottom, #000 30%, transparent);
  mask-composite: intersect;
}

/* ==========================================================================
   20. Mouvement
   ========================================================================== */
/* Apparition douce au défilement (classes posées par assets/fx.js), une seule fois : fondu et léger glissement */
.fx-reveal { opacity: 0; translate: 0 22px; transition: opacity .6s var(--ease-out), translate .6s var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
.fx-reveal.fx-in { opacity: 1; translate: 0 0; }
/* Inclinaison sobre vers le curseur (--tx et --ty posées par assets/fx.js, souris seulement) */
.svc-grid, .grid-price, .method .steps, .contact, .about-body { perspective: 1400px; }
.fx-tilt { transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .6s var(--ease-out), border-color var(--dur) var(--ease-out); }
.fx-tilt.is-tilting { transition: transform .15s linear, border-color var(--dur) var(--ease-out); }
/* L'accroche s'affiche tout de suite (texte principal de la page) : seule la scène 3D arrive en fondu */
@keyframes fx-rise { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .fa-btn:active { transform: none; }
  .fx-reveal { opacity: 1; translate: none; }
  .fx-tilt { transform: none; }
}

/* ==========================================================================
   21. Impression (pré-diagnostic du quiz)
   ========================================================================== */
@media print {
  /* Toujours en thème clair, même si le visiteur est en mode sombre */
  :root { --surface: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: #EEF0F3; --surface-inset: #F9FAFB; --border: #E2E5EA; --border-strong: #CDD2DA; --border-control: #7A818D; --ink: #0E1116; --ink-muted: #5A6270; --braise: #C2410C; --on-braise: #FFFFFF; --braise-ink: #9A3412; --card-sheen: none; }
  .nav-wrap, .footer, .quiz-intro, .quiz-progress, .quiz-versions, .quiz-actions, .quiz-note { display: none !important; }
  body { background: #fff; }
  body::before, body::after, .fx-grid-lit { display: none !important; }
  .quiz-page { max-width: none; padding: 0; }
  .quiz-card { padding: 0; border: 0; }
  .quiz-block, .quiz-prio, .fa-step { break-inside: avoid; }
  .quiz-table td::before { content: none; }
  * { box-shadow: none !important; }
}

/* ==========================================================================
   22. Cookies (assets/cookies.js) : bannière et fenêtre de choix
   En veille tant qu'aucun outil n'est déclaré dans assets/cookies.js. Aperçu : ?cookies=apercu
   ========================================================================== */
.cookie-banner {
  position: fixed; z-index: 40;
  left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  display: grid; gap: var(--space-3); max-width: 560px; margin-inline: auto; padding: var(--space-5);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-window);
  animation: cookie-in .3s var(--ease-out);
}
@media (min-width: 900px) { .cookie-banner { left: var(--space-6); right: auto; bottom: var(--space-6); width: 440px; margin: 0; } }
@keyframes cookie-in { from { opacity: 0; transform: translateY(12px); } }
.cookie-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: 600 var(--text-md)/1.3 var(--font-sans); letter-spacing: -0.01em; }
.cookie-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.cookie-text a { color: var(--ink); text-underline-offset: 3px; }
/* Refuser et accepter : deux boutons identiques, côte à côte */
.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cookie-actions .fa-btn { flex: 1 1 0; min-height: var(--tap-target); }
.cookie-link { justify-self: start; min-height: var(--tap-target); padding: 0 2px; border: 0; background: none; font: 500 var(--text-sm)/1.2 var(--font-sans); color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookie-link:hover { color: var(--ink); }
.cookie-link-inline { min-height: 0; font: inherit; color: var(--ink); }
/* Sur mobile, la bannière prend la place de la barre de réservation le temps du choix */
.js-cta.cookies-ouvert .cta-mobile { display: none; }

.cookie-dialog {
  width: min(560px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 0; overflow: auto;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xl);
  background: var(--surface-raised); color: var(--ink);
  box-shadow: 0 40px 100px -30px rgba(14, 17, 22, .55);
}
.cookie-dialog::backdrop { background: rgba(14, 17, 22, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cookie-dialog[open] { animation: rz-pop .28s var(--ease-out); }
.cookie-dialog-body { display: grid; gap: var(--space-4); padding: var(--space-8); }
@media (max-width: 559px) { .cookie-dialog-body { padding: var(--space-6) var(--space-5); } }
.cookie-dialog h2 { margin: 0; padding-right: 52px; font: 600 var(--text-lg)/1.3 var(--font-sans); letter-spacing: -0.01em; }
.cookie-cats { display: grid; gap: var(--space-2); }
.cookie-cat { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--border-control); border-radius: var(--radius-sm); cursor: pointer; }
.cookie-cat.is-fixed { border-color: var(--border); cursor: default; }
.cookie-cat input { width: 18px; height: 18px; margin: 0; accent-color: var(--braise); }
.cookie-cat input:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.cookie-cat strong { font-weight: 600; }
.cookie-cat-text { grid-column: 2; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); }
.cookie-cat:has(input:checked:not(:disabled)) { border-color: var(--braise); background: var(--braise-soft); }

@media print { .cookie-banner, .cookie-dialog { display: none !important; } }

/* ==========================================================================
   23. Sécurité et données (securite.html et section 05 de l'accueil)
   ========================================================================== */
.secu-intro { padding-block: var(--space-12) var(--space-16); }
.secu-intro .fa-sh { max-width: 820px; }
.secu-scope { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); max-width: var(--measure); }
.secu-scope a, .secu-note a, .secu-mail a { color: var(--braise-ink); text-underline-offset: 3px; }
/* Cartes d'engagement : 1 colonne, puis 2, puis 3 (page) ou 4 (accueil) */
.secu-grid { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .secu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .secu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .secu-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.secu-card { gap: var(--space-3); min-width: 0; }
.secu-card .icon-tile { margin-bottom: var(--space-1); }
.secu-card .fa-h3 { text-wrap: balance; }
.secu-more { margin-top: var(--space-8); }
.secu-note { margin: var(--space-8) 0 0; font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink); max-width: var(--measure); }
.secu-contact { max-width: 760px; }
.secu-mail { margin: 0; font: 500 var(--text-md)/1.4 var(--font-sans); overflow-wrap: anywhere; }
/* FAQ en accordéon : bouton dans un titre (motif WAI-ARIA), même rendu que les <details> de l'accueil */
.faq-h { margin: 0; font: inherit; }
.faq-btn { width: 100%; margin: 0; border: 0; background: none; text-align: left; -webkit-appearance: none; appearance: none; }
.faq-btn[aria-expanded="true"] .fa-faq-icon::after { transform: rotate(0); }
/* Page en cours dans la navigation */
.nav-links a[aria-current="page"], .footer-links a[aria-current="page"] { color: var(--ink); }
/* Six liens dans le menu de l'accueil depuis l'ajout de « Sécurité » : espacements resserrés de 900 à 1023 px
   pour que le logo, les liens et le bouton tiennent dans la pilule */
@media (min-width: 900px) and (max-width: 1023px) {
  .nav { gap: var(--space-2); }
  .nav-links { gap: var(--space-2); }
}
/* Lien vers la page Sécurité dans la FAQ de l'accueil */
.fa-faq-a a { color: var(--braise-ink); text-underline-offset: 3px; }
@media (max-width: 639px) { .secu-scope a, .secu-mail a { display: inline-block; padding-block: 12px; margin-block: -8px; } }

/* ==========================================================================
   24. L'IA en entreprise (section 06 de l'accueil) : exemples d'entreprises et études des Big Four
   ========================================================================== */
.ia-block + .ia-block { margin-top: var(--space-12); }
.ia-block-title { margin: 0 0 var(--space-5); font: 600 var(--text-lg)/1.3 var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.ia-grid { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .ia-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ia-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ia-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ia-card { gap: var(--space-3); min-width: 0; }
.ia-stat { margin: 0; font: 600 clamp(36px, 1.2vw + 28px, 44px)/1 var(--font-sans); letter-spacing: var(--tracking-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ia-scope { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); }
/* Source en bas de carte, alignée d'une carte à l'autre */
.ia-card .source { margin: auto 0 0; padding-top: var(--space-3); border-top: var(--border-width) solid var(--border); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); }