/* ══════════════════════════════════════════════════════════════════
   Dataturf · site vitrine
   Thème repris du thème « modern » (version claire) de l'application :
   mêmes tokens, même orange brûlé, mêmes rayons discrets. Cf.
   ts6/src/pages/theme.css → .theme-modern.

   Feuille unique, servie telle quelle : pas de framework, pas de build,
   pas de police distante. C'est ce qui tient la promesse de performance :
   une requête CSS, zéro dépendance tierce, aucun blocage de rendu.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette (identique à .theme-modern) ──────────────── */
  --bg:              #e7e5e2;
  --bg-alt:          #eeecea;
  --bg-secondary:    #d9d7d3;
  --bg-secondary-alt:#d2cfca;
  --border:          #c9c5bf;
  --border-strong:   #b8b3ab;

  --text:            #111827;
  --text-muted:      #374151;
  --text-faint:      #4b5563;
  --text-on-accent:  #f7f6f4;

  --accent:          #9b430c;   /* orange brûlé */
  --accent-hover:    #77330a;
  --accent-dim:      rgba(155, 67, 12, 0.10);
  --accent-border:   rgba(155, 67, 12, 0.55);
  --accent-border-dim: rgba(155, 67, 12, 0.22);

  --success:         #126b33;
  --success-dim:     rgba(18, 107, 51, 0.10);
  --info:            #026294;
  --warning:         #815400;
  /* Malus : rouge assombri pour tenir le 4,5:1 sur les fonds clairs du site
     (5,2:1 sur --bg-secondary, celui du panneau de la synthèse). */
  --danger:          #a4231a;

  /* ── Typographie ──────────────────────────────────────── */
  /* Inter si le système la possède, sinon la pile native : aucune police
     n'est téléchargée : ni requête bloquante, ni transfert de données vers
     un tiers (Google Fonts). */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Consolas, 'Courier New', monospace;

  /* ── Rayons (volontairement serrés, comme l'app) ──────── */
  --radius-s:  2px;
  --radius-m:  3px;
  --radius-l:  4px;
  --radius-xl: 6px;

  /* ── Rythme ───────────────────────────────────────────── */
  --wrap: 1120px;
  --gutter: 20px;
}

/* ── Reset minimal ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4 { line-height: 1.25; text-wrap: balance; margin: 0 0 0.5em; }
h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 600; }
h3 { font-size: 19px; font-weight: 600; }
p  { margin: 0 0 1em; }

/* Focus visible : obligation d'accessibilité, et repère utile au clavier. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* Lien d'évitement : premier élément tabulable de chaque page. */
.skip-link {
  position: absolute; left: -9999px;
  top: 0; z-index: 100;
  padding: 10px 16px;
  background: var(--accent); color: var(--text-on-accent);
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Structure ──────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: 72px 0; }
@media (max-width: 768px) { section { padding: 48px 0; } }

.eyebrow {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}
.lede {
  font-size: 18px; color: var(--text-muted);
  max-width: 68ch; margin-bottom: 0;
}
.section-head { margin-bottom: 36px; max-width: 72ch; }

/* ── En-tête ────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(231, 229, 226, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 62px;
}
/* En bloc inline et non en flex : « DATA » et « TURF » sont deux elements
   distincts dans le balisage (pour la couleur), et le `gap` du flex les
   separait visuellement. Le logo doit se lire comme un seul mot. */
.brand {
  display: inline-block;
  font-weight: 600; font-size: 18px; letter-spacing: 0.06em;
  color: var(--text); text-decoration: none;
}
.brand span { color: var(--accent); }
/* Nom du produit cite dans un texte : legerement detache du corps du
   paragraphe (graisse + teinte pleine, la ou le texte courant est adouci)
   et insecable, pour qu'il ne se coupe jamais en fin de ligne. */
.produit {
  font-weight: 600; letter-spacing: 0.01em;
  color: var(--text); white-space: nowrap;
}
.produit span { color: var(--accent); }

.brand small {
  margin-left: 4px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 500;
}

.nav { margin-left: auto; }
.nav ul {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.nav a {
  display: block; padding: 8px 12px;
  font-size: 14px; font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  border-radius: var(--radius-m);
}
.nav a:hover { color: var(--accent); background: var(--accent-dim); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* Bouton d'ouverture du menu : masqué au-dessus de 860px. */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  color: var(--text); background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius-m);
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 16px; }
  .nav a { padding: 13px 8px; font-size: 16px; border-bottom: 1px solid var(--border); }
  .nav li:last-child a { border-bottom: 0; }
}

