/* ==========================================================================
   Bourse à terre — système de design (mise en page « Chantier », 3 thèmes).
   Ordre de chargement (base.html.twig) : app.css → themes/chantier.css → themes/topo.css → themes/strates.css
   → CSS du module ({% block stylesheets %}).

   RÈGLE : ce fichier et les CSS de module n'utilisent QUE des jetons (var(--…)) : aucune couleur ni police
   en dur. Les valeurs vivent dans assets/styles/themes/<thème>.css, sous :root[data-theme="…"].
   Contrat complet des jetons, HTML des composants et règles : docs/DESIGN.md. Guide visuel : /admin/design.

   Jetons fournis par chaque thème (résumé) :
     Surfaces   --fond --fond-2 --surface --surface-2 --trait --trait-fort --trait-champ --voile
     Encres     --encre --encre-2 --encre-3 --encre-inverse
     Sombre     --sombre --sombre-2 --sombre-3 --sombre-trait --sombre-encre --sombre-encre-2
     Action     --action --action-survol --action-encre --action-texte --action-voile --action-sur-sombre
     Offre      --offre --offre-encre --offre-texte --offre-fond --offre-sur-sombre
     Recherche  --recherche --recherche-encre --recherche-texte --recherche-fond --recherche-sur-sombre
     Étiquettes --etiquette-{offre,recherche}-{fond,encre,bord}
     Statuts    --{succes,attention,danger,info} (bord/icône) + -texte + -fond
     Vérifiée   --verifie-fond --verifie-encre --verifie-icone --verifie-icone-sombre
     Focus      --focus --focus-sur-sombre --focus-epaisseur --focus-decalage
     Zones      --{entete,heros,pied,appel}-{fond,fond-2,surface,encre,encre-2,encre-3,trait,focus,accent,recherche}
                --entete-actif --entete-survol --navbas-{fond,encre,trait,actif-fond,actif-encre,actif-icone,focus}
     Polices    --police-{titre,texte,donnees,chiffres,libelle} --titre-{graisse,largeur,interlettre,interligne,variation}
                --accent-{style,variation} --texte-{taille,graisse,interligne} --gras --tres-gras
                --bouton-{graisse,largeur} --etiquette-{graisse,largeur} --donnees-graisse
                --chiffres-{graisse,interlettre,variation} --libelle-casse
     Formes     --r-{petit,moyen,etiquette,bouton,champ,carte,bloc,tiroir} --ombre-{1,2,3,vitrine,pin} --bouton-contour
     Annonce    --ca-{fond,bord,bord-survol,bord-choisi,rayon,ombre,ombre-survol,filet,perfo,encoche}
                --ca-vol-taille(-vitrine,-grande) --releve-{pointille,filet}
     Motifs     --motif-bord --motif-bord-hauteur --motif-heros
     Carte      --carte-{filtre,filtre-photo,fond,eau,route,libelle,halo} --pin-{offre,recherche}-{fond,encre,bord}
                --pin-rayon --pin-choisi-anneau --grappe-{fond,encre} --zone-couleur
     Matière    --sol-{a,b,c} --sol-{a,b,c}-encre --sol-vide --sol-trait --sol-mousse
     Icônes     --ico-trait --ico-bout --ico-angle      Logo --logo-fond --logo-1 --logo-2 --logo-3
   ========================================================================== */

