/* ============================================================================
   ARCHIMÈDE — COMPOSANTS PARTAGÉS
   Écrits une seule fois, valables dans les deux directions et dans tout thème
   futur. Aucune couleur ni taille en dur : uniquement des tokens.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   ARMATURE DE PAGE
   ------------------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: 1420px; }
.wrap--narrow { max-width: 780px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
/* Deux sections qui se suivent sans titre intermédiaire n'ont pas besoin de deux
   fois l'espace : la seconde vient coller à la précédente. */
.section--tight.section--flush-top { padding-top: 0; }
.section--alt { background: var(--c-bg-alt); }
.section--line { border-top: 1px solid var(--c-line); }

.stack > * + * { margin-top: var(--sp-sm); }
.stack-lg > * + * { margin-top: var(--sp-md); }
.stack-xl > * + * { margin-top: var(--sp-lg); }

.grid { display: grid; gap: var(--sp-md); }
/* Un enfant de grille a un minimum automatique égal à sa largeur intrinsèque.
   On l'autorise à rétrécir, sinon un contenu large impose sa taille à la page. */
/* Un enfant de grille ou de pile a un minimum automatique égal à sa largeur
   intrinsèque. On l'autorise à rétrécir, sinon un contenu large (SVG, champ,
   libellé insécable) impose sa taille à la page entière. */
.grid > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.form__grid > *,
.stack > *,
.stack-lg > *,
.doors > *,
.hero__grid > *,
.sim-panel > *,
.cta-band > *,
.kpi-strip > *,
.steps > *,
.swatches > *,
.readout__row > *,
.site-footer__grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }

/* ---------------------------------------------------------------------------
   TYPOGRAPHIE ÉDITORIALE
   ------------------------------------------------------------------------ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--c-brand);
}
.eyebrow--plain::before { display: none; }

.display {
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-ink-muted);
  max-width: 60ch;
}
.muted { color: var(--c-ink-muted); }
.dim { color: var(--c-ink-dim); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }

.prose { max-width: var(--w-prose); }
.prose p + p { margin-top: var(--sp-sm); }

/* Filet de mesure : la graduation, motif de marque */
.rule {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin: 0;
}
.rule--grad {
  height: 9px;
  background: var(--c-line);
  -webkit-mask-image: repeating-linear-gradient(
    to right, #000 0 1px, transparent 1px 14px);
  mask-image: repeating-linear-gradient(
    to right, #000 0 1px, transparent 1px 14px);
  border: 0;
}

/* ---------------------------------------------------------------------------
   BOUTONS & LIENS D'ACTION
   ------------------------------------------------------------------------ */

.btn {
  --btn-bg: var(--c-brand-fill);
  --btn-fg: var(--c-brand-ink);
  --btn-line: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
  padding: 0.82rem 1.35rem;
  border: 1px solid var(--btn-line);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary:hover { background: var(--c-brand-fill-hover); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-line: var(--c-line);
}
.btn--secondary:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink-muted);
  --btn-line: transparent;
  padding-inline: var(--sp-xs);
}
.btn--ghost:hover { color: var(--c-ink); }

.btn--lg { padding: 1rem 1.7rem; font-size: 1rem; }
.btn--sm { padding: 0.55rem 0.9rem; font-size: var(--fs-sm); }
/* Un libellé de bouton ne se coupe pas au milieu d'un mot, mais il doit pouvoir
   passer à la ligne sur écran étroit. Cause réelle d'un débordement de 49 px à
   360 px : le bouton « Demander ma démonstration », insécable, mesurait 312 px
   et imposait sa largeur à tout le formulaire, puis à la page entière. */
.btn--block { width: 100%; white-space: normal; }
@media (max-width: 480px) {
  .btn { white-space: normal; }
}

.btn__arrow {
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--c-brand);
  text-decoration: none;
}
.link-arrow::after {
  content: '→';
  transition: transform var(--dur-base) var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------------------------
   ÉTIQUETTES & SIGNAUX DE RISQUE
   Le vocabulaire de couleur est porteur de sens : robuste / sous tension / fragile
   ------------------------------------------------------------------------ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-ink-muted);
  white-space: nowrap;
}
.chip--ok    { color: var(--c-ok);    border-color: var(--c-ok);    background: var(--c-ok-bg); }
.chip--watch { color: var(--c-watch); border-color: var(--c-watch); background: var(--c-watch-bg); }
.chip--risk  { color: var(--c-risk);  border-color: var(--c-risk);  background: var(--c-risk-bg); }
.chip--brand { color: var(--c-brand); border-color: var(--c-brand); background: var(--c-brand-bg); }

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Légende de risque réutilisable */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-sm);
  font-size: var(--fs-xs);
  color: var(--c-ink-dim);
}
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ---------------------------------------------------------------------------
   CHIFFRES CLÉS
   ------------------------------------------------------------------------ */

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: var(--sp-2xs);
  font-size: var(--fs-sm);
  color: var(--c-ink-dim);
}
.stat__value--brand { color: var(--c-brand); }

