/* ============================================================
   VDO Group — Feuille de style du site
   Identité : design-system/styles.css (tokens VDO Group)
   DA : noir absolu, neutres froids, accent violet parcimonieux,
        grotesque unique Archivo (titres très gras MAJ, esprit « Folio »/Venise)
        + JetBrains Mono (données/cotes).
   Ce fichier ne fait que consommer les tokens du design system.
   ============================================================ */
:root {
  /* ---- Alias locaux → tokens du design system ---- */
  --bg:        var(--ink-900);
  --bg-2:      var(--ink-850);
  --surface:   var(--ink-800);
  --surface-2: var(--ink-750);
  --border:    var(--ink-600);
  --border-2:  var(--ink-500);
  --text:      var(--ink-050);
  --text-dim:  var(--ink-200);
  --text-mute: var(--ink-300);
  --brand:     var(--violet-400);   /* accent principal, aplats rares */
  --brand-2:   var(--violet-300);   /* hover */
  --brand-ink: var(--violet-200);   /* texte / liens accentués sur fond sombre */
  --brand-soft: rgba(124, 63, 176, .12);
  --brand-line: rgba(124, 63, 176, .34);
  --gold:      var(--data-warn);
  --gold-soft: rgba(201, 162, 75, .10);
  --gold-line: rgba(201, 162, 75, .30);
  --gold-ink:  #d8b769;
  --gold-ink-strong: #e2c689;    /* emphase (<b>/<strong>) sur bandeaux dorés */
  --danger:    var(--data-neg);
  --danger-soft: rgba(192, 87, 79, .11);
  --danger-line: rgba(192, 87, 79, .32);
  --danger-ink: #d98d86;
  --danger-ink-strong: #e8a9a2;  /* emphase (<strong>) sur alertes */
  --danger-hover: #cf6a62;       /* survol du bouton danger */
  --pos:       var(--data-pos);
  --radius:    var(--radius-md);
  --maxw:      var(--container);
  --font:      var(--font-sans);
  --label:     var(--font-label);
  --mono:      var(--font-mono);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* L'attribut « hidden » doit toujours l'emporter : sans cette ligne, la moindre
   règle display (grid, flex…) le neutralise et un bloc censé disparaître reste
   à l'écran. Cas rencontré : le formulaire de contact restait visible sous son
   propre message « Message transmis ». */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: var(--leading-relaxed);
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Grille fine signature + vignettage */
/* Fond sobre : noir profond uni (la grille signature est retirée — elle
   brouillait le fond ; seul reste le léger assombrissement des bords) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--vignette);
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
::selection { background: rgba(124, 63, 176, .32); color: var(--ink-050); }

/* Titres de premier rang : la voix du logo (Cormorant Light) sur tout le site ;
   les h3/h4 restent en Archivo — ce sont des titres d'interface. */
h1, h2 {
  font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  font-weight: var(--weight-light);
  letter-spacing: .005em;
  line-height: 1.08;
  color: var(--text);
}
h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text);
}
/* Titres « vitrine » — accordés au logo 7a : Cormorant Garamond Light,
   casse normale, grandes tailles, interlettrage léger. Une seule voix
   typographique pour les titres (celle du logo), Archivo reste la voix
   des textes et de l'interface, JetBrains Mono celle des chiffres. */
.hero-title,
.section-head h2,
.cta-band h2,
.thanks-hero h1,
.notfound h1 {
  font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  font-weight: var(--weight-light);
  text-transform: none;
  letter-spacing: .005em;
  line-height: 1.06;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: .84rem; line-height: 1;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 14px 24px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--glow-accent); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-2); }
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--accent-strong); color: var(--text); }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.btn-lg { padding: 17px 32px; font-size: .98rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; background: var(--ink-700); color: var(--ink-300); border-color: var(--ink-400); }

/* ---------- Header ---------- */
/* En-tête façon grande maison : transparent en haut de page, il se voile
   au défilement ; bouton Menu à gauche, logo centré, actions à droite. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent; border-bottom: var(--border-hair) solid transparent;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.site-header.scrolled {
  backdrop-filter: blur(var(--blur-md));
  background: rgba(10, 10, 11, .78);
  border-bottom-color: var(--border);
}
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
.nav-menu-btn {
  justify-self: start; display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 10px 12px 10px 0; min-height: 44px;
  color: var(--text); cursor: pointer;
  font-family: var(--font-label); font-size: .76rem; font-weight: var(--weight-medium);
  letter-spacing: .16em; text-transform: uppercase;
}
.nav-menu-btn span { position: relative; }
.nav-menu-btn span::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px;
  background: var(--violet-400); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-menu-btn:hover span::after { transform: scaleX(1); }
/* Lockup de marque : le monogramme VDO tient lieu de logo ET des trois premières
   lettres du nom — il est suivi du seul mot « Group » (pas de répétition). */
.brand {
  display: flex; align-items: baseline; gap: 5px;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: 1.24rem; letter-spacing: var(--tracking-snug); color: var(--text);
  line-height: var(--leading-tight);
}
/* ---------- Logo officiel 7a « Le fil violet » (spec : CLAUDE.md) —
   nom VDO en Cormorant Garamond Light (V contour ivoire · DO plein ivoire)
   interrompant un fil violet horizontal en dégradé ---------- */
.brand-mark {
  flex: none; display: inline-flex; align-items: baseline;
  font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  font-weight: var(--weight-light);
  font-size: 2.25rem; line-height: 1; letter-spacing: .04em;
}
.brand-mark .mono-v { color: transparent; -webkit-text-stroke: .6px var(--text); }
.brand-mark .mono-do { color: var(--text); }
/* le logo officiel est le nom VDO seul entre les deux fils — « Group » ne s'affiche pas dans le header */
.nav .brand .brand-word { display: none; }
@keyframes sheen {
  0%       { background-position: 130% 0; }
  45%,100% { background-position: -30% 0; }
}
/* « Group » : même famille, poids léger, aligné sur la ligne de base du monogramme */
.brand-word { font-size: 1.02rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-050); align-self: center; }
.brand-mark svg { width: 100%; height: 100%; }
/* Signature de marque — traitement du lockup officiel (serif italique, « Tout simplement. » en accent) */
.brand small {
  display: block; font-family: var(--font-display); font-size: .78rem; font-weight: var(--weight-regular);
  font-style: italic; letter-spacing: var(--tracking-normal); text-transform: none;
  line-height: var(--leading-snug); color: var(--ink-100); margin-top: 2px;
  white-space: nowrap;
}
/* « Tout simplement. » sur sa propre ligne, comme le lockup de marque */
.brand small em { display: block; font-style: italic; color: var(--accent-text); }
.nav .brand { justify-self: center; }
/* Fil violet du logo officiel 7a : 1px en dégradé de part et d'autre du nom
   centré, aligné au centre optique (pseudo-éléments du lockup) */
