/* =========================================================================
   MARSEILLE MOBILITÉ 2040 — feuille de style du site
   Refonte du 26/08/2026. La charte est celle du livre blanc : Barlow,
   bleu nuit #16212B, liseré multicolore en séparateur — passé à DOUZE
   traits comme la couverture du document (huit lignes lourdes, trois RER,
   le téléphérique en douzième), pastilles de statut au dessin du document
   (texte et bord colorés, fond teinté), palette officielle des lignes.
   Les polices sont AUTO-HÉBERGÉES (assets/fonts/) : aucune requête vers
   un serveur tiers, et les mentions légales peuvent le dire simplement.
   ========================================================================= */

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/barlow-latin-400-normal.woff2?v=81419bf5') format('woff2')}
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/barlow-latin-400-italic.woff2?v=f47df445') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/barlow-latin-600-normal.woff2?v=a1e2a2d7') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/barlow-latin-700-normal.woff2?v=15481e4e') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/barlow-latin-800-normal.woff2?v=8a60890d') format('woff2')}

:root{
  --nuit:#16212B;
  --nuit-2:#1E2C3A;
  --encre:#2B3541;
  --gris:#6C7480;
  --gris-clair:#F2F4F6;
  --trait:#DDE2E7;
  --blanc:#FFFFFF;

  /* palette officielle, identique au document */
  --m1:#009FE3;  --m2:#E30613;
  --t1:#F28C00;  --t2:#F4E718;  --t3:#95C11F;
  --t4:#8B5A2B;  --t5:#00A7B5;  --t6:#7B2CFF;
  --ra:#2C2C2C;  --rb:#1A3E6F;  --rc:#C2185B;  --tph:#E0569A;
  --n:#2E8FE0;

  /* statuts, au dessin du document */
  --st-vert:#1F7A34;  --st-ambre:#C98A00;  --st-violet:#421446;

  --max:1180px;
  --accent:#009FE3;   /* l'accent d'interface : le bleu du M1. L'orange
                         reste au logo et au T1 (« de l'orange qui me
                         saoule », Heddy, 16/09/2026) */
  --r:6px;
  --ombre:none;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--encre);
  background:var(--blanc);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--encre);text-decoration-color:rgba(242,140,0,.6);
  text-underline-offset:3px}
