/* chambres-fortes.fr — famille V1-chantier habillée.
   Police : Alan Sans (variable 300-900), self-hébergée. Contraste de graisse 300/900.
   Teinte réservée : 250 (acier bleui). Filets 1px, AUCUNE ombre, AUCUN rayon.
   Préfixes : chf- (structure), egr- (échelle des grades), blx- (éditorial). */

@font-face {
  font-family: "Alan Sans";
  src: url("/fonts/alan-sans-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:        oklch(17% 0.015 250);
  --ink-2:      oklch(22% 0.018 250);
  --surface:    oklch(25% 0.020 250);
  --paper:      oklch(95% 0.008 250);
  --paper-2:    oklch(91% 0.012 250);
  --accent:     oklch(64% 0.090 250);
  --accent-ink: oklch(15% 0.020 250);
  --line:       oklch(34% 0.020 250);
  --field-line: oklch(47% 0.030 250);
  /* G46 : l'accent réservé (teinte 250) sert de SURFACE de bouton. En TEXTE il ne
     passe pas le contraste sur fond clair (mesuré 2,56:1). Deux dérivés de la MÊME
     teinte, un par famille de fond. La teinte reste 250 : ce n'est pas une dérive. */
  --accent-txt-clair: oklch(42% 0.105 250);
  --accent-txt-sombre: oklch(76% 0.080 250);

  /* dérivés de lecture */
  --sur-ink:    oklch(97% 0.004 250);
  --sur-ink-mu: oklch(84% 0.010 250);
  --sur-paper:  oklch(19% 0.016 250);
  --sur-paper-mu: oklch(38% 0.018 250);
  --line-paper: oklch(80% 0.012 250);

  --wrap: 1180px;
  --gut: clamp(1rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* I3 : coupure de mots jamais automatique (le socle l'exige explicitement). */
body, p, li, h1, h2, h3, td, th, summary, label { hyphens: manual; -webkit-hyphens: manual; }

body {
  margin: 0;
  font-family: "Alan Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.62;
  color: var(--sur-paper);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

a { color: inherit; }

/* AUCUN rayon, AUCUNE ombre : invariant de famille */
* { border-radius: 0 !important; box-shadow: none !important; }

.chf-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink); padding: .75rem 1.25rem; font-weight: 700;
}
.chf-skip:focus { left: 0; }

:where(a, button, input, select, textarea, summary, details):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── enveloppe et grille asymétrique 5/7 ── */
.chf-wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }

.chf-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 64rem) {
  /* rupture de symétrie 2 : grille 5/7, le contenu occupe les 7 colonnes de droite */
  .chf-grid { grid-template-columns: 5fr 7fr; column-gap: clamp(2rem, 5vw, 4.5rem); }
  .chf-grid > * { grid-column: 2; }
  .chf-grid > .chf-kicker, .chf-grid > h2 { grid-column: 1 / -1; }
}
.chf-plein { display: block; }

/* ── typographie ── */
h1, h2, h3 { font-weight: 300; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 .6em; }
h1 b, h2 b, h3 b { font-weight: 900; letter-spacing: -0.035em; }
h1 { font-size: clamp(2.1rem, 1.2rem + 4.4vw, 4.25rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem); margin-top: 0; }
h3 { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0 0 1.1em; }
strong { font-weight: 700; }

.chf-kicker {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  margin: 0 0 1.4rem; padding-bottom: .7rem; border-bottom: 1px solid currentColor;
  display: inline-block; color: var(--accent-txt-clair);
}
.chf-ink .chf-kicker, .chf-ink2 .chf-kicker, .chf-hero .chf-kicker,
.chf-band .chf-kicker, .chf-ft .chf-kicker { color: var(--accent-txt-sombre); }
.chf-lede { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); font-weight: 300; line-height: 1.45; max-width: 46ch; }
.chf-apres { border-left: 1px solid var(--line-paper); padding-left: 1.25rem; }
.chf-maj { font-size: .82rem; color: var(--sur-paper-mu); margin-top: 2.5rem; }

