/*
 * CHARTE BARBERX — « ÉCRIN, OR ET CHAMPAGNE » (lot S-PUB-a, 9 octobre 2026). Le site SUIT L'APP (DA-4, Alexandre le 30 septembre :
 * « il faut que le site suive l'application en DA ») : l'app a pris Écrin à DA-APP (9 octobre), le site la suit ici.
 * La référence qui fait foi : `claude-master/lots/2026-10/da-v2-zigzag/` (direction `j`) ; le point unique des VALEURS reste
 * `ineed-app` `packages/charte/src/couleurs.json` — chaque token qui en est la recopie le dit en fin de commentaire
 * (« — `nomDansLApp` »), et `tests/Page/DirectionLuxeTest` compare la valeur.
 *
 * ⚠️ LA RÈGLE DES TROIS COULEURS (décision du 9 octobre) :
 *   - l'OR, et son DÉGRADÉ (`--degrade-or`) = L'ACTION : le bouton principal, et lui seul dans les règles (le logo le porte aussi,
 *     dans son dessin). Le libellé posé sur l'or est TOUJOURS `--sur-or` (le noir d'Écrin) : jamais de texte doré sur le dégradé ;
 *   - le CHAMPAGNE = CE QUI ACCOMPAGNE : boutons secondaires (contour), liens, filets sous les titres, surtitres, ce qui est choisi ;
 *   - le ROUGE (`--rouge-fond`) = les gestes DESTRUCTIFS. Le site n'en a aucun aujourd'hui : le token attend.
 *   Les textes secondaires restent neutres (`--doux`, un gris chaud) pour la lisibilité.
 *
 * ⚠️ AUCUNE COULEUR EN DUR HORS DE CE BLOC — y compris les voiles (`rgba`) et les dégradés : ils sont des TOKENS composés ici.
 * 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`.
 *
 * ⚠️ PÉRIME « Inter partout, Cinzel pour le logotype, aucun dégradé dans une règle » (DA-2, DA-4) : l'app l'a quitté à DA-APP.
 */

/* ═══ LES POLICES — AUTO-HÉBERGÉES (Cormorant Garamond + Manrope, SIL OFL 1.1 : `assets/fonts/OFL-*.txt`) ═══
   Les six fichiers du lot DA (fontsource, sous-ensemble latin), servis par AssetMapper (empreintés : un an de cache). Plus Google
   Fonts : aucune requête vers un tiers avant le consentement, et une connexion de moins avant le premier rendu (point 20 de la
   checklist). `font-display: swap` : le texte s'affiche tout de suite, en police de repli, puis change — jamais une page blanche.
   ⚠️ Une graisse demandée par une règle et absente d'ici serait FABRIQUÉE par le navigateur (garde `DirectionLuxeTest`). */
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal-nIkH7HP.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: italic; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-italic-w-ed6RG.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-700-normal-F4mFegS.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/manrope-latin-400-normal-scmC9DJ.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/manrope-latin-600-normal-s3nkSBB.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/manrope-latin-700-normal-f4J6bba.woff2") format("woff2"); }
/* LES REPLIS AJUSTÉS — la police du système affichée PENDANT le chargement, à la LARGEUR de la vraie : sans eux, le titre passe de trois
   lignes (Georgia, plus large) à deux (Cormorant) quand la police arrive, et tout ce qui suit saute (Lighthouse, `/professionnels` :
   CLS 0,126). `size-adjust` MESURÉ le 9 octobre 2026 (WebKit et Chromium, même phrase à 100 px) : Cormorant 700 = 76 % de Georgia gras ;
   Manrope 400 = 101 % d'Arial. Une face `local()` : rien n'est téléchargé. */
