/*
 * Feuille de style commune aux onze annuaires — habillage éditorial.
 *
 * Aucune compilation : le fichier est servi tel quel. Ce qui distingue un
 * support d'un autre tient dans une douzaine de variables, injectées dans le
 * <head> depuis la colonne `sites.theme` (voir Site::variablesCss()).
 *
 * Les valeurs ci-dessous ne servent donc que de repli — si la page était
 * servie sans son <style> d'identité, elle resterait lisible.
 *
 * DEUX COULEURS, DEUX RÔLES. `--accent` habille la barre, les titres et les
 * liens ; `--action` n'habille QUE les boutons qui déclenchent quelque chose.
 * Les confondre, c'est perdre le seul repère qui indique où cliquer.
 *
 * Nommage : aucune classe ne contient « pub », « ads », « banner » ni
 * « publicite ». Les bloqueurs filtrent sur ces motifs et masqueraient les
 * encarts chez une part notable des visiteurs.
 */

:root {
    --fond: #f4f6f5;
    --surface: #ffffff;
    --trait: #e3e7e6;
    --encre: #16292f;
    --secondaire: #5f7178;

    --accent: #1b7a78;
    --accent-fonce: #145d5b;
    --action: #a4272e;
    --action-fonce: #861f25;
    --signal: #c99a2e;
    /* Les petits traits décoratifs et les cartes de rubrique (25/09). */
    --filet: var(--signal);
    /*
     * Le doré, ÉCRIT. #c99a2e fait une belle bordure et un beau point, mais sur
     * blanc il tombe à 2,5:1 de contraste — illisible en corps 10. Le même
     * dédoublement que l'accent, et pour la même raison : une teinte qui fait
     * un bon trait ne fait pas toujours un bon texte.
     */
    --signal-fonce: #7d6527;

    --sombre: #14262c;
    --sombre-surface: #1d343b;
    --sombre-trait: #2b464e;
    --sombre-texte: #9db0b6;

    --police-titre: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --police-texte: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    /* Sur-titres et petites capitales. Repli : la fonte de texte. */
    --police-etiquette: var(--police-texte);

    /*
     * L'encre à poser SUR l'accent et SUR l'action — calculée par le serveur
     * d'après la luminance du fond (Site::encreSur). Un accent sombre reçoit du
     * blanc, un accent clair du noir. Écrire « color: #fff » sur un fond de
     * couleur est donc une faute : la barre d'un annuaire au vert acide
     * deviendrait illisible.
     */
    --sur-accent: #ffffff;
    --sur-action: #ffffff;

    /*
     * La barre du haut. Elle est IDENTIQUE sur les onze annuaires — même
     * hauteur, même carton blanc, même rang de liens — et ne change que de
     * couleur : c'est elle qui dit, en une seconde, sur quel annuaire on est.
     * Elle a son propre jeton plutôt que de reprendre l'accent, parce que
     * l'accent sert aussi à écrire (titres, liens, chiffres) : une teinte qui
     * fait une belle bande pleine ne fait pas toujours un texte lisible, et
     * l'inverse est vrai aussi. Laissé vide, il reprend l'accent.
     */
    --entete: var(--accent);
    --sur-entete: #ffffff;
    /*
     * L'encre du pied de page et des sections sombres. Elle valait « var(--fond) »
     * — le fond de page, clair par hypothèse. L'hypothèse est tombée avec la
     * première identité sombre : le texte du pied prenait la couleur du fond
     * sombre, sur un fond sombre. Elle se calcule maintenant comme les deux
     * précédentes, d'après la luminance de `--sombre`.
     */
    --sur-sombre: #f4f6f5;

    /*
     * LE PIED DE PAGE — la barre du haut, poussée d'un cinquième vers le noir.
     *
     * Il reprenait `--sombre`, un presque-noir réglé à part. C'était juste et
     * muet : arrivé en bas d'une page, plus rien ne rappelait sur quel annuaire
     * on se trouvait. Les trois valeurs sont calculées par le serveur
     * (Site::variablesCss) : le fond, son encre d'après sa luminance, et le
     * signal remonté jusqu'à se lire dessus. Ce qui suit n'est que le repli
     * d'une page rendue sans support — l'ancien pied, à l'octet près.
     */
    --pied: #14262c;
    --sur-pied: #f4f6f5;
    --pied-etiquette: #c99a2e;

    /* Compatibilité : d'anciennes règles s'appuient encore dessus. */
    --couleur-site: #1b7a78;
    --couleur-site-claire: #e6f0ef;

    --rayon: 10px;
    --marge: clamp(16px, 4vw, 44px);
    --largeur: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

[x-cloak] { display: none !important; }

a { color: var(--accent); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

img { max-width: 100%; }

/*
 * Titres à empattements, mot d'accent en italique : c'est la signature de
 * l'habillage. L'italique fait le travail que ferait ailleurs une seconde
 * couleur, sans alourdir la page.
 */
h1, h2, h3, .titre {
    font-family: var(--police-titre);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.012em;
    margin: 0;
    text-wrap: balance;
}
h1 em, h2 em, .titre em { font-style: italic; color: var(--accent); }

.etiquette {
    font-family: var(--police-etiquette);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--secondaire);
}

.conteneur {
    max-width: var(--largeur);
    margin: 0 auto;
    padding-inline: var(--marge);
}

/* 40 px fixes depuis le 25/09 au soir (demande du client : trop d'air entre
   les rubriques et les bandeaux) ; c'était clamp(40px, 6vw, 84px). */
.section { padding-block: 40px; }
.section--sombre { background: var(--sombre); color: var(--sur-sombre); }

/* Le défilement fluide amène l'ancre sous la barre collante. */
[id] { scroll-margin-top: 88px; }

/* ------------------------------- Boutons ------------------------------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--action);
    color: var(--sur-action);
    text-decoration: none;
    padding: 11px 22px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--police-texte);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    transition: background .15s;
}
.bouton:hover { background: var(--action-fonce); color: var(--sur-action); }
.bouton--principal { background: var(--action); color: var(--sur-action); }
.bouton--sombre { background: var(--encre); }
.bouton--sombre:hover { background: #000; }
.bouton--fantome {
    background: transparent;
    color: var(--encre);
    box-shadow: inset 0 0 0 1px var(--trait);
}
.bouton--fantome:hover { background: var(--fond); color: var(--encre); }
.section--sombre .bouton--fantome { color: var(--sur-sombre); box-shadow: inset 0 0 0 1px var(--sombre-trait); }
.section--sombre .bouton--fantome:hover { background: var(--sombre-surface); }
.bouton:disabled { opacity: .4; cursor: default; }

/* ------------------------------- En-tête ------------------------------- */

/*
 * UNE SEULE BARRE POUR LES ONZE ANNUAIRES.
 *
 * Fond blanc, le logo posé à gauche sans carton ni ombre, et la bande de
 * couleur qui ne part qu'à sa droite pour porter la navigation. Seule cette
 * couleur change d'un annuaire à l'autre — c'est le repère commun du réseau, et
 * la personnalité de chaque support commence sous la barre.
 *
 * Aucune allure ne la redéfinit : voir le bloc « LA BARRE DU HAUT N'A PAS
 * D'ALLURE » plus bas.
 */
.entete {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--surface);
}
/*
 * La barre est en pleine largeur, mais son contenu reste aligné sur la
 * colonne du site : la marque a la gouttière extérieure en padding, et la
 * bande de couleur file donc jusqu'au bord droit de l'écran sans qu'on ait
 * besoin d'une marge négative — laquelle aurait dépassé de la largeur de la
 * barre de défilement, et fabriqué un défilement horizontal.
 */
.entete__interieur {
    display: flex;
    align-items: stretch;
    min-height: 78px;
    max-width: none;
    padding-inline: 0;
    /*
     * `50%` et non `100vw / 2` (25/09 au soir). La variable est substituée là
     * où elle sert — le padding de `.marque` et de `.entete__bande` —, et le
     * pourcentage s'y calcule sur la largeur de la BARRE. `100vw` mesurait
     * l'écran : faux dès que la page est plus étroite que lui (fond de site
     * sur très grand écran, où `body` s'arrête au bord des panneaux) — le
     * logo quittait alors l'alignement de la colonne. Il comptait aussi la
     * barre de défilement, soit quelques pixels de trop partout.
     */
    --gouttiere: max(var(--marge), calc(50% - var(--largeur) / 2 + var(--marge)));
}

/*
 * La marque : le logo téléversé dans Supports, ou le nom du support quand il
 * n'y en a pas encore. Ses encres sont fixes — elle est toujours sur le blanc
 * de la barre, jamais sur le fond de la page, qui lui peut être sombre.
 */
.marque {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 30px 5px var(--gouttiere, 24px);
    color: #101a1e;
    text-decoration: none;
    flex: none;
}
/*
 * 68 px dans une barre de 78 (25/09, « logo trop petit ») : il gagne en
 * mangeant les marges, pas en épaississant la barre. La largeur est bornée
 * pour qu'un logo très allongé ne pousse pas le menu hors de la ligne.
 */
.marque__logo { max-height: 68px; max-width: 280px; width: auto; display: block; object-fit: contain; }

/*
 * EN HAUT DE PAGE, LE LOGO EN GRAND (25/09) : 100 px dans une barre de 110,
 * puis 68 dans 78 dès que la page défile, en rétrécissant. La classe
 * `est-defilee` est posée par le script de la mise en page, sur toutes les
 * pages. Sans script, la barre reste grande — c'est l'état du haut de page.
 *
 * Écran large seulement : sur téléphone, 100 px de logo mangeraient l'écran,
 * et la règle de 860 px garde son 52.
 */
@media (min-width: 861px) {
    .entete__interieur { transition: min-height .28s ease; }
    .marque__logo { transition: max-height .28s ease, max-width .28s ease; }
    .entete:not(.est-defilee) .entete__interieur { min-height: 110px; }
    .entete:not(.est-defilee) .marque__logo { max-height: 100px; max-width: 360px; }
}
@media (min-width: 861px) and (prefers-reduced-motion: reduce) {
    .entete__interieur, .marque__logo { transition: none; }
}
.marque__nom {
    display: block;
    font-family: var(--police-titre);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.01em;
}
.marque__baseline {
    display: block;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #5f7178;
    margin-top: 4px;
    font-weight: 600;
}

.entete__bande {
    flex: 1;
    min-width: 0;
    background: var(--entete);
    color: var(--sur-entete);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-left: clamp(14px, 2vw, 26px);
    padding-right: var(--gouttiere, 24px);
}

