/*
 * CHARTE BARBERX — la charte COMMUNE de l'app et du site : `claude-master/transverse/charte-barber-x.md`.
 * Les valeurs sont celles de l'app (`ineed-app` `packages/charte/src/couleurs.json`), MESURÉES sur le logo
 * (`pieces-jointes/logo barber x.jpg`) : le fond, la médiane de l'or du « B », la médiane de l'argent des biseaux,
 * le dégradé brossé (percentiles 5/25/50/75/95 des pixels or). Contrastes WCAG 2 recalculés pour le site (DA-1).
 * ⚠️ DA-4 (30 septembre 2026) : LE SITE SUIT L'APP — l'accent est le CHAMPAGNE de l'app (`--champagne`, DA-3), les
 * formes sont celles de l'app (`--rayon-*`), le logotype est en Cinzel comme celui de l'app.
 *
 * ⚠️ LE MONDE EST NOIR, ET LE CHAMPAGNE EST L'ACCENT. `--champagne` donne 11,48:1 sur `--fond` (10,04:1 sur
 * `--surface`) : il passe en TEXTE. Le noir sur champagne donne 11,48:1 — c'est le bouton. ⚠️ JAMAIS de champagne sur le
 * crème de l'app (1,42:1). ⚠️ `--or-degrade` (le brossé du logo) ne porte JAMAIS de texte : son dernier ton (#7E4A1A)
 * tombe à 2,67:1.
 *
 * ⚠️ AUCUNE COULEUR EN DUR HORS DE CE BLOC. Une valeur écrite dans une règle est une recopie : elle ne suit pas le
 * jour où la charte bouge. Les seules exceptions sont les images fabriquées (`tools/icones.php`), le manifeste,
 * la balise `theme-color` et les e-mails (ni un JSON, ni une balise meta, ni un client de messagerie ne lisent une
 * variable CSS) : chacune le dit. Garde : `tests/Page/MarqueTest::testAucuneCouleurEnDurHorsDesTokens`.
 *
 * ⚠️ Cette feuille remplace la charte iNeed (fond clair, bleu `#003D90`, vert `#2DB07A`) : la compétence
 * `charte-ineed` qui la décrit est PÉRIMÉE par la décision « BarberX ».
 */