@font-face { font-family: "Cormorant repli"; font-weight: 600 700; src: local("Georgia Bold"), local("Georgia-Bold"), local("Times New Roman Bold"); size-adjust: 76%; }
@font-face { font-family: "Manrope repli"; font-weight: 400 700; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 101%; }

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

    /* Les noirs d'Écrin. */
    --fond: #0A0907;             /* le noir chaud d'Écrin — `fond` */
    --fond-alt: #110F0B;         /* sections alternées : propre au site, entre le fond et la surface */
    --surface: #17140E;          /* cartes, bannière, champs — `surface` */
    --surface-haute: #231E15;    /* une carte posée sur une carte, une puce d'icône — `surfaceHaute` */
    --trait: #3D3424;            /* filets de DÉCOR, jamais le bord d'un champ — `bordure` */
    --trait-fort: #9C8B63;       /* le bord d'un champ ou d'une pastille (≥ 3:1 sur fond et surface) — `bordureChamp` */
    /* Le filet d'une carte : le champagne mêlé à 28 % au trait, comme `filetCarte` de l'app (calculé par `meler`, pas une couleur de
       `couleurs.json`). Un décor, comme le trait. */
    --filet-carte: #6C5B43;

    /* L'or — L'ACTION. */
    --or: #E4B43C;               /* l'or franc d'Écrin : une étoile, un point d'état — `accent` */
    --or-haut: #F8DE7E;          /* le haut du dégradé — `accentHaut` */
    --or-bas: #C6992A;           /* le bas du dégradé : le libellé y est mesuré (≥ 7:1) — `accentBas` */
    --sur-or: #0A0907;           /* le libellé posé SUR l'or — `surAccent` */
    /* Le dégradé de l'app (`DEGRADE_OR` : 165°, 0 / 48 / 100 %). Il NOMME des tokens : la DA change une valeur, pas cette ligne. */
    --degrade-or: linear-gradient(165deg, var(--or-haut) 0%, var(--or) 48%, var(--or-bas) 100%);

    /* Le champagne — CE QUI ACCOMPAGNE. */
    --champagne: #E6C192;        /* liens, contours, filets, surtitres — `champagne` */
    --sur-champagne: #0A0907;    /* le texte posé sur le champagne — `surChampagne` */
    --voile-champagne: rgba(230, 193, 146, .12);   /* fond teinté (créneau libéré, message réussi) */

    /* Le texte. */
    --texte: #F7F3EA;            /* blanc cassé chaud — `texte` */
    --doux: #CFC7B4;             /* texte secondaire — `texteDoux` */
    --eteint: #A69D88;           /* mentions, indications (≥ 4,5:1 sur la surface) — `texteEteint` */
    --argent: #CFC7B4;           /* le second métal : le fond clair d'un logo de salon — `argent` */

    /* Les états. */
    --succes: #7DD3A0;           /* — `succes` */
    --erreur: #FF8A7A;           /* texte d'erreur — `danger` */
    --rouge-fond: #A51D2D;       /* le fond d'un geste DESTRUCTIF — `dangerFond` */
    --sur-rouge: #FFFFFF;        /* son libellé — `surDanger` */
    --voile-clair: rgba(255, 255, 255, .03);
    --voile-erreur: rgba(255, 138, 122, .08);

    /* Les VOILES COMPOSÉS — des dégradés du noir d'Écrin, écrits ICI parce qu'une règle ne porte aucune couleur. */
    --voile-barre: rgba(10, 9, 7, .86);            /* la barre collante, au-dessus du contenu qui défile */
    --voile-pastille: rgba(10, 9, 7, .72);         /* une étiquette posée sur une photo */
    /* Le voile du héros : la photo en haut, le noir en bas, là où se pose le texte (la maquette E-SITE-PRODUIT). */
    --voile-heros: linear-gradient(180deg, rgba(10, 9, 7, .55) 0%, rgba(10, 9, 7, .08) 22%, rgba(10, 9, 7, .55) 44%, rgba(10, 9, 7, .92) 66%, #0A0907 100%);
    /* Sur ordinateur, le texte est à GAUCHE : le voile vient de la gauche. */
    --voile-heros-large: linear-gradient(90deg, #0A0907 0%, rgba(10, 9, 7, .9) 34%, rgba(10, 9, 7, .35) 62%, rgba(10, 9, 7, .15) 100%);
    --voile-bande: linear-gradient(90deg, rgba(10, 9, 7, .95) 0%, rgba(10, 9, 7, .74) 100%);
    /* Le voile de la photo d'une FICHE (S-PUB-b) : la photo en haut, le noir en bas, là où se pose le nom du salon (la maquette). */
    --voile-fiche: linear-gradient(180deg, rgba(10, 9, 7, 0) 40%, rgba(10, 9, 7, .7) 76%, #0A0907 100%);
    /* La LUEUR d'Écrin : l'or à 11 % qui éclaire le haut d'un écran de l'app (`ui.tsx`, `radial-gradient(110% 55% at 50% -12%, …)`). */
    --lueur: radial-gradient(110% 55% at 50% -12%, rgba(228, 180, 60, .11), rgba(228, 180, 60, 0) 70%);
    --lueur-coin: radial-gradient(120% 70% at 85% 0%, rgba(228, 180, 60, .2), rgba(228, 180, 60, 0) 60%);
    /* Le cadre d'un téléphone : le métal sombre d'Écrin. Un décor. */
    --cadre-telephone: linear-gradient(160deg, #3A3326 0%, #14110C 40%, #2B261C 100%);

    /* ⚠️ LES POLICES DE L'APP (`polices` de `theme.ts`, DA-APP) : Cormorant Garamond pour les TITRES (700 ; 600 pour un titre
       secondaire et l'italique), Manrope pour le TEXTE (400 ; 600 pour un libellé ; 700 pour un bouton). ⚠️ Cormorant est FINE :
       sous ~18 px un texte se lit mieux en Manrope — un petit libellé prend `--corps` 600, jamais `--titres`. */
    --titres: "Cormorant Garamond", "Cormorant repli", Georgia, serif;
    --corps: "Manrope", "Manrope repli", "Segoe UI", system-ui, sans-serif;
    --titres-graisse: 700;        /* `polices.titre` : h1, h2, montants, chiffres */
    --titres-graisse-demi: 600;   /* `polices.titreDemi` : h3, titres de carte, l'italique des titres */

    /* ═══ LES COINS DE L'APP — `rayons` de `theme.ts` (DA-APP, inchangés depuis 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 message, une puce 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 : `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;
    --cible: 48px;                /* la cible minimale d'un toucher (`CIBLE_MIN` de l'app) */
    --air-section: 112px;         /* 72 sur téléphone */
}

* { box-sizing: border-box; }

html { background: var(--fond); -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--corps);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ⚠️ LES TITRES SONT EN CORMORANT GARAMOND (l'app, DA-APP) : 700 pour h1 / h2, 600 pour h3. Cormorant a un petit œil : ses tailles
   sont plus grandes que celles d'Inter ne l'étaient, sinon un titre se lit plus petit que le texte qu'il annonce. */
h1, h2, h3 { font-family: var(--titres); font-weight: var(--titres-graisse); letter-spacing: -.01em; line-height: 1.08; margin: 0; text-wrap: balance; }
h3 { font-weight: var(--titres-graisse-demi); }
/* L'ACCENT D'UN TITRE : la fin en italique champagne (« Le bon barbier, *à deux pas.* ») — la signature d'Écrin. */
h1 em, h2 em { font-style: italic; font-weight: var(--titres-graisse-demi); color: var(--champagne); }
p { margin: 0; }
img { max-width: 100%; height: auto; }

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

/* Masqué à l'œil, lu par un lecteur d'écran (le nom de la marque à côté du dessin du logo). */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ⚠️⚠️ LA COULEUR DES LIENS DE CONTENU — posée le 19 septembre 2026, elle manquait depuis le début (les liens s'affichaient en bleu
   navigateur, et rien ne le signale : ça ne se voit QUE sur un écran). `:not([class])` plutôt qu'une liste : tout lien porteur d'une
   classe décide lui-même, et une liste écrite à la main oublierait le prochain contexte. */
main a:not([class]) { color: var(--champagne); }
main a:not([class]):hover { color: var(--texte); }

.enveloppe { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
@media (min-width: 760px) { .enveloppe { padding-inline: 32px; } }
.colonne { max-width: 68ch; }

/* Le SURTITRE — un petit libellé champagne en capitales espacées, au-dessus d'un titre. ⚠️ LA SEULE capitale forcée du site : c'est
   celle de l'app (le badge Flash, le titre de l'agenda de Pro : Manrope 600, champagne, interlettré). Jamais un bouton, une
   navigation ou une étiquette de formulaire (garde `DirectionLuxeTest`). */
.surtitre { font-family: var(--corps); font-weight: 600; font-size: .75rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--champagne); margin: 0 0 14px; }

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

.barre {
    position: sticky; top: 0; z-index: 30;
    background: var(--voile-barre);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: var(--filet) solid var(--trait);
}
/* L'accueil : la barre se pose SUR la photo du héros, transparente (la maquette). Elle ne colle pas : la recherche est juste dessous. */
.barre--sur-photo { position: absolute; left: 0; right: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
.barre-int { display: flex; align-items: center; gap: 24px; min-height: 68px; }

/* ⚠️ LE LOGO EST LE DESSIN D'ÉCRIN (`assets/images/logo.svg`, composé par `tools/icones.php` depuis `j-mot.svg`, LE logo définitif) —
   pas un nom écrit dans une police. Le nom accessible est la constante (`Marque::NOM`), dans un texte masqué à côté du dessin. */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--texte); text-decoration: none; flex: none; min-height: var(--cible); }
.logo img { display: block; height: 30px; width: auto; }
@media (min-width: 760px) { .logo img { height: 34px; } }
/* L'espace pro porte son nom à côté du logo : on sait où l'on est. */
.logo__espace { font-family: var(--corps); font-weight: 600; font-size: .8rem; color: var(--champagne); border-left: var(--filet) solid var(--trait-fort); padding-left: 10px; line-height: 1.2; }

.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: .92rem; font-weight: 600; padding-block: 6px; 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 ouvert de l'app. */
.liens a.actif { color: var(--texte); border-bottom-color: var(--champagne); }

/* « Vous êtes un professionnel ? » : un LIEN champagne souligné (la maquette ; Planity : « Je suis professionnel ») — pas un bouton : l'action de
   l'accueil, c'est chercher un barbier. */
.barre__pro { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--cible); color: var(--champagne); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.barre__pro span { border-bottom: var(--filet) solid var(--champagne); padding-bottom: 2px; }
.barre__pro:hover { color: var(--texte); }
.barre .bouton { margin-left: auto; }
@media (min-width: 1000px) {
    .liens { display: flex; }
    .barre__pro, .barre .bouton { margin-left: 0; }
}
/* Sur téléphone, l'espace pro garde le logo et « Voir les tarifs » ; son nom revient à partir de 480 px (mesuré : 448 px de page à 390
   avec les trois). */
@media (max-width: 479px) {
    .logo__espace { display: none; }
    .barre .bouton { padding-inline: 18px; font-size: .9rem; }
}
@media (max-width: 380px) {
    .barre-int { gap: 12px; }
    .logo img { height: 26px; }
    .barre .bouton { padding-inline: 14px; font-size: .86rem; }
}
/* « Vous êtes un professionnel ? » sur DEUX LIGNES sous 380 px (S-MENU-PRO, choix d'Alexandre du 10 octobre 2026 : ni police réduite,
   ni libellé raccourci). Mesuré sur une ligne : la page déborde de 320 à 339 px (340 px de page), plus au-delà. Le souligné passe en
   `text-decoration` pour suivre les deux lignes. */
@media (max-width: 380px) {
    .barre__pro { white-space: normal; text-align: right; line-height: 1.2; max-width: 9.5em; }
    .barre__pro span { border-bottom: 0; padding-bottom: 0; text-decoration: underline var(--filet) var(--champagne); text-underline-offset: 4px; }
}

.pied { border-top: var(--filet) solid var(--trait); padding-block: 56px 48px; color: var(--doux); font-size: .9rem; background: var(--fond); }
.pied a { color: var(--doux); text-decoration: none; }
.pied a:hover { color: var(--texte); }
.pied__logo img { height: 28px; width: auto; display: block; }
.pied__colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; margin: 36px 0 40px; }
@media (min-width: 900px) { .pied__colonnes { grid-template-columns: repeat(3, 1fr); } }
.pied__titre { font-family: var(--corps); font-weight: 600; font-size: .9rem; color: var(--texte); margin: 0 0 12px; }
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* Un lien du pied est une cible de toucher : 40 px de haut au moins sur téléphone, sans faire une liste aérée sur ordinateur. */
.pied__liste a { display: inline-flex; align-items: center; min-height: 40px; }
.pied__mention { color: var(--eteint); font-size: .82rem; border-top: var(--filet) solid var(--trait); padding-top: 24px; }

/* ═══ Boutons — ceux de l'app (`ui.tsx`, DA-APP) ═══
   Le PRINCIPAL est une pilule PLEINE dans le dégradé or, libellé noir en Manrope 700 ; le SECONDAIRE (`--clair`, le nom reste : il
   est dans les gabarits) est un CONTOUR champagne de 1,5 px. Aucune ombre (l'app n'en a pas). Cible ≥ 48 px. */
.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: var(--cible); padding: 12px 26px; border-radius: var(--rayon-bouton); border: 0;
    background: var(--degrade-or); color: var(--sur-or);
    font-family: var(--corps); font-weight: 700; font-size: .98rem; line-height: 1.2; letter-spacing: .01em;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: filter .2s ease, transform .2s ease;
}
.bouton:hover { filter: brightness(1.07); }
.bouton:active { transform: translateY(1px); }
.bouton--clair { background: transparent; color: var(--champagne); border: 1.5px solid var(--champagne); }
.bouton--clair:hover { filter: none; background: var(--voile-champagne); color: var(--texte); }
.bouton--grand { min-height: 56px; padding-inline: 32px; font-size: 1.02rem; }
.bouton--plein { width: 100%; }
/* Un libellé long (« Calculer ce que je perds ») passe à la ligne sur un téléphone étroit plutôt que de déborder (mesuré : 327 px à 320). */
@media (max-width: 400px) { .bouton { white-space: normal; text-align: center; } }

/* ═══ 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 : la moitié de l'air suffit (le filet du titre suivant marque la coupure). */
.section:not(.section--alt) + .section:not(.section--alt),
.intro-page + .section:not(.section--alt) { padding-top: calc(var(--air-section) / 2); }
.enveloppe--centree { text-align: center; }
.enveloppe--centree h2::before, .enveloppe--centree .intro, .enveloppe--centree .chapo { margin-inline: auto; }
.section h2 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
/* Le filet champagne au-dessus du titre de section (« les filets sous les titres » en champagne, la règle d'Écrin). */
.section h2::before { content: ""; display: block; width: 48px; height: 2px; background: var(--champagne); margin-bottom: 24px; }
.section .intro { margin-top: 22px; color: var(--doux); max-width: 62ch; font-size: 1.05rem; line-height: 1.75; }

/* L'appel vers l'outil gratuit. `p { margin: 0 }` est global : sans cette règle le bouton serait collé au paragraphe au-dessus. */
.outil-action { margin-top: 32px; }

.trois { display: grid; gap: 40px; margin-top: 56px; }
@media (min-width: 760px) { .trois { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.trois h3 { font-size: 1.6rem; margin-bottom: 10px; }
.trois p { color: var(--doux); font-size: .98rem; line-height: 1.75; }

/* Un filet court champagne qui ouvre la colonne (le `<i>` du gabarit ne dessine rien). */
.pastille { width: 28px; height: 2px; background: var(--champagne); margin-bottom: 22px; }
.pastille i { display: none; }

/* ═══ La bande — le temps fort d'une page : la surface, la lueur d'or dans le coin ═══ */
.bande { background: var(--lueur-coin), var(--surface); color: var(--texte); border-block: var(--filet) solid var(--trait); }
.bande .enveloppe { padding-block: 88px; display: grid; gap: 32px; align-items: center; }
@media (min-width: 820px) { .bande .enveloppe { grid-template-columns: 1fr auto; gap: 64px; } }
.bande h2 { color: var(--texte); font-size: clamp(2rem, 4vw, 2.8rem); }
.bande p { margin-top: 16px; color: var(--doux); max-width: 52ch; line-height: 1.75; }
.bande strong { color: var(--champagne); font-weight: 600; }

/* ═══ 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: 44px; }
.question summary {
    cursor: pointer; padding: 22px 0; list-style: none; min-height: var(--cible);
    font-family: var(--corps); font-weight: 600; font-size: 1.04rem;
    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.4rem; font-weight: 400; line-height: 1; flex: none; }
.question[open] summary::after { content: "\2212"; }
.question p { margin-bottom: 26px; padding-right: 40px; color: var(--doux); font-size: .99rem; line-height: 1.75; }

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

/* ═══════════════════════════════════════════════════════════════════════
   L'ACCUEIL GRAND PUBLIC (S-PUB-a) — la maquette E-SITE-PRODUIT : trouver un barbier, l'app, « je suis barbier »
   ═══════════════════════════════════════════════════════════════════════ */

.vitrine-heros { position: relative; isolation: isolate; min-height: 660px; display: flex; flex-direction: column; justify-content: flex-end; padding-block: 112px 32px; }
.vitrine-heros__photo { position: absolute; inset: 0; z-index: -2; }
.vitrine-heros__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.vitrine-heros::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--voile-heros); }
.vitrine-heros > .enveloppe { width: 100%; min-width: 0; }
.vitrine-heros h1 { font-size: clamp(2.7rem, 13vw, 5.4rem); line-height: .98; }
.vitrine-heros__chapo { margin-top: 16px; font-size: 1.08rem; line-height: 1.6; color: var(--doux); max-width: 34ch; }
@media (min-width: 900px) {
    .vitrine-heros { min-height: 720px; justify-content: center; padding-block: 140px 96px; }
    .vitrine-heros::before { background: var(--voile-heros-large); }
    .vitrine-heros__photo img { object-position: 70% 40%; }
    .vitrine-heros__contenu { max-width: 600px; }
}

/* La recherche : une carte sombre, voilée, posée sur la photo. Un champ (un salon, une ville) et le bouton or. */
.recherche { margin-top: 26px; padding: 12px; border-radius: var(--rayon-carte); background: var(--voile-barre); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: var(--filet) solid var(--trait); max-width: 560px; }
.recherche__champ { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: var(--rayon-champ); border: 1.5px solid var(--trait-fort); background: var(--fond); }
.recherche__champ:focus-within { border-color: var(--champagne); }
.recherche__champ svg { width: 20px; height: 20px; flex: none; color: var(--champagne); }
/* ⚠️ 16 px AU MOINS : en dessous, Safari zoome la page au toucher du champ. */
.recherche__champ input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--texte); font-family: var(--corps); font-size: 1rem; padding: 14px 0; }
.recherche__champ input::placeholder { color: var(--eteint); }
.recherche__champ input:focus-visible { outline: none; }
.recherche .bouton { width: 100%; margin-top: 10px; }
@media (min-width: 560px) {
    .recherche { display: flex; gap: 10px; align-items: stretch; }
    .recherche__champ { flex: 1; }
    .recherche .bouton { width: auto; margin-top: 0; }
}