/* ── Boutons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 46px; padding: 0 22px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-m);
  background: var(--bg-alt); color: var(--text);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--accent-border); color: var(--accent); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--text-on-accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }

/* Bouton d'action de la navigation : les regles `.nav a` sont plus specifiques
   que `.btn-primary` et ecrasaient sa couleur de texte (gris au repos, orange
   sur orange au survol). On la retablit dans les deux etats. */
.nav a.btn-primary { color: var(--text-on-accent); }
.nav a.btn-primary:hover {
  color: var(--text-on-accent);
  background: var(--accent-hover); border-color: var(--accent-hover);
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── Hero ───────────────────────────────────────────────── */
.hero { padding: 84px 0 64px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px; align-items: center;
}
.hero h1 { margin-bottom: 18px; }
.hero .lede { font-size: 19px; }
.hero-note { margin-top: 18px; font-size: 13px; color: var(--text-faint); }

/* Aperçu produit schématique : dessiné en CSS/SVG plutôt qu'en capture :
   aucun octet d'image à charger, et rien à re-exporter à chaque évolution. */
.hero-panel {
  border: 1px solid var(--border-strong); border-radius: var(--radius-xl);
  background: var(--bg-secondary); overflow: hidden;
}
.hero-panel-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--bg-secondary-alt);
  border-bottom: 1px solid var(--border);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
}
.hero-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.row-horse {
  display: grid; grid-template-columns: 30px 1fr auto;
  align-items: center; gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
.row-horse:last-child { border-bottom: 0; padding-bottom: 0; }
.row-num {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  font-size: 13px; font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent-border); border-radius: var(--radius-s);
}
.row-name { font-weight: 600; font-size: 14px; }
.row-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 5px; }
.row-bar i { display: block; height: 100%; background: var(--accent); }
.row-score { font-size: 13px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .hero { padding: 48px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Présentation de l'auteur ───────────────────────────── */
.founder { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 28px; align-items: start; }
.founder-photo, .founder img {
  width: 140px; height: 140px; border-radius: 50%;
}
.founder img { object-fit: cover; border: 1px solid var(--border-strong); }
.founder-photo {
  display: grid; place-items: center;
  background: var(--bg-secondary-alt); border: 1px solid var(--border-strong);
  color: var(--text-faint); font-size: 32px; font-weight: 600; letter-spacing: 0.06em;
}
.founder .lede { margin-bottom: 14px; }

/* Variante avec une vraie photo du poste de travail plutôt qu'un portrait
   cadré serré : la pastille ronde de 140 px en aurait perdu tout le contexte
   (les écrans, le classeur), qui est précisément ce qui rend la personne
   crédible. La colonne s'élargit donc, et l'image garde son cadrage.
   Sélecteur volontairement plus spécifique que `.founder img`, qui impose
   sinon le cercle. Ni bordure ni rayon : les coins arrondis sont déjà dans
   le fichier, en transparence — un cadre carré se verrait par-dessous. */
.founder-avec-photo { grid-template-columns: 340px minmax(0, 1fr); }
.founder img.founder-portrait {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border: 0; border-radius: 0;
}
@media (max-width: 900px) {
  .founder-avec-photo { grid-template-columns: 260px minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 640px) {
  .founder-avec-photo { grid-template-columns: 1fr; }
  .founder img.founder-portrait { max-width: 380px; }
}
@media (max-width: 640px) { .founder { grid-template-columns: 1fr; gap: 20px; } }

/* ── Bandes alternées ───────────────────────────────────── */
.band { background: var(--bg-secondary); border-block: 1px solid var(--border); }

/* ── Grilles de cartes ──────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  padding: 22px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card-num {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; margin-bottom: 14px;
  font-size: 13px; font-weight: 600;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent-border-dim);
  border-radius: 50%;
}

/* ── Schéma en couches ──────────────────────────────────── */
.schema { margin: 56px 0 0; }
.schema-frame {
  padding: 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  /* Le schéma reste lisible jusqu'à une certaine réduction : en dessous, il
     défile dans son cadre plutôt que de rapetisser jusqu'à l'illisible. Le
     défilement est confiné ici, la page, elle, ne bouge jamais.
     Le seuil (500 px) est calé sous la largeur utile de la colonne d'article :
     à la lecture normale, le schéma tient en entier et rien ne défile. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.schema-frame img { width: 100%; min-width: 500px; height: auto; }
.schema figcaption {
  margin-top: 14px;
  font-size: 14px; color: var(--text-faint);
  max-width: 80ch;
}
.schema-hint { display: none; }
@media (max-width: 760px) {
  .schema-hint {
    display: block; margin-top: 10px;
    font-size: 13px; color: var(--text-faint); font-style: italic;
  }
}

/* ── Comparatif « dépendre / décider » ──────────────────── */
/* Deux colonnes assumées : la situation subie à gauche, la situation choisie
   à droite. Aucun concurrent n'est nommé, on oppose deux façons de jouer. */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }

.compare-col {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-alt);
}
.compare-col h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.compare-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.compare-col li { display: flex; gap: 11px; font-size: 15px; color: var(--text-muted); }
.compare-col li::before { flex: 0 0 auto; font-weight: 600; }

.compare-before li::before { content: "✕"; color: var(--text-faint); }
.compare-after {
  border-color: var(--accent-border);
  box-shadow: inset 0 3px 0 var(--accent);
}
.compare-after li::before { content: "✓"; color: var(--success); }
.compare-after li { color: var(--text); }

/* ── Panneau « consensus » (schéma de la synthèse) ──────── */
.consensus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.consensus-table th, .consensus-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.consensus-table th:first-child, .consensus-table td:first-child {
  text-align: left; font-weight: 500; color: var(--text-muted);
  white-space: nowrap;
}
.consensus-table thead th {
  font-size: 12px; color: var(--text-faint);
  font-weight: 600; letter-spacing: 0.04em;
}
.consensus-table .vote { color: var(--success); font-weight: 600; }
/* Une sélection en malus cite le cheval elle aussi : même coche, couleur
   opposée : c'est le sens de ses points qui change, pas le fait de le citer. */
.consensus-table .vote-malus { color: var(--danger); font-weight: 600; }
.consensus-table .no-vote { color: var(--border-strong); }
/* Colonne des points portés par chaque sélection. */
.consensus-table .pts {
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--text-faint);
}
.consensus-table .pts-malus { color: var(--danger); }
.consensus-table tfoot td {
  border-bottom: 0;
  font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.consensus-table tfoot tr:first-child td { padding-top: 12px; }
.consensus-table tfoot td:first-child { color: var(--text); }
/* La note est la ligne d'arrivée du tableau : elle doit se voir. */
.consensus-table tfoot .ligne-note td { font-size: 15px; }

/* ── Témoignages ────────────────────────────────────────── */
blockquote.quote {
  margin: 0;
  padding: 22px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-border);
  border-radius: var(--radius-xl);
}
blockquote.quote p { font-size: 16px; color: var(--text); }
blockquote.quote footer {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; font-size: 13px; color: var(--text-faint);
}
blockquote.quote cite { font-style: normal; font-weight: 600; color: var(--text-muted); }

/* ── Tarifs ─────────────────────────────────────────────── */
.plan {
  display: flex; flex-direction: column;
  padding: 26px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.plan-featured {
  border-color: var(--accent-border);
  box-shadow: inset 0 3px 0 var(--accent);
}
.plan-badge {
  align-self: flex-start; margin-bottom: 12px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-dim);
  border: 1px solid var(--accent-border-dim); border-radius: var(--radius-m);
}
.plan-price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; }
.plan-amount { font-size: 38px; font-weight: 600; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.plan-period { font-size: 14px; color: var(--text-faint); }
.plan-desc { font-size: 14px; color: var(--text-muted); }
.plan ul { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan li { display: flex; gap: 10px; font-size: 15px; }
.plan li::before {
  content: "✓"; flex: 0 0 auto;
  color: var(--success); font-weight: 600;
}
.plan .btn { margin-top: auto; }

/* ── FAQ (details natif : zéro JS, accessible par défaut) ── */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
/* Volontairement en bloc et non en flex : une question contient parfois des
   balises inline (le nom du produit), qui deviendraient autant d'elements
   flex et se retrouveraient ecartes par le `space-between`. Le signe +/- est
   donc positionne, pas aligne. */
.faq summary {
  position: relative;
  padding: 18px 40px 18px 4px;
  font-size: 17px; font-weight: 600;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--accent); font-weight: 400;
}
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 4px 20px; color: var(--text-muted); max-width: 78ch; }
.faq details > div p { margin: 0 0 12px; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ── Articles / vidéos ──────────────────────────────────── */
.post-card {
  display: flex; flex-direction: column;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.post-card:hover { border-color: var(--accent-border); }
.post-thumb {
  aspect-ratio: 16 / 9;
  background: var(--bg-secondary-alt);
  border-bottom: 1px solid var(--border);
  object-fit: cover;
}
.post-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-size: 12px; color: var(--text-faint);
}
.tag {
  padding: 2px 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-dim);
  border: 1px solid var(--accent-border-dim); border-radius: var(--radius-m);
}
.tag-video { color: var(--info); background: rgba(2, 98, 148, 0.10); border-color: rgba(2, 98, 148, 0.30); }
.post-card h3 { margin-bottom: 8px; font-size: 18px; }
.post-card h3 a { color: var(--text); text-decoration: none; }
.post-card h3 a:hover { color: var(--accent); }
.post-card p { font-size: 14px; color: var(--text-muted); margin-bottom: 0; }