:root {
    color-scheme: dark;          /* les contrôles natifs (listes, barres de défilement) suivent le fond */

    /* Les noirs. */
    --fond: #0D0D0D;             /* le fond du logo, mesuré — `fond` de l'app */
    --fond-alt: #141414;         /* sections alternées — propre au site, dérivé */
    --surface: #1C1C1F;          /* cartes, agenda, bannière — `surface` de l'app */
    --trait: #3A3833;            /* filets de DÉCOR (1,66:1) — jamais le bord d'un champ — `bordure` */
    --trait-fort: #98918B;       /* bord des champs : 6,25:1 sur fond, 5,47:1 sur surface (≥ 3:1) — `bordureChamp` */

    /* ═══ DA-4 (30 septembre 2026) : LE SITE SUIT L'APPLICATION. Alexandre : « Oui il faut que le site suive l'application
       en DA. » L'accent n'est plus l'or ambré du logo (`#E0A348`, DA-1 et DA-2) mais le CHAMPAGNE de l'app (DA-3, mesuré sur
       la maquette de ZigZag). Le token s'appelle `--champagne`, comme dans l'app : un `--or` à la valeur champagne mentirait
       (même motif que le renommage `or` → `champagne` de DA-3). Contrastes recalculés pour le site (DA-4) :
       `lots/2026-09/da4-captures/contrastes.py`. */
    --champagne: #E6C192;        /* boutons, liens, chiffres, filets d'accent : 11,48:1 sur fond, 10,88:1 sur fond-alt, 10,04:1 sur surface — `champagne` */
    --sur-champagne: #0D0D0D;    /* le texte posé SUR le champagne (bouton principal) : 11,48:1 — `surChampagne` */
    --voile-champagne: rgba(230, 193, 146, .12);   /* fond teinté (créneau libéré, message réussi) : le champagne y garde 7,72:1, le texte 11,95:1 sur surface */

    /* L'or du LOGO — le brossé du « B » (`degradeOr` de l'app). Aucune règle ne le lit (DA-2) : il reste écrit ici parce
       que le logo et les images fabriquées le portent. ⚠️ Jamais sous du texte (son dernier ton tombe à 2,67:1). */
    --or-degrade: linear-gradient(135deg, #FEECAA 0%, #FBD574 15%, #E0A348 45%, #AF7231 85%, #7E4A1A 100%);

    /* L'argent — les biseaux du logo. */
    --argent: #C2BBB5;           /* médiane des biseaux : 10,24:1 sur fond */
    --argent-sombre: #98918B;    /* 6,25:1 sur fond */

    /* Le texte. */
    --texte: #F8F4F1;            /* blanc cassé : 17,77:1 sur fond, 15,54:1 sur surface — `texte` */
    --doux: #C2BBB5;             /* texte secondaire : 10,24:1 sur fond, 8,96:1 sur surface — `texteDoux` */

    /* Les états. */
    --erreur: #F97066;           /* texte d'erreur : 6,98:1 sur fond, 6,10:1 sur surface — `danger` */
    --rouge: #E5484D;            /* DÉCOR : la barre des « douleurs » (propre au site) */
    --voile-clair: rgba(255, 255, 255, .03);
    --voile-erreur: rgba(249, 112, 102, .08);
    --ombre: rgba(0, 0, 0, .55);

    /* ⚠️ LES TITRES SONT EN INTER, comme le texte (choix d'Alexandre, 28 septembre 2026, après essais sur le site servi :
       « Inter c'est nickel ! »). Refusées avant elle : Chakra Petch (« trop carrée, trop tech »), Bodoni Moda (les déliés
       d'une didone s'effacent sur fond noir), Jost (géométrique, pas convaincante), puis Marcellus, Tenor Sans, Cinzel et
       Plus Jakarta Sans montrées côte à côte (DA-1c). Une seule famille : la marque se distingue par le noir et l'or, pas
       par la police. `--titres` reste une variable à part pour qu'un prochain choix tienne en une ligne.
       *(L'app a pris Inter à R-4.)* */
    --titres: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --corps: 'Inter', 'Segoe UI', system-ui, sans-serif;
    /* ⚠️ DA-4 : LE LOGOTYPE EST EN CINZEL, COMME DANS L'APP (`polices.marque`, DA-3 : « serif fine pour la marque ») — et
       RIEN D'AUTRE : ni titre, ni bouton, ni texte. Inter reste la police de tout le reste (Alexandre, 28 septembre).
       Cinzel est chargée par le lien Google Fonts de `base.html.twig` ; la garde refuse l'un sans l'autre. */
    --marque: 'Cinzel', Georgia, serif;

    /* ═══ DA-2, DIRECTION A « NOIR LUXE » (choisie par Alexandre le 28 septembre 2026, demande de ZigZag : « pas assez
       luxueux — inspire-toi vraiment du site de Louis Vuitton ») : les MÊMES couleurs, le registre d'une maison.
       Relevé sur le site servi de Louis Vuitton (WebKit, 28 septembre) : une seule famille, des titres à 400 et jamais
       en gras, un interlettrage positif, des boutons plats sans ombre, des filets d'un pixel, beaucoup d'air.
       Rapport : `claude-master/lots/2026-09/DA-2-luxe.md`.
       ~~RIEN D'ARRONDI : `--rayon` vaut 0 partout~~ ⚠️ PÉRIMÉ PAR DA-4 (Alexandre, 30 septembre 2026 : « il faut que le
       site suive l'application en DA ») : les coins sont ceux de l'app, un token par RÔLE (plus bas).
       ⚠️ AUCUNE OMBRE, AUCUN DÉGRADÉ SOUS UNE CARTE : ce qui sépare, c'est un filet. `--ombre` n'est plus lu.
       ~~L'OR EST RARE, jamais en aplat~~ ⚠️ DA-4 : le bouton principal est PLEIN champagne, comme dans l'app ; ailleurs,
       le champagne reste un accent (un chiffre, un lien, un filet court au-dessus d'un titre de section).
       ~~LES CAPITALES ESPACÉES SONT RÉSERVÉES AUX LIBELLÉS~~ ⚠️ DA-4b : AUCUNE CAPITALE FORCÉE, comme l'app — navigation,
       étiquettes, surtitres et boutons sont en casse normale. La SEULE exception est le logotype (Cinzel, capitales,
       comme `Logotype.tsx`) : le nom n'est en capitales que là. */
    /* ═══ DA-4 : LES COINS DE L'APP — les valeurs de `rayons` (`ineed-app` `packages/charte/src/theme.ts`, DA-3), un token
       par rôle, le même nom que dans l'app. Un bouton est une PILULE ; une carte a des coins de 16 ; un champ 12 ; un
       créneau, un message, une vignette 10 ; une pastille est ronde. ⚠️ Une règle qui écrit `border-radius` en dur, ou
       qui prend le rayon d'un autre rôle, se désaligne de l'app au premier réglage : garde `DirectionLuxeTest`. */
    --rayon-bouton: 999px;        /* `rayons.bouton` */
    --rayon-pastille: 999px;      /* `rayons.pastille` */
    --rayon-carte: 16px;          /* `rayons.carte` */
    --rayon-champ: 12px;          /* `rayons.champ` */
    --rayon-puce: 10px;           /* `rayons.puce` */
    --filet: 1px;
    /* ═══ DA-4b (Alexandre, 30 septembre 2026 : « Aligne le site sur l'app ») : LES GRAISSES DES TITRES SONT CELLES DE L'APP
       (`polices` de `theme.ts`) — un titre en Inter 600 (`titre`), un titre secondaire en 500 (`titreDemi`). ~~DA-2 : 400,
       h1 et grands chiffres en 300~~ : l'app ne charge que 400, 500 et 600, et le site aussi (`base.html.twig`).
       ⚠️ Jamais le 700 du navigateur : aucune graisse hors des trois chargées (garde `DirectionLuxeTest`). */
    --titres-graisse: 600;        /* `polices.titre` : h1, h2, montants, chiffres */
    --titres-graisse-demi: 500;   /* `polices.titreDemi` : h3, titres de carte, questions */
    --air-section: 128px;         /* 88 avant DA-2 ; 88 sur téléphone */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--corps);
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
}

/* ⚠️ JAMAIS LE GRAS DU NAVIGATEUR (700) : les graisses sont celles de l'app (DA-4b) — 600 pour h1 / h2, 500 pour h3. */
h1, h2, h3 { font-family: var(--titres); font-weight: var(--titres-graisse); letter-spacing: 0; line-height: 1.2; margin: 0; text-wrap: balance; }
h3 { font-weight: var(--titres-graisse-demi); }
p { margin: 0; }

a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--champagne);
    outline-offset: 3px;
}

