/*
 * Page « S'inscrire » — /inscription.
 *
 * ===========================================================================
 * CE FICHIER N'EXISTE QUE POUR CE QUI N'EXISTAIT PAS
 * ===========================================================================
 *
 * Le formulaire (.formulaire, .champ, .formulaire__paire), la ligne d'abonné
 * (.partenaire), la tuile gratuite (.tuile), le filet de séparation
 * (.separateur), les étiquettes et les boutons viennent de vac.css et
 * accueil.css, SERVIS TELS QUELS — et la fiche est carrément la vraie page,
 * rendue dans un cadre.
 *
 * C'est tout l'intérêt des deux aperçus, et ce n'est pas une économie de
 * travail : ce que le professionnel voit ici EST ce que le site rendra. La
 * première version de cette page dessinait ses propres fiches, et le client l'a
 * vu au premier coup d'œil — « ça y ressemble mais c'est pas ça ». Une
 * imitation diverge, et une promesse commerciale ne doit pas diverger.
 *
 * On ne trouve donc ci-dessous que trois choses : les deux colonnes du haut,
 * les onglets, et le cadre de navigateur qui encadre les aperçus.
 *
 * Aucune classe ne contient « pub », « ads », « banner » ni « publicite » :
 * les bloqueurs filtrent sur ces motifs. Règle commune à tout le socle.
 */

/* ========================================================================= *
 * 0. LA PAGE PREND PLUS DE LARGE QUE LE RESTE DU SITE
 * ========================================================================= */

/*
 * `--largeur` vaut 1200 px partout ailleurs (vac.css). Ici, la page porte deux
 * colonnes dont la droite contient une PAGE ENTIÈRE réduite : à 1200, il
 * restait 690 px pour la vignette, soit l'échelle 0,59 — illisible. À 1600, il
 * en reste plus de mille et l'échelle approche 0,9.
 *
 * ═══ POURQUOI ICI, ET POURQUOI CELA NE DÉBORDE PAS SUR LE RESTE DU SITE ═══
 *
 * Ce fichier n'est chargé QUE par /inscription : redéfinir la variable à sa
 * racine vaut donc pour cette page seule. Et comme elle vaut pour tout le
 * document, l'en-tête et le pied s'élargissent avec le contenu — ce qui est
 * exactement ce qu'il faut. Poser la largeur sur la seule section aurait
 * décalé le contenu par rapport à la barre du haut, qui aligne sa gouttière
 * sur cette même variable.
 *
 * Il vient APRÈS vac.css dans le document (voir @stack('styles') du gabarit) :
 * c'est ce qui lui donne le dernier mot.
 */
:root { --largeur: 1600px; }

/* ========================================================================= *
 * 1. DEUX COLONNES — les renseignements à gauche, l'exemple à droite
 * ========================================================================= */

.inscription__haut { background: var(--fond); }

/* Pleine largeur (25/09/2026) : le client voulait que la phrase sous le titre
 * coure sur toute la page au lieu de revenir à la ligne à mi-écran. */
.inscription__intro { max-width: none; }
.inscription__intro h1 { font-size: clamp(28px, 3.8vw, 44px); margin-top: 12px; }

/*
 * Recopiée de `.offre__accroche` (accueil.css), à l'identique. C'était la
 * dernière classe qui obligeait à charger cette feuille de 66 Ko sur cette
 * page — laquelle apportait aussi ses propres règles `.champ`, faites pour la
 * barre de recherche, qui gonflaient le formulaire d'une trentaine de pixels
 * par champ. Trois lignes recopiées valent mieux que cette dépendance.
 */
.inscription__accroche { margin: 12px 0 0; color: var(--secondaire); font-size: 17px; }

/*
 * LA COLONNE DE GAUCHE EST ÉTROITE, ET C'EST VOULU.
 *
 * Les renseignements tiennent sur UNE colonne : un formulaire dont les champs
 * vont par deux se lit en zigzag, et sur une colonne de 430 px chaque champ
 * fait la largeur de ce qu'on y écrit. La seule paire conservée est le code
 * postal et la ville — c'est une seule ligne d'adresse, et un code postal
 * étalé sur 430 px serait absurde.
 *
 * `align-items: start` : sans lui, les deux colonnes prendraient la hauteur de
 * la plus grande, et la carte du formulaire s'étirerait sur toute la hauteur de
 * l'exemple avec du blanc en dessous.
 */