.navigation { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.navigation a {
    color: var(--sur-entete);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 9px 17px;
    border-radius: 999px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.navigation a:hover { background: color-mix(in srgb, var(--sur-entete) 16%, transparent); }
/* La page où l'on se trouve : une gélule pleine, comme un onglet retenu. */
.navigation a.est-actif { background: #fff; color: var(--entete); }

/*
 * Le bouton de la barre n'est PAS de la couleur d'action : deux couleurs
 * pleines côte à côte sur la même bande se disputent le regard. Il reprend la
 * bande, éclaircie — il se voit comme un bouton, pas comme une alarme.
 */
.entete__action {
    background: color-mix(in srgb, var(--sur-entete) 20%, transparent);
    color: var(--sur-entete);
    border-radius: 999px;
    padding: 10px 20px;
    margin-left: 8px;
    box-shadow: none;
}
.entete__action:hover {
    background: color-mix(in srgb, var(--sur-entete) 32%, transparent);
    color: var(--sur-entete);
}

.menu-bouton { display: none; background: none; border: 0; color: var(--sur-entete); padding: 8px; cursor: pointer; }
/* Le bouton de la bande recopié dans le menu : n'existe que sur téléphone. */
.navigation .navigation__action { display: none; }
/* ---------------------------- Chapeau de page --------------------------- */

.chapeau { text-align: center; padding-block: clamp(26px, 4vw, 46px) clamp(20px, 3vw, 32px); }
.chapeau__sur { display: block; margin-bottom: 12px; }
.chapeau h1 { font-size: clamp(26px, 4vw, 42px); }
.chapeau h1 em { color: var(--signal); }
.chapeau__precision { margin: 12px 0 0; color: var(--secondaire); font-size: 15px; }
.chapeau__precision b { color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; }

/*
 * LE TEXTE DES PAGES DE RUBRIQUE ET DE DÉPARTEMENT (25/09/2026) — voir
 * App\Support\TextesArchives. En haut, deux ou trois lignes sous le nombre
 * d'établissements, dans la colonne du chapeau ; en bas, sous la liste, un
 * bloc sur fond de carte. Les liens gardent la couleur de l'annuaire.
 */
/* Toute la largeur de la page — du bord gauche de la carte au bord droit des
   fiches (25/09, demande de l'éditeur : à 68 caractères, un texte de
   département faisait un pavé étroit au milieu). */
.archive-intro { margin: 14px 0 0; color: var(--secondaire); font-size: 15.5px; line-height: 1.65; }
.archive-intro p { margin: 0; }
.archive-intro p + p { margin-top: 8px; }
.archive-intro a,
.archive-texte a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.archive-intro a:hover,
.archive-texte a:hover { border-bottom-color: var(--accent); }

.archive-texte {
    margin-top: 32px;
    padding: clamp(20px, 3vw, 30px);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    color: var(--secondaire);
    font-size: 15.5px;
    line-height: 1.7;
}
.archive-texte h2 { font-size: clamp(20px, 2.4vw, 24px); color: var(--encre); margin: 0 0 12px; }
.archive-texte h2::after { content: ""; display: block; width: 34px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--filet); }
.archive-texte p { margin: 0 0 12px; }
.archive-texte p:last-child { margin-bottom: 0; }
.archive-texte__departements { padding-top: 12px; border-top: 1px solid var(--trait); font-size: 14.5px; }
.archive-texte__departements b { color: var(--encre); font-weight: 600; }

/*
 * « Nous avons aussi cherché élagage » — la faute de frappe rattrapée.
 *
 * Discrète, et elle doit le rester : la correction n'écarte rien, elle ajoute.
 * Un bandeau d'alerte laisserait croire que la recherche a été détournée.
 */
.chapeau__correction {
    margin: 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--secondaire);
    font-size: 13.5px;
}
.chapeau__correction b { color: var(--encre); font-weight: 600; }
.chapeau__correction svg { color: var(--action); flex: 0 0 auto; }

/* ═══════════════════════ Page de résultats ═══════════════════════════════
 *
 * Deux colonnes, et chacune a un rôle qui ne se discute pas :
 *
 *   à gauche, LE RAIL — la carte, le panneau « Trouvez un professionnel », puis
 *   le 300 × 250 vendu. C'est la colonne qui reste : la supprimer supprimerait
 *   le seul emplacement 300 × 250 du site ;
 *
 *   à droite, LES RÉSULTATS — un abonné par ligne, pleine largeur, puis les
 *   fiches gratuites en grille de trois. La différence de traitement EST
 *   l'abonnement : elle se voit d'un coup d'œil, avant même de lire un nom.
 *
 * Les filtres ne sont plus une pile de listes : ils tiennent dans le panneau,
 * en jetons et en sélecteurs repliés. Le lieu s'y lit du plus large au plus
 * étroit — région, puis département, puis ville.
 */

.recherche {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    padding-bottom: clamp(40px, 6vw, 80px);
}

.rail { display: flex; flex-direction: column; gap: 16px; }

/*
 * LE RAIL SUIT LA PAGE DANS LES DEUX SENS (25/09 au soir).
 *
 * Collant, mais avec un `top` que assets/rail-collant.js déplace à chaque
 * défilement : en descendant, le rail file avec la page jusqu'à ce que le bas
 * des filtres touche le bas de l'écran, puis y reste ; en remontant, il file
 * de nouveau jusqu'à ce que la carte arrive sous la barre du haut, puis y
 * reste. Un rail plus court que l'écran reste simplement sous la barre.
 *
 * La classe `est-collant` est posée par le script : sans lui, le rail reste
 * dans le flux comme avant — un rail plus haut que l'écran, collé en haut
 * sans script, cacherait ses derniers filtres. Écran large seulement — sous
 * 1080 px le rail passe au-dessus des résultats et n'a rien à suivre.
 */
@media (min-width: 1081px) {
    .rail.est-collant {
        position: sticky;
        top: var(--rail-haut, 100px);
    }
}

.encadre {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    overflow: hidden;
}
.encadre + .encadre { margin-top: 14px; }

/* ------------------------- La carte, en vignette ------------------------ */

/*
 * Elle n'est plus là pour être lue — 300 pixels de large ne montrent rien —
 * mais pour donner envie de l'ouvrir. D'où le bouton posé dessus, et le nombre
 * d'établissements réellement placés annoncé dessous : le visiteur sait ce
 * qu'il va trouver avant de cliquer.
 */
/*
 * `isolation: isolate` (25/09 au soir) : les couches de Leaflet (400) et le
 * voile (500) restent DANS la vignette. Sans elle, ces z-index se comparaient
 * à celui de la barre du haut (60), et la carte lui passait par-dessus au
 * défilement.
 */
.carte-vignette {
    position: relative;
    isolation: isolate;
    height: 186px;
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--fond);
    border: 1px solid var(--trait);
}
.carte-vignette .carte { position: absolute; inset: 0; height: 100%; border-radius: 0; }

/* Le voile ne prend pas les clics : la vignette reste manipulable au doigt. */
.carte-vignette__voile {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(12, 30, 40, 0) 45%, rgba(12, 30, 40, .45));
}
.carte-vignette__ouvrir {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    color: var(--encre);
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px -10px rgba(12, 30, 40, .55);
    transition: transform .15s, box-shadow .15s;
}
.carte-vignette__ouvrir:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(12, 30, 40, .6); }
.carte-vignette__ouvrir svg { color: var(--accent); }
.carte-vignette__compte {
    margin: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(12, 30, 40, .9);
    font-variant-numeric: tabular-nums;
}

/* ------------------- Le panneau « Trouvez un professionnel » ------------- */

.panneau {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.panneau__titre {
    margin: 0;
    text-align: center;
    font-size: 19px;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent);
}
.panneau__filet { height: 1px; background: var(--trait); margin: 0; border: 0; }

.champ-recherche {
    width: 100%;
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: 10px;
    padding: 12px 14px;
    font: inherit;
    font-size: 14.5px;
    color: var(--encre);
}
.champ-recherche::placeholder { color: var(--secondaire); }
.champ-recherche:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/*
 * Le cadre des jetons — c'est la « compression » des filtres : une facette
 * entière tient dans une boîte qui défile, au lieu d'une liste qui pousse tout
 * le reste.
 *
 * `boite-jetons` et non `jetons` : ce dernier nom est DÉJÀ pris par la page
 * d'accueil, où il désigne la liste des rubriques d'une carte de vitrine. Les
 * deux feuilles se chargent ensemble, et sous l'allure épurée mes règles
 * l'emportaient : elles posaient un cadre gris autour des rubriques de
 * l'accueil.
 */
.boite-jetons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-height: 172px;
    overflow-y: auto;
    padding: 10px;
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: 10px;
}
.jeton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: 999px;
    padding: 6px 11px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--encre);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.jeton:hover { border-color: var(--accent); color: var(--accent); }
.jeton__nombre { color: var(--secondaire); font-variant-numeric: tabular-nums; }
.jeton__croix { font-weight: 400; opacity: .7; }
.jeton--actif {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border-color: var(--accent);
    color: var(--accent-fonce);
}
.jeton--actif .jeton__nombre { color: inherit; opacity: .8; }
.jeton--vide { opacity: .45; cursor: default; }
.jeton--vide:hover { border-color: var(--trait); color: var(--encre); }

/* Les filtres posés, tous ensemble, retirables d'un clic. */
.actifs { display: flex; flex-wrap: wrap; gap: 6px; }
.jeton-actif {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    border-radius: 999px;
    padding: 5px 11px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent-fonce);
    cursor: pointer;
}
.jeton-actif:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.jeton-actif b { font-weight: 400; opacity: .65; }

/* ═══════════════════════ « Où êtes-vous ? » ══════════════════════════════
 *
 * Le même bloc dans le panneau, dans la barre de la carte et dans la vitrine de
 * l'accueil. La saisie prime, le viseur n'est qu'un raccourci — et le lieu
 * trouvé s'affiche en toutes lettres, parce qu'une position fausse est
 * invisible tant qu'on ne lit pas son nom.
 */

.ou-suis-je { position: relative; display: flex; flex-direction: column; gap: 7px; }
.ou-suis-je__titre { color: var(--secondaire); }

.ou-suis-je__pose {
    display: flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    border-radius: 10px;
    padding: 9px 10px 9px 12px;
    font-size: 13.5px;
    color: var(--accent-fonce);
}
.ou-suis-je__pose b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ou-suis-je__corriger {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}
.ou-suis-je__oublier {
    background: none;
    border: 0;
    padding: 0 2px;
    font-size: 16px;
    line-height: 1;
    color: inherit;
    opacity: .55;
    cursor: pointer;
}
.ou-suis-je__oublier:hover { opacity: 1; }

.ou-suis-je__ligne { display: flex; gap: 7px; align-items: stretch; }
.ou-suis-je__champ { flex: 1; min-width: 0; }
.ou-suis-je__viseur {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: 10px;
    padding: 0 13px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--encre);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.ou-suis-je__viseur:hover { border-color: var(--accent); color: var(--accent); }
.ou-suis-je__viseur:disabled { opacity: .5; cursor: default; }

.ou-suis-je__liste {
    position: absolute;
    z-index: 45;
    top: 100%;
    left: 0;
    right: 0;
    margin: 4px 0 0;
    padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: 12px;
    box-shadow: 0 22px 48px -22px rgba(12, 30, 40, .55);
    max-height: 260px;
    overflow-y: auto;
}
.ou-suis-je__option {
    width: 100%;
    background: none;
    border: 0;
    border-radius: 8px;
    padding: 9px 10px;
    font: inherit;
    font-size: 13.5px;
    color: var(--encre);
    text-align: left;
    cursor: pointer;
}
.ou-suis-je__option:hover { background: var(--fond); }

.ou-suis-je__mot { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--secondaire); }

/* Dans la barre de la carte, tout tient sur une ligne. */
.ou-suis-je--compact { flex: 1 1 300px; max-width: 420px; }
.ou-suis-je--compact .ou-suis-je__mot { position: absolute; top: 100%; left: 0; right: 0; margin-top: 3px; }

/* ------------------------- « Où ? » — les trois crans ------------------- */

/*
 * Région, puis département, puis ville : le lieu se resserre, et chaque cran
 * rétrécit le suivant. Retenir « Pays de la Loire » ne laisse que cinq
 * départements au cran d'après, et les villes qui restent sont celles où
 * l'annuaire a vraiment des fiches — les compteurs viennent du moteur, jamais
 * d'une liste écrite à la main.
 */
/*
 * DEUX VOIES, ET ON DOIT VOIR QU'ELLES SONT DEUX.
 *
 * « Autour de chez vous » et « par région / département / ville » ne répondent
 * pas à la même question. Empilées dans la même colonne de champs, elles ne
 * disaient à personne laquelle choisir. Chacune a donc son cadre, son intitulé,
 * et un « ou » entre les deux — trois pixels de séparation valent mieux qu'un
 * paragraphe d'explication.
 */
.ou { display: flex; flex-direction: column; gap: 9px; }
.ou__titre { color: var(--secondaire); }

.ou__voie {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: 12px;
}
.ou__voie-titre {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--encre);
}

/* Le « ou », barré de part et d'autre : il sépare, il ne s'ajoute pas. */
.ou__separateur {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--secondaire);
}
.ou__separateur::before,
.ou__separateur::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--trait);
}

.ou__rayon {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--encre);
}
.ou__rayon select {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: 7px 9px;
    font: inherit;
    font-size: 13px;
    color: var(--encre);
    cursor: pointer;
}

/*
 * La loupe DANS le champ. Elle ne fait rien — c'est un repère, pas un bouton :
 * la recherche part à la frappe. Elle est là pour que le champ se lise comme
 * un champ de recherche au premier coup d'œil.
 */
.champ-loupe { position: relative; display: flex; align-items: center; }
.champ-loupe svg {
    position: absolute;
    left: 13px;
    color: var(--secondaire);
    pointer-events: none;
}
.champ-loupe .champ-recherche { padding-left: 38px; }

/* ------------------- Un champ qui propose, et sa liste ------------------- */

/*
 * LA MÊME LISTE DÉROULANTE POUR TOUT LE SITE.
 *
 * Elle est posée quatre fois : sous les deux champs du bandeau d'accueil, sous
 * celui du panneau de résultats, et sous celui de la barre de la carte en
 * grand. Elle vit donc ICI et non dans accueil.css — la page de résultats ne
 * charge pas cette feuille-là, et la liste s'y serait affichée sans aucun style,
 * c'est-à-dire en pleine page sous les résultats.
 *
 * Le gabarit est unique lui aussi : resources/views/public/partials/_suggestions.
 */

/*
 * Le cadre de référence de la liste. Sans `position: relative` ici, elle se
 * poserait par rapport à la page et suivrait le défilement au lieu de suivre
 * son champ.
 */
.champ--propose { position: relative; }

/*
 * La liste est posée SOUS son champ, jamais au-dessus : le visiteur doit
 * continuer de voir ce qu'il a tapé pendant qu'il choisit.
 *
 * `z-index` la met devant ce qui suit dans la page — un encart vendu ne doit
 * pas passer devant la liste, mais il ne doit pas non plus disparaître : il
 * redevient visible dès qu'on referme.
 */
.suggestions {
    position: absolute;
    z-index: 60;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: 14px;
    box-shadow: 0 26px 54px -26px rgba(12, 30, 40, .55);
    text-align: left;
}

.suggestions__groupe + .suggestions__groupe {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--trait);
}
.suggestions__titre {
    display: block;
    padding: 5px 10px 3px;
    color: var(--secondaire);
}

.suggestion {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: none;
    border: 0;
    border-radius: 9px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    color: var(--encre);
    text-align: left;
    cursor: pointer;
}
/*
 * UNE SEULE FAÇON D'ÊTRE SURVOLÉ. La souris ne pose pas sa propre couleur :
 * elle déplace le rang actif. Sans cela, la souris et le clavier allumaient
 * deux lignes différentes en même temps, et l'on ne savait plus laquelle
 * « Entrée » allait choisir.
 */
