/* Vitrine publique — portage de `specs/Ultraplanner vitrine refonte/`.
 *
 * Feuille autonome : la vitrine n'hérite pas du châssis Bootstrap legacy et
 * ne peut pas référencer le bundle Tailwind de la SPA, qui est hashé par Vite
 * (cf. le commentaire de `templates/vitrine/base.html`).
 *
 * Les valeurs viennent du handoff, qui est haute fidélité : couleurs, tailles
 * et espacements y sont définitifs. Elles divergent LÉGÈREMENT du thème sombre
 * de la SPA (#0a0b0a contre #0e1213, accent #b9f24a contre #b6e94a) — écart
 * assumé le 2026-07-29 : le design repose sur une échelle de profondeur à six
 * niveaux de surface et cinq de filet, dont la SPA n'expose que trois valeurs.
 * En reprendre la moitié aurait cassé le rendu sans rapprocher les deux
 * surfaces de façon perceptible.
 *
 * Polices servies depuis `static/vendor/fonts/` — pas de CDN (CLAUDE.md § 5).
 * Chemins relatifs : le stockage statique est `CompressedStaticFilesStorage`,
 * qui ne hashe pas les noms, donc `../vendor/…` reste valide après
 * `collectstatic`.
 */

@font-face {
  font-family: 'Space Grotesk Vitrine';
  src: url('../vendor/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono Vitrine';
  src: url('../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono Vitrine';
  src: url('../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --v-bg: #0a0b0a;
  --v-bg-alt: #0c0d0c;
  --v-surface: #0e100e;
  --v-surface-hero: #101210;
  --v-surface-hi: #101310;
  --v-surface-in: #141714;
  --v-surface-band: #171a16;

  --v-line-strong: #2c302a;
  --v-line: #22261f;
  --v-line-card: #1f231e;
  --v-line-page: #1d201c;
  --v-line-weak: #1a1d19;
  --v-line-row: #1c1f1a;

  --v-text: #e9ece7;
  --v-text-2: #dfe4dc;
  --v-text-3: #c9d1c5;
  --v-text-4: #a7b1a2;
  --v-text-5: #98a294;
  --v-text-6: #8b9686;
  --v-text-7: #7f8a7a;
  --v-text-8: #6f7a6b;

  --v-accent: #b9f24a;
  --v-accent-hover: #cbf873;
  --v-link-hover: #d0f97e;
  --v-warn: #d9a13a;

  --v-font: 'Space Grotesk Vitrine', system-ui, sans-serif;
  --v-mono: 'IBM Plex Mono Vitrine', ui-monospace, monospace;

  /* Nombre de colonnes d'offres — posé par le gabarit. La grille en compte
     trois aujourd'hui, mais elle suit `Offer.is_public` : la figer en dur
     casserait la page le jour où une offre est retirée. */
  --v-cols: 3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--v-bg);
  color: var(--v-text);
  font-family: var(--v-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--v-accent); text-decoration: none; }
a:hover { color: var(--v-link-hover); }

h1, h2, h3 { margin: 0; font-weight: 500; }

.v-wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

.v-mono {
  font-family: var(--v-mono);
  letter-spacing: .1em;
}

/* ── En-tête collant ──────────────────────────────────────────────────── */

.v-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 11, 10, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--v-line-page);
}
.v-header .v-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.v-marque {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--v-text);
}
.v-marque span { color: var(--v-accent); }
.v-marque:hover { color: var(--v-text); }

.v-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.v-nav a {
  font-size: 14.5px;
  color: #9aa595;
}
.v-nav a:hover { color: var(--v-text); }

/* ── Boutons ──────────────────────────────────────────────────────────── */

.v-btn {
  display: inline-block;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--v-accent);
  color: var(--v-bg);
  border: 1px solid transparent;
}
.v-btn:hover { background: var(--v-accent-hover); color: var(--v-bg); }

.v-btn.v-secondaire {
  background: transparent;
  color: var(--v-text);
  border-color: var(--v-line-strong);
}
.v-btn.v-secondaire:hover {
  background: transparent;
  border-color: #4a5145;
  color: var(--v-text);
}

.v-btn.v-grand { font-size: 15.5px; padding: 14px 24px; border-radius: 9px; }
.v-btn.v-large { display: block; width: 100%; text-align: center; }