.inscription__grille {
    display: grid;
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
    gap: 30px;
    margin-top: 28px;
    align-items: start;
}

.inscription__colonne { display: flex; flex-direction: column; gap: 16px; }
.inscription__exemple { min-width: 0; }

/* Un seul champ par ligne — sauf le couple code postal / ville. */
.inscription__colonne .formulaire__paire { grid-template-columns: minmax(0, 1fr); }

.carte-blanche {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: clamp(18px, 2.4vw, 28px);
}
.carte-blanche--retenue { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Le message de confirmation, au-dessus du formulaire qu'on vient d'envoyer. */
.carte-blanche > .message { margin-bottom: 18px; }

/* --------------------------- Le formulaire --------------------------- */

/*
 * Les intertitres sont des FILETS, pas des titres de section. Quatre <h3> dans
 * une carte blanche donneraient à un formulaire de douze champs l'allure d'un
 * dossier administratif.
 */
.formulaire__titre {
    font-family: var(--police-etiquette);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--trait);
}
.formulaire__titre-note {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--secondaire);
}

/*
 * L'ÉCART ENTRE DEUX GROUPES SE COMPOSE DE DEUX VALEURS, et c'est le piège :
 * `.formulaire` est un conteneur flex avec son propre `gap`, auquel s'ajoute la
 * marge du groupe suivant. Vingt-deux pixels au total ici, et non trente-six
 * comme avant — mais il faut lire les deux lignes ensemble pour le savoir.
 */
.formulaire { gap: 10px; }
.formulaire fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.formulaire fieldset + fieldset { margin-top: 12px; }
.formulaire .requis { color: var(--action); font-weight: 700; }

/*
 * ---------------------------------------------------------------------------
 * LE RYTHME VERTICAL, RESSERRÉ — et pourquoi il était lâche
 * ---------------------------------------------------------------------------
 *
 * Ces réglages ne valent QUE sur cette page : le fichier n'est chargé nulle
 * part ailleurs. Le formulaire de contact d'une fiche, qui partage les mêmes
 * classes, garde son espacement d'origine.
 *
 * Le formulaire est passé sur une seule colonne : douze champs empilés au lieu
 * de six rangs. Ce qui se lisait bien à deux colonnes devient une colonne de
 * 2 155 pixels — et le bouton « Valider » sort de l'écran.
 *
 * LA PLUS GROSSE PART DE CET AIR NE VENAIT PAS DE NOUS : accueil.css, chargé
 * ici jusqu'à ce lot, portait ses propres règles `.champ` — écrites pour la
 * barre de recherche de la page d'accueil et pour un autre formulaire. Elles
 * ajoutaient 20 px de remplissage, 16 px de marge et 6 px sous l'étiquette, à
 * chacun des douze champs. Cette feuille n'est plus chargée : c'était le vrai
 * correctif, et le reste ci-dessous n'est plus qu'un ajustement.
 *
 * Ce qui reste vient de vac.css, et se règle en deux lignes : l'écart entre
 * l'étiquette et sa case, et la hauteur des cases — 50 px, confortables au
 * doigt, généreuses à la souris. Quarante-six restent au-dessus de la cible
 * tactile recommandée de 44.
 *
 * On ne touche à AUCUNE taille de texte : resserrer en rapetissant les mots
 * rendrait le formulaire moins lisible, ce qui est l'inverse du but.
 */
.formulaire .champ { gap: 4px; }

/*
 * LA MÊME PROPRIÉTÉ RACCOURCIE QUE LA FEUILLE D'ORIGINE, et c'est délibéré.
 *
 * vac.css pose `padding: 11px 13px`. Redéclarer seulement les côtés
 * (`padding-block`, puis `padding-top` / `padding-bottom`) laissait la case à
 * 50 pixels — la faute à `.champ input[type="text"]` d'accueil.css, plus
 * spécifique et plus tardif que tout ce qu'on pouvait écrire ici. La feuille
 * est partie, mais on garde le raccourci entier : c'est la forme qui ne peut
 * pas se faire déborder par une déclaration voisine.
 */