/* ---------- 1. Jetons communs (hors thème) ---------- */
:root {
    /* Échelle typographique */
    --t-meta: 0.875rem;
    --t-petit: 0.875rem;
    --t-texte: var(--texte-taille);
    --t-grand: 1.125rem;
    --t-h4: 1.0625rem;
    --t-h3: 1.3125rem;
    --t-h2: clamp(1.5rem, 2.6vw, 2rem);
    --t-h2-section: clamp(1.875rem, 3.4vw, 2.875rem);
    --t-h1: clamp(1.875rem, 3.6vw, 2.75rem);
    --t-heros: clamp(2.5rem, 5.1vw, 4.625rem);

    /* Espacements (grille de 4 px) */
    --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px;
    --e-6: 24px; --e-7: 32px; --e-8: 48px; --e-9: 64px; --e-10: 88px;
    --section: 88px;
    --gouttiere: 16px;
    --conteneur: 1280px;
    --conteneur-etroit: 680px;

    /* Cibles tactiles */
    --cible: 44px;
    --cible-l: 52px;
    --cible-xl: 60px;

    /* Hauteurs fixes */
    --h-entete: 72px;
    --h-nav-bas: 0px;
    --r-pilule: 999px;

    /* Copie des jetons « clairs » du thème : sert à rétablir une surface claire dans une zone sombre */
    --clair-fond: var(--fond); --clair-fond-2: var(--fond-2); --clair-surface: var(--surface); --clair-surface-2: var(--surface-2);
    --clair-trait: var(--trait); --clair-trait-fort: var(--trait-fort); --clair-trait-champ: var(--trait-champ);
    --clair-encre: var(--encre); --clair-encre-2: var(--encre-2); --clair-encre-3: var(--encre-3);
    --clair-focus: var(--focus); --clair-action-texte: var(--action-texte); --clair-offre-texte: var(--offre-texte);
    --clair-recherche-texte: var(--recherche-texte); --clair-verifie-icone: var(--verifie-icone);
}
@media (min-width: 760px) { :root { --gouttiere: 32px; } }
@media (max-width: 899px) { :root { --h-entete: 60px; --h-nav-bas: 68px; } }
@media (max-width: 759px) { :root { --section: 56px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background-color: var(--fond);
    /* Le focus clavier et les ancres ne passent ni sous l'en-tête collant, ni sous les barres collées en bas
       (--barres-bas : hauteur mesurée par app.js ; à défaut, la navigation basse). */
    scroll-padding-top: calc(var(--h-entete) + 16px);
    scroll-padding-bottom: calc(var(--barres-bas, var(--h-nav-bas)) + 16px);
}
body {
    margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
    background-color: var(--fond); color: var(--encre);
    font-family: var(--police-texte); font-size: var(--texte-taille); font-weight: var(--texte-graisse); line-height: var(--texte-interligne);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body:has(> .nav-bas) { padding-bottom: calc(var(--h-nav-bas) + env(safe-area-inset-bottom)); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4, .titre {
    font-family: var(--police-titre); font-weight: var(--titre-graisse); font-stretch: var(--titre-largeur);
    letter-spacing: var(--titre-interlettre); line-height: var(--titre-interligne); font-variation-settings: var(--titre-variation);
    text-wrap: balance; color: var(--encre);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; line-height: 1.2; }
h4 { font-size: var(--t-h4); letter-spacing: 0; line-height: 1.25; }
strong, b { font-weight: var(--tres-gras); }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--action-texte); }
img, svg, video { max-width: 100%; }
img { display: block; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
code { font-family: var(--police-donnees); font-size: .92em; overflow-wrap: anywhere; }
hr { border: 0; border-top: 1px solid var(--trait); margin: var(--e-6) 0; }
::selection { background: var(--action); color: var(--action-encre); }
[x-cloak], [hidden] { display: none !important; }

:focus-visible { outline: var(--focus-epaisseur) solid var(--focus); outline-offset: var(--focus-decalage); border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

.visuellement-cache, .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-evitement { position: absolute; left: 8px; top: -80px; z-index: 1000; padding: 12px 16px; border-radius: var(--r-bouton); background: var(--action); color: var(--action-encre); font-weight: var(--tres-gras); text-decoration: none; }
.lien-evitement:focus { top: 8px; }

/* Données chiffrées */
.mono, .donnee { font-family: var(--police-donnees); font-weight: var(--donnees-graisse); font-variant-numeric: tabular-nums; }
.chiffre { font-family: var(--police-chiffres); font-weight: var(--chiffres-graisse); letter-spacing: var(--chiffres-interlettre); font-variation-settings: var(--chiffres-variation); font-variant-numeric: tabular-nums lining-nums; }
.ap { margin: 0 var(--ap-marge, -.12em); }
.m3 { font-size: .5em; font-weight: inherit; margin-left: .1em; vertical-align: .6em; letter-spacing: 0; }

/* Icônes (inclusion _composants/icone.html.twig) : trait réglé par le thème */
.ico { flex: none; fill: none; stroke: currentColor; stroke-width: var(--ico-trait); stroke-linecap: var(--ico-bout); stroke-linejoin: var(--ico-angle); vertical-align: middle; }
.ico-plein { fill: currentColor; stroke: none; }

/* ---------- 3. Zones : chaque zone reprend les jetons de base avec ses propres valeurs ---------- */
.entete, .heros, .pied, .appel, .zone-sombre, .zone-claire, .ca, .bloc, .carte, .encadre, .flash, .tiroir, .modale {
    background-color: var(--fond);
    color: var(--encre);
}
.entete { --fond: var(--entete-fond); --fond-2: var(--entete-fond-2); --surface: var(--entete-surface); --encre: var(--entete-encre); --encre-2: var(--entete-encre-2); --encre-3: var(--entete-encre-3); --trait: var(--entete-trait); --trait-fort: var(--entete-trait); --focus: var(--entete-focus); --action-texte: var(--entete-accent); --recherche-texte: var(--entete-recherche); }
.heros { --fond: var(--heros-fond); --fond-2: var(--heros-fond-2); --surface: var(--heros-surface); --encre: var(--heros-encre); --encre-2: var(--heros-encre-2); --encre-3: var(--heros-encre-3); --trait: var(--heros-trait); --trait-fort: var(--heros-trait); --focus: var(--heros-focus); --action-texte: var(--heros-accent); --recherche-texte: var(--heros-recherche); }
.pied { --fond: var(--pied-fond); --fond-2: var(--pied-fond-2); --surface: var(--pied-surface); --encre: var(--pied-encre); --encre-2: var(--pied-encre-2); --encre-3: var(--pied-encre-3); --trait: var(--pied-trait); --trait-fort: var(--pied-trait); --focus: var(--pied-focus); --action-texte: var(--pied-accent); --recherche-texte: var(--pied-recherche); }
.appel { --fond: var(--appel-fond); --fond-2: var(--appel-fond-2); --surface: var(--appel-surface); --encre: var(--appel-encre); --encre-2: var(--appel-encre-2); --encre-3: var(--appel-encre-3); --trait: var(--appel-trait); --trait-fort: var(--appel-trait); --focus: var(--appel-focus); --action-texte: var(--appel-accent); --recherche-texte: var(--appel-recherche); }
.zone-sombre {
    --fond: var(--sombre); --fond-2: var(--sombre-2); --surface: var(--sombre-2); --surface-2: var(--sombre-3);
    --trait: var(--sombre-trait); --trait-fort: var(--sombre-trait); --trait-champ: var(--sombre-encre-2);
    --encre: var(--sombre-encre); --encre-2: var(--sombre-encre-2); --encre-3: var(--sombre-encre-2);
    --focus: var(--focus-sur-sombre); --action-texte: var(--action-sur-sombre); --offre-texte: var(--offre-sur-sombre);
    --recherche-texte: var(--recherche-sur-sombre); --verifie-icone: var(--verifie-icone-sombre);
}
/* Surfaces toujours claires (cartes d'annonce, blocs, encadrés, champs) même dans une zone sombre */
.zone-claire, .ca, .bloc, .carte, .encadre, .flash, .tiroir, .modale {
    --fond: var(--clair-fond); --fond-2: var(--clair-fond-2); --surface: var(--clair-surface); --surface-2: var(--clair-surface-2);
    --trait: var(--clair-trait); --trait-fort: var(--clair-trait-fort); --trait-champ: var(--clair-trait-champ);
    --encre: var(--clair-encre); --encre-2: var(--clair-encre-2); --encre-3: var(--clair-encre-3);
    --focus: var(--clair-focus); --action-texte: var(--clair-action-texte); --offre-texte: var(--clair-offre-texte);
    --recherche-texte: var(--clair-recherche-texte); --verifie-icone: var(--clair-verifie-icone);
}
.ca, .bloc, .carte, .encadre, .flash { background-color: transparent; }
.bloc, .carte { background-color: var(--surface); }

/* ---------- 4. Mise en page ---------- */
.conteneur, .conteneur-etroit { width: 100%; margin-inline: auto; padding-inline: var(--gouttiere); }
.conteneur { max-width: calc(var(--conteneur) + 2 * var(--gouttiere)); }
.conteneur-etroit { max-width: calc(var(--conteneur-etroit) + 2 * var(--gouttiere)); }
main { flex: 1 0 auto; }
main.conteneur, main.conteneur-etroit { padding-top: var(--e-7); padding-bottom: var(--e-9); }
main.pleine-largeur { width: 100%; }
@media (max-width: 759px) { main.conteneur, main.conteneur-etroit { padding-top: var(--e-5); padding-bottom: var(--e-8); } }

.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-6); margin-bottom: var(--e-7); }
.section-tete h2 { margin-top: var(--e-3); font-size: var(--t-h2-section); }
.section-tete .sous, .chapeau { margin-top: var(--e-3); color: var(--encre-2); font-size: var(--t-grand); max-width: 40em; }
@media (max-width: 759px) { .section-tete { flex-direction: column; align-items: flex-start; gap: var(--e-3); margin-bottom: var(--e-5); } }

.surtitre { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: var(--donnees-graisse) 0.875rem/1.2 var(--police-donnees); letter-spacing: .02em; color: var(--encre-2); }
.surtitre::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.titre-page { font-size: var(--t-h1); }
.titre-affiche { font-size: var(--t-heros); }

.pile { display: flex; flex-direction: column; gap: var(--e-4); }
.pile-serree { display: flex; flex-direction: column; gap: var(--e-2); }
.pile-large { display: flex; flex-direction: column; gap: var(--e-7); }
.rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.rangee-fin { justify-content: flex-end; }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--e-4); }
.grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--e-4); }
.texte-doux { color: var(--encre-2); }
.texte-petit { font-size: var(--t-petit); }
.texte-centre { text-align: center; }
.texte-action { color: var(--action-texte); }

/* ---------- 5. Marque et en-tête ---------- */
.marque { display: inline-flex; align-items: center; gap: 12px; min-height: var(--cible); color: var(--encre); text-decoration: none; }
.marque:hover { color: var(--encre); }
.marque-symbole { width: 38px; height: 38px; flex: none; }
.marque-texte { display: grid; gap: 3px; }
.marque-nom { font-family: var(--police-titre); font-weight: var(--titre-graisse); font-stretch: calc(var(--titre-largeur) + 4%); font-variation-settings: var(--titre-variation); font-size: 1.1875rem; line-height: 1; letter-spacing: -.015em; white-space: nowrap; }
.marque-nom i { font-style: normal; }
.marque-region { font: var(--donnees-graisse) 0.7812rem/1 var(--police-donnees); color: var(--encre-2); letter-spacing: .01em; white-space: nowrap; }
.logo .l-fond { fill: var(--logo-fond); }
.logo .l-1 { fill: var(--logo-1); }
.logo .l-2 { fill: var(--logo-2, var(--logo-1)); }
.logo .l-3 { fill: var(--logo-3, var(--logo-1)); }
.logo .l-trait { fill: none; stroke: var(--logo-1); }

