/* Hublot — signalétique d'aérogare : jaune sur anthracite, ciel, couchant. */

:root {
  --anthracite: #1C2127;
  --anthracite-2: #2A313A;
  --jaune: #FFC72C;
  --jaune-pale: #FFF1C7;
  --ciel: #3BA3E0;
  --ciel-fonce: #1A6FA8;
  --ciel-pale: #E4F3FC;
  --couchant: #F26B3A;
  --couchant-fonce: #C9481B;
  --creme: #FBF8F1;
  --blanc: #FFFFFF;
  --encre: #1F262E;
  --gris: #5B6673;
  --trait: #E2DDD0;
  --titre: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texte: "Literata", Georgia, serif;
  --ui: "Barlow", system-ui, sans-serif;
  --rayon: 14px;
  --ombre: 0 10px 30px -12px rgba(28, 33, 39, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--creme); color: var(--encre);
  font: 400 1.0625rem/1.7 var(--texte); overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--ciel-fonce); text-underline-offset: 3px; }
a:hover { color: var(--couchant-fonce); }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 700; line-height: 1.12; color: var(--anthracite); letter-spacing: .005em; }
:focus-visible { outline: 3px solid var(--couchant); outline-offset: 2px; }

.vav-masque { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vav-evitement { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--jaune); color: var(--anthracite); padding: .6rem 1rem; font: 600 1rem var(--ui); border-radius: 8px; }
.vav-evitement:focus { top: 1rem; }

.vav-cadre { width: min(1200px, 100% - 2rem); margin-inline: auto; }
.vav-cadre--etroit { width: min(760px, 100% - 2rem); }
.vav-cadre--large { width: min(1000px, 100% - 2rem); }
.vav-principal { display: block; min-height: 60vh; }