.suggestion--active { background: var(--fond); }
.suggestion__nom { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestion__detail {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--secondaire);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.suggestion__nombre {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--secondaire);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

/*
 * DANS LA VILLE, OU AUTOUR D'ELLE — deux états qui s'excluent.
 *
 * Deux boutons radio et non une case : le filtre commune referme exactement ce
 * que le cercle ouvre, on ne peut donc pas « ajouter » un rayon à une ville, on
 * la remplace. Le cadre coloré sur la branche retenue dit lequel des deux court
 * sans qu'il faille viser la pastille.
 */
.portee { display: flex; flex-direction: column; gap: 7px; }
.portee__choix {
    display: flex; align-items: center; gap: 9px;
    cursor: pointer; font-size: 13.5px;
    padding: 8px 10px; border-radius: 9px;
    border: 1px solid transparent;
}
.portee__choix:hover { background: var(--fond); }
.portee__choix input { accent-color: var(--accent); flex: none; margin: 0; }
.portee__choix--pose {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.portee__choix select {
    font: inherit;
    padding: 2px 4px;
    border: 1px solid var(--trait);
    border-radius: 6px;
    background: var(--surface);
    color: inherit;
}
.portee__nombre { color: var(--secondaire); font-variant-numeric: tabular-nums; }

/*
 * LES DÉPARTEMENTS LIMITROPHES — une CASE, pas deux radios.
 *
 * La forme dit la nature du geste : contrairement au rayon, qui remplace la
 * ville, celle-ci s'AJOUTE au département. Les noms des voisins sont écrits
 * dessous : sans eux, la case demande au visiteur de connaître la géographie
 * de la Drôme pour savoir ce qu'il accepte.
 */
.limitrophes {
    display: flex; align-items: flex-start; gap: 9px;
    cursor: pointer; font-size: 13.5px;
    padding: 8px 10px; border-radius: 9px;
}
.limitrophes:hover { background: var(--fond); }
.limitrophes input { accent-color: var(--accent); flex: none; margin: 2px 0 0; }
.limitrophes small {
    display: block; margin-top: 2px;
    font-size: 12px; line-height: 1.4; color: var(--secondaire);
}

.selecteur { position: relative; }

/*
 * LA LIGNE « VILLE + VISEUR ».
 *
 * Le bouton prend la place, le viseur prend ce qu'il lui faut. Les deux
 * répondent à la même question — d'où cherche-t-on ? — et tenaient jusqu'au
 * 03/09 dans deux cadres séparés par un « ou ».
 *
 * `.selecteur__rang` existe pour que `.selecteur__menu`, en absolu, reste
 * accroché à `.selecteur` : il se déroule sous la ligne ENTIÈRE, viseur
 * compris, et non sous le seul bouton.
 */
.selecteur__rang { display: flex; align-items: stretch; gap: 6px; }
.selecteur__rang .selecteur__bouton { flex: 1 1 auto; min-width: 0; }

/*
 * Le viseur, réduit à son icône sur cette ligne : le mot « Me localiser » ne
 * tiendrait pas à côté d'un nom de commune long, et le bouton pousserait
 * « Bourg-lès-Valence » dans les points de suspension. L'intitulé reste lisible
 * par les technologies d'assistance et en infobulle.
 */
.ou-suis-je--viseur-seul { flex: none; position: relative; }
.ou-suis-je--viseur-seul .ou-suis-je__viseur { height: 100%; padding: 0 10px; }
.ou-suis-je--viseur-seul .ou-suis-je__viseur-mot {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* Le message d'échec se pose SOUS la ligne, sans la déformer : « Position
   refusée par le navigateur » est une phrase, pas une étiquette de bouton.
   Il se referme à la croix — voir le gabarit. */
.ou-suis-je__mot-fermer {
    float: right;
    margin: -2px -2px 0 6px;
    background: none;
    border: 0;
    padding: 0 3px;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    color: var(--secondaire);
    cursor: pointer;
}
.ou-suis-je__mot-fermer:hover { color: var(--encre); }

.ou-suis-je--viseur-seul .ou-suis-je__mot {
    position: absolute;
    z-index: 46;
    top: calc(100% + 4px);
    right: 0;
    width: max-content;
    max-width: 232px;
    margin: 0;
    padding: 7px 9px;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: 9px;
    box-shadow: 0 14px 30px -16px rgba(12, 30, 40, .5);
    font-size: 12px;
    line-height: 1.4;
    color: var(--secondaire);
}
.selecteur__bouton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: 10px;
    padding: 11px 13px;
    font: inherit;
    font-size: 13.5px;
    color: var(--secondaire);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s;
}
.selecteur__bouton:hover,
.selecteur__bouton[aria-expanded="true"] { border-color: var(--accent); }
.selecteur__bouton--pose {
    color: var(--encre);
    font-weight: 700;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    border-color: var(--accent);
}
.selecteur__valeur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selecteur__fleche { flex: none; opacity: .55; }

.selecteur__menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: 12px;
    box-shadow: 0 22px 48px -22px rgba(12, 30, 40, .55);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.selecteur__filtre {
    width: 100%;
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--encre);
}
.selecteur__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 244px;
    overflow-y: auto;
}
.selecteur__option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: none;
    border: 0;
    border-radius: 8px;
    padding: 8px 9px;
    font: inherit;
    font-size: 13.5px;
    color: var(--encre);
    text-align: left;
    cursor: pointer;
}
.selecteur__option:hover { background: var(--fond); }
.selecteur__option--active { font-weight: 700; color: var(--accent-fonce); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.selecteur__option span:last-child { color: var(--secondaire); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.selecteur__rien { padding: 10px 9px; margin: 0; color: var(--secondaire); font-size: 13px; }

/*
 * LE SECOND GROUPE DU MENU « VILLE » — les communes que la facette ignore.
 *
 * Un trait le sépare de la liste du dessus, et un titre le nomme : les deux
 * listes ne promettent pas la même chose. Celle du haut compte ce qu'il y a
 * ici ; celle-ci ouvre une porte vers un endroit où l'annuaire n'a peut-être
 * personne, mais autour duquel il sait chercher.
 */
/* L'invite du menu « Ville », tant que rien n'est tapé. */
.selecteur__invite {
    margin: 0;
    padding: 2px 9px 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--secondaire);
}

.selecteur__ailleurs { border-top: 1px solid var(--trait); padding-top: 8px; }
.selecteur__titre {
    margin: 0 0 4px;
    padding: 0 9px;
    font-family: var(--police-etiquette);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--secondaire);
}
/* « Drôme · aux alentours » : le département lève l'ambiguïté des homonymes,
   la mention dit qu'on cherchera autour plutôt que dedans. */
.selecteur__option small { display: block; color: var(--secondaire); font-size: 11.5px; margin-top: 1px; }

/* Les facettes qui restent — type de présence, champs métier — repliées. */
.repli { border-top: 1px solid var(--trait); padding-top: 12px; }
.repli__titre {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--secondaire);
    cursor: pointer;
}
.repli__titre .etiquette { color: inherit; }
.repli__corps { margin-top: 10px; }

.panneau__envoi { width: 100%; justify-content: center; }

/* --------------------------- Colonne des résultats ---------------------- */

.resume {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--secondaire);
}
.resume strong { font-size: 17px; color: var(--encre); font-variant-numeric: tabular-nums; }
.resume__duree { font-size: 12px; opacity: .6; }

.resultats { display: flex; flex-direction: column; gap: 14px; }

/*
 * UN ABONNÉ PAR LIGNE. Toute la largeur, son logo, son texte, son bouton : la
 * ligne d'un abonné ne peut pas être confondue avec une tuile gratuite, même
 * de loin, même sans lire un mot.
 */
/*
 * LES DEUX CÔTÉS FONT LA MÊME LARGEUR, et c'est tout le sujet du centrage.
 *
 * Avec un carton de logo à gauche et un bouton plus large à droite, le bloc du
 * milieu tombait à côté de l'axe de la ligne : personne n'aurait su dire
 * pourquoi, tout le monde l'aurait vu. Les deux colonnes latérales valent donc
 * 165 pixels — la largeur du carton de logo, celle de la fiche.
 */
.partenaire {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 20px 22px;
    display: grid;
    grid-template-columns: 165px minmax(0, 1fr) 165px;
    gap: 22px;
    align-items: center;
    transition: border-color .15s, box-shadow .15s;
}
.partenaire:hover {
    border-color: var(--accent);
    box-shadow: 0 18px 40px -28px rgba(20, 40, 45, .6);
}

/*
 * Le carton du logo — 165 × 80, exactement le format de la fiche. Il est
 * TOUJOURS là : sans logo, il porte les initiales. Un abonné n'a jamais de trou
 * à la place de sa marque, et la ligne garde son aplomb d'un résultat à l'autre.
 */
.partenaire__logo {
    width: 165px;
    height: 80px;
    border-radius: 10px;
    background: var(--surface);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.partenaire__logo img,
.partenaire__logo picture { width: 100%; height: 100%; object-fit: contain; display: block; }
.partenaire__initiales {
    font-family: var(--police-titre);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--accent);
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: 10px;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

/* Le corps est centré : c'est ce qui donne son aplomb à la ligne, et ce qui
   distingue au premier regard un abonné d'une tuile alignée à gauche. */
.partenaire__corps { text-align: center; min-width: 0; }
.partenaire__nom { font-size: 21px; margin: 0; line-height: 1.2; }
.partenaire__nom a { color: var(--accent); text-decoration: none; }
.partenaire__nom a:hover { color: var(--accent-fonce); text-decoration: underline; }
.partenaire__lieu { margin: 7px 0 0; font-size: 13.5px; font-weight: 600; color: var(--secondaire); }
.partenaire__actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.partenaire__actions .bouton { white-space: normal; text-align: center; }

.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; justify-content: center; }
.etiquettes li { font-size: 12px; font-weight: 700; color: var(--action); letter-spacing: .02em; }
.etiquettes li + li::before { content: "•"; margin-right: 6px; color: var(--trait); font-weight: 400; }
.etiquettes--discretes li { color: var(--action); }

/*
 * LES GRATUITES : trois par ligne, et rien de plus que le nom, le lieu et la
 * rubrique. Ce n'est pas une tuile appauvrie par CSS — le logo, l'extrait et
 * les coordonnées ne sont tout simplement pas produits par le serveur.
 */
.grille-gratuites {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}
.tuile {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
    transition: border-color .15s, box-shadow .15s;
}
.tuile:hover { border-color: var(--accent); box-shadow: 0 16px 34px -28px rgba(20, 40, 45, .6); }
.tuile__nom { font-size: 16px; margin: 0; line-height: 1.25; }
.tuile__nom a { color: var(--accent); text-decoration: none; }
.tuile__nom a:hover { text-decoration: underline; }
.tuile__lieu { margin: 0; font-size: 13px; font-weight: 600; color: var(--secondaire); }
.tuile .etiquettes { margin-top: 0; }
.tuile .bouton { margin-top: auto; }

/*
 * ═══════════════════════════════════════════════════════════════════════════
 * « NOUVEAU » — la pastille des fiches qui viennent d'arriver (lot 43)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * UNE SEULE FAMILLE, DEUX DENSITÉS. Le filet fin dans les listes, le verre sur
 * le bandeau de la fiche. Même mot, même doré : le visiteur qui clique
 * reconnaît ce qu'il vient de voir.
 *
 * ── POURQUOI LE DORÉ ET PAS L'ACCENT DU SUPPORT
 *
 * Trois raisons, et la première suffirait. L'accent habille DÉJÀ toute la
 * page — les titres, les liens, le bouton « Voir la fiche », le dégradé du
 * bandeau sans photo : une pastille en accent posée là-dessus ne se détache de
 * rien. Le doré est ensuite déjà la couleur de la distinction sur ce site (le
 * cerclage d'Encart+, l'étiquette du pied). Il est enfin le MÊME sur les onze
 * annuaires, comme la barre du haut : « Nouveau » se reconnaît d'un support à
 * l'autre sans avoir à réapprendre une couleur.
 *
 * ── POURQUOI LE FILET PLUTÔT QUE LE PLEIN, DANS LES LISTES
 *
 * Sur la ligne d'un abonné, la pastille tombe dans la colonne de droite, au-
 * dessus du bouton « Voir la fiche » — qui est plein, et dans la couleur
 * d'accent. Deux pleins empilés dans 165 pixels de large font une tache, et la
 * pastille se lit alors comme un second bouton. Le contour la distingue par sa
 * NATURE, pas seulement par sa teinte : elle ne peut plus être prise pour
 * quelque chose qui se clique.
 *
 * ── AUCUNE ANIMATION DANS LES LISTES
 *
 * Vingt-quatre résultats, dont plusieurs neufs : autant de pastilles qui
 * bougeraient en même temps. Le mouvement est réservé au bandeau de la fiche,
 * où il n'y en a qu'une, et il s'annule sous « réduire les animations ».
 *
 * ── AUCUN NOM DE CLASSE FILTRABLE
 *
 * Ni « promo », ni « pub », ni « banner » : les bloqueurs filtrent sur ces
 * motifs jusque dans les noms de classe, et effaceraient la pastille chez
 * environ un visiteur sur trois. Voir _habillage.blade.php, même contrainte.
 */
.marque-neuf {
    /*
     * EN FLUX, PAS EN ABSOLU, et c'est la décision qui tient tout le bloc.
     *
     * `.partenaire__actions` et `.tuile` sont des colonnes flex : posée en
     * premier enfant, la pastille occupe le haut à droite du contenu et POUSSE
     * ce qui suit. Une pastille en `position: absolute` se serait superposée au
     * bouton dès qu'une carte change de hauteur — un nom sur deux lignes, une
     * troisième rubrique — et personne ne l'aurait vu avant la mise en ligne.
     */
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 8px;
    border: 1px solid color-mix(in srgb, var(--signal) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--signal) 10%, transparent);
    color: var(--signal-fonce);
    font-family: var(--police-etiquette);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
    flex: none;
}

/* Le point plein porte le doré VRAI ; le mot porte sa version lisible. */
.marque-neuf::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--signal);
    flex: none;
}

/*
 * « Nouveau » tout seul, à côté d'un nom d'entreprise, ne dit pas nouveau QUOI.
 * La précision est lue par les technologies d'assistance et invisible à l'œil :
 * l'étiquette doit rester courte pour tenir dans une colonne de 165 pixels.
 */