/* ---------------------------------------------------------------------------
   CARTES
   Bordure fine plutôt qu'ombre portée : registre technique, pas marketing.
   ------------------------------------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  padding: var(--sp-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.card--link { text-decoration: none; }
.card--link:hover {
  border-color: var(--c-brand);
  transform: translateY(-2px);
}
.card--flat { background: transparent; }
.card--pad-lg { padding: var(--sp-lg); }

.card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.card__text { font-size: var(--fs-sm); color: var(--c-ink-muted); }
.card__foot {
  margin-top: auto;
  padding-top: var(--sp-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2xs);
}

/* Numérotation technique, motif de marque */
.card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--c-ink-dim);
  letter-spacing: var(--ls-label);
}

/* ---------------------------------------------------------------------------
   PORTES DE TRIAGE — le composant central du site refondu
   ------------------------------------------------------------------------ */

.doors {
  display: grid;
  gap: var(--sp-xs);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--sp-md) var(--sp-md) var(--sp-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}
/* Soulignement qui se déploie : signale la cible cliquable sans surcharger */
.door::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.door:hover::after,
.door:focus-visible::after { transform: scaleX(1); }
.door:hover { border-color: var(--c-brand); }

.door__who {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.door__promise { font-size: var(--fs-sm); color: var(--c-ink-muted); }
.door__go {
  margin-top: var(--sp-xs);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-brand);
}

/* ---------------------------------------------------------------------------
   BOUSSOLE / RADAR — la visualisation produit
   ------------------------------------------------------------------------ */

.radar {
  width: 100%;
  height: auto;
  /* Un SVG porte une taille intrinsèque : sans cette remise à zéro, il
     impose sa largeur à sa colonne et fait déborder la page sur écran étroit. */
  min-width: 0;
  overflow: visible;
}
.radar__grid  { fill: none; stroke: var(--c-line); stroke-width: 1; }
.radar__spoke { stroke: var(--c-line-soft); stroke-width: 1; }
.radar__axis  { stroke: var(--c-line); stroke-width: 1; }
.radar__shape {
  /* Rendu de la plateforme : remplissage à 15 % (`bgOpacity: .15`) et tracé
     pleine opacité dans le jeton `brand`. */
  fill: var(--c-brand-bg);
  stroke: var(--c-brand-graphic);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: all var(--dur-slow) var(--ease-out);
}
.radar__point {
  fill: var(--c-bg);
  stroke: var(--c-brand-graphic);
  stroke-width: 2;
  transition: all var(--dur-slow) var(--ease-out);
}
.radar__tick {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--c-ink-dim);
}

/* Curseur de simulation : sobre, précis, tactile */
.sim { display: grid; gap: var(--sp-sm); }
.sim__row { display: grid; gap: 0.45rem; }
.sim__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2xs);
  font-size: var(--fs-sm);
}
.sim__name { color: var(--c-ink-muted); }
.sim__val {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

input[type='range'].slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
}
input[type='range'].slider::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--c-line);
  border-radius: 2px;
}
input[type='range'].slider::-moz-range-track {
  height: 3px;
  background: var(--c-line);
  border-radius: 2px;
}
input[type='range'].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--c-brand-fill);
  border: 2px solid var(--c-bg);
  box-shadow: 0 0 0 1px var(--c-brand-fill);
  transition: transform var(--dur-fast) var(--ease);
}
input[type='range'].slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c-brand-fill);
  border: 2px solid var(--c-bg);
  box-shadow: 0 0 0 1px var(--c-brand-fill);
}
input[type='range'].slider:hover::-webkit-slider-thumb { transform: scale(1.12); }

