/*
 * 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).
 *
 * ⚠️ LE MONDE EST NOIR, ET L'OR EST UN ACCENT. `--or` donne 8,79:1 sur `--fond` (7,69:1 sur `--surface`) : il passe
 * en TEXTE. Le noir sur or donne 8,79:1 — c'est le bouton. ⚠️ `--or-sombre` (#AF7231) passe sur le fond (4,88:1)
 * mais ÉCHOUE sur la surface (4,27:1) : décor, ou texte large. ⚠️ `--or-degrade` (le brossé) ne porte JAMAIS de
 * texte : son dernier ton (#7E4A1A) tombe à 2,67:1 — grandes surfaces et filets seulement.
 *
 * ⚠️ 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` */

    /* Les ors. */
    --or: #E0A348;               /* texte, liens, boutons : 8,79:1 sur fond, 7,69:1 sur surface — `or` */
    --or-clair: #FBD574;         /* survol, mise en avant : 13,76:1 sur fond */
    --or-sombre: #AF7231;        /* DÉCOR ou texte large : 4,88:1 sur fond, 4,27:1 sur surface (échoue) */
    --or-degrade: linear-gradient(135deg, #FEECAA 0%, #FBD574 15%, #E0A348 45%, #AF7231 85%, #7E4A1A 100%);   /* le brossé : jamais sous du texte */
    --voile-or: rgba(224, 163, 72, .12);   /* fond teinté : l'or y garde 7,37:1, le texte 14,90:1 */

    /* 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` */
    --sur-or: #0D0D0D;           /* texte posé SUR l'or : 8,79:1 (13,76:1 sur l'or clair) — `surOr` */

    /* 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 garde Chakra Petch jusqu'à son prochain lot : elle devra prendre Inter. */
    --titres: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --corps: 'Inter', 'Segoe UI', system-ui, sans-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 (boutons, cartes, champs, bannière). Le logo est un carré aux angles
       francs ; les coins de 10 px de DA-1 étaient déjà ce motif-là, à moitié. Une règle qui écrit `border-radius`
       en dur au lieu de lire `--rayon` réintroduit un coin que le prochain réglage ne verra pas.
       ⚠️ 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 : le texte d'un bouton, un chiffre, un lien, un filet court au-dessus d'un titre de section.
       Pas de fond or, pas de voile or sur une carte.
       ⚠️ LES CAPITALES ESPACÉES SONT RÉSERVÉES AUX LIBELLÉS (navigation, boutons, étiquettes, surtitres, pied) : jamais un
       titre ni une phrase, qui deviendraient illisibles — ni le NOM de la marque, dont la casse est celle du logotype. */
    --rayon: 0;
    --filet: 1px;
    --titres-graisse: 400;        /* un titre de maison n'est jamais gras : 400 (500 au plus fort) */
    --titres-graisse-forte: 500;
    --titres-graisse-fine: 300;   /* le h1 et les grands chiffres ; une police sans 300 prend son 400, sans faux maigre */
    --libelle-interlettrage: .16em; /* les libellés en capitales : navigation, boutons, étiquettes, surtitres */
    --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) : un titre de maison est posé, pas crié (DA-2 : 400, lu sur `--titres-graisse`). */
h1, h2, h3 { font-family: var(--titres); font-weight: var(--titres-graisse); letter-spacing: 0; line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0; }

a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--or-clair);
    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(--or); }
main a:not([class]):hover { color: var(--or-clair); }

.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; }

/* ⚠️ LE NOM DU LOGOTYPE RESTE EN `--corps` (Inter), PAS EN `--titres` : le logotype de la charte est « le B + le nom en
   Inter ». Le lier à la police des titres changerait la marque le jour où l'on change la police d'un h2. */
.logo { display: flex; align-items: center; gap: 12px; font-family: var(--corps); font-weight: 500; font-size: 1.25rem; letter-spacing: .06em; 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: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--libelle-interlettrage); padding-block: 4px; border-bottom: var(--filet) solid transparent; }
.liens a:hover { color: var(--texte); }
/* La page courante : le texte clair et un filet or dessous — l'or en trait, pas en aplat. */
.liens a.actif { color: var(--texte); border-bottom-color: var(--or); }

.barre .bouton { margin-left: auto; }
@media (min-width: 900px) {
    .liens { display: flex; }
    .barre .bouton { margin-left: 0; }
}

.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); background: transparent; color: var(--or);
    font-family: var(--corps); font-weight: 500; font-size: .74rem; line-height: 1.4; text-transform: uppercase;
    letter-spacing: var(--libelle-interlettrage); text-decoration: none; cursor: pointer;
    border: var(--filet) solid var(--or); transition: background .2s ease, color .2s ease, border-color .2s ease;
}
/* ⚠️ DA-2 : LE BOUTON EST UN CADRE FIN, PAS UN APLAT. Plein or, il était l'élément le plus fort de chaque écran ; un
   filet or et un libellé en capitales disent la même chose sans crier. L'or n'emplit le cadre qu'au survol.
   Contrastes : l'or sur le fond 8,79:1, le noir sur l'or 8,79:1 (survol). Angles francs (`--rayon`). */
.bouton:hover { background: var(--or); color: var(--sur-or); }
/* ⚠️ `--clair` GARDE SON NOM (il est dans huit gabarits) mais plus son sens : c'est le bouton SECONDAIRE —
   depuis DA-2, un cadre ARGENT et un libellé blanc cassé (17,77:1), pour que l'or reste au bouton principal.
   Le filet `--trait-fort` fait 6,25:1 sur le fond (≥ 3:1, un contour de contrôle). */