/* La même recherche, en tête de `/barbiers` : centrée sous le titre, le texte du champ à gauche. */
.recherche--page { margin: 30px auto 0; text-align: left; }

.promesses { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0; list-style: none; font-weight: 600; font-size: .84rem; color: var(--doux); }
.promesses li { display: flex; align-items: center; gap: 8px; }
.promesses li::before { content: ""; width: 6px; height: 6px; border-radius: var(--rayon-pastille); background: var(--or); flex: none; }

.vitrine-section { padding-top: 64px; }
@media (min-width: 900px) { .vitrine-section { padding-top: 104px; } }
.vitrine-section h2 { font-size: clamp(2.2rem, 7vw, 3.2rem); }
.vitrine-section h2::after { content: ""; display: block; width: 56px; height: 2px; background: var(--champagne); margin-top: 16px; }

/* Les barbiers du parc : un ruban qui défile au doigt sur téléphone, une grille sur ordinateur. */
.ruban { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 24px 0 0; padding: 0 20px 6px; list-style: none; scroll-padding-inline: 20px; }
.ruban::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .ruban { padding-inline: 32px; scroll-padding-inline: 32px; } }
@media (min-width: 1180px) { .ruban { max-width: 1180px; margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; } }
.ruban > li { flex: 0 0 min(300px, 82%); scroll-snap-align: start; display: flex; }

.carte-salon { flex: 1; display: flex; flex-direction: column; border-radius: var(--rayon-carte); overflow: hidden; background: var(--surface); border: var(--filet) solid var(--filet-carte); color: var(--texte); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.carte-salon:hover { border-color: var(--champagne); transform: translateY(-2px); }
.carte-salon__photo { position: relative; aspect-ratio: 16 / 10; background: var(--surface-haute); }
.carte-salon__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sans photo, le logo du salon — sur l'argent (un logo dessiné pour un fond blanc disparaîtrait sur le noir). */
.carte-salon__photo--logo { display: grid; place-items: center; background: var(--argent); }
.carte-salon__photo--logo img { width: 56%; height: 70%; object-fit: contain; }
.carte-salon__corps { padding: 14px 16px 18px; display: grid; gap: 6px; }
.carte-salon__haut { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.carte-salon__nom { font-family: var(--titres); font-weight: var(--titres-graisse); font-size: 1.7rem; line-height: 1.05; }
.carte-salon__note { font-weight: 700; font-size: .95rem; white-space: nowrap; }
.carte-salon__note b { color: var(--or); font-weight: 700; }
.carte-salon__note small { color: var(--eteint); font-weight: 400; font-size: .82rem; }
.carte-salon__ligne { color: var(--doux); font-size: .92rem; }
.carte-salon__lien { margin-top: 4px; color: var(--champagne); font-weight: 600; font-size: .9rem; }

.carte-invite { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 240px; padding: 22px 20px; border-radius: var(--rayon-carte); border: 1.5px dashed var(--trait-fort); }
.carte-invite p { font-family: var(--titres); font-weight: var(--titres-graisse-demi); font-size: 1.6rem; line-height: 1.1; }
.carte-invite a { color: var(--champagne); font-weight: 600; text-decoration: none; display: inline-flex; min-height: var(--cible); align-items: center; }

/* L'application — une carte large, la lueur d'or dans le coin, un téléphone qui en sort. */
.vitrine-app { margin: 64px 20px 0; position: relative; isolation: isolate; overflow: hidden; border-radius: var(--rayon-carte); background: var(--lueur-coin), var(--surface); border: var(--filet) solid var(--filet-carte); padding: 32px 22px 0; }
@media (min-width: 760px) { .vitrine-app { margin-inline: 32px; padding: 48px 48px 0; } }
@media (min-width: 1180px) { .vitrine-app { max-width: 1116px; margin-inline: auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 56px 64px 0; } }
.vitrine-app h2 { font-size: clamp(2.3rem, 8vw, 3.3rem); }
.atouts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.atouts li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; color: var(--doux); font-size: .97rem; line-height: 1.55; }
.atouts b { display: block; color: var(--texte); font-weight: 600; font-size: 1.02rem; }
.atouts__puce { width: 44px; height: 44px; border-radius: var(--rayon-puce); display: grid; place-items: center; background: var(--surface-haute); border: var(--filet) solid var(--trait); color: var(--or); }
.atouts__puce svg { width: 20px; height: 20px; }
/* ⚠️ AUCUN FAUX LIEN DE STORE (Q4 d'Alexandre, 9 octobre : la partie grand public sort le jour où l'app est publiée). Tant que les
   liens ne sont pas publiés par le moteur, une pastille « Bientôt » qui n'est PAS un lien ; S-PUB-c lira les liens au moteur. */
.vitrine-app__bientot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; }
.vitrine-app__bientot p { color: var(--doux); font-size: .92rem; }
.vitrine-app__visuel { display: flex; justify-content: center; align-items: flex-end; }
.telephone { width: 236px; margin: 32px auto 0; border-radius: var(--rayon-carte); margin-bottom: -24px; padding: 10px 10px 34px; background: var(--cadre-telephone); }
.telephone img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: top; border-radius: var(--rayon-puce); }
@media (min-width: 1180px) { .telephone { width: 280px; margin-top: 0; } .telephone img { height: 420px; } }

/* Comment ça marche — trois cartes, le chiffre en Cormorant champagne (« le chiffre du jour », champagne dans l'app). */
.etapes { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.etapes li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; border-radius: var(--rayon-carte); background: var(--surface); border: var(--filet) solid var(--trait); }
.etapes .etapes__chiffre { font-family: var(--titres); font-weight: var(--titres-graisse); font-size: 2.6rem; line-height: 1; color: var(--champagne); }
.etapes b { display: block; font-weight: 600; font-size: 1.04rem; }
.etapes li > span:last-child { color: var(--doux); font-size: .94rem; }

/* Les villes du parc : des pastilles, au bord `bordureChamp`. */
.villes { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.villes a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--cible); padding: 0 18px; border-radius: var(--rayon-pastille); border: 1.5px solid var(--trait-fort); color: var(--texte); font-weight: 600; font-size: .95rem; text-decoration: none; }
.villes a:hover { border-color: var(--champagne); }
.villes small { color: var(--eteint); font-weight: 400; font-size: .85rem; }

