/*
 * CHARTE iNeed — palette relevée au pixel sur le logo, contrastes calculés (17 septembre 2026).
 *
 * ⚠️ LE MONDE EST CLAIR, ET C'EST MESURÉ, PAS CHOISI À L'ŒIL : le bleu du logo `#003D90` donne
 * 1,91:1 sur le fond sombre de webergeron.com — illisible. Sur blanc il donne 10,14:1.
 *
 * ⚠️ `--vert` NE PASSE PAS EN TEXTE SUR CLAIR (2,76:1). Pour du texte, c'est `--vert-texte`
 * (4,64:1). Deux tokens, deux usages, et ils ne se remplacent pas.
 *
 * iNeed reprend le SYSTÈME de webergeron.com — mêmes polices, même vocabulaire de composants —
 * et inverse le fond. ⚠️ Le fond constellation ne suit PAS : il appartient à l'éditeur.
 */

:root {
    --bleu: #003D90;
    --bleu-sombre: #002E6E;
    --bleu-clair: #E8EFFA;
    --vert: #2DB07A;            /* aplats, icônes, le logo */
    --vert-texte: #22845C;      /* texte sur fond clair */
    --fond: #FFFFFF;
    --fond-alt: #F5F7FB;
    --texte: #0F1629;
    --doux: #55618A;
    --trait: #DFE5F1;
    --titres: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    --corps: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

h1, h2, h3 { font-family: var(--titres); margin: 0; text-wrap: balance; }
p { margin: 0; }

a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--bleu);
    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(--bleu); }

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

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

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

.logo { display: flex; align-items: center; gap: 10px; font-family: var(--titres); font-weight: 800; font-size: 1.05rem; color: var(--texte); text-decoration: none; }
/* ⚠️ Le logo est une IMAGE découpée du fichier d'Alexandre (`tools/icones.php`), plus une tuile
   redessinée en CSS : deux dessins de la même marque divergent au premier ajustement.
   Le `border-radius` sert de filet — l'image porte déjà son arrondi. */
.logo-tuile { width: 38px; height: 38px; border-radius: 11px; flex: none; display: block; }

.liens { display: none; gap: 22px; margin-left: auto; list-style: none; margin-block: 0; padding: 0; }
.liens a { color: var(--doux); text-decoration: none; font-size: .94rem; font-weight: 500; }
.liens a:hover, .liens a.actif { color: var(--bleu); }

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

.pied { border-top: 1px solid var(--trait); padding-block: 34px; color: var(--doux); font-size: .88rem; }
.pied a { color: var(--doux); }
.pied-liens { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 12px; }

/* ═══ Boutons ═══ */

.bouton {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 22px; border-radius: 999px; background: var(--bleu); color: #fff;
    font-family: var(--titres); font-weight: 700; font-size: .94rem; text-decoration: none;
    border: 1px solid var(--bleu); transition: background .15s ease;
}
.bouton:hover { background: var(--bleu-sombre); border-color: var(--bleu-sombre); }
.bouton--clair { background: #fff; color: var(--bleu); }
.bouton--clair:hover { background: var(--bleu-clair); border-color: var(--bleu); }
.bouton--grand { padding: 15px 30px; font-size: 1rem; }

/* ═══ Sections ═══ */

.section { padding-block: 64px; }
.section--alt { background: var(--fond-alt); border-block: 1px solid var(--trait); }
.section h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 800; letter-spacing: -.02em; }
.section .intro { margin-top: 14px; color: var(--doux); max-width: 62ch; font-size: 1.04rem; }

/* 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: 26px; }

.trois { display: grid; gap: 28px; margin-top: 40px; }
@media (min-width: 760px) { .trois { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.trois h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.trois p { color: var(--doux); font-size: .97rem; }

.pastille { width: 34px; height: 34px; border-radius: 10px; background: var(--bleu-clair); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.pastille i { display: block; width: 12px; height: 12px; border-radius: 60% 0 60% 0; background: var(--vert); transform: rotate(12deg); }

/* ═══ La bande bleue — le seul aplat fort de chaque page ═══ */