.formulaire .champ input,
.formulaire .champ select,
.formulaire .champ textarea { padding: 9px 13px; }

.formulaire textarea { min-height: 92px; }

.champ__aide { margin-top: 1px; }

/*
 * L'erreur est SOUS SON CHAMP, jamais empilée en haut du formulaire.
 *
 * Une liste d'erreurs en tête oblige à retrouver le champ concerné, et sur un
 * formulaire de douze champs c'est exactement ce qu'on ne fait pas : on
 * abandonne. Le texte vient de la validation du contrôleur, qui dit ce qui
 * manque et pourquoi.
 */
.champ__erreur {
    margin: 2px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--action);
}

/* Code postal court, ville longue : deux champs qui n'ont pas la même taille. */
.formulaire__cp-ville { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }

.inscription__valider { margin-top: 20px; }

/*
 * LE CHOIX DE FORMULE : trois pastilles, pas une liste déroulante.
 *
 * Le troisième choix — « j'en parle au conseiller » — compte autant que les
 * deux autres, et il doit se voir sans qu'on déroule quoi que ce soit. Caché
 * dans un menu, il ne serait jamais choisi, et nous recevrions des demandes
 * « gratuit » de gens qui n'avaient simplement pas d'avis.
 */
.choix-formule { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 10px; }
.choix-formule label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: 11px 13px;
    cursor: pointer;
    background: var(--surface);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--encre);
    transition: border-color .15s, box-shadow .15s;
}
.choix-formule label:hover { border-color: var(--accent); }
.choix-formule input { margin: 3px 0 0; accent-color: var(--accent); }
.choix-formule small { display: block; font-weight: 400; color: var(--secondaire); font-size: 12.5px; line-height: 1.4; }

/*
 * `:has()` n'est pas indispensable : la pastille reste lisible sans lui, la
 * puce radio étant cochée. Il ajoute le liseré, et les navigateurs qui ne le
 * connaissent pas ignorent la règle entière sans rien casser.
 */
.choix-formule label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* --------------------- Ce qui se passe ensuite --------------------- */

.suite { display: flex; flex-direction: column; gap: 13px; }
.suite h2 { font-size: 21px; }

.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; counter-reset: etape; }
.etapes li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    font-size: 14px;
    color: var(--secondaire);
    line-height: 1.5;
}
/*
 * La numérotation est PORTÉE PAR LE CSS et non écrite dans le gabarit : ces
 * quatre étapes sont une vraie séquence — chacune attend la précédente —, et
 * le compteur ne peut pas se désynchroniser quand on en insère une.
 */
.etapes li::before {
    counter-increment: etape;
    content: counter(etape);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--couleur-site-claire);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.etapes b { display: block; color: var(--encre); font-size: 14.5px; }

.suite__note {
    margin: 0;
    padding: 12px 14px;
    border-left: 3px solid var(--signal);
    background: var(--fond);
    border-radius: 0 8px 8px 0;
    font-size: 13.5px;
    color: var(--secondaire);
}

/* ========================================================================= *
 * 2. LES DEUX FORMULES ET LEURS APERÇUS
 * ========================================================================= */

.exemples__entete { max-width: 62ch; }
.exemples__entete h2 { font-size: clamp(22px, 2.4vw, 30px); margin-top: 10px; }
.exemples__entete p { color: var(--secondaire); margin: 10px 0 0; font-size: 15px; }

.formule-mini__nom { font-size: 22px; margin-top: 6px; }
.formule-mini__accroche { margin: 8px 0 0; color: var(--secondaire); font-size: 14.5px; line-height: 1.55; }

/*
 * LE BANDEAU DE LA FORMULE — ce qu'elle donne, et son prix.
 *
 * Il était une carte étroite POSÉE À CÔTÉ des aperçus. Maintenant que tout
 * l'exemple tient dans une colonne, il la coiffe : d'abord ce que j'achète,
 * ensuite à quoi ça ressemble. C'est l'ordre dans lequel on lit une offre.
 *
 * Deux blocs côte à côte à l'intérieur : le titre et le tarif à gauche, la
 * liste des droits à droite — laquelle passe elle-même sur deux colonnes. Douze
 * lignes empilées auraient repoussé les vignettes hors de l'écran, et ce sont
 * les vignettes qui vendent.
 */