/* La bande pro — la photo des ciseaux, voilée de noir ; le bouton en CONTOUR (l'action de la page reste la recherche). */
.vitrine-pro { position: relative; isolation: isolate; margin-top: 72px; padding-block: 64px; overflow: hidden; }
.vitrine-pro__photo { position: absolute; inset: 0; z-index: -2; }
.vitrine-pro__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.35); }
.vitrine-pro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--voile-bande); }
.vitrine-pro h2 { font-size: clamp(2.3rem, 8vw, 3.3rem); }
.vitrine-pro p { margin: 14px 0 24px; color: var(--doux); max-width: 44ch; font-size: 1.02rem; }

/* ═══════════════════════════════════════════════════════════════════════
   L'ESPACE PRO (`/professionnels` et les pages pro) — le héros montre l'agenda plutôt que de le décrire
   ═══════════════════════════════════════════════════════════════════════ */

.heros { padding-block: 96px 112px; background: var(--lueur); }
.heros-grille { display: grid; gap: 56px; align-items: center; }
@media (min-width: 900px) { .heros-grille { grid-template-columns: 1.05fr 1fr; gap: 80px; } }

.heros h1 { font-size: clamp(2.8rem, 7vw, 4.6rem); line-height: 1.02; }
.heros-chapo { margin-top: 26px; font-size: 1.06rem; line-height: 1.75; color: var(--doux); max-width: 46ch; }
.heros-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.heros-prix { margin-top: 24px; font-size: .92rem; color: var(--doux); }
.heros-prix strong { color: var(--texte); font-weight: 600; }

/* La promesse de démonstration, sous la ligne de prix : un filet champagne la détache du prix sans en faire un encadré. */
.heros-demo { margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--champagne); font-size: .94rem; color: var(--doux); }
.heros-demo strong { color: var(--texte); font-weight: 600; }
.heros-demo a { color: var(--champagne); }

/* L'agenda — une carte d'Écrin (son filet), les coins de l'app. */
.agenda { border: var(--filet) solid var(--filet-carte); border-radius: var(--rayon-carte); background: var(--surface); overflow: hidden; }
.agenda-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: var(--filet) solid var(--trait); background: var(--surface-haute); }
.agenda-tete strong { font-family: var(--titres); font-weight: var(--titres-graisse); font-size: 1.35rem; }
.agenda-tete span { font-size: .84rem; color: var(--doux); }
.agenda-corps { padding: 10px 0; }

.creneau { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: start; padding: 11px 22px; }
.creneau time { font-size: .86rem; color: var(--doux); font-variant-numeric: tabular-nums; padding-top: 2px; }
.creneau-bloc { border-left: 3px solid var(--champagne); padding-left: 14px; }
.creneau-bloc b { display: block; font-weight: 600; font-size: .96rem; }
.creneau-bloc span { font-size: .86rem; color: var(--doux); }
/* La classe garde son nom (le gabarit la porte) : la seconde couleur de l'agenda, le vert « confirmé » de l'app. */
.creneau--vert .creneau-bloc { border-left-color: var(--succes); }
/* Le créneau libéré : l'OR en tirets — l'offre Flash de l'app (« or = le Flash »). */
.creneau--libre .creneau-bloc {
    border: 1.5px dashed var(--or);
    background: var(--voile-champagne);
    border-radius: var(--rayon-puce);
    padding: 9px 14px;
}
.creneau--libre b { color: var(--or); }

/* ═══ Les pages intérieures — chapeau, grille d'offres, les quatre zéros ═══ */

.intro-page { padding-block: 96px 64px; text-align: center; background: var(--lueur); }
.intro-page h1 { font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: 1.04; margin-inline: auto; max-width: 18ch; }
.chapo { margin: 26px auto 0; max-width: 58ch; font-size: 1.06rem; line-height: 1.75; color: var(--doux); }