.brand::before, .brand::after { content: ""; align-self: center; height: 1px; flex: none; width: clamp(26px, 5vw, 84px); }
.brand::before { background: linear-gradient(90deg, transparent, var(--violet-400)); margin-right: 18px; }
.brand::after  { background: linear-gradient(90deg, var(--violet-400), transparent); margin-left: 18px; }
.nav-cta { justify-self: end; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  color: var(--text-dim); font-family: var(--font-display);
  font-size: .82rem; font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: .09em;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
/* zone tactile 44×44 (recommandation WCAG 2.5.5) ; marge négative pour garder l'alignement au bord */
.nav-toggle { display: none; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; margin-right: -10px; background: none; border: 0; color: var(--text); cursor: pointer; line-height: 0; }

/* ---------- Ouverture de marque (lockup officiel, une fois par visite) ---------- */
.brand-intro {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--ink-900);
  animation: introOut 3000ms var(--ease-signature) forwards;
}
.brand-intro::after { content: ""; position: absolute; inset: 0; background: var(--vignette); pointer-events: none; }
/* visibility:hidden retire aussi l'écran du test de clic en fin d'animation */
@keyframes introOut {
  0%, 82%  { opacity: 1; visibility: visible; }
  100%     { opacity: 0; visibility: hidden; }
}
/* Logo officiel 7a sur l'écran d'ouverture : VDO en Cormorant Light interrompant le fil violet */
.brand-intro-mark {
  font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  font-weight: var(--weight-light);
  font-size: clamp(64px, 13vw, 168px); line-height: 1; letter-spacing: .04em;
  display: flex; align-items: baseline;
  opacity: 0; animation: introSnap 480ms var(--ease-signature) 360ms both;
}
.brand-intro-mark::before, .brand-intro-mark::after {
  content: ""; align-self: center; height: 1px;
  width: clamp(46px, 9vw, 150px); flex: none;
}
.brand-intro-mark::before { background: linear-gradient(90deg, transparent, var(--violet-400)); margin-right: clamp(16px, 2.6vw, 34px); }
.brand-intro-mark::after  { background: linear-gradient(90deg, var(--violet-400), transparent); margin-left: clamp(16px, 2.6vw, 34px); }
.brand-intro-mark .mono-v { color: transparent; -webkit-text-stroke: .012em var(--text); }
.brand-intro-mark .mono-do { color: var(--text); }
.brand-intro-rule {
  width: 0; height: 1px; margin: clamp(20px, 3vw, 38px) 0 0;
  background: linear-gradient(90deg, transparent, var(--violet-400), transparent);
  animation: introBlade 300ms var(--ease-signature) 150ms forwards;
}
/* Frappe : le filet fend l'écran d'un trait rapide, avant que le logo claque */
@keyframes introBlade { 0% { width: 0; opacity: .5; } 100% { width: clamp(160px, 22vw, 260px); opacity: 1; } }
.brand-intro-slogan {
  margin-top: clamp(18px, 2.6vw, 32px); max-width: 90vw; text-align: center;
  font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif; font-style: italic; font-weight: var(--weight-light);
  font-size: clamp(17px, 2.4vw, 30px); line-height: var(--leading-snug); color: var(--ink-100);
  opacity: 0; animation: introFade 700ms var(--ease-signature) 1050ms both;
}
.brand-intro-slogan em { font-style: italic; color: var(--violet-300); }
@keyframes introFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Frappe : le monogramme claque en place — arrive flou et surdimensionné, puis se fige net */
@keyframes introSnap { 0% { opacity: 0; transform: scale(1.16); filter: blur(8px); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }
/* déjà vue pendant cette visite, ou mouvement réduit : on entre directement sur le site */
.intro-vue .brand-intro { display: none; }
@media (prefers-reduced-motion: reduce) { .brand-intro { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: 84px 0 60px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
/* Étiquette de rubrique — texte simple, éditorial (plus de pastille « live ») */
.eyebrow {
  display: block;
  font-family: var(--font-display); font-size: .72rem; font-weight: var(--weight-bold);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 20px;
}
/* L'ancien point clignotant type « live » est retiré partout (marqueur IA). */
.dot { display: none; }
h1.hero-title { font-size: clamp(3rem, 6.8vw, 5.6rem); line-height: 1.04; font-weight: var(--weight-light); color: var(--text); }
h1.hero-title .accent { color: var(--accent-text); font-style: normal; }
.hero-sub { margin-top: 22px; font-size: 1.05rem; color: var(--text-dim); max-width: 30em; }
.hero-actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta { margin-top: 34px; display: flex; gap: 26px; flex-wrap: wrap; }
.hero-meta div { font-family: var(--label); font-size: .7rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-mute); }
.hero-meta strong { display: block; font-family: var(--mono); font-size: 1.4rem; color: var(--text); font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug); text-transform: none; margin-bottom: 4px; }
.hero-meta strong .u { color: var(--accent-text); }

/* ---------- Telegram card mockup (réplique thème sombre) ---------- */
.tg-card {
  background: var(--ink-850);
  border: var(--border-hair) solid var(--border); border-radius: var(--radius-lg); padding: 18px;
  box-shadow: var(--shadow-lg);
  transform: none;
}
.tg-inner { background: var(--surface); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-xs); border: var(--border-hair) solid var(--border-subtle); }
.tg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* pastille du canal : la photo de profil officielle (logo 7a, recadrage rond sûr) */
.tg-avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; border: var(--border-hair) solid var(--border-2); background: #0a0a0b; }
.tg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tg-title { font-weight: var(--weight-medium); font-size: .9rem; color: var(--text); }
.tg-title span { display: block; font-size: .72rem; color: var(--text-mute); font-weight: var(--weight-regular); }
.tg-badge { margin-left: auto; font-family: var(--label); font-size: .66rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-text); background: var(--brand-soft); padding: 4px 10px; border-radius: var(--radius-sm); border: var(--border-hair) solid var(--brand-line); }
.tg-line { font-size: .86rem; margin: 4px 0; color: var(--text-dim); }
.tg-line b { color: var(--text); font-weight: var(--weight-medium); }
.tg-sport { display: flex; align-items: center; gap: 8px; font-weight: var(--weight-semibold); font-size: .96rem; margin-bottom: 4px; color: var(--text); }
.tg-match { font-weight: var(--weight-semibold); color: var(--text); margin: 10px 0 2px; }
.tg-table { margin-top: 14px; background: var(--ink-900); border: var(--border-hair) solid var(--border-subtle); border-radius: var(--radius-sm); padding: 12px 14px; font-family: var(--mono); font-size: .76rem; }
.tg-table .row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; padding: 3px 0; color: var(--text-dim); }
.tg-table.cols3 .row { grid-template-columns: 1.3fr 1fr 1fr; }
.tg-table .row.h { color: var(--text-mute); border-bottom: var(--border-hair) solid var(--border-subtle); padding-bottom: 6px; margin-bottom: 4px; }
.tg-table .star { color: var(--accent-text); font-weight: var(--weight-medium); }
.tg-foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .72rem; color: var(--text-mute); }
.float-badge {
  position: absolute; font-family: var(--mono); font-size: .78rem; font-weight: var(--weight-medium); padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--surface-raised); border: var(--border-hair) solid var(--border); color: var(--text);
  box-shadow: var(--shadow-md);
}

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: 76px 0; }
.section-head { max-width: 660px; margin: 0 auto 52px; text-align: center; }
.section-head .kicker { font-family: var(--label); font-size: .7rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent-text); }
.section-head h2 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); margin-top: 14px; color: var(--text); }
.section-head p { margin-top: 16px; color: var(--text-dim); font-size: 1.02rem; }
.section.tint { background: var(--bg-alt); border-top: var(--border-hair) solid var(--border); border-bottom: var(--border-hair) solid var(--border); }

/* ---------- Déroulé didactique « de la cote à l'alerte » (remplace les grilles de cases) ---------- */
.lead-note { max-width: 640px; margin: 0 auto; text-align: center; color: var(--text-mute); font-size: .92rem; }
/* Déroulé aéré, sans filet ni cadre : les grands chiffres rythment, l'air fait le reste. */
.flow { max-width: 720px; margin: 8px auto 0; }
.flow-step { display: grid; grid-template-columns: auto 1fr; column-gap: 30px; align-items: baseline; padding: 30px 0; }
.flow-num { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.6rem; line-height: 1; letter-spacing: var(--tracking-tight); color: var(--accent-text); }
.flow-step h3 { font-size: 1.16rem; letter-spacing: var(--tracking-snug); color: var(--text); margin-bottom: 6px; }
.flow-step p { color: var(--text-dim); font-size: 1rem; line-height: var(--leading-normal); max-width: 52ch; }
/* Exemple : texte simple, pas de cadre */
.flow-example { max-width: 720px; margin: 24px auto 0; color: var(--text-mute); font-size: .95rem; line-height: var(--leading-normal); }
.flow-example b { color: var(--text-dim); font-weight: var(--weight-semibold); }