/* ── Article (page de contenu) ──────────────────────────── */
.article { max-width: 74ch; margin: 0 auto; padding: 56px 0; }
.article header { margin-bottom: 32px; }
.article h1 { margin-bottom: 14px; }
.article h2 { margin-top: 44px; }
.article h3 { margin-top: 30px; }
.article p, .article li { font-size: 17px; color: var(--text-muted); }
.article strong { color: var(--text); }
.article figure { margin: 30px 0; }
.article figcaption { margin-top: 8px; font-size: 13px; color: var(--text-faint); }
.article blockquote {
  margin: 28px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent-border);
  color: var(--text);
}
.article-meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 13px; color: var(--text-faint);
}
/* Sommaire : donne à voir la longueur de l'article et permet d'y revenir.
   Google s'en sert parfois pour proposer des liens de saut dans ses résultats. */
.toc {
  margin: 32px 0 40px;
  padding: 20px 22px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.toc h2 {
  margin: 0 0 12px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint);
}
.toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.toc li { font-size: 15px; color: var(--text-muted); }

/* Tableaux d'article : scrollables sur mobile plutôt que compressés. */
.table-wrap { overflow-x: auto; margin: 28px 0; }
.article table {
  width: 100%; min-width: 480px;
  border-collapse: collapse; font-size: 15px;
}
.article th, .article td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
.article thead th {
  font-size: 13px; font-weight: 600;
  color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-strong);
}
.article tbody td { color: var(--text-muted); }
.article tbody td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; }