/* ---------- En-tête ---------- */
.vav-entete { background: var(--anthracite); color: var(--blanc); position: sticky; top: 0; z-index: 50; border-bottom: 4px solid var(--jaune); }
.vav-entete-barre { width: min(1200px, 100% - 2rem); margin-inline: auto; display: flex; align-items: center; gap: 1.25rem; min-height: 68px; }
.vav-marque { display: flex; align-items: center; gap: .65rem; color: var(--blanc); text-decoration: none; flex-shrink: 0; }
.vav-marque:hover { color: var(--jaune); }
.vav-marque-logo svg { width: 38px; height: 38px; }
.vav-marque-nom { font: 700 1.5rem/1 var(--titre); text-transform: uppercase; letter-spacing: .06em; }
.vav-menu { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.vav-menu-liste { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.vav-menu-liste a { display: flex; align-items: center; gap: .4rem; min-height: 2.35rem; padding: .45rem .6rem; color: var(--blanc); text-decoration: none; font: 600 1.02rem/1 var(--titre); text-transform: uppercase; letter-spacing: .05em; border-radius: 8px; }
.vav-menu-liste a:hover, .vav-menu-liste .current-menu-item > a, .vav-menu-liste .current-category-ancestor > a { background: var(--anthracite-2); color: var(--jaune); }
.vav-menu-porte { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; background: var(--jaune); color: var(--anthracite); border-radius: 5px; font: 700 .95rem/1 var(--titre); }
.vav-recherche { display: flex; background: var(--anthracite-2); border-radius: 999px; padding: 3px; }
.vav-recherche-champ { width: 12rem; border: 0; background: transparent; color: var(--blanc); font: 400 .95rem var(--ui); padding: .45rem .8rem; }
.vav-recherche-champ::placeholder { color: #A9B3BE; }
.vav-recherche-champ:focus { outline: none; }
.vav-recherche-bouton { border: 0; background: var(--jaune); color: var(--anthracite); font: 600 .9rem var(--ui); padding: .45rem .9rem; border-radius: 999px; cursor: pointer; }
.vav-bascule { display: none; margin-left: auto; align-items: center; gap: .55rem; background: var(--jaune); color: var(--anthracite); border: 0; border-radius: 8px; padding: .5rem .8rem; font: 700 1rem var(--titre); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.vav-bascule-traits { display: grid; gap: 4px; }
.vav-bascule-traits i { display: block; width: 20px; height: 2.5px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.vav-bascule[aria-expanded="true"] .vav-bascule-traits i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.vav-bascule[aria-expanded="true"] .vav-bascule-traits i:nth-child(2) { opacity: 0; }
.vav-bascule[aria-expanded="true"] .vav-bascule-traits i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.vav-bascule-mot { line-height: 1; }

@media (max-width: 1080px) {
  .vav-bascule { display: inline-flex; }
  .vav-menu {
    display: none; position: fixed; left: 0; right: 0; top: 72px; bottom: auto;
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; align-items: stretch; gap: 1rem; padding: 1rem 1rem 2rem;
    background: var(--anthracite); border-bottom: 4px solid var(--jaune); box-shadow: 0 20px 40px rgba(0,0,0,.35);
  }
  .vav-menu.is-open { display: flex; }
  .vav-menu-liste { flex-direction: column; gap: .2rem; }
  .vav-menu-liste a { padding: .8rem .7rem; font-size: 1.2rem; }
  .vav-recherche-champ { width: 100%; flex: 1; }
}

/* ---------- Boutons ---------- */
.vav-bouton { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.35rem; border-radius: 10px; font: 700 1.08rem/1 var(--titre); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; transition: transform .15s, background .15s; }
.vav-bouton:hover { transform: translateY(-2px); }
.vav-bouton--jaune { background: var(--jaune); color: var(--anthracite); }
.vav-bouton--jaune:hover { background: #FFD65C; color: var(--anthracite); }
.vav-bouton--contour { border: 2px solid var(--blanc); color: var(--blanc); }
.vav-bouton--contour:hover { background: var(--blanc); color: var(--anthracite); }

/* ---------- Hero ---------- */
.vav-hero { position: relative; min-height: min(86vh, 760px); display: flex; align-items: flex-end; color: var(--blanc); background: var(--anthracite); overflow: hidden; }
.vav-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vav-hero-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,33,39,.15) 0%, rgba(28,33,39,.55) 45%, rgba(28,33,39,.92) 100%), linear-gradient(90deg, rgba(28,33,39,.7) 0%, rgba(28,33,39,0) 70%); }
.vav-hero-contenu { position: relative; width: min(1200px, 100% - 2rem); margin: 0 auto; padding: 7rem 0 2.5rem; }
.vav-hero-surtitre { display: inline-block; margin: 0 0 1rem; padding: .3rem .7rem; background: var(--jaune); color: var(--anthracite); font: 700 .95rem/1.2 var(--titre); text-transform: uppercase; letter-spacing: .1em; border-radius: 5px; }
.vav-hero-titre { margin: 0 0 1rem; max-width: 18ch; color: var(--blanc); font-size: clamp(2.3rem, 5.6vw, 4.4rem); text-transform: uppercase; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.vav-hero-texte { max-width: 60ch; margin: 0 0 1.6rem; font-size: 1.12rem; color: #F2F4F6; }
.vav-hero-boutons { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 1.5rem; }
.vav-hero-signature { margin: 0; font: 400 .98rem var(--ui); color: #DDE3E9; }
.vav-hero-signature strong { color: var(--jaune); }
.vav-hero-credit { margin: .8rem 0 0; font: 400 .75rem var(--ui); color: #B7C0C9; }
.vav-hero-credit a { color: inherit; }

/* ---------- Sections ---------- */
.vav-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.vav-section-titre { margin: 0 0 1.4rem; font-size: clamp(1.9rem, 3.6vw, 2.75rem); text-transform: uppercase; }
.vav-section-titre::after { content: ""; display: block; width: 64px; height: 5px; margin-top: .6rem; background: var(--couchant); border-radius: 3px; }
.vav-section-chapo { max-width: 68ch; margin: 0 0 2rem; color: var(--gris); }
.vav-section--ciel { background: var(--ciel-pale); }
.vav-section--tableau { background: var(--anthracite); }
.vav-section--tableau .vav-section-titre { color: var(--blanc); }
.vav-section--tableau .vav-section-titre::after { background: var(--jaune); }
.vav-section--max { background: linear-gradient(135deg, var(--jaune-pale), #FFE3D6); }
.vav-section--faq { padding-top: 0; }
.vav-section--max + .vav-section--faq { padding-top: clamp(3rem, 7vw, 5.5rem); }

/* Tableau des départs */
.vav-tableau { display: grid; gap: 6px; border-radius: var(--rayon); overflow: hidden; }
.vav-tableau-ligne { display: grid; grid-template-columns: 3.2rem 2.6rem minmax(10rem, 1fr) 2fr auto; align-items: center; gap: 1rem; padding: .95rem 1.1rem; background: var(--anthracite-2); color: var(--blanc); text-decoration: none; border-left: 5px solid transparent; transition: background .15s, border-color .15s; }
.vav-tableau-ligne:hover { background: #343C47; border-left-color: var(--jaune); color: var(--blanc); }
.vav-tableau-porte { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--jaune); color: var(--anthracite); border-radius: 7px; font: 700 1.6rem/1 var(--titre); }
.vav-tableau-picto { color: var(--jaune); }
.vav-tableau-nom { font: 700 1.35rem/1.1 var(--titre); text-transform: uppercase; letter-spacing: .04em; color: var(--jaune); }
.vav-tableau-phrase { font: 400 .98rem/1.45 var(--ui); color: #CBD3DB; }
.vav-tableau-statut { font: 600 .85rem var(--titre); text-transform: uppercase; letter-spacing: .12em; color: #7CE0A3; white-space: nowrap; }
.vav-tableau-statut::before { content: "●"; margin-right: .4rem; animation: vav-clignote 1.6s infinite; }
@keyframes vav-clignote { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .vav-tableau-statut::before { animation: none; } html { scroll-behavior: auto; } }

/* Frise du vol */
.vav-frise { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1.1rem; }
.vav-frise::before { content: ""; position: absolute; left: 4.6rem; top: .5rem; bottom: .5rem; width: 3px; background: repeating-linear-gradient(180deg, var(--ciel) 0 10px, transparent 10px 18px); }
.vav-frise-etape { display: grid; grid-template-columns: 4rem 1fr; gap: 1.6rem; align-items: start; position: relative; }
.vav-frise-etape::before { content: ""; position: absolute; left: 4.2rem; top: .45rem; width: 14px; height: 14px; border-radius: 50%; background: var(--couchant); box-shadow: 0 0 0 4px var(--creme); }
.vav-frise-heure { font: 700 1.1rem/1.4 var(--titre); color: var(--ciel-fonce); text-align: right; white-space: nowrap; }
.vav-frise-etape h3 { margin: 0 0 .25rem; font-size: 1.35rem; text-transform: uppercase; }
.vav-frise-etape p { margin: 0; }

/* Silhouettes */
.vav-silhouettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.vav-silhouette { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.3rem 1.5rem; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); color: var(--encre); text-decoration: none; border-top: 6px solid var(--ciel); transition: transform .15s; }
.vav-silhouette:nth-child(2) { border-top-color: var(--couchant); }
.vav-silhouette:nth-child(3) { border-top-color: var(--jaune); }
.vav-silhouette:nth-child(4) { border-top-color: var(--anthracite); }
.vav-silhouette:hover { transform: translateY(-4px); color: var(--encre); }
.vav-silhouette-nom { font: 700 1.7rem/1 var(--titre); text-transform: uppercase; color: var(--anthracite); }
.vav-silhouette-indice { font: 400 .98rem/1.5 var(--ui); color: var(--gris); }

/* Max */
.vav-max { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.6rem; align-items: start; }
.vav-max-avatar, .vav-signature-avatar { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 50%; background: var(--anthracite); color: var(--jaune); font: 700 2.6rem/1 var(--titre); box-shadow: 0 0 0 5px var(--jaune); }
.vav-max-texte p { margin: 0 0 1rem; }
.vav-max-liens { margin-top: 1.4rem !important; }

/* ---------- Cartes ---------- */
.vav-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; }
.vav-grille--trois { grid-template-columns: repeat(3, 1fr); }
.vav-carte { display: flex; flex-direction: column; background: var(--blanc); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); transition: transform .15s; }
.vav-carte:hover { transform: translateY(-4px); }
.vav-carte-visuel { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ciel-pale); }
.vav-carte-image { width: 100%; height: 100%; object-fit: cover; }
.vav-carte-corps { display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem 1.25rem 1.3rem; flex: 1; }
.vav-carte-rubrique { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; font: 700 .85rem/1 var(--titre); text-transform: uppercase; letter-spacing: .08em; color: var(--couchant-fonce); text-decoration: none; }
.vav-carte-porte { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--anthracite); color: var(--jaune); border-radius: 4px; font-size: .85rem; }
.vav-carte-titre { margin: 0; font-size: 1.4rem; }
.vav-carte-titre a { color: var(--anthracite); text-decoration: none; }
.vav-carte-titre a:hover { color: var(--ciel-fonce); }
.vav-carte-extrait { margin: 0; font: 400 .97rem/1.55 var(--ui); color: var(--gris); }
.vav-carte-pied { margin: auto 0 0; padding-top: .4rem; font: 500 .82rem var(--ui); color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }

.vav-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.vav-tuile { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); color: var(--encre); text-decoration: none; }
.vav-tuile:hover { color: var(--encre); outline: 3px solid var(--jaune); }
.vav-tuile-texte { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.vav-tuile-nom { font: 700 1.25rem/1.1 var(--titre); text-transform: uppercase; color: var(--anthracite); }
.vav-tuile-phrase { font: 400 .92rem/1.45 var(--ui); color: var(--gris); }
.vav-tuile-fleche { font: 700 1.4rem var(--ui); color: var(--couchant); }

/* Panneau de porte */
.vav-porte { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem .25rem .25rem; background: var(--jaune); color: var(--anthracite); border-radius: 7px; }
.vav-porte-lettre { display: grid; place-items: center; min-width: 1.8rem; height: 1.8rem; background: var(--anthracite); color: var(--jaune); border-radius: 5px; font: 700 1.25rem/1 var(--titre); }
.vav-picto { flex-shrink: 0; }

/* ---------- Article ---------- */
.vav-billet-entete { padding: 2rem 0 1.5rem; }
.vav-billet--page .vav-billet-entete { padding-bottom: 1rem; }
.vav-fil ol { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; font: 500 .88rem var(--ui); color: var(--gris); }
.vav-fil li + li::before { content: "›"; margin-right: .35rem; color: var(--couchant); font-weight: 700; }
.vav-fil a { color: var(--gris); text-decoration: none; }
.vav-fil a:hover { color: var(--ciel-fonce); text-decoration: underline; }
.vav-billet-rubrique { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; color: var(--anthracite); font: 700 1rem var(--titre); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.vav-billet-titre { margin: 0 0 .9rem; font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
.vav-billet-meta { margin: 0; font: 400 .95rem var(--ui); color: var(--gris); }
.vav-billet-meta a { color: var(--anthracite); font-weight: 600; }
.vav-une { margin: 0 0 2.2rem; }
.vav-une img { width: 100%; border-radius: var(--rayon); aspect-ratio: 16 / 9; object-fit: cover; }
.vav-une-legende { margin-top: .55rem; font: 400 .82rem/1.45 var(--ui); color: var(--gris); }
.vav-une-credit, .vav-une-credit a { color: #77818C; }

.vav-texte > * + * { margin-top: 1.15em; }
.vav-texte > :first-child { margin-top: 0; }
.vav-texte p { margin-bottom: 0; }
.vav-texte h2 { margin: 2.2em 0 .5em; font-size: 1.95rem; padding-left: .8rem; border-left: 5px solid var(--jaune); }
.vav-texte h3 { margin: 1.8em 0 .4em; font-size: 1.45rem; color: var(--ciel-fonce); }
.vav-texte ul, .vav-texte ol { padding-left: 1.3rem; }
.vav-texte li { margin-bottom: .45em; }
.vav-texte li::marker { color: var(--couchant); }
.vav-texte strong { color: var(--anthracite); }
.vav-texte blockquote { margin: 1.6em 0; padding: 1rem 1.3rem; background: var(--ciel-pale); border-left: 5px solid var(--ciel); border-radius: 0 10px 10px 0; font-style: italic; }
.vav-texte table { width: 100%; border-collapse: collapse; font: 400 .95rem/1.45 var(--ui); }
.vav-texte th, .vav-texte td { padding: .6rem .7rem; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.vav-texte th { background: var(--anthracite); color: var(--jaune); font: 600 .95rem var(--titre); text-transform: uppercase; letter-spacing: .05em; }
.vav-texte figure { margin: 1.8em 0; }
.vav-texte figure img { border-radius: 10px; }
.vav-texte figcaption { font: 400 .82rem var(--ui); color: var(--gris); margin-top: .4rem; }
.vav-lien { color: var(--ciel-fonce); text-decoration-color: rgba(26,111,168,.45); text-decoration-thickness: 2px; }

.vav-meme-vol { margin-top: 2rem !important; padding: .9rem 1.1rem; background: var(--jaune-pale); border-radius: 10px; font: 400 .95rem/1.6 var(--ui); }
.vav-meme-vol span { display: inline-block; margin-right: .4rem; font: 700 .9rem var(--titre); text-transform: uppercase; letter-spacing: .08em; color: var(--couchant-fonce); }

/* FAQ */
.vav-faq { margin-top: 3rem; }
.vav-faq-titre { margin: 0 0 1rem; font-size: 1.8rem; text-transform: uppercase; }
.vav-faq-item { background: var(--blanc); border-radius: 10px; margin-bottom: .6rem; box-shadow: 0 4px 14px -8px rgba(28,33,39,.25); overflow: hidden; }
.vav-faq-question { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.15rem; position: relative; font: 600 1.05rem/1.4 var(--ui); color: var(--anthracite); }
.vav-faq-question::-webkit-details-marker { display: none; }
.vav-faq-question::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--jaune); color: var(--anthracite); font: 700 1.1rem/1 var(--ui); }
.vav-faq-item[open] .vav-faq-question::after { content: "–"; background: var(--couchant); color: var(--blanc); }
.vav-faq-reponse { padding: 0 1.15rem 1rem; }
.vav-faq-reponse p { margin: 0; }

/* Signature, voisins, correspondances */
.vav-signature { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.2rem; align-items: center; margin-top: 3rem; padding: 1.4rem; background: var(--anthracite); color: #DDE3E9; border-radius: var(--rayon); }
.vav-signature-avatar { width: 4.5rem; height: 4.5rem; font-size: 2.1rem; box-shadow: 0 0 0 4px var(--jaune); background: var(--anthracite-2); }
.vav-signature p { margin: 0; }
.vav-signature-nom { font: 700 1.4rem var(--titre); text-transform: uppercase; color: var(--jaune); }
.vav-signature-posture { font: 400 .95rem/1.5 var(--ui); }
.vav-signature-liens { margin-top: .4rem !important; font: 500 .9rem var(--ui); }
.vav-signature-liens a { color: var(--blanc); }
.vav-voisins { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; }
.vav-voisin { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.15rem; background: var(--blanc); border-radius: 10px; box-shadow: 0 4px 14px -8px rgba(28,33,39,.25); color: var(--anthracite); text-decoration: none; font: 600 1.05rem/1.3 var(--ui); }
.vav-voisin span { font: 700 .8rem var(--titre); text-transform: uppercase; letter-spacing: .1em; color: var(--couchant-fonce); }
.vav-voisin--avant { text-align: left; }
.vav-voisin--apres { text-align: right; }
.vav-voisin:hover { color: var(--ciel-fonce); }
.vav-correspondances { margin: 3.5rem 0 4rem; padding: 1.8rem; background: var(--ciel-pale); border-radius: var(--rayon); }
.vav-correspondances-titre { margin: 0 0 1rem; font-size: 1.8rem; text-transform: uppercase; }
.vav-correspondances ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .55rem 1.2rem; }
.vav-correspondances a { display: flex; align-items: center; gap: .7rem; padding: .55rem .4rem; color: var(--anthracite); text-decoration: none; font: 500 1rem/1.35 var(--ui); border-bottom: 1px dashed #B9D9EC; }
.vav-correspondances a:hover { color: var(--ciel-fonce); }
.vav-correspondances-porte { display: inline-grid; place-items: center; flex-shrink: 0; width: 1.7rem; height: 1.7rem; background: var(--anthracite); color: var(--jaune); border-radius: 5px; font: 700 1rem/1 var(--titre); }

/* ---------- Rubrique ---------- */
.vav-rubrique-entete { position: relative; min-height: 420px; display: flex; align-items: flex-end; background: var(--anthracite); color: var(--blanc); overflow: hidden; }
.vav-rubrique-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vav-rubrique-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,33,39,.2), rgba(28,33,39,.9)); }
.vav-rubrique-contenu { position: relative; padding: 2rem 0 2.3rem; }
.vav-rubrique-contenu .vav-fil ol, .vav-rubrique-contenu .vav-fil a { color: #DDE3E9; }
.vav-rubrique-porte { margin: 0 0 .8rem; }
.vav-rubrique-titre { margin: 0 0 .6rem; color: var(--blanc); font-size: clamp(2.4rem, 5vw, 3.8rem); text-transform: uppercase; }
.vav-rubrique-phrase { max-width: 62ch; margin: 0; font-size: 1.1rem; color: #EEF1F4; }
.vav-rubrique-credit { margin: .8rem 0 0; font: 400 .75rem var(--ui); color: #B7C0C9; }
.vav-rubrique-credit a { color: inherit; }
.vav-rubrique-texte { margin-top: 3rem; max-width: 760px; }

/* Pagination, vide, 404 */
.vav-pagination { margin-top: 2.5rem; }
.vav-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; font: 600 1rem var(--ui); }
.vav-pagination .page-numbers { padding: .5rem .85rem; background: var(--blanc); border-radius: 8px; color: var(--anthracite); text-decoration: none; }
.vav-pagination .page-numbers.current { background: var(--anthracite); color: var(--jaune); }
.vav-vide { margin: 0 0 1.5rem; font: 400 1.05rem var(--ui); color: var(--gris); }
.vav-perdu-code { margin: 0; font: 700 clamp(5rem, 16vw, 9rem)/1 var(--titre); color: var(--jaune); -webkit-text-stroke: 3px var(--anthracite); }

/* ---------- Pied ---------- */
.vav-pied { background: var(--anthracite); color: #C4CCD5; padding: 3.5rem 0 1.5rem; border-top: 6px solid var(--jaune); font: 400 .95rem/1.6 var(--ui); }
.vav-pied-grille { width: min(1200px, 100% - 2rem); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.vav-pied-nom { margin: 0 0 .6rem; font: 700 1.6rem var(--titre); text-transform: uppercase; letter-spacing: .06em; color: var(--jaune); }
.vav-pied-texte { margin: 0 0 .6rem; }
.vav-pied-titre { margin: 0 0 .8rem; font: 700 1.05rem var(--titre); text-transform: uppercase; letter-spacing: .1em; color: var(--blanc); }
.vav-pied-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.vav-pied a { color: #E4E9EE; text-decoration: none; }
.vav-pied a:hover { color: var(--jaune); }
.vav-pied-porte { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-right: .45rem; background: var(--jaune); color: var(--anthracite); border-radius: 4px; font: 700 .85rem/1 var(--titre); }
.vav-pied-bas { width: min(1200px, 100% - 2rem); margin: 2.5rem auto 0; padding-top: 1.2rem; border-top: 1px solid #39424D; font-size: .82rem; color: #8F9AA6; }

/* ---------- Mobile ---------- */
@media (max-width: 960px) {
  .vav-silhouettes { grid-template-columns: repeat(2, 1fr); }
  .vav-grille--trois { grid-template-columns: repeat(2, 1fr); }
  .vav-tableau-ligne { grid-template-columns: 2.8rem 2.2rem 1fr; }
  .vav-tableau-phrase { grid-column: 1 / -1; }
  .vav-tableau-statut { display: none; }
  .vav-pied-grille { grid-template-columns: 1fr 1fr; }
  .vav-pied-grille > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .vav-marque-nom { font-size: 1.25rem; }
  .vav-hero { min-height: 640px; }
  .vav-hero-contenu { padding-top: 5rem; }
  .vav-silhouettes, .vav-grille--trois, .vav-grille { grid-template-columns: 1fr; }
  .vav-frise::before { left: 3.4rem; }
  .vav-frise-etape { grid-template-columns: 2.9rem 1fr; gap: 1.4rem; }
  .vav-frise-etape::before { left: 3rem; }
  .vav-frise-heure { font-size: .95rem; }
  .vav-max { grid-template-columns: 1fr; }
  .vav-voisins { grid-template-columns: 1fr; }
  .vav-voisin--apres { text-align: left; }
  .vav-correspondances { padding: 1.3rem 1rem; }
  .vav-correspondances ul, .vav-tuiles { grid-template-columns: 1fr; }
  .vav-signature { grid-template-columns: 1fr; }
  .vav-pied-grille { grid-template-columns: 1fr; }
  .vav-texte table { display: block; overflow-x: auto; }
}