.formule-bandeau {
    display: grid;
    grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    margin-top: 22px;
}
.formule-bandeau .droits { margin-top: 0; }

/* ------------------------------ Les onglets ------------------------------ */

/*
 * DEUX VRAIS BOUTONS, « GRATUIT » ET « PARTENAIRE » (25/09/2026).
 *
 * C'était une pastille à deux positions, en petites capitales. Le client
 * voulait des boutons : celui de la fiche affichée est plein, l'autre est
 * au trait, et les deux ont la taille d'un bouton du site.
 */
.onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 18px;
}
.onglet {
    border: 0;
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--accent);
    border-radius: 8px;
    padding: 12px 28px;
    min-width: 150px;
    cursor: pointer;
    font-family: var(--police-texte);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--accent);
    transition: background .15s, color .15s;
}
.onglet:hover { background: var(--fond); }
.onglet[aria-selected="true"] { background: var(--accent); color: var(--sur-accent); }

/*
 * SANS JAVASCRIPT, LES DEUX PANNEAUX S'EMPILENT et la page reste entièrement
 * lisible : `hidden` est posé par le gabarit sur le second, et le script le
 * retire pour prendre la main. Un professionnel dont le navigateur bloque les
 * scripts voit les deux formules l'une sous l'autre — moins élégant, aussi
 * informatif. C'est la seule façon acceptable de cacher du contenu commercial.
 */
.panneau { margin-top: 0; }
.panneau[hidden] { display: none; }

/* --------------- La grille de comparaison, cochée ou barrée --------------- */

/*
 * DEUX COLONNES DE SIX LIGNES, et non douze empilées.
 *
 * DEUX COLONNES DÉCLARÉES, ET NON UN `auto-fit`. Avec
 * `repeat(auto-fit, minmax(215px, 1fr))`, il manquait SEPT PIXELS dans la
 * colonne de l'exemple — 2 × 215 + 22 d'écart = 452 pour 445 disponibles — et
 * la liste retombait sur une seule colonne, silencieusement. Un seuil qui se
 * joue à sept pixels n'est pas un réglage, c'est un hasard : on déclare donc
 * deux colonnes, et on dit à partir de quelle largeur.
 */
.droits {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px 22px;
    font-size: 14px;
}

@media (min-width: 620px) {
    .droits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.droits li { display: flex; gap: 9px; align-items: flex-start; color: var(--encre); }
.droits li svg { flex: none; margin-top: 4px; }
.droits .oui svg { color: var(--accent); }
.droits .non { color: var(--secondaire); }
.droits .non svg { color: #c4cdcd; }

.tarif { margin: 18px 0 0; font-size: 13.5px; color: var(--secondaire); line-height: 1.55; }
.tarif b { color: var(--encre); font-size: 15px; }

/* ------------- Le cadre de navigateur : « voici l'écran du visiteur » ------------- */

/*
 * CE QUI SE TROUVE DANS CES CADRES N'EST PAS DESSINÉ ICI.
 *
 * La liste emploie les partiels de la vraie page de résultats
 * (`_ligne-partenaire`, `_carte-gratuite`) et donc les classes `.partenaire`,
 * `.tuile`, `.grille-gratuites`, `.separateur` de vac.css. La fiche est la
 * VRAIE PAGE, rendue dans un cadre.
 *
 * On ne trouve donc ci-dessous que le cadre lui-même — la barre d'adresse, le
 * pointillé qui désigne le visiteur, et la mise à l'échelle de la vignette.
 * Toute règle qui redéfinirait ici l'aspect d'une ligne de résultat serait le
 * retour du défaut qu'on vient de corriger : une imitation qui diverge.
 */

/*
 * LES DEUX VIGNETTES SE SUIVENT dans la colonne de l'exemple : la liste de
 * résultats, puis la fiche. Elles font la même largeur — c'est la place que la
 * colonne leur donne, et c'est elle qui commande l'échelle de la fiche.
 */
.apercu__cadre--large { margin-top: 14px; }

.apercu__cadre {
    border: 1px solid var(--trait);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 22px 46px -34px rgba(12, 30, 40, .5);
}
.apercu__barre {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--fond);
    border-bottom: 1px solid var(--trait);
}
.apercu__pastilles { display: flex; gap: 5px; }
.apercu__pastilles i { width: 9px; height: 9px; border-radius: 999px; background: #cfd8d8; display: block; }
.apercu__url {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 11.5px;
    color: var(--secondaire);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.apercu__corps { padding: 15px; }
.apercu__legende {
    margin: 0 0 14px;
    font-family: var(--police-etiquette);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--secondaire);
}
.apercu__legende span { color: var(--accent); }

.apercu__note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--secondaire);
}