/* ⚠️⚠️ LA COULEUR DES LIENS DE CONTENU — POSÉE LE 19 SEPTEMBRE 2026, ET ELLE MANQUAIT DEPUIS LE
   DÉBUT. Le site n'avait AUCUNE règle `a { color }` : les quinze liens de contenu s'affichaient en
   `#0000EE`, le bleu par défaut du navigateur, et en violet une fois visités. Personne ne l'avait
   vu parce que ça ne se voit QUE sur un écran — le HTML servi est juste, la classe est juste, et
   aucun test ne lit une couleur calculée.
   ⚠️ LA PREUVE QUE C'EST LE BON NIVEAU : `.consentement a` portait déjà cette couleur. On avait
   corrigé l'INSTANCE qu'on regardait, pas le défaut — et les quatorze autres liens sont restés
   bleu navigateur pendant ce temps.
   ⚠️ `:not([class])` PLUTÔT QU'UNE LISTE DE SÉLECTEURS : tout lien porteur d'une classe décide
   lui-même (`.bouton`, `.liens a`, `.pied a`), et une liste écrite à la main oublierait le
   prochain contexte. Vérifié : aucun lien sans classe ne vit dans une `.bande` bleue — celui qui
   y arriverait serait illisible, et c'est un cas neuf à traiter comme tel. */
main a:not([class]) { color: var(--champagne); }
main a:not([class]):hover { color: var(--texte); }

.enveloppe { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
.colonne { max-width: 68ch; }

/* ═══ En-tête et pied ═══ */

.barre { border-bottom: var(--filet) solid var(--trait); background: var(--fond); position: sticky; top: 0; z-index: 20; }
.barre-int { display: flex; align-items: center; gap: 28px; padding-block: 18px; }

/* ⚠️ DA-4 : LE LOGOTYPE EST CELUI DE L'APP (`Logotype.tsx`, DA-3) — le « B » (inchangé) + le nom en `--marque` (Cinzel
   400), en CAPITALES, interlettrage .28 em, le nom à 62 % de la hauteur du « B », blanc cassé. Les capitales sont un STYLE :
   le texte reste « BarberX » (`Marque::NOM`), et c'est lui que lit l'accessibilité. ⚠️ C'est le SEUL élément qui porte le
   nom en capitales : le pied, qui le porte aussi, reste en casse normale. Jamais en `--titres` : la police d'un h2 ne
   change pas la marque. */
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--marque); font-weight: 400; font-size: 1.47rem; line-height: 1; text-transform: uppercase; letter-spacing: .28em; color: var(--texte); text-decoration: none; white-space: nowrap; }
/* ⚠️ Le logo est le « B » VECTORIEL (`assets/images/marque-b.svg`), la seule géométrie de la marque — pas
   une tuile redessinée en CSS : deux dessins de la même marque divergent au premier ajustement.
   Sans son carré : sur un en-tête déjà noir, le carré ne se verrait que par son liseré. */
.logo-b { height: 38px; width: 38px; flex: none; display: block; }

.liens { display: none; gap: 26px; margin-left: auto; list-style: none; margin-block: 0; padding: 0; }
.liens a { color: var(--doux); text-decoration: none; font-size: .9rem; font-weight: 500; padding-block: 4px; border-bottom: var(--filet) solid transparent; white-space: nowrap; }
.liens a:hover { color: var(--texte); }
/* La page courante : le texte clair et un filet champagne dessous — l'accent en trait, comme l'onglet actif de l'app. */
.liens a.actif { color: var(--texte); border-bottom-color: var(--champagne); }

.barre .bouton { margin-left: auto; }
/* DA-4 : la navigation n'apparaît qu'à partir de 1140 px. Entre 900 et 1120, elle débordait DÉJÀ avant DA-4 (mesuré en
   WebKit : page de 920 px à 900, bouton de l'en-tête sur deux lignes jusqu'à 1000) ; le logotype en Cinzel, plus large,
   aggravait (1113 px). En dessous, le pied porte tous les liens, comme sur téléphone. */
@media (min-width: 1140px) {
    .liens { display: flex; }
    .barre .bouton { margin-left: 0; }
}
/* Sur un téléphone étroit, le bouton de l'en-tête se resserre : le logotype de l'app garde ses proportions. */
@media (max-width: 480px) { .barre .bouton { padding: 10px 18px; font-size: .88rem; } }
/* Sous 380 px (petits téléphones), le logotype garde son dessin et ses proportions entre « B » et nom, mais réduit : sinon
   l'en-tête déborde (mesuré : 375 px de page à 320 et 360). */
@media (max-width: 379px) {
    .barre-int { gap: 14px; }
    .logo { gap: 8px; font-size: 1.1rem; letter-spacing: .22em; }
    .logo-b { width: 29px; height: 29px; }
    .barre .bouton { padding: 9px 14px; font-size: .82rem; }
}

.pied { border-top: var(--filet) solid var(--trait); padding-block: 72px 56px; color: var(--doux); font-size: .82rem; }
.pied a { color: var(--doux); text-decoration: none; }
.pied a:hover { color: var(--texte); }
/* ⚠️ PAS DE CAPITALES DANS LE PIED : un de ses liens porte le nom de la marque (« Les salons qui utilisent … »). */
.pied-liens { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 40px; font-size: .84rem; letter-spacing: .02em; }

/* ═══ Boutons ═══ */

.bouton {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 26px; border-radius: var(--rayon-bouton); background: var(--champagne); color: var(--sur-champagne);
    font-family: var(--corps); font-weight: 600; font-size: .94rem; line-height: 1.4;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    border: var(--filet) solid var(--champagne); transition: background .2s ease, color .2s ease, border-color .2s ease;
}
/* ⚠️ DA-4 : LE BOUTON EST CELUI DE L'APP (`ui.tsx`, DA-3) — une PILULE PLEINE champagne, libellé noir en Inter 600, casse
   normale. ~~DA-2 : un cadre fin, libellé en capitales, l'or n'emplit qu'au survol~~ : périmé, l'app le contredit.
   Au survol (l'app n'en a pas : c'est le geste d'une souris), le bouton se VIDE — le cadre champagne de DA-2 revient.
   Contrastes : le noir sur le champagne 11,48:1 ; le champagne sur le fond 11,48:1 (survol). */
