/* ============================================================
   VILLEURBANNE-INFO.FR | Design system
   Theme : les Gratte-Ciel, 1934. Beton clair, verticalite, angles
   droits, ferronneries. Ambiance : moderniste et sobre, pas
   nostalgique. Le beton comme matiere, le vert-de-gris et le
   laiton comme les deux seules touches de couleur.
   Polices : Archivo (titres, grotesque geometrique d'affiche)
             > Karla (corps)
   Layout : sidebar a GAUCHE.
   Prefixe de classes : vb- (vocabulaire propre a ce site).

   Le socle porte des correctifs de layout (placement explicite
   en grille, min-width:0, overflow-x du menu mobile).
   Ne pas les retirer en refondant les couleurs.
   ============================================================ */

/* ============================================================
   1. VARIABLES
   ============================================================ */
:root {
  /* Palette arretee le 15/08/2026.
     Roles, et pourquoi ils sont attribues ainsi :
       --beton   : le sombre (bandeau haut, en-tete, degrades, voiles). C'est
                   le bleu-noir. On ne met PAS le bleu electrique ici : une
                   barre pleine largeur en #1769E0 au-dessus d'un bouton
                   #1769E0, c'est trop de la meme couleur au meme endroit.
       --vert    : l'action (liens, boutons, grande bande "Vivre &
                   s'installer"). C'est le bleu electrique, donc la couleur
                   qu'on voit partout : c'est bien elle la principale.
       --laiton  : le jaune. Contraste de 1,49 sur le fond clair : il est
                   ILLISIBLE en texte sur fond pale. Il ne sert donc que sur
                   fond sombre (surtitres, pied de page) ou en fond de
                   pastille avec du texte encre (10,02, large).
       --ardoise : le rouge brique. 3,86 sur le fond : gros texte seulement.
                   Il est volontairement rare, reserve aux encarts de
                   signalement.
     Le nom des variables est reste celui du socle d'origine : les renommer
     imposerait de reprendre 455 regles pour un gain nul. */

  /* MISE À JOUR 16/08/2026 : nouvelle palette, nouvelles polices et nouveaux
     arrondis. Les NOMS de variables sont conservés (455 règles inchangées) ;
     seules les valeurs changent. Correspondance des rôles : --beton = bleu
     nuit (surfaces sombres), --vert = bleu (action, la couleur principale),
     --ardoise = rouge (accent), --laiton = pierre dorée (rare). */

  --beton:        #16233A;  /* bleu nuit : bandeaux, en-tete, degrades sombres */
  --beton-clair:  #2B4B72;
  --beton-pale:   #E7EFF9;  /* bleu tres pale : fonds de bloc, filets */
  --beton-fonce:  #0C1626;

  --laiton:          #C9911E;  /* pierre doree : accents rares, sur fond sombre */
  --laiton-clair:    #E4B443;
  --laiton-pale:     #FBEFD2;

  --vert:        #164C8C;  /* bleu : liens, boutons, CTA (couleur principale) */
  --vert-clair:  #3A78C4;
  --vert-fonce:  #0F3667;

  --ardoise:         #C42032;  /* rouge : accent, signalement */
  --ardoise-clair:   #E04656;
  --ardoise-pale:    #FBEAEC;

  --encre:         #16233A;
  --texte:         #1E2B3D;
  --texte-doux:    #6C7789;

  --fond:          #F5F7FB;  /* blanc bleute */
  --fond-alt:      #E8EDF5;
  --blanc:         #FFFFFF;

  --bord:          rgba(22, 35, 58, 0.12);
  --ombre:         rgba(22, 35, 58, 0.10);

  /* Deux teintes de service, hors palette de marque : le brun lisible du
     bandeau d'avertissement (le laiton seul tombe a 1,5 de contraste sur
     fond pale) et le vert du prix gratuit dans l'agenda. Declarees ici pour
     qu'aucune couleur du site ne vive en dur dans une regle. */
  --avertissement-texte: #7A4E12;
  --gratuit-texte:       #1F7A46;
  --gratuit-fond:        #E5F3EA;

  /* Typographie : serif de presse pour les titres */
  --titre: 'Newsreader', Georgia, 'Times New Roman', serif;
  --corps: 'Figtree', system-ui, -apple-system, sans-serif;

  /* Mesures : coins arrondis */
  --arrondi:    10px;
  --arrondi-lg: 18px;
  --largeur:    1200px;
  --ecart:      1.5rem;

  --transi: 0.25s ease;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 18px; overflow-x: hidden; }

/* Le bandeau et l'en-tete sont colles en haut : sans cette marge, un lien
   d'ancre depose le titre vise sous la barre, et le lecteur croit avoir
   atterri au mauvais endroit. La hauteur du bandeau est mesuree par
   main.js dans --h-bandeau, celle de l'en-tete vaut 68 px. */
:where(h2, h3, section, div)[id] { scroll-margin-top: calc(var(--h-bandeau, 34px) + 84px); }

/* Pas d'overflow-x ici. Il y en avait un, pose pour empecher le scroll
   horizontal fantome du tiroir de menu (.vb-nav, alors sorti de l'ecran par
   right:-100%). Mais overflow-x:hidden sur body fait du body un conteneur de
   defilement, et un enfant en position:sticky cesse alors de coller : le
   bandeau et l'en-tete disparaissaient au premier scroll. Le tiroir est
   maintenant sorti par une transform, qui ne cree aucun debordement. */
body {
  font-family: var(--corps);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--vert); text-decoration: none; transition: color var(--transi); }
a:hover { color: var(--beton); }
ul { list-style: none; }

/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */
h1, h2, h3 { font-family: var(--titre); line-height: 1.2; color: var(--encre); font-weight: 600; }
h4, h5, h6 { font-family: var(--corps); font-weight: 800; color: var(--encre); }

h1 { font-size: clamp(1.95rem, 4vw, 2.85rem); font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.42rem, 3vw, 1.95rem); font-weight: 600; margin-bottom: 1rem; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; margin-bottom: 0.6rem; }
h4 { font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; }

p { margin-bottom: 1.1rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--encre); }

/* Décoration des h2 dans le corps d'article : pastille bicolore bleu + rouge
   à gauche du titre et filet bleu pâle. */
.vb-contenu h2 {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--beton-pale);
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}
.vb-contenu h2::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 0.95em;
  background: linear-gradient(180deg, var(--vert) 50%, var(--ardoise) 50%);
  border-radius: 3px;
  margin-right: 0.6rem;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.vb-contenu h3 { margin-top: 1.75rem; color: var(--vert); }
.vb-contenu ul, .vb-contenu ol { margin: 0 0 1.1rem 1.4rem; }
.vb-contenu li { margin-bottom: 0.35rem; }
.vb-contenu ul { list-style: disc; }
.vb-contenu ol { list-style: decimal; }
.vb-contenu a { color: var(--vert); text-decoration: underline; text-underline-offset: 2px; }
.vb-contenu a:hover { color: var(--beton); }

/* ============================================================
   4. STRUCTURE
   ============================================================ */
.vb-conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.vb-section { padding: 4rem 0; }
.vb-section--claire  { background: var(--fond-alt); }
.vb-section--blanche { background: var(--blanc); }
.vb-section--vert  { background: var(--vert); color: var(--blanc); }

.vb-titre-section { text-align: center; margin-bottom: 2.5rem; }
.vb-titre-section h2 { display: inline-block; position: relative; }
.vb-titre-section h2::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--vert) 50%, var(--ardoise) 50%);
  margin: 0.55rem auto 0;
}
.vb-titre-section--gauche { text-align: left; margin-bottom: 1.75rem; }
.vb-titre-section--gauche h2::after { margin: 0.55rem 0 0; }
.vb-soustitre { color: var(--texte-doux); margin-top: 0.5rem; font-size: 0.95rem; }
/* Chapeau d'une section de la page d'accueil : deux ou trois phrases qui
   posent le sujet et portent les liens contextuels, au-dessus de la rangee
   de pastilles. Centre comme le titre de section, borne a une largeur de
   lecture confortable sans brider la grille des pastilles qui suit. */
.vb-section-intro {
  max-width: 800px;
  margin: -1.4rem auto 1.9rem;
  text-align: center;
  color: var(--texte-doux);
}
/* Liens du chapeau de section : soulignes comme dans un article, pas en gras.
   Le gras sur cinq liens d'un meme paragraphe faisait ressembler le texte a une
   liste d'ancres plutot qu'a une phrase. */
.vb-section-intro a { text-decoration: underline; text-underline-offset: 2px; }
.vb-titre-section--gauche + .vb-section-intro { text-align: left; margin-left: 0; }
@media (max-width: 700px) {
  .vb-section-intro { text-align: left; margin-top: -0.8rem; }
}

