/* ===== tokens.css ===== */
/* =========================================================================
   SIGNAL STUDIO · site V2 · tokens
   Source de vérité : brand book V3 (00-sources/styles.css, p.10-11, p.13, p.15).
   Ne pas modifier sans repasser par le brand kit. Pas de couleur hors liste.
   ========================================================================= */

/* ---------- Polices auto-hébergées (licences SIL OFL 1.1 dans /assets/fonts) ---------- */
/* Archivo : fichier variable, un seul fichier par sous-ensemble pour 400 → 900. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2?v=3ccd4df45c") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext.woff2?v=50120aa80d") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2?v=2c9bacf024") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin-ext.woff2?v=108d509084") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2?v=3a2668b94b") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin-ext.woff2?v=24397a3e83") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Glyphes absents des sous-ensembles : → ✕ ✓ ★ (flèches U+2190-21FF). Utiliser les icônes SVG (.ico). */

:root {
  /* ---------- Palette (p.10-11) ---------- */
  --citron: #CBFA5E;        /* attention / action. JAMAIS du texte sur papier (1,06:1) */
  --encre: #171414;         /* texte, fonds sombres */
  --papier: #F2F0E8;        /* fond principal */
  --cendre: #A8A79F;        /* texte secondaire sur ENCRE uniquement (7,58:1). Jamais texte sur papier */
  --graphite: #5F5D58;      /* texte secondaire sur papier (5,76:1) */
  --encre-relevee: #2B2727; /* surfaces sur fond encre, sans ombre */
  --trait: #D9D6CC;         /* filets sur papier, jamais du texte */
  --citron-40: #E2F4B1;     /* surlignage, sélection, état actif, sans rivaliser avec l'action */
  /* Hors palette, hérités de la démo du kit (web-accueil.html) — À VALIDER par Spencer */
  --blanc: #FFFFFF;         /* fond des cartes métiers et du diagnostic */
  --filet-encre: #3A3636;   /* filets sur fond encre */

  /* ---------- Typographie ---------- */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle fluide entre 390 px et 1440 px de large (p.13 + démo web-accueil).
     Formule : clamp(min, a + b·vw, max), interpolation linéaire 390 → 1440. */
  --fs-display: clamp(2.875rem, 1.6214rem + 5.1429vw, 6.25rem);  /* 46 → 100  héros H1 */
  --fs-h1: clamp(2.5rem, 1.7571rem + 3.0476vw, 4.5rem);          /* 40 → 72   titre de page (texte) */
  --fs-h2: clamp(2.25rem, 1.6rem + 2.6667vw, 4rem);              /* 36 → 64   titre de section */
  --fs-h2-xl: clamp(2.75rem, 1.7286rem + 4.1905vw, 5.5rem);      /* 44 → 88   titre contact */
  --fs-sub: clamp(1.5rem, 1.3143rem + 0.7619vw, 2rem);           /* 24 → 32   sous-titre (Archivo 700) */
  --fs-h3: clamp(1.3125rem, 1.1964rem + 0.4762vw, 1.625rem);     /* 21 → 26   titre de carte */
  --fs-lead: clamp(1.0625rem, 0.9696rem + 0.381vw, 1.3125rem);   /* 17 → 21   chapô */
  --fs-body: clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);        /* 16 → 18   corps */
  --fs-small: clamp(0.9375rem, 0.9143rem + 0.0952vw, 1rem);      /* 15 → 16   texte de carte */
  --fs-label: clamp(0.75rem, 0.7268rem + 0.0952vw, 0.8125rem);   /* 12 → 13   étiquette mono */
  --fs-caption: clamp(0.75rem, 0.7268rem + 0.0952vw, 0.8125rem); /* 12 → 13   légende mono */
  --fs-micro: 0.6875rem;                                         /* 11        mention IA dans un cadre */

  --lh-display: 0.92;
  --lh-h1: 1;
  --lh-h2: 0.95;
  --lh-h3: 1.15;
  --lh-body: 1.5;
  --lh-lead: 1.45;

  --ls-display: -0.045em;   /* approche titres : -3,5 à -4,5 % */
  --ls-h1: -0.035em;
  --ls-h2: -0.035em;
  --ls-h3: -0.02em;
  --ls-label: 0.08em;       /* capitales mono +8 % */

  /* ---------- Grille & espacements ---------- */
  --container: 1440px;
  --m: clamp(1.25rem, 0.2286rem + 4.1905vw, 4rem);       /* marge latérale 20 → 64 */
  --g: clamp(1rem, 0.8143rem + 0.7619vw, 1.5rem);        /* gouttière 16 → 24 */
  --section-y: clamp(3.5rem, 2.5714rem + 3.8095vw, 6rem); /* rythme vertical 56 → 96 */
  --header-h: 112px;
  --callbar-h: 64px;

  /* ---------- Langage graphique : l'angle coupé (p.15) ----------
     Coupe haut-gauche + bas-droite, ≈ 34° : largeur de coupe = 1,5 × hauteur de coupe.
     Hauteur de coupe = 1/4 de la hauteur (blocs, boutons, étiquettes), 1/10 pour les cadres image (24 px min). */
  --ch: 16px;
  --ch-tag: 7px;      /* étiquette ≈ 28 px de haut */
  --ch-btn: 13px;     /* bouton 52 px */
  --ch-btn-sm: 11px;  /* bouton 44 px */
  --ch-picto: 16px;   /* boîte picto 64 px */
  --ch-block: 24px;   /* panneaux, blocs de prix, diagnostic */

  /* ---------- Mouvement (p.26 étendu au web, À VALIDER) : horizontal, coupes franches, ni fondu ni zoom ---------- */
  --ease-cut: cubic-bezier(0.2, 0.75, 0.15, 1);
  --t-xs: 150ms;
  --t-s: 180ms;
  --t-m: 240ms;
  --t-l: 420ms;
  --t-xl: 520ms;
  --stagger: 70ms;

  --z-header: 50;
  --z-callbar: 60;
  --z-menu: 80;
}

@media (max-width: 600px) {
  :root {
    --header-h: 104px;
    --lh-display: 0.98;
    --lh-h1: 1.05;
    --lh-h2: 1;
    --ls-display: -0.03em;
    --ls-h1: -0.02em;
    --ls-h2: -0.025em;
  }
}

/* ===== base.css ===== */
/* =========================================================================
   SIGNAL STUDIO · site V2 · base
   Reset, typographie fluide, conteneur, grille 12 colonnes, utilitaires de coupe.
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--papier);
}
body {
  min-height: 100vh;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; }
h1, h2, h3, h4 { font-weight: 800; text-wrap: balance; overflow-wrap: break-word; }
p, li, dd { text-wrap: pretty; overflow-wrap: break-word; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--citron-40); color: var(--encre); }
.on-encre ::selection, .on-encre::selection { background: var(--citron); color: var(--encre); }

/* Focus clavier : visible partout, jamais d'arrondi */
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.on-encre :focus-visible { outline-color: var(--citron); }
.on-citron :focus-visible { outline-color: var(--encre); }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Typographie (6 niveaux, p.13 : pas plus de 3 visibles à la fois) ---------- */
.display {
  font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.h1, .prose h1 {
  font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1);
}
.h2, .prose h2 {
  font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
}
.h2-xl {
  font-weight: 800; font-size: var(--fs-h2-xl); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
}
.sub {
  font-weight: 700; font-size: var(--fs-sub); line-height: 1.1; letter-spacing: -0.02em;
}
.h3, .prose h3 {
  font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3);
}
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--graphite); max-width: 36em; }
.body { font-size: var(--fs-body); line-height: var(--lh-body); }
.small { font-size: var(--fs-small); line-height: 1.45; }
.muted { color: var(--graphite); }
.on-encre .muted, .on-encre .lead { color: var(--cendre); }
.on-citron .muted, .on-citron .lead { color: var(--encre); }

/* Étiquette : IBM Plex Mono 500, capitales, +8 %. Une ligne. */
.label {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label); line-height: 1.3;
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
/* Légende : IBM Plex Mono 400 (images générées, mentions, sources) */
.caption {
  font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-caption); line-height: 1.4;
  letter-spacing: 0.02em; color: var(--graphite);
}
.caption--caps { text-transform: uppercase; letter-spacing: 0.06em; }
.on-encre .caption { color: var(--cendre); }
.on-citron .caption { color: var(--encre); }
.num { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.06em; }

/* Texte long (mentions légales, confidentialité) : colonne de 720 px */
.prose { max-width: 720px; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); margin-top: 2.2em; }
.prose h3 { font-size: 1.5rem; margin-top: 1.8em; }
.prose a, .text-link {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em;
}
.prose a:hover, .text-link:hover { text-decoration-thickness: 3px; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }

/* ---------- Conteneur & sections ---------- */
.wrap {
  width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--m);
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.66); }
.section + .section--rule, .section--rule { border-top: 1px solid var(--trait); }

/* Fonds : papier (défaut), encre, citron. Le citron plein reste rare (bande d'appel). */
.on-papier { background: var(--papier); color: var(--encre); }
.on-encre { background: var(--encre); color: var(--papier); }
.on-citron { background: var(--citron); color: var(--encre); }
.on-citron-40 { background: var(--citron-40); color: var(--encre); }
.on-blanc { background: var(--blanc); color: var(--encre); }

/* ---------- Grille 12 colonnes ----------
   .grid-12 > .span-N         : N colonnes à partir de 900 px (12 en dessous)
   .grid-12 > .span-md-N      : N colonnes à partir de 601 px
   .grid-12 > .start-N        : colonne de départ à partir de 900 px (se combine avec .span-N) */
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--g); }
.grid-12 > * { --span: 12; --start: auto; grid-column: var(--start) / span var(--span); min-width: 0; }
@media (min-width: 601px) {
  .grid-12 > .span-md-3 { --span: 3; }
  .grid-12 > .span-md-4 { --span: 4; }
  .grid-12 > .span-md-6 { --span: 6; }
  .grid-12 > .span-md-8 { --span: 8; }
}
@media (min-width: 900px) {
  .grid-12 > .span-2 { --span: 2; }
  .grid-12 > .span-3 { --span: 3; }
  .grid-12 > .span-4 { --span: 4; }
  .grid-12 > .span-5 { --span: 5; }
  .grid-12 > .span-6 { --span: 6; }
  .grid-12 > .span-7 { --span: 7; }
  .grid-12 > .span-8 { --span: 8; }
  .grid-12 > .span-9 { --span: 9; }
  .grid-12 > .span-10 { --span: 10; }
  .grid-12 > .span-12 { --span: 12; }
  .grid-12 > .start-2 { --start: 2; }
  .grid-12 > .start-3 { --start: 3; }
  .grid-12 > .start-4 { --start: 4; }
  .grid-12 > .start-5 { --start: 5; }
  .grid-12 > .start-6 { --start: 6; }
  .grid-12 > .start-7 { --start: 7; }
  .grid-12 > .start-8 { --start: 8; }
  .grid-12 > .start-9 { --start: 9; }
}

/* Piles verticales */
.stack > * + * { margin-top: var(--stack, 1rem); }
.stack-s { --stack: 0.5rem; }
.stack-l { --stack: 1.75rem; }
.stack-xl { --stack: 2.75rem; }

/* ---------- Utilitaires de coupe (p.15) ----------
   Régler --ch (hauteur de coupe) sur l'élément : 1/4 de la hauteur pour blocs/boutons/étiquettes,
   1/10 pour les cadres image (24 px min). La largeur de coupe vaut 1,5 × --ch (≈ 34°). */
.cut-2 {
  clip-path: polygon(calc(var(--ch) * 1.5) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch) * 1.5) 100%, 0 100%, 0 var(--ch));
}
.cut-tl { clip-path: polygon(calc(var(--ch) * 1.5) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ch)); }
.cut-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch) * 1.5) 100%, 0 100%); }

/* Bloc coupé avec filet CONTINU qui suit les coupes (un box-shadow inset s'interromprait
   sur les diagonales). L'élément lui-même n'est PAS découpé (le focus reste visible) :
   ::before peint le filet, ::after peint l'intérieur en retrait de --bw, avec une coupe
   réduite de 0,4648 × --bw (parallèle exacte à 34°). Sans filet : --bw: 0px.
   Variables : --ch, --bw (2px), --line (encre), --fill (papier). */
.cut-line {
  --bw: 2px; --line: var(--encre); --fill: var(--papier);
  position: relative; isolation: isolate;
}
.cut-line::before, .cut-line::after {
  content: ""; position: absolute; pointer-events: none;
}
.cut-line::before {
  inset: 0; z-index: -2; background: var(--line);
  clip-path: polygon(calc(var(--ch) * 1.5) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch) * 1.5) 100%, 0 100%, 0 var(--ch));
}
.cut-line::after {
  --chi: calc(var(--ch) - var(--bw) * 0.4648);
  inset: var(--bw); z-index: -1; background: var(--fill);
  clip-path: polygon(calc(var(--chi) * 1.5) 0, 100% 0, 100% calc(100% - var(--chi)), calc(100% - var(--chi) * 1.5) 100%, 0 100%, 0 var(--chi));
}

/* ---------- Accessibilité ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--m); top: -100px; z-index: 100;
  background: var(--encre); color: var(--citron); padding: 12px 18px;
  font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* Les éléments réservés au JS restent cachés sans JS (et inversement). */
html:not(.js) .js-only { display: none !important; }
html.js .no-js-only { display: none !important; }

/* Mobile */
.hide-mobile { }
@media (max-width: 600px) { .hide-mobile { display: none !important; } }
@media (min-width: 601px) { .only-mobile { display: none !important; } }

/* ===== components.css ===== */
/* =========================================================================
   SIGNAL STUDIO · site V2 · composants partagés
   Ne pas ajouter de styles propres à une page ici : utiliser assets/css/pages/<page>.css.
   Règles : aucun coin arrondi, aucune ombre, citron rare, mouvement horizontal sans fondu ni zoom.
   ========================================================================= */

/* =========================================================================
   1. ICÔNES (masques SVG, couleur = currentColor). Les glyphes → ✕ manquent dans les polices.
   <span class="ico ico-arrow" aria-hidden="true"></span>
   ========================================================================= */