/* ------------------------- La liste de résultats ------------------------- */

/*
 * LES LIGNES SONT LES VRAIES, SEULEMENT PLUS PETITES.
 *
 * Une ligne de résultat est bâtie pour la pleine largeur du site ; dans une
 * colonne d'aperçu, ses trois blocs se marcheraient dessus. On réduit donc
 * l'échelle du texte et la colonne du logo — et RIEN D'AUTRE : ni les couleurs,
 * ni les rayons, ni la composition. C'est la même ligne, vue de plus loin.
 */
.apercu__resultats { font-size: 14px; }
.apercu__resultats .partenaire { padding: 14px; gap: 14px; }
.apercu__resultats .partenaire__logo { flex-basis: 120px; width: 120px; }
.apercu__resultats .partenaire__nom { font-size: 19px; }
.apercu__resultats .partenaire__actions { flex-basis: 120px; width: 120px; }
.apercu__resultats .partenaire__actions .bouton { font-size: 10.5px; padding: 8px 12px; }
.apercu__resultats .grille-gratuites { gap: 10px; }
.apercu__resultats .tuile { padding: 14px 12px; }
.apercu__resultats .tuile__nom { font-size: 14px; }
.apercu__resultats .tuile .bouton { font-size: 10.5px; padding: 7px 12px; }
.apercu__resultats .separateur { margin: 14px 0; }

/*
 * LES LIENS DE L'APERÇU NE MÈNENT NULLE PART, ET NE DOIVENT PAS ÊTRE
 * CLIQUABLES.
 *
 * Les partiels de résultat bâtissent de vrais `<a>` — ils sont faits pour ça —
 * et l'aperçu leur passe « # ». Cliquer « Voir la fiche » ramènerait donc en
 * haut de la page d'inscription, ce qui ressemble à une panne. Et ces liens
 * entreraient dans le parcours du clavier : une douzaine d'arrêts morts entre
 * le formulaire et le bas de page.
 */
.apercu__resultats a { pointer-events: none; }

/*
 * Le pointillé qui dit « c'est vous ». Un seul par écran, jamais deux : deux
 * encadrés ne désigneraient plus rien.
 *
 * Il enveloppe la ligne au lieu de la border : la ligne est un partiel partagé
 * avec la page de résultats, et lui ajouter une classe ici finirait par la
 * suivre là-bas.
 */
.a-la-loupe { outline: 2px dashed var(--signal); outline-offset: 5px; border-radius: var(--rayon); }

/* --------------------- La vignette de la fiche --------------------- */

/*
 * LA VRAIE PAGE, RÉDUITE — ET INERTE.
 *
 * Le cadre intérieur est rendu à `--largeur-apercu` (la largeur d'un écran de
 * bureau), puis mis à l'échelle par `--echelle`, que inscription.js calcule à
 * partir de la place disponible. Sans JavaScript, l'échelle vaut 1 et la page
 * s'affiche dans sa mise en page étroite : moins spectaculaire, tout aussi
 * juste.
 *
 * `pointer-events: none` : le cadre est une image, pas un espace où travailler.
 * Un clic sur un lien intérieur emmènerait le visiteur hors de la page
 * d'inscription, dans une fiche qui n'existe pas — et il n'aurait aucun moyen
 * de comprendre ce qui vient de se passer.
 */
.apercu__page {
    --largeur-apercu: 1180px;
    --echelle: 1;
    --hauteur-apercu: 1400px;

    position: relative;
    overflow: hidden;
    border: 1px solid var(--trait);
    border-radius: 10px;
    background: var(--fond);

    /* La hauteur suit celle de la page intérieure, mesurée et transmise par
       celle-ci. Tant qu'elle n'a pas répondu, un repli tient la place et évite
       que la page ne saute au moment où la vignette arrive. */
    height: calc(var(--hauteur-apercu) * var(--echelle));
    transition: height .25s ease;
}