/* ------------------------------------------------------------
   Rubriques de l'accueil (08/09/2026, deuxieme etat)
   Premier essai : dix bandes pleine largeur, titre centre et paragraphe
   centre. Deuxieme essai : une liste a deux colonnes, qui laissait la
   colonne de gauche presque vide sur toute la hauteur de la page.
   Etat retenu : une grille de cartes, photo en tete, titre, repere
   chiffre, texte, et un lien pilier cale en bas de carte. Les cartes
   d'une meme rangee s'alignent en hauteur, ce que ne faisait aucune des
   deux versions precedentes.
   ------------------------------------------------------------ */
/* Cinq colonnes : dix cartes font alors deux rangees pleines. En trois ou en
   quatre, la derniere rangee reste trouee, et la page se termine sur un vide. */
.vb-rubriques {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}
/* La carte entiere est le lien : sur une home, viser un libelle de trois mots
   avec le pouce est penible, et deux liens par carte doublaient les ancres. */
.vb-rubrique {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--arrondi-lg);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--transi), transform var(--transi);
}
.vb-rubrique:hover { box-shadow: 0 10px 28px var(--ombre); transform: translateY(-2px); }
.vb-rubrique-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 45%;
}
.vb-rubrique-corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.9rem 1rem 1.05rem;
}
.vb-rubrique-corps h3 {
  font-size: 1.02rem;
  line-height: 1.25;
  margin: 0;
}
.vb-rubrique-corps p {
  margin: 0.4rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--texte-doux);
}
@media (max-width: 1100px) {
  .vb-rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
  .vb-rubrique-corps h3 { font-size: 1.1rem; }
  .vb-rubrique-corps p { font-size: 0.92rem; }
}
@media (max-width: 560px) {
  .vb-rubriques { grid-template-columns: 1fr; gap: 1rem; }
  .vb-rubrique-photo { aspect-ratio: 16 / 8; }
}

/* ============================================================
   5. BANDEAU D'AVERTISSEMENT (haut de page)
   ============================================================ */
.vb-bandeau {
  /* Colle en haut de l'ecran, au-dessus de l'en-tete : la mention
     d'independance doit rester lisible pendant toute la lecture, pas
     seulement au chargement. La hauteur reelle est mesuree par main.js
     et posee dans --h-bandeau, dont l'en-tete se sert pour son `top`. */
  position: sticky;
  top: 0;
  z-index: 1002;
  background: var(--encre);
  padding: 0.4rem 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
/* Le bouton « Référencer mon entreprise » vit ici tant que le menu est horizontal :
   le menu seul occupe 944 px (10 rubriques), aucun bouton n'y tient à côté du logo.
   En mode tiroir, il passe dans l'en-tête (.vb-cta-entete--entete). */
.vb-bandeau-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}
/* Pas de flex-wrap ici : avec le repli, le texte passerait a la ligne entiere
   au lieu de se comprimer, et le bouton tomberait seul sur une 2e ligne. */
.vb-bandeau-texte { margin: 0; flex: 1 1 auto; min-width: 0; }
/* La mention d'independance tient sur une ligne, comme sur les autres sites du
   reseau : le bandeau prend plus de largeur que le reste de la page, et le
   bouton n'y reste que tant que le menu est horizontal (voir section 15). */
.vb-bandeau .vb-conteneur { max-width: 1340px; }
.vb-bandeau-point {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--beton-clair);
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* ============================================================
   6. EN-TÊTE & MENU
   ============================================================ */
.vb-entete {
  position: sticky;
  top: var(--h-bandeau, 34px);
  z-index: 1000;
  /* Le fond de l'en-tete doit suivre la palette : il etait reste sur le
     blanc casse #F7F5F0 de la palette d'origine apres le changement de
     palette, ce qui donnait une barre legerement plus chaude que le
     corps de page. color-mix garde la transparence sans figer la teinte. */
  background: var(--fond); /* repli pour les navigateurs sans color-mix */
  background: color-mix(in srgb, var(--fond) 95%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord);
  transition: box-shadow var(--transi);
}
.vb-entete--fixee { box-shadow: 0 4px 22px rgba(23,33,43,0.14); }

/* La ligne d'en-tete est le seul bloc du site qui deborde la largeur de
   lecture : le menu horizontal a besoin de plus que les 1200 px du
   conteneur courant. On lui donne sa propre largeur maximale, sinon les
   dernieres entrees sortent du cadre et sont coupees en silence par
   l'overflow-x:hidden pose sur html. */
.vb-entete-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  max-width: 1400px;
}

.vb-logo { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; flex-shrink: 0; }
/* Logo typographique « Ville Rose Info ». Dessine en texte plutot qu'en image :
   net a toutes les tailles, quelques octets, et il suit la palette sur fond clair
   comme sur fond sombre. Le filet sous le mot reprend celui du logo d'origine. */
.vb-logo-mot {
  display: inline-block; position: relative;
  font-family: var(--titre); font-size: 1.42rem; line-height: 1;
  letter-spacing: -0.005em; white-space: nowrap; padding-bottom: 0.34em;
}
/* Logo en image (17/08/2026). La hauteur est fixee, la largeur suit : c'est la seule
   dimension qui compte dans une barre de hauteur donnee. Les attributs width/height du
   HTML reservent la place avant le chargement, ce qui evite que le menu saute. La regle
   .vb-logo-mot juste dessous reste utilisee ailleurs (bandeaux, encarts). */
.vb-logo-image { display: block; height: 38px; width: auto; }
.vb-pied-logo .vb-logo-image { height: 34px; }
.vb-logo-mot b { font-weight: 700; color: var(--vert); }
.vb-logo-mot i {
  font-style: normal; font-weight: 400; color: var(--encre);
  margin-left: 0.22em; opacity: 0.7;
}
.vb-logo-mot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 1px;
  background: linear-gradient(90deg, transparent, var(--beton-clair) 20%, var(--beton) 50%, var(--beton-clair) 80%, transparent);
}
.vb-logo-mot--clair b { color: var(--laiton-clair); }
.vb-logo-mot--clair i { color: var(--fond); opacity: 0.85; }
.vb-logo-mot--clair::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3) 20%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.3) 80%, transparent);
}
.vb-nav { display: flex; align-items: center; margin-left: auto; }
.vb-nav-liste { display: flex; align-items: center; gap: 0.1rem; }
/* « Accueil » n'existe que dans le tiroir mobile : sur grand ecran le logo
   joue ce role, et l'entree couterait 85 px a un menu deja au bord. */
.vb-nav-item--mobile { display: none; }

.vb-nav-lien {
  display: block;
  padding: 0.45rem 0.38rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--encre);
  transition: color var(--transi), background var(--transi);
  white-space: nowrap;
}
.vb-nav-lien:hover, .vb-nav-lien.est-actif { color: var(--vert); background: var(--laiton-pale); }
.vb-nav-fleche { font-size: 0.55rem; margin-left: 1px; opacity: 0.6; }

.vb-nav-item--deroulant { position: relative; }
.vb-sousmenu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 230px;
  background: var(--blanc);
  box-shadow: 0 12px 36px rgba(23,33,43,0.20);
  border-top: 3px solid var(--vert);
  padding: 0.5rem 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transi), transform var(--transi);
}
.vb-nav-item--deroulant:hover .vb-sousmenu,
.vb-nav-item--deroulant:focus-within .vb-sousmenu {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.vb-sousmenu li a {
  display: block;
  padding: 0.45rem 1.1rem;
  font-size: 0.87rem;
  color: var(--texte);
  transition: background var(--transi), color var(--transi), padding var(--transi);
}
.vb-sousmenu li a:hover { background: var(--laiton-pale); color: var(--vert); padding-left: 1.4rem; }
/* Les deux dernieres rubriques sont collees au bord droit : un sous-menu
   centre sous son parent sortirait de la fenetre. On les aligne a droite. */
.vb-nav-item--deroulant:nth-last-child(-n+2) .vb-sousmenu {
  left: auto; right: 0;
  transform: translateX(0) translateY(-6px);
}
.vb-nav-item--deroulant:nth-last-child(-n+2):hover .vb-sousmenu,
.vb-nav-item--deroulant:nth-last-child(-n+2):focus-within .vb-sousmenu {
  transform: translateX(0) translateY(0);
}

.vb-cta-entete {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.35rem 0.7rem;
  background: var(--fond);
  color: var(--vert);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  transition: background var(--transi), color var(--transi);
  flex-shrink: 0;
}
.vb-cta-entete:hover { background: var(--beton-pale); color: var(--vert-fonce); }
/* Double du bouton dans l'en-tete, affiche seulement en mode tiroir. */
.vb-cta-entete--entete { display: none; }
.vb-cta-entete--entete svg { display: none; }
.vb-cta-entete svg { width: 15px; height: 15px; flex-shrink: 0; }

.vb-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  padding: 0.5rem;
}
.vb-burger span {
  display: block; width: 22px; height: 2px;
  background: var(--encre);
  transition: transform var(--transi), opacity var(--transi);
}
.vb-burger.est-ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vb-burger.est-ouvert span:nth-child(2) { opacity: 0; }
.vb-burger.est-ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   7. COUVERTURE (bandeau des pages intérieures)
   ============================================================ */