.chf-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; letter-spacing: -.01em;
  padding: .08em .35em; background: color-mix(in oklab, currentColor 9%, transparent);
}

/* ── fonds alternés ── */
.chf-sec { padding-block: clamp(3rem, 7vw, 6.5rem); border-top: 1px solid var(--line-paper); }
.chf-paper  { background: var(--paper);   color: var(--sur-paper); }
.chf-paper2 { background: var(--paper-2); color: var(--sur-paper); }
.chf-ink    { background: var(--ink);     color: var(--sur-ink);   border-top-color: var(--line); }
.chf-ink2   { background: var(--ink-2);   color: var(--sur-ink);   border-top-color: var(--line); }
.chf-ink .chf-apres, .chf-ink2 .chf-apres { border-left-color: var(--line); }
.chf-ink .chf-maj, .chf-ink2 .chf-maj { color: var(--sur-ink-mu); }

/* ── en-tête ── */
.chf-hd {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink); color: var(--sur-ink); border-bottom: 1px solid var(--line);
}
.chf-hd.chf--is-solid { background: var(--ink); border-bottom-color: var(--accent); }
.chf-hd-in { display: flex; align-items: center; gap: .75rem; min-height: 58px; flex-wrap: wrap; }
.chf-logo {
  text-decoration: none; font-weight: 900; letter-spacing: -.03em; font-size: clamp(.95rem, .85rem + .4vw, 1.12rem);
  text-transform: uppercase; margin-right: auto;
  max-width: 56vw; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.chf-logo span { font-weight: 300; }
.chf-nav ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; flex-wrap: wrap; }
.chf-nav a, .chf-nav summary {
  display: block; padding: .55rem .75rem; text-decoration: none; font-size: .9rem; cursor: pointer;
}
.chf-nav summary { list-style: none; font-weight: 700; }
.chf-nav summary::-webkit-details-marker { display: none; }
.chf-nav summary::after { content: " ▾"; opacity: .6; }
.chf-nav details { position: relative; min-width: 0; }
.chf-nav > ul > li { min-width: 0; }
.chf-nav summary { min-width: 0; }
.chf-drop {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); padding: .35rem;
  width: min(22rem, calc(100vw - 2rem));
}
@media (min-width: 90rem) { .chf-drop { position: absolute; left: 0; top: 100%; z-index: 70; } }
.chf-drop a { padding: .6rem .75rem; width: 100%; min-width: 0; }
.chf-drop small { display: block; font-size: .76rem; color: var(--sur-ink-mu); font-weight: 300; }
.chf-drop a:hover { background: var(--ink-2); }

.chf-btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: .93rem; padding: .8rem 1.35rem; border: 1px solid var(--accent);
  text-decoration: none; cursor: pointer; font-family: inherit; line-height: 1.3;
}
.chf-btn:hover { background: color-mix(in oklab, var(--accent) 88%, white); }
.chf-btn-hd { padding: .6rem .9rem; font-size: clamp(.74rem, .68rem + .25vw, .86rem);
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chf-btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.chf-btn-ghost:hover { background: color-mix(in oklab, var(--accent) 16%, transparent); }

/* ── hero : photo plein écran assombrie, titre pleine largeur ── */
.chf-hero { position: relative; background: var(--ink); color: var(--sur-ink); overflow: hidden; }
.chf-hero-img { position: absolute; inset: 0; }
.chf-hero-img img { width: 100%; height: 100%; object-fit: cover; opacity: .34; filter: grayscale(.4) contrast(1.05); }
.chf-hero-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, oklch(17% .015 250 / .55), oklch(17% .015 250 / .92));
}
/* hero porteur d'une photo : le texte se pose au-dessus du calque assombri. */
.chf-hero-img-on { min-height: clamp(22rem, 46vh, 34rem); display: flex; align-items: flex-end; }
.chf-hero-img-on .chf-hero-in { width: 100%; }
.chf-hero-in { position: relative; padding-block: clamp(3.25rem, 9vw, 7.5rem) clamp(2rem, 5vw, 3.5rem); }
.chf-hero h1 { max-width: 20ch; }