/* Verdict : la conclusion lisible d'une lecture de risque */
.verdict {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--c-line);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: var(--fs-sm);
}
.verdict--ok    { border-left-color: var(--c-ok); }
.verdict--watch { border-left-color: var(--c-watch); }
.verdict--risk  { border-left-color: var(--c-risk); }
.verdict__label { font-weight: var(--fw-semibold); }

/* Panneau de démonstration : le radar et sa lecture chiffrée côte à côte */
.sim-panel {
  display: grid;
  gap: var(--sp-lg);
  align-items: center;
}
@media (min-width: 900px) {
  .sim-panel { grid-template-columns: 1.15fr 1fr; gap: var(--sp-xl); }
}

/* Lecture chiffrée : neuf lignes lisibles, complément du radar */
.readout { display: grid; gap: 1px; background: var(--c-line-soft); }
.readout__row {
  display: grid;
  grid-template-columns: 1.6rem 1fr 54px 2.4rem auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.42rem 0.5rem;
  background: var(--c-bg);
  font-size: var(--fs-xs);
}
.section--alt .readout__row { background: var(--c-bg-alt); }
.readout__n {
  font-family: var(--font-mono);
  color: var(--c-ink-dim);
  font-size: var(--fs-label);
}
.readout__name { color: var(--c-ink-muted); }
.readout__bar {
  height: 3px;
  background: var(--c-line);
  border-radius: 2px;
  overflow: hidden;
}
.readout__bar i {
  display: block;
  height: 100%;
  background: var(--c-brand-graphic);
  transition: width var(--dur-slow) var(--ease-out);
}
.readout__val {
  font-family: var(--font-mono);
  text-align: right;
  color: var(--c-ink);
}
/* Sous 620px, le tableau de lecture devient trop dense : on retire le graphe
   de barre et l'étiquette de niveau, l'information chiffrée reste. */
@media (max-width: 620px) {
  .readout__row { grid-template-columns: 1.6rem 1fr 2.4rem; }
  .readout__bar,
  .readout__row .chip { display: none; }
}

/* Encart de démonstration : cadre l'outil sans le confondre avec la page */
.demo-frame {
  padding: var(--sp-md);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.demo-frame__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-md);
  border-bottom: 1px solid var(--c-line);
}

/* ---------------------------------------------------------------------------
   TITRE DE SECTION — bloc structurel commun aux deux directions
   Le contenu du repère change (numéro d'ordre ou coordonnée), pas la structure.
   ------------------------------------------------------------------------ */

.sec-head {
  display: grid;
  gap: var(--sp-2xs);
  margin-bottom: var(--sp-lg);
}
.sec-head__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.sec-head__title { font-size: var(--fs-h2); max-width: 24ch; }
.sec-head__sub {
  color: var(--c-ink-muted);
  font-size: var(--fs-lead);
  max-width: 58ch;
  margin-top: var(--sp-xs);
}
.sec-head__sub strong { color: var(--c-ink); font-weight: var(--fw-bold); }
.sec-head--center { justify-items: center; text-align: center; }
.sec-head--center .sec-head__title,
.sec-head--center .sec-head__sub { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   BANDEAU DE CHIFFRES CLÉS — hairlines, aucun ornement
   ------------------------------------------------------------------------ */

.kpi-strip {
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}
.kpi-strip .stat + .stat {
  padding-left: var(--sp-md);
  border-left: 1px solid var(--c-line-soft);
}
@media (max-width: 700px) {
  .kpi-strip .stat + .stat {
    padding-left: 0;
    border-left: 0;
    padding-top: var(--sp-sm);
    border-top: 1px solid var(--c-line-soft);
  }
}

/* ---------------------------------------------------------------------------
   PANNEAU DE DÉMONSTRATION — en-tête et cadre
   ------------------------------------------------------------------------ */

.demo-frame__title {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}

/* ---------------------------------------------------------------------------
   CARTES USE CASE — secteur et décision retenue
   ------------------------------------------------------------------------ */

.usecase__sector {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}
.usecase__outcome {
  margin-top: var(--sp-2xs);
  padding-top: var(--sp-2xs);
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--fs-sm);
  color: var(--c-brand);
}

.compare__caption {
  margin-top: var(--sp-xs);
  font-size: var(--fs-xs);
  color: var(--c-ink-dim);
  max-width: var(--w-prose);
}