.vb-couverture {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--encre);
}
.vb-couverture-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--encre);
}
.vb-couverture-voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23,33,43,0.95) 0%, rgba(23,53,90,0.66) 45%, rgba(23,53,90,0.18) 100%);
}
.vb-couverture-texte {
  position: relative; z-index: 1;
  padding: 2.5rem 1.25rem;
  width: 100%; max-width: var(--largeur);
  margin: 0 auto;
}
.vb-surtitre {
  display: inline-block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--vert-fonce);
  background: var(--laiton);
  padding: 0.3rem 0.75rem;
  font-weight: 800;
  margin-bottom: 0.9rem;
}
.vb-couverture h1 { color: var(--blanc); margin-bottom: 0.75rem; }
/* Pas de bride etroite sur l'accroche : un max-width court (type 660px) fait
   passer le texte a la ligne au tiers du bandeau et laisse un grand vide a
   droite. On laisse le texte occuper la largeur du conteneur. */
.vb-couverture-accroche {
  color: rgba(255,255,255,0.88);
  font-size: 1.05rem; max-width: none; line-height: 1.65; margin-bottom: 0;
}
/* Le gras de l'accroche heritait de la couleur des <strong> du corps, un bleu
   fonce illisible sur le bandeau bleu nuit : le mot mis en avant disparaissait.
   Sur fond sombre, c'est le laiton clair qui porte, il a 8,5 de contraste la ou
   le bleu n'en a pas 2. */
.vb-couverture-accroche strong,
.vb-couverture-accroche b {
  color: var(--laiton-clair);
  font-weight: 700;
}
.vb-ouverture-accroche strong,
.vb-ouverture-accroche b { color: var(--laiton-clair); font-weight: 700; }
@media (min-width: 1100px) { .vb-couverture { min-height: 400px; } }
@media (max-width: 600px) { .vb-couverture { min-height: 300px; } }

/* Couverture sans photo : bandeau degrade brique -> grenat, pour les pages
   qui n'ont pas encore d'illustration verifiee. */
.vb-couverture--sansphoto {
  min-height: 260px;
  background: linear-gradient(120deg, var(--beton-fonce) 0%, var(--vert) 100%);
}
.vb-couverture--sansphoto::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px),
                     repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 68px);
  opacity: 0.5;
}

/* Illustration en cours d'article */
.vb-illustration { margin: 2rem 0; }
.vb-illustration img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--bord);
}
.vb-illustration figcaption {
  margin-top: 0.55rem;
  font-size: 0.85rem; line-height: 1.5; color: var(--texte-doux);
}
.vb-illustration figcaption b { color: var(--encre); font-weight: 700; }
.vb-illustration-credit { display: block; font-size: 0.75rem; opacity: 0.8; margin-top: 0.15rem; }

/* ============================================================
   8. FIL D'ARIANE
   ============================================================ */
.vb-ariane-zone {
  background: var(--fond-alt);
  border-bottom: 1px solid var(--bord);
  padding: 0.6rem 0;
}
.vb-ariane ol { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; font-size: 0.8rem; }
.vb-ariane li { display: flex; align-items: center; gap: 0.25rem; color: var(--texte-doux); }
.vb-ariane li:not(:last-child)::after { content: '/'; opacity: 0.5; }
.vb-ariane li a { color: var(--texte-doux); }
.vb-ariane li a:hover { color: var(--vert); }
.vb-ariane li:last-child { color: var(--texte); font-weight: 700; }

/* ============================================================
   9. CORPS D'ARTICLE + COLONNE LATERALE (a GAUCHE)
   ============================================================ */
.vb-page {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 3rem 1.25rem;
  align-items: start;
}
.vb-page--simple { grid-template-columns: minmax(0, 820px); justify-content: center; }
/* Placement explicite, independant de l'ordre dans le HTML : la colonne va
   toujours dans la piste etroite, l'article dans la large, meme si une page
   a ecrit <article> avant <aside> par erreur. */
.vb-colonne { grid-column: 1; grid-row: 1; }
.vb-contenu { grid-column: 2; grid-row: 1; min-width: 0; }
/* Pages sans colonne laterale (.vb-page--simple n'a qu'une seule piste) :
   l'article doit rester dans la piste 1, sinon la regle generale ci-dessus
   le pousse dans une piste 2 implicite et vide la piste 1. */
.vb-page--simple .vb-contenu { grid-column: 1; }
.vb-contenu > p:first-of-type { font-size: 1.08rem; }

.vb-contenu > p.vb-maj {
  font-size: 0.82rem;
  color: var(--texte-doux);
  margin: 0 0 1.3rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--bord);
}
.vb-maj time { font-weight: 600; color: var(--texte); }

.vb-chapeau {
  font-size: 1.12rem !important;
  color: var(--texte);
  line-height: 1.7;
  border-left: 3px solid var(--vert);
  padding-left: 1.1rem;
  margin-bottom: 1.6rem;
}

.vb-colonne { position: sticky; top: 110px; }
.vb-bloc {
  background: var(--blanc);
  border: 1px solid var(--bord);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 10px var(--ombre);
}
.vb-bloc:first-child { border-top: 3px solid var(--beton); }
.vb-bloc h4 { color: var(--vert); margin-bottom: 0.75rem; }

.vb-bloc-liens { display: flex; flex-direction: column; gap: 0.35rem; }
.vb-bloc-liens a {
  font-size: 0.88rem; color: var(--texte);
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  display: block; position: relative;
  transition: background var(--transi), color var(--transi);
}
.vb-bloc-liens a::before { content: '›'; position: absolute; left: 0.35rem; color: var(--beton); }
.vb-bloc-liens a:hover { background: var(--fond-alt); color: var(--vert); }