.v-btn.v-inerte {
  background: transparent;
  color: var(--v-text-8);
  border-color: var(--v-line-card);
  cursor: default;
}
.v-btn.v-inerte:hover { color: var(--v-text-8); border-color: var(--v-line-card); }

/* ── Modale de connexion ──────────────────────────────────────────────── */
/* <dialog> natif : focus trap, fermeture au clavier (Échap) et couche
   d'affichage au-dessus de tout le reste viennent du navigateur, sans lib
   JS. Ouverte par static/vitrine/login.js. */

dialog.v-modal {
  width: min(380px, calc(100vw - 40px));
  padding: 0;
  border: 1px solid var(--v-line-card);
  border-radius: 18px;
  background: var(--v-surface-hero);
  color: var(--v-text);
}
dialog.v-modal::backdrop {
  background: rgba(6, 7, 6, .72);
  backdrop-filter: blur(4px);
}
dialog.v-modal[open] { animation: v-modal-entree .18s ease-out; }
@keyframes v-modal-entree {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
}

.v-modal-form { position: relative; padding: 28px 26px 26px; }
.v-modal-form h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 20px;
}

.v-modal-fermer {
  position: absolute;
  top: 18px;
  right: 20px;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: var(--v-text-7);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}
.v-modal-fermer:hover { color: var(--v-text); }

.v-champ { margin-bottom: 16px; }
.v-champ label {
  display: block;
  font-size: 12.5px;
  color: var(--v-text-6);
  margin-bottom: 6px;
}
.v-champ input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 14.5px;
  color: var(--v-text);
  background: var(--v-surface-in);
  border: 1px solid var(--v-line);
  border-radius: 8px;
  padding: 10px 12px;
}
.v-champ input:focus { outline: none; border-color: var(--v-accent); }

.v-modal-erreur { font-size: 13px; color: var(--v-warn); margin: 0 0 16px; }

.v-modal-form .v-btn { width: 100%; text-align: center; }
.v-modal-form .v-btn:disabled { opacity: .6; cursor: default; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.v-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 72px;
}

.v-eyebrow {
  font-family: var(--v-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v-text-7);
  margin: 0 0 22px;
}

.v-hero h1 {
  font-size: 62px;
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.035em;
  text-wrap: balance;
  margin: 0 0 24px;
}

.v-hero-chapo {
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--v-text-4);
  max-width: 520px;
  margin: 0 0 32px;
}

.v-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; }

.v-hero-mention {
  font-family: var(--v-mono);
  font-size: 12.5px;
  color: var(--v-text-8);
  margin: 0;
}

/* Carte « État du projet » — les micro-vues sont décoratives (aria-hidden),
   la valeur chiffrée à gauche porte l'information. */

.v-etat {
  border: 1px solid var(--v-line-card);
  border-radius: 16px;
  background: var(--v-surface-hero);
  padding: 26px 26px 24px;
}
.v-etat-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.v-etat-tete h2 { font-size: 15.5px; font-weight: 500; }
.v-etat-tete span {
  font-family: var(--v-mono);
  font-size: 11px;
  color: var(--v-text-7);
}

.v-etat-ligne {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--v-line-row);
}
.v-etat-ligne:first-of-type { border-top: 1px solid var(--v-line-row); }
.v-etat-ligne h3 { font-size: 14.5px; font-weight: 500; }
.v-etat-ligne p {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--v-text-6);
}
.v-etat-valeur {
  font-family: var(--v-mono);
  font-size: 14px;
  text-align: right;
  display: block;
  margin-bottom: 8px;
}
.v-etat-valeur.v-alerte { color: var(--v-warn); }

.v-vue-sac { display: flex; gap: 2px; height: 6px; }
.v-vue-sac span { border-radius: 3px; }

.v-vue-charge {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
}
.v-vue-charge span { flex: 1; border-radius: 1px; }

.v-vue-sante { display: flex; gap: 2px; }
.v-vue-sante span { flex: 1; height: 6px; border-radius: 2px; }

.v-vue-cps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 7px;
}
.v-vue-cps::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #262a23;
}
.v-vue-cps span {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.v-etat-pied {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--v-text-6);
}

/* ── Bande rétroplanning ──────────────────────────────────────────────── */