a:hover{color:#B96A00}
::selection{background:var(--nuit);color:#fff}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---- liseré multicolore : la signature du document, douze traits ------- */
/* LE LISERET S'AFFINE DEPUIS QUE LE LOGO PORTE LE SIEN (04/09/2026). Deux
   arcs-en-ciel dans les quatre-vingt-dix premiers pixels se disputaient l'oeil :
   celui du logo est le motif, celui-ci n'est plus qu'un filet de cadre. */
.liseret{
  height:4px;
  background:linear-gradient(to right,
    var(--m1) 0 8.33%,  var(--m2) 8.33% 16.66%, var(--t1) 16.66% 25%,
    var(--t2) 25% 33.33%, var(--t3) 33.33% 41.66%, var(--t4) 41.66% 50%,
    var(--t5) 50% 58.33%, var(--t6) 58.33% 66.66%, var(--ra) 66.66% 75%,
    var(--rb) 75% 83.33%, var(--rc) 83.33% 91.66%, var(--tph) 91.66% 100%);
}

/* ---- barre de navigation ---------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(22,33,43,.96);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
}
.nav .wrap{display:flex;align-items:flex-end;gap:10px;height:74px}
/* LE MOT-MARQUE ET LA FRISE (05/09/2026).
   « La frise avec les huit couleurs et points s'étire sur le menu au lieu de
   se cantonner au logo », et « Marseille Mobilité écrit plus gros, aligné sur
   les items du menu vers le bas ». Le fichier SVG ne porte plus que les trois
   mots ; les huit segments et leurs points sont posés ici, un par entrée de
   menu, dans l'ordre du liseré. Le mot-marque et les entrées partagent la
   même ligne de base, et la frise passe sous les deux. */
.nav .marque{display:flex;align-items:flex-end;flex:none;text-decoration:none;
  padding-bottom:11px}
.nav .marque img{display:block;height:27px;width:auto}
@media(max-width:1180px){ .nav .marque img{height:26px} }
@media(max-width:860px){
  .nav .wrap{height:62px;gap:14px}
  .nav .marque img{height:22px}
  .nav .marque{padding-bottom:8px}
}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex:1;
  justify-content:flex-end}
/* LE MENU EN CAPITALES ETROITES (04/09/2026). « Le menu pour être rendu plus
   sexy aussi. » Les surtitres des sept posts sont en capitales espacees : le
   menu prend la meme voix, et l'etat actif se lit a un filet, pas a une
   pastille. */
.nav ul{align-items:flex-end}
.nav ul li{position:relative;padding-bottom:11px}
.nav ul a{
  display:block;color:#AEBAC5;text-decoration:none;font-size:11px;
  font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  white-space:nowrap;padding:10px 6px 6px;border-radius:0;
  transition:color .14s ease;
}
.nav ul a:hover{color:#fff;background:none}
.nav a.ici{color:#fff;box-shadow:none}

/* ---- LA FRISE : un segment par entrée, un point à chaque jonction ------- */
.nav ul li::before{            /* le segment */
  content:'';position:absolute;left:0;right:0;bottom:0;height:5px;
  background:var(--fil,transparent);
}
.nav ul li::after{             /* le point, sur la jonction de droite */
  content:'';position:absolute;right:-5px;bottom:-3px;width:11px;height:11px;
  border-radius:50%;background:#fff;border:3px solid var(--fil,transparent);
  box-sizing:border-box;
}
.nav ul li:nth-child(n+9)::before,
.nav ul li:nth-child(n+9)::after{display:none}   /* la 9e est à part */
.nav ul li:nth-child(8)::after{display:none}     /* pas de point en bout */
.nav ul li:nth-child(1){--fil:var(--m1)}
.nav ul li:nth-child(2){--fil:var(--m2)}
.nav ul li:nth-child(3){--fil:var(--t1)}
.nav ul li:nth-child(4){--fil:var(--t2)}
.nav ul li:nth-child(5){--fil:var(--t3)}
.nav ul li:nth-child(6){--fil:var(--t4)}
.nav ul li:nth-child(7){--fil:var(--t5)}
.nav ul li:nth-child(8){--fil:var(--t6)}
/* l'entrée courante se signale par son libellé en blanc et son segment plus
   épais : pas d'autre marque, la frise fait déjà le travail */
.nav ul li:has(a.ici)::before{height:8px}
.nav .tele{
  margin-bottom:11px;background:#fff;color:var(--nuit);padding:9px 13px;border-radius:6px;
  font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
}
.nav .tele:hover{background:var(--accent);color:#16212B}
.nav-burger{display:none;background:none;border:0;color:#fff;font-size:24px;cursor:pointer;line-height:1}

.nav .deroul{position:relative}
.nav .deroul > a i{font-style:normal;font-size:10px;opacity:.65;margin-left:1px}
/* LE SOUS-MENU SE DEROULE EN ENTIER sur ordinateur : pas de hauteur
   maximale, pas de defilement interne (« ce defilement interne ne me plait
   pas », Heddy, 26/08/2026). Le plus long, Le reseau, tient sous la barre
   sur un ecran d'ordinateur. */
.nav .sousmenu{
  display:none;position:absolute;top:100%;left:-8px;min-width:300px;
  background:#1E2C3A;border:1px solid #2C3B4A;border-radius:0 0 12px 12px;
  padding:8px 0 10px;box-shadow:0 22px 46px rgba(0,0,0,.4);
}
.nav .deroul:hover .sousmenu,
.nav .deroul:focus-within .sousmenu{display:block}
.nav .sousmenu a{
  display:block;padding:7px 18px;font-size:14px;font-weight:600;color:#C7D0D8;
  white-space:nowrap;border-radius:0;
}
.nav .sousmenu a:hover{background:#26374A;color:#fff}
.nav .sousmenu .sep{
  font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6B7A89;
  padding:12px 18px 5px;
}

/* ---- hero -------------------------------------------------------------- */
.hero{
  background:var(--nuit);color:#fff;
  padding:92px 0 78px;
  position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:url('photos/tram.jpg?v=2a9b4900') center 42%/cover no-repeat;
  opacity:.24;   /* 27/08 au soir : la photo se voyait a peine */
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(102deg, rgba(22,33,43,.95) 30%, rgba(22,33,43,.52) 72%, rgba(22,33,43,.10));
}
.hero .wrap{position:relative;z-index:1}
.hero .chapo{
  font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#8FA3B4;
  margin-bottom:20px;
}
.hero h1{
  font-size:clamp(36px,5.6vw,64px);line-height:1.02;margin:0 0 22px;
  font-weight:800;letter-spacing:-.018em;max-width:16ch;
}
.hero p{font-size:clamp(17px,2vw,21px);color:#C7D0D8;max-width:60ch;margin:0 0 32px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
/* LA DEMARCHE CITOYENNE EN GROS, premiere chose lue (Heddy, 27/08/2026) */
.hero-badge{
  display:inline-block;background:none;color:#fff;
  font-size:clamp(15px,1.9vw,19px);font-weight:800;letter-spacing:.01em;
  padding:0 0 11px;border-bottom:5px solid var(--accent);border-radius:0;
  margin-bottom:18px;
}

/* L'ACCROCHE DE LA DEMARCHE, EN UNE LIGNE (27/08/2026, second jet). La
   version en quatre lignes de titre disait la meme chose mais ecrasait
   l'ouverture : « la page d'accueil un peu plus sexy et moins lourde sur la
   description du projet » (Heddy). Une ligne, un filet orange, et le titre
   reprend la vedette. */
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:clamp(13.5px,1.35vw,15.5px);font-weight:700;letter-spacing:.01em;
  color:#fff;background:none;border-left:5px solid var(--accent);
  padding:4px 0 4px 14px;border-radius:0;margin:0 0 20px;
}
.hero-kicker span{color:#AAB6C2;font-weight:700}

/* LA BARRE DE CHIFFRES : ce que le lecteur retient en trois secondes. */
.hero-chiffres{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;
  margin:38px 0 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
  max-width:920px;
}
.hero-chiffres div{
  display:flex;flex-direction:column;gap:6px;
  padding-top:13px;border-top:5px solid var(--fil,var(--m1));
}
.hero-chiffres b{
  font-size:clamp(28px,3.4vw,40px);line-height:1;font-weight:800;
  color:#FFFFFF;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.hero-chiffres span{font-size:13.5px;line-height:1.35;color:#AAB6C2}
/* une couleur de ligne par nombre, dans l'ordre du liseré */
.hero-chiffres div:nth-child(1){--fil:var(--m1)}
.hero-chiffres div:nth-child(2){--fil:var(--m2)}
.hero-chiffres div:nth-child(3){--fil:var(--rc)}
.hero-chiffres div:nth-child(4){--fil:var(--t3)}
.hero-chiffres div:nth-child(5){--fil:var(--t5)}
@media (max-width:820px){
  .hero-chiffres{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .hero-chiffres div:last-child{grid-column:1 / -1}
}

/* TEXTE JUSTIFIE (Heddy, 27/08/2026 : « justifier le texte »). Cesure
   automatique en francais : sans elle, une colonne justifiee de 72 caracteres
   ouvre des rivieres blanches entre les mots. */
.lead, .texte, .hero p, .apropos .txt p, section p.texte, .bloc-texte p{
  text-align:justify;
  -webkit-hyphens:auto;hyphens:auto;
}
/* TOUS LES BLOCS DE TEXTE, PAS SEULEMENT CEUX QUI PORTENT UNE CLASSE
   (04/09/2026 : « merci de justifier les textes sur le site », Heddy). La
   regle ci-dessus ne voyait que .lead, .texte et deux ou trois conteneurs ;
   les paragraphes ecrits sans classe — la moitie du site — restaient au fer
   a gauche, d'ou un site justifie par endroits seulement. */
:where(section .wrap > p, section .wrap > div > p, .encadre, .apropos p,
       .presse p, .bloc p, article p, .fiche-corps p, .piste p,
       .piste-verdict){
  text-align:justify;
  -webkit-hyphens:auto;hyphens:auto;
}
/* LES ENCARTS SE JUSTIFIENT SELON LEUR PROPRE LARGEUR. Le meme composant
   occupe 364, 556 ou 1132 px selon le nombre de colonnes de sa grille : une
   regle de classe justifierait aussi la colonne de trois cent soixante
   pixels, ou n'en justifierait aucune. La requete de conteneur pose la seule
   question qui vaille — cette colonne est-elle assez large pour etre
   justifiee sans ouvrir de rivieres. */
.encart{container-type:inline-size}
@container (min-width:470px){
  .encart p{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
}
/* LES NOTES DE BAS DE SECTION font 760 ou 900 px sur tout le site : elles se
   justifient comme le corps. (Une requete de conteneur ne peut pas styler son
   propre conteneur : c'est une regle de classe qu'il faut ici.) */
.note{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
/* PAS DANS LES COLONNES ETROITES NI SOUS LES IMAGES : justifier quarante
   caracteres ouvre des rivieres blanches entre les mots, et une legende
   justifiee sur deux lignes se lit mal. Ces blocs restent au fer a gauche. */
.colonne p, .lignes p, .acces p, .leg p, .leg-rang,
.puce p, .puce small, figcaption, .credit, .obs, .t-obs, .st-b,
table p, td p, th p, .badge, .retombee p, .piste.vide p, .piste-attente{
  text-align:left;-webkit-hyphens:auto;hyphens:auto;
}

.bouton{
  display:inline-block;padding:12px 22px;border-radius:6px;
  font-weight:700;text-decoration:none;font-size:16px;border:2px solid transparent;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.bouton.petit{padding:9px 16px;font-size:14.5px}
/* sur fond sombre le plein est blanc, sur fond clair il est a l'encre */
.bouton-plein{background:#fff;color:var(--nuit);border-color:#fff}
.bouton-plein:hover{background:var(--accent);color:#16212B;border-color:var(--accent)}
section:not(.tete):not(.hero) .bouton-plein,
footer .bouton-plein{background:var(--nuit);color:#fff;border-color:var(--nuit)}
section:not(.tete):not(.hero) .bouton-plein:hover,
footer .bouton-plein:hover{background:var(--accent);color:#16212B;border-color:var(--accent)}
.bouton-vide{border-color:#48586A;color:#fff}
.bouton-vide:hover{border-color:#fff}
.bouton-vide-s{border-color:#B9C2CB;color:var(--encre)}
.bouton-vide-s:hover{border-color:var(--encre)}

/* ---- sections ---------------------------------------------------------- */
section{padding:72px 0}
section.sombre{background:var(--nuit);color:#fff}
section.grise{background:var(--gris-clair)}
.num{
  font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gris);margin-bottom:9px;
}
.sombre .num, .tete .num{color:#93A2B1}
h2{
  font-size:clamp(27px,3.6vw,40px);line-height:1.1;margin:0 0 14px;
  font-weight:800;letter-spacing:-.014em;color:var(--nuit);
}
.sombre h2{color:#fff}
h3{font-size:21px;font-weight:700;margin:0 0 8px;color:var(--nuit);letter-spacing:-.008em}
.sombre h3{color:#fff}
.lead{font-size:19px;color:var(--gris);max-width:72ch;margin:0 0 34px}
.sombre .lead{color:#AAB6C2}

/* ---- entête de page de section, avec sa photo -------------------------- */
section.tete{
  background:var(--nuit);color:#fff;padding:66px 0 56px;
  position:relative;overflow:hidden;
  background-size:cover;background-position:center 38%;
}
section.tete .voile{position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(22,33,43,.93) 30%, rgba(22,33,43,.66) 72%, rgba(22,33,43,.42));}
section.tete:not(.avec-photo) .voile{background:var(--nuit)}
section.tete .wrap{position:relative;z-index:1}
section.tete h1{
  font-size:clamp(30px,4.4vw,48px);line-height:1.06;margin:0 0 14px;
  font-weight:800;letter-spacing:-.016em;max-width:22ch;
}
section.tete .lead{color:#C2CCD6;margin-bottom:0;max-width:66ch}

/* ---- chiffres du constat ----------------------------------------------- */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
.chiffre{
  background:none;border:0;border-top:5px solid var(--fil,var(--m1));
  padding:15px 0 0;border-radius:0;
}
.chiffre b{
  display:block;font-size:44px;line-height:1;font-weight:800;
  color:#FFFFFF;margin-bottom:9px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.chiffre span{font-size:15px;color:#AAB6C2;line-height:1.45;display:block}
.chiffre:nth-child(1){--fil:var(--m1)}
.chiffre:nth-child(2){--fil:var(--m2)}
.chiffre:nth-child(3){--fil:var(--rc)}
.chiffre:nth-child(4){--fil:var(--t3)}
.chiffre:nth-child(5){--fil:var(--t5)}
.chiffre:nth-child(6){--fil:var(--rc)}
/* sur fond clair, le nombre passe a l'encre et le libelle au gris */
section:not(.sombre):not(.tete) .chiffre b{color:var(--encre)}
section:not(.grise):not(.tete) .chiffre span{color:var(--gris)}

/* ---- badges de ligne ---------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:27px;padding:0 9px;border-radius:7px;
  font-weight:800;font-size:14px;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.badge.petit{min-width:34px;height:23px;font-size:12.5px;padding:0 7px;border-radius:6px}
.badge.gros{min-width:76px;height:52px;font-size:24px;padding:0 14px;border-radius:12px}

/* ---- cartes de ligne (vue d'ensemble) ----------------------------------- */
.lignes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ligne{
  display:flex;gap:16px;align-items:flex-start;
  background:#fff;border:1px solid var(--trait);border-radius:var(--r);
  padding:18px 20px;border-left-width:6px;
  transition:box-shadow .16s ease;
}
.ligne:hover{box-shadow:var(--ombre)}
.ligne .txt{flex:1;min-width:0}
.ligne .term{font-weight:700;font-size:16.5px;color:var(--nuit);line-height:1.35}
.ligne .obs{font-size:14.5px;color:var(--gris);margin-top:6px;line-height:1.48}

/* ---- pastilles de statut : le dessin du document ------------------------ */
/* Texte et bord colorés, fond teinté clair — couleurs posées en inline par
   le générateur (VOC), la forme seulement ici. */
.st-pastille{
  display:inline-block;text-align:center;
  padding:2px 10px;border-radius:20px;border:1.6px solid currentColor;
  font-weight:800;font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.65;white-space:nowrap;
}
/* DEUX COLONNES, PAS DEUX BLOCS COTE A COTE (15/08/2026) : la premiere fait
   186 px quoi qu'il arrive, la seconde prend le reste, et les sections
   s'alignent quelle que soit la police ou le zoom. */
ul.sts{
  list-style:none;margin:12px 0 10px;padding:0;
  display:grid;grid-template-columns:186px 1fr;gap:6px 12px;
  font-size:14.5px;line-height:1.45;align-items:start;
}
ul.sts li{display:contents}
ul.sts .st-pastille{width:100%;overflow:hidden;text-overflow:ellipsis}
@supports not (display:contents){
  ul.sts{display:block}
  ul.sts li{display:flex;gap:12px;align-items:flex-start;margin-bottom:6px}
  ul.sts .st-pastille{width:186px}
}
.st-sec{color:var(--encre)}
.sombre .st-sec{color:#C7D0D8}
.lien-ligne{
  display:inline-block;margin-top:9px;font-size:14.5px;font-weight:700;
  text-decoration:none;color:var(--encre);
  border-bottom:2px solid var(--accent);padding-bottom:1px;
}
.lien-ligne:hover{color:#B96A00;border-bottom-color:#B96A00}

.colonnes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.colonnes.quatre{grid-template-columns:repeat(4,1fr)}
.colonnes.trois{grid-template-columns:repeat(3,1fr)}
.colonne{background:#fff;border:1px solid var(--trait);border-radius:var(--r);padding:22px 20px}

/* ---- les trois cartes de methode, sur l'accueil (11/09/2026) ------------
   « c'est fade » (Heddy). Elles etaient trois rectangles blancs a filet gris,
   toutes identiques et sans entree de lecture. Un filet d'encre en tete, un
   rang en chiffres, un titre plus haut : on sait ou commencer, et la carte
   repond au survol. Le rang est la seule touche d'orange — le filet reste a
   l'encre, parce que trois bandeaux orange en ligne, ca crie. */
.colonnes.methode{gap:22px}
.colonnes.methode .colonne{
  position:relative;padding:24px 22px 26px;background:#FAFBFC;
  border:1px solid var(--trait);border-top:4px solid var(--nuit);
  border-radius:0 0 var(--r) var(--r);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.colonnes.methode .colonne:hover{
  transform:translateY(-3px);border-color:#C6CFD6;background:#fff;
  box-shadow:0 14px 30px rgba(22,33,43,.11)}
.colonnes.methode .rang{
  /* LE RANG PREND LA FORME D'UN INDICE DE LIGNE. C'est la forme que le projet
     emploie partout — pastille arrondie, chiffre gras — et elle raccroche ces
     trois cartes au reste du site au lieu de les laisser en rectangles nus. */
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:26px;padding:0 9px;border-radius:7px;
  background:var(--nuit);color:#fff;
  font-size:13.5px;font-weight:800;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;margin-bottom:14px;
  transition:background .18s ease}
.colonnes.methode .colonne:hover .rang{background:var(--accent);color:#16212B}
.colonnes.methode h3{
  font-size:19.5px;line-height:1.22;letter-spacing:-.012em;margin:0}
.colonnes.methode p{
  margin:9px 0 0;font-size:15.5px;line-height:1.55;color:var(--gris)}
.colonnes.methode .colonne::after{
  content:"";position:absolute;left:-1px;right:-1px;top:-4px;height:4px;
  background:var(--fil,var(--nuit));transition:background .18s ease}
.colonnes.methode .colonne:nth-child(1){--fil:var(--nuit)}
.colonnes.methode .colonne:nth-child(2){--fil:var(--nuit)}
.colonnes.methode .colonne:nth-child(3){--fil:var(--nuit)}
.colonnes.methode .colonne:hover::after{background:var(--accent)}
@media (max-width:860px){.colonnes.trois.methode{grid-template-columns:1fr}}
.sombre .colonne{background:rgba(255,255,255,.05);border-color:#2C3B4A}

/* ---- les noms qu'on remercie ------------------------------------------
   Ils tenaient dans une demi-phrase noyee en fin de section technique
   (« pas assez clairs et mis en avant », Heddy, 10/09/2026). Une liste sans
   puce, un nom par ligne, filet de separation : on lit qui a contribue sans
   avoir a demeler une enumeration. */
/* deux colonnes de noms, sans boîte : le document ne met pas ses gens
   dans des cartes. */
.credits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;
  margin-top:34px;max-width:80ch}
.credits-txt{font-size:15.5px;color:var(--gris);line-height:1.55;margin:0}
@media (max-width:760px){.credits{grid-template-columns:1fr;gap:32px}}
.liste-noms{list-style:none;margin:12px 0 0;padding:0}
.liste-noms li{
  font-weight:700;font-size:15px;color:var(--nuit);
  padding:7px 0;border-top:1px solid var(--trait);
}
.liste-noms li:first-child{border-top:0;padding-top:0}
.sombre .liste-noms li{color:#E8EDF2;border-color:#2C3B4A}

/* ---- fiche de ligne : indice + terminus, puis la carte depliable -------- */
.fiche{
  border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;
  margin-bottom:26px;background:#fff;
}
.fiche-tete{display:flex;align-items:center;gap:14px;padding:15px 20px}
.fiche-badge{min-width:46px;height:30px;font-size:15.5px}
.fiche-term{font-size:clamp(15.5px,1.8vw,19px);line-height:1.3;font-weight:800;
  letter-spacing:-.006em}
.fiche-corps{padding:18px 22px 22px}
.fiche-role{
  font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
  margin-bottom:10px;
}
.fiche-corps p{margin:0 0 6px;font-size:16px;max-width:80ch}

/* ---- le bouton « Afficher la carte » ------------------------------------ */
details.depl{margin-top:14px}
details.depl summary{
  list-style:none;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px 11px 16px;border-radius:9px;
  border:2px solid var(--nuit);color:var(--nuit);
  font-weight:700;font-size:15.5px;
  transition:background .14s ease,color .14s ease;
}
details.depl summary::-webkit-details-marker{display:none}
details.depl summary:hover{background:var(--nuit);color:#fff}
details.depl[open] summary{background:var(--nuit);color:#fff}
.sombre details.depl summary{border-color:#fff;color:#fff}
.sombre details.depl summary:hover,
.sombre details.depl[open] summary{background:#fff;color:var(--nuit)}
.depl-plus{position:relative;width:14px;height:14px;flex:none}
.depl-plus::before,.depl-plus::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;
  transition:transform .18s ease;
}
.depl-plus::before{left:6px;top:0;width:2.6px;height:14px}
.depl-plus::after{left:0;top:6px;width:14px;height:2.6px}
details.depl[open] .depl-plus::before{transform:rotate(90deg)}
details.depl[open] .depl-plus{transform:rotate(45deg)}
/* le libellé suit l'état : « Afficher » fermé, « Masquer » ouvert */
details.depl .depl-fermer{display:none}
details.depl[open] .depl-ouvrir{display:none}
details.depl[open] .depl-fermer{display:inline}
.depl-corps{margin-top:14px}
.depl-corps img{
  display:block;width:100%;height:auto;object-fit:contain;
  background:#fff;border:1px solid var(--trait);border-radius:9px;
  margin:0 auto;padding:8px;
}
.depl-iframe{
  position:relative;border:1px solid var(--trait);border-radius:9px;overflow:hidden;
  background:var(--gris-clair);
}
.depl-iframe iframe{display:block;width:100%;height:min(72vh,560px);border:0}

/* ---- carte pleine largeur (pages de section) ---------------------------- */
.carte-pleine{margin-bottom:36px}
.carte-tete{border-top:2px solid var(--nuit);padding-top:9px;margin-bottom:10px}
.carte-tete b{display:block;font-size:19px;color:var(--nuit)}
.carte-tete span{font-size:15px;color:var(--gris)}
.carte-pleine > a img{
  display:block;width:100%;height:auto;object-fit:contain;
  background:#fff;border:1px solid var(--trait);border-radius:var(--r);
  margin:0 auto;padding:10px;
}
/* LE CADRE MY MAPS : la largeur de la colonne, comme le reste (31/08/2026). */
.carte-iframe{background:#fff;border:1px solid var(--trait);
  border-radius:var(--r);padding:6px;margin-bottom:2px}
.carte-iframe iframe{display:block;width:100%;height:min(72vh,560px);border:0;
  border-radius:calc(var(--r) - 4px)}
@media (max-width:700px){.carte-iframe iframe{height:min(68vh,420px)}}

.carte-note{
  font-size:13.5px;color:var(--gris);font-style:italic;margin-top:8px;
}
.carte-tete span{display:block;max-width:100ch}

/* ---- légende sous la planche : le bloc du document ---------------------- */
.leg{margin-top:12px;border:1px solid var(--trait);border-radius:9px;
  padding:14px 18px 12px;background:#fff}
.grise .leg{background:#fff}
.leg-titre{
  font-family:'DejaVu Sans Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gris);
  margin-bottom:10px;
}
.leg-groupe{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--nuit);margin:10px 0 7px;
}
.leg-groupe:first-of-type{margin-top:0}
.leg-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:5px 22px}
.leg-rang{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;
  line-height:1.4;color:var(--encre)}
.leg-rang .badge{flex:none;margin-top:0}
.leg-rang i{color:var(--gris)}

/* ---- page du livre blanc ------------------------------------------------ */
.couv-grille{display:grid;grid-template-columns:330px 1fr;gap:44px;align-items:start}
.couv img{
  width:100%;height:auto;border-radius:8px;
  box-shadow:0 18px 44px rgba(22,33,43,.28);
  border:1px solid var(--trait);
}
.maj-liste{max-width:860px}
.maj{border-left:3px solid var(--trait);padding:2px 0 16px 18px;position:relative}
.maj::before{content:"";position:absolute;left:-7.5px;top:8px;width:12px;height:12px;
  border-radius:50%;background:var(--accent);border:2.6px solid #fff}
.maj b{display:block;font-size:15px;color:var(--nuit);font-weight:800;
  font-variant-numeric:tabular-nums;margin-bottom:4px}
.maj p{margin:0;font-size:15px;color:var(--encre);max-width:76ch}
.maj ul{margin:0;padding-left:19px;max-width:76ch}
.maj li{font-size:14.5px;color:var(--encre);margin-bottom:5px;line-height:1.5}
ul.maj-points{margin:0 0 6px;padding-left:20px;max-width:76ch}
ul.maj-points li{font-size:16px;margin-bottom:8px;line-height:1.55}

/* ---- accès rapide depuis l'accueil -------------------------------------- */
/* ---- les six acces de l'accueil (11/09/2026) ---------------------------
   « c'est fade » (Heddy). C'etaient six rangees plates : un chiffre orange de
   16 px a gauche d'un filet, un titre, deux lignes de gris. Le chiffre est ce
   qui fait entrer dans la rubrique, il prend donc la taille qui va avec, a
   l'encre ; l'unite passe dessous en petites capitales ; une fleche dit que
   c'est un lien, et le filet de gauche s'allume au survol. */
.acces{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.acces-c{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:#FAFBFC;border:1px solid var(--trait);border-left:4px solid var(--nuit);
  border-radius:0 var(--r) var(--r) 0;padding:20px 22px 18px;
  transition:transform .18s ease, box-shadow .18s ease,
             border-color .18s ease, background .18s ease;
}
.acces-c:hover{
  transform:translateY(-3px);background:#fff;border-color:#C6CFD6;
  border-left-color:var(--accent);
  box-shadow:0 14px 30px rgba(22,33,43,.11);
}
.acces-cle b{
  display:block;font-size:34px;line-height:1;font-weight:800;color:var(--nuit);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.acces-cle b span{margin:0 2px;font-weight:400;color:var(--gris)}
.acces-cle i{
  display:block;margin-top:5px;font-style:normal;
  font-family:'DejaVu Sans Mono',ui-monospace,monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}
.acces-txt{margin-top:15px;padding-top:13px;padding-right:26px;
  border-top:1px solid var(--trait)}
.acces-c b{display:block}
.acces-txt b{font-size:17px;color:var(--nuit);margin-bottom:4px;line-height:1.25}
.acces-txt span{display:block;font-size:14.2px;color:var(--gris);line-height:1.45;
  text-align:left}
.acces-fl{
  position:absolute;right:18px;bottom:14px;font-size:18px;color:var(--trait);
  transition:transform .18s ease, color .18s ease;
}
.acces-c:hover .acces-fl{color:var(--accent);transform:translateX(4px)}
@media (max-width:900px){.acces{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.acces{grid-template-columns:1fr}}

/* ---- corps de texte des parties « propositions » ------------------------ */
p.texte{max-width:74ch;font-size:17px;margin:0 0 16px}
.encarts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;margin-top:26px}
.encart{background:#fff;border:1px solid var(--trait);border-left:4px solid var(--nuit);
  border-radius:0 var(--r) var(--r) 0;padding:20px 22px}
.grise .encart{background:var(--blanc)}
.encart h3{font-size:17.5px;margin-bottom:6px}
.encart p{margin:0;font-size:15.5px;color:var(--gris);line-height:1.52}
.encart a{color:var(--encre);text-decoration-color:rgba(242,140,0,.6);
  text-underline-offset:3px}
a:hover{color:#B96A00}

/* ---- réseau N : seize puces avec leurs quartiers ------------------------ */
.ss{font-family:'DejaVu Sans Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:#8A97A5;margin-bottom:12px}
.puces-n{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.puce{display:flex;align-items:flex-start;gap:11px;background:rgba(255,255,255,.06);
  padding:11px 14px;border-radius:9px;font-size:14.5px;color:#DDE5EC}
.puce .badge{margin-top:1px}
.puce span{display:block;font-weight:700;line-height:1.3}
.puce small{display:block;font-size:12.5px;color:#93A2B1;line-height:1.4;margin-top:3px}

/* ---- calendrier ---------------------------------------------------------- */
.frise{border-left:3px solid #33404E;margin-left:8px;padding-left:26px;margin-bottom:26px}
.jalon{position:relative;padding-bottom:26px}
.jalon::before{
  content:"";position:absolute;left:-34px;top:5px;width:13px;height:13px;
  border-radius:50%;background:var(--accent);border:3px solid var(--nuit);
}
.jalon b{display:block;font-size:15px;color:var(--accent);font-weight:800;letter-spacing:.05em;
  font-variant-numeric:tabular-nums}
.jalon span{font-size:16px;color:#C7D0D8;max-width:78ch;display:block}

/* ---- table de nomenclature (5.2) ---------------------------------------- */
table.nomen{border-collapse:collapse;width:100%;max-width:760px;font-size:15.5px;
  margin:6px 0 4px}
table.nomen td{padding:8px 14px 8px 0;border-bottom:1px solid var(--trait);
  vertical-align:top}
table.nomen tr:last-child td{border-bottom:0}
table.nomen td:first-child{
  width:150px;white-space:nowrap;font-weight:700;color:var(--nuit);
  font-variant-numeric:tabular-nums}
table.nomen tr.serie td:first-child{color:var(--nuit)}
table.nomen tr.hors td{color:var(--gris)}
/* la coupure entre les tranches de numeros et les series a lettre */
table.nomen tr.debut td{border-top:2px solid var(--nuit);padding-top:12px}

/* ---- le tableau des indices, en pastilles (11/09/2026) ------------------ */
/* Il etait en texte gras : exact et illisible. Les pastilles portent la
   couleur que la ligne a sur les plans, et les neuf tranches partagent le vert
   LeBus — la regle se voit avant d'etre lue. */
table.nomen-plan{max-width:720px;font-size:16px;margin:14px 0 2px}
table.nomen-plan th{
  text-align:left;font-family:'DejaVu Sans Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gris);
  font-weight:600;padding:0 16px 9px 0;border-bottom:2px solid var(--nuit)}
table.nomen-plan td{padding:7px 16px 7px 0;border-bottom:1px solid var(--trait);
  vertical-align:middle;color:var(--encre)}
table.nomen-plan td:first-child{width:auto;padding-right:20px}
table.nomen-plan tbody tr:hover td{background:var(--gris-clair)}
.nm-i{
  display:inline-block;min-width:104px;text-align:center;
  padding:4px 12px;border-radius:5px;
  font-weight:800;font-size:14.5px;letter-spacing:.01em;
  color:#fff;background:var(--nuit);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.nm-i.nm-sombre{color:#16212B}
.nm-i.nm-vide{background:transparent;color:var(--gris);
  border:1px dashed var(--trait);font-weight:700}
.nm-i.nm-contour{background:transparent;color:var(--nuit);
  border:2px solid var(--nuit)}
table.nomen-plan tr.nm-sep td{
  border-bottom:0;padding:18px 0 7px;
  font-family:'DejaVu Sans Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);font-weight:600}
table.nomen-plan tr.nm-sep:hover td{background:none}
table.nomen-plan tr.nm-hors td{border-bottom:0;color:var(--gris)}
.nm-lg{max-width:720px;margin:12px 0 0;font-size:14.5px;line-height:1.5;
  color:var(--gris)}
.nm-pt{display:inline-block;width:11px;height:11px;border-radius:3px;
  margin-right:5px;vertical-align:baseline}

/* ---- table des coûts ----------------------------------------------------- */
table.couts{border-collapse:collapse;width:100%;max-width:760px;font-size:15.5px}
table.couts th{
  text-align:left;font-family:'DejaVu Sans Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
  font-weight:600;padding:0 14px 8px 0;border-bottom:2px solid var(--nuit);
}
table.couts td{padding:9px 14px 9px 0;border-bottom:1px solid var(--trait);vertical-align:top}
table.couts td:nth-child(2),table.couts td:nth-child(3){
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.couts tr:last-child td{border-bottom:0}
/* LES DEUX FAMILLES DE COUT (28/08/2026). Elles ne se melangent pas : chacune
   son intertitre, son explication et son sous-total. La derniere rangee d'une
   table de cout est desormais ce sous-total, elle ne se grise donc plus. */
h4.cout-fam{font-family:'Barlow Condensed','DejaVu Sans Condensed',sans-serif;
  font-size:20px;font-weight:600;letter-spacing:.01em;margin:26px 0 2px;
  color:var(--nuit)}
h4.cout-fam+p.note{margin:0 0 10px;max-width:760px}
table.couts tr.sstot td{font-weight:700;border-top:1px solid var(--nuit);
  border-bottom:0;color:var(--nuit)}

/* ---- récapitulatif des propositions (fond nuit) ------------------------- */
.recap-sous{font-size:14.5px;color:#8A97A5;margin:-4px 0 12px}
table.recap{border-collapse:collapse;width:100%;max-width:980px;font-size:15px}
table.recap td{padding:9px 14px 9px 0;border-bottom:1px solid #2C3B4A;
  vertical-align:top;color:#DDE5EC;line-height:1.45}
table.recap tr:last-child td{border-bottom:0}
table.recap td:first-child{width:64px;padding-top:10px}
table.recap td:last-child{width:120px;text-align:right;white-space:nowrap}

/* ---- téléchargement ------------------------------------------------------ */
.tele-bloc{
  display:flex;gap:30px;align-items:center;flex-wrap:wrap;
  background:var(--nuit);color:#fff;border-radius:16px;padding:34px 34px;
}
.tele-bloc .txt{flex:1;min-width:280px}
.tele-bloc h3{font-size:25px;margin-bottom:8px;color:#fff}
.tele-bloc p{color:#AAB6C2;margin:0 0 6px;font-size:16px}
.tele-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---- à l'instruction ----------------------------------------------------- */
.piste{
  background:#fff;border:1px solid var(--trait);border-radius:var(--r);
  padding:24px 26px;margin-bottom:18px;max-width:860px;
}
.grise .piste{background:#fff}
.piste h3{font-size:20px;margin:0 0 8px;max-width:60ch}
.piste p{margin:0 0 8px;font-size:15.5px;color:var(--encre);max-width:74ch}
.piste-etat{
  display:inline-block;padding:2px 11px;border-radius:20px;border:1.6px solid currentColor;
  font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:12px;
}
.piste-etat.ouverte{color:#0B6E8F;background:#E8F4F9}
.piste-etat.retenue{color:#1F7A34;background:#EAF4EC}
.piste-etat.ecartee{color:#8A2A2A;background:#F9ECEC}
.piste-verdict{color:var(--gris);font-size:14.5px;border-left:3px solid var(--trait);
  padding-left:14px;margin-top:10px}
.piste-attente{
  display:inline-block;font-size:14.5px;font-weight:600;color:var(--gris);
  background:var(--gris-clair);border:1px dashed var(--trait);
  border-radius:8px;padding:9px 15px;
}
.piste-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.ligne.piste-vote{display:grid;grid-template-columns:auto minmax(0,1fr) 180px;gap:18px 26px;
  align-items:start;max-width:1040px;margin-bottom:16px;padding:22px 24px}
.ligne.piste-vote h3{font-size:20px;line-height:1.3;margin:0 0 8px;color:var(--nuit)}
.ligne.piste-vote .obs{font-size:15px;color:var(--encre);margin:0 0 10px;max-width:72ch}
.piste-gauche{display:flex;flex-direction:column;gap:8px;padding-top:2px}
.piste-droite{display:flex;flex-direction:column;gap:8px;padding-top:2px}
table.nomen.cout-piste{max-width:none;font-size:14.5px;margin:4px 0 0}
table.nomen.cout-piste td:first-child{width:110px}
.sondage{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.sondage .bouton{width:100%;text-align:center;font-size:16px;padding:11px 16px}
.sondage .bouton-vide{color:var(--nuit);border-color:var(--nuit);background:#fff}
.sondage .bouton-vide:hover{background:var(--gris-clair);border-color:var(--nuit)}
.sondage button.choisi{outline:3px solid var(--nuit);outline-offset:2px}
.sondage button:disabled{opacity:.55;cursor:default}
.sondage-resultat{font-size:13.5px;color:var(--gris);margin-top:4px;line-height:1.4}
.sondage-resultat b{color:var(--nuit)}
@media (max-width:760px){
  .ligne.piste-vote{grid-template-columns:1fr}
  .piste-gauche{flex-direction:row}
  .piste-droite{padding-top:0}
}
}
.piste-cout{background:var(--gris-clair);border-left:3px solid var(--encre);
  padding:10px 14px;border-radius:6px;font-size:14.5px !important;max-width:74ch}
.piste.vide{text-align:left;border-style:dashed}
.piste.vide .bouton{margin-top:8px}

/* ---- contact ------------------------------------------------------------- */
.contact-grille{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:start}
.formulaire{display:flex;flex-direction:column;gap:16px;max-width:560px}
.formulaire label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14.5px}
.formulaire label i{font-weight:400;color:var(--gris)}
.formulaire input,.formulaire select,.formulaire textarea{
  font:inherit;font-size:16px;padding:11px 13px;border:1.6px solid #C4CCD4;
  border-radius:9px;background:#fff;color:var(--encre);
}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{
  outline:2.4px solid var(--accent);outline-offset:1px;border-color:var(--accent);
}
.formulaire textarea{resize:vertical;min-height:150px}
.formulaire .bouton{align-self:flex-start;border:0;cursor:pointer;font-family:inherit}
a.mail{font-size:clamp(17px,2.4vw,22px);font-weight:800;color:var(--encre);
  text-decoration-color:var(--accent);word-break:break-all}

/* ---- à propos ------------------------------------------------------------ */
.apropos{display:flex;gap:30px;align-items:flex-start;flex-wrap:wrap}
.apropos img{width:138px;height:138px;object-fit:cover;border-radius:var(--r)}
.apropos .txt{flex:1;min-width:280px}
.apropos .role{
  font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--m2);
  margin:2px 0 14px;
}

/* ---- pied de page -------------------------------------------------------- */
footer{background:var(--nuit);color:#8A97A5;padding:64px 0 52px;font-size:14.5px}
footer h2{font-size:clamp(22px,3vw,32px);color:#fff;margin-bottom:26px;max-width:26ch}
footer a{color:#C7D0D8;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.footer-liens{display:flex;gap:22px;flex-wrap:wrap;font-weight:600}
.footer-bas{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid #2C3B4A;padding-top:20px;margin-top:26px}
.footer-disc{color:#7C8A98}

/* ---- avertissement ------------------------------------------------------- */
.note{
  border-left:4px solid var(--t2);background:#FFFCE8;
  padding:16px 20px;border-radius:0 var(--r) var(--r) 0;font-size:15.5px;
  max-width:900px;
}
.sombre .note{background:rgba(244,231,24,.09);color:#DDE5EC}

/* UN SEUL DECALAGE D'ANCRE, PARTOUT (15/08/2026) : la barre fait 62 px et
   reste collee en haut ; une seule regle, un seul chiffre. */
[id]{scroll-margin-top:78px}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1120px){
  .nav ul{gap:0}
  .nav ul a{padding:8px 7px;font-size:13.5px}
}
/* 07/09/2026, soir : sous 480px, logo + burger + bouton "Le livre blanc"
   ne tenaient plus sur une seule ligne (deborde de 66px a 375px de large,
   sur TOUTES les pages). Le bouton reste visible - c'est le seul acces au
   livre blanc dans la nav mobile - mais se resserre, comme le logo et les
   marges du bandeau. Pose ICI (et non a cote de la regle de base a la
   ligne ~154) : a specificite egale, la regle la PLUS BASSE dans le
   fichier l'emporte, media query ou pas - une regle de base plus loin
   dans le fichier ecrase sinon un correctif pose trop tot. */
@media(max-width:480px){
  .nav .wrap{padding:0 16px;gap:8px}
  .nav .marque img{height:19px}
  .nav .tele{padding:7px 10px;font-size:10px;letter-spacing:.035em}
}
@media (max-width:1024px){
  .nav ul{
    display:none;position:absolute;top:62px;left:0;right:0;
    background:var(--nuit);flex-direction:column;gap:0;padding:8px 24px 18px;
    max-height:calc(100vh - 62px);overflow:auto;
    align-items:stretch;     /* la ligne 109 met flex-end pour la barre HORIZONTALE
      (aligner les entrees sur la ligne de base du logo) ; en colonne, flex-end
      devient un axe croise HORIZONTAL et pousse chaque <li> a droite, retreci
      a la largeur de son texte - c'est le bug signale par Heddy (menu ouvert,
      07/09/2026 soir) : entrees decalees a droite, frise decoupee en morceaux */
    justify-content:flex-start;   /* MEME defaut, deuxieme moitie du bug : la
      ligne 104 met justify-content:flex-end pour pousser les liens vers la
      droite de la barre HORIZONTALE, contre le bouton "Le livre blanc". En
      colonne, flex-end joue sur l'axe PRINCIPAL, donc VERTICAL : avec un
      contenu (8 entrees + sous-menus deroules) plus haut que le panneau,
      flex-end plaque la FIN de la liste en bas et pousse le debut - "Le
      constat", "Le reseau" - des centaines de pixels AU-DESSUS du panneau,
      invisibles et incliquables. C'est le "menu qui ne marche pas avec les
      lignes" signale par Heddy : Le reseau est la 2e entree, jamais visible
      en ouvrant le menu. Verifie par offsetTop (-643px) avant correction. */
  }
  .nav ul.ouvert{display:flex}
  .nav ul li{padding:2px 0 2px 14px;border-bottom:1px solid #22303E}
  .nav-burger{display:block;margin-left:auto}
  .nav .sousmenu{
    display:block;position:static;border:0;box-shadow:none;background:transparent;
    min-width:0;padding:0 0 8px;max-height:none;
  }
  .nav .sousmenu a{padding:6px 12px;font-size:13.5px;color:#96A3B1}
  .nav .sousmenu .sep{padding:8px 12px 3px}
  /* la frise en colonne : Heddy, 07/09/2026 soir - "les lignes de couleurs
     seraient mieux sur la hauteur en mobile". Le trait horizontal en bas de
     chaque <li> (pense pour une rangee) devient un trait VERTICAL sur toute
     la hauteur de l'entree - repli et sous-menu deroule compris - au bord
     gauche ; le point de jonction n'a plus de sens hors d'une ligne continue
     et disparait. */
  .nav ul li::before{left:0;right:auto;top:0;bottom:0;height:auto;width:4px}
  .nav ul li::after{display:none}
  .nav ul li:has(a.ici)::before{height:auto;width:7px}
  .nav .wrap{align-items:center}   /* logo (image basse, 19px), burger (glyphe
    24px) et bouton "Le livre blanc" (pastille au padding genereux) n'ont plus
    a partager la ligne de base des liens du menu, masques du bandeau des que
    le menu passe en colonne : caler sur flex-end (pense pour ce baseline la)
    les desaxait visuellement. Signale par Heddy, 07/09/2026 soir. */
  .nav .marque{padding-bottom:0}   /* ce padding calait le logo AU-DESSUS de la
    ligne de base du menu horizontal (desktop) ; en colonne il n'y a plus de
    ligne de base a tenir, et il decale le logo de 4px au-dessus du vrai
    centre du bandeau une fois .wrap en align-items:center - mesure : logo a
    31px, burger a 35px, alors qu'ils doivent partager le meme axe */
  .nav .tele{margin-bottom:0}      /* meme correctif pour "Le livre blanc" :
    margin-bottom:11px le calait sur la ligne de base desktop, et le decale
    de 5,5px au-dessus du centre en mobile - mesure : bouton a 29,5px contre
    35px pour le burger */
  .chiffres{grid-template-columns:repeat(2,1fr)}
  .colonnes,.colonnes.quatre,.colonnes.trois{grid-template-columns:repeat(2,1fr)}
  .lignes{grid-template-columns:1fr}
  .acces{grid-template-columns:repeat(2,1fr)}
  .contact-grille{grid-template-columns:1fr;gap:26px}
  .couv-grille{grid-template-columns:260px 1fr;gap:28px}
}
@media (max-width:680px){
  body{font-size:16px}
  section{padding:52px 0}
  .hero{padding:66px 0 56px}
  .chiffres,.colonnes,.colonnes.quatre,.colonnes.trois,.acces,.puces-n{grid-template-columns:1fr}
  ul.sts{grid-template-columns:1fr;gap:2px}
  ul.sts .st-pastille{width:max-content;margin-top:6px}
  .fiche-tete{flex-wrap:wrap;gap:10px}
  .depl-iframe iframe{height:62vh}
  .footer-liens{gap:14px}
  .leg-grille{grid-template-columns:1fr}
  .couv-grille{grid-template-columns:1fr}
  .couv{max-width:300px}
}

/* longueur de ligne, sous l'observation */
.ligne .meta{margin-top:6px;font-family:'DejaVu Sans Mono',ui-monospace,monospace;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}

/* LE TRONCON PARTAGE, dans la cellule du projet (28/08/2026) : le lecteur
   doit voir POURQUOI le kilometrage affiche est plus court que la section. */
.note-inline{font-size:13px;color:var(--gris);font-style:italic}

/* ---- ENCADRÉ DE CRÉDIT (04/09/2026) -----------------------------------
   « Merci de mettre + en avant la contribution de Marseille Transports aux
   réseaux B et N » (Heddy). Le crédit était un paragraphe noyé dans le
   corps : il devient un bloc qu'on ne peut pas manquer, en tête des deux
   sections concernées. */
.encadre{
  background:#EDF0F2;border-left:4px solid var(--nuit);
  padding:18px 22px;margin:0 0 30px;max-width:74ch;
  font-size:16px;line-height:1.6;color:#2B3541;
}
.encadre b{color:var(--nuit)}
.encadre a{color:var(--nuit);border-bottom:1px solid var(--accent)}
.encadre--sombre{
  background:rgba(255,255,255,.06);border-left-color:var(--accent);
  color:#C2CCD6;
}
.encadre--sombre b, .encadre--sombre a{color:#fff}

/* ---- ON PARLE DE NOUS (04/09/2026) ------------------------------------
   La liste des retombées presse. Prévue avant la première retombée : tant
   qu'elle est vide, c'est l'état d'attente `.piste.vide` qui s'affiche. */
.retombees{display:grid;gap:14px;margin-top:20px}
@media (min-width:820px){.retombees{grid-template-columns:repeat(2,1fr)}}
.retombee{
  background:#fff;border:1px solid var(--trait);border-radius:11px;
  padding:18px 20px;border-left:4px solid var(--nuit);
}
.retombee-t{
  font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre);margin-bottom:7px;
}
.retombee-g{
  font-weight:700;font-size:10.5px;letter-spacing:.08em;color:var(--gris);
  border:1px solid var(--trait);border-radius:20px;padding:2px 9px;margin-left:9px;
}
.retombee h3{font-size:18px;line-height:1.32;margin:0 0 7px}
.retombee h3 a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--accent)}
.retombee h3 a:hover{color:var(--accent)}
.retombee p{font-size:15px;color:var(--gris);margin:0}
.retombee-d{
  font-size:13px;color:var(--gris);margin-top:10px;
  border-top:1px solid var(--trait);padding-top:9px;
}

/* ---- LA CARTE INTERACTIVE MAISON (04/09/2026) ---------------------------
   Elle remplace l'iframe Google, qui renvoyait un 403. Vocabulaire des
   planches : fond blanc, filet encre, angles nets, l'orange en accent. */
.cs-cadre{
  position:relative;border:2px solid var(--nuit);background:#fff;
  aspect-ratio:4/3;max-height:78vh;margin-inline:auto;
  overflow:hidden;touch-action:none;cursor:grab;
}
.cs-cadre.cs-tire{cursor:grabbing}
.cs-cadre svg{display:block;width:100%;height:100%}
.cs-arrets .cs-pt{cursor:pointer}
.cs-arrets .cs-pt:hover,.cs-arrets .cs-pt:focus{fill:var(--accent);outline:none}
.cs-noms text{
  font-family:'Barlow',system-ui,sans-serif;font-weight:600;fill:var(--nuit);
  paint-order:stroke;stroke:#fff;stroke-width:2.4;stroke-linejoin:round;
  pointer-events:none;
}
.cs-outils{position:absolute;right:10px;top:10px;display:flex;gap:6px}
.cs-b{
  min-width:34px;height:34px;padding:0 8px;border:2px solid var(--nuit);
  background:#fff;color:var(--nuit);font:inherit;font-weight:800;font-size:17px;
  line-height:1;border-radius:6px;cursor:pointer;
}
.cs-b-txt{font-size:13px;font-weight:700}
.cs-b:hover{background:var(--nuit);color:#fff}
.cs-panneau{
  border:2px solid var(--nuit);border-top:0;background:var(--gris-clair);
  padding:0 0 12px;
}
.cs-pan-tete{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--nuit);color:#fff;padding:9px 12px;font-weight:800;font-size:16px;
}
.cs-fermer{
  border:0;background:transparent;color:#fff;font-size:22px;line-height:1;
  cursor:pointer;padding:0 2px;
}
.cs-pan-corps{padding:11px 13px 0;font-size:14.5px;line-height:1.6;color:var(--encre)}
.cs-pan-corps b{font-weight:800}
.cs-note{
  font-family:'DejaVu Sans Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--gris);margin-top:9px;
}
.cs-attente{padding:26px 0;color:var(--gris);font-size:14.5px}
@media(max-width:600px){ .cs-cadre{max-height:68vh} }

/* ---- LA BANDE DE STATIONS (05/09/2026) ----------------------------------
   « illustrer la partie renov stations avec ca + images castellane du livre
   blanc, a inserer de maniere harmonieuse » (Heddy). Trois vues sur une
   ligne, meme hauteur, legendes sous l'image ; elles passent en colonne sous
   860 px. Pas d'ombre ni de cadre : la charte n'en porte nulle part. */
.stations{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:26px 0 4px;
}
.stations figure{margin:0}
.stations img{
  display:block;width:100%;height:210px;object-fit:cover;
  border-radius:var(--r);background:var(--gris-clair);
}
.stations figcaption{
  margin-top:7px;font-size:13px;line-height:1.45;color:var(--gris);
}
.stations figcaption b{color:var(--encre);font-weight:700}
@media(max-width:860px){
  .stations{grid-template-columns:1fr;gap:18px}
  .stations img{height:auto}
}

/* ---- UNE PHOTO PLEINE LARGEUR DANS UNE PARTIE (05/09/2026) --------------
   La bande de stations sert trois vues cote a cote ; ici une seule image
   porte le propos, elle prend donc toute la largeur du texte. Meme hauteur
   contrainte que la bande, meme legende. */
.photo-large{margin:24px 0 4px}
.photo-large img{
  display:block;width:100%;height:340px;object-fit:cover;object-position:center 42%;
  border-radius:var(--r);background:var(--gris-clair);
}
.photo-large figcaption{
  margin-top:7px;font-size:13px;line-height:1.45;color:var(--gris);
}
@media(max-width:700px){ .photo-large img{height:220px} }

/* 07/09/2026 : la page « Vos propositions » et la page contact sans encadrés.
   « les encadrés sont très IA coded » (Heddy) : de la prose, des filets. */
.prose p{max-width:74ch;font-size:16.5px;line-height:1.7;color:var(--encre);margin:0 0 16px}
.prose h2{margin-bottom:14px}
.tranchee{border-top:1px solid var(--trait);padding:22px 0 8px;max-width:860px}
.tranchee:last-of-type{border-bottom:1px solid var(--trait);padding-bottom:22px}
.tranchee h3{font-size:19px;margin:0 0 8px;max-width:60ch}
.tranchee p{margin:0 0 8px;font-size:15.5px;line-height:1.6;color:var(--encre);max-width:74ch}
.verdict-retenue{color:#1F7A34}
.verdict-ecartee{color:#8A2A2A}
.prose-contact{font-size:15.5px;line-height:1.6;color:var(--encre);max-width:64ch;margin:14px 0 0}

/* 07/09/2026 au soir : LA QUESTION, DANS LA CHARTE. Papier blanc, la bande
   des huit couleurs en tête de chaque question (le seul ornement de la
   charte, § 7), le sur-titre en petites capitales, l'indice en gros, la
   question en grand corps, la proposition en tableau à filets, Oui / Non en
   grand à droite. Ni carte, ni cartouche, ni fond teinté, ni fond nuit. */
.s-questions{padding-bottom:20px}
.bulletin{margin:26px 0 0;max-width:1100px}
.bulletin .bande,.tranchee-b .bande{height:18px;margin:0 0 30px}
.bulletin .b-grille,.tranchee-b .b-grille{display:grid;grid-template-columns:150px minmax(0,1fr) 230px;
  gap:18px 44px;align-items:start;padding-bottom:36px}
.b-num{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#5A6672;
  font-weight:600;margin:6px 0 14px}
.b-gauche{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.b-gauche .badge.gros{margin:0}
.bulletin h3{font-size:32px;line-height:1.14;margin:0 0 16px;color:var(--nuit);
  letter-spacing:-.018em;max-width:30ch}
.bulletin h3 .badge.petit,.tranchee-b h3 .badge.petit,.recap-q .badge.petit{vertical-align:middle;
  position:relative;top:-3px}
.bulletin h3 .badge.petit{min-width:50px;height:31px;font-size:17px;padding:0 11px;border-radius:7px}
.tranchee-b h3 .badge.petit{min-width:42px;height:26px;font-size:14.5px;padding:0 9px;border-radius:6px}
.bulletin .obs .badge.petit,.tranchee-b .obs .badge.petit,.b-prop .badge.petit{vertical-align:middle;
  position:relative;top:-1px}
.bulletin .obs{font-size:16.5px;line-height:1.62;color:var(--encre);max-width:66ch;margin:0 0 20px}
table.nomen.b-prop{max-width:66ch;margin:0}
table.nomen.b-prop td{padding:10px 14px 10px 0;font-size:15px}
table.nomen.b-prop td:first-child{width:150px}
table.nomen.b-prop tr:nth-child(2) td:first-child{color:var(--c)}
.b-vote{display:flex;flex-direction:column;gap:2px;padding-top:6px}
.choix{display:flex;align-items:center;gap:16px;background:none;border:0;padding:10px 0;
  font:inherit;font-weight:800;font-size:34px;line-height:1;color:var(--nuit);cursor:pointer;
  text-align:left;letter-spacing:-.01em;transition:transform .16s ease,color .16s ease}
.choix:hover{transform:translateX(5px);color:var(--c)}
.choix .case{width:28px;height:28px;border:2.5px solid var(--nuit);border-radius:3px;flex:none;
  position:relative;background:#fff;transition:background .16s,border-color .16s,transform .16s}
.choix:hover .case{border-color:var(--c);transform:scale(1.06)}
.choix.choisi .case{background:var(--c);border-color:var(--c)}
.choix.choisi .case::after{content:"";position:absolute;left:9px;top:2px;width:7px;height:15px;
  border:solid #fff;border-width:0 3.5px 3.5px 0;transform:rotate(45deg)}
.choix.choisi{color:var(--c)}
.choix:disabled{cursor:default;transform:none}
.choix:disabled:not(.choisi){color:#8A97A5}
.choix:disabled:not(.choisi) .case{border-color:#C8CDD2;background:#fff;transform:none}
.b-jauge{height:10px;background:#E1E4E9;margin-top:18px}
.b-jauge i{display:block;height:100%;width:0;background:var(--c);
  transition:width .7s cubic-bezier(.2,.7,.2,1)}
.b-chiffres{font-size:14.5px;color:#5A6672;margin-top:9px;line-height:1.45}
.b-chiffres b{color:var(--nuit)}
.b-vote .piste-attente{font-size:14px;color:var(--gris)}
.bulletin .sondage-resultat:empty{display:none}
/* le récapitulatif, comme les tableaux du livre blanc */
table.recap-prop{max-width:1000px;margin-top:14px}
table.recap-prop th{text-align:left;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);padding:0 14px 10px 0;border-bottom:2px solid var(--nuit)}
table.recap-prop td:first-child{width:90px;white-space:nowrap}
table.recap-prop td.recap-q{color:var(--nuit);font-weight:600}
table.recap-prop td.recap-date{color:var(--gris);white-space:nowrap;font-variant-numeric:tabular-nums}
.verdict-enquestion{color:#0B79B8}
.verdict-retenue{color:#1F7A34}
.verdict-ecartee{color:#8A2A2A}
/* les pistes tranchées : même grille, l'indice à gauche, le verdict à droite */
.tranchee-b{margin:26px 0 0;max-width:1100px}
.tranchee-b .b-gauche{padding-top:2px}
.tranchee-b h3{font-size:24px;line-height:1.2;margin:0 0 12px;color:var(--nuit);letter-spacing:-.012em;max-width:32ch}
.tranchee-b .obs{font-size:15.5px;line-height:1.6;color:var(--encre);max-width:70ch;margin:0 0 10px}
.tranchee-b .b-grille{padding-bottom:26px}
.b-verdict{display:flex;flex-direction:column;gap:6px;padding-top:2px}
.b-verdict b{font-size:30px;line-height:1;letter-spacing:-.01em}
.b-verdict span{font-size:14.5px;color:#5A6672}
@media (max-width:820px){
  .bulletin .b-grille,.tranchee-b .b-grille{grid-template-columns:1fr;gap:14px}
  .b-gauche{flex-direction:row;align-items:center;flex-wrap:wrap}
  .b-num{width:100%;margin-bottom:2px}
  .b-vote{flex-direction:row;flex-wrap:wrap;gap:6px 30px;padding-top:0}
  .b-vote .sondage-resultat{width:100%}
  .b-prop-l{grid-template-columns:1fr;gap:2px}
  .bulletin h3{font-size:25px}
}

/* 07/09/2026 : les sections reprises du livre blanc (tarification) */
.h3-livre{font-size:21px;margin:30px 0 10px;max-width:74ch}
.texte .tx-badge,.nomen .tx-badge,.note .tx-badge{display:inline-block;border-radius:5px;padding:2px 7px;
  font-weight:800;font-size:10.5px;letter-spacing:.03em;white-space:nowrap;vertical-align:1px;line-height:1.35}
table.nomen.livre{max-width:none;font-size:15px;margin:14px 0 26px;table-layout:fixed}
table.nomen.livre th{text-align:left;padding:0 16px 10px 0;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);border-bottom:2px solid var(--nuit);vertical-align:bottom;font-weight:600}
table.nomen.livre td{padding:13px 16px 13px 0;border-bottom:1px solid var(--trait);vertical-align:top;
  line-height:1.5;color:var(--encre);font-weight:400;white-space:normal;width:auto}
table.nomen.livre td:first-child{font-weight:400;color:var(--encre)}
table.nomen.livre td b{color:var(--nuit)}
table.nomen.livre td .sous{display:block;color:var(--gris);font-size:14px;margin-top:3px;line-height:1.45}
table.nomen.livre th.a-droite,table.nomen.livre td.a-droite{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.nomen.livre tr:last-child td{border-bottom:1px solid var(--trait)}
table.livre-t1 th:nth-child(1),table.livre-t1 td:nth-child(1){width:37%}
table.livre-t1 th:nth-child(2),table.livre-t1 td:nth-child(2){width:21%}
table.livre-t2 th:nth-child(1),table.livre-t2 td:nth-child(1){width:30%}
table.livre-t2 th:nth-child(2),table.livre-t2 td:nth-child(2){width:20%}
table.livre-t3 th:nth-child(1),table.livre-t3 td:nth-child(1){width:26%}
table.livre-t3 th:nth-child(2),table.livre-t3 td:nth-child(2){width:42%}
@media (max-width:760px){
  table.nomen.livre{table-layout:fixed;font-size:14px;min-width:480px}
  table.nomen.livre td{padding:10px 10px 10px 0}
  table.livre-t2{min-width:540px}
}
.note.livre-demande{margin-top:26px;max-width:80ch}

/* ---- tableaux larges sur mobile : la boite scrolle, pas la page --------
   07/09/2026, soir. Pose par build_site.py (_enrobe_tableaux), qui entoure
   CHAQUE <table> d'un <div class="tabla-scroll"> a l'ecriture des pages :
   aucun generateur de page n'a besoin de le savoir. Sans largeur minimale
   un tableau se resserre a s'en rendre illisible (un mot par ligne) sans
   jamais deborder ; avec une largeur minimale mais sans ce conteneur, c'est
   la PAGE entiere qui deborde. Les deux ensemble : le tableau garde une
   largeur confortable, et seule sa propre boite defile au doigt. */
.tabla-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tabla-scroll table{margin-left:0;margin-right:0}
@media (max-width:760px){
  table.recap-prop{min-width:640px}
}

/* =======================================================================
   L'ACCUEIL EN DEUX COLONNES : la démarche, et le volet actualités
   =======================================================================
   12/09/2026. « faire un truc plus vivant », « on garde la description du
   projet mais je voudrais direct, créer un volet droit avec les actualités
   (article de presse et sondages pour l'instant) », « fais un truc sexy et
   qui se fond bien avec le reste », « en disant qu'on parle déjà de nous »
   (Heddy). Le volet ne s'invente pas une langue : liseré de cadre en tête
   comme les questions de pistes.html, sur-titre mono en petites capitales
   comme les fiches de ligne, filets d'un item à l'autre comme la liste des
   noms, orange en seul accent. Ce qui bouge — le point qui bat, la jauge qui
   se remplit, le filet qui apparaît au survol — vient de ce qui est vivant
   pour de bon : des compteurs lus sur le serveur à l'ouverture de la page. */
/* LE VOLET OUVRE LA PAGE (12/09/2026 : « je veux ce bloc tout en haut »).
   Il n'est plus sous la démarche mais dans le héros, à droite du titre : on
   voit les articles et les votes sans faire défiler. La démarche reprend donc
   toute la largeur, comme avant. */
.hero-2c{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:50px;align-items:start}
.hero .hero-chiffres{margin-top:44px}
.hero .actus{position:static}

/* ---- LA COLONNE DES VOTES, à gauche et en grand (12/09/2026 au soir) ----
   « il faut mettre les votes + en avant en page d'accueil, trouver une catch
   phrase engageante [...] je veux que ce soit le premier truc qu'on voit »
   (Heddy). Les questions ne sont plus une liste de résultats posée en marge :
   c'est le titre de la page, et on y répond sur place. */
.hero-vote{min-width:0}
.hv-sur{
  display:flex;align-items:center;gap:10px;margin:0 0 16px;
  font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#9DB0C2}
.hero-vote h1{max-width:14ch}
.hv-accroche{font-size:clamp(16px,1.7vw,18.5px);color:#B9C5D1;
  max-width:46ch;margin:0 0 30px;text-align:left;
  -webkit-hyphens:manual;hyphens:manual}

.hv-liste{display:flex;flex-direction:column;gap:0}
.hv-q{padding:22px 0;border-top:1px solid #2E3F51}
.hv-q:first-child{border-top:0;padding-top:4px}
.hv-q:last-child{padding-bottom:4px}
.hv-tete{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.hv-tete .badge{flex:none;margin:0;position:relative;top:3px}
.hv-qq{margin:0;font-size:clamp(17px,1.9vw,20px);line-height:1.28;
  font-weight:800;letter-spacing:-.012em;color:#fff;max-width:34ch;
  text-align:left;-webkit-hyphens:manual;hyphens:manual}
/* ON NE VOTE PAS DEPUIS L'ACCUEIL (12/09/2026 au soir). « on ne peut pas
   proposer de voter sans détail, il faut promouvoir la page et les votes sans
   permettre de voter » (Heddy) : plus de boutons Oui / Non ici. L'accueil
   montre la question et l'état du vote, le bulletin reste sur la page où la
   question est posée en entier, avec son tracé et son chiffrage. */
.hv-det{
  margin-top:12px;font-size:13.5px;font-weight:700;color:#fff;
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  border-bottom:2px solid var(--c);padding-bottom:1px;
  transition:color .16s ease,border-color .16s ease}
.hv-det:hover{color:var(--accent);border-bottom-color:var(--accent)}
.hv-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px}
.hv-note{font-size:13px;color:#9DB0C2}
.hero-vote .hv-sur.hv-urgent{display:inline-flex;align-items:center;gap:9px;background:var(--accent);
  color:#16212B;padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:800;letter-spacing:.14em}
.hv-urgent .ac-live{background:#16212B}
.hv-rs{margin:16px 0 0;font-size:14.5px;color:#9DB0C2;line-height:1.5}
.hv-rs a{color:#fff;font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent)}
.hv-rs a:hover{color:var(--accent)}
.ac-social{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ac-social a{flex:1 1 160px;display:block;padding:12px 14px;border:1.5px solid rgba(255,255,255,.4);
  border-radius:var(--r);color:#fff;text-decoration:none;transition:background .18s ease,color .18s ease}
.ac-social a:hover{background:var(--accent);color:#16212B;border-color:var(--accent)}
.ac-social .rs{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.ac-social .at{display:block;font-size:16px;font-weight:800;margin-top:2px}
.ac-social a:hover .rs{opacity:.9}
.hv-det span{transition:transform .18s ease;display:inline-block}
.hv-det:hover span{transform:translateX(3px)}
.hv-res{margin-top:2px;min-height:4px}
.hv-jauge{height:9px;border-radius:5px;background:rgba(255,255,255,.12);
  overflow:hidden}
.hv-jauge i{display:block;height:100%;width:0;border-radius:5px;
  background:var(--c);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.hv-ch{display:flex;align-items:baseline;gap:14px;margin-top:8px;
  font-size:14px;color:#9DB0C2}
.hv-ch b{color:#fff;font-size:15.5px}
.hv-ch .hv-merci{margin-left:auto;font-style:normal;font-size:12.5px;
  color:#9DB0C2}
.hv-vide,.hv-merci{margin:0;font-size:13px;color:#9DB0C2;text-align:left}
.hv-merci{margin-top:7px}

/* le héros impose 21 px, 60ch et le fer justifié à tout paragraphe : la
   colonne des votes reprend ses propres mesures, comme le volet. */
.hero-vote p{font-size:inherit;max-width:none;margin:0;text-align:left;
  -webkit-hyphens:manual;hyphens:manual}
.hero-vote .hv-accroche{font-size:clamp(16px,1.7vw,18.5px);max-width:46ch;
  margin:0 0 30px}
.hero-vote .hv-sur{font-size:11.5px;margin:0 0 16px}
.hero-vote .hv-qq{font-size:clamp(17px,1.9vw,20px);max-width:34ch}
.hero-vote .hv-vide,.hero-vote .hv-merci{font-size:13px;color:#9DB0C2}
.hero-vote .hv-merci{margin-top:7px}

/* ---- le volet droit porte maintenant le propos introductif ------------- */
.ac-titre{font-size:clamp(19px,2vw,23px);line-height:1.16;
  letter-spacing:-.016em;margin:0 0 10px;color:#fff;max-width:22ch}
.ac-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.ac-actions .bouton{font-size:14px;padding:10px 18px}

/* LE VOLET EST UN BLOC NUIT, PAS UNE CARTE BLANCHE (12/09/2026 au soir).
   « j'ai dit de garder le bleu et l'esprit global et tu me sors un truc tout
   blanc » (Heddy). Il avait raison : posé en blanc sur une section blanche, le
   volet ne se voyait pas et ne ressemblait a rien du site. Il reprend donc le
   bleu d'encre des bandeaux — celui du menu, du héros et de la section
   « Où en est Marseille » —, le liseré des douze couleurs en tête, et les
   jauges à la couleur de leur ligne. C'est la même langue, en négatif. */
.actus-carte{
  background:linear-gradient(176deg,rgba(33,47,62,.93) 0%,rgba(20,30,40,.95) 62%);
  backdrop-filter:saturate(130%) blur(6px);
  -webkit-backdrop-filter:saturate(130%) blur(6px);
  border:1px solid #3A4E63;border-radius:12px;color:#E8EDF2;
  overflow:hidden;box-shadow:0 26px 54px rgba(0,0,0,.34)}
.actus-carte .liseret{height:5px}
.actus-bloc{padding:20px 22px 22px}
.actus-bloc + .actus-bloc{border-top:1px solid #2C3B4A;
  background:rgba(255,255,255,.035)}

.ac-sur{
  display:flex;align-items:center;gap:9px;margin:0 0 9px;
  font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#93A2B2}
.ac-live{
  width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
  animation:ac-pulse 2.6s ease-out infinite}
@keyframes ac-pulse{
  0%{box-shadow:0 0 0 0 rgba(242,140,0,.55)}
  70%{box-shadow:0 0 0 9px rgba(242,140,0,0)}
  100%{box-shadow:0 0 0 0 rgba(242,140,0,0)}}
.actus h3{
  font-size:21px;line-height:1.15;letter-spacing:-.016em;
  margin:0 0 6px;color:#fff}
.ac-chap{font-size:13.5px;line-height:1.5;color:#A6B3C0;margin:0 0 15px}

/* ---- les retombées, une ligne par article ----------------------------- */
.ac-liste{list-style:none;margin:0;padding:0}
.ac-item{position:relative;border-top:1px solid #2C3B4A;padding:13px 0 12px}
.ac-item:first-child{border-top:0;padding-top:0}
.ac-item::before{
  content:"";position:absolute;left:-22px;top:11px;bottom:9px;width:3px;
  background:var(--accent);opacity:0;transition:opacity .18s ease}
.ac-item:hover::before{opacity:1}
.ac-meta{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ac-med{font-weight:800;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:#fff}
.ac-gen{font-weight:700;font-size:9.5px;letter-spacing:.08em;color:#A6B3C0;
  text-transform:uppercase;border:1px solid #33465A;border-radius:20px;
  padding:1px 8px}
.ac-date{font-size:11.5px;color:#8B9AAA;margin-left:auto;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-t{display:block;font-size:15.5px;line-height:1.33;font-weight:700;
  color:#fff;text-decoration:none;transition:color .16s ease}
a.ac-t:hover{color:var(--accent)}
.ac-ext{font-size:11.5px;color:#8B9AAA;margin-left:5px;
  display:inline-block;transition:transform .18s ease,color .18s ease}
a.ac-t:hover .ac-ext{color:var(--accent);transform:translate(2px,-2px)}

/* ---- les questions ouvertes, en lecture seule ------------------------- */
.ac-q{border-top:1px solid #2C3B4A;padding:14px 0 2px}
.ac-q:first-of-type{border-top:0;padding-top:0}
.ac-q-t{display:flex;align-items:flex-start;gap:9px;margin-bottom:9px}
.ac-q-t .badge{flex:none;margin:0;position:relative;top:1px}
.ac-q-q{margin:0;font-size:14.5px;line-height:1.34;font-weight:700;
  color:#fff}
.ac-res{min-height:20px}
.ac-jauge{height:7px;border-radius:4px;background:rgba(255,255,255,.13);overflow:hidden}
.ac-jauge i{display:block;height:100%;width:0;border-radius:4px;
  background:var(--c,var(--accent));
  transition:width .9s cubic-bezier(.2,.7,.2,1)}
.ac-ch{display:flex;align-items:baseline;gap:11px;margin-top:7px;
  font-size:12.5px;color:#93A2B2}
.ac-ch b{color:#fff;font-size:13.5px}
/* pas de compteur de votes : seuls les pourcentages s'affichent */
.ac-attente{font-size:12.5px;color:#93A2B2}

.ac-plus{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:13.5px;font-weight:700;text-decoration:none;color:#fff;
  border-bottom:2px solid var(--accent);padding-bottom:1px}
.ac-plus:hover{color:var(--accent)}
.ac-plus span{display:inline-block;transition:transform .18s ease}
.ac-plus:hover span{transform:translateX(3px)}

/* le regroupement des sondages, pour les aligner quand la carte s'élargit */
.ac-sonds{display:block}

@media (max-width:1100px){
  /* Le volet passe sous le titre. Il ne se contente pas de descendre : une
     colonne de 366 px posée à gauche d'un écran de 1 000 px laisse un vide à
     droite qui ressemble à un oubli. La carte prend donc toute la largeur, et
     ce qui était empilé s'aligne — deux articles de front, trois sondages. */
  .hero-2c{grid-template-columns:1fr;gap:38px}
  .hv-qq{font-size:19px}
  .actus-bloc{padding:22px 26px 24px}
  .ac-chap{max-width:70ch}
  .ac-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 36px;align-items:start}
  .ac-item:nth-child(2){border-top:0;padding-top:0}
  .ac-item::before{left:-14px}
  .ac-sonds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 30px;align-items:start}
  .ac-sonds .ac-q{border-top:0;padding-top:0}
  /* côte à côte, une question d'une ligne posait sa jauge plus haut que les
     deux autres : le plancher rétablit la même ligne de départ. */
  .ac-sonds .ac-q-t{min-height:48px;align-items:flex-start}
}
@media (max-width:760px){
  /* retour à l'empilement, et les filets reprennent leur rôle de séparateur */
  .ac-liste,.ac-sonds{grid-template-columns:1fr;gap:0}
  .ac-item:nth-child(2){border-top:1px solid #2C3B4A;padding-top:13px}
  .ac-sonds .ac-q{border-top:1px solid #2C3B4A;padding-top:14px}
  .ac-sonds .ac-q:first-child{border-top:0;padding-top:0}
  .actus-bloc{padding:20px 22px 22px}
  .ac-item::before{left:-22px}
}
@media (prefers-reduced-motion:reduce){
  .ac-live{animation:none}
  .ac-jauge i{transition:none}
}

/* ---- le volet vit dans le héros : lui rendre ses propres mesures --------
   `.hero p` (27/08 et 04/09 : « justifier le texte ») impose 21 px, 60ch et
   le fer justifié à tout paragraphe du héros. Dans une colonne de 366 px ça
   donne des rivières blanches et un sur-titre de 21 px. On redonne au volet
   ses valeurs sans toucher à la règle générale du site. */
.actus p{font-size:inherit;line-height:inherit;color:inherit;max-width:none;
  margin:0;text-align:left;-webkit-hyphens:manual;hyphens:manual}
.actus .ac-sur{font-size:10.5px;color:#93A2B2;margin:0 0 9px}
.actus .ac-chap{font-size:13.5px;line-height:1.5;color:#A6B3C0;margin:0 0 15px}
.actus .ac-q-q{font-size:14.5px;line-height:1.34;font-weight:700;color:#fff}

/* ---- LA DATE DE DERNIÈRE MISE À JOUR (14/09/2026) ----------------------
   « indiquer dans la page du livre blanc la date de dernière mise à jour et
   la mettre aussi sur la page d'accueil, bien en évidence sans tout casser »,
   puis « JUSTE LA DATE, pas d'info supplémentaire » (Heddy). Elle est lue sur
   le fichier livré, donc elle ne peut pas vieillir. Sur la page du livre
   blanc : un bloc à filet orange, le seul ornement. Sur l'accueil : une ligne
   sous les deux boutons du volet, dans la même langue que le reste. */
/* Le filet est à l'encre, pas à l'orange : c'est déjà la règle des cartes de
   méthode de l'accueil — l'orange crie et ne désigne rien ici. */
.maj-date{
  display:inline-flex;flex-direction:column;gap:3px;
  border-left:4px solid var(--nuit);padding:2px 0 2px 14px;margin:0 0 18px}
.maj-date span{
  font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.maj-date b{font-size:22px;line-height:1.1;color:var(--nuit);letter-spacing:-.01em}

.actus .ac-maj{margin-top:14px;font-size:13px;color:#93A2B2}
.actus .ac-maj b{color:#fff;font-weight:700}

/* LA NOUVELLE, PAS LE DEPOUILLEMENT (19/09/2026). « j'ai pas dit d'annoncer
   les résultats du sondage mais d'annoncer les changements induits en
   "nouvelle" » (Heddy) : sous le titre de chaque changement, une ligne dit ce
   qu'il change. Sous .hero-vote, sinon le héros lui impose son corps. */
.hv-quoi{margin:8px 0 0}
.hero-vote .hv-quoi{margin:9px 0 0;font-size:14.5px;line-height:1.45;
  color:#B9C5D1;max-width:48ch}

/* (30/09) la page du livre blanc dit ce que la dernière mise à jour change */
.maj-date .maj-quoi{display:block;margin-top:8px;font-style:normal;font-size:14.5px;line-height:1.45;color:var(--encre);max-width:52ch}
.maj-date .maj-quoi a{color:var(--accent)}

/* (30/09) l'accueil annonce le budget par priorités : « À la une » en tête des actualités */
.une{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin:0 0 26px;padding:18px 20px;background:var(--nuit);color:#DDE5EC;border-radius:var(--r);text-decoration:none}
.une:hover{background:var(--nuit-2)}
.une-tag{font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--nuit);background:#fff;border-radius:4px;padding:5px 8px;white-space:nowrap}
.une-txt{font-size:15.5px;line-height:1.5}
.une-txt b{color:#fff;font-weight:800}
.une-fl{font-size:26px;color:#fff}
@media (max-width:700px){.une{grid-template-columns:minmax(0,1fr);gap:10px;padding:16px}.une-fl{display:none}}

/* (30/09) l'accueil : le ruban du budget dans le héros, « un aperçu de la frise » */
.hv-ruban{display:block;margin:6px 0 22px;padding:18px 18px 16px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);background:rgba(255,255,255,.05);text-decoration:none;color:inherit}
.hv-ruban:hover{background:rgba(255,255,255,.09)}
.hv-ruban .bud-gt > span{color:#AAB6C2}
.hv-ruban .bud-gt b{color:#fff}
.hv-ruban .bud-barre{height:44px}
.hv-ruban .bud-seg b{font-size:13px}
.hv-chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.hv-chiffres b{display:block;font-size:clamp(22px,2.4vw,30px);line-height:1;font-weight:800;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hv-chiffres span{display:block;margin-top:5px;font-size:13px;color:#AAB6C2;line-height:1.3}
@media (max-width:700px){.hv-ruban .bud-groupes{flex-direction:column;align-items:flex-start;gap:12px}.hv-ruban .bud-groupe{flex:none;width:var(--w)}.hv-ruban .bud-gt{justify-content:flex-start}.hv-chiffres{grid-template-columns:1fr;gap:10px}}

/* (01/10/2026) LA CARTE D'UNE QUESTION OUVERTE. « 2 cartes qui iront directement dans la page
   sondage » (Heddy, 01/10) : entre la question et son détail, « pour que les gens votent en
   connaissance de cause » ; en gris ce que la ligne ne desservirait plus si cet itinéraire était
   adopté, en couleur la ligne proposée (reseaux-sociaux/outils/carte_b11_b12.py, site_maj25.py) ;
   un clic l'ouvre en grand. Le « ni carte » du 07/09 ne vaut plus pour une question qui change
   un tracé. */
.b-carte{margin:4px 0 24px;max-width:640px}
.b-carte a{display:block}
.b-carte img{display:block;width:100%;height:auto;border:1px solid var(--gris-clair);border-radius:8px}
.b-carte figcaption{font-size:13.5px;line-height:1.5;color:#5A6672;margin:9px 0 0;max-width:66ch}

/* LE BUDGET, PRIORITE PAR PRIORITE (29/09/2026). « Sur le site décomposer ça
   de manière sexy » (Heddy). Trois chiffres, puis le ruban : un segment par
   ligne, à sa couleur, au prorata de son coût, comme le liseré du site ; le
   financé est rayé. Puis une carte par priorité, coiffée de son propre
   liseré, l'horizon en pointillé, et ce que couvrirait le versement
   mobilité. Les données viennent de corrige_budget.py (site_maj24.py). */
.bud{margin-top:40px}
.bud > h3{font-size:clamp(23px,2.6vw,28px);margin-bottom:10px}
.bud-chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  margin:26px 0 34px;max-width:980px}
.bud-chiffres > div{position:relative;padding-top:17px}
.bud-chiffres > div::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;
  background:var(--grad,var(--nuit))}
.bud-chiffres b{display:block;font-size:clamp(36px,4.6vw,50px);line-height:1;font-weight:800;
  color:var(--nuit);letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.bud-chiffres > div > span{display:block;margin-top:9px;font-size:15px;line-height:1.4;color:var(--gris)}

.bud-ruban{margin:0 0 30px}
/* (01/10) « les trois priorités ne sont pas facilement distinguables » : chaque
   priorité du ruban est un panneau à part, fond clair, coins ronds, son numéro
   dans une pastille d'encre, son rang et son total en tête, sa barre dessous.
   Des cadres de trois couleurs ont été essayés et refusés (« ni fait ni à
   faire ») : la couleur reste aux lignes. */
.bud-groupes{display:flex;gap:14px;align-items:flex-end}
.bud-groupe{flex-grow:var(--n);flex-shrink:1;flex-basis:0;min-width:0;
  background:var(--gris-clair);border-radius:10px;padding:13px 13px 13px}
.bud-gt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:0 10px;margin:0 1px 10px}
.bud-gt .bud-num{width:20px;height:20px;font-size:11px;margin-right:8px;vertical-align:-5px;font-style:normal}
.bud-gt > span{font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.bud-gt b{font-size:17px;font-weight:800;color:var(--nuit);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.bud-barre{display:flex;gap:3px;height:54px;border-radius:5px;overflow:hidden}
.bud-seg{flex-grow:var(--n);flex-shrink:1;flex-basis:0;min-width:0;background:var(--c);color:var(--t);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  overflow:hidden;white-space:nowrap;line-height:1.1}
.bud-seg b{font-size:14px;font-weight:800;letter-spacing:.01em}
.bud-seg small{font-size:11.5px;font-weight:600;opacity:.9;font-variant-numeric:tabular-nums}
.bud-seg.bud-finance{background:repeating-linear-gradient(-45deg,var(--c) 0 7px,var(--r) 7px 11px)}
.bud-leg{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:14px;color:var(--gris);
  line-height:1.4}
.bud-raye{flex:none;width:22px;height:14px;border-radius:3px;
  background:repeating-linear-gradient(-45deg,#95C11F 0 4px,#C5DF80 4px 7px)}

.bud-prios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.bud-prio{position:relative;background:#fff;border:1px solid var(--trait);border-top:0;
  border-radius:0 0 var(--r) var(--r);padding:24px 22px 20px}
.bud-prio::before{content:'';position:absolute;left:-1px;right:-1px;top:0;height:6px;
  background:var(--grad)}
.bud-rang{font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin:0 0 6px}
.bud-prio h4,.bud-horizon h4{font-size:19px;line-height:1.3;font-weight:700;color:var(--nuit);
  margin:0 0 12px}
.bud-prio h4 .badge,.bud-horizon h4 .badge{vertical-align:2px}
.bud-somme{margin:0 0 16px;padding-bottom:15px;border-bottom:1px solid var(--trait)}
.bud-somme b{display:block;font-size:36px;line-height:1;font-weight:800;color:var(--nuit);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bud-somme > span{display:block;margin-top:7px;font-size:14.5px;color:var(--gris)}
.bud-lignes{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.bud-lignes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 11px;align-items:start}
.bud-lignes li > .badge{margin-top:1px}
.bud-lignes p{margin:0;text-align:left}
.bud-term{font-weight:700;font-size:15.5px;line-height:1.3;color:var(--nuit)}
.bud-km{margin-top:3px!important;font-size:14.5px;color:var(--encre);font-variant-numeric:tabular-nums}
.bud-km b{font-weight:800;color:var(--nuit)}
.bud-fin{font-weight:800;color:var(--st-vert)}
.bud-note{margin-top:5px!important;font-size:13.5px;line-height:1.45;color:var(--gris)}

.bud-horizon{margin-top:20px;border:1.5px dashed #B3BDC7;border-radius:var(--r);padding:22px 22px 20px}
.bud-horizon .bud-lignes{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 22px}
.bud-horizon .bud-lignes .badge{opacity:.55}
.bud-horizon .bud-term,.bud-horizon .bud-km,.bud-horizon .bud-km b{color:var(--gris)}
.bud-t2{margin-top:20px;border-style:solid;border-color:var(--trait)}
.bud-t2 .bud-lignes{grid-template-columns:minmax(0,1fr);max-width:86ch}
.bud-t2 .bud-lignes .badge{opacity:1}
.bud-t2 .bud-term,.bud-t2 .bud-km,.bud-t2 .bud-km b{color:var(--nuit)}
.bud-t2-m{display:inline-block;margin-left:10px;font-size:14px;font-weight:600;color:var(--gris)}
.bud-hb-note{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--trait);font-size:14px;
  line-height:1.5;color:var(--gris);max-width:92ch}
.bud-fine{display:inline-block;width:.2em}

.bud-vm{margin-top:26px;background:var(--nuit);color:#DDE5EC;border-radius:var(--r);padding:24px 24px 22px}
.bud-vm .bud-rang{color:#93A2B1}
.bud-vm-t{margin:0 0 20px;font-size:15.5px;line-height:1.55;max-width:80ch;text-align:justify;
  -webkit-hyphens:auto;hyphens:auto}
/* (30/09) les leviers : deux cartes sur le fond nuit, la jauge du versement
   mobilité (ce qui est demandé, sur ce que rapporterait le taux de Paris),
   puis « voté n'est pas financé », trois cas ; les cartes des priorités portent
   leur numéro et leur part du total. */
.bud-vm h4{font-size:21px;line-height:1.25;font-weight:800;color:#fff;margin:0 0 10px;letter-spacing:-.01em}
.bud-leviers{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;margin-bottom:18px}
.bud-levier{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);
  padding:18px 18px 16px}
.bud-levier p{margin:0;text-align:left}
.bud-lev-t{font-size:15.5px;font-weight:700;line-height:1.3;color:#fff}
.bud-lev-n{margin-top:6px!important;font-size:15px;color:#AAB6C2}
.bud-lev-n b{font-size:30px;font-weight:800;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bud-lev-x{margin-top:8px!important;font-size:13.5px;line-height:1.5;color:#DDE5EC}
.bud-levier .bud-jauge{margin-top:14px}
.bud-lev-autres{margin:0;font-size:13.5px;line-height:1.5;color:#AAB6C2;max-width:92ch}
.bud-lev-autres b{color:#DDE5EC}
.bud-j-lib{display:grid;grid-template-columns:var(--p) minmax(0,1fr);gap:0;margin-bottom:6px;
  font-size:13px;line-height:1.3;color:#AAB6C2}
.bud-j-lib > span:last-child{text-align:right}
.bud-j-lib b{color:#fff;font-weight:800;font-size:15px}
.bud-j-barre{height:16px;border-radius:4px;background:repeating-linear-gradient(-45deg,
  rgba(255,255,255,.14) 0 5px,rgba(255,255,255,.05) 5px 9px);overflow:hidden}
.bud-j-barre i{display:block;height:100%;width:var(--p);background:var(--accent);border-radius:4px 0 0 4px}

.bud-vote{margin:0 0 26px;padding:22px 22px 20px;background:var(--gris-clair);border-radius:var(--r)}
.bud-vote h4{font-size:21px;line-height:1.25;font-weight:800;color:var(--nuit);margin:0 0 8px;
  letter-spacing:-.01em}
.bud-vote-t{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--encre);max-width:80ch}
.bud-cas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bud-cas > div{background:#fff;border:1px solid var(--trait);border-radius:var(--r);padding:16px 16px 14px;
  border-top:4px solid var(--gris)}
.bud-cas > .bud-cas-ok{border-top-color:var(--st-vert)}
.bud-cas > .bud-cas-vote{border-top-color:#C8102E}
.bud-cas > .bud-cas-etude{border-top-color:var(--t1)}
.bud-cas p{margin:0;text-align:left}
.bud-cas-st{font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:8px!important}
.bud-cas-ok .bud-cas-st{color:var(--st-vert)}
.bud-cas-vote .bud-cas-st{color:#C8102E}
.bud-cas-etude .bud-cas-st{color:#B26400}
.bud-cas-l{font-size:15px;font-weight:700;line-height:1.35;color:var(--nuit)}
.bud-cas-l .badge{vertical-align:1px}
.bud-cas-m{margin-top:4px!important;font-size:22px;font-weight:800;color:var(--nuit);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.bud-cas-t{margin-top:7px!important;font-size:13.5px;line-height:1.45;color:var(--gris)}
.bud-num{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:9px;border-radius:50%;
  background:var(--nuit);color:#fff;font-weight:800;font-size:12px;letter-spacing:0;vertical-align:-6px}

/* (01/10) les cinq chiffres du réseau, dans la colonne du budget */
.hero-vote .hero-chiffres{margin-top:30px;gap:14px}
.hero-vote .hero-chiffres div{padding-top:10px;border-top-width:4px}
.hero-vote .hero-chiffres b{font-size:clamp(24px,2.6vw,30px)}
.hero-vote .hero-chiffres span{font-size:12.5px}
/* l'accueil : les mêmes panneaux sur le fond nuit, plus serrés, et les noms
   des segments sur deux lignes plutôt que coupés */
.hv-ruban .bud-groupes{gap:10px}
.hv-ruban .bud-groupe{background:rgba(255,255,255,.08);padding:9px 9px 9px;border-radius:9px}
.hv-ruban .bud-gt{margin-bottom:8px}
.hv-ruban .bud-gt .bud-num{background:#fff;color:var(--nuit)}
.hv-ruban .bud-seg{white-space:normal}
.hv-ruban .bud-seg b{font-size:12.5px;line-height:1.05;text-align:center;padding:0 2px}
/* (02/10, « la priorité 3 n'est pas à la même hauteur que les 2 autres », « c'est parce qu'il n'y a pas
   de renvoi de ligne mais c'est absurde », « réorganise l'info pour faire un truc plus cohérent ») : sur
   l'accueil, les trois panneaux disent la même chose dans le même ordre, de haut en bas — le rang, le
   montant, la barre — et ont la même hauteur. Le rang et le montant partageaient une ligne quand le
   panneau était assez large (la priorité 3) et passaient sur deux sinon (la 1, la 2). Sur un téléphone,
   les panneaux sont l'un sous l'autre, tous de la même largeur : rang et montant y restent sur une ligne. */
@media (min-width:701px){
  .hv-ruban .bud-groupes{align-items:stretch}
  .hv-ruban .bud-groupe{display:flex;flex-direction:column}
  .hv-ruban .bud-gt{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px}
  .hv-ruban .bud-barre{margin-top:auto}
}

@media (max-width:980px){
  .bud-prios{grid-template-columns:1fr}
  .bud-horizon .bud-lignes{grid-template-columns:1fr}
  .bud-cas{grid-template-columns:1fr}
  .bud-leviers{grid-template-columns:1fr}
}
@media (max-width:700px){
  .bud-chiffres{grid-template-columns:1fr;gap:16px;margin:22px 0 28px}
  .bud-chiffres > div{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
    align-items:baseline;gap:0 14px;padding-top:13px}
  .bud-chiffres > div::before{height:4px}
  .bud-chiffres b{font-size:31px}
  .bud-chiffres > div > span{margin-top:0;font-size:14px;line-height:1.3}
  /* LE RUBAN SE DEPLIE : les trois priorités l'une sous l'autre, à la même
     échelle (la plus chère fait toute la largeur) ; les lignes gardent leur
     prorata dans chaque barre. */
  .bud-groupes{flex-direction:column;align-items:stretch;gap:12px}
  .bud-groupe,.hv-ruban .bud-groupe{flex:none;width:auto}
  .bud-gt,.hv-ruban .bud-gt{justify-content:space-between}
  .bud-barre{height:48px;width:var(--w)}
  .bud-seg b{font-size:13px}
  .bud-seg small{font-size:10.5px}
  .bud-prio{padding:22px 18px 18px}
  .bud-vm{padding:22px 18px 20px}
  .bud-vm-t{text-align:left}
  .bud-vote{padding:18px 16px 16px}
  .bud-leviers{grid-template-columns:1fr}
}

/* ---- (07/10/2026) L'ACCUEIL REFAIT : À GAUCHE LES VOTES ET LA PÉTITION, À DROITE LE RESTE ----
   « refaire la page d'accueil : à [gauche] un truc SEXY pour les sondages actuels + la pétition
   métro, à droite le reste » (Heddy). Les deux questions sont deux cartouches à la couleur de
   leur ligne, dans les mots des cartes du 01/10 (« prolongé jusqu'à La Timone ? »), et on y
   répond sur place ; la pétition Rénov'Stations suit, à l'orange ; le budget, la démarche et
   les réseaux passent dans le volet de droite ; les cinq nombres du réseau sous les deux. */
.hero-vote h1{max-width:18ch}
/* (07/10, « trop de bleu ça m'agresse ») : l'accent du héros est l'orange du logo, pas le bleu ; la pastille
   du kicker redevient sobre, le bouton choisi prend la couleur de sa ligne */
.hv-votre{font-style:normal;color:var(--t1)}
.hv-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.hv-carte{position:relative;min-width:0;padding:20px 20px 18px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-top:6px solid var(--c)}
.hv-carte-tete{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.hv-carte-tete .badge{margin:0;flex:none}
.hero-vote .hv-pro{font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#AAB6C2;line-height:1.3}
.hero-vote .hv-dest{font-size:clamp(26px,2.6vw,34px);line-height:1.02;font-weight:800;letter-spacing:-.02em;
  color:#fff;margin:0 0 8px}
.hero-vote .hv-via{font-size:14.5px;line-height:1.4;font-style:italic;color:#B9C5D1;margin:0 0 16px}
.hv-choix{display:flex;gap:10px;margin:0 0 14px}
.hv-choix .choix{flex:1;padding:12px 10px;border:2px solid rgba(255,255,255,.55);border-radius:9px;
  background:transparent;color:#fff;font:800 17px/1 'Barlow',sans-serif;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.hv-choix .choix:hover:not(:disabled){background:#fff;color:var(--nuit);border-color:#fff}
.hv-choix .choix:disabled{cursor:default;opacity:.45}
.hv-choix .choix.choisi{opacity:1;background:var(--c);border-color:var(--c);color:#fff}
.hv-carte .hv-res{min-height:34px}
.hv-carte .hv-ch{flex-wrap:wrap}
.hero-vote .hv-det{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13.5px;
  font-weight:700;color:#fff;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.35)}
.hv-petition{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:18px;
  padding:18px 20px;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-left:6px solid var(--t1)}
.hv-pet-txt{min-width:0}
.hero-vote .hv-pet-titre{font-size:clamp(20px,2vw,24px);line-height:1.1;font-weight:800;letter-spacing:-.016em;
  color:#fff;margin:4px 0 6px}
.hero-vote .hv-pet-chap{font-size:14px;line-height:1.45;color:#B9C5D1;margin:0;max-width:52ch}
.hv-pet-cta{flex:none;white-space:nowrap}
.actus .hv-ruban{margin:4px 0 14px;padding:14px 14px 12px}
.hero .hero-chiffres{max-width:none;margin-top:46px}
@media (max-width:1024px){.hero .hero-chiffres{margin-top:38px}}
@media (max-width:700px){
  .hv-cartes{grid-template-columns:1fr;gap:14px}
  .hv-petition{flex-direction:column;align-items:flex-start;gap:14px}
  }
.hero-vote .hv-sur.hv-urgent{background:transparent;color:#AAB6C2;padding:0;border-radius:0;font-weight:700;font-size:11.5px}
.hv-urgent .ac-live{background:var(--t1)}
.actus .ac-plus{border-bottom-color:rgba(255,255,255,.35)}
.actus .ac-plus:hover{color:#fff;border-bottom-color:#fff}
/* (07/10) « lever la pastille au-dessus de "Marseille Mobilité, c'est votre réseau" et faire tenir cette même
   phrase sur une seule ligne » : plus de kicker, le titre au-dessus des deux colonnes, sur une ligne dès que
   les colonnes sont côte à côte ; « les deux votes n'ont pas besoin de prendre AUTANT de place » : cartouches
   resserrés, indice, destination et boutons plus petits */
.hero .hv-h1{max-width:none;margin:0 0 30px;font-size:clamp(30px,4.3vw,56px);line-height:1.04}
@media (min-width:1025px){.hero .hv-h1{white-space:nowrap}}
.hero-vote .hv-accroche{margin:0 0 22px}
.hv-cartes{gap:14px}
.hv-carte{padding:14px 16px 13px;border-top-width:5px}
.hv-carte-tete{gap:10px;margin-bottom:8px}
.hv-carte-tete .badge.gros{min-width:54px;height:36px;font-size:18px;border-radius:9px;padding:0 10px}
.hero-vote .hv-dest{font-size:clamp(21px,2vw,26px);margin:0 0 4px}
.hero-vote .hv-via{font-size:13.5px;margin:0 0 11px}
.hv-choix{gap:8px;margin:0 0 10px}
.hv-choix .choix{padding:9px 8px;font-size:15px;border-radius:8px}
.hv-carte .hv-res{min-height:26px}
.hv-carte .hv-jauge{height:7px}
.hv-carte .hv-ch{margin-top:6px;font-size:13px}
.hv-carte .hv-ch b{font-size:14px}
.hero-vote .hv-det{margin-top:8px;font-size:13px}
.hv-petition{margin-top:14px;padding:14px 18px}
/* les cinq nombres du réseau reviennent sous les votes, pour que les deux colonnes se répondent ;
   le ruban du budget se resserre dans le volet */
.hero .hero-chiffres{max-width:none;margin-top:30px;padding-top:20px;gap:12px}
.hero-vote .hero-chiffres b{font-size:clamp(24px,2.4vw,32px)}
.hero-vote .hero-chiffres span{font-size:12.5px}
.actus .hv-ruban{padding:12px 12px 10px}
@media (max-width:1024px){.hero-vote .hero-chiffres{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:820px){.hero-vote .hero-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* (07/10, « le budget à droite tu as vraiment fait le minimum syndical ») : le volet dit d'abord le total et
   ce qu'il reste à trouver, puis une rangée par priorité (rang, lignes, montant, barre à l'échelle du
   total), la légende du hachuré (déjà financé) et un vrai bouton */
.actus .hv-ruban{margin:6px 0 16px;padding:16px 16px 14px}
.bud-hero{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.bud-hero b{font-size:clamp(32px,2.8vw,40px);font-weight:800;line-height:1;letter-spacing:-.02em;color:#fff;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.bud-hero span{flex:1 1 150px;font-size:13.5px;line-height:1.4;color:#AAB6C2}
.bud-hero strong{color:#fff;font-weight:700}
.bud-lignes{display:flex;flex-direction:column;gap:12px}
.bud-rt{display:flex;align-items:center;gap:8px;margin:0 0 6px;min-width:0}
.bud-rt .bud-num{width:20px;height:20px;font-size:11px;margin:0;font-style:normal;flex:none}
.bud-rn{font-family:'DejaVu Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#AAB6C2;white-space:nowrap}
.bud-rl{font-style:normal;font-size:13px;font-weight:700;color:#fff;min-width:0}
.bud-rt > b{margin-left:auto;font-size:15.5px;font-weight:800;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.bud-ligne .bud-barre{width:var(--w);height:32px}
.bud-ligne .bud-seg b{font-size:12.5px}
.bud-leg-h{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;line-height:1.4;color:#AAB6C2}
.bud-leg-h .bud-raye{flex:none}
.actus .ac-actions{margin-top:0}
/* X et Bluesky sous les cinq nombres, pour que la colonne des votes descende aussi bas que le volet */
.hv-social{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
.hv-social .ac-social{margin-top:10px;max-width:520px}
/* (07/10, « c'est pas aligné ça me stresse ») : les deux cartouches partagent les mêmes rangées (sous-grille),
   une ligne de « via » sur deux lignes ou une réponse enregistrée ne décalent plus les boutons, la jauge ni le
   lien de l'autre carte ; « Votre réponse est enregistrée » passe sous les pourcentages, à gauche */
.hv-carte{display:grid;grid-template-rows:auto auto auto auto auto auto;align-content:start}
@supports (grid-template-rows:subgrid){.hv-carte{grid-template-rows:subgrid;grid-row:span 6}}
.hv-carte > *{align-self:start;min-width:0}
.hero-vote .hv-via{min-height:38px}
.hv-carte .hv-res{min-height:60px}
.hv-carte .hv-ch{align-items:baseline}
.hv-carte .hv-ch .hv-merci{flex-basis:100%;margin:3px 0 0;text-align:left}
.hero-vote .hv-det{justify-self:start}
@media (max-width:700px){.hv-carte{display:block}.hero-vote .hv-via{min-height:0}.hv-carte .hv-res{min-height:0}}

/* ==========================================================================
   LEVÉLOÙ DANS LE MENU ET À LA UNE (09/10/2026, site_maj28.py).
   « trouver un moyen sexy et voyant de renvoyer vers le site (dans le menu
   officiel, peut être un bouton comme celui du livre blanc) + dans le bandeau
   news, tu rétrogrades les sondages ». L'identité de levéloù : « levél » en
   blanc, « où » au vert du T3, un point vert qui bat (en direct).
   ========================================================================== */
.lv-pouls{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--t3);
  box-shadow:0 0 0 0 rgba(149,193,31,.7);animation:lv-bat 1.8s ease-out infinite;flex:none}
@keyframes lv-bat{0%{box-shadow:0 0 0 0 rgba(149,193,31,.7)}70%{box-shadow:0 0 0 7px rgba(149,193,31,0)}
  100%{box-shadow:0 0 0 0 rgba(149,193,31,0)}}
@media (prefers-reduced-motion:reduce){.lv-pouls{animation:none}}
.nav .tele.lv-tele{display:inline-flex;align-items:center;gap:7px;background:transparent;color:#fff;
  border:2px solid var(--t3);padding:7px 12px 7px 10px;font-size:13px;letter-spacing:0;text-transform:none;
  font-weight:800;margin-right:2px}
.nav .tele.lv-tele .lv-mot{font-weight:800}
.nav .tele.lv-tele span{color:var(--t3)}
.nav .tele.lv-tele:hover{background:var(--t3);color:var(--nuit)}
.nav .tele.lv-tele:hover span{color:#fff}
.nav .tele.lv-tele:hover .lv-pouls{background:#fff}
.nav ul li.lv-mobile{display:none}
/* La barre doit tenir dans la largeur utile (1 132 px) : le mot-marque, les huit entrées, levéloù et le livre
   blanc. Au-dessus de 1 180 px, le menu se resserre (entrées sans écart, moins d'interlettrage, mot-marque à
   25 px) ; en dessous, il passe en menu déroulant, comme il le faisait sous 1 024 px. Avant ce jour, entre 1 025 et
   1 180 px, la barre débordait déjà de la page (mesuré : 1 238 px de contenu pour 1 030 de large). */
@media (min-width:1181px){
  .nav .wrap{gap:8px}
  .nav ul{gap:0}
  .nav ul a{padding:10px 4px 6px;letter-spacing:.02em}
  .nav .marque img{height:25px}
  .nav .tele{padding:9px 11px}
  .nav .tele.lv-tele{padding:6px 10px 6px 9px;font-size:12.5px;gap:6px}
}
@media (max-width:1180px){
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--nuit);flex-direction:column;
    gap:0;padding:8px 24px 18px;max-height:calc(100vh - 74px);overflow:auto;align-items:stretch;justify-content:flex-start}
  .nav ul.ouvert{display:flex}
  .nav ul li{padding:2px 0 2px 14px;border-bottom:1px solid #22303E}
  .nav-burger{display:block;margin-left:auto}
  .nav .sousmenu{display:block;position:static;border:0;box-shadow:none;background:transparent;min-width:0;
    padding:0 0 8px;max-height:none}
  .nav .sousmenu a{padding:6px 12px;font-size:13.5px;color:#96A3B1}
  .nav .sousmenu .sep{padding:8px 12px 3px}
  .nav ul li::before{left:0;right:auto;top:0;bottom:0;height:auto;width:4px}
  .nav ul li::after{display:none}
  .nav ul li:has(a.ici)::before{height:auto;width:7px}
  .nav .wrap{align-items:center}
  .nav .marque{padding-bottom:0}
  .nav .tele{margin-bottom:0}
  .nav ul a{padding:8px 7px;font-size:13.5px}
  .nav .tele.lv-tele{display:none}
  .nav ul li.lv-mobile{display:block;order:-1;border-bottom:1px solid #22303E}
  .nav ul li.lv-mobile::before{background:var(--t3)}
  .nav ul li.lv-mobile a{display:flex;align-items:center;gap:9px;color:#fff;font-size:17px;text-transform:none;
    letter-spacing:0;font-weight:800;padding:12px 6px}
  .nav ul li.lv-mobile a .lv-mot span{color:var(--t3)}
  .nav ul li.lv-mobile::before{background:var(--t3)}
  .nav ul li.lv-mobile a em{font-style:normal;font-weight:600;font-size:13px;color:#96A3B1;margin-left:4px}
}

/* à la une du volet gauche de l'accueil */
.hv-levelou{position:relative;background:linear-gradient(135deg,rgba(149,193,31,.16),rgba(22,33,43,.55) 55%);
  border:1px solid rgba(149,193,31,.55);border-left:6px solid var(--t3);border-radius:10px;
  padding:22px 26px 24px;margin:0 0 34px}
.hv-levelou .lv-tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hv-levelou .lv-logo{font-weight:800;font-size:40px;line-height:1;letter-spacing:-.02em;color:#fff;text-decoration:none}
.hv-levelou .lv-logo span{color:var(--t3)}
.hv-levelou .lv-direct{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.hv-levelou .lv-titre{font-size:24px;font-weight:700;line-height:1.2;color:#fff;margin:16px 0 10px}
.hv-levelou .lv-chiffre{display:flex;align-items:flex-end;gap:16px}
.hv-levelou .lv-chiffre b{display:none;font-size:92px;font-weight:800;line-height:.82;color:var(--t3);letter-spacing:-.03em}
.hv-levelou.lv-ok .lv-chiffre b{display:block}
.hv-levelou .lv-chiffre span{font-size:17px;line-height:1.4;color:#DCE3E9;max-width:440px}
.hv-levelou .lv-face{font-size:15px;color:#AEBAC5;margin:14px 0 18px}
.hv-levelou .lv-actions{display:flex;gap:12px;flex-wrap:wrap}
.hv-levelou .bouton.lv-plein{background:var(--t3);color:var(--nuit);border-color:var(--t3)}
.hv-levelou .bouton.lv-plein:hover{background:#fff;border-color:#fff}
.hv-levelou .bouton.lv-vide{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.hv-levelou .bouton.lv-vide:hover{border-color:#fff}
@media (max-width:680px){
  .hv-levelou{padding:18px 18px 20px}
  .hv-levelou .lv-logo{font-size:32px}
  .hv-levelou .lv-titre{font-size:20px}
  .hv-levelou .lv-chiffre{flex-direction:column;align-items:flex-start;gap:8px}
  .hv-levelou .lv-chiffre b{font-size:72px}
}
/* les sondages, rétrogradés : toujours dans le volet, sous levéloù */
.hero-vote .hv-votes-sur{margin:0 0 8px}
.hero-vote .hv-accroche{font-size:16px;line-height:1.5;margin-bottom:16px}

/* ==========================================================================
   LEVÉLOÙ À LA UNE : LA DÉMARCHE (09/10/2026, site_maj29.py).
   « pour le site, tu peux plutôt expliquer la démarche » : le paragraphe
   remplace la question ; le nombre en direct suit.
   ========================================================================== */
.hv-levelou .lv-demarche{font-size:16.5px;line-height:1.5;color:#DCE3E9;margin:14px 0 18px}
.hv-levelou .lv-demarche b{color:#fff;font-weight:800}
.hv-levelou.lv-ok .lv-chiffre{margin:0 0 20px}
@media (max-width:680px){
  .hv-levelou .lv-demarche{font-size:15.5px}
}

/* (10/10, site_maj31.py) « merci de justifier le texte » : la démarche du bloc levéloù, justifiée, avec césure */
.hv-levelou .lv-demarche{text-align:justify;-webkit-hyphens:auto;hyphens:auto}