.grille-section { padding-block: 0 104px; }
.grille-offres { display: grid; gap: 22px; align-items: start; }
@media (min-width: 880px) { .grille-offres { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 880px) { .grille-offres--deux { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; } }

/* L'offre : une carte d'Écrin. La formule principale se distingue par son filet champagne et son montant en or-champagne. */
.offre {
    display: flex; flex-direction: column; gap: 18px;
    border: var(--filet) solid var(--filet-carte); border-radius: var(--rayon-carte); padding: 36px 28px; background: var(--surface);
}
.offre--principale { border: 1.5px solid var(--champagne); }
.offre h2 { font-size: 1.9rem; font-weight: var(--titres-graisse-demi); }
.offre-pour { color: var(--doux); font-size: .96rem; min-height: 3em; }
.offre-prix { color: var(--doux); font-size: .9rem; border-top: var(--filet) solid var(--trait); padding-top: 22px; }
.offre-montant { display: block; margin-bottom: 8px; font-family: var(--titres); font-size: 3.8rem; font-weight: var(--titres-graisse); line-height: 1; 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. */
.offre-installation { margin: -8px 0 0; color: var(--doux); font-size: .95rem; }
.offre-installation strong { color: var(--texte); font-weight: 600; }

/* ═══ LES TROIS PORTES (S-FORFAITS, 10 octobre 2026) ═══
   La formule mise en avant (Salon) porte le RUBAN « Le choix des barbiers » : une pastille champagne posée sur le haut de la
   carte — PAS l'or en dégradé (il est l'action, et l'action de la carte est son bouton), PAS de capitales (seul le surtitre en
   porte), PAS d'ombre. L'annuel se lit sous le mensuel, jamais à sa place : c'est le mensuel qu'on compare. */
.offre { position: relative; }
.offre-ruban {
    position: absolute; top: 0; left: 28px; transform: translateY(-50%);
    margin: 0; padding: 4px 14px; border-radius: var(--rayon-pastille);
    background: var(--champagne); color: var(--sur-champagne);
    font-family: var(--corps); font-size: .8rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.offre-annuel { margin: -10px 0 0; color: var(--doux); font-size: .92rem; }
.offre-annuel strong { color: var(--texte); font-weight: 600; }
.offre-inclus .offre-inclus__plus { color: var(--texte); font-weight: 600; }
.offre-etat { margin-top: auto; padding-top: 10px; display: grid; gap: 10px; justify-items: start; }
.offre-etat p { color: var(--eteint); font-size: .9rem; }
.offre-etat .lien-fort { font-size: 1.15rem; }
@media (min-width: 880px) { .grille-offres--trois { align-items: stretch; } .grille-offres--trois .offre { height: 100%; } }
/* Sur un téléphone, les cartes s'empilent : la formule mise en avant passe EN TÊTE — le gérant lit d'abord celle qu'on vend.
   L'ordre du document (et celui du bureau, Salon au centre) ne change pas. */
@media (max-width: 879px) { .grille-offres--trois .offre--principale { order: -1; } .grille-offres--trois { gap: 34px; } }

/* Les fondateurs : un chiffre, et la promesse à côté. */
.fondateurs { display: grid; gap: 18px 56px; align-items: center; }
@media (min-width: 880px) { .fondateurs { grid-template-columns: auto 1fr; } }
.fondateurs__chiffre { margin: 0; font-family: var(--titres); font-weight: var(--titres-graisse); line-height: .9; color: var(--champagne); font-size: clamp(5rem, 18vw, 9rem); white-space: nowrap; }
.fondateurs__chiffre small { display: block; font-family: var(--corps); font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--doux); margin-top: 10px; }

/* L'aperçu des formules de /professionnels : trois cartes-liens vers /tarifs. La formule mise en avant, au filet champagne. */
.formules-apercu { display: grid; gap: 30px 22px; margin-top: 44px; }
@media (min-width: 880px) { .formules-apercu { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 879px) { .formules-apercu .formule-apercu--principale { order: -1; } }
.formule-apercu {
    position: relative; display: grid; gap: 10px; align-content: start; padding: 30px 26px;
    border: var(--filet) solid var(--filet-carte); border-radius: var(--rayon-carte); background: var(--surface);
    color: var(--texte); text-decoration: none;
}
.formule-apercu:hover, .formule-apercu:focus-visible { border-color: var(--champagne); }
.formule-apercu--principale { border: 1.5px solid var(--champagne); }
.formule-apercu__nom { font-family: var(--titres); font-size: 1.7rem; font-weight: var(--titres-graisse-demi); line-height: 1.1; }
.formule-apercu__prix { font-family: var(--titres); font-size: 3rem; font-weight: var(--titres-graisse); line-height: 1; }
.formule-apercu--principale .formule-apercu__prix { color: var(--champagne); }
.formule-apercu__prix small { font-family: var(--corps); font-size: .9rem; font-weight: 400; color: var(--doux); }
.formule-apercu__pour { color: var(--doux); font-size: .95rem; line-height: 1.55; }

/* Ce qui vaut pour toutes les formules : des pastilles au filet, qui passent à la ligne sur un téléphone. */
.conditions { list-style: none; margin: 36px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 880px; }
.conditions li { padding: 8px 16px; border: var(--filet) solid var(--trait-fort); border-radius: var(--rayon-pastille); color: var(--doux); font-size: .92rem; line-height: 1.4; }
.conditions strong { color: var(--texte); font-weight: 700; }

.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: .96rem; line-height: 1.55; }
.offre-inclus li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 2px; background: var(--eteint); }
.offre--principale .offre-inclus li::before { background: var(--champagne); }

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

.zeros { margin: 44px 0 0; }
.zero { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 24px 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(2.1rem, 5vw, 3rem); font-weight: var(--titres-graisse); line-height: 1; color: var(--champagne); white-space: nowrap; }

.note { margin-top: 30px; max-width: 66ch; color: var(--doux); font-size: .94rem; line-height: 1.75; }
.section .intro + .intro { margin-top: 20px; }
.section .intro strong { color: var(--texte); font-weight: 600; }

/* Un texte juridique découpé en sous-parties (/confidentialite, section « L'application ») — borné à `.texte-legal`.
   ⚠️ L'ancre `#application` est ouverte par l'application : sans `scroll-margin-top`, l'en-tête collant cacherait le titre. */
.texte-legal h3 { font-size: 1.5rem; 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: 84px; }
/* S-CONF : les intertitres ancrés de la section (`#relances`, `#barberx-pro` — celle de Pro se déclare aux stores) : même motif. */
.texte-legal h3[id] { scroll-margin-top: 96px; }

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

/* ═══════════════════════════════════════════════════════════════════════
   S-PUB-b (9 octobre 2026) — LA RECHERCHE, LES VILLES, LA FICHE. La maquette qui fait foi : `claude-master/lots/2026-10/site-produit/
   fiche.html`. Les règles des trois couleurs tiennent : l'or en dégradé = le bouton (`.bouton`) seul ; le champagne accompagne (onglet
   choisi, filtres, liens) ; l'or franc pour une étoile ; le vert d'état (`--succes`) pour « ouvert ». Aucune couleur hors des tokens.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ `/barbiers` — les filtres et la grille ═══ */
.intro-page--recherche { padding-bottom: 32px; }
@media (max-width: 640px) { .intro-page--recherche { padding-top: 40px; } .intro-page--recherche .chapo { margin-top: 16px; font-size: 1rem; } }
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.filtre {
    display: inline-flex; align-items: center; gap: 8px; min-height: var(--cible); padding: 0 16px;
    border-radius: var(--rayon-pastille); border: 1.5px solid var(--trait-fort); background: var(--fond);
    color: var(--texte); font-family: var(--corps); font-weight: 600; font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.filtre svg { width: 18px; height: 18px; color: var(--champagne); }
.filtre[aria-pressed="true"] { background: var(--champagne); border-color: var(--champagne); color: var(--sur-champagne); }
.filtre[aria-pressed="true"] svg { color: var(--sur-champagne); }
.filtre:disabled { opacity: .6; cursor: progress; }
.filtre__point { width: 8px; height: 8px; border-radius: var(--rayon-pastille); background: var(--succes); }
.filtres__etat { margin-top: 12px; min-height: 1.5em; color: var(--doux); font-size: .9rem; }
.filtres__etat:empty { display: none; }

.resultats { padding-top: 24px; }
.grille-salons { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .grille-salons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille-salons { grid-template-columns: repeat(3, 1fr); } }
.grille-salons > li { display: flex; }
.grille-salons > li[hidden] { display: none; }
.resultats__villes { font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 64px 0 0; }
.resultats__tous { margin-top: 40px; }

/* L'état du jour : un point vert et ses mots — « Ouvert aujourd'hui » sur une carte, « Aujourd'hui · 10 h – 20 h » sur une fiche. */
.etat-jour { display: inline-flex; align-items: center; gap: 8px; color: var(--succes); font-weight: 600; font-size: .86rem; }
.etat-jour i { width: 8px; height: 8px; border-radius: var(--rayon-pastille); background: var(--succes); flex: none; }
.etat-jour--grand { margin-top: 14px; padding: 8px 14px; border-radius: var(--rayon-pastille); border: var(--filet) solid var(--succes); font-size: .92rem; }
.etat-jour--ferme { margin-top: 14px; color: var(--eteint); }
.etat-jour--ferme i { background: var(--eteint); }
.carte-salon__distance { color: var(--champagne); font-weight: 600; font-size: .9rem; }

/* Le fil d'Ariane : discret, au-dessus du titre. */
.fil { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin-bottom: 18px; font-size: .88rem; color: var(--eteint); }
.fil a { color: var(--doux); text-decoration: none; border-bottom: var(--filet) solid var(--trait-fort); }
.fil a:hover { color: var(--texte); }
.intro-page--ville { padding-bottom: 32px; }

/* ═══ LA FICHE D'UN SALON ═══ */
.fiche-salon { position: relative; }
.fiche-heros { position: relative; aspect-ratio: 5 / 3; max-height: 460px; width: 100%; overflow: hidden; background: var(--surface-haute); }
.fiche-heros img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fiche-heros::after { content: ""; position: absolute; inset: 0; background: var(--voile-fiche); }
.fiche-heros--logo { display: grid; place-items: center; background: var(--argent); aspect-ratio: 5 / 2; }
.fiche-heros--logo img { width: 160px; height: auto; object-fit: contain; }
.fiche-heros--logo::after, .fiche-heros--vide::after { content: none; }
.fiche-heros--vide { aspect-ratio: auto; height: 40px; background: none; }
.fiche-tete { position: relative; z-index: 1; margin-top: -64px; max-width: 760px; }
.fiche-tete .fil { justify-content: flex-start; margin-bottom: 12px; }
.fiche-tete .surtitre { margin-bottom: 8px; }
.fiche-tete h1 { font-size: clamp(2.6rem, 11vw, 3.8rem); line-height: 1.02; }
.fiche-tete__ligne { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .98rem; color: var(--doux); }
.fiche-tete__ligne a { color: var(--doux); }
.fiche-tete__note { font-weight: 700; color: var(--texte); }
.fiche-tete__note b { color: var(--or); }

.onglets { position: sticky; top: 76px; z-index: 9; display: flex; gap: 6px; margin-top: 24px; padding: 6px; border-radius: var(--rayon-pastille); background: var(--surface); border: var(--filet) solid var(--trait); }
.onglets a { flex: 1; display: grid; place-items: center; min-height: 44px; border-radius: var(--rayon-pastille); font-weight: 600; font-size: .95rem; color: var(--doux); text-decoration: none; }
.onglets a:hover, .onglets a:focus-visible { background: var(--champagne); color: var(--sur-champagne); }
.fiche-section { padding-top: 44px; scroll-margin-top: 140px; }
.fiche-section h2 { font-size: clamp(1.9rem, 7vw, 2.4rem); }
.fiche-texte { margin-top: 14px; color: var(--doux); line-height: 1.75; }
.fiche-texte p + p { margin-top: 12px; }

.prestations { list-style: none; display: grid; gap: 10px; margin: 18px 0 0; padding: 0; }
.prestation {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 72px; padding: 14px 18px;
    border-radius: var(--rayon-carte); background: var(--surface); border: var(--filet) solid var(--filet-carte);
}
.prestation b { display: block; font-size: 1.02rem; font-weight: 600; }
.prestation span { display: block; font-size: .86rem; color: var(--eteint); margin-top: 2px; }
.prestation .prestation__prix { margin: 0; font-family: var(--titres); font-weight: var(--titres-graisse); font-size: 1.7rem; line-height: 1; color: var(--champagne); white-space: nowrap; }

.encart-app {
    display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; margin-top: 16px; padding: 16px 18px;
    border-radius: var(--rayon-carte); background: var(--lueur-coin), var(--surface); border: var(--filet) solid var(--champagne);
    color: var(--doux); font-size: .92rem; line-height: 1.5; text-decoration: none;
}
.encart-app img { width: 48px; height: 48px; border-radius: var(--rayon-puce); }
.encart-app b { display: block; color: var(--texte); font-weight: 600; font-size: 1rem; }
.encart-app:hover { border-color: var(--texte); }
.encart-app .bientot { margin-left: 4px; }

.galerie { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-top: 18px; }
.galerie img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rayon-puce); }

.horaires { margin: 16px 0 0; border-radius: var(--rayon-carte); background: var(--surface); border: var(--filet) solid var(--trait); padding: 6px 18px; }
.horaires div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: var(--filet) solid var(--trait); font-size: .96rem; }
.horaires div:last-child { border-bottom: 0; }
.horaires dt { color: var(--doux); }
.horaires dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.horaires small { display: block; font-size: .8rem; color: var(--eteint); }
.horaires .horaires__ferme { color: var(--eteint); }
.horaires .horaires__aujourdhui dt, .horaires .horaires__aujourdhui dd { color: var(--or); font-weight: 700; }

.adresse { margin-top: 14px; padding: 18px; border-radius: var(--rayon-carte); background: var(--surface); border: var(--filet) solid var(--trait); color: var(--doux); }
.adresse b { color: var(--texte); font-weight: 600; }
.adresse__actions { display: flex; gap: 10px; margin-top: 14px; }
.adresse__actions .bouton { flex: 1; padding-inline: 14px; }

.resume-avis { display: flex; align-items: center; gap: 18px; margin-top: 16px; color: var(--doux); font-size: .92rem; }
.resume-avis__note { font-family: var(--titres); font-weight: var(--titres-graisse); font-size: 4rem; line-height: 1; color: var(--texte); }
.etoiles { display: block; color: var(--or); letter-spacing: 2px; }
.avis { margin-top: 12px; padding: 16px 18px; border-radius: var(--rayon-carte); background: var(--surface); border: var(--filet) solid var(--trait); }
.avis__haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .92rem; }
.avis__verifie { color: var(--succes); font-size: .8rem; font-weight: 600; }
.avis .avis__etoiles { margin-top: 4px; color: var(--or); font-size: .8rem; letter-spacing: 1px; }
.avis p:last-child { margin-top: 6px; color: var(--doux); font-size: .95rem; }
.google { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; min-height: var(--cible); padding: 6px 18px; border-radius: var(--rayon-carte); border: var(--filet) solid var(--trait); color: var(--doux); font-size: .92rem; }
.google b { color: var(--texte); }
.google a { color: var(--champagne); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--cible); }

/* L'ACTION, en bas de l'écran : collée au bas de la fiche (elle ne recouvre pas le pied), sur le voile de la barre. */
.action-fixe { position: sticky; bottom: 0; z-index: 20; margin-top: 48px; padding: 12px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--fond); border-top: var(--filet) solid var(--trait); }
.action-fixe__int { max-width: 760px; margin: 0 auto; padding-inline: 20px; text-align: center; }
.action-fixe p { margin-top: 6px; color: var(--doux); font-size: .86rem; }
.action-fixe p a { color: var(--champagne); }
@media (min-width: 760px) { .action-fixe__int { padding-inline: 32px; } }