.bouton:hover { background: transparent; color: var(--champagne); }
/* ⚠️ `--clair` GARDE SON NOM (il est dans huit gabarits) : c'est le bouton SECONDAIRE de l'app — une pilule `--surface`
   cerclée `--trait-fort` (`bordureChamp`, 5,47:1 sur la surface, ≥ 3:1), libellé blanc cassé (15,54:1). */
.bouton--clair { background: var(--surface); color: var(--texte); border-color: var(--trait-fort); }
.bouton--clair:hover { background: var(--surface); color: var(--champagne); border-color: var(--champagne); }
.bouton--grand { padding: 16px 32px; font-size: 1rem; }

/* ═══ Sections ═══ */

.section { padding-block: var(--air-section); }
.section--alt { background: var(--fond-alt); border-block: var(--filet) solid var(--trait); }
/* Deux sections sur le même fond qui se suivent : l'air s'additionnait (256 px de vide entre deux titres). Le filet or
   du titre suivant marque déjà la coupure ; la moitié de l'air suffit. */
.section:not(.section--alt) + .section:not(.section--alt),
.intro-page + .section:not(.section--alt) { padding-top: calc(var(--air-section) / 2); }
/* Une section au contenu centré : le filet du titre se centre avec lui (sinon il reste seul à gauche). */
.enveloppe--centree { text-align: center; }
.enveloppe--centree h2::before, .enveloppe--centree .intro, .enveloppe--centree .chapo { margin-inline: auto; }
.section h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: var(--titres-graisse); letter-spacing: 0; }
/* Le filet champagne au-dessus du titre de section : le seul accent de la plupart des sections (DA-2, champagne depuis DA-4). */
.section h2::before { content: ""; display: block; width: 36px; height: var(--filet); background: var(--champagne); margin-bottom: 28px; }
.section .intro { margin-top: 22px; color: var(--doux); max-width: 62ch; font-size: 1.04rem; line-height: 1.8; }

/* L'appel vers l'outil gratuit, sur l'accueil. `p { margin: 0 }` est global : sans cette règle le
   bouton serait collé au paragraphe au-dessus — et une classe sans règle CSS est un défaut connu
   de ce parc, pas une commodité de nommage. */
.outil-action { margin-top: 36px; }

.trois { display: grid; gap: 48px; margin-top: 64px; }
@media (min-width: 760px) { .trois { grid-template-columns: repeat(3, 1fr); gap: 56px; } }
.trois h3 { font-size: 1.2rem; font-weight: var(--titres-graisse-demi); margin-bottom: 12px; }
.trois p { color: var(--doux); font-size: .97rem; line-height: 1.8; }

/* DA-2 : la pastille n'est plus une tuile teintée d'or portant un biseau en dégradé — c'est un filet ARGENT, court, qui
   ouvre la colonne. L'or de la section est déjà au-dessus du titre ; trois ors de plus l'auraient banalisé.
   Le `<i>` du gabarit reste (le gabarit ne change pas) et ne dessine plus rien. */
.pastille { width: 24px; height: var(--filet); background: var(--argent-sombre); margin-bottom: 24px; }
.pastille i { display: none; }

/* ═══ La bande — le seul temps fort de chaque page ═══
   ⚠️ ELLE N'EST PLUS UN APLAT DE COULEUR : un aplat d'or porterait du texte, et le dégradé brossé descend à
   2,67:1. La bande est une surface noire bordée du dégradé — l'or fait le cadre, le texte reste lisible. */

/* ⚠️ DA-2 : LE CADRE BROSSÉ (dégradé en bordure de 2 px) EST RETIRÉ — un effet, et le registre n'en a aucun. La bande
   reste le temps fort par l'AIR et la taille du titre, sur la surface, entre deux filets. */
.bande { background: var(--surface); color: var(--texte); border-block: var(--filet) solid var(--trait); }
.bande .enveloppe { padding-block: 96px; display: grid; gap: 36px; align-items: center; }
@media (min-width: 820px) { .bande .enveloppe { grid-template-columns: 1fr auto; gap: 64px; } }
.bande h2 { color: var(--texte); font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: var(--titres-graisse); }
.bande p { margin-top: 18px; color: var(--doux); max-width: 52ch; line-height: 1.8; }
.bande strong { color: var(--champagne); }

/* ═══ Questions repliables — `<details>` natif, aucun JavaScript ═══ */

.question { border-bottom: var(--filet) solid var(--trait); }
.question:first-of-type { border-top: var(--filet) solid var(--trait); margin-top: 48px; }
.question summary {
    cursor: pointer; padding: 26px 0; list-style: none;
    font-family: var(--titres); font-weight: var(--titres-graisse-demi); font-size: 1.08rem;
    display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: "+"; color: var(--champagne); font-size: 1.3rem; font-weight: 400; line-height: 1; flex: none; }
.question[open] summary::after { content: "\2212"; }
.question p { margin-bottom: 28px; padding-right: 40px; color: var(--doux); font-size: .99rem; line-height: 1.8; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   L'ACCUEIL — le héros montre l'agenda plutôt que de le décrire
   ═══════════════════════════════════════════════════════════════════════ */

.heros { padding-block: 120px 136px; }
.heros-grille { display: grid; gap: 64px; align-items: center; }
@media (min-width: 900px) { .heros-grille { grid-template-columns: 1.05fr 1fr; gap: 88px; } }

.heros h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); font-weight: var(--titres-graisse); line-height: 1.08; letter-spacing: -.01em; }
.heros-chapo { margin-top: 32px; font-size: 1.06rem; line-height: 1.8; color: var(--doux); max-width: 46ch; }
.heros-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }
/* La ligne de prix est un LIBELLÉ (des mentions séparées par des points) — en casse normale depuis DA-4b, comme l'app. */
.heros-prix { margin-top: 28px; font-size: .9rem; color: var(--doux); }
.heros-prix strong { color: var(--texte); font-weight: 500; }