/* Encadré de mise en garde ou de rappel, au fil du texte. */
.note {
  margin: 28px 0; padding: 18px 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-m);
}
.note p { margin: 0; font-size: 15px; }
.note strong { color: var(--warning); }

/* Encadré de réassurance : lève une objection à l'endroit où elle naît.
   Volontairement distinct du .note, qui met en garde ; ici, on rassure,
   d'où l'accent de la marque plutôt que l'orange d'alerte. */
.rassure {
  margin: 28px 0; padding: 18px 20px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border-dim);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-m);
}
.rassure p { margin: 0; font-size: 15px; }
.rassure p + p { margin-top: 10px; }
.rassure strong { color: var(--text); }

.video-frame {
  position: relative; aspect-ratio: 16 / 9;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  overflow: hidden; background: var(--bg-secondary-alt);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Fil d'Ariane */
.breadcrumb { font-size: 13px; color: var(--text-faint); padding-top: 24px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li::after { content: "›"; margin-left: 8px; color: var(--border-strong); }
.breadcrumb li:last-child::after { content: ""; }

/* ── Bandeau de conversion ──────────────────────────────── */
.cta-band {
  padding: 40px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 3px 0 var(--accent);
  text-align: center;
}
.cta-band h2 { margin-bottom: 12px; }
.cta-band p { max-width: 60ch; margin-inline: auto; color: var(--text-muted); }
.cta-band .btn-row { justify-content: center; }

/* ── Article suivant : maillage de lecture ──────────────── */
/* Fin d'article : la suite du parcours de lecture, placée avant l'appel
   commercial. Volontairement plus sobre qu'une .cta-band : on invite à
   continuer de lire, pas encore à s'abonner. */
.suite {
  display: block;
  margin: 48px 0 0;
  padding: 24px 26px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-m);
}
.suite .eyebrow { margin-bottom: 6px; }
.suite h2 { font-size: 21px; margin: 0 0 10px; }
.suite h2 a { color: var(--text); text-decoration: none; }
.suite h2 a:hover { color: var(--accent); }
.suite p { color: var(--text-muted); margin-bottom: 0; max-width: 70ch; }

/* ── Pied de page ───────────────────────────────────────── */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 48px 0 28px;
  font-size: 14px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }
.site-footer h2 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

/* Jeu responsable : mention obligatoire dès lors qu'on s'adresse à des
   parieurs. Elle reste lisible (pas de gris sur gris) et présente partout. */