/* Sommaire de page, en tete de colonne */
.vb-sommaire ol { counter-reset: vb-som; margin: 0; padding: 0; list-style: none; }
.vb-sommaire li { counter-increment: vb-som; margin-bottom: 0.5rem; font-size: 0.87rem; }
.vb-sommaire li a { display: flex; gap: 0.5rem; color: var(--texte); }
.vb-sommaire li a::before {
  content: counter(vb-som);
  flex-shrink: 0;
  width: 1.3em; height: 1.3em;
  background: var(--laiton-pale); color: var(--vert);
  font-weight: 700; font-size: 0.75rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.vb-sommaire li a:hover { color: var(--vert); }

@media (max-width: 900px) {
  .vb-page { grid-template-columns: 1fr; }
  .vb-colonne { grid-column: 1; grid-row: 2; position: static; order: 2; }
  .vb-contenu { grid-column: 1; grid-row: 1; order: 1; }
}

/* ============================================================
   10. COMPOSANTS EDITORIAUX
   ============================================================ */
.vb-note {
  background: var(--ardoise-pale);
  border-left: 4px solid var(--ardoise);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.vb-note h3 { color: var(--ardoise); margin: 0 0 0.5rem; }

.vb-apercu {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-top: 4px solid var(--vert);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.vb-apercu h3 { color: var(--vert); margin: 0 0 0.5rem; }

.vb-avertissement {
  background: var(--laiton-pale);
  border-left: 4px solid var(--laiton);
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  font-size: 0.88rem;
  color: var(--texte);
}
.vb-avertissement strong { color: var(--avertissement-texte); }

/* Fiche établissement */
.vb-fiche {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-left: 4px solid var(--beton);
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
  box-shadow: 0 2px 8px var(--ombre);
}
.vb-fiche h3 { color: var(--encre); margin: 0 0 0.5rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.vb-fiche p { margin-bottom: 0.4rem; font-size: 0.92rem; }
.vb-fiche p:last-child { margin-bottom: 0; }
.vb-fiche-meta { color: var(--texte-doux); font-size: 0.85rem; }
.vb-fiche-etiquette {
  display: inline-block; font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--vert); background: var(--laiton-pale);
  padding: 0.1rem 0.55rem; margin-left: 0.35rem;
}

/* Cartes chiffres */
.vb-nombres { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.75rem 0; }
.vb-nombre {
  flex: 1; min-width: 140px;
  background: var(--beton-pale);
  border: 1px solid var(--bord);
  padding: 1.15rem 1rem; text-align: center;
}
.vb-nombre-val { display: block; font-family: var(--titre); font-size: 2rem; font-weight: 700; color: var(--beton-fonce); line-height: 1.05; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.vb-nombre-lib { display: block; font-size: 0.8rem; color: var(--texte-doux); margin-top: 0.3rem; line-height: 1.3; }
.vb-nombre--vert { background: var(--laiton-pale); }
.vb-nombre--vert .vb-nombre-val { color: var(--vert); }
.vb-nombre--neutre { background: var(--fond-alt); }
.vb-nombre--neutre .vb-nombre-val { color: var(--encre); }
/* Sur mobile, « Gratuite » ou un numero se coupaient en deux lignes dans une carte etroite :
   une carte par ligne, et le chiffre ne se coupe plus. */
@media (max-width: 520px) { .vb-nombre { flex: 1 1 100%; } .vb-nombre-val { white-space: nowrap; } }

/* FAQ statique */
.vb-faq {
  border: 1px solid var(--bord);
  padding: 1.1rem 1.4rem;
  margin: 1.25rem 0;
  background: var(--blanc);
}
.vb-faq h3 { color: var(--vert); margin: 0 0 0.6rem; font-size: 1.02rem; }
.vb-faq p { margin: 0; }

/* Tableaux */
.vb-tableau-zone { overflow-x: auto; margin: 1.5rem 0; }
.vb-tableau { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.vb-tableau th {
  background: var(--vert); color: var(--blanc);
  text-align: left; padding: 0.7rem 1rem; font-weight: 700;
}
.vb-tableau td { padding: 0.6rem 1rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
.vb-tableau tr:last-child td { border-bottom: none; }
.vb-tableau tr:nth-child(even) td { background: var(--fond-alt); }

/* Carte Leaflet */
.vb-carte {
  height: 420px; width: 100%;
  border: 1px solid var(--bord);
  box-shadow: 0 4px 16px var(--ombre);
  margin: 1.5rem 0;
  z-index: 0;
}
.vb-carte-legende { font-size: 0.82rem; color: var(--texte-doux); margin: -0.5rem 0 1.5rem; }
caption.vb-carte-legende { caption-side: bottom; text-align: left; margin: 0.6rem 0 0; }

/* Cles de couleur d'une carte a zones : lues sous la carte, sans clic. */
.vb-carte-cles { list-style: none; padding: 0; margin: -0.4rem 0 0.7rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: 0.85rem; }
.vb-carte-cles li { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.vb-cle { width: 0.85rem; height: 0.85rem; flex: none; border-radius: 3px;
  border: 1px solid rgba(23, 33, 43, 0.35); }
.vb-cle--pointille { background: transparent; border: 2px dashed #17212B; }
.vb-carte--haute { height: 500px; }

/* Encadré horaires / infos pratiques */
.vb-horaires {
  background: var(--blanc);
  border: 1px solid var(--bord);
  overflow: hidden;
  margin: 1.5rem 0;
}
.vb-horaires-ligne { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.vb-horaires-ligne:nth-child(even) { background: var(--fond-alt); }
.vb-horaires-ligne strong { color: var(--encre); }
.vb-horaires-ligne span { color: var(--texte-doux); }

/* ---- Bulletin météo en direct (Open-Meteo) ---- */
@media (max-width: 768px) {
}
@media (max-width: 420px) {
}

/* ============================================================
   11. BOUTONS
   ============================================================ */
.vb-bouton {
  display: inline-block;
  padding: 0.72rem 1.5rem;
  font-weight: 800; font-size: 0.9rem;
  transition: background var(--transi), color var(--transi), transform var(--transi);
  cursor: pointer; border: none;
}
.vb-bouton--vert { background: var(--vert); color: var(--blanc); }
.vb-bouton--vert:hover { background: var(--beton-fonce); color: var(--blanc); transform: translateY(-1px); }
.vb-bouton--beton { background: var(--beton); color: var(--blanc); }
.vb-bouton--beton:hover { background: var(--vert); color: var(--blanc); transform: translateY(-1px); }
.vb-bouton--transparent { background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.6); color: var(--blanc); backdrop-filter: blur(4px); }
.vb-bouton--transparent:hover { background: var(--blanc); border-color: var(--blanc); color: var(--encre); transform: translateY(-1px); }
/* Bouton clair : pour les fonds fonces (bandeau "vivre" en grenat). */
/* Bouton jaune : le seul endroit ou l'accent chaud porte une action. Texte
   encre sur jaune donne 10,02, c'est le meilleur contraste de la palette.
   Il sert sur les bandeaux sombres, ou un bouton --beton serait invisible :
   --beton et --encre sont la meme couleur. */
.vb-bouton--jaune { background: var(--laiton); color: var(--encre); }
.vb-bouton--jaune:hover { background: var(--laiton-clair); color: var(--encre); transform: translateY(-1px); }
.vb-bouton--clair { background: var(--blanc); color: var(--vert); }
.vb-bouton--clair:hover { background: var(--laiton-pale); color: var(--vert-fonce); transform: translateY(-1px); }
.vb-bouton--grand { padding: 0.95rem 2rem; font-size: 1rem; }

.vb-contenu a.vb-bouton { color: var(--blanc); text-decoration: none; }
.vb-contenu a.vb-bouton:hover { color: var(--blanc); text-decoration: none; }
.vb-contenu a.vb-bouton--transparent { color: var(--blanc); }
.vb-contenu a.vb-bouton--transparent:hover { color: var(--encre); }

/* ============================================================
   12. APPARITION AU SCROLL
   ============================================================ */
.vb-apparait { opacity: 0; transform: translateY(22px); transition: opacity 0.5s ease, transform 0.5s ease; }
.vb-apparait.est-visible { opacity: 1; transform: translateY(0); }
.vb-apparait--d1 { transition-delay: 0.1s; }
.vb-apparait--d2 { transition-delay: 0.2s; }
.vb-apparait--d3 { transition-delay: 0.3s; }

/* ============================================================
   13. ACCUEIL
   ============================================================ */
.vb-ouverture {
  position: relative;
  min-height: 560px;
  display: flex; align-items: center; overflow: hidden;
  background: var(--encre);
}
.vb-ouverture-photo { position: absolute; inset: 0; background-size: cover; background-position: center 22%; background-color: var(--encre); }
.vb-ouverture-voile { position: absolute; inset: 0; background: linear-gradient(102deg, rgba(23,33,43,0.92) 0%, rgba(23,53,90,0.60) 48%, rgba(23,53,90,0.15) 100%); }
/* Le degrade diagonal ci-dessus est pense pour une photo large (desktop) :
   sur mobile, le texte occupe presque toute la largeur et deborde dans la
   zone claire a droite (peu d'opacite), ce qui rend le titre illisible sur
   les zones vives de la photo. Voile plus fort et uniforme en dessous de
   700px, + text-shadow en filet de securite a toutes les tailles. */
@media (max-width: 700px) {
  .vb-ouverture-voile { background: linear-gradient(180deg, rgba(23,33,43,0.55) 0%, rgba(23,33,43,0.88) 100%), rgba(23,33,43,0.55); }
}
.vb-ouverture-ligne {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.5rem; width: 100%;
  padding-top: 3.5rem; padding-bottom: 3.5rem;
}
.vb-ouverture-texte { max-width: 610px; }
.vb-ouverture-surtitre {
  display: inline-block; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--laiton-clair); font-weight: 800; margin-bottom: 1rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.vb-ouverture-titre { color: var(--blanc); font-size: clamp(2.4rem, 5.6vw, 4.2rem); font-weight: 600; line-height: 1.05; margin-bottom: 1.25rem; text-shadow: 0 2px 16px rgba(0,0,0,0.55); }
.vb-ouverture-titre b { color: var(--laiton-clair); font-weight: 600; }
.vb-ouverture-accroche { color: rgba(255,255,255,0.9); font-size: 1.08rem; line-height: 1.7; margin-bottom: 1.75rem; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.vb-ouverture-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.vb-chiffres {
  background: rgba(247,245,240,0.97);
  backdrop-filter: blur(6px);
  box-shadow: 0 22px 54px rgba(23,33,43,0.42);
  padding: 1.75rem 2rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  min-width: 250px; flex-shrink: 0;
  border-top: 4px solid var(--vert);
}
.vb-chiffre { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
.vb-chiffre-val { font-family: var(--titre); font-size: 1.5rem; font-weight: 700; color: var(--beton-fonce); line-height: 1; }
.vb-chiffre-lib { font-size: 0.78rem; color: var(--texte-doux); }

@media (max-width: 980px) {
  .vb-ouverture-ligne { flex-direction: column; align-items: flex-start; }
  .vb-chiffres { width: 100%; }
}

/* Grille de cartes categories (accueil) */
/* ============================================================
   ACCUEIL : sections editoriales
   Vedettes, tuiles, bandeau "vivre", puces d'annuaire, alentours,
   appel.
   ============================================================ */

/* Vedettes : 4 cartes photo, "Le meilleur de Toulouse" */
.vb-vedettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ecart); }
.vb-vedette {
  position: relative; background: var(--blanc);
  border: 1px solid var(--bord); overflow: hidden;
  box-shadow: 0 4px 18px var(--ombre);
  transition: transform var(--transi), box-shadow var(--transi);
  display: flex; flex-direction: column;
}
.vb-vedette::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
  background: var(--beton);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s ease;
}
.vb-vedette:hover { transform: translateY(-5px); box-shadow: 0 16px 38px var(--ombre); }
.vb-vedette:hover::before { transform: scaleX(1); }
.vb-vedette-photo { aspect-ratio: 4/3; overflow: hidden; background: var(--fond-alt); }
.vb-vedette-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.vb-vedette:hover .vb-vedette-photo img { transform: scale(1.06); }
.vb-vedette-corps { padding: 1.25rem 1.35rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.vb-vedette-etiquette {
  align-self: flex-start; font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 800; color: var(--vert);
  background: var(--laiton-pale); padding: 0.25rem 0.6rem; margin-bottom: 0.7rem;
}
.vb-vedette-titre { font-family: var(--titre); font-size: 1.18rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.3; color: var(--encre); }
.vb-vedette-desc { font-size: 0.86rem; color: var(--texte-doux); line-height: 1.6; flex: 1; }
.vb-vedette-suite { margin-top: 0.9rem; font-size: 0.84rem; font-weight: 800; color: var(--vert); transition: color var(--transi); }
.vb-vedette:hover .vb-vedette-suite { color: var(--beton-fonce); }

/* Tuiles : acces rapides du quotidien */
.vb-tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.vb-tuile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; text-align: center;
  background: var(--fond); border: 1px solid var(--bord);
  padding: 1.25rem 0.5rem; color: var(--texte);
  transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi), background var(--transi), color var(--transi);
}
.vb-tuile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px var(--ombre); border-color: var(--beton); background: var(--blanc); color: var(--vert); }
.vb-tuile-ico { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--beton); }
.vb-tuile-ico svg { width: 30px; height: 30px; }
.vb-tuile:hover .vb-tuile-ico { color: var(--vert); }
.vb-tuile-lib { font-size: 0.82rem; font-weight: 700; }

/* Bandeau "Vivre a Toulouse" */
.vb-vivre { background: var(--vert); color: var(--blanc); padding: 3.5rem 0; }
.vb-vivre-ligne { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: center; }
.vb-vivre-intro h2 { color: var(--blanc); }
.vb-vivre-intro h2::after { display: none; }
.vb-vivre-intro p { color: rgba(255,255,255,0.85); margin-bottom: 1.5rem; }
/* Six cartes : trois colonnes, deux rangees pleines. En cinq colonnes la
   sixieme tombait seule sur une deuxieme ligne. */
.vb-vivre-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.vb-vivre-carte {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; text-align: center;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
  padding: 1.4rem 0.5rem;
  color: var(--blanc); font-size: 0.85rem; font-weight: 700;
  transition: background var(--transi), transform var(--transi), color var(--transi);
}
.vb-vivre-carte:hover { background: var(--blanc); color: var(--vert); transform: translateY(-3px); }
.vb-vivre-carte-ico { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--laiton-clair); }
.vb-vivre-carte-ico svg { width: 30px; height: 30px; }
.vb-vivre-carte:hover .vb-vivre-carte-ico { color: var(--beton); }

/* Puces d'annuaire */
/* Rangee de pastilles. En flex plutot qu'en grille : chaque pastille prend la
   largeur de son libelle, au lieu d'etre etiree a une colonne de 172 px qui
   coupait « Tous les / quartiers » en deux lignes des qu'une section n'avait
   que trois ou quatre liens. La grille revient sous 700 px, ou l'alignement
   en colonnes vaut mieux. */
.vb-puces { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; justify-content: center; }
/* La rangee suit l'alignement du titre de section : centree sous un titre
   centre, calee a gauche sous un titre a gauche. */
.vb-titre-section--gauche ~ .vb-puces { justify-content: flex-start; }
.vb-puce {
  display: flex; align-items: center; gap: 0.5rem; flex: 0 1 auto;
  background: var(--blanc); border: 1px solid var(--bord);
  padding: 0.75rem 1rem; font-size: 0.88rem; font-weight: 700; color: var(--texte);
  transition: background var(--transi), color var(--transi), border-color var(--transi);
  box-shadow: 0 1px 4px var(--ombre);
}
.vb-puce:hover { background: var(--laiton-pale); border-color: var(--beton); color: var(--vert); }
.vb-puce::before { content: '\2192'; color: var(--beton); font-weight: 900; }

/* Alentours : photo + liens */
.vb-alentours { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.vb-alentours-photo { background-size: cover; background-position: center; min-height: 440px; background-color: var(--fond-alt); }
.vb-alentours-corps { position: relative; background: var(--fond-alt); padding: 4rem clamp(1.5rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.vb-alentours-corps h2 { max-width: 400px; }
.vb-alentours-corps > p { color: var(--texte-doux); max-width: 460px; margin-bottom: 1.5rem; }
.vb-alentours-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; }
.vb-alentours-liens a { font-size: 0.9rem; font-weight: 700; color: var(--vert); }
.vb-alentours-liens a:hover { color: var(--beton-fonce); }

/* Bandeau d'appel final */
.vb-appel { background: var(--encre); color: var(--blanc); padding: 3rem 0; }
.vb-appel-ligne { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.vb-appel-texte { max-width: 640px; }
.vb-appel-texte h2 { color: var(--blanc); margin-bottom: 0.6rem; }
.vb-appel-texte h2::after { display: none; }
.vb-appel-texte p { color: rgba(255,255,255,0.82); margin-bottom: 0; }

@media (max-width: 980px) {
  .vb-vedettes { grid-template-columns: repeat(2, 1fr); }
  .vb-vivre-ligne { grid-template-columns: 1fr; gap: 1.75rem; }
  .vb-puces { display: grid; grid-template-columns: repeat(2, 1fr); }
  .vb-alentours { grid-template-columns: 1fr; }
  .vb-alentours-photo { min-height: 240px; }
  .vb-alentours-corps { padding: 2.5rem 1.5rem; }
  .vb-alentours-liens { grid-template-columns: 1fr; }
  .vb-appel-ligne { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .vb-vedettes { grid-template-columns: 1fr; }
  .vb-tuiles { grid-template-columns: repeat(3, 1fr); }
  .vb-vivre-cartes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .vb-puces { display: grid; grid-template-columns: 1fr; }
  .vb-tuiles { grid-template-columns: repeat(2, 1fr); }
  .vb-vivre-cartes { grid-template-columns: 1fr 1fr; }
}

/* Agenda en apercu sur l'accueil */
/* Agenda : liste d'événements (DATAtourisme) */
.vb-agenda-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.vb-evenement {
  display: flex; gap: 1rem; background: var(--blanc);
  border: 1px solid var(--bord);
  padding: 0.9rem 1rem; box-shadow: 0 4px 16px var(--ombre);
  transition: box-shadow var(--transi), transform var(--transi);
}
.vb-evenement:hover { box-shadow: 0 8px 24px rgba(23,33,43,0.16); transform: translateY(-2px); }
.vb-evenement-date {
  flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--beton-fonce), var(--beton)); color: var(--blanc);
  height: 58px; align-self: center;
}
.vb-evenement-jour { font-family: var(--titre); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.vb-evenement-mois { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; margin-top: 2px; }
.vb-evenement-corps { flex: 1; min-width: 0; }
.vb-evenement-etiquette { display: inline-block; font-size: 0.68rem; font-weight: 800; color: var(--vert); background: var(--laiton-pale); padding: 0.1rem 0.6rem; margin-bottom: 0.3rem; }
.vb-evenement-titre { font-size: 1rem; margin: 0 0 0.3rem; line-height: 1.3; font-family: var(--corps); font-weight: 800; }
.vb-evenement-titre a { color: var(--encre); }
.vb-evenement-titre a:hover { color: var(--vert); }
.vb-evenement-meta { font-size: 0.85rem; color: var(--texte-doux); margin: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: center; }
.vb-evenement-quand { font-weight: 800; color: var(--beton-fonce); }
.vb-evenement-prix { color: var(--gratuit-texte); font-weight: 800; background: var(--gratuit-fond); padding: 0 0.5rem; }

.vb-agenda-live { margin: 0 0 2rem; }
.vb-agenda-live-tete { margin-bottom: 1rem; }
.vb-agenda-live-tete h2 { margin-bottom: 0.2rem; }
.vb-agenda-maj { font-size: 0.82rem; color: var(--texte-doux); margin: 0; }
.vb-agenda-mois {
  font-family: var(--titre); font-size: 1.2rem; color: var(--encre);
  margin: 1.6rem 0 0.75rem; padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--vert); display: inline-block;
}
.vb-agenda-note {
  font-size: 0.8rem; color: var(--texte-doux); font-style: italic;
  margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid var(--bord);
}
@media (max-width: 700px) { .vb-agenda-liste { grid-template-columns: 1fr; } }

/* ============================================================
   14. PIED DE PAGE
   ============================================================ */
.vb-pied { background: var(--vert-fonce); color: rgba(255,255,255,0.85); }
.vb-pied-haut { padding: 3.5rem 0 2.5rem; }
/* Un bloc de marque large, puis autant de colonnes de liens que la largeur
   en accepte. Le nombre de rubriques du pied bouge au fil du site : une
   grille a nombre de pistes fige (repeat(6,1fr)) renvoyait les colonnes
   surnumeraires dans la piste large de la marque, avec des largeurs
   incoherentes d'une ligne a l'autre. auto-fill s'en charge tout seul. */
.vb-pied-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 2.2rem 1.4rem;
}
.vb-pied-col--marque { grid-column: span 2; }
@media (max-width: 640px) {
  .vb-pied-grille { grid-template-columns: repeat(2, 1fr); }
  .vb-pied-col--marque { grid-column: span 2; }
}
@media (max-width: 380px) {
  .vb-pied-grille { grid-template-columns: 1fr; }
  .vb-pied-col--marque { grid-column: span 1; }
}
.vb-pied-col { min-width: 0; }
.vb-pied-logo { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; }
.vb-pied-logo .vb-logo-mot { font-size: 1.32rem; }
/* Variante claire du logo : le grenat du logo serait illisible sur --vert-fonce. */
.vb-pied-desc { font-size: 0.87rem; line-height: 1.6; opacity: 0.8; margin-bottom: 1rem; }
.vb-pied-cta { display: inline-block; font-size: 0.85rem; font-weight: 700; color: var(--laiton-clair); }
.vb-pied-titre { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--laiton-clair); margin-bottom: 0.9rem; }
.vb-pied-liens { display: flex; flex-direction: column; gap: 0.5rem; }
.vb-pied-liens a { font-size: 0.87rem; color: rgba(255,255,255,0.82); }
.vb-pied-liens a:hover { color: var(--blanc); text-decoration: underline; }

.vb-pied-bas { border-top: 1px solid rgba(255,255,255,0.16); padding: 1.25rem 0; }
.vb-pied-bas-ligne { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8rem; opacity: 0.75; }
.vb-pied-credit a { color: rgba(255,255,255,0.85); }
.vb-pied-credit a:hover { color: var(--blanc); }

@media (max-width: 980px) {
  .vb-pied-grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .vb-pied-grille { grid-template-columns: 1fr; }
}

/* ============================================================
   15. RESPONSIVE : EN-TETE
   ============================================================ */
/* Le menu horizontal complet demande environ 950 px a lui seul, en plus du
   logo. En dessous de 1380 px de fenetre il ne tient pas : on bascule sur le
   tiroir plutot que de laisser les dernieres rubriques etre rognees. */
@media (max-width: 1379px) {
  .vb-burger { display: flex; }
  /* Menu en tiroir : la ligne de l'en-tete n'a plus que le logo et le burger,
     le bouton y descend et libere le bandeau pour la seule mention. */
  /* backdrop-filter fait de l'en-tete le bloc conteneur de ses enfants en
     position fixed : le tiroir se retrouvait enferme dans les 73 px de
     l'en-tete au lieu d'occuper la hauteur de l'ecran. Fond plein a la place. */
  .vb-entete { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--fond); }
  .vb-cta-entete--bandeau { display: none; }
  .vb-bandeau { font-size: 0.8rem; }
  .vb-bandeau-texte { text-align: center; }
  .vb-cta-entete--entete {
    display: inline-flex; margin-left: auto; margin-right: 0.6rem;
    background: var(--vert); color: var(--blanc); padding: 0.5rem 0.8rem;
  }
  .vb-cta-entete--entete:hover { background: var(--vert-fonce); color: var(--blanc); }
  .vb-nav-item--mobile { display: block; }
  /* Le tiroir sort par transform et non par `right` negatif : une position
     hors ecran en `right` allonge la zone de defilement du document, une
     transform non. `visibility` le retire en plus de l'ordre de tabulation
     quand il est ferme, sinon ses liens restent atteignables au clavier. */
  .vb-nav {
    /* Sous le bandeau d'independance, qui reste au-dessus (z-index 1002). */
    position: fixed; top: var(--h-bandeau, 34px); right: 0; bottom: 0;
    width: min(340px, 88vw);
    background: var(--blanc);
    flex-direction: column; align-items: stretch;
    padding: 5rem 1.5rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
    box-shadow: -12px 0 30px rgba(23,33,43,0.2);
  }
  .vb-nav.est-ouvert {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }
  .vb-nav-liste { flex-direction: column; align-items: stretch; gap: 0; }
  .vb-nav-item { border-bottom: 1px solid var(--bord); }
  .vb-nav-lien { padding: 0.9rem 0.25rem; }
  .vb-sousmenu {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    display: none; box-shadow: none; border-top: none;
    background: var(--fond-alt); min-width: 0; padding: 0.25rem 0 0.5rem;
  }
  .vb-nav-item--deroulant.est-ouvert .vb-sousmenu { display: block; }
}
/* Sur mobile le bandeau passe en deux lignes centrees plutot que de comprimer
   le texte d'independance a quelques mots par ligne. */
@media (max-width: 700px) {
  .vb-bandeau { padding: 0.5rem 0; }
  .vb-bandeau-ligne { flex-direction: column; gap: 0.5rem; }
  .vb-bandeau-texte { text-align: center; }
}
/* Le logo se reduit sur petit ecran pour laisser respirer le burger. */
@media (max-width: 480px) {
  /* Le bouton se reduit a son pictogramme, le nom reste dans aria-label. */
  .vb-cta-entete--entete { padding: 0.5rem; }
  .vb-cta-entete--entete svg { display: block; width: 18px; height: 18px; }
  .vb-cta-entete--entete .vb-cta-entete-texte { display: none; }
  .vb-logo-mot { font-size: 1.2rem; }
  .vb-logo-image { height: 32px; }
}
@media (max-width: 340px) {
  .vb-logo-mot { font-size: 1.02rem; }
  .vb-logo-image { height: 27px; }
}

/* Graphiques */
.vb-graphe {
  background: var(--blanc);
  border: 1px solid var(--bord);
  padding: 1.25rem 1.35rem;
  margin: 1.5rem 0;
  box-shadow: 0 2px 10px var(--ombre);
}
.vb-graphe h3 { margin: 0 0 0.9rem; font-size: 1.05rem; color: var(--vert); }
.vb-graphe-toile { position: relative; height: 340px; width: 100%; }
@media (max-width: 768px) { .vb-graphe-toile { height: 280px; } }

/* ---- Calculateur / orienteur interactif (réutilisable) ---- */
.vb-calc {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-top: 4px solid var(--vert);
  padding: 1.5rem;
  margin: 1.75rem 0;
  box-shadow: 0 4px 16px var(--ombre);
}
.vb-calc h3 { margin: 0 0 0.35rem; color: var(--encre); }
.vb-calc-intro { font-size: 0.88rem; color: var(--texte-doux); margin-bottom: 1.25rem; }
.vb-calc-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.vb-calc-champ label { display: block; font-weight: 700; font-size: 0.85rem; color: var(--encre); margin-bottom: 0.4rem; }
.vb-calc-champ select {
  width: 100%; font-family: var(--corps); font-size: 0.95rem; color: var(--texte);
  background: var(--fond); border: 1px solid var(--bord);
  padding: 0.6rem 0.75rem; cursor: pointer;
}
.vb-calc-champ select:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--laiton-pale); }
.vb-calc-note { font-size: 0.78rem; color: var(--texte-doux); margin-top: 1rem; font-style: italic; }
.vb-calc-curseur { display: flex; align-items: center; gap: 0.75rem; }
.vb-calc-curseur input[type="range"] { flex: 1; accent-color: var(--vert); cursor: pointer; }
.vb-calc-valeur { font-family: var(--titre); font-weight: 700; font-size: 1.3rem; color: var(--beton-fonce); min-width: 2.4em; text-align: center; }
.vb-calc-verdict { margin-top: 1.25rem; padding: 0.9rem 1.1rem; background: var(--beton-pale); border-left: 4px solid var(--beton); font-size: 0.92rem; }
.vb-calc-verdict strong { color: var(--beton-fonce); }