.bande { background: var(--bleu); color: #fff; }
.bande .enveloppe { padding-block: 52px; display: grid; gap: 24px; align-items: center; }
@media (min-width: 820px) { .bande .enveloppe { grid-template-columns: 1fr auto; } }
.bande h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.95rem); }
.bande p { margin-top: 12px; color: #C9D8F2; max-width: 52ch; }
.bande strong { color: #fff; }

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

.question { border-bottom: 1px solid var(--trait); }
.question:first-of-type { border-top: 1px solid var(--trait); }
.question summary {
    cursor: pointer; padding: 20px 0; list-style: none;
    font-family: var(--titres); 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(--bleu); font-size: 1.5rem; line-height: 1; flex: none; }
.question[open] summary::after { content: "\2212"; }
.question p { margin-bottom: 22px; padding-right: 40px; color: var(--doux); font-size: .99rem; }

@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: 56px 64px; }
.heros-grille { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .heros-grille { grid-template-columns: 1.05fr 1fr; gap: 56px; } }

.heros h1 { font-size: clamp(2.05rem, 5vw, 3.15rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.heros-chapo { margin-top: 20px; font-size: 1.08rem; color: var(--doux); max-width: 46ch; }
.heros-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.heros-prix { margin-top: 18px; font-size: .92rem; color: var(--doux); }
.heros-prix strong { color: var(--texte); font-family: var(--titres); }

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

.agenda { border: 1px solid var(--trait); border-radius: 18px; background: #fff; box-shadow: 0 18px 44px rgba(0, 61, 144, .09); overflow: hidden; }
.agenda-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--trait); background: var(--fond-alt); }
.agenda-tete strong { font-family: var(--titres); font-size: .98rem; }
.agenda-tete span { font-size: .82rem; color: var(--doux); }
.agenda-corps { padding: 6px 0; }

.creneau { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: start; padding: 11px 20px; }
.creneau time { font-size: .84rem; color: var(--doux); font-variant-numeric: tabular-nums; padding-top: 2px; }
.creneau-bloc { border-left: 3px solid var(--bleu); padding-left: 12px; }
.creneau-bloc b { display: block; font-family: var(--titres); font-weight: 600; font-size: .95rem; }
.creneau-bloc span { font-size: .84rem; color: var(--doux); }
.creneau--vert .creneau-bloc { border-left-color: var(--vert); }
.creneau--libre .creneau-bloc {
    border-left: 3px dashed var(--vert);
    background: rgba(45, 176, 122, .07);
    border-radius: 0 10px 10px 0;
    padding: 9px 12px;
}
.creneau--libre b { color: var(--vert-texte); }

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

.intro-page { padding-block: 56px 40px; text-align: center; }
.intro-page h1 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin-inline: auto; max-width: 18ch; }
.chapo { margin: 22px auto 0; max-width: 58ch; font-size: 1.06rem; color: var(--doux); }

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

.offre {
    display: flex; flex-direction: column; gap: 14px;
    border: 1px solid var(--trait); border-radius: 18px; padding: 26px; background: #fff;
}
.offre--principale { border-color: var(--vert); box-shadow: 0 14px 36px rgba(45, 176, 122, .13); }
.offre h2 { font-size: 1.32rem; font-weight: 700; }
.offre-pour { color: var(--doux); font-size: .95rem; min-height: 3em; }
.offre-prix { color: var(--doux); font-size: .95rem; border-top: 1px solid var(--trait); padding-top: 18px; }
.offre-montant { display: block; font-family: var(--titres); font-size: 2.9rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--texte); }
.offre--principale .offre-montant { color: var(--vert-texte); }

.offre-inclus { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.offre-inclus li { position: relative; padding-left: 22px; font-size: .95rem; line-height: 1.5; }
.offre-inclus li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); }
.offre--principale .offre-inclus li::before { background: var(--vert); }

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

.zeros { margin: 28px 0 0; }
.zero { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--trait); }
.zero:first-child { border-top: 1px 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.3rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--bleu); white-space: nowrap; }

.note { margin-top: 26px; max-width: 66ch; color: var(--doux); font-size: .93rem; }
.section .intro + .intro { margin-top: 16px; }
.section .intro strong { color: var(--texte); }

@media (max-width: 640px) {
    .heros { padding-block: 40px 48px; }
    .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: 14px 0; border-bottom: 1px solid var(--trait); }
.fiche > div:first-child { border-top: 1px 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: 700; font-size: 1.15rem; color: var(--bleu); }