.entete { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--trait); }
/* Téléphone en paysage (hauteur ≤ 500 px) : l'en-tête défile avec la page pour laisser la place au contenu. */
@media (max-height: 500px) {
    .entete { position: relative; }
    html { scroll-padding-top: 16px; }
}
.entete-in { position: relative; height: var(--h-entete); display: flex; align-items: center; justify-content: space-between; gap: var(--e-6); }
.nav-haut { display: none; align-items: center; gap: var(--e-1); }
.nav-haut > a:not(.btn) {
    position: relative; display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 14px; border-radius: var(--r-bouton);
    font-weight: var(--gras); font-size: 1rem; color: var(--encre); text-decoration: none;
}
.nav-haut > a:not(.btn):hover { background: var(--entete-survol); color: var(--encre); }
.nav-haut > a:not(.btn)[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: calc((var(--cible) - var(--h-entete)) / 2); height: 3px; background: var(--entete-actif); }
.nav-haut .btn { margin-left: var(--e-2); }
.entete-mobile { display: inline-flex; align-items: center; gap: 8px; min-height: var(--cible); padding: 0 12px; border: 1.5px solid var(--trait); border-radius: var(--r-bouton); font-weight: var(--gras); font-size: 0.9375rem; color: var(--encre); text-decoration: none; }
.entete-mobile .ico { width: 20px; height: 20px; }
/* Très petits écrans (320 px) : « Connexion » en icône seule (libellé lu par les lecteurs d'écran), sans débordement. */
@media (max-width: 374px) {
    .entete-mobile { width: var(--cible); padding: 0; justify-content: center; }
    .entete-mobile-libelle { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 900px) {
    .nav-haut { display: flex; }
    .entete-mobile { display: none; }
}
@media (max-width: 899px) {
    .entete-in { gap: var(--e-3); }
    .marque-symbole { width: 34px; height: 34px; }
    .marque-nom { font-size: 1.0625rem; }
    .marque-region { font-size: 0.75rem; }
}

/* ---------- 6. Navigation basse (mobile, au pouce) ---------- */
.nav-bas { display: none; }
@media (max-width: 899px) {
    .nav-bas {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
        height: calc(var(--h-nav-bas) + env(safe-area-inset-bottom));
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        background: var(--navbas-fond); border-top: 1px solid var(--navbas-trait);
        --focus: var(--navbas-focus);
    }
    .nav-bas a {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-height: 52px; border-radius: var(--r-bouton);
        font-size: 0.8438rem; font-weight: var(--gras); line-height: 1; color: var(--navbas-encre); text-decoration: none;
    }
    .nav-bas a .ico { width: 24px; height: 24px; }
    .nav-bas a[aria-current="page"] { background: var(--navbas-actif-fond); color: var(--navbas-actif-encre); }
    .nav-bas a[aria-current="page"] .ico { color: var(--navbas-actif-icone); }
    .nav-bas .nav-bas-publier, .nav-bas .nav-bas-publier[aria-current="page"] { background: var(--action); color: var(--action-encre); font-weight: var(--tres-gras); }
    .nav-bas .nav-bas-publier .ico, .nav-bas .nav-bas-publier[aria-current="page"] .ico { color: var(--action-encre); stroke-width: calc(var(--ico-trait) + .6px); }
}

/* ---------- 7. Pied de page ---------- */
.pied { border-top: 1px solid var(--trait); }
.pied-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--e-7) var(--e-8); padding-top: var(--e-8); padding-bottom: var(--e-6); }
.pied-marque p { margin-top: var(--e-3); color: var(--encre-2); font-size: 0.9375rem; max-width: 28em; }
.pied-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-5); }
.pied-nav h2 { font: var(--donnees-graisse) 0.875rem/1.2 var(--police-donnees); letter-spacing: .04em; color: var(--encre-2); margin-bottom: var(--e-2); text-transform: var(--libelle-casse); }
.pied-nav ul { list-style: none; padding: 0; display: grid; }
.pied-nav a { display: inline-flex; align-items: center; min-height: var(--cible); font-weight: var(--gras); font-size: 0.9375rem; color: var(--encre); text-decoration: none; }
.pied-nav a:hover { color: var(--action-texte); text-decoration: underline; }
.pied-apparence { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4); padding-top: var(--e-5); border-top: 1px solid var(--trait); }
.pied-legal { grid-column: 1 / -1; font: var(--donnees-graisse) 0.875rem/1.6 var(--police-donnees); color: var(--encre-2); }
.pied-legal a { color: var(--encre); }
@media (max-width: 759px) { .pied-in { grid-template-columns: 1fr; padding-top: var(--e-7); } }

/* Choix de l'apparence : 3 pastilles nommées (pied de page, Mon compte) */
.choix-theme { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin: 0; }
.choix-theme-titre { font-weight: var(--gras); font-size: 0.9375rem; margin-right: var(--e-1); }
.choix-theme-options { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.choix-theme button {
    display: inline-flex; align-items: center; gap: 10px; min-height: var(--cible); padding: 0 14px 0 8px;
    border: 1.5px solid var(--trait); border-radius: var(--r-bouton); background: transparent; color: var(--encre);
    font-weight: var(--gras); font-size: 0.9375rem; line-height: 1.1; text-align: left;
}
.choix-theme button:hover { border-color: var(--encre-2); }
.choix-theme button[aria-pressed="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.choix-theme button small { display: block; font-weight: var(--texte-graisse); font-size: 0.875rem; color: var(--encre-2); }
.pastille-theme { position: relative; display: inline-block; width: 28px; height: 28px; flex: none; border-radius: 7px; background: var(--pt-fond); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); overflow: hidden; }
.pastille-theme::before { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 7px; border-radius: 2px; background: var(--pt-1); }
.pastille-theme::after { content: ""; position: absolute; left: 6px; top: 6px; width: 9px; height: 7px; border-radius: 2px; background: var(--pt-2); }
.choix-theme-coche { width: 18px; height: 18px; margin-left: 2px; }
/* Couleurs d'aperçu des trois thèmes : seule la feuille du thème ACTIF est chargée (base.html.twig), les pastilles
   des autres thèmes doivent donc vivre ici. Seule exception aux jetons dans ce fichier : ce sont des échantillons. */
.pastille-theme-chantier { --pt-fond: #15171A; --pt-1: #FF5A1F; --pt-2: #F2F1EE; }
.pastille-theme-topo { --pt-fond: #FFFFFF; --pt-1: #B63A22; --pt-2: #2A6F97; }
.pastille-theme-strates { --pt-fond: #F3F2EF; --pt-1: #B4532A; --pt-2: #3D2B22; }
.choix-theme button:not([aria-pressed="true"]) .choix-theme-coche { display: none; }
.choix-theme-compact button small { display: none; }

/* ---------- 8. Boutons ---------- */
.btn {
    --h: var(--cible-l);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: var(--h); padding: 0 22px; border: var(--bouton-contour) solid transparent; border-radius: var(--r-bouton);
    font-family: var(--police-texte); font-weight: var(--bouton-graisse); font-stretch: var(--bouton-largeur); font-size: 1.0312rem; line-height: 1.15;
    text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; background: transparent; color: var(--encre);
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
.btn { max-width: 100%; }
.btn:active { transform: translateY(1px); }
/* Petits écrans et espacement de texte agrandi (WCAG 1.4.10, 1.4.12) : un libellé long revient à la ligne. */
@media (max-width: 479px) { .btn:not(.btn-icone, .btn-carre) { white-space: normal; } }
.btn .ico { width: 20px; height: 20px; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--fond-2); color: var(--encre-2); border-color: var(--trait); cursor: not-allowed; transform: none; }
.btn-action, .btn-principal { background: var(--action); color: var(--action-encre); }
.btn-action:hover, .btn-principal:hover { background: var(--action-survol); color: var(--action-encre); }
.btn-secondaire { background: var(--encre); color: var(--fond); }
.btn-secondaire:hover { background: var(--encre-2); color: var(--fond); }
.btn-contour { border-color: currentColor; color: var(--encre); }
.btn-contour:hover { background: var(--fond-2); color: var(--encre); }
.btn-fantome { color: var(--encre); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; padding-inline: 12px; }
.btn-fantome:hover { background: var(--fond-2); color: var(--encre); }
.btn-danger { border-color: var(--danger-texte); color: var(--danger-texte); background: var(--surface); }
.btn-danger:hover { background: var(--danger-fond); color: var(--danger-texte); }
.btn-danger-plein { background: var(--danger-texte); color: var(--encre-inverse); }
.btn-m, .btn-petit { --h: var(--cible); padding: 0 16px; font-size: 0.9688rem; }
.btn-grand { --h: var(--cible-xl); padding: 0 26px; font-size: 1.125rem; }
.btn-plein { width: 100%; white-space: normal; }
.btn-carre, .btn-icone { width: var(--h); padding: 0; }
.btn-icone { --h: var(--cible); border-color: var(--trait); background: var(--surface); }
.btn-icone:hover { border-color: var(--encre); }
.lien-fort { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: var(--tres-gras); color: var(--encre); text-decoration: none; border-bottom: 2px solid currentColor; }
.lien-fort:hover { color: var(--action-texte); }
.lien-fort .ico { width: 18px; height: 18px; }
.lien-action { display: inline-flex; align-items: center; gap: 6px; min-height: var(--cible); font-weight: var(--tres-gras); color: var(--encre); }
.lien-action:hover { color: var(--action-texte); }
.actions { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
@media (max-width: 759px) { .actions-mobile-plein > .btn { width: 100%; } }

/* ---------- 9. Champs ---------- */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > label, .champ legend, .champ-label, .etiquette-champ, .etiquette-libre { font-size: 0.9375rem; font-weight: var(--tres-gras); color: var(--encre); }
.champ .aide, .champ .help-text, .form-help, .aide { font-size: var(--t-petit); color: var(--encre-2); }
.champ-requis::after { content: " *"; color: var(--danger-texte); }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"],
input[type="search"], input[type="url"], input[type="time"], select, textarea, .champ-saisie {
    width: 100%; min-height: var(--cible-l); padding: 0 16px;
    border: 1.5px solid var(--clair-trait-champ); border-radius: var(--r-champ);
    background-color: var(--clair-surface); color: var(--clair-encre);
    font-size: 1.0625rem; font-weight: var(--gras); line-height: 1.3;
    transition: border-color .15s, box-shadow .15s;
}
/* Indication (encre de méta, ≥ 4.5:1) : plus claire qu'une valeur saisie pour ne pas s'y confondre. */
input::placeholder, textarea::placeholder { color: var(--clair-encre-3); font-weight: var(--texte-graisse); opacity: 1; }
textarea { min-height: 128px; padding: 12px 16px; resize: vertical; font-weight: var(--texte-graisse); }
select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--clair-encre) 50%), linear-gradient(135deg, var(--clair-encre) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .champ-saisie:focus-within { outline: none; border-color: var(--clair-focus); box-shadow: 0 0 0 3px var(--clair-focus); }
input[type="date"] { font-family: var(--police-donnees); font-weight: var(--donnees-graisse); }
input:disabled, select:disabled, textarea:disabled { background-color: var(--clair-fond-2); color: var(--clair-encre-2); cursor: not-allowed; }
.champ-invalide input, .champ-invalide select, .champ-invalide textarea, input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger-texte); border-width: 2px; }
.form-error, .erreur-champ, ul.form-errors, .champ ul:not([class]) { list-style: none; margin: 0; padding: 0; color: var(--danger-texte); font-size: 0.9062rem; font-weight: var(--tres-gras); }
.erreur-champ, .form-error { display: flex; align-items: flex-start; gap: 6px; }

/* Champ avec icône (recherche, lieu) */
.champ-icone { position: relative; display: flex; align-items: center; }
.champ-icone > .ico { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--clair-encre); pointer-events: none; }
.champ-icone > input { padding-left: 46px; }
.champ-icone > .champ-effacer { position: absolute; right: 4px; width: var(--cible); height: var(--cible); display: grid; place-items: center; border: 0; border-radius: var(--r-bouton); background: transparent; color: var(--clair-encre-2); }

/* Suggestions (liste d'autocomplétion) */
.suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--clair-surface); color: var(--clair-encre); border: 1px solid var(--clair-trait); border-radius: var(--r-champ); box-shadow: var(--ombre-2); }
.suggestions li { display: flex; align-items: center; min-height: var(--cible); padding: 0 12px; border-radius: var(--r-petit); cursor: pointer; font-weight: var(--gras); }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--clair-fond-2); }
.suggestions li[aria-disabled="true"] { color: var(--clair-encre-2); cursor: default; font-weight: var(--texte-graisse); }