.marque-neuf__long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * ── LA PASTILLE DU BANDEAU DE FICHE ─────────────────────────────────────────
 *
 * Le seul endroit de la page où le haut à droite est libre : le logo et le nom
 * sont ancrés en bas à gauche, et le voile ne remonte pas jusque-là.
 *
 * LE VERRE EST SOMBRE, ET C'EST UN CHOIX DE LISIBILITÉ, PAS DE GOÛT. Le fond
 * du bandeau est une photo que l'abonné choisit : un ciel, une façade blanche,
 * une nacelle sur fond de neige. Un verre CLAIR à texte blanc devient illisible
 * sur la moitié de ces photos, et l'on ne saurait jamais lesquelles. Un verre
 * sombre à texte blanc tient sur toutes — y compris sur le dégradé d'accent des
 * fiches sans photo, où il se lit comme une ombre portée.
 *
 * Le flou est un supplément, jamais la condition : là où `backdrop-filter`
 * n'existe pas, il reste un rectangle sombre parfaitement lisible.
 */
.marque-neuf--fiche {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    padding: 6px 13px 6px 11px;
    font-size: 11px;
    letter-spacing: .12em;
    color: #fff;
    background: rgba(16, 27, 31, .46);
    border-color: rgba(255, 255, 255, .42);
    box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .9);
    -webkit-backdrop-filter: blur(10px) saturate(1.25);
    backdrop-filter: blur(10px) saturate(1.25);
    animation: marque-neuf-arrivee .5s ease-out both;
}

.marque-neuf--fiche::before {
    width: 6px;
    height: 6px;
    /* Le halo décolle le point du verre : sans lui, le doré se noie. */
    box-shadow: 0 0 0 3px rgba(201, 154, 46, .3);
}

@keyframes marque-neuf-arrivee {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/*
 * La ligne d'un abonné a sa colonne d'actions ; la tuile d'une fiche gratuite
 * n'en a pas — la pastille y est le premier enfant de la carte elle-même, et
 * `.tuile` centre tout par défaut. On la renvoie à droite, seule.
 */
.tuile > .marque-neuf { margin-bottom: -2px; }

/* La coupure entre les abonnés et les gratuites : un filet, puis l'intertitre. */
.separateur {
    border: 0;
    border-top: 1px solid var(--trait);
    margin: 22px 0 18px;
}

/*
 * LES INTERTITRES DE LA LISTE (25/09, retour client) — « Nos partenaires »,
 * « Les autres entreprises ». Dans la langue des étiquettes de
 * l'accueil : petites capitales, un trait de la couleur des petits traits
 * (`--filet`, réglé dans Habiller) devant.
 */
.intertitre-resultats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
    font-family: var(--police-etiquette, var(--police-texte));
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}
.intertitre-resultats::before {
    content: "";
    flex: none;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: var(--filet);
}

.distance { color: var(--secondaire); }

/*
 * LE TRAIT QUI SÉPARE LE DÉPARTEMENT CHOISI DE SES VOISINS.
 *
 * Sans centre, il n'y a pas de distance, donc AUCUN ordre naturel entre les
 * deux zones : mêlées, les fiches paraissent classées au hasard. Le trait rend
 * l'ordre lisible, et le nom porté par chaque ligne d'ailleurs (`.ailleurs`)
 * dit d'où elle vient.
 *
 * `.rang` est en `display: contents` : elle n'existe que pour porter le trait
 * devant un article, sans s'interposer dans la mise en page de la liste.
 */
.rang { display: contents; }

.voisins {
    display: flex; align-items: center; gap: 14px;
    margin: 26px 0 16px;
    font-size: 13px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--secondaire);
}
.voisins::before, .voisins::after { content: ""; flex: 1; border-top: 1px solid var(--trait); }
.voisins span {
    font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .8;
    font-variant-numeric: tabular-nums;
}

.partenaire__lieu .ailleurs { color: var(--action); font-weight: 700; }

.coordonnees { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.coordonnees a { font-weight: 600; text-decoration: none; }

/*
 * LE VIDE QUI RÉPOND QUAND MÊME.
 *
 * `.vide` seul dit « aucun établissement » et laisse le visiteur là. Sa variante
 * `--repli` porte une phrase, une distance et un geste : « le plus proche est à
 * 43 km, à Valence » vaut mieux qu'un zéro, et c'est le visiteur qui juge si
 * 43 km lui vont. Elle est un peu plus resserrée que la version nue, parce
 * qu'elle a quelque chose à faire lire plutôt qu'un constat à poser.
 */
.vide__titre {
    font-family: var(--police-titre);
    font-size: 19px;
    line-height: 1.3;
    color: var(--encre);
    margin: 0 0 8px;
}
.vide__suite { margin: 0 0 18px; font-size: 14.5px; }
/* La ligne qui explique pourquoi il n'y a pas de bouton de rayon : plus
   discrète que la phrase du dessus, c'est une précision, pas la réponse. */
.vide__note { margin: 0 0 14px; font-size: 13.5px; color: var(--secondaire); }
.vide__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* Le compteur d'un palier : « Chercher à 25 km (7) ». Il est écrit plus
   discrètement que le geste — c'est une précision, pas l'intitulé du bouton. */
.bouton__compte { opacity: .72; font-weight: 400; font-variant-numeric: tabular-nums; }

.vide {
    background: var(--surface);
    border: 1px dashed var(--trait);
    border-radius: var(--rayon);
    padding: 40px 20px;
    text-align: center;
    color: var(--secondaire);
}

/* APRÈS `.vide`, et pas avant : même spécificité, c'est l'ordre qui tranche.
   Déclarée au-dessus, cette ligne était écrasée par le padding de `.vide`. */
.vide--repli { padding: 32px 22px; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    font-size: 14px;
    color: var(--secondaire);
}
.pagination b { color: var(--encre); }

/* ══════════════════════ La carte en grand ════════════════════════════════
 *
 * La vignette du rail sert à donner envie ; la recherche cartographique se fait
 * ICI, en plein écran. Il n'y a qu'UNE carte Leaflet dans la page : son
 * conteneur est déplacé de la vignette vers la modale, et revient ensuite. Deux
 * instances auraient voulu dire deux jeux de marqueurs à tenir d'accord, et un
 * cadrage perdu à chaque ouverture.
 */
.carte-plein {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: color-mix(in srgb, var(--sombre) 82%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0px, 2.5vw, 28px);
}
.carte-plein__cadre {
    position: relative;
    width: min(1400px, 100%);
    height: 100%;
    background: var(--surface);
    border-radius: var(--rayon);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}
.carte-plein__barre {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--trait);
    background: var(--surface);
}
.carte-plein__barre h2 { font-size: 17px; margin: 0; }

/*
 * Le champ de la barre porte maintenant sa liste déroulante : c'est
 * l'enveloppe qui prend la place dans la ligne, et le champ qui la remplit.
 */
.carte-plein__propose { flex: 1 1 240px; max-width: 420px; }
.carte-plein__champ { width: 100%; }

/*
 * La liste doit passer AU-DESSUS DE LA CARTE. Les couches de Leaflet sont à
 * 400 et ses commandes à 1000 : 500 est la valeur que prend déjà tout ce qui se
 * pose sur une carte dans ce projet — assez haut pour couvrir les marqueurs,
 * assez bas pour ne pas voler le zoom.
 */
.carte-plein__propose .suggestions { z-index: 500; }
.carte-plein__suivi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--secondaire);
    cursor: pointer;
    white-space: nowrap;
}
.carte-plein__compte {
    margin-left: auto;
    font-size: 13.5px;
    color: var(--secondaire);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.carte-plein__compte b { color: var(--encre); }
.carte-plein__fermer {
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--encre);
}
.carte-plein__fermer:hover { background: var(--trait); }
/*
 * LES FILTRES DE LA PAGE, DANS LA CARTE.
 *
 * Le même panneau que celui du rail, sur le même état : ce qu'on coche ici est
 * coché là, et refermer la carte rend exactement la recherche qu'on avait. Une
 * seconde liste de filtres propre à la carte aurait fini par diverger de
 * l'autre — et personne n'aurait su laquelle faisait foi.
 */
.carte-plein__corps {
    position: relative;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    min-height: 0;
}
.carte-plein__filtres {
    overflow-y: auto;
    border-right: 1px solid var(--trait);
    background: var(--surface);
    padding: 16px;
}

/* Sans cadre ni ombre : la modale lui en tient déjà lieu. */
.panneau--carte {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

/* Le bouton « Filtres » n'existe que sur écran étroit — voir l'adaptatif. */
.carte-plein__bascule { display: none; }

/* « Ma position » et son rayon, dans la barre de la carte. */
.carte-plein__ici-moi { display: inline-flex; align-items: center; gap: 10px; }
.carte-plein__rayon {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: color-mix(in srgb, var(--action) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--action) 34%, transparent);
    border-radius: 999px;
    padding: 5px 8px 5px 13px;
    font-size: 13px;
    font-weight: 700;
    color: var(--action-fonce);
    white-space: nowrap;
}
.carte-plein__rayon select {
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.carte-plein__retirer {
    background: none;
    border: 0;
    padding: 0 4px;
    font-size: 15px;
    line-height: 1;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}
.carte-plein__retirer:hover { opacity: 1; }
.carte-plein__attente { font-size: 13px; color: var(--secondaire); flex: 1 1 100%; }

/*
 * Le repère « vous êtes ici ». Dessiné en CSS plutôt qu'en image : il prend la
 * couleur d'action du support, et il n'ajoute aucun fichier à télécharger.
 *
 * Le curseur dit ce que le point sait faire — il se déplace, et c'est le seul
 * remède fiable à une géolocalisation qui pose un Sarthois à Paris.
 */
.repere-moi { cursor: grab; }
.repere-moi:active { cursor: grabbing; }
.repere-moi__point {
    display: block;
    width: 18px;
    height: 18px;
    margin: 2px;
    border-radius: 50%;
    background: var(--action);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px -1px rgba(12, 30, 40, .8);
}

.carte-plein__hote { position: relative; }
.carte-plein__hote .carte { position: absolute; inset: 0; height: 100%; border-radius: 0; }

/* ------------------- Les deux rangs de points de la carte ----------------- */

/*
 * LA CARTE PORTE DEUX CHOSES QUI NE SE RESSEMBLENT PAS.
 *
 * L'abonné : une goutte de 34 px (40 au rang supérieur), ses initiales, un
 * liseré blanc, une ombre portée. La fiche gratuite : un point de 3,5 px sans
 * bordure, à 45 % d'opacité, dessiné côté script (voir recherche.js).
 *
 * L'écart est VOULU et il est grand. Une gratuite qui se remarque autant qu'un
 * abonné, c'est l'abonnement qui ne sert plus à rien ; une gratuite absente,
 * c'est un annuaire qui paraît vide. La poussière remplit la carte, la goutte
 * la domine.
 *
 * Aucune classe ne dit « pub » ni « sponsor » : les bloqueurs filtrent sur ces
 * motifs et effaceraient les repères de nos abonnés chez une part notable des
 * visiteurs. Voir l'en-tête de cette feuille.
 */
.marque-abonne { background: none; border: 0; }

.marque-abonne__corps {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--accent);
    border: 3px solid #fff;
    /* La pointe est le coin bas-gauche du carré, ramené vers le bas par la
       rotation : c'est ce qui fait la goutte, sans image ni SVG. */
    border-radius: 50% 50% 50% 2px;
    transform: rotate(-45deg);
    box-shadow: 0 0 0 1px rgba(20, 45, 50, .2), 0 8px 16px -6px rgba(12, 30, 40, .75);
    transition: transform .12s ease, box-shadow .12s ease;
}
.marque-abonne__initiales {
    /* Remise d'aplomb : le corps tourne, le texte non. */
    transform: rotate(45deg);
    color: var(--sur-accent);
    font-family: var(--police-titre);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
}
.marque-abonne:hover .marque-abonne__corps {
    transform: rotate(-45deg) scale(1.12);
    box-shadow: 0 0 0 1px rgba(20, 45, 50, .2), 0 14px 24px -8px rgba(12, 30, 40, .85);
}

/* Le halo. Il ne se lit pas comme un objet — il fait simplement que l'œil
   tombe sur l'abonné avant de tomber sur la poussière. */
.marque-abonne__halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    pointer-events: none;
}

/* Le rang supérieur : plus grand, et cerclé du jaune de signal plutôt que du
   blanc. C'est le seul endroit du site où les deux niveaux payants se
   distinguent l'un de l'autre à l'œil. */
.marque-abonne--plus .marque-abonne__corps { width: 40px; height: 40px; border-color: var(--signal); }
.marque-abonne--plus .marque-abonne__initiales { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
    .marque-abonne__corps { transition: none; }
    .marque-abonne:hover .marque-abonne__corps { transform: rotate(-45deg); }
}

/* ----------------- L'infobulle d'un marqueur : la fiche en petit ---------- */