/* ---------- Schéma interactif « de la cote à l'alerte » ---------- */
.schema { max-width: 940px; margin: 0 auto; }
.schema svg { width: 100%; height: auto; display: block; }
.sch-cap { fill: var(--text-mute); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 10.5px; letter-spacing: .16em; }
.sch-box { fill: var(--surface); stroke: var(--border-subtle); stroke-width: 1; }
.sch-engine { fill: #111015; stroke: var(--accent); stroke-width: 1.6; }
.sch-lbl { fill: var(--text); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 14px; }
.sch-lbl2 { fill: var(--text); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 15px; }
.sch-sub { fill: var(--text-dim); font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: 12.5px; }
.sch-row { fill: var(--ink-100); font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: 13.5px; }
.sch-num { fill: var(--accent-text); font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: 12px; }
.sch-divi { stroke: var(--border-subtle); stroke-width: 1; }
.sch-flow { stroke: var(--accent); stroke-width: 1.6; fill: none; }
.sch-wire { stroke: var(--accent); stroke-width: 1.2; fill: none; opacity: .5; }
.cat { cursor: pointer; }
.cat-box { transition: stroke var(--dur-fast) var(--ease-out), fill var(--dur-fast) var(--ease-out); }
.cat:hover .cat-box { stroke: var(--border-strong); }
.cat.on .cat-box { stroke: var(--accent); fill: #16121c; }
.cat-plus { fill: var(--text-mute); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 16px; transition: fill var(--dur-fast) var(--ease-out); }
.cat.on .cat-plus, .cat:hover .cat-plus { fill: var(--accent-text); }
.cat:focus-visible { outline: none; }
.cat:focus-visible .cat-box { stroke: var(--accent); }
.schema-hint { text-align: center; color: var(--text-mute); font-size: .88rem; margin: 24px auto 16px; }
.schema-reveal { max-width: 560px; margin: 0 auto; text-align: center; }
.reveal-head { display: flex; gap: 10px; justify-content: center; align-items: baseline; margin-bottom: 12px; }
.reveal-name { font-family: var(--font-display); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; color: var(--text); }
.reveal-count { font-family: var(--font-mono); font-size: .8rem; color: var(--text-mute); }
.reveal-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.reveal-chips span { font-size: .85rem; color: var(--text-dim); background: var(--surface); border: var(--border-hair) solid var(--border); border-radius: var(--radius-pill); padding: 6px 14px; }

/* ---------- Bloc « À savoir » (remplace la FAQ) ---------- */
.savoir-list { max-width: 720px; margin: 0 auto; }
.savoir-item { padding-bottom: 26px; }
.savoir-item:last-child { padding-bottom: 0; }
.savoir-item h3 { font-size: 1.16rem; letter-spacing: var(--tracking-snug); color: var(--text); margin-bottom: 8px; }
.savoir-item p { color: var(--text-dim); font-size: 1rem; line-height: var(--leading-normal); }

/* ---------- Feature / step cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: var(--surface);
  border: var(--border-hair) solid var(--border); border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--accent-strong); background: var(--surface-raised); box-shadow: var(--shadow-md); }
.card .ic { width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--brand-soft); border: var(--border-hair) solid var(--brand-line); margin-bottom: 18px; font-size: 1.2rem; }
.card h3 { font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif; font-weight: 500; font-size: 1.5rem; letter-spacing: .005em; color: var(--text); }
.card p { margin-top: 10px; color: var(--text-dim); font-size: .92rem; }
.step-n { font-family: var(--mono); font-size: .76rem; color: var(--accent-text); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); }

/* ---------- Alert gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.gallery .tg-card { transform: none; }
.gallery .tg-card:nth-child(2) { margin-top: 22px; }
.tg-hausse { display:flex; align-items:center; gap:8px; background: var(--brand-soft); border: var(--border-hair) solid var(--brand-line); color: var(--accent-text); border-radius: var(--radius-sm); padding: 8px 10px; font-size:.8rem; font-weight: var(--weight-medium); margin-bottom: 10px; }
.tg-pct { font-family: var(--mono); color: var(--data-pos); font-weight: var(--weight-medium); }

/* ---------- Pricing ---------- */
.pricing-wrap { display: flex; justify-content: center; }
.price-card {
  position: relative; width: 100%; max-width: 460px;
  background: var(--surface);
  border: var(--border-hair) solid var(--border); border-radius: var(--radius-lg); padding: 38px;
  box-shadow: var(--shadow-lg);
}
.price-card::before {
  content:""; position:absolute; inset:0; border-radius: var(--radius-lg); padding:1px;
  background: linear-gradient(160deg, var(--violet-400), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.price-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--label); font-size: .68rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gold-ink); background: var(--gold-soft); border: var(--border-hair) solid var(--gold-line); padding: 6px 12px; border-radius: var(--radius-pill); }
.price-name { font-family: var(--font-display); font-size: 2.1rem; font-weight: var(--weight-semibold); margin: 18px 0 4px; letter-spacing: var(--tracking-tight); color: var(--text); }
.price-name .globe { color: var(--accent-text); font-style: italic; }
.price-desc { color: var(--text-dim); font-size: .93rem; }
.price-amount { margin: 26px 0 6px; display: flex; align-items: baseline; gap: 6px; }
.price-amount .amt { font-family: var(--mono); font-size: 3rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--text); }
.price-amount .per { color: var(--text-dim); font-size: 1.02rem; }
.price-note { color: var(--text-mute); font-size: .8rem; }
.price-list { list-style: none; margin: 26px 0; display: grid; gap: 13px; }
.price-list li { display: flex; align-items: flex-start; gap: 11px; font-size: .92rem; color: var(--text-dim); }
.price-list .chk { flex: none; width: 20px; height: 20px; border-radius: var(--radius-xs); background: var(--brand-soft); border: var(--border-hair) solid var(--brand-line); display: grid; place-items: center; color: var(--accent-text); font-size: .68rem; margin-top: 2px; }
.price-list b { color: var(--text); font-weight: var(--weight-medium); }
.price-card .btn { width: 100%; }

/* ---------- Disclaimer / alerts ---------- */
.disclaimer {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--danger-soft); border: var(--border-hair) solid var(--danger-line);
  border-radius: var(--radius-sm); padding: 16px 18px; font-size: .87rem; color: var(--danger-ink);
}
.disclaimer .ic { flex: none; font-size: 1.05rem; }
.disclaimer.neutral { background: var(--surface); border-color: var(--border); color: var(--text-dim); box-shadow: var(--shadow-xs); }
.sepa-tip {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--brand-soft); border: var(--border-hair) solid var(--brand-line);
  border-radius: var(--radius-sm); padding: 13px 15px; margin-bottom: 16px;
  font-size: .82rem; line-height: var(--leading-normal); color: var(--accent-text);
}
.sepa-tip .ic { flex: none; font-size: 1rem; }
.sepa-tip b { color: var(--violet-100); font-weight: var(--weight-medium); }
.disclaimer strong { color: var(--danger-ink-strong); }
.disclaimer.neutral strong { color: var(--text); }

/* Avertissement légal — ligne éditoriale sobre : petit intitulé en capitales
   entre deux filets dorés, texte discret. Ni boîte colorée, ni pictogramme. */
.strip {
  border-top: var(--border-hair) solid var(--border);
  border-bottom: var(--border-hair) solid var(--border);
  padding: 26px 0;
}
.strip .container { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.strip-cap {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-label); font-size: .64rem; font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-ink-strong);
}
.strip-cap::before, .strip-cap::after { content: ""; width: 34px; height: 1px; background: var(--gold-line); }
.strip p { max-width: 68em; font-size: .84rem; line-height: var(--leading-normal); color: var(--text-dim); }
.strip b { color: var(--text); font-weight: var(--weight-medium); }