.v-bande {
  background: var(--v-bg-alt);
  border-top: 1px solid var(--v-line-page);
  border-bottom: 1px solid var(--v-line-page);
  margin-bottom: 96px;
}
.v-bande .v-wrap { padding-top: 56px; padding-bottom: 56px; }

.v-bande-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}
.v-bande-tete h2 {
  font-size: 26px;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.v-bande-tete p {
  margin: 0;
  font-size: 15.5px;
  color: var(--v-text-5);
  max-width: 640px;
}
.v-bande-tete .v-mono {
  font-size: 11px;
  color: var(--v-text-7);
  white-space: nowrap;
}

/* Phases, voies et axe partagent la MÊME grille de 16 colonnes et se placent
   par `grid-column`. Ne pas revenir à `space-between` ou à des quarts : les
   libellés se décalent des colonnes qu'ils nomment. */
.v-frise { display: grid; grid-template-columns: 132px 1fr; gap: 16px; }
.v-frise-nom {
  font-family: var(--v-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v-text-6);
  align-self: center;
}
.v-piste {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 4px;
}
.v-piste > span { height: 18px; border-radius: 3px; }

.v-frise-phases { margin-bottom: 10px; }
.v-frise-phases span {
  font-family: var(--v-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-text-7);
}
.v-frise-phases span.v-accent { color: var(--v-accent); }

.v-frise-axe {
  border-top: 1px solid var(--v-line);
  padding-top: 10px;
  margin-top: 10px;
}
.v-frise-axe span {
  font-family: var(--v-mono);
  font-size: 10.5px;
  color: var(--v-text-7);
}
.v-frise-axe span.v-accent { color: var(--v-accent); }

/* ── Blocs produit (technique des filets) ─────────────────────────────── */

.v-blocs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--v-line-page);
  border: 1px solid var(--v-line-page);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 96px;
}
.v-blocs > div { background: var(--v-surface); padding: 30px 32px; }
.v-blocs h3 { font-size: 19px; letter-spacing: -.015em; margin-bottom: 10px; }
.v-blocs p {
  margin: 0;
  font-size: 14.8px;
  line-height: 1.6;
  color: var(--v-text-5);
  text-wrap: pretty;
}

/* ── Sections ─────────────────────────────────────────────────────────── */

.v-section { margin-bottom: 96px; }
.v-section > h2 {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: 14px;
}
.v-section > h2.v-petit { font-size: 26px; font-weight: 500; letter-spacing: -.02em; }
.v-chapo {
  font-size: 16.5px;
  color: var(--v-text-5);
  max-width: 660px;
  margin: 0 0 34px;
  text-wrap: pretty;
}

/* ── Cartes guides ────────────────────────────────────────────────────── */

.v-guides { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.v-guide {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid var(--v-line-card);
  border-radius: 14px;
  background: var(--v-surface);
  padding: 26px 26px 22px;
  color: inherit;
}
.v-guide:hover {
  border-color: #4a5145;
  background: #111411;
  color: inherit;
}
.v-guide-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.v-guide-tete .v-mono {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v-text-7);
}
.v-guide-tete .v-fleche { color: var(--v-accent); font-size: 15px; }
.v-guide h3 { font-size: 21px; letter-spacing: -.015em; margin-bottom: 8px; }
.v-guide p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--v-text-5);
  text-wrap: pretty;
}
.v-guide-corps { margin-top: -4px; }

.v-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--v-line);
  border-radius: 6px;
  overflow: hidden;
}
.v-stats > div { background: var(--v-surface-in); padding: 11px 12px; }
.v-stats dt {
  font-family: var(--v-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v-text-7);
  margin-bottom: 3px;
}
.v-stats dd { margin: 0; font-size: 15px; font-weight: 500; }

.v-guide-cta { font-size: 13.5px; color: var(--v-accent); margin-top: auto; }