/* La promesse de demonstration, sous la ligne de prix : c'est la qu'on hesite. Le filet or la
   detache du prix sans en faire un encadre — elle rassure, elle ne crie pas. */
.heros-demo { margin-top: 16px; padding-left: 14px; border-left: var(--filet) solid var(--champagne); font-size: .92rem; color: var(--doux); }
.heros-demo strong { color: var(--texte); font-weight: 500; }
.heros-demo a { color: var(--champagne); }

/* DA-2 : l'agenda est un OBJET posé, pas une carte qui flotte — un filet, aucune ombre. DA-4 : les coins d'une carte de l'app. */
.agenda { border: var(--filet) solid var(--trait); border-radius: var(--rayon-carte); background: var(--surface); overflow: hidden; }
.agenda-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: var(--filet) solid var(--trait); background: var(--fond-alt); }
.agenda-tete strong { font-weight: 500; font-size: .95rem; letter-spacing: .02em; }
.agenda-tete span { font-size: .82rem; color: var(--doux); }
.agenda-corps { padding: 10px 0; }

.creneau { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: start; padding: 12px 24px; }
.creneau time { font-size: .84rem; color: var(--doux); font-variant-numeric: tabular-nums; padding-top: 2px; }
.creneau-bloc { border-left: var(--filet) solid var(--champagne); padding-left: 14px; }
.creneau-bloc b { display: block; font-weight: 500; font-size: .95rem; }
.creneau-bloc span { font-size: .84rem; color: var(--doux); }
/* La classe garde son nom (le gabarit la porte) : c'est la seconde couleur de l'agenda, l'argent des biseaux. */
.creneau--vert .creneau-bloc { border-left-color: var(--argent-sombre); }
/* Le créneau libéré reste le seul temps fort de l'agenda : le voile champagne est gardé ici (et sous le message réussi,
   la première hypothèse du calculateur). DA-4 : les coins d'un créneau de l'app (`puce`). */
.creneau--libre .creneau-bloc {
    border-left: var(--filet) dashed var(--champagne);
    background: var(--voile-champagne);
    border-radius: var(--rayon-puce);
    padding: 9px 14px;
}
.creneau--libre b { color: var(--champagne); }

/* ═══════════════════════════════════════════════════════════════════════
   LES PAGES INTÉRIEURES — chapeau, grille d'offres, les quatre zéros
   ═══════════════════════════════════════════════════════════════════════ */

.intro-page { padding-block: 112px 72px; text-align: center; }
.intro-page h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: var(--titres-graisse); line-height: 1.1; letter-spacing: -.005em; margin-inline: auto; max-width: 18ch; }
.chapo { margin: 32px auto 0; max-width: 58ch; font-size: 1.06rem; line-height: 1.8; color: var(--doux); }

.grille-section { padding-block: 0 112px; }
.grille-offres { display: grid; gap: 24px; align-items: start; }
@media (min-width: 880px) { .grille-offres { grid-template-columns: repeat(3, 1fr); } }
/* La grille du 30 septembre 2026 n'a que deux formules : deux colonnes, resserrées, pour ne pas laisser une
   troisième colonne vide. */
@media (min-width: 880px) { .grille-offres--deux { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; } }

/* DA-2 : l'offre n'est plus une carte teintée et ombrée. DA-4 : c'est une CARTE de l'app — `--surface`, un filet, coins de
   16. La formule principale se distingue par son filet champagne, rien d'autre. */
.offre {
    display: flex; flex-direction: column; gap: 18px;
    border: var(--filet) solid var(--trait); border-radius: var(--rayon-carte); padding: 40px 32px; background: var(--surface);
}
.offre--principale { border-color: var(--champagne); }
.offre h2 { font-size: 1.4rem; font-weight: var(--titres-graisse-demi); }
.offre-pour { color: var(--doux); font-size: .95rem; min-height: 3em; }
.offre-prix { color: var(--doux); font-size: .88rem; border-top: var(--filet) solid var(--trait); padding-top: 24px; }
.offre-montant { display: block; margin-bottom: 10px; font-family: var(--titres); font-size: 3.2rem; font-weight: var(--titres-graisse); line-height: 1; letter-spacing: 0; color: var(--texte); }
.offre--principale .offre-montant { color: var(--champagne); }
/* L'installation se lit SOUS le prix mensuel, jamais à sa place : c'est le mensuel qu'on compare, et l'installation
   ne se paie qu'une fois. */
.offre-installation { margin: -8px 0 0; color: var(--doux); font-size: .95rem; }
.offre-installation strong { color: var(--texte); font-weight: 500; }