.apercu__fiche {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--largeur-apercu);
    height: var(--hauteur-apercu);
    border: 0;
    display: block;
    transform: scale(var(--echelle));
    transform-origin: top left;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .apercu__page { transition: none; }
}


/* ========================================================================= *
 * 3. LES ÉCRANS ÉTROITS
 * ========================================================================= */

/*
 * LES DEUX COLONNES SE SÉPARENT TÔT — à 1160 px, pas à 900.
 *
 * La colonne de droite porte une page entière réduite : en dessous de cette
 * largeur, il ne lui reste plus assez de place pour que la vignette veuille
 * dire quelque chose. Mieux vaut alors l'exemple sous le formulaire, en pleine
 * largeur, que deux colonnes dont l'une est inutilisable.
 */
@media (max-width: 1160px) {
    .inscription__grille { grid-template-columns: minmax(0, 1fr); gap: 26px; }

    /* Rendus à la pleine largeur, les champs peuvent repasser par deux. */
    .inscription__colonne .formulaire__paire {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
}

@media (max-width: 900px) {
    .formule-bandeau { grid-template-columns: minmax(0, 1fr); gap: 18px; }

    /*
     * Sur téléphone, « ce qui se passe ensuite » passe AVANT le formulaire.
     * L'ordre du document reste l'inverse — le formulaire est le contenu
     * principal de la page, et c'est ce qu'un moteur et une synthèse vocale
     * doivent rencontrer en premier.
     */
    .suite { order: -1; }
}

/*
 * SUR UN ÉCRAN ÉTROIT, LA VIGNETTE EST TRONQUÉE — et il le faut.
 *
 * En dessous de 720 px, le script cesse de réduire : la page intérieure
 * s'affiche à l'échelle 1, dans la mise en page que le visiteur aura vraiment
 * sur son téléphone. C'est le bon aperçu, mais la fiche fait alors plus de
 * trois mille pixels de haut — la page d'inscription deviendrait interminable,
 * et le formulaire, qui est l'objet de la visite, inatteignable.
 *
 * On en montre donc le haut, et le dégradé dit que ça continue. Un cadre coupé
 * net laisserait croire que la fiche s'arrête là.
 */
@media (max-width: 719px) {
    /*
     * Trois cadres emboîtés — la carte du panneau, la fenêtre, son corps —
     * prenaient 70 pixels sur 343. Sur téléphone, la fenêtre suffit : chaque
     * pixel rendu à la vignette la rapproche de l'échelle 1 (28/09/2026).
     */
    .panneau { padding: 0; border: 0; background: none; box-shadow: none; }
    .apercu__cadre--large { margin-top: 0; }
    .apercu__corps { padding: 8px; }

    .apercu__page { max-height: 540px; }

    .apercu__page::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 120px;
        background: linear-gradient(to bottom, transparent, var(--surface));
        pointer-events: none;
    }
}