/* note discrète sous le tableau comparatif (remplace l'encadré à pictogramme) */
.cmp-note {
  max-width: 56em; margin: 20px auto 0; text-align: center;
  font-size: .84rem; line-height: var(--leading-normal); color: var(--text-mute);
}
.cmp-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.cmp-note a:hover { color: var(--violet-100); }

/* ---------- Bookmakers ---------- */
.bk-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.bk { font-size: .85rem; font-weight: var(--weight-regular); color: var(--text-dim); background: var(--surface); border: var(--border-hair) solid var(--border); padding: 9px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); }

/* ---------- Pedago / how-to-read ---------- */
.howread { display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items:center; }
.howread ol { list-style:none; display:grid; gap:14px; counter-reset: hr; }
.howread li { display:flex; gap:14px; align-items:flex-start; }
.howread li::before { counter-increment: hr; content: counter(hr); flex:none; width:28px; height:28px; border-radius: var(--radius-sm); background: var(--brand-soft); border: var(--border-hair) solid var(--brand-line); color: var(--accent-text); font-family: var(--mono); font-weight: var(--weight-medium); font-size:.82rem; display:grid; place-items:center; }
.howread li b { color: var(--text); font-weight: var(--weight-medium); }
.howread li p { color: var(--text-dim); font-size:.9rem; margin-top:2px; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--surface); border: var(--border-hair) solid var(--border); border-radius: var(--radius-sm); padding: 4px 20px; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); box-shadow: var(--shadow-xs); }
.faq details[open] { border-color: var(--accent-strong); background: var(--surface-raised); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: var(--weight-medium); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-text); font-size: 1.4rem; font-weight: var(--weight-light); transition: transform var(--dur-base) var(--ease-signature); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 18px; color: var(--text-dim); font-size: .92rem; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; background: var(--bg-alt); border: var(--border-hair) solid var(--border); border-radius: var(--radius-lg); padding: 56px 32px; box-shadow: var(--shadow-md); }
.cta-band h2 { font-size: clamp(2.2rem, 4.2vw, 3.3rem); color: var(--text); }
.cta-band p { color: var(--text-dim); margin: 14px auto 30px; max-width: 34em; }

/* ---------- Footer ---------- */
.site-footer { border-top: var(--border-hair) solid var(--border); background: var(--bg-alt); padding: 56px 0 34px; margin-top: 40px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid h4 { font-family: var(--label); font-size: .68rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-mute); margin-bottom: 16px; }
.foot-grid a { display: block; color: var(--text-dim); font-size: .89rem; padding: 5px 0; transition: color var(--dur-fast) var(--ease-out); }
.foot-grid a:hover { color: var(--link-hover); }
.foot-about p { color: var(--text-dim); font-size: .89rem; margin-top: 14px; max-width: 30em; }
/* aligne le haut visuel des lettres VDO sur celui des intitulés de colonnes (PRODUIT…) */
.foot-about .brand { margin-top: -12px; }
.foot-legal { margin-top: 18px; font-size: .78rem; color: var(--text-mute); line-height: var(--leading-relaxed); }
.foot-bottom { margin-top: 40px; padding-top: 24px; border-top: var(--border-hair) solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--text-mute); }

/* ---------- Legal pages ---------- */
.legal-hero { padding: 56px 0 30px; border-bottom: var(--border-hair) solid var(--border); }
.legal-hero .eyebrow { margin-bottom: 16px; }
.legal-hero h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); letter-spacing: var(--tracking-tight); font-weight: var(--weight-semibold); color: var(--text); }
.legal-hero p { color: var(--text-dim); margin-top: 12px; }
.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 44px; padding: 44px 0 80px; align-items: start; }
.legal-nav { position: sticky; top: 94px; display: grid; gap: 4px; }
.legal-nav a { font-size: .85rem; color: var(--text-dim); padding: 8px 12px; border-radius: var(--radius-sm); border-left: 2px solid transparent; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.legal-nav a:hover, .legal-nav a.active { color: var(--accent-text); background: var(--brand-soft); border-left-color: var(--accent); }
.legal-content { max-width: 760px; }
.legal-content h2 { font-size: 1.6rem; letter-spacing: var(--tracking-tight); margin: 40px 0 14px; padding-top: 14px; font-weight: var(--weight-semibold); scroll-margin-top: 92px; color: var(--text); }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 { font-size: 1.22rem; margin: 24px 0 10px; color: var(--text); font-weight: var(--weight-semibold); }
.legal-content p { color: var(--text-dim); margin: 10px 0; font-size: .94rem; }
.legal-content ul { margin: 10px 0 10px 4px; padding-left: 20px; color: var(--text-dim); font-size: .94rem; }
.legal-content li { margin: 6px 0; }
.legal-content strong { color: var(--text); font-weight: var(--weight-medium); }
.legal-content a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--link-hover); }
.legal-content .updated { font-size: .82rem; color: var(--text-mute); font-style: italic; }
.callout { background: var(--surface); border: var(--border-hair) solid var(--border); border-left: 2px solid var(--accent); border-radius: var(--radius-sm); padding: 16px 18px; margin: 18px 0; box-shadow: var(--shadow-xs); }
.callout.warn { border-left-color: var(--gold); }
.callout.danger { border-left-color: var(--danger); }
.callout p { margin: 6px 0; color: var(--text-dim); }
.todo { color: var(--gold-ink); font-family: var(--mono); font-size: .85em; background: var(--gold-soft); padding: 1px 6px; border-radius: var(--radius-xs); border: var(--border-hair) solid var(--gold-line); }

/* ---------- Order / checkout ---------- */
.order-layout { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; padding: 44px 0 80px; }

/* ---------- Page commande : choix de la formule ---------- */
.offer-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 30px; }
.pick { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; background: var(--surface); border: var(--border-hair) solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.pick:hover { border-color: var(--brand-line); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .pick-name { font-family: var(--label); font-size: .78rem; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text); }
.pick .pick-price { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--text); line-height: 1; }
.pick .pick-price small { font-size: .85rem; color: var(--text-dim); font-family: var(--font); font-weight: 500; }
.pick .pick-bk { font-size: .8rem; color: var(--text-mute); }
.pick:has(input:checked) { border-color: var(--accent); background: var(--brand-soft); }
.pick:has(input:checked)::after { content: "✓"; position: absolute; top: 10px; right: 12px; color: var(--accent-text); font-weight: 700; }
.pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { .offer-pick { grid-template-columns: 1fr; } }
.order-main { max-width: 680px; }
.recap { background: var(--surface); border: var(--border-hair) solid var(--border); border-radius: var(--radius); padding: 28px; position: sticky; top: 94px; box-shadow: var(--shadow-md); }
.recap h3 { font-size: 1.24rem; margin-bottom: 18px; color: var(--text); }
.recap-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: var(--border-hair) solid var(--border); font-size: .89rem; }
.recap-row:last-of-type { border-bottom: 0; }
.recap-row span { color: var(--text-dim); }
.recap-row b { color: var(--text); text-align: right; font-weight: var(--weight-medium); }
.recap-total { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0; padding-top: 16px; border-top: var(--border-hair) solid var(--border-2); }
.recap-total .t { font-family: var(--mono); font-size: 1.5rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug); color: var(--text); }
.recap .btn { width: 100%; }
.recap .lock-note { font-size: .78rem; color: var(--text-mute); text-align: center; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }

.check-group { margin: 24px 0; }
.check-group > h3 { font-family: var(--label); font-size: .7rem; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-mute); margin: 26px 0 12px; font-weight: var(--weight-medium); }
.check {
  display: flex; gap: 13px; align-items: flex-start; padding: 15px 16px; margin: 9px 0;
  background: var(--surface); border: var(--border-hair) solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); box-shadow: var(--shadow-xs);
}
.check:hover { border-color: var(--border-2); background: var(--surface-raised); }
.check.checked { border-color: var(--accent-strong); background: var(--brand-soft); }
.check.required-missing { animation: shake var(--dur-slow) var(--ease-signature); border-color: var(--danger); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { flex: none; width: 22px; height: 22px; border-radius: var(--radius-xs); border: var(--border-hair) solid var(--border-2); display: grid; place-items: center; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); margin-top: 1px; background: var(--ink-900); }
.check.checked .box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.check .box svg { opacity: 0; stroke: var(--on-accent); transition: opacity var(--dur-fast); }
.check.checked .box svg { opacity: 1; }
.check .txt { font-size: .89rem; color: var(--text-dim); }
.check .txt b { color: var(--text); font-weight: var(--weight-medium); }
.check .txt a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.check .req { color: var(--danger-ink); font-weight: var(--weight-medium); }
.check .opt { font-size: .74rem; color: var(--text-mute); font-weight: var(--weight-medium); }

.order-alert { display: none; margin-top: 16px; }
.order-alert.show { display: flex; }

/* ---------- Cookie banner ---------- */
.cookie {
  position: fixed; bottom: 20px; left: 20px; right: 20px; z-index: 200; max-width: 620px; margin: 0 auto;
  background: rgba(10, 10, 11, .82); backdrop-filter: blur(var(--blur-md));
  border: var(--border-hair) solid var(--border-2); border-radius: var(--radius); padding: 20px 22px;
  box-shadow: var(--shadow-lg); display: none;
}
.cookie.show { display: block; animation: slideUp var(--dur-slow) var(--ease-signature); }
@keyframes slideUp { from { transform: translateY(12px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.cookie p { font-size: .85rem; color: var(--text-dim); margin-bottom: 16px; }
.cookie p a { color: var(--link); text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn { padding: 11px 20px; font-size: .85rem; }

/* ---------- Buttons (danger) ---------- */
.btn-danger { background: var(--danger); color: var(--ink-050); box-shadow: var(--shadow-sm); }
.btn-danger:hover { background: var(--danger-hover); }

/* ---------- Auth (login) ---------- */
.auth-wrap { display: grid; place-items: center; padding: 60px 24px 90px; min-height: calc(100vh - 70px - 120px); }
.auth-card {
  width: 100%; max-width: 440px;
  background: var(--surface); border: var(--border-hair) solid var(--border); border-radius: var(--radius-lg);
  padding: 40px; box-shadow: var(--shadow-lg);
}
.auth-card h1 { font-size: 2.1rem; letter-spacing: var(--tracking-tight); font-weight: var(--weight-semibold); color: var(--text); margin-top: 6px; }
.auth-lede { color: var(--text-dim); font-size: .94rem; margin: 8px 0 26px; }
.auth-card form { display: grid; gap: 16px; }
.auth-card .btn { width: 100%; margin-top: 6px; }
.auth-foot { margin-top: 24px; font-size: .85rem; color: var(--text-dim); line-height: var(--leading-relaxed); }
.auth-foot a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Form fields ---------- */
.field { display: grid; gap: 7px; }
.field-label { font-size: .82rem; font-weight: var(--weight-medium); color: var(--text); }
.field input[type=email],
.field input[type=password],
.field input[type=text] {
  width: 100%; font-family: var(--font); font-size: .94rem; color: var(--text);
  background: var(--ink-900); border: var(--border-hair) solid var(--border-2); border-radius: var(--radius-sm);
  padding: 13px 15px; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--glow-accent); }
.field input::placeholder { color: var(--text-mute); }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mini-check { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-dim); cursor: pointer; }
.mini-check input { accent-color: var(--accent); width: 15px; height: 15px; }
.field-link { font-size: .85rem; color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; padding: 26px 0 80px; }
.dash-main, .dash-side { display: grid; gap: 22px; }
.dash-card {
  background: var(--surface); border: var(--border-hair) solid var(--border); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: var(--shadow-sm);
}
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dash-card-head h2 { font-size: 1.5rem; letter-spacing: var(--tracking-tight); color: var(--text); font-weight: var(--weight-semibold); }
.dash-card-head h3 { font-size: 1.24rem; letter-spacing: var(--tracking-snug); color: var(--text); font-weight: var(--weight-semibold); }
.badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--label); font-size: .68rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); }
.badge-ok { color: var(--accent-text); background: var(--brand-soft); border: var(--border-hair) solid var(--brand-line); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--data-live); box-shadow: 0 0 0 3px rgba(124,63,176,.2); }
.muted-count { font-family: var(--mono); font-size: .8rem; color: var(--text-mute); }

.sub-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: var(--brand-soft); border: var(--border-hair) solid var(--brand-line); border-radius: var(--radius-sm); margin-bottom: 6px; }
.sub-name { font-family: var(--font-display); font-size: 1.6rem; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--text); }
.sub-desc { font-size: .86rem; color: var(--text-dim); margin-top: 2px; }
.sub-price { font-family: var(--mono); font-size: 1.5rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug); color: var(--text); white-space: nowrap; }
.sub-price span { font-family: var(--font); font-size: .88rem; font-weight: var(--weight-regular); color: var(--text-dim); }

.dash-rows { display: grid; gap: 0; margin: 8px 0 4px; }
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: var(--border-hair) solid var(--border); font-size: .89rem; }
.dash-row:last-child { border-bottom: 0; }
.dash-row span { color: var(--text-dim); }
.dash-row b { color: var(--text); font-weight: var(--weight-medium); text-align: right; }
.ok-text { color: var(--data-pos) !important; }
.dash-card-actions { margin-top: 16px; }
.dash-fineprint { font-size: .79rem; color: var(--text-mute); margin-top: 14px; line-height: var(--leading-normal); }

/* ---------- Invoice table ---------- */
.inv-table-wrap { overflow-x: auto; }
.inv-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.inv-table th { text-align: left; font-family: var(--label); font-size: .68rem; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-mute); font-weight: var(--weight-medium); padding: 0 12px 12px 0; border-bottom: var(--border-hair) solid var(--border); }
.inv-table td { padding: 14px 12px 14px 0; border-bottom: var(--border-hair) solid var(--border); color: var(--text-dim); }
.inv-table tr:last-child td { border-bottom: 0; }
.inv-table .mono { font-family: var(--mono); font-size: .82rem; color: var(--text); }
.inv-dl { color: var(--link); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 2px; }
.pill { display: inline-block; font-family: var(--label); font-size: .68rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); }
.pill-ok { color: var(--data-pos); background: rgba(78,158,122,.12); border: var(--border-hair) solid rgba(78,158,122,.3); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(10, 10, 11, .7); backdrop-filter: blur(var(--blur-sm));
}
.modal-overlay.show { display: flex; animation: fadeIn var(--dur-base) var(--ease-out); }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.modal-box {
  width: 100%; max-width: 460px; background: var(--surface-raised);
  border: var(--border-hair) solid var(--border-2); border-radius: var(--radius-lg); padding: 30px;
  box-shadow: var(--shadow-lg); animation: slideUp var(--dur-base) var(--ease-signature);
}
.modal-box h3 { font-size: 1.5rem; letter-spacing: var(--tracking-tight); color: var(--text); font-weight: var(--weight-semibold); margin-bottom: 12px; }
.modal-box p { color: var(--text-dim); font-size: .92rem; line-height: var(--leading-relaxed); }
.modal-box p b { color: var(--text); font-weight: var(--weight-medium); }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }

/* ---------- Thank-you / confirmation ---------- */
.thanks-hero { padding: 56px 0 30px; border-bottom: var(--border-hair) solid var(--border); }
.thanks-check {
  width: 68px; height: 68px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--brand-soft); border: var(--border-hair) solid var(--brand-line); color: var(--accent-text); margin-bottom: 20px;
  box-shadow: var(--glow-accent); animation: popIn var(--dur-slow) var(--ease-signature);
}
@keyframes popIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }
.thanks-hero h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); letter-spacing: var(--tracking-tight); font-weight: var(--weight-semibold); color: var(--text); }
.thanks-hero p { color: var(--text-dim); margin-top: 12px; max-width: 42em; }
.thanks-grid { display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; padding: 26px 0 80px; }
.thanks-main, .thanks-side { display: grid; gap: 22px; }
.thanks-steps { list-style: none; display: grid; gap: 22px; counter-reset: ts; }
.thanks-steps li { display: grid; gap: 4px; padding-left: 46px; position: relative; }
.thanks-steps li::before {
  counter-increment: ts; content: counter(ts);
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: var(--brand-soft); border: var(--border-hair) solid var(--brand-line); color: var(--accent-text);
  font-family: var(--mono); font-weight: var(--weight-medium); font-size: .86rem; display: grid; place-items: center;
}
.thanks-steps li b { color: var(--text); font-size: 1rem; font-weight: var(--weight-medium); }
.thanks-steps li p { color: var(--text-dim); font-size: .91rem; margin-top: 2px; }
.thanks-steps .btn { justify-self: start; }

/* ---------- Bookmaker tabs ---------- */
.bk-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.bk-tab {
  font-family: var(--font); font-weight: var(--weight-medium); font-size: .9rem; padding: 11px 20px;
  border-radius: var(--radius-sm); border: var(--border-hair) solid var(--border-2); background: transparent; color: var(--text-dim);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bk-tab:hover { border-color: var(--accent-strong); color: var(--accent-text); background: var(--surface-hover); }
.bk-tab.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bk-panel { display: none; }
.bk-panel.active { display: block; animation: fadeIn var(--dur-base) var(--ease-out); }
.bk-count { text-align: center; color: var(--text-mute); font-size: .84rem; margin-top: 16px; }

/* ---------- Offers (3 plans) ---------- */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.offer {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: var(--border-hair) solid var(--border); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.offer:hover { border-color: var(--border-2); }
.offer.featured { border-color: var(--accent-strong); box-shadow: var(--shadow-lg); }
.offer-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--on-accent); font-family: var(--label); font-size: .64rem;
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; padding: 5px 14px; border-radius: var(--radius-pill); white-space: nowrap;
}
.offer-name { font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif; font-size: 2rem; font-weight: 500; letter-spacing: .005em; color: var(--text); }
.offer-desc { color: var(--text-dim); font-size: .87rem; margin-top: 4px; min-height: 2.6em; }
.offer-price { margin: 16px 0 2px; display: flex; align-items: baseline; gap: 5px; }
.offer-price .amt { font-family: var(--mono); font-size: 2.3rem; font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug); color: var(--text); }
.offer-price .per { color: var(--text-dim); font-size: .93rem; }
.offer-renew { font-size: .79rem; color: var(--text-mute); margin-bottom: 18px; line-height: var(--leading-normal); }
.offer-renew b { color: var(--text-dim); font-weight: var(--weight-medium); }
.offer-list { list-style: none; display: grid; gap: 11px; margin: 4px 0 18px; }
.offer-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .89rem; color: var(--text-dim); }
.offer-list .chk { flex: none; width: 19px; height: 19px; border-radius: var(--radius-xs); background: var(--brand-soft); border: var(--border-hair) solid var(--brand-line); display: grid; place-items: center; color: var(--accent-text); font-size: .64rem; margin-top: 2px; }
.offer-bk { font-size: .81rem; color: var(--text-dim); background: var(--ink-900); border: var(--border-hair) solid var(--border-subtle); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 18px; }
.offer-bk b { color: var(--text); font-weight: var(--weight-medium); }
.offer .btn { width: 100%; margin-top: auto; }

/* ---------- Comparison table ---------- */
.cmp-wrap { overflow-x: auto; margin-top: 44px; }
.cmp { width: 100%; border-collapse: collapse; font-size: .89rem; min-width: 580px; background: var(--surface); border: var(--border-hair) solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cmp th, .cmp td { padding: 14px 16px; text-align: center; border-bottom: var(--border-hair) solid var(--border); }
.cmp thead th { font-size: .91rem; color: var(--text); font-weight: var(--weight-medium); border-bottom: var(--border-hair) solid var(--border-2); background: var(--surface-raised); }
.cmp thead th.feat { color: var(--accent-text); }
.cmp tbody th { text-align: left; font-weight: var(--weight-regular); color: var(--text-dim); }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: 0; }
.cmp td:nth-child(4) { background: var(--brand-soft); }
.cmp .yes { color: var(--accent-text); font-weight: var(--weight-medium); }
.cmp .no { color: var(--text-mute); }

/* ---------- Prevention (jeu responsable) ---------- */
.prevention {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--gold-soft); border: var(--border-hair) solid var(--gold-line); border-left: 2px solid var(--gold);
  border-radius: var(--radius-sm); padding: 14px 16px; font-size: .85rem; color: var(--gold-ink); margin: 14px 0;
}
.prevention .ic { flex: none; font-size: 1.05rem; }
.prevention strong { color: var(--gold-ink-strong); font-weight: var(--weight-medium); }
.prevention a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.prevention-bar {
  background: var(--gold-soft); border-top: var(--border-hair) solid var(--gold-line);
  padding: 12px 0; font-size: .79rem; color: var(--gold-ink); text-align: center;
}
.prevention-bar a { color: var(--link); text-decoration: underline; }
.prevention-bar strong { color: var(--gold-ink-strong); font-weight: var(--weight-medium); }
.age-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.age-badge { font-family: var(--mono); font-size: .71rem; font-weight: var(--weight-medium); color: var(--text-dim); background: var(--surface); border: var(--border-hair) solid var(--border-2); border-radius: var(--radius-pill); padding: 4px 12px; }

/* ---------- Panneau terminal (utilisé par l'espace client : abonnement & factures) ---------- */
.term-panel {
  background: var(--ink-900); border: var(--border-hair) solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.term-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: var(--border-hair) solid var(--border);
  background: var(--surface);
}
.term-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--label); font-size: .68rem; font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent-text);
}
.term-period { font-family: var(--mono); font-size: .78rem; color: var(--text-mute); }

.term-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: var(--border-hair) solid var(--border);
}
.term-stat { padding: 22px; border-right: var(--border-hair) solid var(--border); }
.term-stat:last-child { border-right: 0; }
.term-stat-label {
  display: block; font-family: var(--label); font-size: .62rem; font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-mute);
  margin-bottom: 10px;
}
.term-stat-value {
  font-family: var(--mono); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight); color: var(--text);
}
.term-stat-value .u { color: var(--accent-text); font-size: .6em; }

.term-table { font-size: .86rem; }
.term-row {
  display: grid; grid-template-columns: 108px 96px 1fr 200px 88px;
  gap: 16px; align-items: center;
  padding: 15px 22px; border-bottom: var(--border-hair) solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-out);
}
.term-row:last-child { border-bottom: 0; }
.term-row:not(.term-row-h):hover { background: var(--surface); }
.term-row-h {
  font-family: var(--label); font-size: .62rem; font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-mute);
  padding-top: 13px; padding-bottom: 13px; background: var(--ink-850);
}
.term-time { font-family: var(--mono); font-size: .78rem; color: var(--text-mute); }
.term-sport {
  font-family: var(--label); font-size: .68rem; font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-dim);
}
.term-match { color: var(--text); font-weight: var(--weight-medium); }
.term-match em {
  display: block; font-style: normal; font-size: .8rem; font-weight: var(--weight-regular);
  color: var(--text-mute); margin-top: 3px;
}
.term-odds { font-family: var(--mono); font-size: .78rem; color: var(--text-mute); }
.term-odds b { color: var(--text); font-weight: var(--weight-medium); }
.term-trj {
  font-family: var(--mono); font-size: .92rem; color: var(--data-pos);
  text-align: right; white-space: nowrap;
}
.term-trj-max { color: var(--accent-sheen); }
.term-foot {
  padding: 16px 22px; font-size: .78rem; line-height: var(--leading-normal);
  color: var(--text-mute); border-top: var(--border-hair) solid var(--border); background: var(--surface);
}