/* ---------------------------------------------------------------------------
   CITATION TIRÉE — la phrase de positionnement mise en exergue
   Style de base commun ; chaque direction règle le registre (serif italique
   pour « La Carte », sans-serif dense pour « L'Instrument »).
   ------------------------------------------------------------------------ */

.pullquote {
  margin: 0;
  padding-left: var(--sp-md);
  border-left: 2px solid var(--c-brand);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  font-weight: var(--fw-bold);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  max-width: 40ch;
}
.pullquote cite {
  display: block;
  margin-top: var(--sp-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  font-style: normal;
  letter-spacing: 0;
  color: var(--c-ink-dim);
}

.fig { margin: 0; }

/* ---------------------------------------------------------------------------
   UTILITAIRES — jeu minimal et fermé. Toute valeur ponctuelle passe par ici
   plutôt que par un style en ligne, sinon le système se dégrade en silence.
   ------------------------------------------------------------------------ */

.mt-2xs { margin-top: var(--sp-2xs); }
.mt-xs  { margin-top: var(--sp-xs); }
.mt-sm  { margin-top: var(--sp-sm); }
.mt-md  { margin-top: var(--sp-md); }
.mt-lg  { margin-top: var(--sp-lg); }
.mt-xl  { margin-top: var(--sp-xl); }
.mt-2xl { margin-top: var(--sp-2xl); }
.mt-auto { margin-top: auto; }

.mw-34 { max-width: 34ch; }
.mw-40 { max-width: 40ch; }
.mw-prose { max-width: var(--w-prose); }
.mw-narrow { max-width: 46rem; }

.align-center { align-items: center; }
.mx-auto { margin-inline: auto; }
.stack-lg { display: grid; gap: var(--sp-md); }

/* Image cadrée : bordure fine, rayon du système, légende alignée */
.framed {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.fig__caption {
  margin-top: var(--sp-2xs);
  font-size: var(--fs-xs);
  color: var(--c-ink-dim);
}

/* Logo en pied de page ou en barre de navigation */
.logo--sm { height: 26px; width: auto; }
.logo--xs { height: 24px; width: auto; }

/* ---------------------------------------------------------------------------
   BARRE DE REVUE — outil de comparaison des directions, hors design du site.
   Volontairement neutre et sombre dans les deux directions : elle ne doit
   jamais être confondue avec un élément de la charte. À retirer à la publication.
   ------------------------------------------------------------------------ */

.review-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs) var(--sp-sm);
  padding: 0.5rem var(--gutter);
  background: #1b1f24;
  border-bottom: 1px dashed #4a5560;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #c8d0c0;
}
.review-bar strong { color: #fff; font-weight: 600; }
.review-bar__links { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-sm); }
.review-bar a { color: #b3c396; text-decoration: none; }
.review-bar a:hover { text-decoration: underline; }
.review-bar a[aria-current='true'] { color: #fff; text-decoration: underline; }
.review-bar .theme-switch { display: flex; gap: var(--sp-2xs); }

/* La barre de revue a un fond sombre fixe, indépendant de la palette active.
   Ses boutons ne peuvent donc pas tirer leurs couleurs des jetons de thème :
   en thème B, « --c-ink-muted » devient sombre et le texte disparaîtrait sur
   ce fond. Les valeurs ci-dessous sont volontairement en dur. */
.review-bar .btn,
.review-bar .btn--ghost {
  --btn-fg: #c8d0c0;
  --btn-line: #4a5560;
  --btn-bg: transparent;
  color: #c8d0c0;
}
.review-bar .btn:hover { --btn-fg: #fff; color: #fff; }
.review-bar .btn--doc { color: #b3c396; padding: 0.2rem 0.5rem; }
.review-bar .btn--doc:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   FORMULAIRES — Netlify Forms, accessibles, mesurables
   ------------------------------------------------------------------------ */

.form { display: grid; gap: var(--sp-sm); }
.form__grid {
  display: grid;
  gap: var(--sp-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.field { display: grid; gap: 0.35rem; }
.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.field__optional {
  font-weight: var(--fw-regular);
  color: var(--c-ink-dim);
}
.field__hint { font-size: var(--fs-xs); color: var(--c-ink-dim); }

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-size: 0.9375rem;
  /* Indispensable : la largeur intrinsèque d'un <select> est celle de son option
     la plus longue. Sans cette remise à zéro, il élargit toute la page sur mobile. */
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.input::placeholder,
.textarea::placeholder { color: var(--c-ink-dim); }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--c-hairline); }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 51%, calc(100% - 12px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.textarea { min-height: 7rem; resize: vertical; }

/* Cases à cocher : cibles larges, libellé cliquable sur toute la ligne */
.check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  cursor: pointer;
}
.check input {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 0.18rem;
  accent-color: var(--c-brand);
}

/* Champ piège anti-spam : présent dans le DOM, invisible pour l'humain */
.honeypot {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.form__note {
  font-size: var(--fs-xs);
  color: var(--c-ink-dim);
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

/* Progression d'un tunnel : rassure et réduit l'abandon */
.progress {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}
.progress__bar {
  flex: 1;
  height: 2px;
  background: var(--c-line);
  border-radius: 2px;
  overflow: hidden;
}
.progress__fill {
  display: block;
  height: 100%;
  width: 33%;
  background: var(--c-brand-fill);
  transition: width var(--dur-slow) var(--ease-out);
}

/* ---------------------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------------------ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  min-height: 68px;
}
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex: none;
  /* Sur téléphone le logotype descend à 21 px : le lien qui le porte mesurait donc
     21 px de haut, sous les 24 px de WCAG 2.2 AA. La barre en fait 60, la place
     ne manque pas. */
  min-block-size: 24px;
}
.site-nav__brand img { height: 26px; width: auto; }

/* Séparateur entre les deux groupes du menu : la rubrique produit d'un côté,
   les contenus éditoriaux de l'autre. Décoratif, donc masqué aux lecteurs
   d'écran ; la séparation reste portée par l'espace et l'ordre.

   Il était dessiné avec deux barres verticales typographiques. Mesuré, ce texte
   donnait un contraste de 2,29:1 alors qu'un texte doit atteindre 4,5:1 — et
   l'éclaircir assez pour l'atteindre aurait rendu un trait plus voyant que le
   menu qu'il sépare. Un trait est un élément graphique, pas du texte : il n'a
   aucun contraste à tenir. On le dessine donc en CSS, et le glyphe disparaît. */
.site-nav__sep {
  display: block;
  inline-size: 1px;
  block-size: 13px;
  background: var(--c-hairline);
  /* Le rembourrage donne l'espace autour du trait ; sans ce recadrage, le fond
     le recouvrait aussi et le trait devenait un rectangle de 15 × 13 px, un petit
     carré vert au milieu du menu. */
  background-clip: content-box;
  padding-inline: 0.45rem;
  box-sizing: content-box;
  font-size: 0;
  letter-spacing: 0;
  user-select: none;
}

.site-nav__links {
  display: flex;
  align-items: center;
  /* Gouttière nulle : la séparation est portée par le point médian ci-dessous,
     ce qui la rend lisible au lieu de la laisser à l'implicite. Sept entrées à
     24 px de gouttière ne tenaient pas dans la barre, et les libellés les plus
     longs se cassaient en deux au lieu de déborder franchement — un défaut
     presque invisible en mesure, très visible à l'œil. */
  gap: 0;
  /* Les deux marges absorbent l'espace libre à parts égales : le menu se place
     au milieu de ce qui reste entre le logotype et le groupe de droite, dont la
     pastille de langue est le premier élément. */
  margin-inline: auto;
  font-size: var(--fs-sm);
}
.site-nav__links a {
  color: var(--c-ink-muted);
  text-decoration: none;
}
.site-nav__links a:hover { color: var(--c-ink); }

/* Point médian entre les entrées : il clarifie la lecture. Il est posé en CSS,
   donc absent du balisage lu par les lecteurs d'écran — un séparateur purement
   visuel n'a rien à faire dans le contenu.
   Supprimé devant le séparateur de groupe, sans quoi on lirait « Tarifs · || Wiki ».
   `:has()` n'est pas universel : sans lui, la page affiche simplement un point de
   trop devant le séparateur, sans autre conséquence. */
.site-nav__links a:not(:last-of-type)::after {
  content: '\00b7';
  margin-inline: 0.42em;
  color: var(--c-hairline);
}
.site-nav__links a:has(+ .site-nav__sep)::after { content: none; }
.site-nav__cta { display: flex; align-items: center; gap: var(--sp-2xs); }

/* Sous 860 px, la navigation devient une bande de liens sous la barre.
   Première version : les liens étaient purement masqués, sans remplacement —
   une régression par rapport au site actuel, qui a un menu. Aucun contrôle
   automatique ne pouvait le voir, un élément masqué étant ignoré par l'audit.

   Le choix retenu évite un menu déroulant : quatre ancres courtes tiennent sur
   une ligne à 360 px, donc une bande de liens est plus directe qu'un bouton à
   ouvrir. Elle fonctionne sans JavaScript, ne duplique pas le balisage et
   n'affiche aucun état intermédiaire.
   Les liens passent à la ligne plutôt que de défiler horizontalement : un
   défilement cacherait des entrées hors écran, ce qui est précisément le
   défaut qu'on cherche à corriger. */
/* Le seuil était à 860 px. Mesuré, la barre sur une ligne demande 961 px de
   contenu : entre 861 et 1044 px, le bouton d'action sortait de l'écran — donc
   sur un portable en 1024 px, une largeur courante. Le défaut était invisible
   pour l'audit, qui ne testait que 320, 360, 768 et 1280 px.
   La bande devient donc une bande de liens jusqu'à 910 px, et le bouton de
   connexion s'efface tant que la barre reste à une ligne : il reste dans le hero,
   dans l'appel à l'action final et dans le pied de page. */
@media (max-width: 910px) {
  .site-nav__inner { flex-wrap: wrap; row-gap: 0; }
  .site-nav__links {
    order: 3;
    width: 100%;
    margin-inline: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    padding-block: 0.3rem;
    border-top: 1px solid var(--c-line-soft);
  }
  .site-nav__links a {
    white-space: nowrap;
    padding-block: 0.5rem;
  }
}

/* Sous 620 px, la barre débordait de 76 px : le logotype, le bouton de connexion
   et le bouton d'action ne tenaient pas sur une ligne de 360 px.
   On retire le bouton de connexion — il reste présent dans le hero, dans l'appel
   à l'action final et dans le pied de page — et on resserre l'action principale. */
/* Entre 911 et 1050 px, la barre tient sur une ligne si l'on retire le lien de
   connexion : 961 px demandés sans lui tombent à 905 px, pour 911 px de large.
   Les deux seuils sont posés sur la mesure, à quelques pixels près : à 901 px, la
   barre sans le lien de connexion débordait encore de 4 px. */
@media (min-width: 911px) and (max-width: 1050px) {
  .site-nav__cta .btn--ghost { display: none; }
}

@media (max-width: 620px) {
  .site-nav__inner { gap: var(--sp-2xs); min-height: 60px; }
  .site-nav__brand img { height: 21px; }
  .site-nav__cta .btn--ghost { display: none; }
  .site-nav__cta .btn {
    padding: 0.52rem 0.75rem;
    font-size: var(--fs-xs);
    white-space: nowrap;
  }
}

/* Cibles tactiles : WCAG 2.2 AA demande 24 x 24 px. Les liens de pied de page
   et de navigation sont des cibles isolées, pas des liens en ligne dans une
   phrase : ils doivent donc atteindre la taille minimale. */
.site-nav__links a {
  display: inline-block;
  padding-block: 0.45rem;
  /* Jamais de césure interne : c'est ce qui produisait l'escalier. */
  white-space: nowrap;
}
.site-footer li a {
  display: inline-block;
  padding-block: 0.32rem;
}
.site-footer li + li { margin-top: 0; }
.site-footer__legal a {
  display: inline-block;
  padding-block: 0.3rem;
}

/* Barre de progression de lecture : utile sur les pages use case longues */
.readbar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--c-brand-fill);
  z-index: var(--z-toast);
}

/* ---------------------------------------------------------------------------
   TABLEAUX — comparatifs et grilles tarifaires
   ------------------------------------------------------------------------ */

.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th,
.table td {
  padding: 0.8rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
  border-bottom-color: var(--c-hairline);
}
.table tbody th { font-weight: var(--fw-medium); color: var(--c-ink); }
.table td { color: var(--c-ink-muted); }
.table--highlight { background: var(--c-brand-bg); }

/* ---------------------------------------------------------------------------
   ÉTAPES NUMÉROTÉES
   ------------------------------------------------------------------------ */

.steps { counter-reset: step; display: grid; gap: var(--sp-md); }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-sm);
  align-items: start;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-brand);
  padding-top: 0.15rem;
  border-top: 1px solid var(--c-brand);
  min-width: 2.2rem;
}
.step__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.step__text { font-size: var(--fs-sm); color: var(--c-ink-muted); margin-top: 0.3rem; }