.bouton--clair { color: var(--texte); border-color: var(--trait-fort); }
.bouton--clair:hover { background: transparent; color: var(--or); border-color: var(--or); }
.bouton--grand { padding: 17px 34px; font-size: .76rem; }

/* ═══ 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 or au-dessus du titre de section : le seul or de la plupart des sections (DA-2). Un trait, pas un aplat. */
.section h2::before { content: ""; display: block; width: 36px; height: var(--filet); background: var(--or); 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); 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-fine); }
.bande p { margin-top: 18px; color: var(--doux); max-width: 52ch; line-height: 1.8; }
.bande strong { color: var(--or); }

/* ═══ 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); 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(--or); font-size: 1.3rem; font-weight: 300; 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-fine); 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), pas une phrase : capitales espacées. */
.heros-prix { margin-top: 28px; font-size: .7rem; text-transform: uppercase; letter-spacing: var(--libelle-interlettrage); 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(--or); font-size: .92rem; color: var(--doux); }
.heros-demo strong { color: var(--texte); font-weight: 500; }
.heros-demo a { color: var(--or); }

/* DA-2 : l'agenda est un OBJET posé, pas une carte qui flotte — angles francs, un filet, aucune ombre. */
.agenda { border: var(--filet) solid var(--trait); border-radius: var(--rayon); 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: .68rem; text-transform: uppercase; letter-spacing: var(--libelle-interlettrage); 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(--or); 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 or est gardé ici, et ICI SEULEMENT. */
.creneau--libre .creneau-bloc {
    border-left: var(--filet) dashed var(--or-clair);
    background: var(--voile-or);
    border-radius: var(--rayon);
    padding: 9px 14px;
}
.creneau--libre b { color: var(--or-clair); }

/* ═══════════════════════════════════════════════════════════════════════
   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-fine); 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); } }

/* DA-2 : l'offre n'est plus une carte teintée et ombrée, c'est un CADRE fin sur le fond. La formule principale se
   distingue par son filet or, rien d'autre. */
.offre {
    display: flex; flex-direction: column; gap: 18px;
    border: var(--filet) solid var(--trait); border-radius: var(--rayon); padding: 40px 32px; background: transparent;
}
.offre--principale { border-color: var(--or); }
.offre h2 { font-size: 1.4rem; font-weight: var(--titres-graisse); }
.offre-pour { color: var(--doux); font-size: .95rem; min-height: 3em; }
.offre-prix { color: var(--doux); font-size: .7rem; text-transform: uppercase; letter-spacing: var(--libelle-interlettrage); 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-fine); line-height: 1; letter-spacing: 0; text-transform: none; color: var(--texte); }
.offre--principale .offre-montant { color: var(--or); }

.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(--or); }

.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-fine); line-height: 1; letter-spacing: 0; color: var(--or); 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-forte); 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); font-size: 1.15rem; color: var(--or); text-decoration: none; border-bottom: var(--filet) solid var(--or); 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);
    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(--or); text-decoration: underline; }
.consentement__formulaire { display: flex; flex-wrap: wrap; gap: 12px; }
.consentement__formulaire .bouton { border-color: var(--or); }
.consentement__formulaire .bouton:hover { border-color: var(--or-clair); }

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

/* ═══ 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.
   Libellé en capitales espacées, en texte doux (10,24:1 sur le fond). */
.formulaire label {
    display: block;
    margin-bottom: 10px;
    font-family: var(--corps);
    font-weight: 500;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: var(--libelle-interlettrage);
    color: var(--doux);
}

/* ⚠️ `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);
    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(--or-clair);
    outline-offset: 2px;
    border-color: var(--or);
}

.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);
    border: var(--filet) solid var(--trait);
    margin-bottom: 26px;
    font-size: .98rem;
}
.alerte--succes { border-color: var(--or); background: var(--voile-or); 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: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--libelle-interlettrage);
}

/* ⚠️ 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);
    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(--or);
}

/* ⚠️ `.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);   /* DA-2 : un cartouche à angles francs, plus une gélule */
    background: transparent;
    border: var(--filet) solid var(--or-sombre);
    color: var(--or);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: var(--libelle-interlettrage);
    text-transform: uppercase;
    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'or de la marque (`--or`), 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: .7rem;
    font-weight: 500;
    letter-spacing: var(--libelle-interlettrage);
    text-transform: uppercase;
    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-fine);
    line-height: 1;
    letter-spacing: 0;
    color: var(--or);
    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);
    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-or); }

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

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

.calc-comparaison {
    margin-top: 22px;
    padding-left: 14px;
    border-left: var(--filet) solid var(--or);
    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-fine);
    font-size: clamp(2.6rem, 7vw, 3.6rem);
    line-height: 1;
    letter-spacing: 0;
    /* ⚠️ `--or-sombre` : 4,88:1 sur le fond — il passe ici, et le texte est LARGE de toute façon. Sur une
       surface, il tomberait à 4,27:1 : ne pas le déplacer dans une carte. */
    color: var(--or-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); 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); object-fit: contain; background: var(--argent); }
.salon__nom { font-size: 1.15rem; font-weight: var(--titres-graisse-forte); 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; }
}