/* ── Carte guide à bascule (catégorie à plusieurs exemples) ────────────
 * `.v-guide--toggle` remplace le `<a>` unique par un `<div>` : des
 * `<label>` pour radios ne peuvent pas vivre dans un lien englobant. Le
 * lien redescend donc au niveau du CTA de chaque panneau.
 *
 * Bascule en CSS pur via `:has()` (Baseline depuis fin 2023) : pas de JS,
 * dégradation propre (le premier panneau reste affiché par défaut si
 * `:has()` n'est pas supporté). Les sélecteurs sont positionnels
 * (`:first-of-type` / `:nth-of-type(2)`), pas liés à un slug — valable
 * pour n'importe quelle catégorie, mais seulement pour DEUX exemples ; un
 * 3e demanderait une règle `:nth-of-type(3)` de plus.
 */

.v-toggle { display: flex; gap: 6px; }
.v-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.v-toggle label {
  font-family: var(--v-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v-text-6);
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid var(--v-line-strong);
  cursor: pointer;
  user-select: none;
}
.v-toggle input:checked + label {
  color: var(--v-bg);
  background: var(--v-accent);
  border-color: var(--v-accent);
}
.v-toggle input:focus-visible + label { outline: 2px solid var(--v-accent); outline-offset: 2px; }

