/*
 * PAYBOARD — la page d'attente.
 *
 * Une seule feuille, écrite à la main. Pas de Tailwind, pas même par CDN :
 * pour une page, la classe utilitaire qui remplacerait ces règles serait plus
 * longue qu'elles — et `app-web` a déjà payé le Tailwind CDN dans ce projet.
 *
 * ⚠️ LES COULEURS SONT CELLES DE LA CHARTE, RECOPIÉES DEPUIS
 * `payboard-site/src/app/globals.css`. Ne pas en inventer une : le jaune de la
 * page précédente n'appartenait à aucune palette PAYBOARD.
 */
:root {
    --navy: #001871;          /* le fond, et le `primary` de la marque */
    --navy-deep: #00103F;     /* le voile posé sur la photographie */
    --accent: #418FDE;        /* fonds SOMBRES uniquement — 3,04:1 sur clair */
    --blanc: #FFFFFF;

    /* Les blancs atténués. Mesurés sur le voile, pas supposés. */
    --texte-doux: rgba(255, 255, 255, 0.74);
    /*
     * ⚠️ 0,58 NE PASSAIT PAS, ET ÇA TOMBAIT SUR LE PIRE TEXTE DE LA PAGE.
     * Mesuré au pixel sur la photographie voilée : la mention qui dit ce
     * qu'on fait de l'adresse donnait 4,35:1 à 1440 px et 3,53:1 à 390 px,
     * le pied 3,42:1 — sous AA tous les trois. Un texte de consentement
     * illisible est le seul de la page qu'on n'a pas le droit d'atténuer.
     * À 0,72 : rien ne descend plus sous 4,5:1.
     */
    --texte-faible: rgba(255, 255, 255, 0.72);
    --trait: rgba(255, 255, 255, 0.18);

    --pas: 8px;               /* le rayon, partout : jamais de pilule */
}

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

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