/* Cases à cocher et boutons radio (natifs, agrandis) */
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; margin: 0; accent-color: var(--clair-encre); flex: none; cursor: pointer; }
.case { display: flex; align-items: flex-start; gap: 12px; min-height: var(--cible); padding: 10px 0; cursor: pointer; font-weight: var(--gras); }
.case input { margin-top: 1px; }
.case small, .case .case-aide { display: block; font-weight: var(--texte-graisse); font-size: var(--t-petit); color: var(--encre-2); }

/* Interrupteur : <label class="interrupteur"><input type="checkbox" role="switch"><span class="interrupteur-piste" aria-hidden="true"></span>Texte</label> */
.interrupteur { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: var(--cible); cursor: pointer; font-weight: var(--gras); }
.interrupteur input { position: absolute; opacity: 0; width: 52px; height: 32px; margin: 0; }
.interrupteur-piste { position: relative; width: 52px; height: 32px; flex: none; border-radius: 16px; background: var(--trait-champ); transition: background-color .15s; }
.interrupteur-piste::after { content: ""; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--clair-surface); box-shadow: var(--ombre-1); transition: transform .15s; }
.interrupteur input:checked + .interrupteur-piste { background: var(--encre); }
.interrupteur input:checked + .interrupteur-piste::after { transform: translateX(20px); }
.interrupteur input:focus-visible + .interrupteur-piste { outline: var(--focus-epaisseur) solid var(--focus); outline-offset: var(--focus-decalage); }

/* ---------- 10. Sélecteur segmenté, puces, tuiles ---------- */
.segment, .segments {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px;
    border-radius: calc(var(--r-bouton) + 4px); background: var(--fond-2); border: 1px solid var(--trait);
}
.segment label, .segments label {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 14px; border-radius: var(--r-bouton);
    font-weight: var(--bouton-graisse); font-stretch: var(--bouton-largeur); font-size: 0.9688rem; line-height: 1.15; text-align: center;
    color: var(--encre-2); cursor: pointer;
}
.segment input, .segments input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.segment label:has(input:checked), .segments label:has(input:checked) { background: var(--clair-surface); color: var(--clair-encre); box-shadow: var(--ombre-1); }
.segment label:has(input:focus-visible), .segments label:has(input:focus-visible) { outline: var(--focus-epaisseur) solid var(--focus); outline-offset: 2px; }
.segment .ico { width: 20px; height: 20px; }
.segment label:has(input:checked) .g-offre { color: var(--clair-offre-texte); }
.segment label:has(input:checked) .g-recherche { color: var(--clair-recherche-texte); }
.segment .n { font: var(--donnees-graisse) 0.875rem/1 var(--police-donnees); }

.puce {
    position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: var(--cible); padding: 0 14px;
    border: 1.5px solid var(--trait-fort); border-radius: var(--r-bouton); background: var(--surface);
    font-weight: var(--gras); font-size: 0.9375rem; white-space: nowrap; cursor: pointer; color: var(--encre);
}
.puce input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.puce:hover { border-color: var(--encre-2); }
.puce:has(input:checked) { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.puce:has(input:focus-visible) { outline: var(--focus-epaisseur) solid var(--focus); outline-offset: 2px; }
.puce .coche { display: none; width: 16px; height: 16px; }
.puce:has(input:checked) .coche { display: block; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tuile { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 64px; padding: 12px 14px; border: 1.5px solid var(--trait-champ); border-radius: var(--r-champ); background: var(--surface); cursor: pointer; font-weight: var(--tres-gras); }
.tuile input { position: absolute; opacity: 0; pointer-events: none; }
.tuile:has(input:checked) { border-color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); background: var(--surface-2); }
.tuile:has(input:focus-visible) { outline: var(--focus-epaisseur) solid var(--focus); outline-offset: 2px; }

/* ---------- 11. Étiquettes et badges ---------- */
.etiquette, .badge {
    display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 9px 2px 8px;
    border: 2px solid transparent; border-radius: var(--r-etiquette);
    font-family: var(--police-texte); font-weight: var(--etiquette-graisse); font-stretch: var(--etiquette-largeur); font-size: 0.875rem; line-height: 1.1; white-space: nowrap;
    background: var(--fond-2); color: var(--encre);
}
.etiquette .ico, .badge .ico, .badge svg { width: 16px; height: 16px; }
.etiquette-offre, .badge-offre { background: var(--etiquette-offre-fond); color: var(--etiquette-offre-encre); border-color: var(--etiquette-offre-bord); }
.etiquette-recherche, .badge-recherche { background: var(--etiquette-recherche-fond); color: var(--etiquette-recherche-encre); border-color: var(--etiquette-recherche-bord); }
.badge-sol, .badge-nonpollue { background: var(--surface); color: var(--encre); border-color: var(--trait); border-width: 1px; }
.badge-sol .ico, .badge-nonpollue svg { color: var(--succes-texte); }
.badge-gratuit { background: var(--action-voile); color: var(--action-texte); }
.badge-neutre { background: var(--fond-2); color: var(--encre); }
.badge-ok, .badge-succes { background: var(--succes-fond); color: var(--succes-texte); }
.badge-alerte, .badge-danger { background: var(--danger-fond); color: var(--danger-texte); }
.badge-attention { background: var(--attention-fond); color: var(--attention-texte); }
.badge-info { background: var(--info-fond); color: var(--info-texte); }
.badge-verifie { background: var(--verifie-fond); color: var(--verifie-encre); border-color: var(--verifie-fond); }
.badge-verifie .ico, .badge-verifie svg { color: var(--verifie-encre); }
.badge-verification { background: var(--fond-2); color: var(--encre); border: 1px dashed var(--trait-champ); }
.badge-mini { min-height: 22px; padding: 1px 7px; font-size: 0.8125rem; }
.badge-plan { background: var(--surface); color: var(--encre); border: 1px solid var(--encre); font-family: var(--police-donnees); font-weight: var(--donnees-graisse); letter-spacing: .01em; }
.badge-plan-payant { background: var(--encre); color: var(--fond); }
/* Statuts d'annonce */
.statut-publiee { background: var(--succes-fond); color: var(--succes-texte); }
.statut-brouillon { background: var(--fond-2); color: var(--encre); border: 1px dashed var(--trait-champ); }
.statut-attribuee { background: var(--info-fond); color: var(--info-texte); }
.statut-retiree, .statut-expiree { background: var(--fond-2); color: var(--encre-2); }
.statut-masquee { background: var(--danger-fond); color: var(--danger-texte); }
.pastille { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 9px; border-radius: var(--r-etiquette); background: var(--fond-2); color: var(--encre); font-weight: var(--gras); font-size: 0.875rem; line-height: 1.15; white-space: nowrap; }
.pastille .ico { width: 15px; height: 15px; }
.pastille-sombre { background: var(--encre); color: var(--fond); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* « Vérifiée » court (cartes d'annonce) */
.verifie { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--gras); font-size: 0.875rem; color: var(--encre); white-space: nowrap; min-width: 0; }
.verifie .ico { width: 17px; height: 17px; color: var(--verifie-icone); }
.verifie span { overflow: hidden; text-overflow: ellipsis; }
.en-verification { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--gras); font-size: 0.875rem; color: var(--encre-2); white-space: nowrap; }
.en-verification .ico { width: 16px; height: 16px; }
/* Bloc fort « Entreprise vérifiée » (fiche, compte) */
.bloc-verifie { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: var(--r-moyen); background: var(--verifie-fond); color: var(--verifie-encre); border: 1px solid var(--verifie-encre); }
.bloc-verifie-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--r-petit); background: var(--action); color: var(--action-encre); }
.bloc-verifie-ico .ico { width: 26px; height: 26px; }
.bloc-verifie strong { display: block; font-family: var(--police-titre); font-weight: var(--titre-graisse); font-variation-settings: var(--titre-variation); font-size: 1.0625rem; line-height: 1.15; }
.bloc-verifie span { display: block; margin-top: 3px; font: var(--donnees-graisse) 0.8438rem/1.4 var(--police-donnees); opacity: .85; }