/* ═══ S-PUB-c — LES STORES ET `/application` ═══ */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; }
.stores p { color: var(--doux); font-size: .92rem; }
.stores .bientot { margin-left: 0; }
.vitrine-app__plus { margin-top: 18px; }
.vitrine-app__plus .lien-fort { font-size: 1.2rem; }

.appli-heros { padding-block: 64px 24px; background: var(--lueur); overflow: hidden; }
.appli-heros__grille { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .appli-heros__grille { grid-template-columns: 1.1fr 1fr; gap: 64px; } .appli-heros { padding-block: 96px 48px; } }
.appli-heros h1 { font-size: clamp(2.8rem, 12vw, 5rem); line-height: .98; }
.appli-heros__chapo { margin-top: 18px; font-size: 1.08rem; color: var(--doux); max-width: 38ch; }
.appli-heros__visuel { margin: 0; display: flex; justify-content: center; }
.telephone.telephone--grand { width: 250px; margin: 0; }
.telephone.telephone--grand img { height: auto; aspect-ratio: 480 / 1039; }
@media (min-width: 900px) { .telephone.telephone--grand { width: 300px; } }

.gestes-app { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 56px; }
.geste-app { display: grid; gap: 24px; align-items: center; }
@media (min-width: 820px) {
    .geste-app { grid-template-columns: 1fr 1fr; gap: 64px; }
    .geste-app:nth-child(even) .geste-app__texte { order: 2; }
}
.geste-app__chiffre { display: block; font-family: var(--titres); font-weight: var(--titres-graisse); font-size: 3rem; line-height: 1; color: var(--champagne); }
.geste-app h3 { margin-top: 10px; font-size: clamp(2rem, 7vw, 2.6rem); font-weight: var(--titres-graisse); }
.geste-app h3 em { font-style: italic; font-weight: var(--titres-graisse-demi); color: var(--champagne); }
.geste-app p { margin-top: 12px; color: var(--doux); font-size: 1.02rem; line-height: 1.7; max-width: 42ch; }
.geste-app .telephone { margin: 0 auto; width: 236px; }
.geste-app .telephone img { height: auto; aspect-ratio: 480 / 1039; }
@media (min-width: 1180px) { .geste-app .telephone { width: 260px; } }
.bande .stores { margin-top: 20px; }

/* ═══ 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: 16px 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: 600; }

.lien-fort { font-family: var(--titres); font-weight: var(--titres-graisse-demi); font-size: 1.45rem; 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 ═══
   ⚠️ Elle reste EN BAS de l'écran et compacte (l'établissement E-SITE-PRODUIT : c'est un avantage sur Planity et Treatwell, dont la
   modale mange le premier écran). Les deux choix restent des boutons de MÊME POIDS (CNIL). */
.consentement {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1000;
    max-width: 920px; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
    padding: 16px 18px;
    background: var(--surface); border: var(--filet) solid var(--trait-fort); border-radius: var(--rayon-carte);
    color: var(--doux); font-size: .86rem; line-height: 1.55;
}
.consentement__texte { flex: 1 1 320px; }
.consentement__titre { color: var(--texte); font-weight: 600; font-size: .95rem; margin-bottom: 2px; }
.consentement a { color: var(--champagne); text-decoration: underline; }
.consentement__formulaire { display: flex; gap: 10px; flex: 1 1 260px; }
.consentement__formulaire .bouton { flex: 1; padding-inline: 14px; }
.cookies-choix { margin-top: 26px; }
.cookies-choix .consentement__formulaire { max-width: 420px; }

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

/* ⚠️ L'ÉTIQUETTE EST EN `--corps` (l'app : `libelle`, Manrope 600) : une police de titre qui change ne change pas un formulaire. */
.formulaire label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--corps);
    font-weight: 600;
    font-size: .9rem;
    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 ne couvre que les types déjà rencontrés, et 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%;
    min-height: var(--cible);
    padding: 13px 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; }

/* ⚠️ LA LISTE DÉROULANTE PERD SON DESSIN NATIF (WebKit gardait un fond gris clair arrondi) : le chevron est redessiné par deux
   dégradés en `--doux`, 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: 24px; }

/* ⚠️ LE LEURRE : masqué sans `display: none`, que certains robots détectent. 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 — le message de l'app (`message` : un filet à gauche, les coins d'une puce) ═══ */
.alerte {
    padding: 16px 20px;
    border-radius: var(--rayon-puce);
    border: var(--filet) solid var(--trait);
    border-left: 3px solid var(--champagne);
    background: var(--surface);
    margin-bottom: 24px;
    font-size: .98rem;
}
.alerte--succes { border-left-color: var(--succes); color: var(--texte); }
.alerte--echec { border-left-color: var(--erreur); background: var(--voile-erreur); color: var(--erreur); }

/* ═══ LES FICHES MÉTIER (19 septembre 2026) ═══
   ⚠️ TOUT EST DANS CETTE FEUILLE : ce site n'a qu'une feuille, et c'est délibéré (une page ne dépend pas de la feuille d'une autre). */
.badge-metier { margin: 0 0 14px; color: var(--champagne); font-size: .9rem; font-weight: 600; }

/* ⚠️ TROIS BLOCS, ET LA GRILLE LE DIT : `repeat(3, …)` et non `auto-fit` — au quatrième, on cesse de décrire pour énumérer. */
.douleurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.douleur {
    padding: 28px 24px;
    border-radius: var(--rayon-carte);
    background: var(--voile-clair);
    /* La barre rouge distingue « le problème » de « la réponse » sans avoir à l'écrire — le rouge clair de l'app (`danger`). */
    border-left: 2px solid var(--erreur);
}
.douleur h3 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.15; }
.douleur p { margin: 0; font-size: .95rem; line-height: 1.7; }