body {
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
    color: var(--blanc);
    background-color: var(--navy-deep);
    /*
     * ⚠️ LE FOND EST PORTÉ PAR LE `body`, PAS PAR UNE BALISE `<img>`. Une image
     * décorative en `<img>` demanderait un `alt` vide et un conteneur ; en
     * fond CSS elle n'entre pas dans l'arbre d'accessibilité du tout, ce qui
     * est exactement ce qu'on veut d'un décor.
     *
     * ⚠️ ET LES DEUX DÉGRADÉS PASSENT AVANT L'IMAGE dans la pile : c'est ce
     * qui garantit le contraste du texte blanc. Un fond photographique nu
     * ferait tomber le titre sous le seuil sur les zones claires du ciel.
     */
    background-image:
        /* haut : protège le logotype ; bas : protège le pied. */
        linear-gradient(103deg, rgba(0, 16, 63, 0.95) 0%, rgba(0, 16, 63, 0.91) 46%, rgba(0, 16, 63, 0.70) 100%),
        linear-gradient(to bottom, rgba(0, 16, 63, 0.75) 0%, rgba(0, 16, 63, 0) 28%),
        linear-gradient(to top, rgba(0, 16, 63, 0.8) 0%, rgba(0, 16, 63, 0) 22%),
        url("public/fond/avenue-camion.webp");
    background-size: cover, cover, cover, cover;
    background-position: center, center, center, center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

/*
 * ⚠️ IL N'Y A QU'UNE RÈGLE DE FOND, ET C'EST LA CORRECTION D'UN DÉFAUT RÉEL.
 * Une seconde existait pour la page anglaise, sous ce motif : « la page
 * anglaise vit un dossier plus bas : le chemin du fond change ». **C'est
 * faux.** Un `url()` de CSS se résout par rapport à la FEUILLE DE STYLE, jamais
 * par rapport au document qui l'inclut — et `styles.css` est à la racine, il
 * n'en bouge pas. Le chemin est donc le même pour les deux pages.
 *
 * ⚠️ ET LA RÈGLE EN TROP NE CASSAIT QUE DANS UN CAS SUR DEUX, CE QUI L'A FAIT
 * SURVIVRE. Servie en HTTP, elle donnait `/../public/…` que le navigateur
 * ramène à la racine : l'image s'affichait, et rien ne signalait l'erreur.
 * Ouverte en `file://` — ce que fait un éditeur pour prévisualiser — le `..`
 * n'est ramené nulle part : l'URL sortait du dépôt et **la page anglaise
 * n'avait plus de fond du tout**. Mesuré dans les deux modes.
 */

/*
 * Le piège à robots — visible de personne, rempli par les machines.
 *
 * ⚠️ IL ÉTAIT MASQUÉ PAR UN `style=` EN LIGNE, ET LA CSP L'A RENDU VISIBLE EN
 * PRODUCTION. `style-src 'self'` interdit les attributs de style en ligne :
 * le masquage tombait, et le champ « Ne remplissez pas ce champ » s'affichait
 * au milieu du formulaire, au-dessus de l'accroche.
 *
 * ⚠️ ET IL A FALLU RÉPARER UN AUTRE DÉFAUT POUR QUE CELUI-CI APPARAISSE. Tant
 * que les `add_header` du vhost étaient effacés par les blocs de cache, la CSP
 * n'était pas envoyée du tout : le style en ligne s'appliquait, et le piège
 * restait caché. Corriger l'héritage des en-têtes a activé la politique — et
 * découvert ce que le style en ligne cachait depuis le début.
 *
 * ⚠️ LA CSP NE SE RELÂCHE PAS POUR AUTANT. Ajouter `'unsafe-inline'` à
 * `style-src` pour un champ de trois lignes reviendrait à rouvrir la porte à
 * tous les styles injectés. C'est le style qui déménage, pas la politique.
 *
 * `left: -9999px` plutôt que `display: none` : un champ non rendu n'est pas
 * soumis par le navigateur, et le piège cesserait de piéger.
 */
.piege {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ───────────────────────────  le choix de langue  ──────────────────────── */

.langue {
    position: absolute;
    top: clamp(14px, 3vh, 26px);
    /*
     * ⚠️ 10 px AU PLANCHER, ET C'EST UN CHOIX DE PETIT ÉCRAN. La marge du
     * contenu est de 24 px ; le sélecteur s'en affranchit pour dégager le
     * haut de la colonne, là où la place manque le plus. On ne descend pas
     * plus bas : sous une dizaine de pixels, la cible frôle la zone que les
     * téléphones réservent aux gestes de bord.
     */
    right: clamp(10px, 3vw, 40px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--trait);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(6px);
}

.langue__choix {
    display: block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--texte-faible);
    text-decoration: none;
    transition: color 140ms ease, background-color 140ms ease;
}
.langue__choix:hover { color: var(--blanc); }
.langue__choix:focus-visible { outline: 2px solid var(--blanc); outline-offset: 2px; }

/*
 * La langue courante prend le fond plein : c'est le seul endroit de la page où
 * la distinction se joue sur autre chose que le mot lui-même.
 */
.langue__choix--actif {
    color: var(--navy);
    background: var(--blanc);
    cursor: default;
}

/* ─────────────────────────────  la colonne  ───────────────────────────── */

.page {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(20px, 4vh, 40px) 24px clamp(16px, 3vh, 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: clamp(16px, 3.4vh, 52px);
}

/*
 * ⚠️ TOUT CE QUI OCCUPE DE LA HAUTEUR EST CALÉ SUR `vh`, PAS SUR `vw` — ET
 * C'EST LA CORRECTION DE FOND DE CETTE PAGE.
 *
 * La première version dimensionnait titre, chiffres, logotype et espacements
 * sur la LARGEUR. Or les écrans de bureau qui posent problème sont ceux qui ont
 * beaucoup de largeur et peu de hauteur : mesuré, la page débordait de 112 px
 * en 1280 × 720, de 77 px en 1366 × 768 et de 54 px en 1280 × 800, alors
 * qu'elle tenait parfaitement en 1920 × 1080. **Un écran plus large rendait la
 * page plus haute** — c'est exactement ce qu'il ne faut pas.
 *
 * `min(Xvw, Yvh)` retient la plus contraignante des deux dimensions : la page
 * cesse de grandir dès que la hauteur manque, sans rien perdre sur un grand
 * écran. Le plancher des `clamp` reste calé sur le téléphone, où la hauteur est
 * abondante et la largeur rare.
 */

/*
 * ⚠️ LE LOGOTYPE EST SEUL SUR SA LIGNE, ET C'EST UNE DÉCISION.
 * La page précédente portait une barre — bascules de langue et bouton — sur un
 * teaser qui n'a qu'un geste possible. Une barre de navigation sur une page
 * unique propose des chemins qui n'existent pas, et elle dispute la place à ce
 * qu'on est venu voir. Le choix de langue est en pied de page.
 */
.marque { display: block; }
.marque img {
    width: clamp(160px, min(26vw, 21vh), 260px);
    height: auto;
    display: block;
}

.promesse {
    margin: 0;
    max-width: 23ch;
    font-size: clamp(1.75rem, min(4.4vw, 6.2vh), 3rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.03em;
}

/*
 * ⚠️ LA COUPE DU TITRE EST DÉCIDÉE DANS LE BALISAGE, PAS LAISSÉE AU NAVIGATEUR.
 * `text-wrap: balance` égalise la longueur des deux lignes et donnait
 * « La publicité / africaine va changer. » : la coupe tombe au milieu du groupe
 * nominal. Le sujet tient une ligne, le verbe l'autre — c'est la coupe de la
 * page d'origine, et la seule qui se lise.
 *
 * ⚠️ ET L'ESPACE ENTRE LES DEUX `<span>` COMPTE : sans lui, le titre se lirait
 * « La publicité africaineva changer. » partout où les deux tiennent sur une
 * ligne, et à la sélection du texte.
 */
.promesse__ligne { display: inline-block; }

/*
 * ⚠️ LE TITRE EST DÉLIBÉRÉMENT PLUS PETIT QUE LE DÉCOMPTE. Il introduit ce qui
 * vient dessous ; c'est la DATE qu'on vient chercher sur une page d'attente.
 * L'inverse — un titre énorme au-dessus d'un compteur discret — est ce que
 * faisait la page précédente.
 */


/* ───────────────────────────  le compte à rebours  ─────────────────────── */

.decompte { width: 100%; }

.decompte__oeil {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 clamp(10px, 2vh, 22px);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--texte-faible);
}
.decompte__filet {
    width: 40px; height: 1px;
    background: var(--accent);
    flex: none;
}

/*
 * ⚠️ QUATRE NOMBRES, PAS QUATRE CARTES. La page précédente les enfermait dans
 * des tuiles grises : le cadre prenait la place que les chiffres auraient dû
 * occuper, et le décompte se lisait moins loin que le titre. Ici, seuls des
 * filets verticaux séparent les groupes.
 */
/*
 * ⚠️ QUATRE COLONNES À TOUTES LES LARGEURS, Y COMPRIS 320 px.
 *
 * Une première version les repliait en deux colonnes sous 560 px, sous un
 * commentaire qui affirmait qu'« à 390 px, quatre nombres sur une ligne
 * tombent à moins de 30 px de haut ». **C'était faux, et la mesure l'a
 * démenti** : `font-size` est bornée par `clamp(2.6rem, …)`, dont le PLANCHER
 * empêche précisément cette chute. Relevé en forçant quatre colonnes de 320 à
 * 560 px — chiffres à 42 px partout, unités sur une seule ligne chacune, zéro
 * débordement de page comme de grille.
 *
 * Le repli coûtait donc quelque chose sans rien éviter : sur deux lignes, on
 * lit « 90 jours 06 heures » puis « 55 minutes 20 secondes », c'est-à-dire
 * deux fois deux nombres au lieu d'une durée. Un compte à rebours se lit d'un
 * seul regard, de gauche à droite.
 *
 * ⚠️ ET LE PIÈGE DE LA MESURE VAUT D'ÊTRE CONNU : `scrollWidth` ne voit pas un
 * libellé qui SE REPLIE. `.decompte__unite` est un bloc — « SECONDES » trop
 * large passerait à la ligne au lieu de déborder, et la page paraîtrait saine.
 * C'est la HAUTEUR des unités qu'il faut compter, pas leur largeur.
 */
.decompte__grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 760px;
    margin: 0 auto;
}

.decompte__part {
    padding: 0 clamp(4px, 1.5vw, 18px);
    border-left: 1px solid var(--trait);
}
.decompte__part:first-child { border-left: 0; }

.decompte__valeur {
    display: block;
    /*
     * ⚠️ CHASSE FIXE OBLIGATOIRE. Un chiffre qui change chaque seconde dans une
     * police proportionnelle fait bouger toute la ligne : « 11 » n'a pas la
     * largeur de « 08 ». `tabular-nums` sur une pile monospace verrouille les
     * deux.
     */
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-variant-numeric: tabular-nums;
    /*
     * ⚠️ 4,25 rem AU PLAFOND, PAS 5,25 — ET IL DOMINE TOUJOURS. Les chiffres
     * passaient à 84 px quand le titre en fait 48 : ils n'attiraient plus
     * l'œil, ils l'occupaient. À 68 px l'écart avec le titre reste de moitié,
     * ce qui suffit largement à faire du décompte le sujet de la page —
     * c'était la demande d'origine, et elle tient encore.
     */
    font-size: clamp(2.35rem, min(7.6vw, 8.8vh), 4.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--blanc);
}

.decompte__unite {
    display: block;
    margin-top: 10px;
    font-size: clamp(0.6rem, 1.4vw, 0.7rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--texte-faible);
}

/* L'état d'après : le compteur ne montre jamais quatre zéros. */
.decompte[data-atteinte="oui"] .decompte__grille { display: none; }
.decompte__ouvert { display: none; margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 700; }
.decompte[data-atteinte="oui"] .decompte__ouvert { display: block; }

/*
 * ⚠️ SANS JAVASCRIPT, LE DÉCOMPTE NE S'AFFICHE PAS — LA DATE, SI. Les chiffres
 * sont posés à « — » dans le HTML et la grille reste cachée tant que le script
 * n'a pas dit qu'il tournait. Un compteur figé sur des tirets se lirait comme
 * une panne ; une date se lit.
 */
.decompte:not([data-vivant="oui"]) .decompte__grille { display: none; }
.decompte:not([data-vivant="oui"]) .decompte__date { display: block; }
.decompte__date {
    display: none;
    margin: 0;
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    font-weight: 700;
}

/* ─────────────────────────────  l'inscription  ─────────────────────────── */

.inscription { width: 100%; max-width: 560px; }

.inscription__intro {
    margin: 0 0 16px;
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    color: var(--texte-doux);
}

.inscription__ligne {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.inscription__champ {
    flex: 1 1 240px;
    min-width: 0;
    padding: 15px 16px;
    font: inherit;
    font-size: 1rem;
    color: var(--blanc);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--trait);
    border-radius: var(--pas);
}
/*
 * ⚠️ UN PLACEHOLDER EST DU TEXTE, ET IL DOIT TENIR 4,5:1 COMME LE RESTE.
 * Il était à 0,5 : mesuré au pixel sur la photographie voilée, 3,54:1 à 390 px
 * et 3,73:1 en anglais. Le défaut n'était pas une régression de l'image de
 * fond — il vivait depuis le début, et il n'a été vu que le jour où le
 * placeholder a été AJOUTÉ à la liste des textes mesurés. Une mesure ne voit
 * que ce qu'on lui donne à regarder.
 */
.inscription__champ::placeholder { color: var(--texte-faible); }
.inscription__champ:hover { border-color: rgba(255, 255, 255, 0.34); }
.inscription__champ:focus-visible {
    outline: 2px solid var(--blanc);
    outline-offset: 2px;
    border-color: transparent;
}

/*
 * ⚠️ LE BOUTON EST BLANC, PAS `primary`. Le `primary` de PAYBOARD EST le navy
 * (#001871) : posé sur un fond navy, il disparaît. C'est la règle « primary se
 * REMPLIT » retournée par le fond — sur sombre, c'est le blanc qui remplit.
 */
.inscription__bouton {
    flex: 0 0 auto;
    padding: 15px 26px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
    background: var(--blanc);
    border: 1px solid var(--blanc);
    border-radius: var(--pas);
    cursor: pointer;
    transition: background-color 140ms ease, transform 90ms ease;
}
.inscription__bouton:hover { background: rgba(255, 255, 255, 0.9); }
.inscription__bouton:active { transform: translateY(1px); }
.inscription__bouton:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }
.inscription__bouton[disabled] { opacity: 0.7; cursor: progress; }