@media (max-width: 620px) {
    .onglets { display: flex; width: 100%; }
    .onglet { flex: 1; padding: 9px 12px; }

    .formulaire__cp-ville { grid-template-columns: 110px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .onglet, .choix-formule label { transition: none; }
}

/*
 * ===========================================================================
 * LA RECHERCHE DANS L'ANNUAIRE DES ENTREPRISES  (05/09/2026)
 * ===========================================================================
 *
 * Un champ, une liste, un résumé. Il est posé EN TÊTE du premier groupe et il
 * est visuellement détaché du reste : encadré, sur fond légèrement teinté.
 *
 * Ce détachement n'est pas décoratif. Un champ de complétion qui ressemble aux
 * autres se remplit comme les autres — le visiteur y tape son nom, appuie sur
 * Tab, et passe au suivant sans avoir compris qu'il vient de sauter le geste
 * qui lui aurait épargné six champs. Encadré et intitulé « gagnez du temps »,
 * il se lit comme ce qu'il est : un raccourci offert, qu'on peut ignorer.
 */
.recherche-entreprise {
    border: 1px solid var(--trait);
    border-radius: 10px;
    padding: 12px 14px 10px;
    background: var(--fond);
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
}

.recherche-entreprise > label {
    font-size: 13px;
    font-weight: 700;
    color: var(--encre);
}

.recherche-entreprise__saisie { position: relative; }

.recherche-entreprise__saisie input {
    width: 100%;
    padding: 9px 38px 9px 13px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    background: var(--surface);
    font: inherit;
    color: inherit;
}

.recherche-entreprise__saisie input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/*
 * LE FANION D'ÉTAT — une pastille de 14 px, à droite dans la case.
 *
 * Trois états seulement, et aucun n'est écrit en toutes lettres : « on
 * cherche », « on a trouvé », rien. Le texte, lui, est réservé à ce qui
 * demande une décision — « aucun établissement », « service indisponible » —
 * et s'affiche sous la case. Un message pour chaque état ferait clignoter un
 * paragraphe à chaque frappe.
 */
.recherche-entreprise__fanion {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .15s;
}

.recherche-entreprise__fanion[data-etat="cherche"] {
    opacity: 1;
    border: 2px solid var(--trait);
    border-top-color: var(--accent);
    animation: recherche-tourne .7s linear infinite;
}

.recherche-entreprise__fanion[data-etat="trouve"] {
    opacity: 1;
    background: var(--accent);
}

@keyframes recherche-tourne { to { transform: rotate(360deg); } }

/* Le mouvement se coupe pour qui l'a demandé au système. */
@media (prefers-reduced-motion: reduce) {
    .recherche-entreprise__fanion[data-etat="cherche"] { animation: none; }
}

/*
 * LA LISTE DES PROPOSITIONS.
 *
 * DANS LE FLUX, ET NON EN SURIMPRESSION. Un panneau flottant aurait été le
 * réflexe ; il aurait été rogné par la carte blanche qui l'entoure et serait
 * passé sous la barre du haut sur téléphone — deux défauts déjà rencontrés sur
 * ce projet, avec les panneaux du dossier client. Dans le flux, il pousse le
 * formulaire vers le bas, ce qui est exactement ce qu'on veut : le visiteur
 * regarde la liste, pas les champs qu'elle recouvrirait.
 */
.recherche-entreprise__liste {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    border: 1px solid var(--trait);
    border-radius: 8px;
    background: var(--surface);
    max-height: 300px;
    overflow-y: auto;
}

.recherche-entreprise__liste li + li { border-top: 1px solid var(--trait); }

.recherche-entreprise__liste button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.recherche-entreprise__liste button:hover,
.recherche-entreprise__liste button:focus-visible,
.recherche-entreprise__liste [aria-selected="true"] button { background: var(--fond); }

.recherche-entreprise__liste b { display: block; font-size: 14px; }

.recherche-entreprise__liste small {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: var(--secondaire);
}

/* « cessé » et « non diffusible » : ce qui doit arrêter le doigt. */
.recherche-entreprise__liste em {
    font-style: normal;
    font-weight: 700;
    color: var(--action);
}

.recherche-entreprise__message {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--secondaire);
}

.recherche-entreprise__message[data-ton="alerte"] { color: var(--action); font-weight: 600; }

.recherche-entreprise__retenu {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--secondaire);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

/*
 * `display: flex` BAT L'ATTRIBUT `hidden`, et il faut le rendre par écrit.
 *
 * La règle du navigateur est `[hidden] { display: none }` — une déclaration
 * d'auteur, si faible soit-elle, la remplace. Le résumé « repris de l'annuaire
 * des entreprises » s'affichait donc dès l'ouverture de la page, vide, avec son
 * bouton « ce n'est pas mon établissement » sous un formulaire encore blanc.
 *
 * Le piège vaut pour TOUTE règle d'affichage posée sur un élément qu'on cache
 * par `hidden` : la liste des propositions y échappe parce qu'elle n'en déclare
 * aucune, et c'est un hasard, pas une précaution. Vu au premier rendu de la
 * page, dans un navigateur — jamais en relisant le gabarit.
 */
.recherche-entreprise__retenu[hidden] { display: none; }

.recherche-entreprise__retenu b { color: var(--encre); }

.recherche-entreprise__retenu button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}