.ico {
  display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.14em;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.ico-arrow { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 12h15.5M12.5 5.5 19 12l-6.5 6.5'/%3E%3C/svg%3E"); }
.ico-external { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M6.5 17.5 17 7M9 6.5h8.5V15'/%3E%3C/svg%3E"); }
.ico-plus { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E"); }
.ico-close { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13'/%3E%3C/svg%3E"); }
.ico-check { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E"); }

/* =========================================================================
   2. HEADER (sticky 112 / 104 px) + MENU MOBILE (papier, la signature A ne va jamais sur encre)
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--papier); border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { border-bottom-color: var(--trait); }
.site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: 28px; }
/* La signature PNG contient ~8 px de marge transparente : à 88 px de haut, le cartouche fait ≈ 122 px (min. 120). */
.brand-sig { flex: none; display: block; margin-left: -8px; }
.brand-sig img { width: 139px; height: 88px; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: 24px; list-style: none; }
.site-nav a {
  position: relative; display: block; padding: 8px 0; font-weight: 500; font-size: 1.0625rem; line-height: 1.2;
  white-space: nowrap;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform var(--t-s) var(--ease-cut);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header__tel {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.06em; white-space: nowrap;
  padding: 8px 0; border-bottom: 2px solid transparent;
}
.site-header__tel:hover { border-bottom-color: currentColor; }
.site-header__cta { flex: none; }
.site-header .site-header__menu { display: none; margin-left: auto; }

/* En dessous de 1200 px : la nav complète ne tient plus → bouton Menu. */
@media (max-width: 1199px) {
  .site-header .site-nav, .site-header .site-header__cta, .site-header .site-header__tel { display: none; }
  .site-header .site-header__menu { display: inline-flex; }
}
/* Le numéro n'apparaît que lorsqu'il y a la place (≥ 1440 px). */
@media (min-width: 1200px) and (max-width: 1439px) { .site-header .site-header__tel { display: none; } }
@media (max-width: 600px) {
  .brand-sig img { width: 137px; height: 87px; } /* cartouche ≈ 121 px */
}

/* Bouton Menu / Fermer : étiquette mono coupée */
.menu-toggle {
  --ch: 11px; --line: var(--encre); --fill: var(--papier); --bw: 2px;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 20px;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.8125rem; letter-spacing: var(--ls-label); text-transform: uppercase;
}
.menu-toggle .ico { width: 14px; height: 14px; }
.menu-toggle[aria-expanded="true"] { --fill: var(--citron-40); }

.menu-panel {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menu);
  background: var(--papier); overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--trait);
  padding: 8px 0 calc(32px + env(safe-area-inset-bottom));
}
.menu-panel.is-opening { transform: translateX(100%); }
.menu-panel.is-open { transform: translateX(0); transition: transform 260ms var(--ease-cut); }
.menu-panel__list { list-style: none; }
.menu-panel__list a {
  display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--trait);
  font-weight: 800; font-size: 2rem; line-height: 1.05; letter-spacing: -0.03em;
}
.menu-panel__list a .num { flex: none; width: 2.2em; font-size: 0.8125rem; color: var(--graphite); }
.menu-panel__list a[aria-current="page"] { background: linear-gradient(var(--citron-40), var(--citron-40)) 0 0 / 100% 100% no-repeat; }
.menu-panel__list--small a { font-size: 1.375rem; font-weight: 700; padding: 13px 0; }
.menu-panel__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
html.menu-open { overflow: hidden; }
@media (min-width: 1200px) { .menu-panel { display: none !important; } }
@media (max-width: 600px) { .menu-panel__list a { font-size: 1.75rem; } }

/* =========================================================================
   3. BOUTONS — coupe 1/4 de la hauteur (52 px → --ch 13 px). Filet continu sur les diagonales.
   .btn--citron  action principale (citron, filet encre)        → 1 seule par bloc
   .btn--encre   encre, texte citron (nav, bande citron)
   .btn--sombre  encre, texte papier (barre d'appel « Appeler »)
   .btn--outline papier, filet encre (secondaire) — s'inverse sur .on-encre
   ========================================================================= */
.btn {
  --ch: var(--ch-btn); --bw: 0px; --line: var(--encre); --fill: var(--encre); --ink: var(--papier);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px; padding: 0 28px; color: var(--ink);
  font-family: var(--font-sans); font-weight: 700; font-size: 1rem; line-height: 1.15; letter-spacing: -0.005em;
  text-align: center; white-space: nowrap; cursor: pointer; user-select: none;
}
.btn::before, .btn::after { content: ""; position: absolute; pointer-events: none; }
.btn::before {
  inset: 0; z-index: -2; background: var(--line);
  clip-path: polygon(calc(var(--ch) * 1.5) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch) * 1.5) 100%, 0 100%, 0 var(--ch));
}
.btn::after {
  --chi: calc(var(--ch) - var(--bw) * 0.4648);
  inset: var(--bw); z-index: -1; background: var(--fill);
  clip-path: polygon(calc(var(--chi) * 1.5) 0, 100% 0, 100% calc(100% - var(--chi)), calc(100% - var(--chi) * 1.5) 100%, 0 100%, 0 var(--chi));
}
.btn .ico { width: 1.05em; height: 1.05em; transition: transform var(--t-s) var(--ease-cut); }
.btn:hover .ico { transform: translateX(4px); }
.btn--citron { --bw: 2px; --fill: var(--citron); --ink: var(--encre); }
.btn--citron:hover { --bw: 3px; }
.on-encre .btn--citron { --bw: 0px; }
.on-encre .btn--citron:hover { --fill: var(--citron-40); }
.btn--encre { --fill: var(--encre); --ink: var(--citron); }
.btn--encre:hover { --fill: var(--encre-relevee); }
.btn--sombre { --fill: var(--encre); --ink: var(--papier); }
.btn--sombre:hover { --fill: var(--encre-relevee); }
.btn--outline { --bw: 2px; --fill: var(--papier); --ink: var(--encre); }
.btn--outline:hover { --fill: var(--citron-40); }
.on-encre .btn--outline { --line: var(--papier); --fill: var(--encre); --ink: var(--papier); }
.on-encre .btn--outline:hover { --fill: var(--encre-relevee); }
.on-citron .btn--outline { --fill: var(--citron); }
.on-citron .btn--outline:hover { --fill: var(--citron-40); }
.btn--sm { --ch: var(--ch-btn-sm); min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }
.btn--block { display: flex; width: 100%; }
@media (max-width: 600px) { .btn--block-mobile { display: flex; width: 100%; } }

/* Lien souligné 2 px (3 px au survol), flèche SVG */
.link {
  display: inline-flex; align-items: center; gap: 0.45em; padding-bottom: 4px;
  font-weight: 700; font-size: 1rem; line-height: 1.25;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
}
.link:hover, .link:focus-visible { background-size: 100% 3px; }
.link .ico { transition: transform var(--t-s) var(--ease-cut); }
.link:hover .ico { transform: translateX(4px); }
.link--lg { font-size: 1.125rem; font-weight: 600; }

/* Groupe d'actions d'un héros / d'une section : action + lien « ou appeler… » */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
@media (max-width: 600px) {
  .actions { flex-direction: column; align-items: stretch; gap: 16px; }
  .actions > .btn { display: flex; width: 100%; }
  .actions > .link { align-self: center; }
}

/* =========================================================================
   4. ÉTIQUETTES & CHIPS (mono capitales, coupe --ch 7 px) — p.13 « Annotation », p.15 « Étiquette »
   .tag                encre, texte citron (catégorie, statut)
   .tag--papier        papier + filet encre  → chip « Concept », « Simulation », « Image générée par IA »
   .tag--citron        citron + filet encre  → usage rare (« À valider »)
   .tag--sombre        encre, texte papier
   .tag--num           numéro d'étape (citron, texte encre)
   ========================================================================= */
.tag {
  --ch: var(--ch-tag); --bw: 0px; --line: var(--encre); --fill: var(--encre); --ink: var(--citron);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.5em;
  padding: 8px 14px 7px 16px; color: var(--ink);
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label); line-height: 1;
  letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap;
}
.tag::before, .tag::after { content: ""; position: absolute; pointer-events: none; }
.tag::before {
  inset: 0; z-index: -2; background: var(--line);
  clip-path: polygon(calc(var(--ch) * 1.5) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch) * 1.5) 100%, 0 100%, 0 var(--ch));
}
.tag::after {
  --chi: calc(var(--ch) - var(--bw) * 0.4648);
  inset: var(--bw); z-index: -1; background: var(--fill);
  clip-path: polygon(calc(var(--chi) * 1.5) 0, 100% 0, 100% calc(100% - var(--chi)), calc(100% - var(--chi) * 1.5) 100%, 0 100%, 0 var(--chi));
}
.tag--papier { --bw: 1.5px; --fill: var(--papier); --ink: var(--encre); }
.on-encre .tag:where(:not(.tag--papier, .tag--citron, .tag--num, .tag--sombre)) { --fill: var(--encre-relevee); }
.on-encre .tag--papier { --line: var(--papier); --fill: var(--encre); --ink: var(--papier); }
.tag--citron { --bw: 1.5px; --fill: var(--citron); --ink: var(--encre); }
.tag--sombre { --fill: var(--encre); --ink: var(--papier); }
.on-encre .tag--sombre { --fill: var(--encre-relevee); }
.tag--num { --fill: var(--citron); --ink: var(--encre); padding: 8px 12px 7px 14px; font-size: 0.9375rem; letter-spacing: 0.04em; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* Bascule (JOUR / NUIT, filtres) : bouton au look d'étiquette, état aria-pressed */
.toggle {
  --ch: var(--ch-tag); --bw: 1.5px; --line: var(--encre); --fill: var(--papier);
  min-height: 32px; padding: 0 14px 0 16px; display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.toggle[aria-pressed="true"] { --fill: var(--citron-40); }
.toggle:hover { --bw: 2.5px; }

/* =========================================================================
   5. SURLIGNEUR « .hl » — le mot clé en citron (1 à 2 mots, une fois par titre).
   Écrire <span class="hl">trouvé.</span> : build.py ajoute le calque .hl__on (aria-hidden).
   Sans JS : surligné. Avec JS : le calque se trace de gauche à droite (380 ms), une fois.
   .hl--inverse : sur fond citron (encre + texte citron).
   ========================================================================= */
.hl { position: relative; padding: 0 0.08em; white-space: nowrap; }
.hl__on {
  position: absolute; inset: 0; padding: 0 0.08em; line-height: normal; white-space: nowrap;
  background: var(--citron); color: var(--encre);
  clip-path: inset(0 0 0 0);
}
.hl--inverse .hl__on { background: var(--encre); color: var(--citron); }
@media (prefers-reduced-motion: no-preference) {
  .js .hl[data-reveal-state="pending"] .hl__on { clip-path: inset(0 100% 0 0); }
  .js .hl[data-reveal-state="in"] .hl__on { clip-path: inset(0 0 0 0); transition: clip-path 380ms var(--ease-cut) var(--reveal-delay, 0ms); }
}

/* =========================================================================
   6. RÉVÉLATIONS au défilement — masque horizontal, coupe franche, sans fondu ni zoom.
   [data-reveal]                    : l'élément s'ouvre de gauche à droite (420 ms)
   [data-reveal-stagger="70"]       : chaque enfant direct s'ouvre, décalage de 70 ms
   .mask-lines > .mask-line > span  : lignes du titre héros (CSS seul, 520 ms, décalage 70 ms)
   L'état caché n'existe qu'avec html.js, sans prefers-reduced-motion, et seulement sous la ligne
   de flottaison (main.js) : sans JS et sur les captures pleine page, tout est visible.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal-state="pending"], .js [data-reveal-state="in"] {
    -webkit-mask: linear-gradient(#000 0 0) 0 0 / 0% 100% no-repeat;
    mask: linear-gradient(#000 0 0) 0 0 / 0% 100% no-repeat;
  }
  .js [data-reveal-state="in"] {
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    transition: -webkit-mask-size var(--t-l) var(--ease-cut) var(--reveal-delay, 0ms), mask-size var(--t-l) var(--ease-cut) var(--reveal-delay, 0ms);
  }
  .js .hl[data-reveal-state] { -webkit-mask: none; mask: none; }

  .js .mask-line > span { animation: mask-line-in var(--t-xl) var(--ease-cut) both; }
  .js .mask-line:nth-child(2) > span { animation-delay: 70ms; }
  .js .mask-line:nth-child(3) > span { animation-delay: 140ms; }
  .js .mask-line:nth-child(4) > span { animation-delay: 210ms; }
  .js .mask-lines .hl__on { animation: hl-in 380ms var(--ease-cut) 700ms both; }
}
.mask-line { display: block; overflow-x: clip; }
.mask-line > span { display: block; }
@keyframes mask-line-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes hl-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* =========================================================================
   7. SECTIONS — tête de section (H2 à gauche, intro à droite)
   ========================================================================= */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.section-head__title { flex: 1 1 0; min-width: 0; }
.section-head__title > .h2, .section-head__title > h2 { max-width: 13em; }
.section-head__title .label { display: block; margin-bottom: 16px; }
.section-head__intro { max-width: 420px; font-size: var(--fs-body); line-height: 1.45; color: var(--graphite); }
.on-encre .section-head__intro { color: var(--cendre); }
.section-head + * { margin-top: clamp(28px, 2rem + 1vw, 48px); }
@media (max-width: 900px) {
  .section-head { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   8. HÉROS de page — texte à gauche, cadre coupé 500 × 520 à droite ; mobile : image d'abord, 260 px.
   ========================================================================= */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 56px; align-items: center;
  padding-top: clamp(28px, 1rem + 3vw, 64px); padding-bottom: clamp(40px, 1.5rem + 3vw, 72px); }
.hero__text > .label { display: block; }
.hero__title { margin-top: 24px; }
.hero__lead { margin-top: 30px; max-width: 580px; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--graphite); }
.hero__actions { margin-top: 36px; }
.hero__note { margin-top: 18px; }
.hero__media { width: 100%; }
.hero__media .frame { height: 520px; }
.hero--text-only { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .hero__media { order: -1; }
  .hero__media .frame { height: clamp(260px, 50vw, 420px); }
}
@media (max-width: 600px) {
  .hero__title { margin-top: 14px; }
  .hero__lead { margin-top: 16px; }
  .hero__actions { margin-top: 24px; }
  .hero__media .frame { height: 260px; }
}

/* =========================================================================
   9. CADRE IMAGE COUPÉ — coupe = 1/10 de la hauteur, 24 px minimum (unités de conteneur).
   <figure class="frame" style="--ratio: 3 / 4">
     <div class="frame__cut"><!-- @picture … --></div>
     <figcaption class="frame__tag"><span>Concept · ALBA</span><span class="frame__note">Simulation</span></figcaption>
   </figure>
   L'étiquette va TOUJOURS en bas à gauche (coin non coupé), papier sur encre.
   Hauteur : --ratio (défaut 4/5) OU une hauteur explicite (height:…) — jamais les deux.
   ========================================================================= */
.frame { position: relative; container-type: size; aspect-ratio: var(--ratio, 4 / 5); width: 100%; }
.frame__cut {
  --ch: max(24px, 10cqh);
  position: absolute; inset: 0; overflow: hidden; background: var(--encre-relevee);
  clip-path: polygon(calc(var(--ch) * 1.5) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch) * 1.5) 100%, 0 100%, 0 var(--ch));
}
.frame__cut > picture, .frame__cut > img, .frame__cut > video { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame__cut img, .frame__cut video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.frame__tag {
  position: absolute; left: 0; bottom: 0; z-index: 2; max-width: calc(100% - 60px);
  display: flex; flex-direction: column; gap: 5px; padding: 10px 14px 10px;
  background: var(--encre); color: var(--papier);
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label); line-height: 1.25;
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.frame__note { font-weight: 400; font-size: var(--fs-micro); letter-spacing: 0.06em; color: var(--cendre); }
.frame-caption { margin-top: 12px; }

/* Galerie du kit : 2fr / 1fr / 1fr, 420 px de haut ; mobile : 1 colonne, cadres de 220 px */
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--g); }
.gallery > .frame { height: 420px; aspect-ratio: auto; }
@media (max-width: 900px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery > .frame:first-child { grid-column: span 2; }
  .gallery > .frame { height: 300px; }
}
@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery > .frame:first-child { grid-column: auto; }
  .gallery > .frame { height: 220px; }
}