/* ═══ 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(--fond);
    border: 1px solid var(--trait);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(0, 61, 144, .16);
    color: var(--doux);
    font-size: .95rem;
}

.consentement__texte { flex: 1 1 320px; }
.consentement__titre { color: var(--texte); font-family: var(--titres); font-weight: 700; margin-bottom: 4px; }
.consentement a { color: var(--bleu); text-decoration: underline; }
.consentement__formulaire { display: flex; flex-wrap: wrap; gap: 12px; }
.consentement__formulaire .bouton { border-color: var(--trait); }
.consentement__formulaire .bouton:hover { border-color: var(--bleu); }

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

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

.formulaire label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--titres);
    font-weight: 600;
    font-size: .93rem;
    color: var(--texte);
}

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

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

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

.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: #B3261E; 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: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--trait);
    margin-bottom: 26px;
    font-size: .98rem;
}
.alerte--succes { border-color: var(--vert); background: rgba(45, 176, 122, .08); color: var(--vert-texte); }
.alerte--echec { border-color: #E5A0A0; background: rgba(179, 38, 30, .06); color: #8C1D18; }

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

   ⚠️ TOUT EST DANS CETTE FEUILLE, comme le reste du site : iNeed 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, #7f8ea3);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ⚠️ 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: 26px 24px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    /* 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: 3px solid rgba(214, 90, 90, 0.6);
}

.douleur h3 {
    margin: 0 0 10px;
    font-size: 1.03rem;
    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.03rem;
}

.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 « institut de beauté » 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(--bleu);
}

/* ⚠️ `.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;
}

/* ═══ LE SLOGAN QUI DÉFILE — « iNeed a barber », « iNeed a manicure »… ═══ (19 septembre 2026)

   ⚠️⚠️ AUCUN JAVASCRIPT, ET C'EST UNE CONDITION, PAS UNE PROUESSE. Ce site n'en charge aucun — la
   bannière de consentement elle-même est rendue par le serveur. Introduire un module pour faire
   défiler quatre mots aurait fait de l'ornement la première dépendance JS du site.

   ⚠️ L'ANIMATION EST GÉNÉRIQUE, ELLE NE CONNAÎT PAS LE NOMBRE DE MOTS. Une version en `opacity`
   aurait exigé des pourcentages de `@keyframes` dépendant du compte — donc une CSS à réécrire au
   cinquième métier, et personne n'y penserait. Ici la colonne se translate d'une ligne par cran,
   avec `steps(var(--n))` : `--n` vient du gabarit, qui le tient de `App\Contenu\Metiers`. Ajouter
   un métier ajoute un mot, et rien d'autre à faire.

   ⚠️ LA LARGEUR EST RÉSERVÉE PAR LE MOT LE PLUS LONG (`--large`, calculé en Twig). Sans elle, le
   titre entier se recompose à chaque rotation — vingt fois par minute — et ce saut se paie en
   stabilité de mise en page. */

.titre-slogan {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .32em;
}

/* ⚠️ `.slogan-marque` A UNE RÈGLE, MÊME MINIMALE, ET C'EST VOLONTAIRE. Une classe écrite dans un
   gabarit sans règle correspondante ne lève aucune erreur — elle ne fait rien, et elle se lit
   pourtant comme un point d'accroche. Ce dépôt a déjà payé ce défaut ailleurs. Ici la règle est
   une seule ligne, mais elle rend la classe RÉELLE : c'est par elle qu'on tiendra la marque si le
   titre change. */
.slogan-marque {
    white-space: nowrap;
}

/* ⚠️ LA HAUTEUR DU MASQUE ET CELLE DES LIGNES SONT LE MÊME RÉGLAGE, ET ELLES CHANGENT
   ENSEMBLE : le pas de l'animation est un pourcentage de la colonne, donc deux valeurs qui
   divergent font s'arrêter les mots à cheval. Voir `.slogan-colonne > span` juste dessous. */
.slogan-masque {
    display: inline-block;
    overflow: hidden;
    height: 1.45em;
    min-width: var(--large);
    vertical-align: bottom;
    color: var(--bleu);
}