.chf-crumb { margin-bottom: 1.5rem; }
.chf-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; font-size: .8rem; }
.chf-crumb li + li::before { content: "/ "; opacity: .5; }
.chf-crumb a { text-decoration: none; opacity: .78; }
.chf-crumb a:hover { opacity: 1; }
.chf-crumb [aria-current] { opacity: .6; }

/* ── MODE A : bande de formulaire pleine largeur, sous le titre ── */
.chf-band { background: var(--surface); color: var(--sur-ink); border-block: 1px solid var(--line); padding-block: clamp(1.5rem, 3.5vw, 2.5rem); }
.chf-ftitle { font-size: 1.15rem; font-weight: 900; letter-spacing: -.02em; margin: 0 0 .2rem; }
.chf-fsub { font-size: .88rem; color: var(--sur-ink-mu); margin: 0 0 1.1rem; max-width: 62ch; }
.chf-f-ligne { display: grid; gap: .9rem; }
@media (min-width: 48rem) { .chf-f-ligne { grid-template-columns: 1.1fr 1.1fr auto; align-items: end; } }
.chf-f2 { display: grid; gap: .9rem; margin-bottom: .9rem; }
@media (min-width: 40rem) { .chf-f2 { grid-template-columns: 1fr 1fr; } }

.chf-f label { display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .35rem; }
.chf-f input[type="text"], .chf-f input[type="email"], .chf-f select, .chf-f textarea {
  width: 100%; font-family: inherit; font-size: 1rem; padding: .72rem .85rem;
  background: transparent; color: inherit; border: 1px solid var(--field-line);
}
.chf-band .chf-f input, .chf-band .chf-f select, .chf-band .chf-f textarea { border-color: oklch(62% 0.030 250); }
.chf-f textarea { resize: vertical; min-height: 6rem; }
.chf-f select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.1rem) 1.25rem, calc(100% - .75rem) 1.25rem; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.25rem; }
.chf-f > div { margin-bottom: .9rem; }
.chf-f-ligne > div { margin-bottom: 0; }
.chf-req { color: var(--accent-txt-sombre); }
.chf-paper .chf-req, .chf-paper2 .chf-req { color: var(--accent-txt-clair); }
.chf-consent { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem 0 .9rem; }
.chf-consent input { margin-top: .3rem; flex: 0 0 auto; }
.chf-consent label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .84rem; margin: 0; }
.chf-reassure { font-size: .78rem; color: var(--sur-ink-mu); margin: 0; }
.chf-paper .chf-reassure, .chf-paper2 .chf-reassure,
.chf-paper .chf-fsub, .chf-paper2 .chf-fsub { color: var(--sur-paper-mu); }
.chf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.chf-endform { border: 1px solid var(--line-paper); padding: clamp(1.35rem, 3.5vw, 2.5rem); background: var(--paper); }
.chf-endform h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); }
.chf-f-long { max-width: 46rem; }

/* ── MODULE SIGNATURE : l'échelle des grades ──
   rupture de symétrie 3 : le rail court sur toute la hauteur de la section. */
.egr { position: relative; padding-left: clamp(0rem, 2vw, 1.5rem); }
.egr-rail { position: absolute; left: clamp(0rem, 2vw, 1.5rem); top: .6rem; bottom: 5.5rem; width: 1px; background: currentColor; opacity: .35; }
.egr-liste { list-style: none; margin: 0; padding: 0; }
.egr-pas { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3.5vw, 2.5rem); border-bottom: 1px solid currentColor; }
.chf-ink .egr-pas, .chf-ink2 .egr-pas { border-bottom-color: var(--line); }
.chf-paper .egr-pas, .chf-paper2 .egr-pas { border-bottom-color: var(--line-paper); }
.egr-pas::before { content: ""; position: absolute; left: 0; top: calc(clamp(1.5rem, 3vw, 2.25rem) + .55rem); width: clamp(.85rem, 2.5vw, 1.6rem); height: 1px; background: currentColor; opacity: .5; }
.egr-pas:last-child { border-bottom: 0; }