/* =========================================================================
   10. CARTES MÉTIERS — fond blanc (à valider), filet trait 1 px, picto 64 px en boîte citron coupée.
   La carte entière est cliquable (le lien s'étend sur la carte).
   ========================================================================= */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
.card-metier {
  position: relative; display: flex; flex-direction: column; min-height: 330px; padding: 28px 26px 26px;
  background: var(--blanc); box-shadow: inset 0 0 0 1px var(--trait);
  transition: transform var(--t-s) var(--ease-cut);
}
.card-metier:hover, .card-metier:focus-within { transform: translateX(4px); }
.picto-box {
  --ch: var(--ch-picto); flex: none; width: 64px; height: 64px; display: grid; place-items: center;
  background: var(--citron);
  clip-path: polygon(calc(var(--ch) * 1.5) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch) * 1.5) 100%, 0 100%, 0 var(--ch));
}
.picto-box img { width: 34px; height: 34px; }
.card-metier__num { margin-top: 24px; color: var(--graphite); }
.card-metier__title { margin-top: 10px; font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.card-metier__text { margin-top: 10px; font-size: var(--fs-small); line-height: 1.45; color: var(--graphite); }
.card-metier__link { margin-top: auto; align-self: flex-start; }
.card-metier__text + .card-metier__link { margin-top: auto; }
.card-metier > :last-child { margin-top: auto; padding-top: 18px; }
.card-metier__link { background-position: 0 calc(100% - 0px); }
.card-metier__link::after { content: ""; position: absolute; inset: 0; }
.card-metier:hover .card-metier__link { background-size: 100% 3px; }
@media (prefers-reduced-motion: reduce) { .card-metier:hover, .card-metier:focus-within { transform: none; } }
/* ≥ 601 px : sous-grille → les titres, textes et liens des 4 cartes restent alignés */
@media (min-width: 601px) {
  .card-metier { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; min-height: 0; align-content: start; }
  .card-metier > :last-child { align-self: end; justify-self: start; }
}
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .card-metier { min-height: 0; display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; padding: 20px; }
  .card-metier .picto-box { --ch: 13px; width: 52px; height: 52px; grid-row: span 4; }
  .card-metier .picto-box img { width: 28px; height: 28px; }
  .card-metier__num { margin-top: 0; }
  .card-metier__title { margin-top: 4px; }
  .card-metier__text { margin-top: 6px; }
  .card-metier > :last-child { padding-top: 10px; }
}

/* Ligne pleine largeur (ex. « 05 · Accompagnement & suivi ») entre deux filets trait */
.row-line {
  display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap;
  padding: 22px 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.row-line > img { width: 32px; height: 32px; flex: none; }
.row-line__text { flex: 1 1 360px; color: var(--graphite); }
.row-line__text strong { color: var(--encre); font-weight: 700; }

/* Liste à filets (ce que vous obtenez, le cadre, délais…) */
.ruled { list-style: none; border-top: 1px solid var(--trait); }
.ruled > li { padding: 18px 0; border-bottom: 1px solid var(--trait); }
.ruled--strong { border-top: 2px solid var(--encre); }
.on-encre .ruled, .on-encre .ruled > li { border-color: var(--filet-encre); }
.ruled__k { display: block; margin-bottom: 4px; }

/* Grille d'éléments avec picto 32 px */
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 var(--g); border-top: 1px solid var(--trait); }
.feature { display: grid; grid-template-columns: 32px 1fr; gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--trait); }
.feature > img { width: 32px; height: 32px; grid-row: span 2; }
.feature__title { font-weight: 700; font-size: 1.125rem; line-height: 1.25; }
.feature__text { font-size: var(--fs-small); line-height: 1.45; color: var(--graphite); }

/* =========================================================================
   11. ÉTAPES (statique) + PAGINATION EN IMPULSIONS (p.25 : barres cendre 54 px, active citron 120 px)
   ========================================================================= */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); list-style: none; }