/* ---------------------------------------------------------------------------
   TARIFS
   ------------------------------------------------------------------------ */

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-lg) var(--sp-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  position: relative;
}
.plan--featured { border-color: var(--c-brand); }
.plan__name {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}
.plan__price {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.5rem + 1.4vw, 2.4rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.plan__price small {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--c-ink-dim);
  letter-spacing: 0;
}
.plan__feat { display: grid; gap: 0.5rem; font-size: var(--fs-sm); color: var(--c-ink-muted); }
.plan__feat li { display: flex; gap: 0.5rem; }
.plan__feat li::before { content: '—'; color: var(--c-brand); flex: none; }
.plan__flag {
  position: absolute;
  top: calc(-1 * var(--sp-2xs));
  right: var(--sp-md);
  /* Fond d'aplat : --c-brand-fill, comme les boutons, et non --c-brand qui est
     calibré pour du texte sur le fond de page (3,24:1 contre 5,75:1 ici). */
  background: var(--c-brand-fill);
  color: var(--c-brand-ink);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
}

/* ---------------------------------------------------------------------------
   QUESTIONS FRÉQUENTES
   ------------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--c-line); }
.faq details {
  border-bottom: 1px solid var(--c-line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--c-brand);
  flex: none;
  transition: transform var(--dur-base) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer {
  padding: 0 0 var(--sp-sm);
  max-width: var(--w-prose);
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------------------
   BANDEAU D'APPEL À L'ACTION
   ------------------------------------------------------------------------ */