.inscription__mention {
    margin: 12px 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--texte-faible);
}

/*
 * Les quatre états. `role="status"` et non `aria-live="assertive"` : le retour
 * arrive après un geste de l'utilisateur, il n'a pas à interrompre la lecture.
 */
.inscription__retour {
    margin: 14px 0 0;
    min-height: 1.2em;
    font-size: 0.9rem;
    line-height: 1.5;
}
.inscription__retour[data-etat="succes"] { color: var(--blanc); font-weight: 600; }
.inscription__retour[data-etat="erreur"] { color: #FFC9C9; }

/* Le formulaire disparaît une fois l'adresse enregistrée : plus rien à faire. */
.inscription[data-etat="succes"] .inscription__ligne,
.inscription[data-etat="succes"] .inscription__intro,
.inscription[data-etat="succes"] .inscription__mention { display: none; }

/* ──────────────────────  formats et marchés, la bande  ─────────────────── */

/*
 * ⚠️ ELLE EST APRÈS LE FORMULAIRE, PAS AVANT, ET C'EST LA HIÉRARCHIE QUI LE
 * DÉCIDE. Cette page a un seul geste : laisser son adresse. Les formats et les
 * marchés répondent à « est-ce que ça me concerne ? », une question qu'on se
 * pose APRÈS avoir compris ce qui ouvre et quand. Les placer plus haut
 * repousserait le décompte et le champ sous la ligne de flottaison.
 *
 * ⚠️ ET ELLE REMPLACE UNE PHRASE, ELLE NE S'Y AJOUTE PAS. Le paragraphe
 * « Panneaux OOH et affichage mobile, au Bénin… » disait exactement la même
 * chose : le garder aurait fait dire deux fois à la page ce qu'elle ouvre, une
 * fois en toutes lettres et une fois en pictogrammes.
 */
.bande {
    width: 100%;
    max-width: 900px;
    margin-top: clamp(2px, 1.2vh, 18px);
    padding-top: clamp(14px, 2.4vh, 28px);
    border-top: 1px solid var(--trait);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(24px, 5vw, 64px);
}

.bande__groupe { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.bande__oeil {
    margin: 0;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--texte-faible);
}

.bande__liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px clamp(14px, 2.5vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.format, .marche {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blanc);
    white-space: nowrap;
}

.format__icone { width: 20px; height: 20px; flex: none; color: var(--accent); }

/*
 * ⚠️ LE DRAPEAU PORTE UN LISERÉ, ET IL N'EST PAS DÉCORATIF. Trois des quatre
 * portent du blanc ou du jaune très clair sur un bord : sans contour, la
 * Côte d'Ivoire perd sa bande blanche dans le voile et le Gabon paraît coupé.
 */
.marche__drapeau {
    width: 27px;
    height: 18px;
    flex: none;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/*
 * ⚠️ LE NOM DU PAYS EST DU TEXTE, JAMAIS SEULEMENT UN DRAPEAU. Un drapeau seul
 * n'a aucun nom accessible, et il se confond avec ses voisins : le Bénin, le
 * Cameroun et le Gabon partagent le vert, le jaune et le rouge. La forme dit
 * « quatre marchés », c'est le mot qui dit lesquels.
 */

/*
 * ⚠️ LE LIEN DE RETOUR PORTE SA PROPRE COULEUR, ET IL LE DOIT. La page de
 * confirmation rendue par `api/inscription.php` réemploie les classes de
 * celle-ci, mais son lien vit dans `<main>` — pas dans `<footer class="pied">`.
 * Les règles de couleur des liens étant portées par `.pied a`, il s'affichait
 * dans le BLEU PAR DÉFAUT du navigateur sur un fond navy : environ 1,5:1,
 * illisible. Vu sur une capture, pas par une sonde — les deux pages
 * s'affichaient, et seule l'une des deux avait un lien lisible.
 */
.lien-retour {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--blanc);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.lien-retour:hover { text-decoration-thickness: 2px; }
.lien-retour:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; border-radius: 2px; }

/* ───────────────────────────────  le pied  ─────────────────────────────── */

.pied {
    padding: 0 24px clamp(14px, 3vh, 32px);
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--texte-faible);
}
.pied a { color: var(--texte-doux); text-decoration: underline; text-underline-offset: 3px; }
.pied a:hover { color: var(--blanc); }
.pied a:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; border-radius: 2px; }
.pied__mention { margin: 0; }

/* ─────────────────────  mouvement réduit et petits écrans  ─────────────── */

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

@media (max-width: 560px) {
    .page { padding-top: 32px; gap: 26px; }
    /*
     * Sous 560 px, les deux groupes se posent l'un sous l'autre et les quatre
     * marchés passent en deux lignes de deux — quatre de front y donneraient
     * des noms tronqués.
     */
    .bande { flex-direction: column; gap: 22px; }
    .bande__liste { gap: 12px 18px; }
    .inscription__ligne { flex-direction: column; }
    /*
     * ⚠️ `flex: none` EST OBLIGATOIRE ICI, ET SON ABSENCE EST UN DÉFAUT QU'ON
     * NE VOIT QU'À L'ÉCRAN. En colonne, l'axe principal devient la VERTICALE :
     * le `flex-basis: 240px` du champ cesse d'être une largeur et devient une
     * HAUTEUR. Mesuré à 390 px avant correction : un champ e-mail de 230 px de
     * haut, qui poussait le bouton et la mention hors de vue. Aucune sonde de
     * présence ne l'aurait signalé — le champ était bien là.
     */
    .inscription__champ { flex: none; width: 100%; }
    .inscription__bouton { width: 100%; }
}