/* ---------- Contact / candidature ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.contact-main { max-width: 640px; }
.contact-side { display: grid; gap: 20px; position: sticky; top: 94px; }
.contact-form { display: grid; gap: 18px; }
.contact-form .check { cursor: pointer; }
.field-opt { font-family: var(--label); font-size: .66rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-mute); margin-left: 6px; }
.field textarea,
.field select {
  width: 100%; font-family: var(--font); font-size: .94rem; color: var(--text);
  background: var(--ink-900); border: var(--border-hair) solid var(--border-2); border-radius: var(--radius-sm);
  padding: 13px 15px; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 130px; line-height: var(--leading-normal); }
.field select { appearance: none; cursor: pointer; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-200) 50%), linear-gradient(135deg, var(--ink-200) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--glow-accent); }
.field textarea::placeholder { color: var(--text-mute); }
.field select option { background: var(--ink-800); color: var(--text); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp-field input { background: transparent; border: 0; color: transparent; }
.contact-note { font-size: .8rem; color: var(--text-mute); line-height: var(--leading-normal); margin-top: 4px; }
.contact-ok .ic {
  width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--brand-soft); border: var(--border-hair) solid var(--brand-line);
  color: var(--accent-text); font-size: 1.2rem; margin-bottom: 18px;
}
.contact-ok h3 { font-size: 1.5rem; }
.contact-ok p { color: var(--text-dim); font-size: .94rem; margin-top: 10px; }

/* ---------- Page 404 ---------- */
.notfound { padding: clamp(60px, 12vh, 130px) 0 clamp(80px, 14vh, 150px); }
.notfound-code {
  font-family: var(--mono); font-size: clamp(56px, 12vw, 128px); font-weight: var(--weight-light);
  line-height: 1; letter-spacing: var(--tracking-tight); color: var(--ink-500);
  margin: 18px 0 4px;
}
.notfound h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.notfound-lede { color: var(--text-dim); margin: 14px 0 30px; max-width: 34em; font-size: 1.02rem; }
.notfound-help { margin-top: 26px; font-size: .88rem; color: var(--text-mute); }
.notfound-help a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Apparitions au défilement (fondu léger, échelonné, sans rebond) ---------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal-on .reveal {
  transition: opacity var(--dur-slow) var(--ease-signature), transform var(--dur-slow) var(--ease-signature);
}
.reveal-on .reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-on .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Utility ---------- */
.center { text-align: center; }
.mt-40 { margin-top: 40px; }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 56px 0 40px; }
  .grid-3, .gallery { grid-template-columns: 1fr; }
  .gallery .tg-card:nth-child(2) { margin-top: 0; }
  .howread { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .order-layout { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-side { position: static; }
  .recap { position: static; order: -1; }
  .dash-grid { grid-template-columns: 1fr; }
  .thanks-grid { grid-template-columns: 1fr; }
  .offers { grid-template-columns: 1fr; gap: 28px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .term-stats { grid-template-columns: 1fr 1fr; }
  .term-stat:nth-child(2) { border-right: 0; }
  .term-stat:nth-child(-n+2) { border-bottom: var(--border-hair) solid var(--border); }
  .term-row { grid-template-columns: 1fr 84px; gap: 6px 14px; padding: 16px 18px; }
  .term-row-h { display: none; }
  .term-time { grid-column: 1; font-size: .74rem; }
  .term-sport { grid-column: 2; text-align: right; }
  .term-match { grid-column: 1 / -1; }
  .term-odds { grid-column: 1 / -1; }
  .term-trj { grid-column: 1 / -1; text-align: left; }
}
/* le menu passe en tiroir dès que le bandeau ne peut plus tenir
   monogramme + liens + les deux boutons sur une ligne */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 70px; left: 0; right: 0;
    background: rgba(10,10,11,.94); backdrop-filter: blur(var(--blur-md));
    border-bottom: var(--border-hair) solid var(--border); padding: 20px 24px; gap: 16px; box-shadow: var(--shadow-md);
  }
}
@media (max-width: 640px) {
  .foot-grid { grid-template-columns: 1fr; }
  .hero-meta { gap: 18px; }
  .price-card { padding: 28px 22px; }
}
@media (max-width: 560px) {
  /* bandeau mobile : monogramme resserré et boutons compacts pour que
     « Connexion » et « Souscrire » tiennent sans déborder */
  .brand { font-size: 1.05rem; gap: 6px; }
  .brand-mark { font-size: 1.75rem; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { padding: 11px 14px; font-size: .8rem; min-height: 44px; }
  .nav-menu-btn span { display: none; }   /* icône seule, comme LV mobile */
}
/* très petits écrans : la spec 7a prévoit de retirer le fil quand la place manque */
@media (max-width: 520px) {
  .brand::before, .brand::after { display: none; }
  .nav-cta .btn-ghost { display: none; }  /* « Connexion » vit dans le menu */
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark .mono-v, .brand-mark .mono-do, .dot { animation: none; }
  * { scroll-behavior: auto; }
}

/* ============================================================
   Culture du logo — présence de marque V+DO récurrente
   A) filigrane géant en fond du héro
   B) sceau-séparateur (monogramme entre deux filets) entre sections
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero-grid { position: relative; z-index: 1; }
.brand-watermark {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  font-weight: var(--weight-light);
  line-height: .9; letter-spacing: .04em;
  display: flex; align-items: baseline; color: var(--ink-050); white-space: nowrap;
}
.brand-watermark .mono-v { color: transparent; -webkit-text-stroke: .012em currentColor; }
.brand-watermark .mono-do { color: currentColor; }
/* filigrane du héro retiré (fond sobre demandé — le fond reste noir pur) */
.brand-watermark--hero { display: none; }

/* Sceau-séparateur = logo officiel 7a en miniature : fil violet en dégradé, nom seul */
.brand-seal { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 8px var(--gutter); }
.brand-seal-rule { height: 1px; flex: 1; max-width: 220px; background: linear-gradient(90deg, transparent, var(--violet-400)); }
.brand-seal-rule.right { background: linear-gradient(90deg, var(--violet-400), transparent); }
.brand-seal-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.brand-seal-mark { display: flex; align-items: baseline; font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif; font-weight: var(--weight-light); font-size: 2rem; line-height: 1; letter-spacing: .04em; }
.brand-seal-mark .mono-v { color: transparent; -webkit-text-stroke: .012em var(--text); }
.brand-seal-mark .mono-do { color: var(--text); }
.brand-seal-word { display: none; }
@media (max-width: 560px) {
  .brand-seal-rule { max-width: 90px; }
  .brand-watermark--hero { opacity: .05; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-seal-mark .mono-do { animation: none; }
}

/* ============================================================
   Finitions — détails de métier (micro-typographie, chiffres, matière)
   ============================================================ */
/* titres : jamais un mot seul en dernière ligne */
h1, h2, h3, h4 { text-wrap: balance; }
/* paragraphes : évite les orphelins en fin de bloc */
p, .hero-sub, li { text-wrap: pretty; }
/* chiffres alignés en colonne (prix, cotes, stats, tableaux) */
.hero-meta strong, .offer-price .amt, .price-amount .amt, .recap-total .t, .recap-row b,
.cmp, .inv-table, .dash-row b, .term-stat-value, .term-trj, .sub-price, .tg-table, .tg-badge {
  font-variant-numeric: tabular-nums;
}
/* ============================================================
   Offres — verre premium (adapté du composant « Pricing Glass »
   de 21st.dev, recolorisé charte VDO : violet en filets, lent)
   ============================================================ */
@property --beam { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.offer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0) 42%),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--shadow-sm);
}
/* halo violet qui suit le pointeur (coordonnées posées par script.js) */
.offer::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, -20%), rgba(124, 63, 176, .15), transparent 65%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.offer:hover::before { opacity: 1; }
.offer > :not(.offer-badge) { position: relative; z-index: 1; }
.offer.featured {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09),
              0 30px 60px -18px rgba(0, 0, 0, .55),
              0 0 70px rgba(124, 63, 176, .14);
}
/* rai de lumière qui parcourt lentement le cadre de la carte vedette */
.offer.featured::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--beam),
    transparent 0 74%, rgba(124, 63, 176, .9) 90%, rgba(203, 176, 238, .95) 97%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: beam-tour 9s linear infinite;
}
@keyframes beam-tour { to { --beam: 360deg; } }