.v-ex-panels { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.v-ex-panel { display: none; flex-direction: column; gap: 18px; flex: 1; min-height: 0; }
.v-ex-panel:first-of-type { display: flex; }

.v-guide--toggle:has(.v-toggle input:nth-of-type(2):checked) .v-ex-panel:first-of-type { display: none; }
.v-guide--toggle:has(.v-toggle input:nth-of-type(2):checked) .v-ex-panel:nth-of-type(2) { display: flex; }

/* ── Cartes d'offres ──────────────────────────────────────────────────── */

.v-offres {
  display: grid;
  grid-template-columns: repeat(var(--v-cols), 1fr);
  gap: 16px;
  align-items: start;
}

.v-offre {
  display: flex;
  flex-direction: column;
  gap: 22px;
  border: 1px solid var(--v-line-card);
  border-radius: 14px;
  background: var(--v-surface);
  padding: 28px;
}
.v-offre.v-en-avant {
  position: relative;
  border-color: var(--v-accent);
  background: var(--v-surface-hi);
}
.v-offre-badge {
  position: absolute;
  top: -11px;
  left: 28px;
  background: var(--v-accent);
  color: var(--v-bg);
  font-family: var(--v-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
}
.v-offre-nom {
  font-family: var(--v-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v-text-7);
  margin: 0 0 12px;
}
.v-en-avant .v-offre-nom { color: var(--v-accent); }
.v-offre-promesse {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0 0 12px;
  /* Deux lignes réservées : « Sans abonnement » en prend deux quand les
     autres promesses n'en prennent qu'une, et les cartes se désalignaient
     sur toute leur hauteur. */
  min-height: 79px;
}
.v-offre-texte {
  margin: 0;
  font-size: 14.8px;
  line-height: 1.55;
  color: var(--v-text-5);
}

.v-offre ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.v-offre li { font-size: 14.5px; display: flex; gap: 10px; }
.v-offre li::before { content: '✓'; color: var(--v-accent); }
.v-offre li.v-absent { color: var(--v-text-8); }
.v-offre li.v-absent::before { content: '—'; color: var(--v-text-8); }

.v-offre-mention {
  font-family: var(--v-mono);
  font-size: 11px;
  color: var(--v-text-7);
  text-align: center;
  margin: 0;
}
.v-offre-pied { margin-top: auto; display: grid; gap: 12px; }

.v-bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 16px;
  border: 1px solid var(--v-line-card);
  border-radius: 14px;
  background: var(--v-surface);
  padding: 22px 28px;
}
.v-bandeau p { margin: 0; font-size: 14.5px; color: var(--v-text-5); }

/* ── Comparatif ───────────────────────────────────────────────────────── */

/* La lecture par colonne d'offre est l'intérêt du tableau : sous ~900 px on
   le fait défiler horizontalement plutôt que de le réempiler. */
.v-comparatif-cadre {
  border: 1px solid var(--v-line-card);
  border-radius: 14px;
  overflow: hidden;
}
.v-defile { overflow-x: auto; }
.v-comparatif { min-width: 760px; }

.v-comp-tete {
  display: grid;
  grid-template-columns: 46px 1.6fr repeat(var(--v-cols), 1fr);
  background: var(--v-surface-in);
}
.v-comp-tete > div {
  font-family: var(--v-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-text-6);
  padding: 13px 16px;
  text-align: center;
}
.v-comp-tete > div:first-child { background: var(--v-surface-band); padding: 0; }
.v-comp-tete > div:nth-child(2) { text-align: left; padding-left: 22px; }
.v-comp-tete > div.v-en-avant { color: var(--v-accent); }

.v-comp-groupe {
  display: grid;
  grid-template-columns: 46px 1fr;
  border-top: 1px solid var(--v-line-strong);
}
.v-comp-bande {
  background: var(--v-surface-band);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v-comp-bande span {
  font-family: var(--v-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v-text-6);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.v-comp-bande.v-accent span { color: var(--v-accent); }

.v-comp-ligne {
  display: grid;
  grid-template-columns: 1.6fr repeat(var(--v-cols), 1fr);
}
.v-comp-ligne + .v-comp-ligne > * { border-top: 1px solid var(--v-line-weak); }
.v-comp-ligne > div {
  font-size: 14.5px;
  padding: 13px 16px;
  text-align: center;
  color: var(--v-text-3);
}
.v-comp-ligne > div:first-child {
  text-align: left;
  padding: 13px 22px;
  color: var(--v-text-2);
}
.v-comp-ligne .v-oui { color: var(--v-accent); }
.v-comp-ligne .v-non { color: #5f6a5c; }
.v-comp-ligne .v-colonne-avant { background: var(--v-surface-hi); }

/* ── Guides (ébauches) ────────────────────────────────────────────────── */

.v-guide-page { padding-top: 56px; }
.v-guide-page h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 12px 0 18px;
  text-wrap: balance;
}

.v-todo {
  border: 1px solid var(--v-accent);
  border-radius: 14px;
  background: var(--v-surface-hi);
  padding: 26px 28px;
  margin: 34px 0;
}
.v-todo h2 {
  font-family: var(--v-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v-accent);
  margin-bottom: 12px;
}
.v-todo p { margin: 0 0 14px; font-size: 15px; color: var(--v-text-4); }
.v-todo ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.v-todo li { font-size: 14.5px; color: var(--v-text-5); }

/* ── Pied de page ─────────────────────────────────────────────────────── */

.v-footer {
  border-top: 1px solid var(--v-line-page);
  background: var(--v-bg-alt);
}
.v-footer .v-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding-top: 44px;
  padding-bottom: 44px;
}
.v-footer .v-marque { font-size: 16px; }
.v-footer p { margin: 6px 0 0; font-size: 14px; color: var(--v-text-7); }
.v-footer nav { display: flex; gap: 26px; flex-wrap: wrap; }
.v-footer nav a { font-size: 14px; color: #9aa595; }
.v-footer nav a:hover { color: var(--v-text); }

/* ── Responsive ───────────────────────────────────────────────────────── */
/* Non traité par la maquette, dessinée pour ≥ 1160 px. Une colonne sous
   900 px ; la frise et le comparatif défilent au lieu de se réempiler. */

@media (max-width: 900px) {
  .v-wrap { padding: 0 20px; }

  .v-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 56px;
    padding-bottom: 48px;
  }
  .v-hero h1 { font-size: clamp(38px, 9vw, 54px); }

  .v-blocs, .v-guides { grid-template-columns: 1fr; margin-bottom: 64px; }
  .v-offres { grid-template-columns: 1fr; }
  .v-section { margin-bottom: 64px; }
  .v-bande { margin-bottom: 64px; }
  .v-bande-tete { flex-direction: column; gap: 12px; }

  .v-frise-cadre { overflow-x: auto; }
  .v-frise { min-width: 640px; }

  .v-etat-ligne { grid-template-columns: 1fr 92px; }
}

/* Sous ~560 px, la barre n'a plus la place de tenir sur une ligne : le bouton
   « Se connecter » sortait de l'écran. La nav passe sous le wordmark plutôt
   que de déborder — un lien coupé par le bord est un lien perdu. */
@media (max-width: 560px) {
  .v-header .v-wrap { flex-wrap: wrap; gap: 12px; }
  .v-nav { width: 100%; justify-content: space-between; gap: 12px; }
  .v-nav a { font-size: 14px; }

  .v-offre-promesse { min-height: 0; }
  .v-hero h1 { font-size: clamp(32px, 8.5vw, 44px); }
  .v-section > h2 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}