.cta-band {
  display: grid;
  gap: var(--sp-md);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  align-items: center;
}
@media (min-width: 780px) {
  .cta-band { grid-template-columns: 1.4fr 1fr; }
  .cta-band .actions { justify-content: flex-end; }
}

/* ---------------------------------------------------------------------------
   PIED DE PAGE
   ------------------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--c-line);
  padding-block: var(--sp-xl);
  font-size: var(--fs-sm);
  color: var(--c-ink-dim);
}
.site-footer__grid {
  display: grid;
  gap: var(--sp-lg);
  /* 190 px ne laissaient passer que quatre colonnes ; avec la carte Contact et la
     colonne des analyses, il en faut cinq. Mesuré : à 168 px de minimum, les cinq
     tiennent sur une seule rangée dès 1055 px de large, et l'adresse de courriel
     n'est jamais coupée dans la carte (vérifié à 1024, 1055, 1100 et 1280 px).
     En dessous, la rangée se replie à quatre colonnes : c'est prévu. */
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
}

/* La colonne du logotype est courte — un logotype et deux lignes — face à des
   colonnes de liens deux fois plus hautes. Alignée en haut, elle flottait ; elle
   est donc centrée verticalement dans la hauteur de la rangée, et le slogan
   s'écarte du logotype qui le surplombait de trop près. */