/* ============================================================
   Héros — rais de lumière (adapté du composant « Aurora Section
   hero » de 21st.dev : faisceaux fins qui montent, violet seul)
   ============================================================ */
.hero-beams { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-beams span {
  position: absolute; bottom: -12%; width: 1px; height: 38%;
  background: linear-gradient(180deg, transparent, rgba(124, 63, 176, .5) 45%, rgba(203, 176, 238, .3) 80%, transparent);
  opacity: 0;
  animation: beam-rise var(--dur, 12s) linear var(--delay, 0s) infinite;
}
@keyframes beam-rise {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: .4; }
  70%  { opacity: .12; }
  100% { transform: translateY(-340%); opacity: 0; }
}
/* ============================================================
   « Tout simplement. » — reflet satiné (adapté du composant
   « Animated Shiny Text » de Magic UI : un éclat balaie le texte,
   lentement, en violet — écho au reflet satiné de la marque)
   ============================================================ */
h1.hero-title .accent {
  color: transparent;
  background-image:
    linear-gradient(115deg, transparent 42%, var(--accent-sheen) 50%, transparent 58%),
    linear-gradient(var(--accent-text), var(--accent-text));
  background-size: 240% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  animation: satin-sweep 7s var(--ease-signature) 1.8s infinite;
}
@keyframes satin-sweep {
  0%, 42% { background-position: 130% 0, 0 0; }
  100%    { background-position: -110% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .offer.featured::after { animation: none; }
  .hero-beams { display: none; }
  h1.hero-title .accent { color: var(--accent-text); background: none; animation: none; }
}

/* ============================================================
   Menu latéral — façon grande maison (volet gauche, grands
   intitulés Cormorant, fil violet au survol, fond assombri)
   ============================================================ */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(5, 5, 6, .55); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.drawer-backdrop.on { opacity: 1; }
.drawer {
  position: fixed; z-index: 310; top: 0; left: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--ink-900, #0a0a0b);
  border-right: var(--border-hair) solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(-103%);
  transition: transform .55s var(--ease-signature);
}
.drawer.on { transform: none; }
.drawer-head { padding: 16px 22px 6px; }
.drawer-close {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 10px 12px 10px 0; min-height: 44px;
  color: var(--text); cursor: pointer;
  font-family: var(--font-label); font-size: .72rem; font-weight: var(--weight-medium);
  letter-spacing: .16em; text-transform: uppercase;
}
.drawer-close:hover { color: var(--accent-text); }
.drawer-body { display: flex; flex-direction: column; gap: 34px; padding: 18px 34px 42px; flex: 1; }
.drawer-cap {
  display: block; margin-bottom: 12px;
  font-family: var(--font-label); font-size: .64rem; font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-mute);
}
.drawer-group a {
  position: relative; display: block; padding: 7px 0;
  font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  font-weight: var(--weight-light); font-size: 1.7rem; line-height: 1.25;
  color: var(--text);
  transition: padding-left var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.drawer-group a::before {
  content: ""; position: absolute; left: 0; top: 50%; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--violet-400), transparent);
  transition: width var(--dur-base) var(--ease-out);
}
.drawer-group a:hover { padding-left: 36px; color: var(--accent-text); }
.drawer-group a:hover::before { width: 28px; }
.drawer-foot {
  margin-top: auto; padding-top: 24px;
  border-top: var(--border-hair) solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px 18px;
}
.drawer-foot a { font-size: .8rem; color: var(--text-dim); }
.drawer-foot a:hover { color: var(--text); }
/* entrée en scène : TOUT apparaît de haut en bas, en cascade — chaque
   intitulé se révèle l'un après l'autre (délais posés par script.js) */
.drawer .drawer-cap,
.drawer .drawer-group a,
.drawer .drawer-foot a {
  opacity: 0; transform: translateY(16px);
}
.drawer .drawer-cap { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.drawer .drawer-group a {
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out),
              padding-left var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.drawer .drawer-foot a { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color var(--dur-fast) var(--ease-out); }
.drawer.on .drawer-cap,
.drawer.on .drawer-group a,
.drawer.on .drawer-foot a { opacity: 1; transform: none; }
body.menu-ouvert { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-backdrop, .drawer .drawer-cap, .drawer .drawer-group a, .drawer .drawer-foot a { transition: none; }
}

/* icônes au trait des cartes (remplacent les emojis génériques) */
.card .ic { color: var(--accent-text); }
.card .ic svg { width: 22px; height: 22px; }
/* grain de matière — quasi imperceptible, non interactif, casse l’aplat numérique */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
html::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain); background-size: 200px 200px; opacity: .05;
}

/* ---------- Panneau de marque — signature de clôture (piste C) ---------- */
.brand-panel {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(72px, 12vw, 132px) 0;
  border-top: var(--border-hair) solid var(--border);
  background: radial-gradient(120% 90% at 50% 38%, rgba(124,63,176,.10), transparent 60%);
}
.brand-panel .container { display: flex; flex-direction: column; align-items: center; }
/* Panneau de clôture = logo officiel 7a en grand : fil violet de part et d'autre du nom */
.brand-panel-mark { display: flex; align-items: baseline; font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif; font-weight: var(--weight-light); font-size: clamp(88px, 16vw, 190px); line-height: 1; letter-spacing: .04em; }
.brand-panel-mark::before, .brand-panel-mark::after { content: ""; align-self: center; height: 1px; flex: none; width: clamp(60px, 12vw, 220px); }
.brand-panel-mark::before { background: linear-gradient(90deg, transparent, var(--violet-400)); margin-right: clamp(18px, 3vw, 42px); }
.brand-panel-mark::after  { background: linear-gradient(90deg, var(--violet-400), transparent); margin-left: clamp(18px, 3vw, 42px); }
.brand-panel-mark .mono-v { color: transparent; -webkit-text-stroke: .012em var(--text); }
.brand-panel-mark .mono-do { color: var(--text); }
.brand-panel-rule { width: 220px; height: 1px; margin: clamp(22px, 3vw, 34px) 0; background: linear-gradient(90deg, transparent, var(--violet-400), transparent); }
.brand-panel-slogan { font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif; font-style: italic; font-weight: var(--weight-light); font-size: clamp(19px, 2.5vw, 30px); line-height: var(--leading-snug); color: var(--ink-100); max-width: 22em; }
.brand-panel-slogan em { font-style: italic; color: var(--violet-300); }
/* le filet se dessine quand le panneau entre à l'écran (uniquement si le reveal JS est actif) */
.reveal-on .brand-panel-rule { width: 0; transition: width .9s var(--ease-signature) .12s; }
.reveal-on .brand-panel.seen .brand-panel-rule { width: 220px; }
@media (prefers-reduced-motion: reduce) {
  .brand-panel-mark .mono-do { animation: none; }
  .reveal-on .brand-panel-rule { width: 220px; transition: none; }
}