/* ---------- 12. Profil de sol (A / B / C) et volume ---------- */
.profil-sol { --ps-h: var(--ps-force, var(--ps-taille, 26px)); position: relative; display: inline-grid; grid-template-rows: repeat(3, 1fr); gap: 2px; width: calc(var(--ps-h) * .88); height: var(--ps-h); flex: none; vertical-align: middle; color: var(--encre-2); }
.profil-sol > i { display: block; border: 1.5px solid currentColor; opacity: .45; border-radius: 1px; background: var(--sol-vide); }
.profil-sol-a > .ps-a, .profil-sol-b > .ps-b, .profil-sol-c > .ps-c { opacity: 1; border-color: var(--encre); }
.profil-sol-a > .ps-a { background: var(--sol-a); }
.profil-sol-b > .ps-b { background: var(--sol-b); }
.profil-sol-c > .ps-c { background: var(--sol-c); }
.profil-sol .ps-lettre { display: none; }
.zone-sombre .profil-sol > i, .entete .profil-sol > i { border-color: currentColor; }

/* Profil riche (log de forage) : .profil-sol-riche > .psr-couche.psr-a|b|c (.est-ce-lot) */
.profil-sol-riche { display: grid; grid-template-rows: 46px 64px 92px; min-width: 190px; }
.psr-couche { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 10px; margin-top: -1.5px; border: 1.5px solid var(--encre); font-weight: var(--tres-gras); font-size: 0.875rem; line-height: 1.15; }
.psr-couche:first-child { margin-top: 0; }
.psr-couche b { font-family: var(--police-donnees); }
.psr-couche small { margin-left: auto; font: var(--donnees-graisse) 0.7812rem/1 var(--police-donnees); }
.psr-couche em { position: absolute; right: -2px; top: -12px; padding: 3px 6px; border-radius: 3px; background: var(--action); color: var(--action-encre); font: normal 700 0.8125rem/1 var(--police-donnees); }
.psr-a { background: radial-gradient(circle, rgba(255, 255, 255, .16) 0 1px, transparent 1.6px) 0 0 / 7px 7px, var(--sol-a); color: var(--sol-a-encre); }
.psr-b { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 7px), var(--sol-b); color: var(--sol-b-encre); }
.psr-c { background: radial-gradient(circle at 30% 40%, rgba(0, 0, 0, .24) 0 2.5px, transparent 3px) 0 0 / 16px 14px, radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .45) 0 2px, transparent 2.5px) 0 0 / 22px 18px, var(--sol-c); color: var(--sol-c-encre); }
/* Couches qui ne sont pas « ce lot » : seul le fond est atténué (voile clair), le texte reste à l'encre pleine
   (WCAG 1.4.3 : ≥ 4.5:1 dans les trois thèmes). */
.psr-couche { isolation: isolate; }
.psr-couche:not(.est-ce-lot) { color: var(--encre); }
.psr-couche:not(.est-ce-lot)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface); opacity: .6; pointer-events: none; }
.psr-couche:not(.est-ce-lot) small { opacity: 1; }
.psr-couche.est-ce-lot { outline: 3px solid var(--action); outline-offset: -1px; z-index: 1; }

.volume { font-family: var(--police-chiffres); font-weight: var(--chiffres-graisse); letter-spacing: var(--chiffres-interlettre); font-variation-settings: var(--chiffres-variation); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }

/* ---------- 13. Carte d'annonce (_composants/carte_annonce.html.twig) ---------- */
.ca {
    --ca-couleur-type: var(--offre);
    --ca-pied-h: 54px;
    position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0;
    color: var(--encre); text-decoration: none; border-radius: var(--ca-rayon);
    transition: transform .15s;
}
.ca-recherche { --ca-couleur-type: var(--recherche); }
.ca::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--ca-fond); border: 1px solid var(--ca-bord); border-radius: var(--ca-rayon); box-shadow: var(--ca-ombre);
    transition: border-color .15s, box-shadow .15s;
}
a.ca:hover { color: var(--encre); }
a.ca:hover::before { border-color: var(--ca-bord-survol); box-shadow: var(--ca-ombre-survol); }
.ca.est-choisi::before { border-color: var(--ca-bord-choisi); box-shadow: inset 0 0 0 1px var(--ca-bord-choisi); }
.ca:focus-visible { outline-offset: 3px; border-radius: var(--ca-rayon); }
.ca-bande { display: none; }
.ca-corps { display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px 18px 14px; }
.ca-tete { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ca-ref { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: var(--donnees-graisse) 0.875rem/1.2 var(--police-donnees); color: var(--encre-2); letter-spacing: .02em; white-space: nowrap; }
.ca-tete > .etiquette, .ca-tete > .ca-dist { flex: none; }
.ca-dist { margin-left: auto; font: 700 0.875rem/1 var(--police-donnees); color: var(--encre); white-space: nowrap; }
.ca-principal { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; }
.ca-vol { font-family: var(--police-chiffres); font-weight: var(--chiffres-graisse); letter-spacing: var(--chiffres-interlettre); font-variation-settings: var(--chiffres-variation); font-size: var(--ca-vol-taille); line-height: .95; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.ca-vol .m3 { font-size: .46em; vertical-align: .9em; }
.ca-mat { margin-top: 8px; font-family: var(--police-titre); font-weight: var(--tres-gras); font-stretch: var(--bouton-largeur); font-variation-settings: var(--titre-variation); font-size: 1.0625rem; line-height: 1.25; }
.ca-mat small { font-family: var(--police-texte); font-weight: var(--texte-graisse); font-stretch: 100%; font-size: 0.9062rem; color: var(--encre-2); }
.ca-lieu { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 0.9062rem; line-height: 1.35; color: var(--encre-2); }
.ca-lieu .ico { width: 16px; height: 16px; margin-top: 1px; color: var(--encre); }
.ca-lieu b { color: var(--encre); font-weight: var(--gras); }
.ca-notes { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.ca-note { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 0.875rem; line-height: 1.35; font-weight: var(--gras); color: var(--encre-2); }
.ca-note .ico { width: 15px; height: 15px; margin-top: 1px; }
.ca-remblai { color: var(--recherche-texte); }
.ca-perfo { display: block; margin-top: auto; }
.ca-pied { display: flex; align-items: center; gap: 10px; min-height: var(--ca-pied-h); padding: 6px 18px; min-width: 0; }
.ca-prix { min-width: 0; font: 700 0.9375rem/1.2 var(--police-donnees); color: var(--encre); text-wrap: balance; }
.ca-prix.est-gratuit { color: var(--action-texte); }
.ca-pied .verifie, .ca-pied .en-verification { margin-left: auto; flex: none; }
.ca-vitrine .ca-pied > :first-child, .ca-grande .ca-pied > :first-child { margin-left: 0; }
.ca-chevron { width: 20px; height: 20px; color: var(--encre-2); flex: none; }
.ca-pied .verifie + .ca-chevron, .ca-pied .en-verification + .ca-chevron { margin-left: 0; }
.ca-pied > .ca-prix + .ca-chevron { margin-left: auto; }
.ca .code-barres { display: none; height: 30px; width: auto; margin-left: auto; color: var(--encre); }
.ca-photo { display: none; }
/* Relevé « libellé ....... valeur » (vitrine, grande) */
.ca-releve { display: grid; margin-top: 16px; border-top: 1px solid var(--releve-filet); }
.ca-releve > div { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--releve-filet); }
.ca-releve > div::before { content: ""; grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 4px; border-bottom: 2px dotted var(--releve-pointille); }
.ca-releve dt { grid-column: 1; grid-row: 1; font: var(--donnees-graisse) 0.875rem/1.3 var(--police-libelle); color: var(--encre-2); }
.ca-releve dd { grid-column: 3; grid-row: 1; font-weight: var(--gras); font-size: 0.9375rem; line-height: 1.3; text-align: right; }
.ca-releve dd.mono { font-family: var(--police-donnees); font-weight: 700; font-size: 0.9062rem; }

/* Variante vitrine (accueil) */
.ca-vitrine { --ca-pied-h: 64px; }
.ca-vitrine .ca-corps { padding: 18px 22px 0; }
.ca-vitrine .ca-tete .ca-ref { margin-left: auto; font-size: 0.875rem; }
.ca-vitrine .ca-vol { font-size: var(--ca-vol-taille-vitrine); line-height: .9; }
.ca-vitrine .ca-vol .m3 { font-size: .42em; vertical-align: 1.05em; }
.ca-vitrine .profil-sol { --ps-force: 34px; }
.ca-vitrine .ca-mat { margin-top: 10px; font-size: 1.3125rem; }
.ca-vitrine .ca-mat small { display: block; margin-top: 2px; font-size: 0.9375rem; }
.ca-vitrine .ca-perfo { margin-top: 18px; }
.ca-vitrine .ca-pied { padding: 0 22px; gap: 12px; }
.ca-vitrine .ca-pied .verifie { margin-left: 0; font-size: 0.875rem; }

/* Variante grande (fiche) */
.ca-grande { --ca-pied-h: 76px; }
.ca-grande .ca-corps { padding: 24px 32px 0; }
.ca-grande .ca-titre { margin-top: 20px; font-size: clamp(1.75rem, 3.1vw, 2.625rem); max-width: 20ch; }
.ca-grande .ca-principal { align-items: flex-start; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1.5px solid var(--encre); }
.ca-grande .ca-vol { margin-top: 8px; font-size: var(--ca-vol-taille-grande); line-height: .86; letter-spacing: calc(var(--chiffres-interlettre) - .02em); }
.ca-grande .ca-vol .m3 { font-size: .36em; vertical-align: 1.35em; }
.ca-grande .ca-releve { grid-template-columns: 1fr 1fr; column-gap: 36px; }
.ca-grande .ca-perfo { margin-top: 24px; }
.ca-grande .ca-pied { padding: 0 32px; gap: 16px; }
.ca-grande .code-barres { height: 36px; }
@media (max-width: 759px) {
    .ca-vitrine .ca-corps { padding: 16px 18px 0; }
    .ca-vitrine .ca-pied { padding: 0 18px; }
    .ca-vitrine .ca-vol { font-size: calc(var(--ca-vol-taille-vitrine) * .84); }
    .ca-grande { --ca-pied-h: 66px; }
    .ca-grande .ca-corps { padding: 18px 18px 0; }
    .ca-grande .ca-pied { padding: 0 18px; }
    .ca-grande .ca-vol { font-size: calc(var(--ca-vol-taille-grande) * .74); }
    .ca-grande .ca-releve { grid-template-columns: 1fr; }
}
/* 320 px et espacement de texte agrandi (WCAG 1.4.10, 1.4.12) : le gros volume de la fiche suit la largeur de l'écran. */
@media (max-width: 374px) { .ca-grande .ca-vol { font-size: min(calc(var(--ca-vol-taille-grande) * .74), 16vw); } }
/* Mise en page « carotte à gauche » (topo, strates) */
:root:is([data-theme="topo"], [data-theme="strates"]) .ca-compacte .ca-corps { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
:root:is([data-theme="topo"], [data-theme="strates"]) .ca-compacte .ca-corps > * { grid-column: 2; }
:root:is([data-theme="topo"], [data-theme="strates"]) .ca-compacte .ca-principal { display: contents; }
:root:is([data-theme="topo"], [data-theme="strates"]) .ca-compacte .ca-vol { grid-column: 2; margin-top: 10px; }
:root:is([data-theme="topo"], [data-theme="strates"]) .ca-compacte .ca-principal > .profil-sol { grid-column: 1; grid-row: 1 / span 5; align-self: start; --ps-force: 52px; }
:root[data-theme="topo"] .ca-compacte .ca-principal > .profil-sol { --ps-force: 44px; }

/* Listes de cartes */
.liste-annonces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.liste-annonces > li { display: flex; }
.liste-annonces > li > .ca { flex: 1; }
.defilant-horizontal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--gouttiere)); padding: 4px var(--gouttiere) 10px; scrollbar-width: none; list-style: none; }
.defilant-horizontal::-webkit-scrollbar { display: none; }
.defilant-horizontal > * { flex: 0 0 min(300px, 84vw); scroll-snap-align: start; display: flex; }
.defilant-horizontal > * > .ca { flex: 1; }

/* Correspondance offre ↔ recherche (cote entre deux lieux) */
.correspondance { padding: 16px 18px; border-radius: var(--r-carte); background: var(--surface); border: 1px dashed var(--recherche-texte); }
.correspondance-ligne { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; font-weight: var(--tres-gras); font-size: 0.875rem; line-height: 1.2; }
.correspondance-ligne > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; min-width: 0; }
.correspondance-o, .correspondance-r { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.correspondance-o { background: var(--offre); }
.correspondance-r { border: 2.5px solid var(--recherche-texte); }
.correspondance-cote { position: relative; height: 26px; }
.correspondance-cote::before { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 10px; background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) 0 0 / 1.5px 100% no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 1.5px 100% no-repeat; color: var(--encre-2); }
.correspondance-cote b { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); padding: 0 8px; background: var(--surface); font: 800 0.875rem/1 var(--police-donnees); color: var(--action-texte); white-space: nowrap; }
.correspondance p { margin-top: 12px; font-size: 0.9062rem; line-height: 1.45; color: var(--encre-2); }
.correspondance p strong { color: var(--encre); font-weight: var(--gras); }
.correspondance a { color: var(--encre); font-weight: var(--tres-gras); }
.correspondance .etiquette { min-height: 22px; font-size: 0.8125rem; margin-right: 6px; vertical-align: 1px; }

/* ---------- 14. Blocs, encadrés, messages ---------- */
.bloc, .carte { border: 1px solid var(--trait); border-radius: var(--r-bloc); padding: var(--e-5); }
.bloc-titre { font-size: 1.1875rem; }
.carte-lien { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.carte-lien:hover { color: inherit; border-color: var(--trait-fort); box-shadow: var(--ombre-2); }
.encadre {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-moyen);
    background: var(--info-fond); border-left: 4px solid var(--info); color: var(--encre); font-size: 0.9688rem; line-height: 1.5;
}
.encadre > .ico { width: 22px; height: 22px; margin-top: 1px; color: var(--info-texte); }
.encadre p + p { margin-top: 6px; }
.encadre a:not(.btn) { color: var(--encre); font-weight: var(--tres-gras); }
.encadre-titre { display: block; font-weight: var(--tres-gras); }
.encadre-succes, .encadre-ok { background: var(--succes-fond); border-left-color: var(--succes); }
.encadre-succes > .ico, .encadre-ok > .ico, .encadre-succes .encadre-titre, .encadre-ok strong { color: var(--succes-texte); }
.encadre-attention { background: var(--attention-fond); border-left-color: var(--attention); }
.encadre-attention > .ico, .encadre-attention .encadre-titre, .encadre-attention strong { color: var(--attention-texte); }
.encadre-erreur { background: var(--danger-fond); border-left-color: var(--danger); }
.encadre-erreur > .ico, .encadre-erreur .encadre-titre, .encadre-erreur strong { color: var(--danger-texte); }
.encadre-neutre { background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid var(--trait-fort); }