.offre-inclus { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.offre-inclus li { position: relative; padding-left: 24px; font-size: .95rem; line-height: 1.55; }
/* La puce est un tiret fin (un filet), plus un point : rien de rond. */
.offre-inclus li::before { content: ""; position: absolute; left: 0; top: .8em; width: 10px; height: var(--filet); background: var(--argent-sombre); }
.offre--principale .offre-inclus li::before { background: var(--champagne); }

.palier-suivant { margin: 48px auto 0; max-width: 62ch; text-align: center; color: var(--doux); font-size: .97rem; }
.palier-suivant strong { color: var(--texte); font-weight: 500; }

.zeros { margin: 48px 0 0; }
.zero { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 26px 0; border-bottom: var(--filet) solid var(--trait); }
.zero:first-child { border-top: var(--filet) solid var(--trait); }
.zero dt { color: var(--doux); font-size: 1.02rem; }
.zero dd { margin: 0; font-family: var(--titres); font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: var(--titres-graisse); line-height: 1; letter-spacing: 0; color: var(--champagne); white-space: nowrap; }

.note { margin-top: 32px; max-width: 66ch; color: var(--doux); font-size: .93rem; line-height: 1.8; }
.section .intro + .intro { margin-top: 20px; }
.section .intro strong { color: var(--texte); font-weight: 500; }

/* Un texte juridique découpé en sous-parties (/confidentialite, section « L'application », lot I-1) :
   des intertitres et des listes que le reste du site n'a pas. Borné à `.texte-legal` pour ne rien
   changer aux `h3` des autres pages. ⚠️ L'ancre `#application` est ouverte par l'application : sans
   `scroll-margin-top`, l'en-tête collant cacherait le titre (même motif que `#resultat`, plus bas). */
.texte-legal h3 { font-size: 1.15rem; font-weight: var(--titres-graisse-demi); margin-top: 40px; }
.texte-legal .liste { margin: 12px 0 0; padding-left: 20px; max-width: 62ch; color: var(--doux); font-size: 1.04rem; }
.texte-legal .liste li + li { margin-top: 6px; }
.texte-legal .liste strong { color: var(--texte); }
#application { scroll-margin-top: 80px; }

@media (max-width: 640px) {
    :root { --air-section: 88px; }
    .heros { padding-block: 72px 88px; }
    .intro-page { padding-block: 72px 48px; }
    .grille-section { padding-block: 0 80px; }
    .bande .enveloppe { padding-block: 72px; }
    .offre-pour { min-height: 0; }
    .zero { flex-direction: column; gap: 4px; align-items: flex-start; }
}

/* ═══ Fiches d'informations (mentions légales) et lien mis en avant ═══ */

.fiche { margin: 22px 0 0; }
.fiche > div { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 18px 0; border-bottom: var(--filet) solid var(--trait); }
.fiche > div:first-child { border-top: var(--filet) solid var(--trait); }
.fiche dt { color: var(--doux); min-width: 210px; font-size: .95rem; }
.fiche dd { margin: 0; font-weight: 500; }

.lien-fort { font-family: var(--titres); font-weight: var(--titres-graisse-demi); font-size: 1.15rem; color: var(--champagne); text-decoration: none; border-bottom: var(--filet) solid var(--champagne); padding-bottom: 2px; }

/* ═══ La bannière de consentement — rendue par le serveur, sans JavaScript ═══ */

.consentement {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid var(--trait-fort);
    border-radius: var(--rayon-carte);
    color: var(--doux);
    font-size: .95rem;
}

.consentement__texte { flex: 1 1 320px; }
.consentement__titre { color: var(--texte); font-family: var(--corps); font-weight: 500; margin-bottom: 4px; }
.consentement a { color: var(--champagne); text-decoration: underline; }
.consentement__formulaire { display: flex; flex-wrap: wrap; gap: 12px; }
/* Les deux choix du bandeau (« Tout refuser », « Tout accepter ») sont des boutons SECONDAIRES de même poids — aucun des
   deux n'est poussé. Le cadre champagne les signale comme les seuls gestes du bandeau. */
.consentement__formulaire .bouton { border-color: var(--champagne); }

.cookies-choix { margin-top: 26px; }
.cookies-choix .consentement__formulaire .bouton { border-color: var(--champagne); }

/* ═══ Le formulaire de contact ═══ */

.formulaire { margin-top: 8px; }

.champs { display: grid; gap: 18px; }
@media (min-width: 660px) { .champs { grid-template-columns: 1fr 1fr; } }
.champ--large { grid-column: 1 / -1; }

/* ⚠️ DA-2 : L'ÉTIQUETTE EST EN `--corps` (Inter), PLUS EN `--titres`. La charte le disait (« jamais dans un bouton ni une
   étiquette ») et DA-1c l'avait laissé en dette : une police de titre qui change ne doit pas changer un formulaire.
   DA-4b : l'étiquette de l'app (`ui.tsx`, `libelle`) — Inter 600, casse normale, blanc cassé (17,77:1 sur le fond). */
.formulaire label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--corps);
    font-weight: 600;
    font-size: .875rem;
    color: var(--texte);
}

/* ⚠️ `input[type="number"]` EST DANS CETTE LISTE DEPUIS LE CALCULATEUR (19 septembre 2026), ET IL
   FAUT QU'IL Y RESTE : une liste de sélecteurs écrite à la main ne couvre que les types qu'on a
   déjà rencontrés. Les trois champs chiffrés du calculateur s'affichaient nus — bordure par défaut
   du navigateur, police de système — au milieu d'un formulaire soigné, et RIEN ne le signale : le
   CSS ne lève pas d'erreur pour un sélecteur qui ne correspond à rien. Question à se poser à
   chaque champ neuf : *son type est-il dans cette liste ?* */
.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="tel"],
.formulaire input[type="number"],
.formulaire select,
.formulaire textarea {
    width: 100%;
    padding: 14px 16px;
    border: var(--filet) solid var(--trait-fort);
    border-radius: var(--rayon-champ);
    background: var(--surface);
    color: var(--texte);
    font-family: var(--corps);
    font-size: 1rem;
    line-height: 1.4;
}

.formulaire textarea { resize: vertical; min-height: 120px; }