.step { border-top: 2px solid var(--encre); padding-top: 22px; }
.on-encre .step { border-top-color: var(--filet-encre); }
.step__title { margin-top: 18px; font-weight: 800; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.1; }
.step__text { margin-top: 8px; font-size: var(--fs-small); line-height: 1.45; color: var(--graphite); }
.on-encre .step__text { color: var(--cendre); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; gap: 28px; } }

.pulses { display: flex; align-items: center; gap: 10px; contain: layout paint; }
.pulse { --w: 54px; display: block; width: var(--w); height: 32px; padding: 10px 0; flex: none;
  transition: width var(--t-m) var(--ease-cut); }
.pulse > span, .pulse::before {
  display: block; width: 100%; height: 12px; background: var(--cendre);
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}
.pulse::before { content: ""; }
.pulse[aria-current="step"], .pulse.is-current { width: 120px; }
.pulse[aria-current="step"]::before, .pulse.is-current::before { background: var(--encre); }
.on-encre .pulse[aria-current="step"]::before, .on-encre .pulse.is-current::before { background: var(--citron); }
.pulses--static .pulse { cursor: default; }
@media (prefers-reduced-motion: reduce) { .pulse { transition: none; } }

/* =========================================================================
   12. MÉTHODE ÉPINGLÉE — défilement horizontal en sticky (≥ 900 px, mouvement autorisé, JS).
   Sans JS / mouvement réduit : grille statique de 4 colonnes (desktop), liste (mobile).
   ========================================================================= */
.hscroll { position: relative; }
.hscroll__stage { padding-block: var(--section-y); }
.hscroll__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); margin-top: 48px; }
.hscroll__panel { position: relative; border-top: 2px solid var(--filet-encre); padding-top: 22px; }
.hscroll__panel .tag--num { --ch: 7px; justify-self: start; align-self: start; }
.hscroll__title { margin-top: 18px; font-weight: 800; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); letter-spacing: -0.03em; line-height: 1; }
.hscroll__text { margin-top: 12px; font-size: var(--fs-body); line-height: 1.5; color: var(--cendre); max-width: 34em; }
.hscroll__picto { width: 32px; height: 32px; margin-top: 18px; }
.hscroll__media { margin-top: 22px; }
.hscroll__media .frame { --ratio: 3 / 4; }
.hscroll__pulses { display: none; }
.hscroll__foot { margin-top: 40px; }
@media (max-width: 900px) {
  .hscroll__track { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}
@media (max-width: 600px) {
  .hscroll__track { grid-template-columns: 1fr; }
  .hscroll__media .frame { --ratio: 4 / 3; }
}
/* Impulsion d'étape en mode empilé : la barre s'allonge à l'entrée de l'étape */
.hscroll__panel::before {
  content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 54px; background: var(--cendre);
  transition: width var(--t-m) var(--ease-cut), background-color 0s;
}
.hscroll__panel.is-current::before { width: 120px; background: var(--citron); }

/* Mode épinglé (main.js ajoute .is-pinned) */
.hscroll.is-pinned { height: 300vh; }
.hscroll.is-pinned .hscroll__stage {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden;
  display: flex; flex-direction: column; padding-block: clamp(28px, 4vh, 56px);
}
.hscroll.is-pinned .hscroll__track {
  display: flex; gap: 0; margin-top: clamp(20px, 3vh, 40px); flex: 1 1 auto; min-height: 0;
  padding-left: max(var(--m), calc((100vw - var(--container)) / 2 + var(--m)));
  will-change: transform;
}
.hscroll.is-pinned .hscroll__panel {
  flex: none; width: 70vw; max-width: 1040px; padding-right: 56px; margin-right: 56px; border-top: 0; padding-top: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 48px; align-items: start;
}
.hscroll.is-pinned .hscroll__panel::before { display: none; }
.hscroll.is-pinned .hscroll__title { font-size: clamp(2.5rem, 1.5rem + 2.6vw, 4rem); line-height: 0.95; letter-spacing: -0.035em; }
.hscroll.is-pinned .hscroll__text { font-size: 1.125rem; }
.hscroll.is-pinned .hscroll__media { margin-top: 0; grid-row: 1 / span 6; grid-column: 2; }
.hscroll.is-pinned .hscroll__media .frame { width: calc(min(52vh, 460px) * 0.75); height: min(52vh, 460px); aspect-ratio: auto; }
.hscroll.is-pinned .hscroll__pulses { display: flex; margin-top: clamp(16px, 3vh, 32px); }
.hscroll.is-pinned .hscroll__foot { margin-top: clamp(16px, 2.5vh, 28px); }

/* =========================================================================
   13. MOTIF « IMPULSIONS » — module 320 × 128, ≤ 1/3 de la surface, JAMAIS sous un texte.
   .motif--encre-citron (fonds sombres) · --citron-encre (bande d'appel) · --papier-encre · --calme
   .motif-band : bande de 64 px (pied de page, 404, héros sans image)
   [data-motif-live] : glisse seulement pendant le défilement, par pas de 4 px, modulo 320 px.
   ========================================================================= */
.motif { position: relative; overflow: hidden; }
.motif::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -320px; right: 0;
  background: var(--motif) 0 0 / 320px 128px repeat;
  transform: translateX(var(--mx, 0px));
}
.motif--encre-citron { --motif: url("/assets/motifs/motif_impulsions_encre-citron_module-320x128.svg?v=e320d95c1c"); background: var(--encre); }
.motif--citron-encre { --motif: url("/assets/motifs/motif_impulsions_citron-encre_module-320x128.svg?v=a6c6b591af"); background: var(--citron); }
.motif--papier-encre { --motif: url("/assets/motifs/motif_impulsions_papier-encre_module-320x128.svg?v=1376b74b0b"); background: var(--papier); }
.motif--calme { --motif: url("/assets/motifs/motif_impulsions-calme_encre-citron_module-320x128.svg?v=30070b5c8d"); background: var(--encre); }
.motif-band { display: block; height: 64px; }
.motif-band::before { background-position: 0 -4px; } /* impulsions centrées : 10 px de marge en haut et en bas */

/* =========================================================================
   14. BANDE CITRON (Publicité & croissance) — texte encre sur 66 %, motif sur la colonne droite de 34 %.
   ========================================================================= */
.band-citron { position: relative; overflow: hidden; background: var(--citron); color: var(--encre); padding-block: clamp(48px, 2rem + 3vw, 80px); }
.band-citron__motif { position: absolute; top: 0; bottom: 0; right: 0; width: 34%; }
.band-citron__content { position: relative; max-width: min(760px, 58%); }
.band-citron__content .h2 { margin-top: 16px; }
.band-citron__content p { margin-top: 18px; max-width: 560px; font-size: clamp(1rem, 0.93rem + 0.3vw, 1.1875rem); line-height: 1.45; }
.band-citron__content .actions { margin-top: 30px; }
@media (max-width: 900px) {
  .band-citron { padding-bottom: calc(64px + 48px); }
  .band-citron__motif { top: auto; width: 100%; height: 64px; }
  .band-citron__content { max-width: none; }
}

/* =========================================================================
   15. LA COUPE — 6 bandes encre à 34° liées au défilement : le papier devient encre (jour → nuit).
   Sans JS / mouvement réduit : aplat encre.
   ========================================================================= */
.coupe { --p: 1; position: relative; height: clamp(96px, 10vw, 168px); overflow: hidden; background: var(--papier); }
.coupe > i {
  --c: calc(clamp(96px, 10vw, 168px) / 6 * 1.5);
  position: absolute; left: calc(var(--c) * -1); width: calc(100% + var(--c)); height: calc(100% / 6 + 1px); background: var(--encre);
  clip-path: polygon(var(--c) 0, 100% 0, 100% 100%, 0 100%);
  transform: translateX(calc((1 - var(--p)) * (100% + var(--o, 0%))));
  will-change: transform;
}
.coupe > i:nth-child(1) { top: 0; --o: 4%; }
.coupe > i:nth-child(2) { top: calc(100% / 6); --o: 22%; }
.coupe > i:nth-child(3) { top: calc(200% / 6); --o: 10%; }
.coupe > i:nth-child(4) { top: calc(300% / 6); --o: 30%; }
.coupe > i:nth-child(5) { top: calc(400% / 6); --o: 0%; }
.coupe > i:nth-child(6) { top: calc(500% / 6); --o: 16%; }
.coupe.is-flat > i { clip-path: none; }

/* =========================================================================
   16. BASCULE JOUR / NUIT (héros d'accueil) — calque nuit en 8 bandes à bord d'attaque coupé.
   Sans JS / mouvement réduit : figé à 50 / 50.
   ========================================================================= */
.daynight { position: relative; }
.daynight .frame__cut > picture.daynight__day { z-index: 0; }
.daynight__night { position: absolute; inset: 0; z-index: 1;
  clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%); }