.site-footer__grid > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.site-footer__grid > div:first-child p { margin-top: var(--sp-sm); }

/* Contact sort de la colonne « Produit », où il s'entassait sous trois autres
   liens, pour devenir sa propre colonne. Encadré sobre : un filet et le fond
   alterné, la même recette que les cartes du site, pour qu'il se distingue des
   listes voisines sans peser plus qu'elles. */
.site-footer__contact {
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg-alt);
  padding: var(--sp-sm) var(--sp-md);
}
.site-footer h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
  margin-bottom: var(--sp-2xs);
}

/* Les deux groupes d'une même colonne — « Produit » puis « Contact » — ont besoin
   d'air : sans cela le second titre colle à la liste du premier. La règle ne vise
   que le second groupe, car un titre qui suit une liste n'existe qu'à cet endroit
   du pied de page. 0,625 rem = 10 px, et l'écart suit la taille de texte du
   lecteur s'il l'agrandit — ce qu'une valeur en pixels ne ferait pas. */
.site-footer ul + h3 { margin-top: 0.625rem; }
.site-footer a { color: var(--c-ink-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-ink); }
.site-footer li + li { margin-top: 0.4rem; }
.site-footer__legal {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-md);
  justify-content: space-between;
  font-size: var(--fs-xs);
}