/* rupture de symétrie 1 : chiffres géants en marge, désignations SOURCÉES seulement */
.egr-chiffre {
  display: block; font-weight: 300; font-size: clamp(1.6rem, 1rem + 3.2vw, 3.4rem);
  letter-spacing: -.05em; line-height: 1; color: var(--accent-txt-clair); margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 64rem) {
  .egr-pas { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
  .egr-chiffre { margin-bottom: 0; text-align: right; }
}
.egr-rang { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; opacity: .65; margin: 0 0 .45rem; }
.egr-corps h3 { margin-bottom: .5rem; }
.egr-corps p { margin-bottom: .55rem; }
.egr-pour { font-weight: 300; opacity: .88; }
.egr-norme { font-size: .8rem; opacity: .68; margin: 0; }
.chf-ink .egr-chiffre, .chf-ink2 .egr-chiffre, .chf-hero .egr-chiffre { color: var(--accent-txt-sombre); }
.egr-note { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid currentColor; font-size: .92rem; max-width: 62ch; }

/* ── blocs ── */
.chf-list { margin: 0 0 1.2em; padding: 0; list-style: none; }
.chf-list li { position: relative; padding-left: 1.5rem; margin-bottom: .7em; }
.chf-list li::before { content: ""; position: absolute; left: 0; top: .75em; width: .85rem; height: 1px; background: var(--accent); }

.chf-cartes { display: grid; gap: 1px; background: var(--line-paper); border: 1px solid var(--line-paper); margin-bottom: 1.4rem; }
.chf-ink .chf-cartes, .chf-ink2 .chf-cartes { background: var(--line); border-color: var(--line); }
@media (min-width: 46rem) { .chf-cartes { grid-template-columns: 1fr 1fr; } }
.chf-carte { background: var(--paper); padding: clamp(1.15rem, 2.5vw, 1.75rem); }
.chf-paper2 .chf-carte { background: var(--paper-2); }
.chf-ink .chf-carte { background: var(--ink); }
.chf-ink2 .chf-carte { background: var(--ink-2); }
.chf-carte p:last-child { margin-bottom: 0; }
.chf-carte-l { text-decoration: none; display: block; }
.chf-carte-l:hover { background: var(--accent); color: var(--accent-ink); }
.chf-carte-go { display: inline-block; margin-top: .6rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-txt-clair); }
.chf-ink .chf-carte-go, .chf-ink2 .chf-carte-go { color: var(--accent-txt-sombre); }
.chf-carte-l:hover .chf-carte-go { color: var(--accent-ink); }

.chf-steps { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.chf-steps li { padding: 1.15rem 0 1.15rem 1.5rem; border-top: 1px solid var(--line-paper); position: relative; }
.chf-steps li::before { content: ""; position: absolute; left: 0; top: 1.9rem; width: .85rem; height: 1px; background: var(--accent); }
.chf-ink .chf-steps li, .chf-ink2 .chf-steps li { border-top-color: var(--line); }
.chf-steps li:last-child { border-bottom: 1px solid var(--line-paper); }
.chf-ink .chf-steps li:last-child, .chf-ink2 .chf-steps li:last-child { border-bottom-color: var(--line); }
.chf-steps h3 { margin-bottom: .3rem; }
.chf-steps p { margin: 0; }

.chf-objection { border-left: 2px solid var(--accent); padding-left: clamp(1rem, 3vw, 2rem); }
.chf-obj-q { font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); font-weight: 300; line-height: 1.32; margin-bottom: .9rem; }

.chf-encadre { border: 1px solid var(--accent-txt-clair); padding: clamp(1.1rem, 2.5vw, 1.6rem); margin: 1.6rem 0; }
.chf-encadre h3 { color: var(--accent-txt-clair); margin-bottom: .5rem; }
.chf-ink .chf-encadre h3, .chf-ink2 .chf-encadre h3 { color: var(--accent-txt-sombre); }
.chf-encadre p:last-child { margin-bottom: 0; }

