/* ==========================================================================
   ouestlamoinschere.fr : TOUT le CSS du site (convention PHP du brain).
   Tokens : design/maquettes/Systeme visuel.dc.html (piste « Service public »).
   Mobile d'abord : les maquettes ne décrivent aucun comportement mobile ;
   règles du brief §8 et §12 (burger, recherche toujours visible, sélecteur de
   carburant défilant, aucune grille plus large que l'écran à 360 px).
   ========================================================================== */

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/public-sans-latin-wght.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Polices de repli aux métriques de Public Sans (Arial ajustée) : le texte ne
   bouge pas quand la police arrive (CLS). Largeurs mesurées dans Chrome. */
@font-face {
    font-family: 'Public Sans Repli';
    font-weight: 400 600;
    src: local('Arial'), local('ArialMT');
    size-adjust: 102.42%;
    ascent-override: 92.76%;
    descent-override: 21.97%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Public Sans Repli';
    font-weight: 700 900;
    src: local('Arial Bold'), local('Arial-BoldMT');
    size-adjust: 100%;
    ascent-override: 95%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

:root {
    /* Couleurs de base (palette du système visuel) */
    --c-primaire: #1f4597;
    --c-primaire-fonce: #163473;
    --c-primaire-pale: #eaf0fa;
    --c-texte: #16191f;
    --c-texte-2: #2b313b;
    --c-texte-attenue: #5a6170;
    --c-decimale: #8b929e;
    --c-bordure: #e3e6eb;
    --c-bordure-forte: #c9ced6;
    --c-bordure-puce: #dde1e7;
    --c-filet: #eef0f3;
    --c-fond: #f4f6f8;
    --c-fond-tuile: #f7f8fa;
    --c-surface: #ffffff;
    --c-pied: #16191f;
    --c-pied-texte: #c3c8d1;

    /* Échelle de prix UNIQUE (brief 6.2) : seule source de ces couleurs */
    --c-moins-cher: #1d7a46;
    --c-moins-cher-fond: #e3f2e8;
    --c-moyenne: #5c4708;
    --c-moyenne-fond: #f1e5c2;
    --c-plus-cher: #b23a26;
    --c-plus-cher-fond: #f8e4df;

    /* Carburants : couleurs des pistolets (Charles, 07-10-2026), contraste AA avec leur texte */
    --carburant-gazole: #f5c400;      /* texte foncé */
    --carburant-e10: #1f7a3a;
    --carburant-sp95: #17652f;
    --carburant-sp98: #0f4d23;
    --carburant-e85: #1c5fbf;
    --carburant-gplc: #b8430f;

    /* Alerte fraîcheur, rupture, fermeture */
    --c-alerte: #8a3a12;
    --c-alerte-fond: #fdf0e6;
    --c-alerte-bordure: #e8c4a6;

    /* Typographie, formes */
    --police: 'Public Sans', 'Public Sans Repli', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --rayon: 12px;
    --rayon-m: 8px;
    --rayon-s: 4px;
    --ombre-legere: 0 1px 2px rgba(16, 24, 40, .12);
    --ombre-flottante: 0 4px 14px rgba(16, 24, 40, .12);
    --largeur: 1400px;
    --marge: 16px;
    --espace-sections: 32px;
}

@media (min-width: 768px) {
    :root { --marge: 24px; --espace-sections: 40px; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* L'attribut hidden doit l'emporter sur les display des composants (blocs par carburant) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--police);
    font-variant-numeric: tabular-nums;
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-texte);
    background: var(--c-fond);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(26px, 5vw, 34px); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
h3 { font-size: 18px; font-weight: 700; line-height: 1.3; }
a { color: var(--c-primaire); }
a:hover { color: var(--c-primaire-fonce); }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--c-primaire); outline-offset: 2px; }
.visuellement-cache {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lien-evitement { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--c-surface); border-radius: var(--rayon-m); }
.lien-evitement:focus { left: 8px; }
.attenue { color: var(--c-texte-attenue); }
.petit { font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   Mise en page
   -------------------------------------------------------------------------- */
.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.principal { display: flex; flex-direction: column; gap: var(--espace-sections); padding-top: 24px; padding-bottom: 8px; }
.pile { display: flex; flex-direction: column; gap: 14px; }
/* Grilles : jamais de largeur minimale fixe supérieure à l'écran (brief §12.1) */
.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.deux-colonnes { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); align-items: start; }
.bloc {
    background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: var(--rayon);
    padding: 18px var(--marge); display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
@media (min-width: 768px) { .bloc { padding: 20px 24px; } }
.titre-section { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.titre-section__droite { font-size: 13px; color: var(--c-texte-attenue); }
.plus { font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }

/* --------------------------------------------------------------------------
   En-tête : logo, recherche toujours visible, menu (burger sur mobile)
   -------------------------------------------------------------------------- */
.entete { background: var(--c-surface); border-bottom: 1px solid var(--c-bordure); position: relative; z-index: 20; }
.entete__ligne {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo burger" "recherche recherche";
    align-items: center; gap: 10px 12px; padding-top: 10px; padding-bottom: 10px;
}
.entete__logo { grid-area: logo; display: inline-flex; color: var(--c-texte); text-decoration: none; min-width: 0; }
.entete__logo svg { display: block; height: 28px; width: auto; }
.entete__recherche { grid-area: recherche; min-width: 0; }
.burger {
    grid-area: burger; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
    border: 1.5px solid var(--c-bordure-forte); border-radius: var(--rayon-m); background: var(--c-surface);
    font: 600 15px var(--police); color: var(--c-texte); cursor: pointer;
}
.burger__icone, .burger__icone::before, .burger__icone::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.burger__icone::before, .burger__icone::after { content: ''; position: absolute; left: 0; }
.burger__icone::before { top: -6px; }
.burger__icone::after { top: 6px; }
.nav { display: none; }
.nav.est-ouvert { display: block; grid-column: 1 / -1; }
.nav__liste { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; }
.nav__lien { display: block; padding: 12px 10px; border-radius: 6px; font-weight: 600; font-size: 16px; color: var(--c-texte); text-decoration: none; }
.nav__lien:hover { background: var(--c-fond); color: var(--c-texte); }
.nav__lien[aria-current] { background: var(--c-primaire-pale); color: var(--c-primaire); }

@media (min-width: 1024px) {
    .entete__ligne { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo recherche nav"; gap: 12px 28px; padding-top: 12px; padding-bottom: 12px; }
    .entete__logo svg { height: 32px; }
    .burger { display: none; }
    .nav, .nav.est-ouvert { display: block; grid-area: nav; grid-column: auto; }
    .nav__liste { flex-direction: row; gap: 2px; padding: 0; }
    .nav__lien { padding: 8px 12px; font-size: 15px; }
}

/* Recherche */
.recherche {
    display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 5px 0 12px;
    border: 1.5px solid var(--c-bordure-forte); border-radius: 10px; background: var(--c-surface);
}
.recherche:focus-within { border-color: var(--c-primaire); }
.recherche { position: relative; }
.suggestions {
    position: absolute; z-index: 30; top: calc(100% + 4px); left: -1.5px; right: -1.5px; margin: 0; padding: 4px; list-style: none;
    background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: 10px; box-shadow: var(--ombre-flottante);
}
.suggestions [role="option"] { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.suggestions [role="option"][aria-selected="true"], .suggestions [role="option"]:hover { background: var(--c-primaire-pale); }
.suggestions__libelle { font-weight: 600; font-size: 15px; }
.suggestions__detail { font-size: 13px; color: var(--c-texte-attenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche__icone { flex: none; width: 16px; height: 16px; color: var(--c-texte-attenue); }
.recherche__champ { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 16px var(--police); color: var(--c-texte); }
.recherche__champ::placeholder { color: var(--c-texte-attenue); }
.recherche--grande { height: 54px; max-width: 720px; }
.bouton-autour {
    flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 7px;
    background: var(--c-primaire); color: #fff; font: 700 14px var(--police); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.bouton-autour:hover { background: var(--c-primaire-fonce); color: #fff; }
.bouton-autour__icone { flex: none; }
/* Petit écran : icône seule, texte gardé pour les lecteurs d'écran */
@media (max-width: 400px) { .bouton-autour__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* --------------------------------------------------------------------------
   Fil d'Ariane, pied de page
   -------------------------------------------------------------------------- */
.ariane__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; color: var(--c-texte-attenue); }
.ariane__liste li + li::before { content: '›'; margin-right: 6px; }
.ariane a { color: var(--c-texte-attenue); text-decoration: none; }
.ariane a:hover { color: var(--c-primaire); text-decoration: underline; }
.ariane [aria-current] { color: var(--c-texte); font-weight: 600; }

.pied { background: var(--c-pied); color: var(--c-pied-texte); margin-top: 56px; }
.pied a { color: var(--c-pied-texte); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__colonnes { display: grid; gap: 24px 28px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); padding-top: 36px; padding-bottom: 24px; font-size: 14px; line-height: 1.9; }
.pied__titre { font-weight: 700; color: #fff; margin-bottom: 4px; }
.pied__colonnes p { line-height: 1.5; }
.pied__bas { border-top: 1px solid var(--c-texte-2); padding-top: 18px; padding-bottom: 24px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* --------------------------------------------------------------------------
   Prix et échelle de couleur (brief 6.2 et 6.3)
   -------------------------------------------------------------------------- */
.prix { font-weight: 800; line-height: 1; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prix .d3 { color: var(--c-decimale); }
.prix__euro { font-size: .6em; font-weight: 600; margin-left: .12em; }
.prix--xl { font-size: 34px; }
.prix--l { font-size: 26px; }
.prix--m { font-size: 22px; }
.prix--s { font-size: 18px; }
.prix--sans-valeur { font-size: 15px; font-weight: 600; color: var(--c-texte-attenue); letter-spacing: 0; }

/* Écart à la moyenne de référence : couleur + flèche + texte, jamais la couleur seule */
.ecart {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ecart--moins-cher { background: var(--c-moins-cher); color: #fff; }
.ecart--moyenne { background: var(--c-moyenne-fond); color: var(--c-moyenne); }
.ecart--plus-cher { background: var(--c-plus-cher); color: #fff; }
/* Variante des listes et tableaux : badge clair, mêmes couleurs que la tendance de l'accueil */
.ecart--texte { padding: 2px 8px; font-size: 13px; }
.ecart--texte.ecart--moins-cher { background: var(--c-moins-cher-fond); color: var(--c-moins-cher); }
.ecart--texte.ecart--moyenne { background: var(--c-moyenne-fond); color: var(--c-moyenne); }
.ecart--texte.ecart--plus-cher { background: var(--c-plus-cher-fond); color: var(--c-plus-cher); }

/* Enseigne : badge texte neutre, identique pour toutes (aucun logo) */
.enseigne {
    display: inline-block; padding: 2px 7px; border-radius: var(--rayon-s); border: 1px solid var(--c-bordure-puce);
    background: var(--c-filet); color: var(--c-texte-2); font-size: 12px; font-weight: 700; white-space: nowrap;
}

/* Fraîcheur d'un prix */
.fraicheur { font-size: 13px; color: var(--c-texte-attenue); }
.fraicheur::before { content: '● '; color: var(--c-moins-cher); }
.fraicheur--perime { display: inline-block; padding: 2px 8px; border-radius: var(--rayon-s); background: var(--c-alerte-fond); color: var(--c-alerte); font-size: 12px; font-weight: 700; }
.fraicheur--perime::before { content: '⚠ '; color: inherit; }

/* Tampon de mise à jour */
.tampon {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 10px;
    background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: var(--rayon-m); font-size: 13px; color: var(--c-texte-attenue);
}
.tampon::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c-moins-cher); }

/* --------------------------------------------------------------------------
   Bloc factuel daté (brief 9.2)
   -------------------------------------------------------------------------- */
.factuel { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.factuel__surtitre { font-size: 13px; font-weight: 700; color: var(--c-primaire); letter-spacing: .06em; text-transform: uppercase; }
.factuel__texte { font-size: 18px; line-height: 1.55; text-wrap: pretty; }
@media (min-width: 768px) { .factuel__texte { font-size: 19px; } }

/* --------------------------------------------------------------------------
   Puces, segments, liens-puces, boutons, accordéon
   -------------------------------------------------------------------------- */
/* Sélecteur de carburant : une ligne qui défile horizontalement sur mobile (brief §8) */
.puces { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px; margin: -2px; }
.puce {
    flex: none; min-height: 40px; padding: 0 14px; border-radius: var(--rayon-m); border: 1.5px solid var(--c-bordure-forte);
    background: var(--c-surface); color: var(--c-texte); font: 600 14px var(--police); cursor: pointer;
}
.puce:hover { border-color: var(--c-primaire); }
.puce[aria-pressed="true"] { background: var(--c-primaire); border-color: var(--c-primaire); color: #fff; }

.segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--rayon-m); background: var(--c-filet); }
.segment__option { height: 34px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--c-texte-attenue); font: 500 13px var(--police); cursor: pointer; }
.segment__option[aria-pressed="true"] { background: var(--c-surface); color: var(--c-texte); font-weight: 600; box-shadow: var(--ombre-legere); }

.liens-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.lien-puce {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 12px; border: 1px solid var(--c-bordure-puce); border-radius: var(--rayon-m);
    background: var(--c-surface); color: var(--c-texte); font-size: 14px; font-weight: 600; text-decoration: none;
}
.lien-puce:hover { border-color: var(--c-primaire); color: var(--c-primaire); }
.lien-puce__detail { font-weight: 500; color: var(--c-texte-attenue); }

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
    border: 1.5px solid var(--c-primaire); border-radius: var(--rayon-m); background: var(--c-primaire); color: #fff;
    font: 700 15px var(--police); text-decoration: none; cursor: pointer;
}
.bouton:hover { background: var(--c-primaire-fonce); border-color: var(--c-primaire-fonce); color: #fff; }
.bouton--secondaire { background: var(--c-surface); color: var(--c-primaire); }
.bouton--secondaire:hover { background: var(--c-primaire-pale); color: var(--c-primaire-fonce); }
.bouton--petit { min-height: 36px; padding: 0 12px; font-size: 14px; }
.bouton svg { flex: none; }

.accordeon { border-bottom: 1px solid var(--c-bordure); }
.accordeon summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; font-weight: 700; cursor: pointer; list-style: none; }
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after { content: '+'; font-weight: 800; color: var(--c-primaire); }
.accordeon[open] summary::after { content: '−'; }
.accordeon__contenu { padding: 0 0 14px; color: var(--c-texte-2); }

/* Bandeaux (rupture, station fermée, géolocalisation refusée) */
.bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--c-alerte-bordure); background: var(--c-alerte-fond); color: var(--c-alerte); }
.bandeau strong { font-weight: 800; }

/* --------------------------------------------------------------------------
   Carte de station (listes)
   -------------------------------------------------------------------------- */
.carte-station {
    background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: var(--rayon); padding: 16px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px;
}
.carte-station:hover { border-color: var(--c-primaire); }
.carte-station__identite { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.carte-station__entete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--c-texte-attenue); }
.carte-station__nom { font-weight: 700; font-size: 16px; color: var(--c-texte); text-decoration: none; }
.carte-station__nom:hover { color: var(--c-primaire); text-decoration: underline; }
.carte-station__adresse { font-size: 13px; color: var(--c-texte-attenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-station__prix { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.carte-station__pied { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.carte-station__actions { display: flex; gap: 6px; }
.carte-station__actions a { font-weight: 700; text-decoration: none; padding: 8px 10px; }
.carte-station__actions .itineraire { border: 1.5px solid var(--c-primaire); border-radius: 6px; padding: 8px 12px; }

/* --------------------------------------------------------------------------
   Tableaux (prix par carburant, classements) : cartes empilées sur mobile,
   aucune colonne tronquée (brief §8)
   -------------------------------------------------------------------------- */
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tableau caption { text-align: left; }
.tableau th { font-size: 12px; font-weight: 600; color: var(--c-texte-attenue); text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--c-bordure); }
.tableau td { padding: 12px 8px; border-bottom: 1px solid var(--c-filet); vertical-align: middle; }
.tableau .nombre { text-align: right; white-space: nowrap; }
.tableau tbody tr:hover { background: #f7f9fb; }
@media (max-width: 599px) {
    .tableau--cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tableau--cartes, .tableau--cartes tbody, .tableau--cartes tr, .tableau--cartes td { display: block; width: 100%; }
    .tableau--cartes tr { padding: 10px 0; border-bottom: 1px solid var(--c-bordure); }
    .tableau--cartes td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
    .tableau--cartes td::before { content: attr(data-libelle); color: var(--c-texte-attenue); font-size: 13px; text-align: left; }
    .tableau--cartes td:first-child { font-weight: 700; font-size: 15px; }
    .tableau--cartes td:first-child::before { content: none; }
}

/* --------------------------------------------------------------------------
   Courbes (App\Services\Svg) : tracé étiré, étiquettes en HTML
   -------------------------------------------------------------------------- */
.courbe { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.courbe__legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--c-texte-attenue); align-items: center; }
.courbe__cle { display: inline-flex; align-items: center; gap: 6px; }
.courbe__cle::before { content: ''; width: 18px; height: 0; border-top: 3px solid var(--c-primaire); }
.courbe__cle--reference::before { border-top: 2px dashed var(--c-decimale); }
.courbe__resume { margin-left: auto; font-weight: 700; color: var(--c-texte); font-variant-numeric: tabular-nums; }
.courbe__zone { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; }
.courbe__zone svg { width: 100%; height: 190px; display: block; overflow: visible; }
.courbe__grille { stroke: var(--c-bordure); stroke-width: 1; vector-effect: non-scaling-stroke; }
.courbe__aire { fill: var(--c-primaire); opacity: .08; }
.courbe__trait { fill: none; stroke: var(--c-primaire); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.courbe__reference { fill: none; stroke: var(--c-decimale); stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.courbe__etiquettes { position: relative; height: 190px; font-size: 12px; color: var(--c-texte-attenue); font-variant-numeric: tabular-nums; }
.courbe__etiquettes span { position: absolute; left: 0; transform: translateY(-50%); }
.courbe__dates { font-size: 12px; color: var(--c-texte-attenue); padding-right: 54px; }

/* --------------------------------------------------------------------------
   Fiche station
   -------------------------------------------------------------------------- */
.station-entete { gap: 12px; }
.station-entete__infos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 15px; color: var(--c-texte-2); }
.station-entete__ouvert { color: var(--c-moins-cher); font-weight: 600; }
.station-entete__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.badge-route { padding: 2px 8px; border-radius: var(--rayon-s); background: var(--c-primaire-pale); color: var(--c-primaire); font-size: 12px; font-weight: 700; }
.tuiles-prix { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.tuile-prix { background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: var(--rayon); padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; min-height: 150px; }
.tuile-prix__ecart { line-height: 1; }
.tuile-prix--absent { background: var(--c-fond-tuile); }
.tuile-prix__carburant { font-weight: 700; font-size: 15px; }
.tuile-prix__rupture { font-weight: 800; color: var(--c-alerte); }
.tuile-prix__absent { color: var(--c-texte-attenue); font-weight: 600; }
.jauge { display: flex; flex-direction: column; gap: 6px; }
.jauge__libelle { font-size: 14px; }
.jauge__barre { height: 8px; border-radius: 999px; background: var(--c-filet); overflow: hidden; }
.jauge__barre span { display: block; height: 100%; background: var(--c-moins-cher); border-radius: 999px; }
.services { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.service { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--rayon-m); font-size: 14px; font-weight: 600; }
.service--present { background: var(--c-moins-cher-fond); color: var(--c-moins-cher); }
.service--absent { background: var(--c-filet); color: var(--c-texte-attenue); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--c-bordure-forte); }
.horaires { border-collapse: collapse; font-size: 14px; width: 100%; max-width: 420px; }
.horaires__titre { text-align: left; font-weight: 700; padding-bottom: 6px; }
.horaires th { text-align: left; font-weight: 600; padding: 5px 12px 5px 0; }
.horaires td { padding: 5px 0; color: var(--c-texte-2); }

/* --------------------------------------------------------------------------
   Fiches de zone (département, ville)
   -------------------------------------------------------------------------- */
.classement { list-style: none; margin: 0; padding: 0; }
.classement__ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-filet); }
.classement__ligne:last-child { border-bottom: 0; }
.classement__rang { width: 26px; height: 26px; border-radius: 50%; background: var(--c-filet); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.classement__nom { display: flex; flex-direction: column; min-width: 0; font-weight: 600; font-size: 15px; }
.classement__nom a { overflow: hidden; text-overflow: ellipsis; }
.classement__ligne:not(:has(.classement__rang)) { grid-template-columns: minmax(0, 1fr) auto; }
.classement__prix { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.comparaison { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.comparaison__tuile { background: var(--c-fond-tuile); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.chiffres { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); margin: 0; }
.chiffres div { background: var(--c-fond-tuile); border-radius: 10px; padding: 12px 14px; }
.chiffres dt { font-size: 13px; color: var(--c-texte-attenue); }
.chiffres dd { margin: 4px 0 0; font-size: 26px; font-weight: 800; }
.barres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.barres__ligne { display: grid; grid-template-columns: minmax(100px, 150px) minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; font-size: 14px; }
@media (max-width: 599px) { .barres__ligne { grid-template-columns: minmax(0, 1fr) auto; } .barres__piste { grid-column: 1 / -1; grid-row: 2; } }
.barres__nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barres__piste { height: 18px; background: var(--c-filet); border-radius: var(--rayon-s); overflow: hidden; }
.barres__barre { display: block; height: 100%; border-radius: var(--rayon-s); }
.barres__barre--moins-cher { background: var(--c-moins-cher); }
.barres__barre--moyenne { background: var(--c-moyenne-fond); }
.barres__barre--plus-cher { background: var(--c-plus-cher); }
.barres__valeur { display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap; }
.barres__ligne--choisie .barres__nom { color: var(--c-primaire); }
.barres__ligne--choisie .barres__piste { outline: 2px solid var(--c-primaire); outline-offset: 1px; }

/* Enseignes (Phase 3) : badge cliquable, types de distributeur, départements */
a.enseigne--lien { text-decoration: none; }
a.enseigne--lien:hover, a.enseigne--lien:focus-visible { border-color: var(--c-primaire); color: var(--c-primaire); }
.groupes-enseignes { display: flex; flex-direction: column; gap: 18px; }
.groupes-enseignes__groupe { display: flex; flex-direction: column; gap: 6px; }
.groupes-enseignes__entete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.groupes-enseignes__entete h3 { font-size: 16px; }
.groupes-enseignes .liens-puces { gap: 6px; }
.grille-departements { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); font-size: 14px; }
.grille-departements li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--c-filet); }
.grille-departements__code { color: var(--c-texte-attenue); font-variant-numeric: tabular-nums; }
.grille-departements__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grille-departements__valeur { white-space: nowrap; font-variant-numeric: tabular-nums; }
.liste-stations { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; font-weight: 400; margin-top: 2px; }

/* --------------------------------------------------------------------------
   Listes (Par département, Par ville) et pages de texte
   -------------------------------------------------------------------------- */
.chapeau { font-size: 17px; line-height: 1.55; color: var(--c-texte-2); max-width: 860px; }
.accordeons { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); align-items: start; }
.accordeon { background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: var(--rayon-m); }
.accordeon__titre { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 600; }
.accordeon__titre::-webkit-details-marker { display: none; }
.accordeon__titre::after { content: "▾"; color: var(--c-texte-attenue); transition: transform .15s; }
.accordeon[open] .accordeon__titre::after { transform: rotate(180deg); }
.accordeon__nom { flex: 1; min-width: 0; }
.accordeon__valeur { display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap; font-weight: 400; }
.accordeon__liste { list-style: none; margin: 0; padding: 0 14px 10px; display: flex; flex-direction: column; }
.accordeon__liste li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--c-filet); font-size: 14px; }
.accordeon__liste li > span { display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap; }
.tuiles-villes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.tuile-ville { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: var(--rayon-m); color: inherit; text-decoration: none; }
.tuile-ville:hover { border-color: var(--c-bordure-forte); box-shadow: var(--ombre-legere); }
.tuile-ville__nom { font-weight: 700; font-size: 16px; color: var(--c-primaire); }
.tuile-ville__prix { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.lettres { display: flex; flex-wrap: wrap; gap: 4px; }
.lettres__lettre { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--rayon-m); background: var(--c-surface); border: 1px solid var(--c-bordure); font-weight: 600; text-decoration: none; }
.lettres__lettre--vide { color: var(--c-bordure-forte); background: none; }
.colonnes-liens { list-style: none; margin: 0; padding: 0; columns: 4 200px; column-gap: 24px; font-size: 14px; }
.colonnes-liens li { break-inside: avoid; padding: 3px 0; }
.colonnes-liens--larges { columns: 3 260px; }
.texte { max-width: 760px; display: flex; flex-direction: column; gap: 14px; line-height: 1.6; }
.texte h2 { margin-top: 18px; font-size: 22px; }
.texte ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.texte .tableau { max-width: 480px; }
[id^="lettre-"], .texte h2 { scroll-margin-top: 80px; }

/* --------------------------------------------------------------------------
   Accueil : carte, liste « autour de », panneau glissant (mobile)
   -------------------------------------------------------------------------- */
.barre-carte { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.barre-carte .puces { flex: 1 1 auto; min-width: 0; }
.filtres { position: relative; }
.filtres > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.filtres > summary::-webkit-details-marker { display: none; }
.filtres__panneau {
    position: absolute; z-index: 25; right: 0; top: calc(100% + 6px); min-width: 220px; padding: 10px 14px;
    background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: 10px; box-shadow: var(--ombre-flottante);
    display: flex; flex-direction: column; gap: 8px;
}
.filtres__choix { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.carte-zone {
    position: relative; overflow: hidden; border: 1px solid var(--c-bordure); border-radius: var(--rayon);
    height: calc(100svh - 150px); min-height: 480px; background: #e8ecef;
}
/* .carte-zone > .carte : plus précis que .maplibregl-map (position: relative), dont la feuille arrive après */
.carte-zone > .carte { position: absolute; inset: 0; }
.carte__sans-js { padding: 24px; }
.carte__message {
    position: absolute; z-index: 5; top: 10px; left: 10px; right: 54px; max-width: 520px; margin: 0; padding: 10px 14px;
    background: var(--c-alerte-fond); color: var(--c-alerte); border: 1px solid var(--c-alerte-bordure); border-radius: 10px; font-size: 14px;
}
.carte__legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--c-bordure-forte); }
.pastille--moins-cher { background: var(--c-moins-cher); }
.pastille--moyenne { background: #c79a1e; }
.pastille--plus-cher { background: var(--c-plus-cher); }
.point-position { width: 16px; height: 16px; border-radius: 50%; background: var(--c-primaire); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(31, 69, 151, .2); }
.bulle { display: flex; flex-direction: column; gap: 4px; font: 14px var(--police); }
.bulle__nom { font-weight: 700; }
.bulle__prix { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 2px 0 0; }

/* Panneau : glissant sur mobile (trois positions), colonne fixe sur ordinateur */
.feuille {
    position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 92%;
    background: var(--c-surface); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 18px rgba(16, 24, 40, .16);
    display: flex; flex-direction: column; transition: transform .25s ease;
}
.feuille[data-etat="replie"] { transform: translateY(calc(100% - 118px)); }
.feuille[data-etat="mi"] { transform: translateY(48%); }
.feuille[data-etat="plein"] { transform: translateY(0); }
.feuille__poignee { flex: none; display: grid; place-items: center; height: 26px; border: 0; background: none; cursor: grab; touch-action: none; }
.feuille__barre { width: 44px; height: 5px; border-radius: 3px; background: var(--c-bordure-forte); }
.feuille__contenu { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.feuille__entete { flex: none; padding: 0 16px 10px; border-bottom: 1px solid var(--c-filet); display: flex; flex-direction: column; gap: 6px; }
.feuille__entete h2 { font-size: 17px; }
.feuille__reglages { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.feuille__reglages select { margin-left: 6px; height: 34px; padding: 0 8px; border: 1px solid var(--c-bordure-forte); border-radius: 6px; font: 14px var(--police); background: var(--c-surface); }
.feuille__liste { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0 16px 16px; list-style: none; overscroll-behavior: contain; }
.feuille__vide { padding: 16px 0; }
.mini-station { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--c-filet); }
.mini-station p { margin: 0; }
.mini-station__haut, .mini-station__bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mini-station__nom { font-weight: 700; }
.mini-station__prix { display: flex; gap: 10px; align-items: baseline; }
.mini-station__bas { justify-content: flex-start; gap: 14px; font-size: 14px; }
.mini-station__bas > :first-child { margin-right: auto; }
.lien-bouton { padding: 0; border: 0; background: none; color: var(--c-primaire); font: inherit; text-decoration: underline; cursor: pointer; }
@media (min-width: 1024px) {
    .carte-zone { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr) auto; height: 680px; overflow: visible; border: 0; background: none; }
    .carte-zone > .carte { position: relative; inset: auto; grid-row: 1; grid-column: 1; border: 1px solid var(--c-bordure); border-radius: var(--rayon) 0 0 var(--rayon); overflow: hidden; }
    .feuille { position: relative; grid-row: 1; grid-column: 2; height: auto; transform: none !important; border: 1px solid var(--c-bordure); border-left: 0; border-radius: 0 var(--rayon) var(--rayon) 0; box-shadow: none; }
    .feuille__poignee { display: none; }
    .feuille__entete { padding-top: 14px; }
}
.accordeons--une-colonne { grid-template-columns: 1fr; max-width: 860px; }
.accordeon__texte { margin: 0; padding: 0 14px 14px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Recherche et formulaire de contact
   -------------------------------------------------------------------------- */
.resultats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.resultats li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--c-filet); }
.resultats a { font-weight: 600; }
.formulaire { display: flex; flex-direction: column; gap: 16px; }
.formulaire__station { padding: 10px 14px; border-radius: var(--rayon-m); background: var(--c-primaire-pale); }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ__libelle { font-weight: 600; font-size: 14px; }
.champ__saisie {
    width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--c-bordure-forte); border-radius: var(--rayon-m);
    background: var(--c-surface); font: 16px var(--police); color: var(--c-texte);
}
.champ__saisie:focus { outline: 2px solid var(--c-primaire); outline-offset: 1px; border-color: var(--c-primaire); }
.champ__saisie[aria-invalid="true"] { border-color: var(--c-plus-cher); }
textarea.champ__saisie { resize: vertical; line-height: 1.5; }
.champ__erreur { color: var(--c-plus-cher); font-size: 14px; }
.confirmation { padding: 14px 16px; border-radius: 10px; background: var(--c-moins-cher-fond); color: var(--c-moins-cher); }

/* --------------------------------------------------------------------------
   Page « en construction » et pages d'erreur
   -------------------------------------------------------------------------- */
.construction { max-width: 40rem; margin: 0 auto; padding: 12vh 16px 4rem; }
.construction__marque { margin: 0 0 2rem; }
.construction__marque img { display: block; max-width: 100%; height: auto; }
.construction h1 { margin: 0 0 1rem; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.2; letter-spacing: -.02em; }
.construction p { color: var(--c-texte-2); }
.construction__note { margin-top: 2rem; font-size: .9rem; color: var(--c-texte-attenue) !important; }

/* --------------------------------------------------------------------------
   Accueil, disposition du 07-10-2026 : colonnes égales, badges, atouts,
   formulaire de contact
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .deux-colonnes--egales { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.deux-colonnes--egales > [hidden] { display: none; }

.badge-carburant {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700;
    line-height: 1.4; color: #fff; white-space: nowrap; background: var(--c-texte-attenue);
}
.badge-carburant--gazole { background: var(--carburant-gazole); color: var(--c-texte); }
.badge-carburant--e10 { background: var(--carburant-e10); }
.badge-carburant--sp95 { background: var(--carburant-sp95); }
.badge-carburant--sp98 { background: var(--carburant-sp98); }
.badge-carburant--e85 { background: var(--carburant-e85); }
.badge-carburant--gplc { background: var(--carburant-gplc); }

.tendance {
    display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; border-radius: 999px;
    font-size: 13px; font-weight: 700; white-space: nowrap;
}
.tendance--baisse { background: var(--c-moins-cher-fond); color: var(--c-moins-cher); }
.tendance--hausse { background: var(--c-plus-cher-fond); color: var(--c-plus-cher); }
.tendance--stable { background: var(--c-filet); color: var(--c-texte-2); }

.texte--large { max-width: none; }

/* Atouts : 3 par ligne sur ordinateur, 2 sur tablette, 1 sur mobile (brief §12.1) */
.atouts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
@media (min-width: 1024px) { .atouts { grid-template-columns: repeat(3, 1fr); } }
.atout {
    display: flex; flex-direction: column; gap: 8px; padding: 18px 20px;
    background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: var(--rayon);
}
.atout__icone {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 10px; background: var(--c-primaire-pale); color: var(--c-primaire);
}
.atout__titre { font-size: 16px; font-weight: 700; }
.atout__texte { font-size: 14px; color: var(--c-texte-attenue); line-height: 1.5; }

.formulaire__ligne { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.formulaire__pied { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.formulaire__pied .petit { flex: 1 1 260px; }
/* --------------------------------------------------------------------------
   Retours du 07-10-2026 (2) : puces de carburant en couleur, filtres au-dessus
   de la carte, boutons icônes de la liste, questions fréquentes (maquette)
   -------------------------------------------------------------------------- */
/* Puces de carburant : bordure de la couleur du carburant, couleur pleine une fois choisie */
.puce[data-choix-carburant] { border-width: 2px; }
.puce[data-choix-carburant="gazole"] { border-color: var(--carburant-gazole); }
.puce[data-choix-carburant="e10"] { border-color: var(--carburant-e10); }
.puce[data-choix-carburant="sp95"] { border-color: var(--carburant-sp95); }
.puce[data-choix-carburant="sp98"] { border-color: var(--carburant-sp98); }
.puce[data-choix-carburant="e85"] { border-color: var(--carburant-e85); }
.puce[data-choix-carburant="gplc"] { border-color: var(--carburant-gplc); }
.puce[data-choix-carburant][aria-pressed="true"] { color: #fff; }
.puce[data-choix-carburant="gazole"][aria-pressed="true"] { background: var(--carburant-gazole); color: var(--c-texte); }
.puce[data-choix-carburant="e10"][aria-pressed="true"] { background: var(--carburant-e10); }
.puce[data-choix-carburant="sp95"][aria-pressed="true"] { background: var(--carburant-sp95); }
.puce[data-choix-carburant="sp98"][aria-pressed="true"] { background: var(--carburant-sp98); }
.puce[data-choix-carburant="e85"][aria-pressed="true"] { background: var(--carburant-e85); }
.puce[data-choix-carburant="gplc"][aria-pressed="true"] { background: var(--carburant-gplc); }
.puce[data-choix-carburant]:hover { box-shadow: 0 0 0 2px var(--c-filet); }

/* Filtres : au-dessus de la carte, à droite (le panneau s'ouvre vers la gauche) */
.barre-filtres { display: flex; justify-content: flex-end; margin-bottom: calc(10px - var(--espace-sections)); position: relative; z-index: 21; }

/* Boutons icônes (« Voir sur la carte », « Itinéraire ») */
.bouton-icone {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none;
    border: 1.5px solid var(--c-bordure-forte); border-radius: var(--rayon-m); background: var(--c-surface);
    color: var(--c-primaire); cursor: pointer; text-decoration: none;
}
.bouton-icone:hover { border-color: var(--c-primaire); background: var(--c-primaire-pale); }
.bouton-icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Questions fréquentes : une carte, un filet entre les questions, une seule ouverte (details name="faq") */
.faq { background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: var(--rayon); padding: 4px 20px; }
.faq__item + .faq__item { border-top: 1px solid var(--c-filet); }
.faq__question {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0;
    font-weight: 700; font-size: 15px; cursor: pointer; list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { content: '▼'; flex: none; width: 18px; text-align: right; font-size: 12px; color: var(--c-texte-attenue); }
.faq__item[open] > .faq__question::after { content: '▲'; }
.faq__reponse { padding: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--c-texte-2); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Retours du 07-10-2026 (3) : sous-titre, puces élargies, date à côté des filtres
   -------------------------------------------------------------------------- */
.titres-accueil { display: flex; flex-direction: column; gap: 8px; }
/* Même espace au-dessus et au-dessous de la phrase « France métropolitaine » */
.pile--sections { gap: var(--espace-sections); }
.titres-accueil__sous-titre { font-size: clamp(18px, 3vw, 22px); font-weight: 700; color: var(--c-texte-2); }

/* Puces de carburant de l'accueil : ~50 % plus larges (marge intérieure 32 px au lieu de 14) */
.puce[data-choix-carburant] { padding: 0 32px; min-height: 44px; } /* partout comme sur l'accueil (retour de Charles) */

/* Date de mise à jour à gauche des filtres, même hauteur que le bouton */
.barre-filtres { align-items: center; gap: 10px 20px; flex-wrap: wrap; justify-content: space-between; }
.barre-filtres__droite { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.barre-filtres .tampon { align-self: auto; min-height: 40px; padding: 0 14px; font-size: 14px; border: 1.5px solid var(--c-bordure-forte); border-radius: var(--rayon-m); }

/* --------------------------------------------------------------------------
   Retours du 07-10-2026 (4) : graphique « Top enseignes » (barres aux couleurs
   des carburants, même échelle pour toutes, à partir de 0 €)
   -------------------------------------------------------------------------- */
.graphe-enseignes { display: grid; gap: 24px 48px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.graphe-enseignes__groupe { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.graphe-enseignes__nom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; }
.graphe-enseignes__barres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.graphe-enseignes__ligne { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; color: var(--c-texte-attenue); }
.graphe-enseignes__ligne--choisi { color: var(--c-texte); font-weight: 700; }
.graphe-enseignes__piste { height: 10px; border-radius: 999px; background: var(--c-filet); overflow: hidden; }
.graphe-enseignes__barre { display: block; height: 100%; border-radius: 999px; }
.graphe-enseignes__barre--gazole { background: var(--carburant-gazole); }
.graphe-enseignes__barre--e10 { background: var(--carburant-e10); }
.graphe-enseignes__barre--sp95 { background: var(--carburant-sp95); }
.graphe-enseignes__barre--sp98 { background: var(--carburant-sp98); }
.graphe-enseignes__barre--e85 { background: var(--carburant-e85); }
.graphe-enseignes__barre--gplc { background: var(--carburant-gplc); }
.graphe-enseignes__prix .prix { font-size: 14px; }
.graphe-enseignes__libelle { white-space: nowrap; }

/* Cartes SVG (Phase 3, App\Services\Cartes) : contours ADMIN EXPRESS, couleur par carburant
   selon data-carburant-carte (suivi par app.js), échelle de prix unique (6.2) */
.carte-svg { display: block; width: 100%; height: auto; max-height: 560px; }
.carte-svg path { fill: #e4e7ec; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.carte-svg a path:hover, .carte-svg a:focus-visible path { stroke: var(--c-texte); stroke-width: 2; }
.carte-svg .carte-svg__voisin { fill: #eef0f3; }
.carte-svg .carte-svg__cadre { fill: var(--c-primaire-pale); stroke: var(--c-primaire); stroke-width: 2; }
.carte-svg circle { fill: #9aa1ad; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.carte-svg .carte-svg__ici { fill: var(--c-primaire); stroke-width: 3; }
.carte-svg .carte-svg__densite--1 { fill: #dbe5f5; }
.carte-svg .carte-svg__densite--2 { fill: #a9c1e8; }
.carte-svg .carte-svg__densite--3 { fill: #6f95d6; }
.carte-svg .carte-svg__densite--4 { fill: #3b67b8; }
.carte-svg .carte-svg__densite--5 { fill: #1f4597; }
.carte-svg[data-carburant-carte="gazole"] [data-gazole="moins-cher"] { fill: var(--c-moins-cher); }
.carte-svg[data-carburant-carte="gazole"] [data-gazole="moyenne"] { fill: var(--c-moyenne-fond); }
.carte-svg[data-carburant-carte="gazole"] [data-gazole="plus-cher"] { fill: var(--c-plus-cher); }
.carte-svg[data-carburant-carte="e10"] [data-e10="moins-cher"] { fill: var(--c-moins-cher); }
.carte-svg[data-carburant-carte="e10"] [data-e10="moyenne"] { fill: var(--c-moyenne-fond); }
.carte-svg[data-carburant-carte="e10"] [data-e10="plus-cher"] { fill: var(--c-plus-cher); }
.carte-svg[data-carburant-carte="sp95"] [data-sp95="moins-cher"] { fill: var(--c-moins-cher); }
.carte-svg[data-carburant-carte="sp95"] [data-sp95="moyenne"] { fill: var(--c-moyenne-fond); }
.carte-svg[data-carburant-carte="sp95"] [data-sp95="plus-cher"] { fill: var(--c-plus-cher); }
.carte-svg[data-carburant-carte="sp98"] [data-sp98="moins-cher"] { fill: var(--c-moins-cher); }
.carte-svg[data-carburant-carte="sp98"] [data-sp98="moyenne"] { fill: var(--c-moyenne-fond); }
.carte-svg[data-carburant-carte="sp98"] [data-sp98="plus-cher"] { fill: var(--c-plus-cher); }
.carte-svg[data-carburant-carte="e85"] [data-e85="moins-cher"] { fill: var(--c-moins-cher); }
.carte-svg[data-carburant-carte="e85"] [data-e85="moyenne"] { fill: var(--c-moyenne-fond); }
.carte-svg[data-carburant-carte="e85"] [data-e85="plus-cher"] { fill: var(--c-plus-cher); }
.carte-svg[data-carburant-carte="gplc"] [data-gplc="moins-cher"] { fill: var(--c-moins-cher); }
.carte-svg[data-carburant-carte="gplc"] [data-gplc="moyenne"] { fill: var(--c-moyenne-fond); }
.carte-svg[data-carburant-carte="gplc"] [data-gplc="plus-cher"] { fill: var(--c-plus-cher); }
.legende-carte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; margin-top: 10px; }
.legende-carte__case { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.deux-colonnes > [hidden] { display: none; }
.legende-carte__case.carte-svg__densite--1 { background: #dbe5f5; }
.legende-carte__case.carte-svg__densite--2 { background: #a9c1e8; }
.legende-carte__case.carte-svg__densite--3 { background: #6f95d6; }
.legende-carte__case.carte-svg__densite--4 { background: #3b67b8; }
.legende-carte__case.carte-svg__densite--5 { background: #1f4597; }
.carte-etroite { max-width: 640px; margin: 0 auto; }

/* Analyses (Phase 4) */
.tuiles-barometre { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.tuile-barometre { background: var(--c-fond-tuile); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.tuile-barometre__valeur { font-size: 24px; font-weight: 800; }
.cartes-analyses { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.carte-analyse h3 a { color: var(--c-texte); text-decoration: none; }
.carte-analyse h3 a:hover { text-decoration: underline; }
.liste-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liste-liens li { display: flex; flex-direction: column; gap: 2px; }
.texte blockquote { margin: 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--c-primaire); color: var(--c-texte-2); }
.texte table { margin: 6px 0; }
.texte .bloc-courbe { margin: 6px 0; }
.bloc-inconnu { color: var(--c-plus-cher); font-weight: 700; }

/* Back-office (/admin/, Phase 5) : charte du site, version sobre */
.admin-entete { background: #fff; border-bottom: 1px solid var(--c-bordure); }
.admin-entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.admin-entete__marque { font-weight: 800; color: var(--c-texte); text-decoration: none; }
.admin-entete__marque span { color: var(--c-primaire); font-weight: 600; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-bottom: 10px; font-size: 14px; }
.admin-nav a { text-decoration: none; color: var(--c-texte-2); padding: 4px 0; border-bottom: 2px solid transparent; }
.admin-nav a[aria-current="page"] { color: var(--c-primaire); border-bottom-color: var(--c-primaire); font-weight: 700; }
.admin-principal { display: flex; flex-direction: column; gap: 20px; }
.admin-etroit { max-width: 520px; margin: 24px auto; width: 100%; }
.admin-formulaire { display: flex; flex-direction: column; gap: 14px; }
.admin-formulaire label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.admin-formulaire input:not([type="checkbox"]), .admin-formulaire select, .admin-formulaire textarea,
.admin-ligne input, .admin-ligne select {
    font: inherit; font-weight: 400; padding: 9px 11px; border: 1px solid var(--c-bordure-forte); border-radius: var(--rayon-s); background: #fff; color: var(--c-texte);
}
.admin-formulaire textarea { min-height: 360px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; line-height: 1.5; }
.admin-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-flash { padding: 10px 14px; border-radius: var(--rayon-m); background: var(--c-moins-cher-fond); color: var(--c-moins-cher); font-weight: 600; }
.admin-flash--erreur { background: var(--c-plus-cher-fond); color: var(--c-plus-cher); }
.admin-qrcode { width: 200px; margin: 12px 0; }
.admin-secret { display: inline-block; padding: 6px 10px; background: var(--c-filet); border-radius: var(--rayon-s); letter-spacing: .05em; }
.admin-etapes { display: flex; flex-direction: column; gap: 12px; padding-left: 20px; }
.admin-chiffres { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.admin-statut--echec { color: var(--c-plus-cher); font-weight: 700; }
.admin-statut--succes { color: var(--c-moins-cher); font-weight: 700; }
.admin-apercu { border: 2px dashed var(--c-bordure-forte); border-radius: var(--rayon-m); padding: 16px; background: var(--c-fond); }
.admin-journal pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; max-width: 360px; }
.bouton--secondaire { background: #fff; color: var(--c-primaire); border: 1.5px solid var(--c-primaire); }
.bouton--secondaire:hover { background: var(--c-primaire-pale); color: var(--c-primaire); }
.bouton--danger { background: var(--c-plus-cher); border-color: var(--c-plus-cher); }

/* Contact : formulaire et présentation de l'agence */
.contact { align-items: start; }
.agence { display: flex; flex-direction: column; gap: 12px; }
.agence__reseaux { display: flex; flex-wrap: wrap; gap: 8px 16px; font-weight: 700; }

/* Carte d'appel (lien vers une autre rubrique) */
.appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.appel > div { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.pile > .recherche { max-width: 640px; }

/* Infobulle des cartes SVG (app.js) et en-têtes de tableau triables */
.infobulle-carte { position: fixed; z-index: 50; pointer-events: none; padding: 6px 10px; border-radius: var(--rayon-s); background: var(--c-texte); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.infobulle-carte[hidden] { display: none; }
.tri-colonne { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; }
.tri-colonne::after { content: '↕'; opacity: .4; }
th[aria-sort="ascending"] .tri-colonne::after { content: '↑'; opacity: 1; }
th[aria-sort="descending"] .tri-colonne::after { content: '↓'; opacity: 1; }
.tri-colonne:focus-visible { outline: 2px solid var(--c-primaire); outline-offset: 2px; }

/* Accordéons en liste dans une carte (« Par région », maquette « Par département ») */
.accordeons--liste { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.accordeons--liste .accordeon__titre::after { content: "▾"; }
.accordeons--liste .accordeon { background: none; border: 0; border-bottom: 1px solid var(--c-filet); border-radius: 0; }
.accordeons--liste .accordeon:last-child { border-bottom: 0; }
.accordeons--liste .accordeon__titre { padding: 12px 0; }
.accordeons--liste .accordeon__valeur .prix { font-weight: 800; }
.accordeons--liste .accordeon__liste { padding: 0 0 12px 14px; }
.accordeons--liste .accordeon__liste li { border-top: 0; padding: 6px 0; }

/* Points cliquables des mini-cartes */
.carte-svg a circle { cursor: pointer; }
.carte-svg a:hover circle, .carte-svg a:focus-visible circle { stroke: var(--c-texte); stroke-width: 2.5; }

/* Liste de liens avec flèche (maquette « Analyses », classements permanents) */
.liste-fleches { list-style: none; margin: 0; padding: 0; }
.liste-fleches li { border-top: 1px solid var(--c-filet); }
.liste-fleches a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; color: var(--c-texte); text-decoration: none; font-weight: 600; font-size: 15px; }
.liste-fleches a:hover span:first-child { text-decoration: underline; }
.liste-fleches a span:last-child { color: var(--c-primaire); }

/* Phrase d'introduction en carte : pleine largeur */
.bloc.factuel { max-width: none; }

/* En-tête : menus déroulants « Par région », « Par carburant » (details/summary,
   fermés par app.js au clic ailleurs ou avec Échap) */
.nav__deroulant details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.nav__deroulant details > summary::-webkit-details-marker { display: none; }
.nav__deroulant details > summary::after { content: '▾'; font-size: 12px; color: var(--c-texte-attenue); }
.nav__sous { list-style: none; margin: 0; padding: 4px 0 8px 18px; display: flex; flex-direction: column; }
.nav__sous a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--c-texte); text-decoration: none; font-size: 15px; }
.nav__sous a:hover { background: var(--c-fond); }
@media (min-width: 1024px) {
    .entete__recherche { max-width: 480px; }
    .nav__deroulant { position: relative; }
    .nav__sous { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 240px; max-height: 70vh; overflow-y: auto; padding: 6px;
        background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: var(--rayon-m); box-shadow: 0 10px 30px rgba(15, 23, 42, .12); }
}

.agence__reseau { display: inline-flex; width: 40px; height: 40px; border-radius: 10px; transition: transform .15s; }
.agence__reseau svg { width: 40px; height: 40px; display: block; }
.agence__reseau:hover, .agence__reseau:focus-visible { transform: translateY(-2px); }
.agence__reseaux { gap: 12px; }

.appel--image { padding: 0; overflow: hidden; align-items: stretch; flex-wrap: nowrap; }
.appel--image > div { padding: 24px; justify-content: center; }
.appel__image { display: block; width: min(42%, 480px); height: auto; object-fit: cover; }
@media (max-width: 700px) { .appel--image { flex-direction: column; } .appel__image { width: 100%; max-height: 220px; } }
.pile > [hidden] { display: none; }

/* Contact : carte de l'agence aérée ; pont de survol sous les menus déroulants */
.agence { gap: 20px; padding: 28px; }
.agence h2 { margin-bottom: 4px; }
.agence p { margin: 0; line-height: 1.6; }
@media (min-width: 1024px) { .nav__sous::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } }

/* Carte d'appel : emplacement de l'image en attendant le visuel */
.appel__image--attente { display: grid; place-items: center; min-height: 200px; background: linear-gradient(135deg, var(--c-primaire-pale), #dbe5f5); color: var(--c-primaire); }

/* Carte d'appel sombre (« Par ville », modèle fourni par Charles) */
.appel-sombre {
    position: relative; overflow: hidden; display: grid; gap: 28px; align-items: center;
    grid-template-columns: minmax(0, 1fr); padding: 36px 28px; border-radius: 22px; color: #fff;
    background:
        radial-gradient(circle at 12% 0%, rgba(77, 124, 222, .55), transparent 45%),
        radial-gradient(circle at 95% 100%, rgba(245, 196, 0, .22), transparent 40%),
        radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(135deg, #0f1e44, #16295c);
}
.appel-sombre__texte { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.appel-sombre h2 { color: #fff; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -.02em; }
.appel-sombre__texte > p { color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 1.55; }
.appel-sombre__boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.appel-sombre__bouton { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 12px; background: #fff; color: var(--c-primaire-fonce); font-weight: 700; text-decoration: none; }
.appel-sombre__bouton:hover { background: var(--c-primaire-pale); color: var(--c-primaire-fonce); }
.appel-sombre__bouton--contour { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.appel-sombre__bouton--contour:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.appel-sombre__atouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); font-weight: 600; font-size: 15px; }
.appel-sombre__atouts li { display: flex; align-items: center; gap: 10px; }
.appel-sombre__coche { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .16); flex: none; }
.appel-sombre__visuel { position: relative; min-height: 300px; }
.appel-sombre__carte {
    position: absolute; display: flex; flex-direction: column; gap: 6px; width: 240px; padding: 18px; border-radius: 14px;
    background: #fff; color: var(--c-texte); box-shadow: 0 20px 45px rgba(5, 12, 35, .45);
}
.appel-sombre__carte p { margin: 0; }
.appel-sombre__nom { font-weight: 800; font-size: 16px; }
.appel-sombre__carte--1 { top: 0; left: 4%; transform: rotate(-7deg); }
.appel-sombre__carte--2 { top: 38px; right: 2%; transform: rotate(5deg); }
.appel-sombre__carte--3 { bottom: 0; left: 26%; transform: rotate(-2deg); border: 2px solid var(--carburant-gazole); }
@media (min-width: 900px) {
    .appel-sombre { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: 52px 56px; }
    .appel-sombre__visuel { min-height: 340px; }
}
@media (max-width: 899px) { .appel-sombre__visuel { display: none; } }
@media (min-width: 900px) {
    .appel-sombre__texte { max-width: 640px; }
    .appel-sombre__atouts { grid-template-columns: repeat(2, max-content); }
}

/* Fiche station : tuiles de prix sur deux colonnes sur mobile */
@media (max-width: 599px) {
    .tuiles-prix { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tuile-prix { min-height: 0; padding: 14px; }
}

/* Back-office : barre latérale (logo, modules, profil), onglets, cartes de chiffres */
.admin-logo { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; }
.admin-logo svg { width: 190px; height: auto; display: block; }
.admin-logo span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-texte-attenue); padding-left: 2px; }
.admin--connecte { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
.admin-barre { background: var(--c-surface); border-bottom: 1px solid var(--c-bordure); }
.admin-barre__menu > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; }
.admin-barre__menu > summary::-webkit-details-marker { display: none; }
.admin-barre__bascule { width: 22px; height: 14px; border-top: 2px solid var(--c-texte); border-bottom: 2px solid var(--c-texte); position: relative; }
.admin-barre__bascule::after { content: ''; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid var(--c-texte); }
.admin-barre__corps { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 12px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; padding: 0; font-size: 15px; }
.admin-nav__groupe { margin: 14px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-texte-attenue); }
.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 10px; color: var(--c-texte-2); text-decoration: none; font-weight: 600; }
.admin-nav a svg { flex: none; color: var(--c-texte-attenue); }
.admin-nav a:hover { background: var(--c-fond); color: var(--c-texte); }
.admin-nav a[aria-current="page"] { background: var(--c-primaire-pale); color: var(--c-primaire); border: 0; font-weight: 700; }
.admin-nav a[aria-current="page"] svg { color: var(--c-primaire); }
.admin-moi { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 4px; border-top: 1px solid var(--c-filet); }
.admin-moi__profil { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 12px; color: var(--c-texte); text-decoration: none; }
.admin-moi__profil:hover, .admin-moi__profil[aria-current="page"] { background: var(--c-fond); }
.admin-moi__nom { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.admin-moi__nom strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.admin-moi__nom span { font-size: 13px; color: var(--c-texte-attenue); }
.admin-moi__liens { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 6px; font-size: 13px; }
.admin-moi__liens a, .admin-moi__liens button { all: unset; cursor: pointer; color: var(--c-texte-2); font-weight: 600; }
.admin-moi__liens a:hover, .admin-moi__liens button:hover { color: var(--c-primaire); text-decoration: underline; }
.admin-avatar { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    background: var(--c-primaire); color: #fff; font-weight: 800; font-size: 15px; }
.admin-avatar--grand { width: 96px; height: 96px; font-size: 34px; }
.admin--connecte .admin-principal { padding: 24px 16px 48px; width: 100%; max-width: none; }
@media (min-width: 1024px) {
    .admin--connecte { grid-template-columns: 264px minmax(0, 1fr); }
    .admin-barre { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--c-bordure); }
    .admin-barre__menu { height: 100%; }
    .admin-barre__menu > summary { cursor: default; padding: 22px 24px 8px; }
    .admin-barre__bascule { display: none; }
    .admin-barre__corps { min-height: calc(100vh - 92px); }
    .admin-moi { margin-top: auto; }
    .admin--connecte .admin-principal { padding: 32px 40px 64px; }
}
.admin-onglets { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--c-bordure); }
.admin-onglets a { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--c-texte-2); text-decoration: none; font-weight: 600; }
.admin-onglets a:hover { color: var(--c-texte); }
.admin-onglets a[aria-current="page"] { color: var(--c-primaire); border-bottom-color: var(--c-primaire); font-weight: 700; }
.admin-chiffres { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); margin: 0; }
.admin-chiffres > div { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: var(--rayon); }
.admin-chiffres dt { font-size: 13px; font-weight: 600; color: var(--c-texte-attenue); }
.admin-chiffres dd { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.admin-chiffres dd a { color: var(--c-primaire); text-decoration: none; }
.admin-chiffres .admin-chiffres__detail { font-size: 13px; font-weight: 500; color: var(--c-texte-attenue); letter-spacing: 0; }
.admin-chiffres .admin-chiffres__detail a { font-weight: 600; }
.admin-pastilles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.admin-pastilles a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--c-bordure); border-radius: 10px; color: var(--c-texte); text-decoration: none; font-size: 14px; font-weight: 600; }
.admin-pastilles a:hover { border-color: var(--c-primaire); background: var(--c-fond); }
.admin-pastilles__code { color: var(--c-primaire); font-weight: 800; margin-right: 2px; }
.admin-pastilles__nombre { flex: none; min-width: 28px; padding: 2px 8px; border-radius: 999px; background: var(--c-plus-cher-fond); color: var(--c-plus-cher); font-size: 13px; font-weight: 800; text-align: center; }
.admin-grille-2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.admin-profil__photo { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.admin-etat { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--c-filet); color: var(--c-texte-2); }
.admin-etat--actif { background: var(--c-moins-cher-fond); color: var(--c-moins-cher); }
.admin-etat--inactif { background: var(--c-plus-cher-fond); color: var(--c-plus-cher); }
.admin-liste { list-style: none; margin: 0; padding: 0; }
.admin-liste li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--c-filet); }
.admin-ligne-actuelle td, .admin-ligne-actuelle th { font-weight: 700; }
.admin-principal > .bloc { width: 100%; }
.admin-etat--attention { background: #fff3d1; color: #7a5200; }
.admin-formulaire input[type="file"] { max-width: 100%; min-width: 0; }
.admin-encart { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--rayon-m); background: #fff3d1; color: #5c3d00; }

/* Back-office : éditeur visuel (editeur.js), FAQ, variables */
.editeur { display: flex; flex-direction: column; border: 1px solid var(--c-bordure-forte); border-radius: var(--rayon-m); background: #fff; overflow: hidden; }
.editeur__entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 14px; background: var(--c-fond); border-bottom: 1px solid var(--c-bordure); }
.editeur__libelle { font-weight: 700; font-size: 14px; }
.editeur__modes { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--c-filet); }
.editeur__mode { all: unset; cursor: pointer; padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--c-texte-2); }
.editeur__mode[aria-pressed="true"] { background: #fff; color: var(--c-primaire); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.editeur__mode:focus-visible { outline: 2px solid var(--c-primaire); }
.editeur__outils { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--c-bordure); position: sticky; top: 0; z-index: 2; background: #fff; }
.editeur__outils[hidden] { display: none; }
.editeur__outils button { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--c-texte-2); }
.editeur__outils button:hover { background: var(--c-fond); color: var(--c-primaire); }
.editeur__outils button:focus-visible { outline: 2px solid var(--c-primaire); }
.editeur__choix-bloc { margin-left: auto; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 8px; border: 1px solid var(--c-bordure); border-radius: 8px; background: #fff; color: var(--c-primaire); }
.editeur__zone { min-height: 380px; max-height: 70vh; overflow-y: auto; padding: 18px 22px; outline: none; font-weight: 400; max-width: none; }
.editeur__zone:focus { box-shadow: inset 0 0 0 2px var(--c-primaire-pale); }
.editeur__zone > :first-child { margin-top: 0; }
.editeur__zone blockquote { margin: 12px 0; padding: 4px 16px; border-left: 3px solid var(--c-primaire); color: var(--c-texte-2); }
.editeur__bloc { display: inline-block; padding: 1px 8px; margin: 0 2px; border-radius: 6px; background: var(--c-primaire-pale); color: var(--c-primaire); font: 600 13px ui-monospace, SFMono-Regular, Consolas, monospace; user-select: all; }
.editeur__bloc--seul { display: block; margin: 12px 0; padding: 10px 12px; border: 1px dashed var(--c-primaire); }
.admin-formulaire .editeur__source { border: 0; border-radius: 0; min-height: 380px; }
.editeur__source[hidden], .editeur__zone[hidden] { display: none; }
.admin-faq { display: flex; flex-direction: column; gap: 10px; }
.admin-formulaire .admin-faq textarea { min-height: 0; font-family: inherit; font-size: 15px; }
.admin-variables { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.admin-variables code { color: var(--c-primaire); font-weight: 700; }

/* Back-office : module SEO */
.admin-seo { display: flex; flex-direction: column; gap: 12px; }
.admin-seo label, .admin-seo-og label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.admin-formulaire .admin-seo textarea, .admin-formulaire .admin-seo-og textarea { min-height: 0; font-family: inherit; font-size: 15px; }
.admin-compteur { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 12px; color: var(--c-texte-attenue); }
.admin-seo-og { border-top: 1px solid var(--c-filet); padding: 10px 0; }
.admin-seo-og summary { cursor: pointer; padding: 4px 0; }
.admin-seo-og .admin-formulaire { padding: 10px 0 4px; }
.admin-case { flex-direction: row !important; align-items: center; gap: 10px !important; font-weight: 600; }
.admin-case input { width: 18px; height: 18px; accent-color: var(--c-primaire); }
.admin-actions-fixes { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(to top, var(--c-fond) 70%, transparent); z-index: 3; }
/* Back-office : actions en 50/50, SEO (variables, compteur, aperçu) */
.admin-grille-actions { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.admin-action { display: flex; flex-direction: column; gap: 12px; }
.admin-action > p { color: var(--c-texte-2); line-height: 1.55; }
.admin-action > form { margin-top: auto; }
.admin-variables-seo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.admin-variable { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--c-bordure); background: #fff; font-size: 13px; color: var(--c-texte-2); }
.admin-variable code { color: var(--c-primaire); font-weight: 700; }
.admin-variable:hover, .admin-variable:focus-visible { border-color: var(--c-primaire); background: var(--c-primaire-pale); }
.admin-seo__grille { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .admin-seo__grille { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.admin-seo__champs { display: flex; flex-direction: column; gap: 14px; }
.admin-compteur__barre { flex: none; width: 120px; height: 6px; border-radius: 999px; background: var(--c-filet); overflow: hidden; }
.admin-compteur__barre span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--c-texte-attenue); transition: width .15s; }
.admin-compteur--bon .admin-compteur__barre span { background: var(--c-moins-cher); }
.admin-compteur--moyen .admin-compteur__barre span { background: #d99a00; }
.admin-compteur--mauvais .admin-compteur__barre span { background: var(--c-plus-cher); }
.admin-compteur--bon .admin-compteur__texte { color: var(--c-moins-cher); }
.admin-compteur--mauvais .admin-compteur__texte { color: var(--c-plus-cher); }
.admin-serp { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border: 1px solid var(--c-bordure); border-radius: 12px; background: #fff; font-family: Arial, sans-serif; }
.admin-serp::before { content: 'Aperçu dans Google (valeurs réelles)'; font: 700 11px var(--police); letter-spacing: .06em; text-transform: uppercase; color: var(--c-texte-attenue); margin-bottom: 6px; }
.admin-serp__url { font-size: 13px; color: #202124; }
.admin-serp__titre { font-size: 19px; line-height: 1.3; color: #1a0dab; }
.admin-serp__description { font-size: 14px; line-height: 1.55; color: #4d5156; }

/* Back-office : FAQ à glisser-déposer */
.admin-faq-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.admin-faq__barre { display: flex; align-items: center; gap: 10px; }
.admin-faq__poignee { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--c-texte-attenue); cursor: grab; touch-action: none; }
.admin-faq__poignee:hover { background: var(--c-fond); color: var(--c-primaire); }
.admin-faq__numero { font-weight: 800; font-size: 14px; }
.admin-faq__boutons { margin-left: auto; display: flex; gap: 4px; }
.admin-icone { all: unset; cursor: pointer; padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--c-texte-2); border: 1px solid var(--c-bordure); background: #fff; }
.admin-icone:hover, .admin-icone:focus-visible { border-color: var(--c-primaire); color: var(--c-primaire); }
.admin-icone--danger:hover, .admin-icone--danger:focus-visible { border-color: var(--c-plus-cher); color: var(--c-plus-cher); }
.admin-faq.est-deplace { opacity: .5; outline: 2px dashed var(--c-primaire); }
.admin-faq label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.admin-action .admin-ligne input { flex: 1 1 240px; min-width: 0; }

/* Back-office : enseignes à classer, sections repliées */
.admin-replie > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.admin-replie[open] > summary { margin-bottom: 14px; }
.admin-enseignes select { max-width: 240px; }
.admin-enseignes input[type="text"] { width: 160px; }
/* Back-office : aperçu de l'import des enseignes */
.admin-import__commentaire { max-width: 520px; color: var(--c-texte-2); word-break: break-word; }
.admin-import td:first-child { width: 1%; white-space: nowrap; }

/* Courbes : repères de l'axe horizontal (trimestres, mois ou semaines), prix au survol ou au toucher */
.courbe__trace { position: relative; }
.courbe__repere { stroke: var(--c-bordure); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.courbe__point { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--c-primaire);
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .35); opacity: 0; transition: opacity .12s; pointer-events: none; }
.courbe__point.est-actif { opacity: 1; }
.courbe__axe { position: relative; height: 24px; }
.courbe__date { all: unset; position: absolute; top: 0; transform: translateX(-50%); padding: 3px 5px; border-radius: 6px; font-size: 12px;
    color: var(--c-texte-attenue); white-space: nowrap; cursor: default; font-variant-numeric: tabular-nums; }
.courbe__date--debut { transform: translateX(-5px); }
.courbe__date--fin { transform: translateX(calc(-100% + 5px)); }
.courbe__date:hover, .courbe__date:focus-visible, .courbe__date.est-actif { color: var(--c-texte); background: var(--c-fond); }
.courbe__date:focus-visible { outline: 2px solid var(--c-primaire); }
.courbe__bulle { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5; padding: 6px 10px; border-radius: 8px;
    background: var(--c-texte); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.courbe__date--debut .courbe__bulle, .courbe__date--gauche .courbe__bulle { left: 0; transform: none; }
.courbe__date--fin .courbe__bulle, .courbe__date--droite .courbe__bulle { left: auto; right: 0; transform: none; }
/* Bulle hors du flux tant qu'elle est fermée : pas de défilement horizontal sur mobile */
.courbe__bulle { display: none; }
.courbe__date:hover .courbe__bulle, .courbe__date:focus-visible .courbe__bulle, .courbe__date.est-actif .courbe__bulle { display: block; opacity: 1; }
@media (max-width: 599px) { .courbe__date--mineure { display: none; } }
.courbe__date--masquee { visibility: hidden; } /* chevaucherait une date voisine (app.js) */
/* Carte étroite (deux colonnes) : une date sur deux, selon la largeur de la courbe elle-même */
.courbe { container-type: inline-size; }
@container (max-width: 760px) { .courbe__date--mineure { display: none; } }

/* --------------------------------------------------------------------------
   Mobile (audit du 07-10-2026)
   -------------------------------------------------------------------------- */
/* Périodes des courbes : libellés courts sur petit écran, jamais sur deux lignes */
.segment__court { display: none; }
.segment__option { white-space: nowrap; }
@media (max-width: 599px) {
    .segment__long { display: none; }
    .segment__court { display: inline; }
    .titre-section > .segment { width: 100%; }
    .titre-section > .segment .segment__option { flex: 1; padding-left: 6px; padding-right: 6px; }
}
/* Courbes : colonne des prix plus étroite, la courbe gagne de la largeur */
@media (max-width: 599px) {
    .courbe__zone { grid-template-columns: minmax(0, 1fr) 38px; gap: 4px; }
    .courbe__zone svg, .courbe__etiquettes { height: 170px; }
    .courbe__etiquettes { font-size: 11px; }
    .courbe__dates { padding-right: 42px; }
    .courbe__resume { margin-left: 0; width: 100%; }
}
/* Tableaux en cartes : rang en pastille à côté du nom, nom à gauche, tri en puces */
@media (max-width: 767px) {
    .tableau--cartes tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
    .tableau--cartes tbody td { grid-column: 1 / -1; }
    .tableau--cartes td:not([data-libelle]) { text-align: left; justify-content: flex-start; }
    .tableau--cartes td:not([data-libelle])::before { content: none; }
    .tableau--cartes td[data-libelle="Rang"] { grid-column: 1; display: inline-grid; place-items: center; width: auto; min-width: 30px; height: 30px; padding: 0 6px;
        border-radius: 999px; background: var(--c-fond); font-weight: 800; font-size: 13px; color: var(--c-texte-2); }
    .tableau--cartes td[data-libelle="Rang"]::before { content: none; }
    .tableau--cartes td[data-libelle="Rang"] + td { grid-column: 2; font-weight: 700; font-size: 15px; }
    .tableau--cartes thead:has(.tri-colonne) { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; margin-bottom: 4px; }
    .tableau--cartes thead:has(.tri-colonne) tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 10px; border-bottom: 1px solid var(--c-bordure); }
    .tableau--cartes thead:has(.tri-colonne) tr::before { content: 'Trier par'; font-size: 13px; color: var(--c-texte-attenue); margin-right: 2px; }
    .tableau--cartes thead:has(.tri-colonne) th { display: none; padding: 0; border: 0; }
    .tableau--cartes thead:has(.tri-colonne) th:has(.tri-colonne) { display: inline-flex; }
    .tableau--cartes .tri-colonne { padding: 6px 12px; border: 1px solid var(--c-bordure); border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--c-surface); }
    .tableau--cartes th[aria-sort="ascending"] .tri-colonne, .tableau--cartes th[aria-sort="descending"] .tri-colonne { border-color: var(--c-primaire); color: var(--c-primaire); background: var(--c-primaire-pale); }
}
/* Plan du site */
.plan__liens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.plan__liens a { text-decoration: none; }
.plan__liens a:hover { text-decoration: underline; }
.plan__colonnes { display: grid; gap: 18px 28px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); align-items: start; }
.plan__groupe h3 { font-size: 16px; margin-bottom: 8px; }
.plan__repli > summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.plan__repli[open] > summary { margin-bottom: 8px; }
/* Back-office : messagerie façon boîte mail */
.boite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1100px) { .boite { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); } }
.boite__liste, .boite__lecture { background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: var(--rayon); overflow: hidden; }
.boite__lecture { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; min-height: 300px; }
@media (max-width: 1099px) { .boite--lecture .boite__liste { display: none; } .boite:not(.boite--lecture) .boite__lecture { display: none; } }
@media (min-width: 1100px) { .boite__retour { display: none; } .boite__liste { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } }
.boite__dossiers { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--c-bordure); background: var(--c-fond); }
.boite__dossiers a { flex: 1; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--c-texte-2); font-weight: 600; font-size: 14px; text-align: center; }
.boite__dossiers a[aria-current="page"] { background: var(--c-surface); color: var(--c-primaire); box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
.boite__compte { color: var(--c-texte-attenue); font-weight: 500; }
.boite__non-lus { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--c-primaire); color: #fff; font-size: 12px; }
.boite__messages { list-style: none; margin: 0; padding: 0; }
.boite__ligne { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--c-filet); color: var(--c-texte); text-decoration: none; border-left: 3px solid transparent; }
.boite__ligne:hover { background: var(--c-fond); }
.boite__ligne--ouverte { background: var(--c-primaire-pale); border-left-color: var(--c-primaire); }
.boite__ligne--non-lu .boite__nom, .boite__ligne--non-lu .boite__objet { font-weight: 800; }
.boite__ligne--non-lu .boite__nom::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--c-primaire); vertical-align: middle; }
.boite__haut { display: flex; justify-content: space-between; gap: 10px; }
.boite__nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boite__date { flex: none; font-size: 12px; color: var(--c-texte-attenue); }
.boite__objet { font-size: 14px; color: var(--c-texte-2); }
.boite__repondu { color: var(--c-moins-cher); font-weight: 700; }
.boite__extrait { font-size: 13px; color: var(--c-texte-attenue); }
.boite__vide { padding: 24px 16px; }
.boite__retour { font-weight: 600; text-decoration: none; }
.boite__entete { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--c-filet); }
.boite__entete h2 { font-size: 20px; }
.boite__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.boite__corps { line-height: 1.6; white-space: normal; }
.boite__reponse { padding: 12px 16px; border-left: 3px solid var(--c-moins-cher); background: var(--c-fond); border-radius: 0 10px 10px 0; display: flex; flex-direction: column; gap: 6px; }
.boite__reponse--echec { border-left-color: var(--c-plus-cher); }
.admin-formulaire.boite__repondre textarea { min-height: 200px; font-family: inherit; font-size: 15px; }
.admin-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 24px; }
.admin-cases .admin-case code { font-weight: 400; font-size: .85em; }
.admin-og-apercu { display: block; width: 100%; max-width: 600px; height: auto; border: 1px solid var(--c-bordure, #dde1e7); border-radius: 8px; }

/* Analyses et pages : colonnes côte à côte (« :::colonnes … :::fin », App\Services\Analyses\Markdown) */
.colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; align-items: start; }
.colonnes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.colonnes--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.colonnes--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.colonnes__colonne { display: flex; flex-direction: column; gap: 14px; min-width: 0; overflow-x: auto; }
.colonnes__colonne > * { margin-top: 0; margin-bottom: 0; }
.colonnes .tableau { max-width: none; width: 100%; }
@media (max-width: 767px) { .colonnes, .colonnes--3, .colonnes--2-1, .colonnes--1-2 { grid-template-columns: minmax(0, 1fr); } }
/* Étude : texte à 760 px pour la lecture, colonnes sur toute la largeur */
/* Analyses (études, baromètre) : texte, tableaux et colonnes sur toute la largeur de la carte */
.texte--analyse { max-width: none; }
.texte--analyse .tableau { max-width: none; }
.texte--analyse h1 { font-size: 30px; margin-top: 18px; }
.texte--analyse h3 { margin-top: 10px; }
/* Éditeur : colonnes visibles */
.editeur__zone .colonnes { padding: 6px; border-radius: 8px; background: var(--c-fond); }
.editeur__zone .colonnes__colonne { min-height: 64px; padding: 8px 10px; border: 1px dashed var(--c-bordure-forte); border-radius: 6px; background: #fff; overflow: visible; }
.editeur__choix-colonnes { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 8px; border: 1px solid var(--c-bordure); border-radius: 8px; background: #fff; color: var(--c-texte-2); }
.editeur__outils .editeur__choix-colonnes, .editeur__outils .editeur__choix-bloc { width: auto; max-width: 100%; }
.page-libre--chapeau > h1 + p { font-size: 17px; line-height: 1.55; color: var(--c-texte-2); max-width: 860px; }
.editeur__titre-outil { font: 800 13px/1 var(--police, inherit); letter-spacing: -.02em; }