/* Champ texte, nombre ou recherche dans un bloc calculateur */
.vb-calc-champ input[type="search"], .vb-calc-champ input[type="text"], .vb-calc-champ input[type="number"] {
  width: 100%; font-family: var(--corps); font-size: 0.95rem; color: var(--texte);
  background: var(--fond); border: 1px solid var(--bord); padding: 0.6rem 0.75rem;
}
.vb-calc-champ input[type="search"]:focus, .vb-calc-champ input[type="text"]:focus, .vb-calc-champ input[type="number"]:focus {
  outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--laiton-pale);
}

/* Liste à cocher de contrôle (devis, démarches) */
/* Liste de résultats voie -> code postal */
/* ============================================================
   16bis. FORMULAIRE DE CONTACT
   ============================================================ */
.vb-form { max-width: 560px; margin: 1.5rem 0 2rem; }
.vb-champ { margin-bottom: 1.1rem; }
.vb-champ label { display: block; font-weight: 700; font-size: 0.88rem; color: var(--encre); margin-bottom: 0.4rem; }
.vb-champ input, .vb-champ textarea {
  width: 100%; font-family: var(--corps); font-size: 0.95rem; color: var(--texte);
  background: var(--blanc); border: 1px solid var(--bord);
  padding: 0.65rem 0.8rem;
}
.vb-champ textarea { min-height: 140px; resize: vertical; }
.vb-champ input:focus, .vb-champ textarea:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--laiton-pale); }
.vb-courriel-ligne { font-size: 1.1rem; }