.daynight__night > picture, .daynight__night > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.daynight__night img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.daynight.is-banded .daynight__night { clip-path: none; overflow: hidden; }
.daynight__band { position: absolute; left: 0; overflow: hidden; will-change: transform; }
.daynight__band > picture, .daynight__band > img { position: absolute; left: 0; display: block; will-change: transform; }
.daynight__band img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.daynight__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.daynight__ctrl { display: flex; gap: 8px; }

/* =========================================================================
   17. DIAGNOSTIC EN 3 CLICS (partial « diagnostic », réutilisé sur / et /contact)
   ========================================================================= */
.diagnostic__panel {
  --ch: var(--ch-block);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px 56px; align-items: start;
  padding: clamp(24px, 1rem + 2.5vw, 56px);
  background: var(--blanc);
  clip-path: polygon(calc(var(--ch) * 1.5) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch) * 1.5) 100%, 0 100%, 0 var(--ch));
}
.diagnostic__intro p:not(.label) { margin-top: 18px; color: var(--graphite); max-width: 34em; }
.diagnostic__intro .h2 { margin-top: 14px; }
.diagnostic__form { margin-top: 32px; display: grid; gap: 26px; }
.choices { border: 0; min-width: 0; }
.choices legend { padding: 0; margin-bottom: 12px; }
.choices__list { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice span {
  --ch: 9px; --bw: 2px; --line: var(--encre); --fill: var(--papier);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px 8px 18px;
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label); line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
}
.choice span::before, .choice span::after { content: ""; position: absolute; pointer-events: none; }
.choice span::before { inset: 0; z-index: -2; background: var(--line);
  clip-path: polygon(calc(var(--ch) * 1.5) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch) * 1.5) 100%, 0 100%, 0 var(--ch)); }
.choice span::after { --chi: calc(var(--ch) - var(--bw) * 0.4648); inset: var(--bw); z-index: -1; background: var(--fill);
  clip-path: polygon(calc(var(--chi) * 1.5) 0, 100% 0, 100% calc(100% - var(--chi)), calc(100% - var(--chi) * 1.5) 100%, 0 100%, 0 var(--chi)); }
.choice input:checked + span { --fill: var(--citron-40); --bw: 3px; }
.choice:hover span { --fill: var(--citron-40); }
.choice:has(input:focus-visible) { outline: 3px solid var(--encre); outline-offset: 3px; }
.diagnostic__result {
  --ch: var(--ch-block); position: sticky; top: calc(var(--header-h) + 24px);
  padding: 28px 28px 30px; background: var(--encre); color: var(--papier);
  clip-path: polygon(calc(var(--ch) * 1.5) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch) * 1.5) 100%, 0 100%, 0 var(--ch));
}
.diagnostic__empty { color: var(--cendre); font-size: var(--fs-small); }
.diagnostic__metier { margin-top: 8px; font-weight: 800; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); line-height: 1.05; letter-spacing: -0.03em; }
.diagnostic__msg {
  display: block; width: 100%; margin-top: 18px; min-height: 9.5em; resize: vertical;
  padding: 14px 16px; border: 0; border-radius: 0; background: var(--encre-relevee); color: var(--papier);
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.5;
  box-shadow: inset 0 0 0 1px var(--filet-encre);
}
.diagnostic__msg:focus { outline: none; box-shadow: inset 0 0 0 2px var(--citron); }
.diagnostic__actions { margin-top: 22px; }
.diagnostic__out.is-entering { animation: sweep-in var(--t-m) var(--ease-cut) both; }
@keyframes sweep-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .diagnostic__out.is-entering { animation: none; } }
@media (max-width: 900px) {
  .diagnostic__panel { grid-template-columns: 1fr; }
  .diagnostic__result { position: static; }
}

/* =========================================================================
   18. FORMULES — blocs de prix coupés, filet encre continu ; prix Archivo 800 56 px.
   ========================================================================= */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--g); }
.price-card {
  --ch: var(--ch-block); --bw: 2px; --line: var(--encre); --fill: var(--papier);
  display: flex; flex-direction: column; gap: 14px; padding: 32px 32px 30px;
}
.price-card--blanc { --fill: var(--blanc); }
.price-card__amount { position: relative; display: inline-block; align-self: flex-start; overflow: clip; padding-bottom: 9px;
  font-weight: 800; font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; }
.price-card__amount small { font-size: 0.32em; font-weight: 700; letter-spacing: 0; margin-left: 0.2em; }
.price-card__amount::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--citron-40);
  transform: translateX(-101%);
}
.price-card:hover .price-card__amount::after, .price-card:focus-within .price-card__amount::after {
  transform: translateX(0); transition: transform 220ms var(--ease-cut);
}
@media (prefers-reduced-motion: reduce) { .price-card:hover .price-card__amount::after { transition: none; } }
.price-card > .link, .price-card > .btn, .price-card > .tag { align-self: flex-start; }
.price-card__name { font-weight: 700; font-size: var(--fs-h3); letter-spacing: -0.02em; }
.price-card__text { color: var(--graphite); font-size: var(--fs-small); line-height: 1.5; }
.price-card .ruled { margin-top: 6px; }
.price-card .ruled > li { padding: 10px 0; font-size: var(--fs-small); }
.price-card > .btn, .price-card > .actions { margin-top: auto; }
.price-list { display: grid; gap: 6px; }
.price-card__meta { margin-top: 10px; font-family: var(--font-mono, "IBM Plex Mono", monospace); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite, #5F5D58); }
.price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.price-line > .price-card__amount { align-self: auto; } /* sinon align-self: flex-start casse l'alignement sur la ligne de base */

/* =========================================================================
   19. QUESTIONS — accordéon natif <details>, filets trait, icône plus / moins (quart de tour 150 ms)
   ========================================================================= */
.faq { border-top: 1px solid var(--trait); }
.faq__item { border-bottom: 1px solid var(--trait); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem); line-height: 1.3; letter-spacing: -0.01em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__icon { position: relative; flex: none; width: 18px; height: 18px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: currentColor; }
.faq__icon::before { left: 0; right: 0; top: 8px; height: 2.4px; }
.faq__icon::after { top: 0; bottom: 0; left: 8px; width: 2.4px; transition: transform var(--t-xs) var(--ease-cut); }
.faq__item[open] .faq__icon::after { transform: rotate(90deg); }
.faq__a { padding: 0 0 24px; max-width: 46em; color: var(--graphite); }
.faq__a > * + * { margin-top: 0.8em; }
.on-encre .faq, .on-encre .faq__item { border-color: var(--filet-encre); }
.on-encre .faq__a { color: var(--cendre); }
@media (prefers-reduced-motion: reduce) { .faq__icon::after { transition: none; } }

/* Nos règles : étiquettes numérotées sur citron 40, texte encre (15,53:1) */
.rules { --ch: var(--ch-block); align-self: start; padding: 28px 28px 30px; background: var(--citron-40); color: var(--encre);
  clip-path: polygon(calc(var(--ch) * 1.5) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch) * 1.5) 100%, 0 100%, 0 var(--ch)); }
.rules__list { list-style: none; margin-top: 16px; display: grid; gap: 14px; counter-reset: regle; }
.rules__list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; font-weight: 600; line-height: 1.35; counter-increment: regle; }
.rules__list li::before {
  content: counter(regle, decimal-leading-zero); --ch: 6px;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.04em;
  padding: 6px 10px 5px 12px; background: var(--encre); color: var(--citron);
  clip-path: polygon(calc(var(--ch) * 1.5) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch) * 1.5) 100%, 0 100%, 0 var(--ch));
}

/* =========================================================================
   20. TABLEAU comparatif (th scope, filets trait, ligne survolée en citron 40)
   ========================================================================= */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll__hint { display: none; margin-bottom: 10px; }
@media (max-width: 760px) { .table-scroll__hint { display: block; } }
.table { width: 100%; min-width: 680px; text-align: left; font-size: var(--fs-small); }
.table th, .table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.table thead th { border-bottom: 2px solid var(--encre); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; }
.table tbody th { font-weight: 600; }
.table td { color: var(--graphite); }
.table tbody tr:hover { background: var(--citron-40); }
.table tbody tr:hover td { color: var(--encre); }

/* =========================================================================
   21. FORMULAIRE — champs sans arrondi, filet encre 2 px au focus
   ========================================================================= */