.popup-fiche {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    padding: 2px 4px 4px;
}
.popup-fiche__logo {
    width: 132px;
    height: 64px;
    border-radius: 8px;
    background: var(--fond);
    border: 1px solid var(--trait);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.popup-fiche__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.popup-fiche__logo span {
    font-family: var(--police-titre);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--accent);
}
.popup-fiche__nom {
    font-family: var(--police-titre);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--accent);
}
.popup-fiche__lieu { font-size: 12.5px; font-weight: 600; color: var(--secondaire); }
.popup-fiche__rubriques {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.popup-fiche__rubriques li { font-size: 11.5px; font-weight: 700; color: var(--action); }
.popup-fiche__rubriques li + li::before { content: "•"; margin-right: 6px; color: var(--trait); font-weight: 400; }
.popup-fiche .bouton { margin-top: 4px; padding: 9px 18px; font-size: 11.5px; }

/*
 * La bulle d'une fiche gratuite : nom, ville, lien. Rien d'autre à habiller —
 * le reste n'est pas masqué, il n'est pas produit (voir carteSobre()).
 *
 * La ligne de couleur n'est pas décorative : `.leaflet-popup-content a.bouton`
 * (plus bas) impose `--sur-action` à TOUT bouton posé dans une bulle, ce qui
 * écrase la variante fantôme et donne du blanc sur blanc. Il faut donc la
 * reprendre à la même spécificité.
 */
.popup-fiche--sobre .popup-fiche__nom { font-size: 14.5px; }

/*
 * Leaflet impose ses propres marges et sa police à l'intérieur de la bulle :
 * on les reprend, sinon l'infobulle est la seule chose du site à ne pas parler
 * la langue de l'habillage.
 */
.leaflet-popup-content { margin: 12px 14px; font-family: var(--police-texte); }
.leaflet-popup-content-wrapper { border-radius: var(--rayon); }
.leaflet-popup-content a.bouton { color: var(--sur-action); text-decoration: none; }
/* APRÈS la règle ci-dessus, et pas ailleurs : même spécificité, c'est donc
   l'ordre qui tranche. Placée plus haut, la bulle d'une fiche gratuite écrivait
   son bouton en blanc sur blanc. */
.leaflet-popup-content a.bouton--fantome { color: var(--encre); }

/* Le bouton « chercher ici » : posé SUR la carte, jamais sous elle. */
.carte-plein__ici {
    position: absolute;
    z-index: 600;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 10px 26px -12px rgba(12, 30, 40, .7);
}

/* Le fond ne défile pas derrière la carte ouverte. */
html.carte-ouverte, html.carte-ouverte body { overflow: hidden; }
/* ------------------------------- La fiche ------------------------------- */

/*
 * LA FICHE EST UNE CARTE, PAS UNE PAGE.
 *
 * Bandeau, rubriques, contenu et coordonnées tiennent dans un seul cadre posé
 * sur le fond de page. C'est ce qui la distingue du reste du site — une fiche
 * d'abonné n'est pas un article, c'est un objet qu'on montre — et ce qui donne
 * au bandeau des angles arrondis sans qu'il flotte tout seul en haut.
 *
 * AUCUN `overflow: hidden` SUR LA CARTE, même si ce serait le moyen court de
 * rogner les coins du bandeau : un ancêtre qui coupe son débordement devient le
 * conteneur de défilement de tout ce qu'il contient, et la colonne de droite,
 * qui est `sticky`, cesserait de suivre le visiteur. Le bandeau arrondit donc
 * ses deux coins hauts lui-même.
 */
.fiche { padding-bottom: clamp(40px, 6vw, 80px); }

.fiche__carte {
    /* La gouttière intérieure de la carte, posée une fois : le bandeau est le
       seul enfant qui la refuse, parce qu'il va bord à bord. */
    --gouttiere-fiche: clamp(16px, 2.6vw, 30px);
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    margin-top: 22px;
}

/*
 * 150 px de haut et 20 px d'air tout autour (25/09 au soir ; 230 avant, avec
 * une photo en fond qui n'est plus posée). `min-height` et non `height` : un
 * nom long sur deux lignes, ou la pile logo + nom du téléphone, agrandit le
 * bandeau au lieu d'être coupé.
 */
.fiche__banniere {
    position: relative;
    min-height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: calc(var(--rayon) - 1px) calc(var(--rayon) - 1px) 0 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.fiche__banniere--nue { background: linear-gradient(120deg, var(--accent-fonce), var(--accent)); }
.fiche__voile {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 20px;
    /*
     * Le voile descend plus bas et plus noir qu'un simple assombrissement : le
     * nom est écrit en blanc par-dessus une photo qu'on ne choisit pas, et
     * certaines sont claires en bas. Trois arrêts plutôt que deux — la
     * transition est alors invisible au lieu de faire une bande.
     */
    background: linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .34) 46%, transparent 82%);
}
/*
 * 165 × 80 : le format des logos des anciens sites, repris à l'identique pour
 * que le stock déjà réalisé serve tel quel. Les fichiers sont rangés en
 * 330 × 160 (le double) et affichés ici — voir config/vac.php, medias.formats,
 * qui est la source de cette valeur. Le CSS ne lit pas la configuration : une
 * valeur changée là-bas doit l'être ici.
 *
 * object-fit: contain — un logo carré ou très allongé garde ses proportions et
 * reste entier, quitte à ne pas remplir la boîte. Un logo recadré, c'est une
 * marque amputée.
 */
.fiche__logo {
    width: 165px;
    height: 80px;
    background: var(--surface);
    border-radius: 12px;
    padding: 9px;
    object-fit: contain;
    flex: none;
    box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .85);
}
.fiche__identite { color: #fff; padding-bottom: 4px; min-width: 0; }
.fiche__nom {
    font-size: clamp(24px, 3.8vw, 38px);
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.fiche__lieu {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 0 0;
    font-size: 14.5px;
    font-weight: 600;
    opacity: .94;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.fiche__lieu svg { flex: none; opacity: .85; }

/*
 * LE SOMMAIRE — sur téléphone seulement.
 *
 * Sous 1 080 px la fiche s'empile : la colonne des coordonnées passe sous la
 * présentation et les photos, donc à deux ou trois écrans du haut. Ce rang
 * d'ancres les ramène à un doigt. Il est déclaré caché ici et rendu visible
 * dans le bloc adaptatif — l'inverse laisserait la barre s'afficher une
 * fraction de seconde sur les grands écrans si la feuille arrivait tronquée.
 *
 * Il colle SOUS la barre du haut (66 px sur téléphone), et s'arrête avec la
 * carte de la fiche : arrivé au formulaire, il n'a plus rien à annoncer.
 */
.fiche__sommaire { display: none; }

.fiche__sommaire a {
    text-decoration: none;
    color: var(--secondaire);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    /* L'interligne du corps de texte (1,65) ferait une barre de 56 px de haut
       pour une ligne de douze pixels : on la remet à la hauteur des lettres. */
    line-height: 1;
    padding: 10px 14px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.fiche__sommaire a.est-actif { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }

.pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Dans la carte, les rubriques forment leur propre rang, sous un filet. */
.fiche__carte > .pastilles {
    padding: 16px var(--gouttiere-fiche);
    border-bottom: 1px solid var(--trait);
}
.pastilles li {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 999px;
    padding: 6px 15px;
}

.fiche__colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 30px;
    padding: clamp(22px, 3vw, 32px) var(--gouttiere-fiche) clamp(24px, 3vw, 34px);
    align-items: start;
}

.bloc + .bloc { margin-top: 30px; }
/*
 * Le titre de partie : un filet clair sur toute la largeur, et un tronçon
 * d'accent posé dessus à gauche. Le filet range, le tronçon signale — c'est le
 * même geste que le trait sous les titres de l'accueil, en plus court.
 */
.bloc h2 {
    position: relative;
    font-size: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--trait);
    margin-bottom: 16px;
}
.bloc h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 52px;
    height: 3px;
    border-radius: 3px;
    background: var(--accent);
}
.fiche__texte { font-size: 15.5px; color: var(--secondaire); line-height: 1.75; }

/*
 * LA PRÉSENTATION PEUT ÊTRE MISE EN FORME, et la feuille doit la porter.
 *
 * Le bloc rendait du texte échappé : un paragraphe, des <br>, rien d'autre. Il
 * rend maintenant du HTML — celui que le commercial compose dans le back-office,
 * et celui des présentations reprises de l'ancien site.
 *
 * Sans les règles ci-dessous, ce HTML serait mis en page par les remises à zéro
 * du haut de cette feuille : `h1, h2, h3 { margin: 0 }` colle les intertitres au
 * texte, et une liste à puces perd ses puces avec son retrait. Un client verrait
 * dans le back-office une mise en forme que son annuaire n'afficherait pas.
 *
 * Tout est exprimé en `em`, donc relatif aux 15,5 px du bloc : les tailles
 * choisies dans l'éditeur — elles aussi en `em` — s'y composent sans surprise,
 * et la fiche reste juste sur un téléphone.
 */
.fiche__texte > *:first-child { margin-top: 0; }
.fiche__texte > *:last-child { margin-bottom: 0; }

.fiche__texte p { margin: 0 0 .85em; }

.fiche__texte h2,
.fiche__texte h3,
.fiche__texte h4,
.fiche__texte h5,
.fiche__texte h6 {
    margin: 1.4em 0 .5em;
    color: var(--encre);
    font-family: var(--police-titre);
    line-height: 1.2;
}
.fiche__texte h2 { font-size: 1.35em; }
.fiche__texte h3 { font-size: 1.18em; }
.fiche__texte h4,
.fiche__texte h5,
.fiche__texte h6 { font-size: 1.05em; font-weight: 600; }

.fiche__texte ul,
.fiche__texte ol { margin: 0 0 .85em; padding-left: 1.35em; }
.fiche__texte ul { list-style: disc; }
.fiche__texte ol { list-style: decimal; }
.fiche__texte li { margin: .2em 0; }

.fiche__texte blockquote {
    margin: 0 0 .85em;
    padding: .1em 0 .1em 1em;
    border-left: 3px solid var(--accent);
    color: var(--encre);
    font-style: italic;
}

/* Le gras reprend l'encre du texte : sur le gris secondaire du bloc, un mot en
 * gras qui reste gris ne ressort pas — c'est pourtant ce qu'on lui demande. */
.fiche__texte strong,
.fiche__texte b { color: var(--encre); font-weight: 700; }

.fiche__texte a { text-decoration: underline; text-underline-offset: 2px; }

.fiche__texte hr { margin: 1.2em 0; border: 0; border-top: 1px solid var(--trait); }

/*
 * LES IMAGES POSÉES DANS LA PRÉSENTATION.
 *
 * Elles s'ajoutent à la galerie, elles ne la remplacent pas : la galerie est un
 * bloc de vignettes qui s'ouvrent en grand, celles-ci illustrent un paragraphe.
 * La largeur et les marges sont écrites EN LIGNE par l'éditeur — c'est le
 * commercial qui les règle, image par image ; la feuille ne pose que ce qui ne
 * se règle pas : le comportement responsive et l'habillage.
 *
 * `max-width: 100%` prime sur la largeur en ligne quand la colonne devient plus
 * étroite que l'image : une image à 70 % ne peut donc jamais déborder.
 */
/*
 * Toute image du bloc, y compris celles qui viennent de l'ancien site et ne
 * portent aucune de nos classes. Un `<img width="600">` importé déborderait
 * sinon d'une colonne de téléphone et ferait défiler la page en travers.
 */
.fiche__texte img {
    max-width: 100%;
    height: auto;
}

.fiche__texte .fiche__image {
    border-radius: var(--rayon);
}

.fiche__texte .fiche__image--gauche { float: left; }
.fiche__texte .fiche__image--droite { float: right; }
.fiche__texte .fiche__image--centre,
.fiche__texte .fiche__image--pleine { display: block; }

/*
 * SOUS 480 PX, PLUS D'HABILLAGE.
 *
 * Une image à 45 % dans une colonne de 309 px laisse au texte une gouttière de
 * cent-soixante points : quatre mots par ligne, coupés n'importe où. Sur
 * téléphone, toute image passe donc pleine largeur et le texte reprend dessous.
 * La marge latérale saute avec le flottement, sinon elle décentrerait l'image.
 */
@media (max-width: 30em) {
    .fiche__texte .fiche__image {
        float: none !important;
        display: block;
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* Un flottant qui dépasse du bloc irait habiller la galerie ou le formulaire
 * de contact, qui sont des sections voisines. */
.fiche__texte::after {
    content: '';
    display: table;
    clear: both;
}

/*
 * Un tableau collé depuis un tableur déborde vite. `display: block` le rend
 * défilant sur lui-même : la page garde sa largeur, et le tableau se parcourt
 * du doigt. Sans cela, une seule fiche mal collée fait défiler l'annuaire
 * entier de gauche à droite sur téléphone.
 */
.fiche__texte table {
    display: block;
    max-width: 100%;
    margin: 0 0 .85em;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: .95em;
}
.fiche__texte th,
.fiche__texte td { padding: .4em .6em; border: 1px solid var(--trait); text-align: left; }
.fiche__texte th { background: var(--fond); color: var(--encre); font-weight: 600; }

/* Le formulaire de contact est HORS de la carte : il porte donc la sienne. */
.bloc--contact {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: clamp(20px, 3vw, 30px);
    margin-top: 26px;
}

.definitions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 0;
}
.definitions > div {
    background: var(--fond);
    border: 1px solid var(--trait);
    border-radius: 10px;
    padding: 13px 15px;
}
.definitions dt {
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--secondaire);
    font-weight: 700;
}
.definitions dd { margin: 5px 0 0; font-size: 14.5px; font-weight: 600; }

.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.galerie__vignette { display: block; border-radius: 10px; }
.galerie__vignette picture { display: block; }
.galerie img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    transition: transform .2s, box-shadow .2s;
}
/*
 * Les photos se soulèvent, elles ne grossissent pas : un agrandissement au
 * survol déborde sur la voisine, et la galerie n'a pas de cadre qui rogne —
 * lui en donner un ferait un troisième niveau de boîte pour rien.
 */
.galerie__vignette:hover img { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(12, 30, 40, .65); }

/* ------------------------------- Les vidéos ----------------------------- */

/*
 * Deux vidéos par ligne dès qu'il y a la place, une seule sur téléphone. Le
 * minimum est plus large que celui de la galerie photos (170px) : sous 260px un
 * lecteur vidéo n'a plus de commandes lisibles, et YouTube masque les siennes.
 */
.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }

/*
 * L'affiche et le lecteur occupent la même boîte, au même format : quand le
 * lecteur remplace l'affiche au clic, rien ne bouge sous le doigt. Le 16/9 est
 * le format des trois plateformes, y compris pour les vidéos verticales — ce
 * sont elles qui se posent, cadrées, dedans.
 */