/* Utilitaires de mise en page */
.vb-titre-espace { margin-bottom: 1.2rem; }
.vb-para-espace { margin-top: 2rem; }
.vb-mention { font-size: 0.85rem; color: var(--texte-doux); }
.vb-pied-copy { margin: 0; }

/* ============================================================
   16. ERREUR 404
   ============================================================ */
.vb-404 { padding: 5rem 1.25rem; text-align: center; max-width: 560px; margin: 0 auto; }
.vb-404-code { display: block; font-family: var(--titre); font-size: 5.5rem; font-weight: 700; color: var(--beton); line-height: 1; margin-bottom: 1rem; }
.vb-404 h1 { margin-bottom: 0.75rem; }
.vb-404 p { color: var(--texte-doux); margin-bottom: 2rem; }
.vb-404-liens { text-align: left; margin-top: 2.5rem; }
.vb-404-liens h2 { font-size: 1.1rem; margin-bottom: 0.75rem; border: none; padding: 0; }
.vb-404-liens h2::after { display: none; }
.vb-404-liens ul { list-style: none; margin: 0; }
.vb-404-liens li { margin-bottom: 0.5rem; }
.vb-404-liens a { color: var(--vert); text-decoration: underline; }

/* ============================================================
   20. BLOC SOURCES (repliable)
   Les sources restent dans le HTML, lisibles par les moteurs et
   les modeles, mais sortent du champ de lecture : un mur d'URL
   brutes en fin d'article n'apporte rien au lecteur.
   ============================================================ */