/* Colonne des dernières analyses, dans la grille du pied de page. Elle se comporte
   comme les autres colonnes : plus de mise en pleine largeur, qui la faisait
   passer sous le bloc et rompait l'alignement. La typographie, les couleurs et
   l'interligne des liens sont déjà décrits par .site-footer h3, .site-footer a et
   .site-footer li + li ; seule la ligne de bas de colonne a besoin d'air. */
.site-footer__analyses p { margin-top: 0.6rem; }

/* Pastilles de légende : les couleurs de risque portent du sens, donc elles
   sont nommées dans le système plutôt qu'écrites en style en ligne. */
.dot--ok    { background: var(--c-ok); }
.dot--watch { background: var(--c-watch); }
.dot--risk  { background: var(--c-risk); }

/* Radar de taille réduite (hero) : même dessin, empreinte adaptée */
.radar--sm { max-width: 380px; }

/* ---------------------------------------------------------------------------
   SÉLECTEUR DE LANGUE
   Discret : c'est un changement de version, pas une action commerciale. Il porte
   hreflang et lang pour que les moteurs et les lecteurs d'écran sachent à quoi
   mène le lien.
   ------------------------------------------------------------------------ */

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 28px;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  color: var(--c-ink-muted);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.lang-switch:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

/* ---------------------------------------------------------------------------
   TARIFS — calculateur (curseur d'espaces + mensuel/annuel)
   ------------------------------------------------------------------------ */
.billing {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  margin: var(--sp-md) 0 var(--sp-lg);
}
.billing__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--c-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.billing__btn.is-active {
  background: var(--c-brand-fill);
  color: var(--c-brand-ink);
}
.billing__tag { font-size: var(--fs-xs); font-weight: var(--fw-bold); }

.plan__calc {
  display: grid;
  gap: 0.6rem;
  padding-top: var(--sp-sm);
  border-top: 1px dashed var(--c-line);
}
.plan__calc-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}
.plan__calc-count {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
/* La zone de clic mesure 24 px de haut, pas 4. La piste reste un trait de 4 px,
   dessiné au centre par un dégradé : c'est la cible qui grandit, pas le trait.
   Mesuré avant correction : 218 × 4 px, très en dessous des 24 px de WCAG 2.2 AA,
   alors qu'un curseur se manipule au doigt sur un téléphone. */
.plan__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  border-radius: var(--r-pill);
  background: linear-gradient(var(--c-line), var(--c-line)) center / 100% 4px no-repeat;
  outline: none;
  cursor: pointer;
}
.plan__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-brand);
  border: 2px solid var(--c-bg);
  cursor: pointer;
}
.plan__slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid var(--c-bg);
  border-radius: 50%;
  background: var(--c-brand);
  cursor: pointer;
}
.plan__slider::-moz-range-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-line);
}
.plan__slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-brand);
  border: 2px solid var(--c-bg);
  cursor: pointer;
}
.plan__calc-meta { font-size: var(--fs-xs); color: var(--c-ink-dim); }
.plan__calc-meta .plan__per {
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   VIDÉO — façade click-to-play
   ------------------------------------------------------------------------ */
.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 52rem;
  margin: var(--sp-lg) auto 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.video-facade__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-facade__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(15, 17, 19, 0.22);
  cursor: pointer;
  transition: background 0.2s ease;
}
.video-facade__play:hover { background: rgba(15, 17, 19, 0.38); }
.video-facade__play svg {
  width: 4.5rem;
  height: 4.5rem;
  padding: 1.25rem;
  box-sizing: border-box;
  background: var(--c-brand);
  border-radius: 50%;
  fill: var(--c-brand-ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}
.video-facade__play:hover svg { transform: scale(1.06); }
.video-facade__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------------------
   LIVRE BLANC — encart de référence dans le guide
   ------------------------------------------------------------------------ */
.livre-blanc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
  padding: var(--sp-md);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.livre-blanc__title { font-weight: var(--fw-semibold); }
.livre-blanc__title small { color: var(--c-ink-dim); font-weight: var(--fw-regular); }