.video { margin: 0; }
.video__affiche,
.video__lecteur {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 10px;
    background: #0d1a1f;
}
.video__affiche { position: relative; overflow: hidden; }
.video__affiche img {
    width: 100%;
    height: 100%;
    /* L'image de YouTube est en 4/3 avec des bandes : `cover` les rogne, ce qui
       rend le cadrage de la vidéo elle-même. */
    object-fit: cover;
    display: block;
    transition: transform .25s;
}
.video__affiche:hover img { transform: scale(1.03); }

/* Le bouton de lecture : le même rond blanc que partout, posé au centre. */
.video__lire {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .92);
    color: var(--accent);
    box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .8);
    transition: transform .2s, background .2s;
}
.video__affiche:hover .video__lire { transform: scale(1.08); background: #fff; }

.video__plateforme {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Adresse d'une plateforme que l'on ne sait pas lire : la ligne d'avant. */
.video__lien { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 11px; align-items: start; margin: 0; font-size: 14px; }
.video__lien a { font-weight: 600; text-decoration: none; word-break: break-word; }
.video__lien .ic {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    display: grid;
    place-items: center;
    color: var(--accent);
}

/* ---------------------- Les photos, ouvertes en grand ------------------- */

/*
 * Même dessin que la carte en plein écran, et même étage (1 200) : un fond
 * sombre qui prend tout, l'objet au milieu, les commandes posées dessus. Les
 * deux ne s'ouvrent jamais ensemble, mais ils doivent se ressembler — c'est le
 * même geste pour le visiteur.
 *
 * Le fond est cliquable pour fermer (`@click.self` dans le gabarit) : c'est le
 * réflexe de tout le monde, et il ne coûte rien.
 */
.visionneuse {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: color-mix(in srgb, #000 88%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 4vw, 48px);
}
.visionneuse__image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    /* Le doigt fait défiler les photos, pas la page derrière. */
    touch-action: pan-y;
}
.visionneuse__bouton {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}
.visionneuse__bouton:hover { background: rgba(255, 255, 255, .28); }
.visionneuse__fermer { top: 16px; right: 16px; font-size: 26px; }
.visionneuse__precedent { left: clamp(8px, 2vw, 26px); }
.visionneuse__suivant { right: clamp(8px, 2vw, 26px); }
.visionneuse__compte {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: rgba(0, 0, 0, .45);
    border-radius: 999px;
    padding: 5px 14px;
}

/* --------------------------- Colonne de droite -------------------------- */

.fiche__encadre { position: sticky; top: 86px; }

/*
 * Le panneau des coordonnées est DANS `.encadre`, qui porte déjà le filet, les
 * angles et le rognage de la carte : il rend donc les siens, sinon deux traits
 * d'un pixel se suivent à un pixel d'écart. Il ne garde qu'un fond très
 * légèrement teinté d'accent, qui le détache du blanc de la fiche sans en faire
 * une seconde couleur.
 */
.panneau--coordonnees {
    background: color-mix(in srgb, var(--accent) 4%, var(--surface));
    border: 0;
    border-radius: 0;
    padding: 20px 18px 18px;
    gap: 16px;
}

.encadre__liens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.encadre__liens li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 11px; align-items: start; font-size: 14px; }
.encadre__liens a { font-weight: 600; text-decoration: none; word-break: break-word; }
.encadre__liens .ic {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    display: grid;
    place-items: center;
    color: var(--accent);
}
.encadre__adresse { line-height: 1.55; padding-top: 3px; }

/*
 * Le libellé qui suit un numéro — « · Mobile ». Sur la même ligne, à la même
 * taille que le reste de la colonne : un numéro de téléphone n'a pas de raison
 * d'être plus gros ni plus gras qu'une adresse, les deux se lisent au même
 * moment et pour la même raison.
 */
.encadre__liens small { font-size: inherit; color: var(--secondaire); white-space: nowrap; }

.encadre__sur { margin: 4px 0 -6px; }
.encadre__action { width: 100%; margin-top: 2px; }

/*
 * Les marques gardent leurs couleurs : un logo social repeint en accent du
 * support n'est plus reconnu, et c'est tout ce qu'on lui demande. L'écart de
 * teinte avec le reste de la colonne est assumé — ce sont des liens qui sortent
 * du site.
 */
.reseaux { display: flex; gap: 9px; margin: 0; padding: 0; list-style: none; }
.reseaux a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--secondaire);
    color: #fff;
    text-decoration: none;
    transition: transform .15s, filter .15s;
}
.reseaux a:hover { transform: translateY(-2px); filter: brightness(1.08); }
/*
 * `a.reseaux--…` et non `.reseaux--…` seul : le fond gris est posé par
 * `.reseaux a`, qui pèse une classe ET un élément. Une classe nue perdait donc
 * l'arbitrage, et les quatre pastilles sortaient grises.
 */
.reseaux a.reseaux--facebook { background: #1877f2; }
.reseaux a.reseaux--linkedin { background: #0a66c2; }
.reseaux a.reseaux--youtube { background: #ff0000; }
.reseaux a.reseaux--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

.horaires { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.horaires li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--trait); }
.horaires li:last-child { border-bottom: 0; }
.horaires span:last-child { color: var(--secondaire); }

/* ------------------------------ La carte -------------------------------- */

/* Même confinement que la vignette : une carte Leaflet ne passe jamais sur la
   barre du haut, où qu'elle soit posée (fiche, contact…). */
.carte { height: 260px; border-radius: var(--rayon); overflow: hidden; isolation: isolate; }
.encadre__carte { isolation: isolate; }
.carte--fiche { height: 210px; border-top: 1px solid var(--trait); border-radius: 0; }

.encadre__carte { position: relative; }
/*
 * « Itinéraire » est posé SUR la carte, comme le bouton de la vignette de
 * résultats. Le z-index passe au-dessus des couches de Leaflet (400) sans
 * atteindre celle de ses propres commandes (1000).
 */
.encadre__itineraire {
    position: absolute;
    z-index: 500;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface);
    color: var(--encre);
    border-radius: 999px;
    padding: 8px 15px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 22px -10px rgba(12, 30, 40, .6);
    transition: transform .15s;
}
.encadre__itineraire:hover { transform: translateY(-1px); }
.encadre__itineraire svg { color: var(--accent); }

/*
 * Le SIRET, en pied d'encadré.
 *
 * Le registre est celui d'une mention légale, pas d'une coordonnée : petit,
 * gris, centré, séparé par un filet. Il ne doit rien disputer au numéro de
 * téléphone ni au bouton, qui sont à trente pixels au-dessus.
 *
 * Le filet ne doublera jamais : `.panneau--coordonnees` n'a pas de bordure
 * propre, et `.encadre__carte` n'en pose pas non plus. La ligne referme donc
 * proprement l'encadré, que la fiche soit géocodée ou non.
 */
.encadre__siret {
    margin: 0;
    padding: 11px 18px;
    border-top: 1px solid var(--trait);
    font-size: 12px;
    color: var(--secondaire);
    text-align: center;
}

/* ------------------------------ Formulaire ------------------------------ */

.formulaire { display: flex; flex-direction: column; gap: 14px; }
.formulaire .champ { display: flex; flex-direction: column; gap: 5px; }
/*
 * Les champs courts vont par deux. Six champs empilés sur une seule colonne
 * donnent un formulaire qui paraît long avant d'être lu — au bas d'une fiche,
 * c'est la dernière chose à faire. Le message garde la pleine largeur : c'est
 * lui qu'on vient écrire.
 */
.formulaire__paire { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.formulaire label { font-size: 13px; font-weight: 600; color: var(--secondaire); }
.formulaire input,
.formulaire select,
.formulaire textarea {
    border: 1px solid var(--trait);
    border-radius: 8px;
    background: var(--surface);
    padding: 11px 13px;
    font: inherit;
    font-size: 14.5px;
    color: var(--encre);
}
.formulaire textarea { resize: vertical; min-height: 120px; }
.formulaire .bouton { align-self: flex-start; }
/*
 * La mention d'information. Petite et grise : elle doit être LUE si on la
 * cherche, et ne doit pas peser autant que le bouton d'envoi. Ce n'est pas
 * pour la cacher — une mention illisible ne vaut rien, d'où les 13 px et
 * l'interligne large plutôt que du 11 px serré.
 */
.formulaire__mention {
    margin: 0;
    max-width: 62ch;
    font-size: 13px;
    line-height: 1.6;
    color: var(--secondaire);
}
.formulaire__mention a { color: inherit; text-decoration: underline; }
.champ-leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------- Signaler une erreur -------------------------- */
/*
 * Une colonne étroite, une question, un champ.
 *
 * Ce n'est pas une page qu'on vient lire : c'est un geste qu'on vient faire,
 * souvent agacé, souvent depuis un téléphone. Tout ce qui l'allonge fait
 * renoncer — d'où la largeur bornée, qui n'est pas un choix esthétique : un
 * formulaire de 1 200 px de large donne des champs qu'on n'ose pas remplir.
 */
.signaler { max-width: 640px; margin-inline: auto; padding-block: 0 clamp(40px, 6vw, 72px); }
.signaler__formulaire { gap: 18px; }
.signaler__apres { margin: 20px 0 0; }

/*
 * LA NATURE DU SIGNALEMENT — deux blocs cliquables, pas une liste déroulante.
 *
 * À deux choix, une liste demande deux gestes et cache la seconde option
 * derrière le premier. Ici les deux se lisent d'un coup, avec l'exemple qui
 * dit lequel prendre : c'est cette réponse qui décide de la file où le
 * signalement atterrit, et des mains qui le traiteront.
 */
.signaler__nature { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.signaler__nature legend { font-size: 13px; font-weight: 600; color: var(--secondaire); padding: 0; margin-bottom: 9px; }

.signaler__choix {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    border: 1px solid var(--trait);
    border-radius: 10px;
    background: var(--surface);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .14s, background .14s;
}
.signaler__choix:hover { border-color: var(--accent); }
/* Le bloc retenu se voit sans avoir à chercher le point dans le rond. */
.signaler__choix:has(input:checked) { border-color: var(--accent); background: var(--couleur-site-claire); }
.signaler__choix:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.signaler__choix input { margin-top: 3px; accent-color: var(--accent); }
.signaler__choix b { display: block; font-size: 15px; font-weight: 600; color: var(--encre); }
.signaler__choix small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--secondaire); }

/*
 * QUI SIGNALE — facultatif, et le bloc le dit avant qu'on lise les champs.
 *
 * Détaché du reste par un fond et un filet : ce n'est pas la suite du
 * formulaire, c'est une proposition. Quelqu'un qui ne veut rien donner doit
 * pouvoir sauter le bloc d'un coup d'œil et arriver au bouton.
 */
.signaler__contact {
    border: 1px solid var(--trait);
    border-radius: 10px;
    background: var(--fond);
    padding: 16px 18px 18px;
    margin: 4px 0 0;
}
.signaler__contact legend {
    padding: 0 8px;
    margin-left: -8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--encre);
}
.signaler__contact-aide {
    margin: 4px 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--secondaire);
}
.signaler__contact .champ { display: flex; flex-direction: column; gap: 5px; }

/*
 * Le lien discret au pied de l'encadré d'une fiche. C'est LÀ qu'on voit qu'un
 * numéro est faux — pas en bas de page. Il ne doit pourtant pas se disputer
 * avec le bouton d'appel : petit, gris, souligné au survol seulement.
 */
.encadre__signaler {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--secondaire);
    text-decoration: none;
}
.encadre__signaler:hover { color: var(--accent); text-decoration: underline; }

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

/* ------------------------------ Le fil ---------------------------------- */
/*
 * La page de messagerie. Une colonne étroite, des bulles, rien d'autre : elle
 * se lit d'abord sur un téléphone, souvent sur un chantier, et il n'y a pas une
 * ligne de JavaScript dessus.
 *
 * Les bulles ne portent PAS de couleur d'accent du support. Une conversation
 * n'est pas de la vitrine : ce qu'on veut, c'est distinguer les deux voix, et
 * deux gris s'en chargent mieux qu'un dégradé.
 */