.slogan-colonne {
    display: flex;
    flex-direction: column;
    animation: slogan-defile calc(var(--n) * 3s) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.slogan-colonne > span {
    /* ⚠️ 1.15em COUPAIT LES LETTRES HAUTES : une ligne de texte n'est pas haute de 1,15 fois la
       taille de police. Une capitale accentuée ou la jambe d'un « g » débordaient, et le
       `overflow: hidden` du masque laissait voir un fragment du mot suivant. */
    height: 1.45em;
    line-height: 1.45em;
    white-space: nowrap;
}

/* ⚠️⚠️ L'ANIMATION N'EST PLUS UN `steps()`, ET C'EST UNE DEMANDE D'ALEXANDRE : « il faut une
   petite animation stylée plutôt qu'un changement brut ». Un cran de `steps()` téléporte le mot ;
   ici chaque mot TIENT environ deux secondes et demie, puis glisse en un demi-tour de seconde.

   ⚠️ PRIX À PAYER, ET IL FAUT LE SAVOIR AVANT D'AJOUTER UN MÉTIER : **ces pourcentages dépendent
   du nombre de mots.** `steps(var(--n))` était générique, une suite de paliers ne peut pas l'être —
   les pourcentages d'un `@keyframes` n'acceptent pas de `calc()`. Ils sont écrits pour CINQ crans
   (quatre mots + la reprise du premier). **Un cinquième métier oblige à réécrire ce bloc**, et le
   gabarit ne le fera pas tout seul : le symptôme serait une traduction décalée d'un mot.

   ⚠️ LE DERNIER CRAN REVIENT SUR UNE COPIE DU PREMIER MOT (posée par le gabarit) : sans elle, le
   retour à zéro se voit comme un saut en arrière. Avec, le cycle se referme sans qu'on le remarque. */
@keyframes slogan-defile {
    0%,   19% { transform: translateY(0); }
    24%,  39% { transform: translateY(-20%); }
    44%,  59% { transform: translateY(-40%); }
    64%,  79% { transform: translateY(-60%); }
    84%, 100% { transform: translateY(-80%); }
}    to   { transform: translateY(-100%); }
}

/* ⚠️ QUI DEMANDE MOINS DE MOUVEMENT VOIT UN MOT, PAS UNE SUITE DE MOTS. On arrête l'animation à sa
   première position : le titre reste une phrase complète et juste. */
@media (prefers-reduced-motion: reduce) {
    .slogan-colonne {
        animation: none;
    }
}

.slogan-explication {
    margin-top: 14px;
    color: var(--doux);
    line-height: 1.7;
}

.slogan-explication strong {
    color: var(--texte);
}

/* Visible des lecteurs d'écran, jamais à l'écran. */
.sr-uniquement {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══ La traduction française sous le slogan ═══

   ⚠️ « iNeed » ne se complète qu'en anglais — c'est ce qui fait le slogan — mais les lecteurs sont
   des gérants français. La traduction fait ce que font les publicités qui traduisent leur accroche :
   elle garde le jeu de mots ET la compréhension. Elle est en italique et plus discrète : c'est une
   glose, pas une seconde accroche qui viendrait concurrencer la première. */
.slogan-traduction {
    margin: 6px 0 0;
    font-style: italic;
    color: var(--doux);
}

/* La traduction hérite de l'animation du masque (même `--n`, même durée, même courbe) : elles ne
   peuvent pas se désynchroniser puisqu'elles partagent la règle. */
.slogan-masque--fr {
    height: 1.6em;
    min-width: 0;
    color: inherit;
    font-size: 1rem;
}

.slogan-masque--fr .slogan-colonne > span {
    height: 1.6em;
    line-height: 1.6em;
}

/* La marque et le mot anglais gardent la graisse du titre ; la traduction non. */
.slogan-traduction .slogan-colonne > span::before { content: "« "; }
.slogan-traduction .slogan-colonne > span::after  { content: " »"; }

@media (prefers-reduced-motion: reduce) {
    .slogan-traduction .slogan-colonne {
        animation: none;
    }
}

/* ⚠️ 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: 50px;
    background: rgba(0, 61, 144, .08);
    border: 1px solid rgba(0, 61, 144, .22);
    color: var(--bleu);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    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.

   ⚠️ LE VERT NE SERT PAS ICI. Il est réservé aux aplats et au logo (`--vert`, 2,76:1 sur clair :
   illisible en texte), et sa version texte `--vert-texte` dit « tout va bien ». Un montant perdu
   n'est pas une bonne nouvelle : le chiffre est en bleu de marque, pas en 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. */

/* ⚠️ 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: .85rem;
    font-weight: 700;
    letter-spacing: .06em;
    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: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--bleu);
    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: 1px solid var(--trait);
    border-radius: 14px;
    overflow: hidden;
    background: var(--fond);
}

.calc-hypotheses li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 20px;
    padding: 16px 20px;
    border-bottom: 1px 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(--bleu-clair); }

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

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

.calc-comparaison {
    margin-top: 22px;
    padding-left: 14px;
    border-left: 3px solid var(--vert);
    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: 800;
    font-size: clamp(2.6rem, 7vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--trait);
    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: 800; letter-spacing: -.02em; margin: 34px 0 14px; }
.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: 1px solid var(--trait); border-radius: 18px; padding: 18px 20px; background: #fff;
}
.salon__logo { width: 72px; height: 72px; border-radius: 14px; object-fit: contain; background: var(--fond-alt); }
.salon__nom { font-size: 1.08rem; font-weight: 700; 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; }
}