.form { display: grid; gap: 22px; max-width: 640px; }
.field { display: grid; gap: 8px; }
.field__label { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.field__hint { font-size: 0.875rem; color: var(--graphite); }
.field__input {
  width: 100%; min-height: 52px; padding: 13px 16px; border: 0; border-radius: 0;
  background: var(--blanc); color: var(--encre); font-size: 1rem; line-height: 1.4;
  box-shadow: inset 0 0 0 1px var(--graphite); -webkit-appearance: none; appearance: none;
}
textarea.field__input { min-height: 140px; resize: vertical; }
.field__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--encre); }
.field__input:focus-visible { outline: 3px solid var(--citron); outline-offset: 0; }
.field__input::placeholder { color: var(--graphite); opacity: 1; }
.form__note { font-size: 0.875rem; color: var(--graphite); max-width: 40em; }
.form__ok { --ch: var(--ch-block); padding: 20px 24px; background: var(--citron-40); font-weight: 600; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   22. CONTACT — grille du kit 1,2fr / 1fr ; lignes avec filet ; fond citron 40 qui entre par la gauche
   ========================================================================= */
.contact-block { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.contact-block__title { margin-top: 16px; }
.contact-block__text { margin-top: 22px; max-width: 30em; color: var(--graphite); font-size: var(--fs-body); }
.contact-block__note { margin-top: 18px; }
.contact-lines { border-top: 2px solid var(--encre); }
.contact-line {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; gap: 6px 14px;
  padding: 18px 8px 18px 0; border-bottom: 1px solid var(--trait);
}
.contact-line::before {
  content: ""; position: absolute; inset: 0 0 0 -12px; z-index: -1; background: var(--citron-40);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--t-m) var(--ease-cut);
}
.contact-line:hover::before, .contact-line:focus-visible::before { transform: scaleX(1); }
.contact-line__k { color: var(--graphite); }
.contact-line__v { font-weight: 600; font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem); line-height: 1.25; overflow-wrap: break-word; min-width: 0; }
.contact-line__a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9375rem; white-space: nowrap; }
.contact-line__a .ico { transition: transform var(--t-s) var(--ease-cut); }
.contact-line:hover .contact-line__a .ico, .contact-line:focus-visible .contact-line__a .ico { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .contact-line::before { transition: none; }
  .contact-line:hover .contact-line__a .ico { transform: none; }
}
@media (max-width: 900px) { .contact-block { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1279px), (max-width: 600px) {
  .contact-line { grid-template-columns: minmax(0, 1fr) auto; }
  .contact-line__k { grid-column: 1 / -1; }
}

/* =========================================================================
   23. PIED DE PAGE colophon — signature A sur papier, bande motif 64 px en bas (sous aucun texte)
   ========================================================================= */
.site-footer { border-top: 1px solid var(--trait); background: var(--papier); }
.site-footer__inner { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 32px 40px; padding-block: 48px 40px; }
.site-footer__brand img { width: 139px; height: 88px; }
.site-footer__col h2 { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--graphite); }
.site-footer__col ul { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.site-footer__col a { font-size: 1rem; line-height: 1.35; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 2px no-repeat; padding-bottom: 2px; transition: background-size var(--t-s) var(--ease-cut); }
.site-footer__col a:hover, .site-footer__col a[aria-current="page"] { background-size: 100% 2px; }
.site-footer__legal { padding-block: 18px 28px; border-top: 1px solid var(--trait); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.6; color: var(--graphite); }
@media (max-width: 1100px) { .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .site-footer__inner { grid-template-columns: 1fr; gap: 28px; } .site-footer__brand img { width: 137px; height: 87px; } }

/* =========================================================================
   24. BARRE D'APPEL MOBILE (≤ 600 px, toutes les pages) — 64 px + safe-area
   ========================================================================= */
.callbar { display: none; }
@media (max-width: 600px) {
  body { padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom)); }
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-callbar);
    display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px; align-items: center;
    height: calc(var(--callbar-h) + env(safe-area-inset-bottom));
    padding: 6px var(--m) calc(6px + env(safe-area-inset-bottom));
    background: var(--papier); border-top: 1px solid var(--trait);
    clip-path: polygon(0 0, calc(100% + 96px) 0, 100% 100%, 0 100%);
  }
  .callbar .btn { min-height: 52px; padding: 0 10px; font-size: 0.9375rem; }
  .callbar.is-hidden {
    clip-path: polygon(0 0, 0 0, -96px 100%, 0 100%); visibility: hidden;
    transition: clip-path var(--t-m) var(--ease-cut), visibility 0s linear var(--t-m);
  }
  .callbar.is-shown { transition: clip-path var(--t-m) var(--ease-cut), visibility 0s; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) { .callbar, .callbar.is-hidden { transition: none; } }

/* =========================================================================
   25. CARTE DE FRANCE — partial « carte-france » (FICHIER GÉNÉRÉ par tools/carte_france.py)
   Contour réel (IGN Admin Express COG 2018, Licence Ouverte), projection Lambert-93, villes aux vraies
   coordonnées. Le tracé s'adapte à la largeur ; points et étiquettes gardent leur taille en px.
   .carte-france--papier : trait encre (défaut) · .carte-france--encre : trait papier (dans .on-encre)
   Points : citron à angles coupés, filet encre. Studio : point 22 px + double cadre « signal ».
   Étiquettes : IBM Plex Mono, fond = couleur de la section (le trait ne passe jamais sous un texte).
   Apparition (main.js, sous la ligne de flottaison, sans mouvement réduit) : contour par masque
   horizontal (640 ms), puis chaque point et son étiquette en coupe franche de gauche à droite.
   ========================================================================= */