.fil { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

.fil__entete { border-bottom: 1px solid var(--trait); padding-bottom: 14px; }
.fil__titre { margin: 0 0 4px; font-size: 22px; }
.fil__contexte { margin: 0; font-size: 14px; color: var(--secondaire); }
.fil__coordonnees { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.fil__coordonnees a { font-weight: 600; }

.fil__messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.fil__bulle {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: 12px;
    padding: 12px 14px;
    /* La bulle ne prend pas toute la largeur : le décalage à lui seul dit qui
       parle, avant même qu'on ait lu le nom. */
    max-width: 88%;
    align-self: flex-start;
}
.fil__bulle--moi { align-self: flex-end; background: #f3f5f4; }

.fil__auteur {
    margin: 0 0 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--secondaire);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}
.fil__auteur time { font-weight: 400; font-size: 12px; }

/* Les retours à la ligne du rédacteur sont gardés tels quels. */
.fil__texte { margin: 0; white-space: pre-line; line-height: 1.55; overflow-wrap: anywhere; }

.fil__pieces { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fil__pieces li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 14px;
}
.fil__pieces a { font-weight: 600; overflow-wrap: anywhere; }
.fil__pieces span { font-size: 12.5px; color: var(--secondaire); }

.fil__repondre { border-top: 1px solid var(--trait); padding-top: 16px; }
.fil__repondre input[type="file"] { font-size: 14px; padding: 9px 11px; }

.fil__note { margin: 0; max-width: 62ch; font-size: 13px; line-height: 1.6; color: var(--secondaire); }

.message { border-radius: 8px; padding: 12px 15px; font-size: 14.5px; margin: 0; }
.message--succes { background: #e7f3ec; border: 1px solid #b6d9c4; color: #1d5136; }
.message--erreur { background: #fdecea; border: 1px solid #f3b8b2; color: #8a1c12; }

/* ------------------------------- Encarts -------------------------------- */

/*
 * L'encart ne dépasse jamais 520 px : c'est la largeur d'affichage des bandeaux
 * de l'accueil, déclarée dans config/vac.php (emplacements.encarts). Un fichier
 * fourni en 1040 × 200 — le double, pour les écrans à forte densité — s'affiche
 * donc à 520 × 100, net, sans réglage particulier.
 *
 * Dans la colonne de l'accueil, large de 300 px, c'est le conteneur qui borne :
 * un 300 × 250 s'y affiche à sa taille.
 */
/*
 * LE CADRE NE MANGE PAS LE FORMAT VENDU.
 *
 * L'encart portait un filet d'un pixel. Avec `box-sizing: border-box`, ce filet
 * se prend SUR les 520 pixels : un bandeau livré au format annoncé s'affichait
 * en 518 × 100. Deux pixels, et pourtant c'est le format annoncé qui devient
 * faux — un annonceur qui fait composer un visuel à la taille exacte doit le
 * voir à la taille exacte.
 *
 * Le filet est donc retiré. Il n'apportait rien : un bandeau de régie est un
 * visuel composé, cerné par son propre fond, et un liseré gris autour est une
 * décoration que personne n'a demandée. Les angles arrondis restent, avec
 * `overflow: hidden` qui y découpe l'image.
 */
.encart {
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--surface);
    display: block;
    max-width: 520px;
    margin-inline: auto;
    text-decoration: none;
}
.encart img { display: block; width: 100%; height: auto; }
/* Sur fond sombre, seul le fond change : il n'y a plus de filet à teinter. */
.encart--sombre { background: var(--sombre-surface); }

/* ------------------------------ Pied de page ---------------------------- */

/*
 * LE FOND EST LA BARRE DU HAUT, ASSOMBRIE (28/08/2026) — voir
 * Site::variablesCss(). Les trois teintes dérivées se déduisent ici, du fond et
 * de son encre : elles suivent donc l'une comme l'autre, y compris le jour où
 * un annuaire à la barre très claire recevra une encre noire.
 *
 * Aucune couleur en dur dans ce bloc. Le pied portait « #cddadd », un gris
 * bleuté qui supposait un fond bleu de nuit ; il tirait au gris sale sur le
 * vert des élagueurs.
 */
.pied {
    background: var(--pied);
    color: var(--sur-pied);
    padding-block: 56px 26px;

    --pied-doux: color-mix(in srgb, var(--sur-pied) 72%, var(--pied));
    --pied-trait: color-mix(in srgb, var(--sur-pied) 22%, transparent);
    --pied-puce: color-mix(in srgb, var(--sur-pied) 9%, transparent);
}

/*
 * LA GRILLE S'AJUSTE AU NOMBRE DE BLOCS RÉELLEMENT RENDUS.
 *
 * Elle valait quatre colonnes en dur. Or les deux menus de pied sont
 * FACULTATIFS, saisis annuaire par annuaire : un support qui ne les a pas
 * rendait deux colonnes remplies et deux vides — la moitié droite du pied en
 * blanc. Le gabarit compte les blocs et pose la classe ; ici on ne fait que
 * répondre. Voir `_pied.blade.php`.
 */
.pied__grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 36px; align-items: start; }
.pied__grille--trois { grid-template-columns: 1.6fr 1.1fr 1.15fr; }
/*
 * Deux blocs seuls — la marque et « Nous contacter ». Étalés sur toute la
 * largeur, ils se retrouveraient aux deux bouts d'un pied vide au milieu : la
 * grille est donc bornée, et ils se tiennent ensemble à gauche. Un pied court
 * doit avoir l'air court, pas l'air amputé.
 */
.pied__grille--deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 720px; }
/*
 * LE SITE DU RÉSEAU N'A PAS LA MÊME GRILLE, et c'est voulu.
 *
 * Ni rubriques, ni menus de pied, ni édition à lui : la grille en quatre
 * colonnes y sonnerait creux. Trois blocs — la marque, les annuaires nommés,
 * « Nous contacter » — et rien à remplir de vide.
 */
.pied__grille--vitrine { grid-template-columns: 1.25fr 1.75fr 1fr; }

/* Sur-titres de colonne : des <p> depuis le 25/09 (voir _pied.blade.php).
   Deux classes pour passer devant `.pied p` ; la hauteur de ligne est celle
   que leur donnait la règle des titres quand c'étaient des h2. */
.pied h2,
.pied .pied__titre { margin: 0 0 14px; color: var(--pied-etiquette); font-size: 11px; line-height: 1.12; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pied a { color: var(--pied-doux); text-decoration: none; font-size: 13.5px; }
.pied a:hover { color: var(--sur-pied); text-decoration: underline; }
.pied address { font-style: normal; color: var(--pied-doux); font-size: 13.5px; line-height: 1.65; }
.pied address b { color: var(--sur-pied); font-weight: 600; }
.pied address + address { margin-top: 12px; }
.pied p { color: var(--pied-doux); font-size: 13.5px; margin: 0; }
.pied .pied__editeur { margin-top: 9px; }

/* Onze noms empilés feraient un pied plus haut que la page qu'il ferme.
   Deux classes : `.pied ul` pèse une classe ET un élément, et reprendrait
   sinon la colonne unique en flex. */
.pied .pied__annuaires { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }

/*
 * LE LOGO REVIENT SUR CARTON BLANC, comme dans la barre du haut.
 *
 * Il en était sorti du temps où le pied était presque noir : un logo posé à nu
 * y passait inaperçu, sans plus. Sur un fond qui a maintenant la couleur du
 * support, il se teinterait de vert ou de bleu selon l'annuaire — et les encres
 * du carton sont fixes pour la même raison qu'en haut de page : une identité
 * sombre y écrirait du presque-blanc sur du blanc.
 */
.pied .pied__marque {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #101a1e;
    border: 1px solid var(--pied-trait);
    border-radius: 3px;
    padding: 11px 16px;
    margin-bottom: 15px;
    text-decoration: none;
}
.pied .pied__marque:hover { color: #101a1e; text-decoration: none; }
.pied__marque .marque__nom { color: #101a1e; font-size: 16px; }
.pied__marque .marque__baseline { color: #5f7178; font-size: 8px; }
.pied__marque .marque__logo { max-height: 48px; width: auto; display: block; }

/* ------------------ Le rappel de navigation et l'annuaire papier --------- */

.pied__milieu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--pied-trait);
}
/* Un seul des deux blocs : il prend toute la largeur plutôt que de laisser
   une demi-page vide à côté de lui. */
.pied__milieu--seul { grid-template-columns: 1fr; }

/*
 * LE MENU DE L'EN-TÊTE, REPRIS EN BAS DE PAGE.
 *
 * En gélules et non en liste : c'est un RAPPEL, pas une troisième colonne de
 * plan du site. La forme le dit avant qu'on ait lu les libellés.
 */
.rappel-nav { display: flex; flex-wrap: wrap; gap: 7px; }
.rappel-nav a {
    background: var(--pied-puce);
    border: 1px solid var(--pied-trait);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sur-pied);
}
.rappel-nav a:hover { text-decoration: none; border-color: var(--pied-etiquette); }
/* Le bouton de la barre du haut, reconnaissable sans crier : il est cerné du
   signal, là où les autres gélules empruntent le filet du pied. */
.rappel-nav a.rappel-nav--action { border-color: var(--pied-etiquette); color: var(--pied-etiquette); }

/*
 * L'ÉDITION PAPIER — une carte, jamais un paragraphe. Elle vend.
 *
 * Tout vient d'`editions_papier` : une saisie, deux affichages (ici et la
 * section de l'accueil). Hors période de vente, le gabarit ne rend rien du
 * tout — il n'y a donc pas d'état « vide » à habiller.
 */
.papier {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    background: var(--pied-puce);
    border: 1px solid var(--pied-trait);
    border-radius: 4px;
    padding: 16px 18px;
}
/* Les dimensions sont écrites dans la balise : la hauteur est fixée ici pour
   que la carte ne saute pas à l'arrivée de l'image. */
.papier__couverture {
    width: 74px;
    height: auto;
    aspect-ratio: 300 / 424;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 4px 14px rgb(0 0 0 / .28);
    display: block;
}
.pied .papier__titre { font-family: var(--police-titre); font-size: 18px; line-height: 1.15; margin: 0; color: var(--sur-pied); }
.papier__reperes { margin: 5px 0 0; font-size: 12.5px; }
.papier__achat { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; flex-wrap: wrap; }
.papier__prix { font-family: var(--police-titre); font-size: 21px; font-weight: 600; color: var(--sur-pied); }
/* Deux classes : `.pied a` pèse une classe et un élément, et reprendrait
   sinon l'encre douce du pied sur un bouton plein. */
.pied .papier__bouton {
    background: var(--action);
    color: var(--sur-action);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
}
.pied .papier__bouton:hover { background: var(--action-fonce); color: var(--sur-action); text-decoration: none; }

/* --------------------------- Le réseau, en plaques ---------------------- */

/*
 * CENTRÉE, TITRE COMPRIS (demande du 28/08/2026). Onze plaques tiennent sur
 * deux rangs : centrées, le second se pose sous le milieu du premier au lieu
 * de laisser un trou à droite.
 */
.reseau {
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid var(--pied-trait);
    text-align: center;
}
.reseau__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }

/*
 * LA PLAQUE — un carton blanc où vient se loger le logo de l'annuaire.
 *
 * Tant qu'il n'y en a pas — c'est le cas des onze aujourd'hui —, elle affiche
 * le NOM, composé dans la teinte du support (`--plaque-encre`, posée par le
 * gabarit). Onze noms alignés dans la même encre ne diraient rien ; onze noms
 * dans onze couleurs se distinguent, et la bande tient son rôle en attendant
 * les vrais logos.
 *
 * Deux classes, encore : `.pied a` reprendrait l'encre douce du pied, et les
 * noms sortiraient en gris pâle sur blanc.
 */
.pied .reseau__plaque {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 54px;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid var(--pied-trait);
    border-radius: 3px;
    text-align: center;
    line-height: 1.12;
    font-family: var(--police-titre);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--plaque-encre, #101a1e);
    transition: transform .14s, box-shadow .14s;
}
.pied .reseau__plaque img { max-width: 100%; max-height: 40px; width: auto; height: auto; display: block; }
.pied .reseau__plaque:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(0 0 0 / .22); text-decoration: none; }
/* L'annuaire où l'on se trouve : cerné du signal, pas délavé. */
.pied .reseau__plaque--actuel { outline: 2px solid var(--pied-etiquette); outline-offset: 2px; }

.mentions {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--pied-trait);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--pied-doux);
    font-size: 12.5px;
}
.mentions a { color: var(--pied-doux); font-size: inherit; }

/* Le crédit de réalisation, quand il est allumé : présent, jamais bruyant.
   `space-between` répartit déjà les blocs — celui-ci s'aligne à droite quand
   il est le dernier, et repasse dessous sur téléphone comme les autres. */
.mentions__credit { opacity: .72; }

/* -------------------------------- Adaptatif ------------------------------ */
@media (max-width: 1240px) {
    /* Trois colonnes de gratuites deviennent illisibles sous 1 240 px : les
       noms d'entreprise y passent sur trois lignes. Deux, puis une. */
    .grille-gratuites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Les deux côtés restent égaux : le milieu reste au milieu. */
    .partenaire { grid-template-columns: 132px minmax(0, 1fr) 132px; gap: 16px; }
    .partenaire__logo { width: 132px; height: 64px; }
    .partenaire__initiales { font-size: 25px; }
}