.vb-sources {
  margin: 2.75rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bord);
}
.vb-sources > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1rem;
  color: var(--texte-doux);
}
.vb-sources > summary::-webkit-details-marker { display: none; }
.vb-sources > summary::before {
  content: "\25B8";
  color: var(--beton);
  font-size: 0.85em;
}
.vb-sources[open] > summary::before { content: "\25BE"; }
.vb-sources > summary:hover { color: var(--vert); }
.vb-sources-nb {
  font-family: var(--corps);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--texte-doux);
  opacity: 0.75;
}
.vb-sources ul { margin: 1rem 0 0; padding-left: 1.15rem; }
.vb-sources li {
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texte);
}
.vb-source-url {
  display: block;
  font-size: 0.75rem;
  color: var(--texte-doux);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.vb-source-note {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--texte-doux);
}

/* ---- Groupes d'echeance dans un bloc meteo (page previsions 15 jours) ---- */
/* ---- Grille de webcams (page webcam-toulouse) ---- */

/* ============================================================
   99. AJOUTS PROPRES A VILLEURBANNE-INFO.FR
   ============================================================ */

/* Credit photo du bandeau d'ouverture. Les images de Commons sont en
   CC BY-SA : l'attribution est obligatoire, et une image de fond n'a pas
   de legende de figure pour la porter. */
.vb-ouverture-credit {
  position: absolute; right: 0.75rem; bottom: 0.5rem; z-index: 2;
  margin: 0; font-size: 0.68rem; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.8);
  /* Fond translucide obligatoire : la photo est claire en bas a droite, et
     un texte blanc a ombre portee y devient illisible. */
  background: rgba(23,33,43,0.55);
  padding: 0.15rem 0.5rem;
  border-radius: var(--arrondi);
}
/* Surtout PAS de position:static ici, meme en mobile : .vb-ouverture est un
   conteneur flex, et un credit en flux devient un troisieme element de la
   rangee. Il volait 116px de large au bandeau, qui tombait a 295px sur un
   ecran de 390. Il reste donc absolu a toutes les tailles. */
@media (max-width: 700px) {
  .vb-ouverture-credit { right: 0.7rem; bottom: 0.4rem; font-size: 0.62rem; max-width: 62vw; text-align: right; }
}

/* Geometrie moderniste : le surtitre des couvertures de page est un bandeau
   a filet, pas une pastille arrondie. */
.vb-surtitre { border-left: 3px solid var(--laiton); padding-left: 0.7rem; }

/* ============================================================
   ACCÈS RAPIDES sous le hero
   ============================================================ */
.vb-acces { background: var(--blanc); border-bottom: 1px solid var(--bord); }
.vb-acces-ligne { display: grid; grid-template-columns: repeat(4, 1fr); }
.vb-acces-item { display: flex; align-items: center; gap: 0.9rem; padding: 1.4rem 1rem; color: var(--texte); transition: background var(--transi), color var(--transi); }
.vb-acces-item + .vb-acces-item { border-left: 1px solid var(--bord); }
.vb-acces-item:hover { background: var(--fond); color: var(--vert); }
.vb-acces-ico {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--vert); background: var(--beton-pale); flex-shrink: 0;
  transition: color var(--transi), background var(--transi), transform var(--transi);
}
.vb-acces-item:hover .vb-acces-ico { color: var(--blanc); background: var(--ardoise); transform: translateY(-2px); }
.vb-acces-ico svg { width: 24px; height: 24px; }
.vb-acces-texte { display: flex; flex-direction: column; line-height: 1.25; }
.vb-acces-texte strong { font-size: 1rem; color: var(--encre); font-family: var(--titre); font-weight: 600; }
.vb-acces-item:hover .vb-acces-texte strong { color: var(--vert); }
.vb-acces-texte small { font-size: 0.78rem; color: var(--texte-doux); }
@media (max-width: 720px) {
  .vb-acces-ligne { grid-template-columns: repeat(2, 1fr); }
  .vb-acces-item:nth-child(3) { border-left: 0; }
  .vb-acces-item:nth-child(n+3) { border-top: 1px solid var(--bord); }
}
@media (max-width: 400px) {
  .vb-acces-ligne { grid-template-columns: 1fr; }
  .vb-acces-item + .vb-acces-item { border-left: 0; border-top: 1px solid var(--bord); }
}

/* ============================================================
   PASTILLES DE LIGNE TCL
   La couleur vient du GTFS officiel du reseau (route_color) et arrive
   en attribut style depuis inc/lignes-tcl.php : elle porte l'information,
   elle ne se decide pas ici. Ce bloc ne gere que la forme.
   ============================================================ */
.vb-lig {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--corps); font-weight: 800; letter-spacing: -0.01em;
  line-height: 1; vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.12);
}
.vb-lig--metro { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; font-size: 0.86rem; }
.vb-lig--tram  { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 5px;  font-size: 0.78rem; }
.vb-lig--rx    { height: 26px; padding: 0 9px; border-radius: 5px; font-size: 0.74rem; }
.vb-lig-lien { display: inline-block; text-decoration: none; margin: 0 3px 3px 0; }
.vb-lig-lien:hover .vb-lig { box-shadow: 0 0 0 2px var(--blanc), 0 0 0 4px var(--vert); }
.vb-contenu .vb-lig-lien { text-decoration: none; border-bottom: 0; }
.vb-lig-serie { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }

/* Une ligne du reseau, en carte : pastille, terminus, nombre d'arrets. */
.vb-reseau {
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 1.6rem 0;
}
.vb-reseau-ligne {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--arrondi); padding: 0.7rem 0.85rem;
  text-decoration: none;
}
.vb-reseau-ligne .vb-lig { flex-shrink: 0; }
.vb-reseau-corps { display: flex; flex-direction: column; min-width: 0; }
.vb-reseau-terminus { font-size: 0.8rem; color: var(--texte-doux); line-height: 1.35; overflow-wrap: anywhere; }

/* ============================================================
   GRILLE DE RUBRIQUE (pages pilier)
   Une page pilier n'est pas un article : le lecteur y vient pour repartir
   ailleurs. Les liens en enfilade dans un paragraphe ne se voient pas, on
   les sort donc en cartes, avec un intitule et ce qu'on y trouve.
   ============================================================ */