.carte-france {
  --c-line: var(--encre); --c-bg: var(--papier); --c-pre: var(--graphite); --c-dot-line: var(--encre);
  position: relative; width: 100%; max-width: 640px; color: var(--c-line); container-type: inline-size;
}
.carte-france svg { max-width: none; } /* base.css : svg { max-width: 100% } écraserait les points (parent de largeur 0) */
.carte-france--encre { --c-line: var(--papier); --c-bg: var(--encre); --c-pre: var(--cendre); --c-dot-line: var(--encre); }
.carte-france__map { position: relative; aspect-ratio: var(--ar, 1 / 1); }
.carte-france__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.carte-france__terre {
  fill: none; stroke: var(--c-line); stroke-width: 1.5px; stroke-linejoin: bevel; vector-effect: non-scaling-stroke;
}
.carte-france__pts { list-style: none; position: absolute; inset: 0; }
.carte-france__pt { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.carte-france__dot { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; overflow: visible; }
.carte-france__dot polygon { fill: var(--citron); stroke: var(--c-dot-line); stroke-width: 2px; stroke-linejoin: miter; }
.carte-france__pt--studio .carte-france__dot { left: -11px; top: -11px; width: 22px; height: 22px; }
.carte-france__ring { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; overflow: visible; }
.carte-france__ring polygon { fill: none; stroke: var(--c-line); stroke-width: 1.5px; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.carte-france__ring polygon:first-child { stroke-width: 1px; }

.carte-france__label {
  position: absolute; display: grid; gap: 2px; padding: 4px 7px 5px; white-space: nowrap;
  background: var(--c-bg); color: var(--c-line); font-family: var(--font-mono); line-height: 1.1;
}
.carte-france__pre { font-weight: 400; font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-pre); }
.carte-france__city { font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.carte-france__pt--r > .carte-france__label { left: 13px; top: 0; transform: translateY(-50%); }
.carte-france__pt--l > .carte-france__label { right: 13px; top: 0; transform: translateY(-50%); }
.carte-france__pt--t > .carte-france__label { bottom: 13px; left: 0; transform: translateX(-50%); }
.carte-france__pt--b > .carte-france__label { top: 13px; left: 0; transform: translateX(-50%); }
/* Étiquette du studio : composant .tag (encre, texte citron ; citron sur fond encre), sous le point,
   légèrement décalée vers l'est pour laisser la côte du golfe du Lion visible. */
.carte-france__tag { position: absolute; top: 32px; left: 18px; transform: translateX(-50%); }
.carte-france--encre .carte-france__tag { --fill: var(--citron); --ink: var(--encre); }
.carte-france__legend { margin-top: 14px; }
.carte-france__legend .caption { display: block; max-width: 40em; }
.carte-france__key { display: none; }
/* Carte étroite (< 480 px, ex. mobile) : les villes sur une ligne, le « Présents à » passe en légende
   sous la carte (il reste lu par les lecteurs d'écran dans chaque étiquette) ; étiquette du studio sur
   deux lignes, centrée sous le point (sur une ligne, elle couvrirait la Corse ou la côte). */
@container (max-width: 479px) {
  .carte-france__pre {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .carte-france__key {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-pre);
  }
  .carte-france__key .carte-france__dot { position: static; flex: none; width: 14px; height: 14px; }
  .carte-france__label { padding: 3px 5px 4px; }
  .carte-france__ring { left: -21px; top: -21px; width: 42px; height: 42px; }
  .carte-france__tag { top: 25px; left: 10px; flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px 12px 6px 14px; }
  .carte-france__sep { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .carte-france[data-carte-state="pending"] .carte-france__svg {
    -webkit-mask: linear-gradient(#000 0 0) 0 0 / 0% 100% no-repeat; mask: linear-gradient(#000 0 0) 0 0 / 0% 100% no-repeat;
  }
  .js .carte-france[data-carte-state="in"] .carte-france__svg {
    -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat; mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat;
    transition: -webkit-mask-size 640ms var(--ease-cut), mask-size 640ms var(--ease-cut);
  }
  .js .carte-france[data-carte-state="pending"] .carte-france__pt > * { clip-path: inset(0 100% 0 0); }
  .js .carte-france[data-carte-state="in"] .carte-france__pt > * {
    clip-path: inset(0 0 0 0); transition: clip-path 260ms var(--ease-cut) calc(480ms + var(--i, 0) * 110ms);
  }
  .js .carte-france[data-carte-state="in"] .carte-france__pt > .carte-france__label,
  .js .carte-france[data-carte-state="in"] .carte-france__pt > .carte-france__tag { transition-delay: calc(560ms + var(--i, 0) * 110ms); }
  .js .carte-france[data-carte-state="in"] .carte-france__pt > .carte-france__ring { transition-delay: calc(700ms + var(--i, 0) * 110ms); }
}

/* =========================================================================
   26. DIVERS
   ========================================================================= */
.illus { width: 100%; max-width: 400px; height: auto; }
.note-line { padding: 18px 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); font-size: 0.9375rem; color: var(--graphite); }
.video-frame video { background: var(--encre); }
.copy-btn[data-copied] { --fill: var(--citron-40); }

/* Ce qu'on vous livre (22/10) */
.livres { list-style: none; margin: clamp(24px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g, 24px); }
.livre { border-top: 2px solid var(--encre); padding-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.livre__title { font-weight: 800; font-size: 1.45rem; letter-spacing: -0.03em; }
.livre__title a { color: inherit; text-decoration: none; }
.livre__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.livre__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.livre__list li { position: relative; padding-left: 22px; line-height: 1.4; }
.livre__list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 10px; height: 10px; background: var(--citron); clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%); }
@media (max-width: 1200px) { .livres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .livres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .livres { grid-template-columns: 1fr; } }

/* =========================================================================
   Très petits écrans (22/10) : iPhone SE, Galaxy Fold plié (280–360 px)
   ========================================================================= */
@media (max-width: 760px) {
  .diagnostic__panel { grid-template-columns: minmax(0, 1fr); }
  .diagnostic__panel > * { min-width: 0; }
  .choices__list { flex-wrap: wrap; }
  .choice, .choice span { white-space: normal; }
}
@media (max-width: 360px) {
  :root { --fs-display: 2.3rem; --fs-h1: 2.05rem; --fs-h2: 1.85rem; }
  .display, .h1, .h2, h1, h2 { overflow-wrap: break-word; hyphens: auto; }
  .label { letter-spacing: 0.04em; overflow-wrap: anywhere; }
  .hero__text, .hero__actions, .actions { min-width: 0; max-width: 100%; }
  .btn { white-space: normal; max-width: 100%; text-align: center; }
  .pulses { flex-wrap: wrap; gap: 6px; }
  .pulse { --w: 38px; }
}

/* Abonnements compacts (22/10) */
.subs { list-style: none; margin: 14px 0 18px; padding: 0; }
.subs li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--trait); }
.subs li:last-child { border-bottom: 1px solid var(--trait); }
.subs__name { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
.subs__desc { color: var(--graphite); font-size: 0.95rem; }
.subs__price { font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.subs__price small { font-size: 0.7em; font-weight: 600; }
@media (max-width: 480px) { .subs li { grid-template-columns: 1fr auto; } .subs__desc { grid-column: 1 / -1; grid-row: 2; } }
.abo-wrap { overflow-x: auto; margin-top: clamp(20px, 3vw, 36px); }
.abo { width: 100%; min-width: 520px; border-collapse: collapse; }
.abo th, .abo td { padding: 12px 10px; border-bottom: 1px solid var(--trait); text-align: center; }
.abo tbody th { text-align: left; font-weight: 500; }
.abo thead th { font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: .08em; text-transform: uppercase; vertical-align: bottom; border-bottom: 2px solid var(--encre); }
.abo thead b { display: block; font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; text-transform: none; margin-top: 4px; }
.abo thead b small { font-size: 0.55em; font-weight: 600; }
.abo td { font-weight: 700; }
.abo td.no { color: var(--cendre); font-weight: 400; }
.abo-note { margin-top: 16px; color: var(--graphite); }
@media (max-width: 640px) {
  .abo { min-width: 0; table-layout: fixed; font-size: 0.875rem; }
  .abo tbody th { width: 46%; padding-left: 0; }
  .abo th, .abo td { padding: 10px 4px; }
  .abo thead th { font-size: 0.6rem; letter-spacing: .04em; overflow-wrap: anywhere; }
  .abo thead b { font-size: 1.05rem; }
  .abo thead b small { display: block; font-size: 0.7em; }
}

/* =========================================================================
   MOBILE COMPACT (22/10) : rien n'est supprimé, tout est optimisé
   - listes longues → cartes à faire glisser au pouce
   - questionnaire et carte → repliés, ouverts d'un geste
   - rythme vertical resserré
   ========================================================================= */
.m-fold > .m-fold__btn { display: none; }
@media (max-width: 760px) {
  :root { --section-y: 2.75rem; }
  .section-head + * { margin-top: 22px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }

  .cards, .home-gallery, .hscroll__track, .livres, .sw-apps, .tdv-levels, .pub-exs, .cpt-kit, .res-posts {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 14px !important; margin-inline: calc(-1 * var(--m)); padding-inline: var(--m); scroll-padding-inline: var(--m);
    scrollbar-width: none; max-width: none !important; grid-template-columns: none !important;
  }
  .cards::-webkit-scrollbar, .home-gallery::-webkit-scrollbar, .hscroll__track::-webkit-scrollbar, .livres::-webkit-scrollbar,
  .sw-apps::-webkit-scrollbar, .tdv-levels::-webkit-scrollbar, .pub-exs::-webkit-scrollbar, .cpt-kit::-webkit-scrollbar, .res-posts::-webkit-scrollbar { display: none; }
  .cards > *, .home-gallery > *, .hscroll__track > *, .livres > *, .sw-apps > *, .tdv-levels > *, .pub-exs > *, .cpt-kit > *, .res-posts > * {
    flex: 0 0 82%; min-width: 0; scroll-snap-align: start; margin: 0 !important;
  }
  .res-posts > * { flex-basis: 64%; }
  .hscroll__stage { padding-block: var(--section-y); }
  .hscroll__track { margin-top: 24px; }

  /* Indice discret : « glisser » sous chaque rangée */
  .cards, .home-gallery, .hscroll__track, .livres, .sw-apps, .tdv-levels, .pub-exs, .cpt-kit, .res-posts { position: relative; }
  .cards + *, .home-gallery + *, .hscroll__track + *, .livres + *, .sw-apps + *, .pub-exs + *, .cpt-kit + * { margin-top: 18px; }

  /* Blocs repliables */
  .m-fold > .m-fold__btn {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
    margin-top: 18px; padding: 14px 20px; border: 2px solid currentColor; font-weight: 800;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }
  .m-fold > .m-fold__btn::-webkit-details-marker { display: none; }
  .m-fold > .m-fold__btn::after { content: "+"; font-size: 1.2em; line-height: 1; }
  .m-fold[open] > .m-fold__btn::after { content: "–"; }
  .m-fold[open] > .m-fold__btn { margin-bottom: 18px; }
}
@media (max-width: 760px) {
  .diagnostic__panel:has(.m-fold:not([open])) .diagnostic__result { display: none; }
  .hscroll__track, .hscroll__track.wrap { margin-inline: 0 !important; padding-inline: var(--m) !important; width: 100%; max-width: none; }
  .hscroll__media .frame { --ratio: 4 / 3; }
  .hscroll__media { margin-top: 16px; }
}
@media (max-width: 760px) {
  /* Prix : le site d'abord, les abonnements à côté (glisser) */
  .home-prices, .prices { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px !important;
    margin-inline: calc(-1 * var(--m)); padding-inline: var(--m); scroll-padding-inline: var(--m); scrollbar-width: none; grid-template-columns: none !important; }
  .home-prices::-webkit-scrollbar, .prices::-webkit-scrollbar { display: none; }
  .home-prices > *, .prices > * { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; margin: 0 !important; }
  /* Pied de page sur 2 colonnes */
  .site-footer__inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 360px) { .site-footer__inner { grid-template-columns: 1fr; } .site-footer a { overflow-wrap: anywhere; } }