@media (max-width: 1080px) {
    .recherche { grid-template-columns: 1fr; }
    .fiche__colonnes { grid-template-columns: 1fr; }
    .fiche__encadre { position: static; }
    /* La grille du pied passe à deux colonnes — celle du site du réseau
       aussi : la règle est écrite sans la modificatrice, et cette
       déclaration-ci vient plus bas dans la feuille, donc l'emporte. */
    .pied__grille { grid-template-columns: 1fr 1fr; }
    /* Le rappel de navigation et l'annuaire papier s'empilent : côte à côte,
       la carte de l'édition devient trop étroite pour son bouton. */
    .pied__milieu { grid-template-columns: 1fr; }

    /*
     * LE SOMMAIRE DE LA FICHE APPARAÎT ICI, et pas plus haut : c'est la largeur
     * à laquelle la colonne des coordonnées passe SOUS le contenu. Tant que les
     * deux colonnes tiennent côte à côte, tout est déjà visible et un rang
     * d'ancres ne servirait à rien.
     *
     * Il colle sous la barre du haut (78 px ici, 66 sur téléphone) et s'arrête
     * avec la carte de la fiche : arrivé au formulaire, il n'a plus rien à
     * annoncer. Les entrées défilent latéralement si elles ne tiennent pas,
     * sans barre de défilement visible — quatre gélules sur un écran de 320 px
     * dépassent, et les couper serait pire que les faire glisser.
     */
    .fiche__sommaire {
        display: flex;
        gap: 4px;
        position: sticky;
        top: 78px;
        z-index: 50;
        padding: 8px var(--gouttiere-fiche);
        background: var(--surface);
        border-bottom: 1px solid var(--trait);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .fiche__sommaire::-webkit-scrollbar { display: none; }

    /*
     * L'ancre doit s'arrêter sous DEUX barres collantes, pas une : la règle
     * générale du site n'en connaît qu'une (88 px) et le titre visé passait
     * derrière le sommaire.
     */
    .fiche [id] { scroll-margin-top: 138px; }

    /*
     * Le rail passe au-dessus des résultats. Le panneau de recherche prend la
     * tête : sur un téléphone, on cherche d'abord, on regarde la carte ensuite.
     * L'espace vendu reste dans le flux, jamais masqué — un encart invisible
     * sur mobile, c'est la moitié des impressions payées qui disparaît.
     */
    .rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .rail > .panneau { order: 1; }
    .rail > .carte-vignette { order: 2; height: 100%; min-height: 240px; }
    .rail > .espace { order: 3; grid-column: 1 / -1; justify-self: center; }
    .grille-gratuites { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .navigation { display: none; }
    .navigation.est-ouvert {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        /* La bande, assombrie : le menu déroulé est la même barre, prolongée. */
        background: color-mix(in srgb, var(--entete) 86%, #000);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px var(--marge) 18px;
    }
    .navigation.est-ouvert a { padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--sur-entete) 18%, transparent); border-radius: 0; }
    .menu-bouton { display: block; }
    .entete__interieur { position: relative; min-height: 66px; }
    .marque { padding-right: 16px; }
    .marque { padding-block: 7px; }
    .marque__logo { max-height: 52px; max-width: 200px; }
    .entete__action { display: none; }
    .navigation.est-ouvert .navigation__action { display: block; border-bottom: 0; }

    .rail { grid-template-columns: 1fr; }
    .rail > .carte-vignette { min-height: 220px; }

    /*
     * Sous 860 px, la ligne se replie : le carton passe au-dessus, centré,
     * et le bouton prend toute la largeur. Le corps reste centré — c'est ce
     * qui fait tenir la colonne, et ça ne coûte rien sur un écran étroit.
     */
    .partenaire { grid-template-columns: minmax(0, 1fr); row-gap: 14px; justify-items: center; }
    .partenaire__logo { width: 132px; height: 64px; }
    .partenaire__initiales { font-size: 25px; }
    .partenaire__actions { width: 100%; max-width: 300px; }
    .grille-gratuites { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .fiche__voile { flex-direction: column; align-items: flex-start; gap: 14px; }
    /* Même proportion, réduite : 132 × 64 pour 165 × 80. */
    .fiche__logo { width: 132px; height: 64px; }
    .fiche__banniere { min-height: 150px; }

    /* La barre du haut ne fait plus que 66 px : le sommaire remonte d'autant. */
    .fiche__sommaire { top: 66px; }
    .fiche [id] { scroll-margin-top: 126px; }

    /* En plein écran, la carte prend tout : pas de marge, pas d'angles. */
    .carte-plein { padding: 0; }
    .carte-plein__cadre { border-radius: 0; }
    .carte-plein__barre h2 { display: none; }
    .carte-plein__compte { margin-left: 0; }

    /*
     * La colonne de filtres ne peut pas tenir à côté d'une carte sur un
     * téléphone : elle glisse par-dessus, au bouton « Filtres », et se retire
     * de la même façon. Elle reste le MÊME panneau — rien n'est dupliqué pour
     * le petit écran.
     */
    .carte-plein__bascule { display: inline-flex; }

    /*
     * La barre mangeait un tiers de l'écran, qu'elle prenait à la carte —
     * chaque commande y occupait sa propre ligne. Elle tient maintenant en
     * deux : la recherche et les deux boutons d'abord, la position et le suivi
     * ensuite.
     */
    .carte-plein__barre { gap: 8px 10px; padding: 10px 12px; }
    .carte-plein__champ { flex: 1 1 120px; max-width: none; padding: 9px 12px; }
    .carte-plein__long { display: none; }
    .carte-plein__ici-moi { flex: 0 1 auto; }
    .carte-plein__suivi,
    .carte-plein__compte { font-size: 12.5px; }
    .carte-plein__bascule { padding: 9px 14px; }
    .carte-plein__corps { grid-template-columns: minmax(0, 1fr); }
    .carte-plein__filtres {
        position: absolute;
        z-index: 700;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(330px, 86vw);
        transform: translateX(-102%);
        transition: transform .22s ease;
        box-shadow: 0 0 40px -10px rgba(12, 30, 40, .5);
    }
    .carte-plein__filtres.est-ouvert { transform: none; }
}

@media (max-width: 560px) {
    .pied__grille { grid-template-columns: 1fr; }
    /* Deux colonnes de noms d'annuaires ne tiennent plus : « Restauration du
       Patrimoine » y passerait sur trois lignes. */
    .pied .pied__annuaires { grid-template-columns: 1fr; }
    /* La couverture passe au-dessus du texte plutôt que de le réduire à
       quarante caractères par ligne. */
    .papier { grid-template-columns: 1fr; justify-items: start; }
    .partenaire__actions { flex-direction: column; }
    .grille-gratuites { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
    /*
     * L'arrivée de la pastille « Nouveau » est la première ANIMATION du site —
     * la règle du dessus ne coupait que les transitions. `both` la laisserait
     * sinon jouer entièrement, y compris son état de départ à opacité zéro.
     */
    .marque-neuf--fiche { animation: none !important; }
}

/* =======================================================================
 * LES ALLURES — la forme, quand les jetons ne portent que la couleur
 * =======================================================================
 *
 * Un annuaire distingué de son voisin par ses seules couleurs reste le même
 * site repeint : on le voit en une seconde, et c'est le reproche qu'on fait à
 * un réseau d'annuaires. Ces blocs portent ce que la couleur ne dit pas —
 * rayon des angles, épaisseur des filets, casse des titres, forme des puces,
 * respiration entre les sections.
 *
 * Le sélecteur est l'attribut `data-allure` posé sur <html> par le gabarit,
 * d'après `sites.theme.allure`. Aucun gabarit ne change : ajouter une allure,
 * c'est ajouter une entrée dans config('vac.theme.allures') et un bloc ici.
 *
 * `html[data-allure=…]` et non `[data-allure=…]` : un cran de spécificité
 * au-dessus de `:root`, pour que les variables redéfinies ci-dessous
 * l'emportent quel que soit l'ordre des règles.
 *
 * L'allure « editoriale » n'a aucun bloc : c'est la feuille telle qu'elle est
 * au-dessus, c'est-à-dire l'habillage livré aux premiers lots.
 */

/*
 * LA BARRE DU HAUT N'A PAS D'ALLURE, et c'est voulu : elle est identique sur
 * les onze annuaires — fond blanc, logo à gauche, bande de couleur à droite —
 * et ne change que de couleur. C'est le repère commun du réseau ; la
 * personnalité de chaque annuaire commence sous la barre.
 */

/* ----------------------------------------------------------------------
 * ÉPURÉE — blanche, aérée, arrondie
 * ----------------------------------------------------------------------
 *
 * Beaucoup de blanc, de grandes respirations entre les sections, des titres
 * larges dont un mot passe en italique, des cartes sans filet posées sur une
 * ombre très douce, et tous les contrôles en gélule. C'est la langue commune
 * de l'habillage moderne : deux annuaires la parlent tous les deux, et se
 * distinguent par leurs couleurs, leur typographie et leur composition.
 */

html[data-allure="epuree"] {
    --rayon: 18px;
    /* Une ombre unique, réglée une fois : toutes les cartes la partagent. */
    --ombre: 0 24px 50px -34px rgba(12, 30, 40, .45);
    --ombre-survol: 0 30px 60px -32px rgba(12, 30, 40, .5);
}

html[data-allure="epuree"] h1,
html[data-allure="epuree"] h2,
html[data-allure="epuree"] h3,
html[data-allure="epuree"] .titre {
    letter-spacing: -.022em;
    line-height: 1.06;
}

/*
 * Les sections respiraient deux fois plus que dans l'habillage d'origine
 * (clamp(52px, 7vw, 108px)). Ramenées aux mêmes 40 px le 25/09 au soir : c'est
 * CETTE règle qui s'appliquait sur l'accueil, pas `.section` tout court.
 */
html[data-allure="epuree"] .section { padding-block: 40px; }

/*
 * Les boutons perdent leurs capitales : un bouton en capitales espacées est
 * une convention de presse, pas d'application. En bas de casse et en gélule,
 * il se lit plus vite et paraît plus récent.
 */
html[data-allure="epuree"] .bouton {
    border-radius: 999px;
    text-transform: none;
    letter-spacing: .005em;
    font-size: 14.5px;
    padding: 13px 26px;
}

/* Les cartes ne sont plus cernées : elles flottent sur une ombre. */
html[data-allure="epuree"] .encadre,
html[data-allure="epuree"] .fiche__carte,
html[data-allure="epuree"] .bloc--contact,
html[data-allure="epuree"] .partenaire,
html[data-allure="epuree"] .tuile {
    border-color: transparent;
    box-shadow: var(--ombre);
}
html[data-allure="epuree"] .partenaire:hover,
html[data-allure="epuree"] .tuile:hover {
    border-color: transparent;
    box-shadow: var(--ombre-survol);
    transform: translateY(-2px);
}
html[data-allure="epuree"] .partenaire,
html[data-allure="epuree"] .tuile { transition: box-shadow .18s, transform .18s; }

html[data-allure="epuree"] .partenaire__logo,
html[data-allure="epuree"] .fiche__logo { border-radius: 14px; }

/* Tout ce qui se clique ou se retire est une gélule. */
html[data-allure="epuree"] .pastilles li,
html[data-allure="epuree"] .jeton-actif,
html[data-allure="epuree"] .champ-recherche,
html[data-allure="epuree"] .selecteur__bouton { border-radius: 999px; }

/*
 * Le CADRE des jetons, lui, garde des angles : une boîte de cent soixante-dix
 * pixels de haut arrondie à 999 px n'est plus une gélule, c'est un œuf — et les
 * jetons des coins se retrouvent dehors.
 */
html[data-allure="epuree"] .boite-jetons { border-radius: 20px; }

html[data-allure="epuree"] .champ-recherche,
html[data-allure="epuree"] .selecteur__bouton {
    background: var(--surface);
    border-color: var(--trait);
    padding: 13px 18px;
}

/* Le cadre des jetons perd son fond gris : il ne reste que les gélules. */
html[data-allure="epuree"] .boite-jetons {
    background: transparent;
    border-color: var(--trait);
    padding: 12px 14px;
}

/* Les sélecteurs de lieu et les replis perdent leurs filets durs. */
html[data-allure="epuree"] .selecteur__menu { border-radius: 20px; }
html[data-allure="epuree"] .repli { border-top-color: var(--trait); }

/*
 * Le bloc « Où êtes-vous ? » et les deux voies du lieu, à la même allure que le
 * reste : tout ce qui se clique en gélule, les cadres franchement arrondis.
 *
 * La règle sur la loupe n'est pas décorative. `html[data-allure] .champ-recherche`
 * redéfinit `padding` en entier — donc aussi la gauche — et pèse un cran de plus
 * que `.champ-loupe .champ-recherche`. Sans cette ligne, le texte du champ
 * passait SOUS la loupe sur l'allure par défaut du réseau, c'est-à-dire sur les
 * onze annuaires.
 */
html[data-allure="epuree"] .ou-suis-je__pose,
html[data-allure="epuree"] .ou-suis-je__viseur,
html[data-allure="epuree"] .ou__rayon select { border-radius: 999px; }

html[data-allure="epuree"] .ou__voie { border-radius: 20px; padding: 14px; }
html[data-allure="epuree"] .ou-suis-je__liste { border-radius: 20px; }
html[data-allure="epuree"] .champ-loupe .champ-recherche { padding-left: 42px; }
html[data-allure="epuree"] .champ-loupe svg { left: 17px; }

/* La carte en grand suit les mêmes angles que les cartes du site. */
html[data-allure="epuree"] .carte-plein__cadre { border-radius: 24px; }
html[data-allure="epuree"] .carte-vignette { border-color: transparent; box-shadow: var(--ombre); }

/* ------------------------------------------------------------------ *
 * Espaces de régie — les conteneurs des encarts.
 *
 * Le conteneur existe TOUJOURS dans la page, même quand rien n'est vendu :
 * c'est lui que le script vient remplir quand le visiteur change de filtre
 * sans recharger. Vide, il ne doit rien peser — d'où cette règle, et d'où
 * le fait que le gabarit n'écrit aucune espace à l'intérieur (une simple
 * indentation suffirait à faire échouer « :empty » et à laisser un trou).
 * ------------------------------------------------------------------ */
.espace:empty {
    display: none;
}

/* ------------------------------------------------------------------ *
 * Le bandeau de consentement à la mesure d'audience.
 *
 * Il n'existe que sur un annuaire réellement mesuré : sur les autres, aucun
 * élément n'est écrit dans la page et ces règles ne servent jamais.
 *
 * EN BAS, ET NON EN PLEIN ÉCRAN. Un voile modal sur toute la page force le
 * choix — c'est précisément ce qu'un consentement ne doit pas être, et la
 * CNIL le dit. Le bandeau se pose au bas de la fenêtre, laisse lire la page
 * derrière lui, et les deux réponses ont le même poids visuel : « Refuser »
 * n'est ni plus petit, ni plus pâle, ni plus loin que « Accepter ».
 *
 * `[hidden]` est forcé parce que la règle d'affichage qui suit gagnerait
 * sinon sur le défaut du navigateur, et le bandeau resterait visible chez
 * qui a déjà répondu.
 * ------------------------------------------------------------------ */
.consentement {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 900;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 20px;
    background: var(--surface);
    color: var(--encre);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
}

.consentement[hidden] { display: none; }

.consentement__texte { flex: 1 1 420px; min-width: 0; }
.consentement__texte b { display: block; font-family: var(--police-titre); font-size: 15px; }
.consentement__texte p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--secondaire); }
.consentement__texte a { color: var(--accent); }

.consentement__boutons { display: flex; gap: 10px; flex: 0 0 auto; }

/* Sous 560 px, les deux boutons prennent toute la largeur à parts égales :
   côte à côte et rétrécis, « Refuser » finirait par tenir sur deux lignes. */
@media (max-width: 560px) {
    .consentement { padding: 14px 16px; }
    .consentement__boutons { width: 100%; }
    .consentement__boutons .bouton { flex: 1; padding-left: 12px; padding-right: 12px; }
}