/*
 * ---------------------------------------------------------------------------
 * « VOUS Y ÊTES DÉJÀ »  (05/09/2026)
 * ---------------------------------------------------------------------------
 *
 * Le panneau qui dit à un professionnel que sa fiche existe, et le lien qui y
 * mène.
 *
 * IL PREND LA COULEUR D'ACCENT DU SUPPORT, pas un vert de sa propre invention.
 * L'en-tête de chaque annuaire porte sa teinte, et un bloc vert posé au milieu
 * d'un annuaire bleu se lirait comme un message du navigateur plutôt que comme
 * une phrase du site. C'est aussi la règle du réseau : seule la couleur change
 * d'un support à l'autre, et rien ne doit y échapper.
 *
 * IL N'A PAS L'ALLURE D'UNE ERREUR. Ni rouge, ni bordure épaisse, ni
 * pictogramme d'alerte : ce n'est pas un refus, c'est un renseignement. Le
 * formulaire dessous reste ouvert, et il doit continuer d'avoir l'air ouvert.
 */
.recherche-entreprise__deja {
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Voir la note de `.recherche-entreprise__retenu` : `display: flex` bat
   l'attribut `hidden`, et il faut le rendre par écrit. */
.recherche-entreprise__deja[hidden] { display: none; }

.recherche-entreprise__deja p {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--encre);
}

/*
 * LE LIEN A L'ALLURE D'UN BOUTON, et c'est le seul de ce bloc.
 *
 * C'est le geste qu'on propose : aller voir sa fiche. Un lien souligné au fil
 * du texte se serait perdu entre deux phrases en gras, sur une colonne de
 * 430 px déjà chargée.
 */
/*
 * 44 PIXELS DE HAUT, comme les douze champs du formulaire.
 *
 * `inline-flex` et `min-height` plutôt qu'un remplissage calculé : le
 * remplissage donnait 35 px — mesuré, pas estimé —, et un chiffre obtenu en
 * additionnant une police, une hauteur de ligne et deux marges se refait faux
 * au premier changement de l'un des trois. La cible tactile recommandée est de
 * 44, tout le reste de cette page s'y tient, et c'est le seul bouton de la
 * colonne qu'on presse au pouce.
 */
.recherche-entreprise__deja a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 7px;
    background: var(--accent);
    color: var(--sur-accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.recherche-entreprise__deja a:hover,
.recherche-entreprise__deja a:focus-visible { background: var(--accent-fonce); }

/* La phrase qui rouvre la porte : « vous pouvez continuer quand même ». Elle
   est en corps courant et en gris — c'est une permission, pas une consigne. */
.recherche-entreprise__deja-suite {
    font-weight: 400 !important;
    font-size: 12.5px !important;
    color: var(--secondaire) !important;
}

/*
 * LA PASTILLE DE LA LISTE — un `<ins>`, et ce n'est pas un caprice.
 *
 * Il fallait un élément en ligne, distinct de `<em>`, qui porte déjà les deux
 * avertissements rouges de cette même ligne (« cessé », « non diffusible »).
 * `<ins>` dit « ajouté » et se lit comme tel par un lecteur d'écran ; son
 * soulignement par défaut est retiré, il ferait doublon avec la couleur.
 */
.recherche-entreprise__liste ins {
    text-decoration: none;
    font-weight: 700;
    color: var(--accent);
}

/*
 * ===========================================================================
 * LE DÉPÔT DU LOGO ET DES PHOTOS  (05/09/2026)
 * ===========================================================================
 *
 * Aucune mise en scène : deux `input[type="file"]` natifs, dans la même case
 * que les autres champs. La tentation d'une zone de dépôt dessinée avec sa
 * flèche et son « glissez vos fichiers ici » a été écartée — elle demande du
 * script, elle ne marche pas au clavier sans travail supplémentaire, et le
 * sélecteur natif est celui que le professionnel connaît déjà de son
 * téléphone, où il ouvre directement la pellicule.
 *
 * `line-height` explicite : le bouton natif du sélecteur ne s'aligne pas sur
 * la ligne de base du texte, et sans cela la case fait deux pixels de moins
 * que ses voisines.
 */
.formulaire .champ input[type="file"] {
    padding: 8px 13px;
    line-height: 1.6;
    background: var(--surface);
}

.champ__note { font-weight: 400; color: var(--secondaire); }