.reponses { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin-top: 32px; }
.reponse h3 { margin: 12px 0 8px; font-size: 1.5rem; }
.reponse p { margin: 0; font-size: .95rem; 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` (une classe empruntée apporte AUSSI sa taille) : il HÉRITE, il ne fixe que la
   couleur et l'italique d'Écrin. */
.accent-titre { color: var(--champagne); font-style: italic; font-weight: var(--titres-graisse-demi); }

.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 qui n'existe pas
   encore. Elle doit rester LISIBLE. Le jour où la fonction sort, ce sont ces pastilles qu'on retire ; rien d'autre à réécrire. */
.bientot {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 10px;
    border-radius: var(--rayon-pastille);
    background: transparent;
    border: var(--filet) solid var(--champagne);
    color: var(--champagne);
    font-family: var(--corps);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}

.offre-inclus small { display: block; margin-top: 2px; color: var(--doux); font-size: .84rem; 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. Pas de couleur de réussite ni d'alarme : le champagne de la marque — un montant
   perdu n'est pas une bonne nouvelle, et la page ne vend pas de la peur. */
#resultat { scroll-margin-top: 84px; }
.calc-surtitre { font-size: .9rem; font-weight: 600; color: var(--doux); }
.calc-montant {
    font-family: var(--titres);
    /* ⚠️ `clamp` ET PAS UNE TAILLE FIXE : « 128 800 € » déborderait d'un téléphone étroit. La borne basse est lisible à 320 px. */
    font-size: clamp(3rem, 11vw, 5rem);
    font-weight: var(--titres-graisse);
    line-height: 1;
    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(--filet-carte); 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. */
.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); font-size: 1.6rem; color: var(--texte); white-space: nowrap; }
.calc-comparaison { margin-top: 22px; padding-left: 14px; border-left: 2px solid var(--champagne); color: var(--doux); }
.calc-detail-formulaire .champ { max-width: 26rem; }

/* ═══ La page 404 — le code DISCRET (la personne cherche la sortie, pas le numéro) ═══ */
.erreur { max-width: 44rem; margin-inline: auto; }
.erreur__code { font-family: var(--titres); font-weight: var(--titres-graisse); font-size: clamp(3.2rem, 9vw, 4.6rem); line-height: 1; color: var(--eteint); margin: 0 0 14px; }
.erreur__sorties { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 32px 0 0; }

/* ═══ La liste des barbiers (`/barbiers`, ex-`/annuaire`) — en attendant la recherche de S-PUB-b ═══ */
.annuaire__ville { font-size: 2rem; 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; }
.annuaire__filtre { color: var(--doux); margin: 0 0 28px; }
.annuaire__filtre a { color: var(--champagne); }

.salon {
    display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
    border: var(--filet) solid var(--filet-carte); border-radius: var(--rayon-carte); padding: 18px 20px; 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. */
.salon__logo { width: 72px; height: 72px; border-radius: var(--rayon-puce); object-fit: contain; background: var(--argent); }
.salon__nom { font-size: 1.6rem; 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 span[aria-hidden] { color: var(--or); }
.salon__avis-total { color: var(--doux); }
@media (max-width: 480px) {
    .salon { grid-template-columns: auto 1fr; }
    .salon__bouton { grid-column: 1 / -1; justify-self: stretch; }
}

/* ═══ La page de partage du profil capillaire (lot S-FTC, 5 octobre 2026) ═══
   Lue par un coiffeur, au salon, sur son téléphone : peu d'air au-dessus (ce n'est pas une page de marketing), les
   rubriques en clair, les photos GRANDES — une par ligne sur téléphone, toute la largeur de la colonne ; deux par ligne
   sur ordinateur. Un toucher ouvre la photo seule (le navigateur permet alors de l'agrandir). Tokens seulement. */

.profil-partage { padding-block: 48px 96px; }
.profil-partage__enveloppe { max-width: 760px; }
.profil-partage__surtitre { color: var(--champagne); font-size: .92rem; margin: 0 0 10px; }
.profil-partage__titre { font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.1; margin: 0; }
.profil-partage__chapo { color: var(--doux); font-size: .97rem; line-height: 1.7; margin: 14px 0 0; }
.profil-partage__date { display: block; }
.profil-partage__vide { color: var(--doux); margin: 40px 0 0; }

.profil-partage__rubriques { margin: 36px 0 0; display: grid; gap: 12px; }
.profil-partage__rubrique {
    border: var(--filet) solid var(--trait); border-radius: var(--rayon-carte); background: var(--surface); padding: 18px 20px;
}
.profil-partage__rubrique dt { color: var(--doux); font-size: .88rem; margin: 0 0 6px; }
/* `pre-line` : les retours à la ligne que le client a tapés dans une rubrique restent des retours à la ligne. */
.profil-partage__rubrique dd { margin: 0; font-size: 1.08rem; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }

.profil-partage__intertitre { font-size: 1.35rem; font-weight: var(--titres-graisse); margin: 48px 0 16px; }
.profil-partage__photos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .profil-partage__photos { grid-template-columns: repeat(2, 1fr); } }
.profil-partage__photos a { display: block; }
.profil-partage__photos img {
    display: block; width: 100%; height: auto; border-radius: var(--rayon-carte); border: var(--filet) solid var(--trait); background: var(--surface);
}

/* ═══════════════════════════════════════════════════════════════════════
   S-SUPPORT (20 octobre 2026) — « CONTACTER LE SUPPORT » (`/support`), pour les gérants. La photo des ciseaux (celle de la bande pro
   de l'accueil, CC0) voilée de noir ; le sceau « Réponse sous 24 h » en champagne ; le formulaire dans une carte d'Écrin, l'objet en
   pastilles. Les trois couleurs tiennent : l'or en dégradé = le bouton « Envoyer au support » seul ; le champagne accompagne (le
   sceau, la pastille choisie, les numéros) ; le vert d'état pour « Message envoyé ».
   ═══════════════════════════════════════════════════════════════════════ */

.support-heros { position: relative; isolation: isolate; overflow: hidden; padding-block: 120px 56px; }
.support-heros__photo { position: absolute; inset: 0; z-index: -2; }
.support-heros__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; display: block; filter: grayscale(.35); }
/* Sur téléphone, la photo en haut et le noir en bas, là où se pose le texte (le voile du héros de l'accueil). */
.support-heros::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--voile-heros); }
.support-heros__grille { display: grid; gap: 28px; align-items: end; }
.support-heros h1 { font-size: clamp(2.7rem, 12vw, 5rem); line-height: .98; }
.support-heros__chapo { margin-top: 18px; max-width: 40ch; color: var(--doux); font-size: 1.06rem; line-height: 1.65; }

/* LE SCEAU — la promesse en un coup d'œil : « 24 h » en Cormorant champagne dans un anneau. Un décor qui dit une chose vraie. */
.sceau { display: inline-grid; justify-items: center; align-content: center; gap: 2px; width: 118px; height: 118px; border-radius: var(--rayon-pastille); border: 1.5px solid var(--champagne); background: var(--voile-pastille); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: center; justify-self: start; }
.sceau__haut, .sceau__bas { font-weight: 600; font-size: .78rem; color: var(--doux); line-height: 1.2; }
.sceau__chiffre { font-family: var(--titres); font-weight: var(--titres-graisse); font-size: 2.4rem; line-height: 1; color: var(--champagne); }
/* Sur téléphone, le sceau se pose EN HAUT À DROITE, sur la photo : le texte garde le bas de l'image, la promesse se voit sans défiler. */
@media (max-width: 899px) {
    .support-heros { padding-top: 172px; }
    .sceau { position: absolute; top: 28px; right: 20px; }
    .sceau__haut, .sceau__bas { font-size: .72rem; }
}

@media (min-width: 900px) {
    .support-heros { padding-block: 168px 120px; }
    .support-heros::before { background: var(--voile-heros-large); }
    /* Le bas de la photo se fond dans le noir : sans ce second voile, l'image s'arrêtait net à droite de la carte. */
    .support-heros::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--voile-fiche); }
    .support-heros__photo img { object-position: 70% 40%; }
    .support-heros__grille { grid-template-columns: 1fr auto; align-items: center; }
    .sceau { width: 188px; height: 188px; justify-self: end; margin-right: 6%; }
    .sceau__chiffre { font-size: 3.8rem; }
}

/* LE CORPS — la carte du formulaire, et à côté (sous elle sur téléphone) ce qui se passe ensuite. La carte REMONTE sur la photo
   sur ordinateur : le formulaire est la raison de la page, il se voit dès le premier écran. */
.support { padding-block: 8px var(--air-section); }
/* ⚠️ `minmax(0, 1fr)` ET PAS LA PISTE IMPLICITE (S-SEO-BARBERX) : une piste `auto` prend la largeur MINIMALE de son contenu — la case
   reCAPTCHA (304 px) l'élargissait à 346 px dans un écran de 320 : 46 px de défilement horizontal sur `/support` (mesuré en ligne). */
.support__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 980px) {
    .support { padding-top: 0; }
    .support__grille { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; margin-top: -56px; position: relative; }
}
.support__carte { background: var(--surface); border: var(--filet) solid var(--filet-carte); border-radius: var(--rayon-carte); padding: 28px 20px 30px; scroll-margin-top: 84px; }
@media (min-width: 600px) { .support__carte { padding: 40px 40px 36px; } }
.support__titre { font-size: 1.9rem; margin-bottom: 22px; }
.support__titre::after { content: ""; display: block; width: 40px; height: 2px; background: var(--champagne); margin-top: 14px; }
.support .formulaire { margin-top: 0; }
.support .champ { min-width: 0; }
.support__captcha { margin-top: 24px; max-width: 100%; overflow: hidden; }
/* LA CASE reCAPTCHA FAIT 304 × 78 PX, et Google ne la rétrécit pas : elle dépassait sa carte (`/contact` : 24 px hors cadre, 4 px de
   défilement à 320 — mesuré en ligne, S-SEO-BARBERX ; `/support` la rognait jusqu'à 385 px de large, sa carte n'offrant que la largeur
   de l'écran moins 82 px). Sous 386 px, elle est réduite. Réduite à l'œil (`transform`, qui ne change pas ce que Google
   lit) ; une marge de -18 px reprend la hauteur gagnée (PAS `height` : `.support__captcha` rogne, il coupait le bas de la case). ⚠️ La boîte garde 304 px AVANT réduction (`width`, `max-width: none`) :
   bornée à sa carte, `.support__captcha` (`overflow: hidden`) rognait la case réduite à 183 px sur 234 — le logo et les liens de Google
   coupés (mesuré en ligne, première version de ce correctif). */
@media (max-width: 385px) { .g-recaptcha { transform: scale(.77); transform-origin: 0 0; width: 304px; max-width: none; margin-bottom: -18px; } }
.support .formulaire button[type="submit"] { margin-top: 26px; }
@media (max-width: 599px) { .support__envoyer { width: 100%; } }
.support__note { margin-top: 18px; color: var(--eteint); font-size: .86rem; line-height: 1.6; }

/* L'OBJET EN PASTILLES — la pastille de l'app (ronde, bord `bordureChamp`) ; choisie, elle prend le champagne. Le bouton radio reste
   dans la page (lu au clavier et par le lecteur d'écran), masqué à l'œil : c'est son libellé qu'on touche. */
.objets { border: 0; margin: 0; padding: 0; min-width: 0; }
.objets legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: .9rem; color: var(--texte); }
.objets__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.objet { position: relative; display: inline-flex; }
.objet input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.formulaire .objet label { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 16px; border-radius: var(--rayon-pastille); border: 1.5px solid var(--trait-fort); color: var(--doux); font-weight: 600; font-size: .9rem; line-height: 1.25; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.formulaire .objet label:hover { border-color: var(--champagne); color: var(--texte); }
.formulaire .objet input:checked + label { border-color: var(--champagne); background: var(--voile-champagne); color: var(--champagne); }
.formulaire .objet input:focus-visible + label { outline: 2px solid var(--champagne); outline-offset: 2px; }

/* « MESSAGE ENVOYÉ » — l'état qui remplace le formulaire : une coche dessinée (deux filets), le titre, et la suite. */
.support__envoye { text-align: center; padding-block: 24px 8px; }
.support__envoye h2 { font-size: clamp(2.2rem, 7vw, 2.8rem); margin-top: 22px; }
.support__envoye p { margin: 14px auto 0; max-width: 40ch; color: var(--doux); }
.coche { position: relative; display: inline-block; width: 76px; height: 76px; border-radius: var(--rayon-pastille); border: 1.5px solid var(--succes); background: var(--voile-clair); }
.coche::after { content: ""; position: absolute; left: 27px; top: 17px; width: 17px; height: 32px; border: solid var(--succes); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.support__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin-top: 30px; }
.support__retour { color: var(--champagne); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--cible); }
.support__retour:hover { color: var(--texte); }

/* CE QUI SE PASSE ENSUITE — trois pas, numérotés en Cormorant champagne (un compteur : aucun chiffre écrit dans le gabarit). */
.support__a-cote { padding-top: 4px; }
@media (min-width: 980px) { .support__a-cote { padding-top: 96px; } }
.suite { list-style: none; margin: 0; padding: 0; counter-reset: pas; display: grid; gap: 22px; }
.suite li { counter-increment: pas; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; }
.suite li::before { content: counter(pas); grid-row: span 2; font-family: var(--titres); font-weight: var(--titres-graisse); font-size: 2.2rem; line-height: 1; color: var(--champagne); }
.suite b { font-weight: 600; font-size: 1rem; }
.suite span { color: var(--doux); font-size: .95rem; line-height: 1.6; }
.support__client { margin-top: 34px; padding-top: 22px; border-top: var(--filet) solid var(--trait); color: var(--doux); font-size: .92rem; line-height: 1.65; }
.support__client strong { color: var(--texte); font-weight: 600; }

/* ═══ S-SUPPORT-CLIENTS (20 octobre 2026) — DEUX PUBLICS SUR UNE PAGE : le client d'un salon et le gérant ═══
   Le premier choix, deux tuiles (la carte de l'app : fond, filet, coins de carte) ; choisie, la tuile prend le champagne.
   ⚠️ LE BASCULEMENT EST EN CSS (`:has()`, WebKit 15.4+) : sans script, rien à charger, et le choix du serveur (`?public=client`,
   un objet présélectionné) s'applique dès le premier rendu, puisque c'est la case cochée qui décide. On CACHE ce qui n'est pas au
   public choisi (jamais `display: revert` : il perdrait la grille d'un `.champ`). Classes : `.pour-client`, `.pour-gerant`,
   `.pour-aucun` (aucun choix encore), `.sauf-client`, `.sauf-gerant`. Le serveur, lui, n'EXIGE que ce qui est au public choisi. */
.support:not(:has(.publics input[value="client"]:checked)) .pour-client,
.support:not(:has(.publics input[value="gerant"]:checked)) .pour-gerant,
.support:has(.publics input:checked) .pour-aucun,
.support:has(.publics input[value="client"]:checked) .sauf-client,
.support:has(.publics input[value="gerant"]:checked) .sauf-gerant { display: none; }

.publics { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.publics legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: .9rem; color: var(--texte); }
.publics__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* À 320, deux colonnes coupent « Je suis client d'un salon » en quatre lignes : les tuiles s'empilent, chacune sur une ligne. */
@media (max-width: 379px) { .publics__liste { grid-template-columns: 1fr; } .formulaire .public label { min-height: 0; } }
.public { position: relative; display: flex; min-width: 0; }
.public input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.formulaire .public label { flex: 1; display: grid; align-content: start; gap: 6px; min-height: 96px; margin: 0; padding: 16px 14px; border-radius: var(--rayon-carte); border: 1.5px solid var(--trait-fort); background: var(--fond); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.public b { font-family: var(--titres); font-weight: var(--titres-graisse); font-size: 1.3rem; line-height: 1.1; color: var(--texte); }
.public small { font-weight: 400; font-size: .82rem; line-height: 1.45; color: var(--eteint); }
.formulaire .public label:hover { border-color: var(--champagne); }
.formulaire .public input:checked + label { border-color: var(--champagne); background: var(--voile-champagne); }
.formulaire .public input:checked + label b { color: var(--champagne); }
.formulaire .public input:focus-visible + label { outline: 2px solid var(--champagne); outline-offset: 2px; }
@media (min-width: 600px) { .formulaire .public label { padding: 20px; } .public b { font-size: 1.5rem; } }

/* Au client : son salon d'abord pour un rendez-vous — dit sur le filet champagne d'un message, sans rien bloquer. */
.support__salon-d-abord { margin: 0 0 22px; padding: 12px 16px; border-left: 2px solid var(--champagne); background: var(--voile-champagne); border-radius: var(--rayon-puce); color: var(--doux); font-size: .92rem; line-height: 1.6; }
.support__salon-d-abord strong { color: var(--texte); font-weight: 600; }
.facultatif { font-weight: 400; color: var(--eteint); }

/* ═══════════════════════════════════════════════════════════════════════
   S-ALTERNATIVE-PLANITY (26 octobre 2026) — « L'ALTERNATIVE À PLANITY » (`/alternative-planity`). Le héros prête la photo des ciseaux
   et le voile de `/support` ; le comparatif est une grille de cartes (une ligne = un point, la colonne BarberX filetée de champagne,
   celle de Planity NEUTRE : ni sa couleur ni sa typographie — le nom en texte simple, L122-2) ; le passage, des étapes numérotées en
   Cormorant champagne, chacune avec son « quand ». Les trois couleurs tiennent : l'or en dégradé = « Demander ma démo » seul.
   ═══════════════════════════════════════════════════════════════════════ */

.alt-heros { position: relative; isolation: isolate; overflow: hidden; padding-block: 128px 64px; }
.alt-heros__photo { position: absolute; inset: 0; z-index: -2; }
.alt-heros__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; display: block; filter: grayscale(.35); }
.alt-heros::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--voile-heros); }
.alt-heros__grille { display: grid; gap: 40px; align-items: end; }
.alt-heros h1 { font-size: clamp(2.6rem, 11vw, 4.8rem); line-height: .98; max-width: 14ch; }
.alt-heros__chapo { margin-top: 20px; max-width: 46ch; color: var(--doux); font-size: 1.06rem; line-height: 1.7; }
.alt-heros__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.alt-releve { margin-top: 18px; color: var(--eteint); font-size: .86rem; }
@media (min-width: 900px) {
    .alt-heros { padding-block: 168px 96px; }
    .alt-heros::before { background: var(--voile-heros-large); }
    .alt-heros__grille { grid-template-columns: 1fr 320px; gap: 64px; }
}

/* Le sommaire du héros : trois portes vers la page, numérotées comme les étapes. */
.alt-sommaire { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.alt-sommaire a {
    display: flex; align-items: center; gap: 14px; min-height: var(--cible); padding: 14px 18px;
    border-radius: var(--rayon-carte); background: var(--voile-pastille); border: var(--filet) solid var(--filet-carte);
    color: var(--texte); font-weight: 600; font-size: .98rem; text-decoration: none; transition: border-color .2s ease;
}
.alt-sommaire a:hover { border-color: var(--champagne); }
.alt-sommaire span { font-family: var(--titres); font-weight: var(--titres-graisse); font-size: 1.7rem; line-height: 1; color: var(--champagne); min-width: 20px; }

/* Le comparatif. Téléphone : une carte par point, BarberX puis Planity, chacun nommé. Ordinateur : trois colonnes, une tête. */
.comparatif { margin-top: 48px; display: grid; gap: 14px; }
.comparatif__tete { display: none; }
.comparatif__ligne { display: grid; gap: 0; }
@media (max-width: 899px) { .comparatif__ligne { border-radius: var(--rayon-carte); background: var(--surface); border: var(--filet) solid var(--trait); overflow: hidden; } }
.comparatif__critere { padding: 18px 20px 4px; font-size: 1.5rem; }
.comparatif__barberx, .comparatif__planity { padding: 14px 20px 18px; }
.comparatif__barberx { border-left: 2px solid var(--champagne); margin: 10px 0 0 20px; padding-left: 16px; padding-top: 4px; padding-bottom: 6px; }
.comparatif__planity { border-top: var(--filet) solid var(--trait); margin-top: 14px; }
.comparatif__qui { display: block; font-weight: 700; font-size: .82rem; letter-spacing: .02em; color: var(--champagne); margin-bottom: 4px; }
.comparatif__planity .comparatif__qui { color: var(--eteint); }
.comparatif p { color: var(--doux); font-size: .97rem; line-height: 1.65; }
.comparatif strong { color: var(--texte); font-weight: 600; }
.comparatif__source { display: inline-block; margin-top: 8px; color: var(--eteint); font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.comparatif__source:hover { color: var(--champagne); }
@media (min-width: 900px) {
    .comparatif { gap: 0; border-radius: var(--rayon-carte); border: var(--filet) solid var(--trait); overflow: hidden; background: var(--surface); }
    .comparatif__tete, .comparatif__ligne { grid-template-columns: 220px 1fr 1fr; }
    .comparatif__tete { display: grid; background: var(--surface-haute); }
    .comparatif__tete span { padding: 16px 24px; font-weight: 700; font-size: .9rem; color: var(--doux); }
    .comparatif__tete span:nth-child(2) { color: var(--champagne); }
    .comparatif__ligne { border-top: var(--filet) solid var(--trait); }
    .comparatif__critere { padding: 22px 24px; font-size: 1.35rem; }
    .comparatif__barberx, .comparatif__planity { margin: 0; padding: 22px 24px; border: 0; }
    .comparatif__barberx { background: var(--voile-champagne); border-left: 2px solid var(--champagne); }
    .comparatif__planity { border-left: var(--filet) solid var(--trait); }
    .comparatif__qui { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* Ce qui doit décider : deux cartes, celle de BarberX filetée de champagne. */
.alt-choix { display: grid; gap: 16px; margin-top: 44px; }
@media (min-width: 820px) { .alt-choix { grid-template-columns: 1fr 1fr; gap: 20px; } }
.alt-choix__carte { padding: 26px 24px; border-radius: var(--rayon-carte); background: var(--surface); border: var(--filet) solid var(--trait); }
.alt-choix__carte--barberx { border-color: var(--filet-carte); background: var(--lueur-coin), var(--surface); }
.alt-choix__carte:not(.alt-choix__carte--barberx) .surtitre { color: var(--doux); }
.alt-choix ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--doux); line-height: 1.65; }
.alt-choix strong { color: var(--texte); font-weight: 600; }
#choisir .note { margin-top: 32px; max-width: 70ch; }

/* Le passage : les étapes, chacune son chiffre, son « quand », sa source. */
.passage { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .passage { grid-template-columns: 1fr 1fr; gap: 18px; } }
.passage__etape { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 24px 22px; border-radius: var(--rayon-carte); background: var(--surface); border: var(--filet) solid var(--trait); }
.passage__chiffre { font-family: var(--titres); font-weight: var(--titres-graisse); font-size: 3rem; line-height: .9; color: var(--champagne); }
.passage__quand { font-weight: 600; font-size: .84rem; color: var(--champagne); margin-bottom: 6px; }
.passage h3 { font-size: 1.55rem; margin-bottom: 10px; }
.passage p { color: var(--doux); font-size: .97rem; line-height: 1.7; }
.passage p + p { margin-top: 10px; }
.passage strong { color: var(--texte); font-weight: 600; }
.passage em { font-style: normal; color: var(--texte); }
.passage .passage__source { font-size: .82rem; color: var(--eteint); overflow-wrap: anywhere; }

/* Les sources, en pied de page : petites, lisibles, toutes cliquables. */
.alt-sources p:not(.surtitre) { color: var(--eteint); font-size: .9rem; line-height: 1.75; }