.chf-normes { list-style: none; margin: 1.4rem 0; padding: 0; border-top: 1px solid currentColor; }
.chf-normes li { padding: .85rem 0; border-bottom: 1px solid currentColor; font-size: .93rem; }
.chf-note { font-size: .84rem; opacity: .75; }

.chf-tw { overflow-x: auto; margin-bottom: 1.4rem; }
.chf-table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .92rem; }
.chf-table th, .chf-table td { text-align: left; padding: .8rem .9rem; border: 1px solid var(--line-paper); vertical-align: top; }
.chf-ink .chf-table th, .chf-ink .chf-table td, .chf-ink2 .chf-table th, .chf-ink2 .chf-table td { border-color: var(--line); }
.chf-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.chf-table tbody th { font-weight: 700; }

.chf-suite { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 1.5rem; }
.chf-suite a { font-weight: 700; font-size: .92rem; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: .15rem; }
.chf-suite a:hover { color: var(--accent); }
.chf-ext a { font-size: .92rem; }

.chf-faq details { border-top: 1px solid var(--line-paper); }
.chf-faq details:last-child { border-bottom: 1px solid var(--line-paper); }
.chf-faq summary { cursor: pointer; padding: 1.1rem 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.chf-faq summary::-webkit-details-marker { display: none; }
.chf-faq summary::after { content: "+"; color: var(--accent-txt-clair); font-weight: 300; font-size: 1.4rem; line-height: 1; }
.chf-faq details[open] summary::after { content: "–"; }
.chf-faq details > div { padding-bottom: 1.2rem; max-width: 68ch; }

.chf-reprise { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.chf-reprise p { margin: 0; font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem); font-weight: 300; }

/* ── éditorial (blx-) ── */
.blx-chapo { font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem); font-weight: 300; border-left: 2px solid var(--accent); padding-left: 1.25rem; max-width: 60ch; }
.blx-toc { border: 1px solid var(--line-paper); padding: 1.25rem 1.5rem; margin-top: 2rem; }
.blx-toc p { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 .7rem; color: var(--accent-txt-clair); }
.blx-toc ol { margin: 0; padding-left: 1.2rem; font-size: .93rem; }
.blx-toc li { margin-bottom: .35rem; }
.blx-corps { max-width: 68ch; }
.blx-corps h2 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); margin-top: 2.5rem; }
.blx-corps h2:first-child { margin-top: 0; }

.blx-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-paper); border: 1px solid var(--line-paper); }
@media (min-width: 52rem) { .blx-liste { grid-template-columns: 1fr 1fr; } }
.blx-carte { display: grid; grid-template-columns: 96px 1fr; gap: 1.1rem; background: var(--paper-2); padding: 1.15rem; text-decoration: none; align-items: start; }
.blx-carte:hover { background: var(--accent); color: var(--accent-ink); }
.blx-vignette img { width: 96px; height: 72px; object-fit: cover; filter: grayscale(.5) contrast(1.05); }
.blx-crumb { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-txt-clair); margin-bottom: .35rem; }
.blx-carte:hover .blx-crumb { color: var(--accent-ink); }
.blx-t { display: block; font-weight: 700; line-height: 1.25; margin-bottom: .35rem; }
.blx-d { display: block; font-size: .84rem; opacity: .82; }

/* ── pied ── */
.chf-ft { background: var(--ink); color: var(--sur-ink); padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem; border-top: 1px solid var(--accent); }
.chf-ft-cols { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .chf-ft-cols { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 68rem) { .chf-ft-cols { grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; } }
.chf-ft h3 { font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-txt-sombre); margin-bottom: .9rem; }
.chf-ft ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.chf-ft li { margin-bottom: .45rem; }
.chf-ft a { text-decoration: none; opacity: .85; }
.chf-ft a:hover { opacity: 1; color: var(--accent-txt-sombre); }
.chf-ft p { font-size: .88rem; }
.chf-ft-normes { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--sur-ink-mu); max-width: 90ch; }
.chf-ft-end { font-size: .78rem; color: var(--sur-ink-mu); margin: 1rem 0 0; }