/* ⚠️ DA-2 : LA LISTE DÉROULANTE PERD SON DESSIN NATIF. Sous WebKit (Safari, donc tout iPhone), `select` gardait un fond
   gris clair arrondi, étranger au reste du formulaire — vu en capture WebKit, invisible sous Chrome. La flèche est
   redessinée par deux dégradés en `--doux` (un chevron), sans image ni couleur hors des tokens. */
.formulaire select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 44px;
    background-image: linear-gradient(45deg, transparent 50%, var(--doux) 50%), linear-gradient(135deg, var(--doux) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}

.formulaire input:focus-visible,
.formulaire select:focus-visible,
.formulaire textarea:focus-visible {
    outline: 2px solid var(--champagne);
    outline-offset: 2px;
    border-color: var(--champagne);
}

.formulaire .help-text, .formulaire .form-help { margin-top: 5px; font-size: .86rem; color: var(--doux); }
.formulaire ul { margin: 6px 0 0; padding-left: 18px; color: var(--erreur); font-size: .88rem; }

.formulaire button[type="submit"] { margin-top: 26px; }

/* ⚠️ LE LEURRE : masqué sans `display: none`, que certains robots détectent. Il reste dans le flux
   du document mais hors de l'écran et hors de la navigation clavier. */
.leurre {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ═══ Les messages après envoi ═══ */

.alerte {
    padding: 18px 22px;
    border-radius: var(--rayon-puce);   /* DA-4 : le message de l'app (`rayons.puce`) */
    border: var(--filet) solid var(--trait);
    margin-bottom: 26px;
    font-size: .98rem;
}
.alerte--succes { border-color: var(--champagne); background: var(--voile-champagne); color: var(--texte); }
.alerte--echec { border-color: var(--erreur); background: var(--voile-erreur); color: var(--erreur); }

/* ═══ LES FICHES MÉTIER ═══ (19 septembre 2026)

   ⚠️ TOUT EST DANS CETTE FEUILLE, comme le reste du site : ce site n'a qu'une feuille, et c'est
   délibéré — cinq pages ne justifient pas un découpage qui ferait dépendre une page de la feuille
   d'une autre. C'est le défaut qui a été payé quatre fois sur webergeron.com. */

.badge-metier {
    margin: 0 0 14px;
    color: var(--doux);
    font-size: .88rem;
    font-weight: 500;
}

/* ⚠️ TROIS BLOCS, ET LA GRILLE LE DIT : `repeat(3, …)` et non `auto-fit`. Une grille souple
   accepterait une quatrième douleur sans broncher — et au quatrième bloc, on cesse de décrire
   quelqu'un pour commencer à énumérer. La contrainte est là pour qu'on la voie. */
.douleurs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 32px;
}

.douleur {
    padding: 32px 28px;
    border-radius: var(--rayon-carte);
    background: var(--voile-clair);
    /* La barre rouge est le seul endroit du site où cette couleur apparaît : elle distingue « le
       problème » de « la réponse » sans avoir à l'écrire. */
    border-left: var(--filet) solid var(--rouge);
}

.douleur h3 {
    margin: 0 0 10px;
    font-size: 1.15rem;
    line-height: 1.35;
}

.douleur p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.7;
}

.reponses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 32px;
}

.reponse h3 {
    margin: 12px 0 8px;
    font-size: 1.15rem;
}

.reponse p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.7;
}

.note--centree {
    text-align: center;
    max-width: 62ch;
    margin-inline: auto;
}

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

/* ⚠️ L'ACCENT D'UN TITRE N'EST PAS `.lien-fort`. Celle-ci est une classe de texte courant, figée à
   1.15rem : posée dans un `h1`, elle rendait l'accent d'un titre de fiche deux fois plus petit que le
   reste du titre — vu à l'écran, pas à la lecture. Une classe empruntée apporte AUSSI sa taille.
   L'accent HÉRITE, il ne fixe que la couleur. */
.accent-titre {
    color: var(--champagne);
}

/* ⚠️ `.heros-demo` PORTE UNE BARRE VERTE À GAUCHE, dessinée pour la colonne du héros de l'accueil.
   Dans un bloc centré, cette barre flotte seule à gauche de la page et ne se rattache à rien. */
.heros-demo--centree {
    padding-left: 0;
    border-left: 0;
}

/* ⚠️ LA PASTILLE « BIENTÔT » N'EST PAS DÉCORATIVE : c'est elle qui rend honnête une phrase qui
   annonce une fonction inexistante. Si elle ne se voyait pas, la page promettrait l'application
   comme si elle tournait. Elle doit donc rester LISIBLE — pas un murmure gris.
   ⚠️ Et le jour où l'application sort, ce sont ces pastilles qu'on retire ; rien d'autre à réécrire. */
.bientot {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: var(--rayon-pastille);   /* DA-4 : une pastille de l'app, ronde (DA-2 l'avait mise à angles francs) */
    background: transparent;
    border: var(--filet) solid var(--champagne);
    color: var(--champagne);
    font-size: .78rem;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}

/* ⚠️ LA RÉSERVE SOUS UNE PUCE : PLUS PETITE, PAS SUPPRIMÉE. « vous ne payez que ce qui part » est
   l'information qui rassure — la retirer coûterait plus que la place qu'elle prend. Ce qui faisait
   un pavé, c'est qu'elle avait le MÊME poids que la fonction elle-même, sur trois lignes. Une
   hiérarchie règle un pavé mieux qu'une coupe. */
.offre-inclus small {
    display: block;
    margin-top: 2px;
    color: var(--doux);
    font-size: .82rem;
    line-height: 1.4;
}