.responsible {
  margin-top: 32px; padding: 16px 18px;
  background: var(--bg-alt);
  border: 1px solid var(--warning);
  border-radius: var(--radius-m);
  font-size: 13px; color: var(--text-muted);
}
.responsible strong { color: var(--warning); }
.footer-legal {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13px; color: var(--text-faint);
}

/* ══════════════════════════════════════════════════════════════════
   Annonce de disponibilité — à retirer à l'ouverture de Critérium
   ──────────────────────────────────────────────────────────────────
   Tant que l'application n'est pas en ligne, les liens vers /app/ et les
   boutons d'abonnement ouvrent un calque d'information au lieu de mener
   sur une page vide. Tout ce bloc, le module correspondant dans main.js
   et les attributs `data-bientot` des boutons se suppriment ensemble le
   jour de la mise en ligne : le site retrouve son comportement normal.
   ══════════════════════════════════════════════════════════════════ */

/* ── Bouton d'une fonction pas encore ouverte ──────────────
   Volontairement éteint : le visiteur voit au premier coup d'œil qu'il n'y
   a rien à acheter aujourd'hui. Il reste cliquable — un bouton `disabled`
   ne dirait pas pourquoi, et n'ouvrirait pas l'explication. L'état est
   porté par `aria-disabled`, que les lecteurs d'écran annoncent. */
.btn-soon,
.btn-soon.btn-primary {
  background: var(--bg-secondary);
  border-color: var(--border-strong);
  color: var(--text-faint);
  font-weight: 500;
}
.btn-soon:hover,
.btn-soon.btn-primary:hover {
  background: var(--bg-secondary-alt);
  border-color: var(--accent-border);
  color: var(--text-muted);
}

/* Pastille « Septembre 2026 » sous les prix. */
.badge-soon {
  display: inline-block; align-self: flex-start; margin-top: 10px;
  margin-bottom: 16px;
  padding: 3px 9px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--warning);
  background: var(--bg-alt);
  border: 1px solid var(--warning);
  border-radius: var(--radius-s);
}

/* Bandeau d'information au-dessus de la grille tarifaire. */
.soon-banner {
  margin-bottom: 26px; padding: 16px 20px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border-dim);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-m);
  font-size: 15px; color: var(--text-muted);
}
.soon-banner p { margin: 0; }
.soon-banner p + p { margin-top: 8px; }
.soon-banner strong { color: var(--text); }

/* ── Calque d'information ──────────────────────────────────
   Injecté par main.js, donc absent du HTML : sans JavaScript, les liens
   se comportent comme avant et rien ne casse. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.55);
  animation: modal-fade 0.15s ease-out;
}
.modal-overlay[hidden] { display: none; }

.modal {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 30px 32px 26px;
  background: var(--bg-alt);
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.28);
  animation: modal-rise 0.18s ease-out;
}
.modal .eyebrow { margin: 0 0 6px; }
.modal h2 { font-size: 24px; margin: 0 0 14px; }
.modal p { margin: 0 0 14px; font-size: 15px; color: var(--text-muted); }
.modal p:last-of-type { margin-bottom: 0; }
.modal strong { color: var(--text); }

/* La croix de fermeture double la touche Échap et le clic sur le fond :
   trois sorties, dont une atteignable au doigt. */
.modal-close {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  color: var(--text-faint); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-m);
  cursor: pointer;
}
.modal-close:hover { color: var(--accent); background: var(--accent-dim); }

.modal-form {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 18px 0 10px;
}
.modal-form label {
  flex: 1 1 100%;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.modal-form input[type="email"] {
  flex: 1 1 220px; min-width: 0;
  min-height: 46px; padding: 0 12px;
  font-family: inherit; font-size: 15px;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-m);
}
.modal-form input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.modal-form .btn { flex: 0 0 auto; }

.modal-hint { font-size: 13px; color: var(--text-faint); }
.modal-hint a { color: var(--accent); }

/* Message d'état après l'envoi : rendu visible aux lecteurs d'écran par
   aria-live, d'où le retrait du flux quand il est vide. */
.modal-status {
  margin-top: 12px; padding: 12px 14px;
  font-size: 14px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border-dim);
  border-radius: var(--radius-m);
  color: var(--text-muted);
}
.modal-status:empty { display: none; }

.modal-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; }

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  .modal { padding: 26px 20px 22px; }
  .modal h2 { font-size: 21px; }
  .modal-form .btn { flex: 1 1 100%; }
}

/* Le défilement de l'arrière-plan est bloqué pendant l'ouverture : sur
   mobile, la page continuerait de glisser sous le calque. */
body.modal-open { overflow: hidden; }