/* ── volet latéral ── */
.chf-drawer { background: var(--ink-2); color: var(--sur-ink); border-left: 1px solid var(--accent); padding: clamp(1.25rem, 4vw, 2.25rem); }
/* G76 : cible tactile d'au moins 44 px. */
.chf-drawer-close { background: transparent; border: 1px solid var(--line); color: inherit; font-family: inherit; font-size: .9rem; min-height: 46px; padding: .6rem 1.2rem; cursor: pointer; margin-bottom: 1.5rem; }
.chf-drawer-close:hover { border-color: var(--accent); color: var(--accent); }
.chf-drawer .chf-f input, .chf-drawer .chf-f select, .chf-drawer .chf-f textarea { border-color: oklch(62% 0.030 250); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* kit de comportements (gen_kit_components.py, graine = domaine) */
/* Bloc CSS minimal à coller dans theme.css du site — généré par gen_kit_components.py.
   chf- est déjà substitué par le préfixe du site dans le fichier livré ; ce gabarit
   reste en clair ici pour qu'on sache ce qui a été injecté. */

/* --- en-tête (data-hdr) --- */
/* .chf--is-solid est ajoutée quand la page a défilé au-delà du seuil — l'état est
   TOUJOURS correct dès le premier rendu (les 3 variantes du générateur synchronisent
   immédiatement, jamais seulement au prochain scroll). Adapter le rendu visuel à la
   direction du site : */
[data-hdr] { transition: background-color .2s ease, box-shadow .2s ease; }
[data-hdr].chf--is-solid { /* ex. background:var(--paper); box-shadow:0 1px 0 var(--line); */ }

/* --- callbar mobile (data-mbar) --- */
:root { --chf--callbar-h: 64px; } /* repli no-JS, écrasé en direct par le générateur */
[data-mbar] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; }
/* Exemple d'usage — à poser sur le bouton d'envoi du hero pour ne jamais être recouvert :
   .hero-submit { margin-bottom: var(--chf--callbar-h); } */

/* --- volet latéral (data-drawer) --- */
[data-drawer] {
  position: fixed; inset: 0 0 0 auto; width: min(468px, 100vw); z-index: 90;
  transform: translateX(101%); transition: transform .28s ease; overflow-y: auto;
}
[data-drawer].chf--is-open { transform: translateX(0); }
[data-drawer-scrim] {
  position: fixed; inset: 0; z-index: 85; opacity: 0; pointer-events: none;
  transition: opacity .22s ease; background: oklch(0.22 0.03 250 / .5);
}
/* :has() plutôt qu'une classe posée en plus par le JS sur le scrim — un point de moins à
   maintenir en cohérence entre script et CSS. */
body:has([data-drawer].chf--is-open) [data-drawer-scrim] { opacity: 1; pointer-events: auto; }

/* verrouillage du scroll body pendant que le volet est ouvert */
html.chf--scroll-locked { overflow: hidden; }
html.chf--scroll-locked body { position: fixed; left: 0; right: 0; width: 100%; }