/* ═══ LE CALCULATEUR DE RENDEZ-VOUS MANQUÉS ═══ (19 septembre 2026)

   ⚠️ LE CHIFFRE EST LE SEUL ÉLÉMENT FORT DE LA PAGE, et c'est délibéré : tout ce qui l'entoure est
   volontairement calme. Une page qui crie partout ne fait ressortir rien — et celle-ci n'a qu'une
   chose à faire ressortir, le montant que le gérant vient de calculer lui-même.

   ⚠️ PAS DE COULEUR DE RÉUSSITE NI D'ALARME ICI. Un montant perdu n'est pas une bonne nouvelle : le
   chiffre est dans l'accent de la marque (`--champagne`), pas dans un vert de réussite, et pas en rouge d'alarme
   non plus — ce serait de la peur, et la page ne vend pas de la peur. (Règle d'iNeed, qui mettait le
   chiffre en bleu de marque ; elle survit au changement de charte.) */

/* ⚠️ L'EN-TÊTE EST `position: sticky` : sans cette marge, le saut vers l'ancre place le haut du
   résultat SOUS la barre, et le surtitre disparaît. 80 px = la barre (~65) plus de l'air. */
#resultat { scroll-margin-top: 80px; }

.calc-surtitre {
    font-size: .88rem;
    font-weight: 500;
    color: var(--doux);
}

.calc-montant {
    font-family: var(--titres);
    /* ⚠️ `clamp` ET PAS UNE TAILLE FIXE : « 128 800 € » à 4 rem déborde d'un téléphone étroit, et
       un montant coupé en deux se lit comme deux nombres. La borne basse est lisible à 320 px. */
    font-size: clamp(2.6rem, 9vw, 4.2rem);
    font-weight: var(--titres-graisse);
    line-height: 1;
    letter-spacing: 0;
    color: var(--champagne);
    margin: 6px 0 14px;
}

.calc-detail { color: var(--doux); font-size: .97rem; }

.calc-honnete,
.calc-offre { margin-top: 12px; color: var(--doux); }

.calc-vide { margin-top: 14px; color: var(--doux); }
.calc-vide + p { margin-top: 22px; }

.calc-hypotheses {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 2px;
    border: var(--filet) solid var(--trait);
    border-radius: var(--rayon-carte);
    overflow: hidden;
    background: var(--surface);
}

.calc-hypotheses li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 20px;
    padding: 18px 22px;
    border-bottom: var(--filet) solid var(--trait);
}

.calc-hypotheses li:last-child { border-bottom: 0; }

/* ⚠️ LA PREMIÈRE LIGNE EST LA PLUS PRUDENTE, ET C'EST ELLE QU'ON APPUIE. Mettre en avant la plus
   favorable ferait de l'éventail un argumentaire — exactement ce qu'il est là pour éviter. */
.calc-hypotheses li:first-child { background: var(--voile-champagne); }

.calc-hypothese-cas { color: var(--doux); }

.calc-hypothese-somme {
    font-family: var(--titres);
    font-weight: var(--titres-graisse-demi);
    font-size: 1.25rem;
    color: var(--texte);
    white-space: nowrap;
}

.calc-comparaison {
    margin-top: 22px;
    padding-left: 14px;
    border-left: var(--filet) solid var(--champagne);
    color: var(--doux);
}

.calc-detail-formulaire .champ { max-width: 26rem; }

/* ═══ La page 404 ═══
   ⚠️ LE RYTHME VERTICAL EST ICI, PAS EN STYLE EN LIGNE. Le gabarit écrivait ses marges à la main et
   n'en avait aucune entre ses quatre blocs : « un gros pâté », dit la recette du 20 septembre 2026.
   Le code est volontairement DISCRET — la personne cherche la sortie, pas le numéro de l'erreur. */

.erreur { max-width: 44rem; margin-inline: auto; }

.erreur__code {
    font-family: var(--titres);
    font-weight: var(--titres-graisse);
    font-size: clamp(2.6rem, 7vw, 3.6rem);
    line-height: 1;
    letter-spacing: 0;
    /* DA-4 : l'or sombre du logo (`--or-sombre`) n'est plus un token du site — le code reste DISCRET en argent sombre
       (6,25:1 sur le fond), pas dans l'accent : la personne cherche la sortie, pas le numéro. */
    color: var(--argent-sombre);
    margin: 0 0 18px;
}

.erreur__sorties {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 32px 0 0;
}

/* ═══ L'annuaire des salons (lot 2) ═══ */

.annuaire__ville { font-size: 1.35rem; font-weight: var(--titres-graisse); letter-spacing: 0; margin: 48px 0 18px; }
.annuaire__ville:first-child { margin-top: 0; }
.annuaire__grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .annuaire__grille { grid-template-columns: repeat(2, 1fr); } }
.annuaire__vide { color: var(--doux); text-align: center; }

.salon {
    display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
    border: var(--filet) solid var(--trait); border-radius: var(--rayon-carte); padding: 20px 22px; background: var(--surface);
}
/* ⚠️ LE LOGO D'UN SALON GARDE UN FOND CLAIR : il vient du moteur, souvent dessiné pour un fond blanc et
   parfois transparent — sur le noir du site, un logo sombre disparaîtrait sans que rien ne le signale. */
.salon__logo { width: 72px; height: 72px; border-radius: var(--rayon-puce); object-fit: contain; background: var(--argent); }
.salon__nom { font-size: 1.15rem; font-weight: var(--titres-graisse-demi); margin: 0; }
.salon__ligne { color: var(--doux); font-size: .92rem; margin: 4px 0 0; }
.salon__avis { font-size: .92rem; margin: 6px 0 0; }
.salon__avis-total { color: var(--doux); }
@media (max-width: 480px) {
    .salon { grid-template-columns: auto 1fr; }
    .salon__bouton { grid-column: 1 / -1; justify-self: start; }
}