.flashes { display: grid; gap: var(--e-2); padding-top: var(--e-4); }
.flash {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-moyen);
    background: var(--info-fond); border-left: 4px solid var(--info); color: var(--encre); font-weight: var(--gras); line-height: 1.45;
}
.flash > .ico { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.flash--succes { background: var(--succes-fond); border-left-color: var(--succes); }
.flash--succes > .ico { color: var(--succes-texte); }
.flash--erreur { background: var(--danger-fond); border-left-color: var(--danger); }
.flash--erreur > .ico { color: var(--danger-texte); }
.flash--attention { background: var(--attention-fond); border-left-color: var(--attention); }
.flash--attention > .ico { color: var(--attention-texte); }
.flash--info > .ico { color: var(--info-texte); }

/* Toast (BT.toast(message, type) dans app.js) */
.toasts { position: fixed; left: 50%; bottom: calc(var(--h-nav-bas) + 16px + env(safe-area-inset-bottom)); z-index: 900; display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-moyen); background: var(--sombre); color: var(--sombre-encre); font-weight: var(--gras); box-shadow: var(--ombre-3); pointer-events: auto; animation: toast-entree .2s ease-out; }
.toast .ico { width: 20px; height: 20px; color: var(--action-sur-sombre); }
.toast--succes .ico { color: var(--sombre-encre); }
.toast--erreur { outline: 2px solid var(--danger); }
@keyframes toast-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Bandeau d'appel : <section class="appel"><div class="conteneur appel-in"><div><h2 class="titre">…</h2><p>…</p></div><div class="appel-actions">…</div></div></section> */
.appel { position: relative; isolation: isolate; }
.appel-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.appel h2 { font-size: clamp(1.75rem, 3.1vw, 2.75rem); max-width: 21ch; color: var(--encre); }
.appel p { margin-top: 14px; color: var(--encre-2); font-size: 1.125rem; max-width: 36em; }
.appel-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bord-motif { height: var(--motif-bord-hauteur); background: var(--motif-bord); }
.motif-heros { background: var(--motif-heros); }
/* NB : jamais d'url() dans un jeton (une url relative est résolue par rapport à la feuille qui utilise var()) :
   les motifs en image sont posés directement sur .bord-motif / .motif-heros dans le fichier du thème. */
@media (max-width: 1099px) { .appel-in { grid-template-columns: 1fr; } }
@media (max-width: 759px) { .appel-in { padding-top: 44px; padding-bottom: 48px; gap: 26px; } .appel h2 { font-size: 1.6875rem; } .appel-actions .btn { width: 100%; } }

/* ---------- 15. Étapes, onglets, tableaux, pagination, états vides, squelettes ---------- */
/* Étapes (stepper) : <ol class="progression"><li class="est-fait">…</li><li aria-current="step">…</li><li>…</li></ol> */
.progression { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.progression li { counter-increment: etape; display: flex; flex-direction: column; gap: 8px; font-size: 0.875rem; font-weight: var(--gras); color: var(--encre-2); }
.progression li::before { content: ""; height: 6px; border-radius: 3px; background: var(--trait); }
.progression li.est-fait::before { background: var(--encre); }
.progression li[aria-current="step"]::before { background: var(--action); }
.progression li[aria-current="step"] { color: var(--encre); }
.progression li > span::before { content: counter(etape, decimal-leading-zero) " "; font-family: var(--police-donnees); }
.etapes { display: flex; gap: 6px; }
.etapes > span { flex: 1; height: 6px; border-radius: 3px; background: var(--trait); }
.etapes > span.faite { background: var(--encre); }

/* Onglets : <nav class="onglets"><a aria-current="page">…</a></nav> ou role="tablist" + aria-selected */
.onglets { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--trait); scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets > a, .onglets > button { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: var(--cible); padding: 0 14px; border: 0; background: none; font-weight: var(--gras); color: var(--encre-2); text-decoration: none; white-space: nowrap; }
.onglets > a:hover, .onglets > button:hover { color: var(--encre); }
.onglets > [aria-current="page"], .onglets > [aria-selected="true"] { color: var(--encre); }
.onglets > [aria-current="page"]::after, .onglets > [aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: var(--action); border-radius: 2px 2px 0 0; }
.onglets .n { font: var(--donnees-graisse) 0.875rem/1 var(--police-donnees); }

/* Tableaux */
.tableau-defilant { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--r-bloc); background: var(--surface); }
.tableau { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tableau th { text-align: left; padding: 12px 14px; font: var(--donnees-graisse) 0.8438rem/1.2 var(--police-donnees); letter-spacing: .02em; color: var(--encre-2); border-bottom: 1.5px solid var(--encre); white-space: nowrap; }
.tableau td { padding: 12px 14px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--surface-2); }
.tableau .nombre { text-align: right; font-family: var(--police-donnees); font-variant-numeric: tabular-nums; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: var(--e-6) 0 0; padding: 0; list-style: none; }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: var(--cible); height: var(--cible); padding: 0 12px; border: 1.5px solid var(--trait); border-radius: var(--r-bouton); font: 700 0.9375rem/1 var(--police-donnees); color: var(--encre); text-decoration: none; background: var(--surface); }
.pagination a:hover { border-color: var(--encre); }
.pagination [aria-current="page"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.pagination .ellipse { border: 0; background: none; }

/* États vides */
.etat-vide, .vide { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--e-8) var(--e-5); text-align: center; color: var(--encre-2); }
.etat-vide-icone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-bloc); background: var(--fond-2); color: var(--encre); }
.etat-vide-icone .ico { width: 30px; height: 30px; }
.etat-vide h2, .etat-vide h3 { color: var(--encre); font-size: 1.3125rem; }
.etat-vide p { max-width: 34em; }
.etat-vide .btn { margin-top: var(--e-2); }

/* Squelettes de chargement */
.squelette { display: block; border-radius: var(--r-petit); background: linear-gradient(90deg, var(--fond-2) 0%, var(--surface-2) 50%, var(--fond-2) 100%) 0 0 / 200% 100%; animation: squelette 1.3s ease-in-out infinite; }
.squelette-ligne { height: 14px; margin: 8px 0; }
.squelette-titre { height: 28px; width: 60%; }
.squelette-carte { height: 200px; border-radius: var(--ca-rayon); }
@keyframes squelette { to { background-position: -200% 0; } }
.htmx-request .indicateur, .htmx-request.indicateur { opacity: 1; }
.indicateur { opacity: 0; transition: opacity .2s; }