/* --- simulateur (data-sim) --- */
[data-sim-result] { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════
   Correctifs de RENDU mesurés le 12/09 (audit_gates --rendered).
   ══════════════════════════════════════════════════════════════════════ */

/* G61 + G31-MOBILE : sous 64rem, la navigation se replie derrière un bouton.
   Le repli est natif (<details>) : aucun script, donc rien à casser sans JS.
   Au-dessus de 64rem, la navigation est forcée ouverte et le bouton disparaît. */
/* G61 : dans l'en-tête flex, c'est le LOGO qui se comprime, jamais la navigation.
   Sans cela, la piste de la navigation passe sous la largeur de ses propres liens et
   le dernier lien déborde de son conteneur (24 px mesurés à 1440 px le 12/09). */
.chf-menu { position: relative; flex: 0 0 auto; min-width: 0; }
.chf-logo { flex: 0 1 auto; }
.chf-btn-hd { flex: 0 0 auto; }
.chf-nav > ul { flex-wrap: wrap; }
.chf-menu > summary {
  list-style: none; cursor: pointer; font-weight: 700; font-size: .86rem;
  padding: .6rem .9rem; border: 1px solid var(--line); min-height: 44px;
  display: flex; align-items: center; gap: .45rem;
  max-width: 34vw; overflow: hidden; min-width: 0;
}
.chf-menu > summary::-webkit-details-marker { display: none; }
.chf-menu > summary::after { content: "▾"; opacity: .7; }
.chf-menu[open] > summary::after { content: "▴"; }
.chf-menu > .chf-nav {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 80;
  background: var(--surface); border: 1px solid var(--line);
  min-width: min(22rem, calc(100vw - 2rem)); padding: .4rem;
  max-height: min(70vh, 34rem); overflow-y: auto;
}
.chf-menu > .chf-nav ul { flex-direction: column; gap: 0; }
.chf-menu > .chf-nav > ul > li { border-bottom: 1px solid var(--line); }
.chf-menu > .chf-nav > ul > li:last-child { border-bottom: 0; }
.chf-nav a, .chf-nav summary { min-height: 44px; display: flex; align-items: center; min-width: 0; }
.chf-drop a { flex-direction: column; align-items: flex-start; justify-content: center; gap: .15rem; }
.chf-drop a, .chf-drop small { white-space: normal; }

/* Au-dessus du seuil, la navigation est déployée et visible QUEL QUE SOIT l'état du
   <details> : un <details> fermé n'est pas mis en page du tout (clientWidth 0), et
   l'affichage de bureau ne doit pas dépendre du script (G61, mesuré le 12/09). */
@media (min-width: 90rem) {
  .chf-menu > summary { display: none; }
  .chf-menu::details-content { content-visibility: visible !important; block-size: auto !important; }
  .chf-menu > .chf-nav {
    display: block !important; position: static; background: none; border: 0;
    padding: 0; min-width: 0; max-height: none; overflow: visible;
  }
  .chf-menu > .chf-nav ul { flex-direction: row; gap: .25rem; }
  .chf-menu > .chf-nav > ul > li { border-bottom: 0; }
}

/* G32 : la soumission du formulaire doit tenir dans le premier écran.
   Le hero image-led était trop haut : on le comprime partout, et on retire
   sa hauteur plancher sur les pages qui portent la bande de formulaire. */
.chf-hero-img-on { min-height: 0; }
.chf-hero-in { padding-block: clamp(1.9rem, 4.5vw, 3.4rem) clamp(1.1rem, 2.2vw, 1.7rem); }
.chf-hero h1 { font-size: clamp(1.75rem, 1.1rem + 3vw, 3.1rem); max-width: 18ch; }
.chf-hero .chf-lede { font-size: clamp(.98rem, .94rem + .3vw, 1.18rem); max-width: 52ch; margin-bottom: 0; }
.chf-hero .chf-crumb { margin-bottom: .9rem; }
.chf-band { padding-block: clamp(1.1rem, 2.2vw, 1.6rem); }
.chf-band .chf-ftitle { font-size: 1.05rem; }
.chf-band .chf-fsub { margin-bottom: .8rem; }
.chf-band .chf-f > div { margin-bottom: .7rem; }
.chf-band .chf-consent { margin: .3rem 0 .6rem; }

/* G76 : un volet fermé ne doit être ni visible ni focalisable, même hors écran. */
[data-drawer] { visibility: hidden; }
[data-drawer].chf--is-open { visibility: visible; }

/* G66 : rappel de conversion intercalé dans les longues pages. */
.chf-relais { border-block: 1px solid var(--accent-txt-sombre); }
.chf-relais .chf-reprise { padding-block: .4rem; }

/* G32 + G66 : bande d'appel des pages sans formulaire. */
.chf-appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.chf-appel p { margin: 0; font-size: clamp(1rem, .95rem + .4vw, 1.25rem); font-weight: 300; }

/* I74 : « nowrap » est réservé aux largeurs où il ne peut pas déborder. */
@media (min-width: 48rem) {
  .chf-logo, .chf-btn-hd, .chf-menu > summary { white-space: nowrap; }
}