.vb-hub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0 0 2rem;
}
.vb-hub-lien {
  display: block;
  text-decoration: none;
  padding: 0.85rem 1rem;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--laiton);
  border-radius: var(--arrondi);
  color: var(--texte);
  transition: transform var(--transi), box-shadow var(--transi),
              border-color var(--transi), background var(--transi);
}
.vb-hub-lien:hover,
.vb-hub-lien:focus-visible {
  background: var(--blanc);
  border-left-color: var(--vert);
  box-shadow: 0 8px 20px var(--ombre);
  transform: translateY(-2px);
}
.vb-hub-titre {
  display: block;
  text-decoration: none;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1rem;
  color: var(--encre);
  line-height: 1.25;
}
.vb-hub-lien:hover .vb-hub-titre { color: var(--vert); }
.vb-hub-desc {
  display: block;
  text-decoration: none;
  font-size: 0.83rem;
  color: var(--texte-doux);
  margin-top: 0.2rem;
  line-height: 1.35;
}
/* Le sous-titre qui coiffe une grille, quand la page pilier en aligne
   plusieurs (par secteur, par mode, par public). */
.vb-hub-groupe {
  font-family: var(--titre);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--encre);
  margin: 0 0 0.7rem;
}
@media (max-width: 620px) {
  .vb-hub { grid-template-columns: 1fr; }
}

/* La regle `.vb-contenu a` souligne et colore tous les liens du corps ; une carte
   de rubrique n'est pas un lien dans une phrase, on la desouligne explicitement. */
.vb-contenu a.vb-hub-lien,
.vb-contenu a.vb-hub-lien:hover { text-decoration: none; color: var(--texte); }
.vb-contenu a.vb-hub-lien .vb-hub-titre { color: var(--encre); }
.vb-contenu a.vb-hub-lien:hover .vb-hub-titre { color: var(--vert); }
.vb-contenu a.vb-hub-lien .vb-hub-desc { color: var(--texte-doux); }

/* ============================================================
   NEWSLETTER (9 octobre 2026)
   Formulaire partagé (inc/formulaire-newsletter.php) : page /newsletter/,
   encart de fin d'article et encart flottant (inc/newsletter.php, js/main.js).
   Couleurs tirées des variables du site, le bloc se recopie tel quel d'un guide à l'autre.
   ============================================================ */
/* Correspondance avec les couleurs du site : le bloc newsletter, commun au réseau,
   lit --primary, --accent, --text… que ce gabarit n'a pas sous ces noms. */
.nl-form, .nl-encart, .nl-bloc, .nl-flottant {
  --primary: var(--vert);
  --primary-dark: var(--vert-fonce);
  --primary-pale: var(--beton-pale);
  --accent: var(--laiton);
  --text: var(--texte);
  --text-light: var(--texte-doux);
  --border: var(--bord);
  --bg-alt: var(--fond-alt);
  --radius: 14px;
  --shadow-sm: 0 2px 12px var(--ombre);
  --shadow-md: 0 10px 34px rgba(22, 35, 58, 0.18);
  /* encart flottant : bleu nuit du bandeau, bouton pierre dorée, texte encre (5,8:1) */
  --nl-fond: var(--beton);
  --nl-bouton: var(--laiton);
  --nl-bouton-texte: var(--encre);
}

.nl-form { margin: 0; }
.nl-label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 8px; color: var(--text); line-height: 1.4; }
.nl-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-champ {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.nl-champ:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.nl-bouton {
  flex: 0 0 auto;
  padding: 12px 20px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.nl-bouton:hover, .nl-bouton:focus-visible { background: var(--primary-dark); border-color: var(--primary-dark); }
.nl-mention { font-size: 0.76rem; line-height: 1.5; color: var(--text-light); margin: 10px 0 0; }
.nl-mention a { color: var(--text-light); text-decoration: underline; }
/* Champ piège pour les robots : hors écran, pas display:none que certains détectent */
.nl-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.nl-encart {
  margin: 2.5rem 0 0;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.nl-encart-titre { font-weight: 700; font-size: 1.15rem; line-height: 1.3; margin: 0 0 6px; color: var(--text); }
.nl-encart-texte { font-size: 0.95rem; line-height: 1.6; color: var(--text-light); margin: 0 0 16px; }

.nl-bloc { margin: 28px 0 36px; padding: 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.nl-etat { padding: 14px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 0.92rem; line-height: 1.5; }
.nl-etat p { margin: 4px 0 0; }
.nl-etat--ok { background: #EAF6EC; border: 1px solid #B9DFC0; }
.nl-etat--ko { background: #FDECEC; border: 1px solid #F1B8B8; }

@media (max-width: 768px) {
  .nl-encart, .nl-bloc { padding: 18px; }
  .nl-bouton { flex: 1 1 100%; }
}

/* Encart flottant */
.nl-flottant {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: 24px 24px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 5px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.25s, transform 0.25s, visibility 0s linear 0.25s;
}
.nl-flottant[hidden] { display: none; }
.nl-flottant--visible { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.25s, visibility 0s; }
.nl-flottant-fermer {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-light);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.nl-flottant-fermer:hover, .nl-flottant-fermer:focus-visible { color: var(--text); background: var(--bg-alt); }
.nl-flottant-surtitre {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-dark);
  background: var(--primary-pale);
  border-radius: 4px;
}
.nl-flottant-titre { font-weight: 800; font-size: 1.2rem; line-height: 1.25; margin: 0 32px 6px 0; color: var(--text); }
.nl-flottant-texte { font-size: 0.9rem; line-height: 1.5; color: var(--text-light); margin: 0 0 16px; }
.nl-flottant .nl-mention { font-size: 0.7rem; }
.nl-flottant .nl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nl-flottant .nl-ligne { flex-wrap: nowrap; }
.nl-flottant .nl-champ { flex: 1 1 0; padding: 11px 12px; font-size: 0.92rem; }
.nl-flottant .nl-bouton { padding: 11px 16px; }
.nl-flottant-lien { display: none; }

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

/* Sous 768 px : bandeau fin, sans formulaire, pour ne pas recouvrir la lecture */
@media (max-width: 768px) {
  .nl-flottant {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    padding: 10px 44px 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 0;
    border-width: 3px 0 0;
  }
  .nl-flottant[hidden] { display: none; }
  .nl-flottant-titre { margin: 0; font-size: 0.95rem; flex: 1 1 auto; }
  .nl-flottant-surtitre, .nl-flottant-texte, .nl-flottant-form { display: none; }
  .nl-flottant-lien {
    display: inline-block;
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border-radius: 8px;
    text-decoration: none;
  }
  .nl-flottant-lien:hover { color: #fff; text-decoration: none; }
  .nl-flottant-fermer { top: 50%; transform: translateY(-50%); right: 4px; }
}
.nl-insecable { white-space: nowrap; }

/* Encart flottant plus visible (9 octobre 2026) : fond sombre aux couleurs du site,
   bouton d'accent, carte plus large. Les trois couleurs ci-dessous sont propres au site. */
.nl-flottant {
  /* couleurs : voir la correspondance en tête du bloc */
  width: 460px;
  padding: 28px 28px 22px;
  background: var(--nl-fond);
  border: 0;
  border-top: 6px solid var(--nl-bouton);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  color: #fff;
}
.nl-flottant-surtitre { background: var(--nl-bouton); color: var(--nl-bouton-texte); }
.nl-flottant-titre { color: #fff; font-size: 1.4rem; }
.nl-flottant-texte { color: rgba(255, 255, 255, 0.86); font-size: 0.95rem; }
.nl-flottant .nl-champ { border-color: transparent; }
.nl-flottant .nl-champ:focus { outline-color: var(--nl-bouton); }
.nl-flottant .nl-bouton { background: var(--nl-bouton); border-color: var(--nl-bouton); color: var(--nl-bouton-texte); font-weight: 700; }
.nl-flottant .nl-bouton:hover, .nl-flottant .nl-bouton:focus-visible { background: #fff; border-color: #fff; color: var(--nl-fond); }
.nl-flottant .nl-mention, .nl-flottant .nl-mention a { color: rgba(255, 255, 255, 0.72); }
.nl-flottant-fermer { color: rgba(255, 255, 255, 0.8); }
.nl-flottant-fermer:hover, .nl-flottant-fermer:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.12); }
@media (max-width: 768px) {
  .nl-flottant { width: auto; padding: 10px 44px 10px 16px; border-width: 4px 0 0; }
  .nl-flottant-titre { font-size: 0.95rem; }
  .nl-flottant-lien, .nl-flottant-lien:hover { background: var(--nl-bouton); color: var(--nl-bouton-texte); }
}