/* Liste de définitions (fiches, récapitulatifs) */
.liste-definitions { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.liste-definitions dt { color: var(--encre-2); font-weight: var(--gras); }
.liste-definitions dd { font-weight: var(--tres-gras); }

/* ---------- 16. Tiroir (bottom sheet) et fenêtre modale : <dialog> natif ---------- */
dialog.tiroir, dialog.modale { padding: 0; border: 0; max-width: none; max-height: none; color: var(--encre); background: var(--surface); box-shadow: var(--ombre-3); }
dialog.tiroir::backdrop, dialog.modale::backdrop { background: var(--voile); }
dialog.tiroir { position: fixed; inset: auto 0 0 0; width: 100%; max-height: 88dvh; margin: 0; border-radius: var(--r-tiroir) var(--r-tiroir) 0 0; padding-bottom: env(safe-area-inset-bottom); }
dialog.tiroir[open] { display: flex; flex-direction: column; animation: tiroir-entree .22s ease-out; }
.tiroir-poignee { display: grid; place-items: center; width: 100%; height: 28px; flex: none; border: 0; background: none; }
.tiroir-poignee::before { content: ""; width: 44px; height: 5px; border-radius: 3px; background: var(--trait-fort); }
.tiroir-tete, .modale-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 16px 12px; }
.modale-tete { padding: 18px 20px 12px; }
.tiroir-tete h2, .modale-tete h2 { font-size: 1.3125rem; }
.tiroir-corps, .modale-corps { padding: 0 16px 20px; overflow-y: auto; }
.modale-corps { padding: 0 20px 20px; }
.tiroir-pied, .modale-pied { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 14px 16px; border-top: 1px solid var(--trait); }
dialog.modale { width: min(560px, calc(100% - 32px)); margin: auto; border-radius: var(--r-bloc); }
dialog.modale[open] { animation: modale-entree .18s ease-out; }
@keyframes tiroir-entree { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes modale-entree { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 760px) { dialog.tiroir { inset: auto 0 0 auto; width: 440px; height: 100dvh; max-height: 100dvh; border-radius: var(--r-tiroir) 0 0 var(--r-tiroir); } dialog.tiroir .tiroir-poignee { display: none; } dialog.tiroir .tiroir-tete { padding-top: 20px; } }

/* ---------- 17. Pins et carte (Leaflet) ---------- */
/* Symbole (légendes, marqueurs simples) : ui.pin(type, taille) — trois dessins, celui du thème est affiché */
.pin-symbole { flex: none; overflow: visible; vertical-align: middle; }
.pin-symbole-offre { --pf: var(--pin-offre-fond); --pe: var(--pin-offre-encre); --pb: var(--pin-offre-bord); }
.pin-symbole-recherche { --pf: var(--pin-recherche-fond); --pe: var(--pin-recherche-encre); --pb: var(--pin-recherche-bord); }
.pin-symbole .p-fond { fill: var(--pf); stroke: var(--pb); }
.pin-symbole .p-encre { fill: var(--pe); }
.pin-symbole .p-trait { fill: none; stroke: var(--pe); }
.pin-symbole .p-bord { fill: none; stroke: var(--pb); }
.pin-symbole .p-sol { fill: var(--sol-c); }
.pin-symbole .ps-topo, .pin-symbole .ps-strates { display: none; }
:root[data-theme="topo"] .pin-symbole .ps-chantier, :root[data-theme="strates"] .pin-symbole .ps-chantier { display: none; }
:root[data-theme="topo"] .pin-symbole .ps-topo, :root[data-theme="strates"] .pin-symbole .ps-strates { display: inline; }

/* Étiquette de carte avec volume (L.divIcon, iconSize: null, className: 'pin-ancre') : ui.pin_etiquette(type, m3) */
.pin-ancre { width: 0; height: 0; }
.pin {
    position: absolute; left: 0; bottom: 8px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px 0 7px;
    border: 2px solid var(--pin-offre-bord); border-radius: var(--pin-rayon);
    background: var(--pin-offre-fond); color: var(--pin-offre-encre);
    font: 700 0.8125rem/1 var(--police-donnees); letter-spacing: -.02em; white-space: nowrap;
    box-shadow: var(--ombre-pin); cursor: pointer; transition: transform .12s;
}
.pin::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg) translate(-3px, -3px); background: inherit; border: inherit; border-width: 0 2px 2px 0; border-radius: 0; }
.pin .ico { width: 16px; height: 16px; }
.pin-recherche { background: var(--pin-recherche-fond); color: var(--pin-recherche-encre); border-color: var(--pin-recherche-bord); }
.pin-recherche .ico { color: var(--pin-recherche-bord); }
.pin-ancre:hover .pin, .pin.est-survole { transform: translateX(-50%) scale(1.12); z-index: 4; }
.pin.est-choisi { transform: translateX(-50%) scale(1.12); outline: 3px solid var(--pin-choisi-anneau); outline-offset: 2px; z-index: 5; }
.grappe { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--offre) 0 var(--p, 50%), var(--recherche) var(--p, 50%) 100%); box-shadow: var(--ombre-pin); cursor: pointer; }
.grappe span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--grappe-fond); color: var(--grappe-encre); font: 800 0.9375rem/1 var(--police-donnees); }
.tuiles-fond { filter: var(--carte-filtre); }
.tuiles-photo { filter: var(--carte-filtre-photo); }
.leaflet-container { background: var(--carte-fond); font-family: var(--police-texte); }
.leaflet-container .leaflet-control-attribution { background: var(--surface); color: var(--encre-2); font: var(--donnees-graisse) 0.6875rem/1.6 var(--police-donnees); padding: 0 6px; }
.leaflet-container .leaflet-control-attribution a { color: var(--encre-2); }
.ctrl { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-bouton); border: 1px solid var(--trait); background: var(--surface); color: var(--encre); box-shadow: var(--ombre-1); }
.ctrl:hover { border-color: var(--encre-2); }
.ctrl[aria-pressed="true"] { background: var(--encre); color: var(--fond); }
.avis-visiteur { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px; border-radius: var(--r-bouton); background: var(--sombre); color: var(--sombre-encre); font-weight: var(--gras); font-size: 0.875rem; line-height: 1.2; }
.avis-visiteur .ico { width: 15px; height: 15px; color: var(--action-sur-sombre); }

/* ---------- 18. Onglet « Thème » (pré-lancement, remplace « Versions du design ») ---------- */
/* Bureau : languette verticale au bord droit. Mobile : languette étroite (24 px) collée au bord droit, dans la marge
   de la page : elle ne recouvre plus ni les chevrons des cartes, ni le profil de sol, ni les choix d'inscription. */
.onglet-theme { position: fixed; right: 0; top: 38%; z-index: 800; }
.onglet-theme > summary { list-style: none; writing-mode: vertical-rl; transform: rotate(180deg); padding: 14px 9px; border-radius: 0 10px 10px 0; background: var(--sombre); color: var(--sombre-encre); font-weight: var(--tres-gras); font-size: 0.875rem; letter-spacing: .04em; cursor: pointer; box-shadow: var(--ombre-2); --focus: var(--focus-sur-sombre); }
.onglet-theme > summary::-webkit-details-marker { display: none; }
.onglet-theme > summary .ico { display: none; }
.onglet-theme-panneau { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); width: 260px; padding: 12px; border-radius: 14px; background: var(--clair-surface); color: var(--clair-encre); border: 1px solid var(--clair-trait); box-shadow: var(--ombre-3); }
.onglet-theme-panneau p { font-size: 0.875rem; color: var(--clair-encre-2); margin-bottom: 8px; }
.onglet-theme .choix-theme-options { display: grid; }
.onglet-theme .choix-theme button { width: 100%; padding-block: 6px; }
@media (max-width: 899px) {
    .onglet-theme { top: 46%; right: 0; }
    .onglet-theme > summary { writing-mode: horizontal-tb; transform: none; display: grid; place-items: center; width: 24px; height: 56px; padding: 0; border-radius: 8px 0 0 8px; border: 1px solid var(--sombre-trait); border-right: 0; box-shadow: var(--ombre-1); }
    .onglet-theme > summary .ico { display: block; width: 16px; height: 16px; color: var(--action-sur-sombre); }
    .onglet-theme-libelle { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .onglet-theme[open] > summary { box-shadow: 0 0 0 3px var(--clair-surface), var(--ombre-2); }
    .onglet-theme-panneau { right: calc(100% + 6px); top: 50%; bottom: auto; transform: translateY(-50%); width: min(280px, calc(100vw - 44px)); }
}
/* Téléphone en paysage : la languette ne gêne pas la barre du bas. */
@media (max-width: 899px) and (max-height: 500px) { .onglet-theme { top: 30%; } }

/* ---------- 19. Compatibilité (anciens noms de la charte « Jaune trax » : à supprimer en fin de lot) ---------- */
:root {
    --titre: var(--police-titre);
    --texte: var(--police-texte);
    --jaune: var(--action);
    --jaune-clair: var(--action-voile);
    --vert: var(--succes-texte);
    --vert-fonce: var(--succes-texte);
    --vert-clair: var(--succes-fond);
    --rouge: var(--danger);
    --rouge-texte: var(--danger-texte);
    --rouge-clair: var(--danger-fond);
    --encre-douce: var(--encre-2);
    --bordure: var(--trait);
    --bordure-champ: var(--trait-champ);
    --rayon: var(--r-bloc);
    --rayon-moyen: var(--r-moyen);
    --rayon-petit: var(--r-petit);
    --ombre-bouton: none;
    --hauteur-nav-bas: var(--h-nav-bas);
    --largeur-max: var(--conteneur);
}
.btn-jaune { background: var(--action); color: var(--action-encre); }
.btn-jaune:hover { background: var(--action-survol); color: var(--action-encre); }
.btn-encre, .btn-vert { background: var(--encre); color: var(--fond); }
.btn-encre:hover, .btn-vert:hover { background: var(--encre-2); color: var(--fond); }
.pleine-largeur { width: 100%; }

/* ---------- 20. Mouvement réduit, impression ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
    .entete, .nav-bas, .pied, .onglet-theme, .toasts, .lien-evitement { display: none !important; }
    body { background: #fff; color: #000; }
}

/* Bandeau non bloquant « Les conditions ont changé » (_composants/bandeau_cgu.html.twig, juridique) */
.bandeau-cgu { padding-top: var(--e-4); }
.bandeau-cgu-in {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-moyen);
    background: var(--info-fond); border-left: 4px solid var(--info); color: var(--encre); font-size: 15.5px; line-height: 1.5;
}
.bandeau-cgu-in > .ico { width: 22px; height: 22px; flex: none; color: var(--info-texte); }
.bandeau-cgu-in a:not(.btn) { color: var(--encre); font-weight: var(--tres-gras); }
.bandeau-cgu-titre { display: block; font-weight: var(--tres-gras); }
.bandeau-cgu-in > p { flex: 1 1 15rem; }
.bandeau-cgu-in > .btn { flex: none; margin-left: auto; }
@media print { .bandeau-cgu { display: none !important; } }