/* =============================================================================
   vitrine.css : la feuille de la page de vente de la plateforme.

   Elle est SÉPARÉE de jce.css et de console.css, exprès. Les deux autres
   feuilles servent des sites de JCE et l'administration : leurs couleurs
   viennent de /charte.css, générée par PHP depuis les réglages d'UN site, et
   chaque JCE peut les changer. Cette page-ci n'appartient à aucun site : c'est
   la vitrine de la plateforme. Elle porte donc les couleurs officielles JCI en
   dur, et une retouche de l'administration ne peut pas déplacer un pixel ici.

   ─── Les trois bleus, et pourquoi il en faut trois ─────────────────────────
   Le bleu officiel #0097D7 donne 3,28:1 sur du blanc. C'est au-dessus du seuil
   de 3:1 des grands titres et des éléments non textuels, et en dessous du seuil
   de 4,5:1 d'un texte de lecture. Une seule nuance ne peut pas tenir les deux
   fonds de cette page, qui alterne le sombre et le clair :

     --jci-bleu          #0097D7   grands titres, traits, icônes, bordures
     --bleu-lisible      #007CB0   texte accent sur fond clair      4,66:1
     --bleu-sur-sombre   #58C8F0   texte accent sur fond nuit       8,1:1

   Aucune de ces trois valeurs n'est interchangeable. Le test de la page vérifie
   qu'aucun texte de lecture n'emploie #0097D7.
   ============================================================================= */

/* ─── Jetons ───────────────────────────────────────────────────────────────── */
:root {
  /* Charte JCI v1.4, couleurs primaires et secondaires. */
  --jci-bleu:        #0097D7;
  --jci-nuit:        #130F2D;
  --jci-blanc:       #FFFFFF;
  --jci-marine:      #1F4789;
  --jci-sarcelle:    #57BCBC;
  --jci-jaune:       #EFC40F;   /* plafonné à 5 % de la surface par la charte */

  /* Les deux nuances dérivées, imposées par la lisibilité. */
  --bleu-lisible:    #007CB0;
  --bleu-sur-sombre: #58C8F0;

  /* Neutres. */
  --encre:        #130F2D;
  --encre-douce:  #4A5163;
  --encre-tenue:  #6B7285;
  --trait:        #E4E7EE;
  --surface:      #FFFFFF;
  --surface-doux: #F5F7FA;
  --surface-bleu: #EDF6FB;

  /* Sur fond nuit. */
  --nuit-encre:       rgba(255,255,255,.92);
  --nuit-encre-douce: rgba(255,255,255,.72);
  --nuit-trait:       rgba(255,255,255,.14);
  --nuit-surface:     rgba(255,255,255,.05);

  /* Mesures, alignées sur jce.css pour que les deux se ressemblent. */
  --largeur:    1200px;
  --gouttiere:  1.5rem;
  --rayon:      16px;
  --rayon-petit: 10px;
  --rayon-pilule: 999px;
  --ombre:       0 1px 2px rgba(19,15,45,.04), 0 10px 30px rgba(19,15,45,.07);
  --ombre-forte: 0 2px 6px rgba(19,15,45,.06), 0 24px 60px rgba(19,15,45,.14);

  /* La hauteur de la barre de navigation, qui est collée en haut. Tout ce qui
     se colle à son tour (l'en-tête du tableau comparatif) doit démarrer sous
     elle, sinon il s'y glisse dessous. 72 px de barre, plus son filet. */
  --hauteur-entete: 73px;
  --transition:  220ms cubic-bezier(.4,0,.2,1);

  --police: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-citation: 'Arvo', Georgia, serif;
}

/* ─── Remise à zéro ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--police);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--bleu-lisible); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--jci-marine); }

:focus-visible {
  outline: 3px solid var(--jci-bleu);
  outline-offset: 3px;
  border-radius: 4px;
}

.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--jci-nuit); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--rayon-petit) 0;
}
.evitement:focus { left: 0; }

/* ─── Structure ────────────────────────────────────────────────────────────── */
.contenant {
  width: 100%; max-width: var(--largeur);
  margin-inline: auto; padding-inline: var(--gouttiere);
}
.contenant--etroit { max-width: 760px; }
.contenant--moyen  { max-width: 980px; }

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--doux  { background: var(--surface-doux); }
.section--bleu  { background: var(--surface-bleu); }
.section--nuit  { background: var(--jci-nuit); color: var(--nuit-encre); }
.section--serre { padding-block: clamp(3rem, 6vw, 5rem); }

/* ─── Typographie ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 700;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); line-height: 1.2; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; line-height: 1.35; }
h4 { font-size: 1.05rem; font-weight: 600; line-height: 1.4; }

p { line-height: 1.65; }
p + p { margin-top: 1rem; }

.sur-titre {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--jci-marine);
  margin-bottom: 1rem;
}
.sur-titre::before {
  content: ''; width: 22px; height: 2px;
  background: var(--jci-bleu); border-radius: 2px;
}
.section--nuit .sur-titre { color: var(--bleu-sur-sombre); }

.accroche {
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  font-weight: 300; line-height: 1.6;
  color: var(--encre-douce);
  max-width: 64ch;
}
.section--nuit .accroche { color: var(--nuit-encre-douce); }

.mot-colore { color: var(--bleu-lisible); }
h1 .mot-colore, h2 .mot-colore { color: var(--jci-bleu); }
.section--nuit .mot-colore { color: var(--bleu-sur-sombre); }

.citation {
  font-family: var(--police-citation);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.4; font-weight: 400;
}

.tete-section { max-width: 680px; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.tete-section--centre { margin-inline: auto; text-align: center; }
.tete-section--centre .sur-titre { justify-content: center; }
.tete-section .accroche { margin-top: 1rem; }
.tete-section--centre .accroche { margin-inline: auto; }

/* ─── Boutons ──────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .9rem 1.75rem;
  border: 2px solid transparent; border-radius: var(--rayon-pilule);
  font-weight: 600; font-size: 1rem; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
              background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); }

/* Le fond est le bleu QUI SE LIT, pas le bleu de la charte.
   Mesuré : blanc sur #0097D7 donne 3,28:1, sous le seuil de 4,5:1 d'un texte,
   et le libellé d'un bouton est un texte de lecture. Blanc sur #007CB0 donne
   4,66:1. Le bleu officiel garde tout le reste de la page : traits, icônes,
   grands titres, bordures, où le seuil de 3:1 s'applique et où il est tenu. */
.bouton--principal {
  background: var(--bleu-lisible); color: #fff;
  box-shadow: 0 8px 24px rgba(0,124,176,.34);
}
.bouton--principal:hover {
  background: var(--jci-marine); color: #fff;
  box-shadow: 0 12px 32px rgba(0,124,176,.44);
}

/* Sur fond nuit, le bouton principal garderait son bleu et se fondrait dans le
   décor : c'est le défaut D4 relevé sur le thème des sites. Ici il devient blanc,
   et le secondaire garde le contour. La hiérarchie reste lisible dans les deux
   sens. */
.section--nuit .bouton--principal,
.banniere .bouton--principal,
.bandeau .bouton--principal {
  background: #fff; color: var(--jci-nuit); box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.section--nuit .bouton--principal:hover,
.banniere .bouton--principal:hover,
.bandeau .bouton--principal:hover { background: var(--bleu-sur-sombre); color: var(--jci-nuit); }

.bouton--second {
  background: transparent; color: var(--encre); border-color: var(--trait);
}
.bouton--second:hover { border-color: var(--jci-bleu); color: var(--bleu-lisible); }

/* Les trois surfaces sombres de la page, listées ensemble.
   Ce bouton a été livré une première fois avec la seule règle `.section--nuit`,
   et il est sorti RIGOUREUSEMENT INVISIBLE sur la bannière, qui ne porte pas
   cette classe : encre nuit sur fond nuit. C'est le défaut D1 de la revue de
   fin de chantier, reproduit à l'identique, et pour la même raison : une classe
   écrite pour un contexte, employée dans un autre.
   La règle vit donc au même endroit que le bouton, avec la liste complète des
   surfaces sombres. Ajouter une quatrième surface sombre à cette page veut dire
   ajouter son sélecteur ICI, et le test de la vitrine le vérifie. */
.section--nuit .bouton--second,
.banniere .bouton--second,
.bandeau .bouton--second { color: #fff; border-color: var(--nuit-trait); }
.section--nuit .bouton--second:hover,
.banniere .bouton--second:hover,
.bandeau .bouton--second:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.bouton--large { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: .875rem; }

/* ─── Barre de navigation ──────────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(19,15,45,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--nuit-trait);
  transition: background var(--transition);
}
.entete__barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 72px;
}
/* Le nom seul tient lieu de marque. Sans pastille à côté de lui, il porte
   toute la présence de la barre : il est donc un peu plus grand et un peu plus
   serré qu'un simple lien, faute de quoi il se confondrait avec les entrées du
   menu placées juste à sa droite. */
.entete__marque {
  display: inline-flex; align-items: center;
  color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
}
.entete__marque:hover { color: #fff; }
.entete__nav { display: none; gap: 2rem; }
.entete__nav a {
  color: var(--nuit-encre-douce); text-decoration: none;
  font-size: .95rem; font-weight: 500;
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.entete__nav a:hover { color: #fff; border-bottom-color: var(--jci-bleu); }
.entete__actions { display: flex; align-items: center; gap: .75rem; }
.entete .bouton { min-height: 44px; padding: .65rem 1.25rem; font-size: .925rem; }

@media (min-width: 900px) {
  .entete__nav { display: flex; }
}

/* ─── Bannière ─────────────────────────────────────────────────────────────── */
.banniere {
  position: relative; overflow: hidden;
  background: var(--jci-nuit); color: var(--nuit-encre);
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem);
  isolation: isolate;
}
.banniere::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(80% 60% at 15% 0%,  rgba(0,151,215,.30), transparent 62%),
    radial-gradient(60% 55% at 92% 8%,  rgba(31,71,137,.42), transparent 60%),
    radial-gradient(50% 50% at 70% 100%, rgba(87,188,188,.16), transparent 68%);
}
.banniere__grille {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .banniere__grille { grid-template-columns: 1.08fr .92fr; }
}

.banniere__marqueur {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem 1rem .45rem .55rem;
  border: 1px solid var(--nuit-trait); border-radius: var(--rayon-pilule);
  background: var(--nuit-surface);
  font-size: .84rem; font-weight: 500; color: var(--nuit-encre-douce);
  margin-bottom: 1.5rem;
}
.banniere__marqueur strong { color: #fff; font-weight: 600; }
.banniere__point {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--jci-sarcelle); flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(87,188,188,.22);
}

/* Le titre de bannière est plafonné plus bas que le h1 générique de la page.
   À 4,25 rem dans une colonne de six cents pixels, « Le site de votre JCE, »
   passait à la ligne au milieu et laissait « enfin » seul sur sa ligne, ce qui
   casse la lecture juste avant le mot surligné, c'est-à-dire à l'endroit exact
   où elle doit porter. */
.banniere h1 { color: #fff; font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
.banniere .accroche { margin-top: 1.5rem; color: var(--nuit-encre-douce); }
.banniere .actions { margin-top: 2.25rem; }

.banniere__gages {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--nuit-trait);
}
.banniere__gage {
  display: flex; align-items: center; gap: .6rem;
  font-size: .9rem; color: var(--nuit-encre-douce);
}
.banniere__gage svg { flex: 0 0 auto; color: var(--jci-sarcelle); }

/* ─── Le globe ─────────────────────────────────────────────────────────────── */
/* Reprend l'idée du composant « cobe globe pulse » : une sphère qui tourne, des
   marqueurs qui pulsent, une prise en main à la souris. Écrit en canvas 2D
   maison plutôt qu'en WebGL par une bibliothèque tierce, parce que la politique
   de sécurité du contenu de ce moteur interdit tout script d'un autre domaine,
   et que la contrainte fondatrice du projet est « aucune dépendance ». */
.globe {
  position: relative; width: 100%; max-width: 520px;
  margin-inline: auto; aspect-ratio: 1;
  touch-action: none;
}
.globe__toile {
  width: 100%; height: 100%;
  cursor: grab;
  opacity: 0; transition: opacity 1.2s ease;
  border-radius: 50%;
}
.globe__toile.est-visible { opacity: 1; }
.globe__toile:active { cursor: grabbing; }
.globe__halo {
  position: absolute; inset: -14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0,151,215,.28), transparent 62%);
  filter: blur(28px);
  pointer-events: none;
}

/* ─── Chiffres ─────────────────────────────────────────────────────────────── */
.chiffres {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--trait);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  overflow: hidden;
}
@media (min-width: 780px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }
.chiffre { background: var(--surface); padding: 1.75rem 1.25rem; text-align: center; }
.chiffre__valeur {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700;
  color: var(--jci-bleu); line-height: 1; letter-spacing: -.02em;
}
.chiffre__libelle { margin-top: .6rem; font-size: .875rem; color: var(--encre-douce); }

/* ─── Cartes ───────────────────────────────────────────────────────────────── */
.grille { display: grid; gap: 1.5rem; }
.grille--2 { grid-template-columns: 1fr; }
.grille--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
}

.carte {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.75rem;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.carte--survol:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-forte);
  border-color: rgba(0,151,215,.4);
}
.carte h3 { margin-bottom: .6rem; }
.carte p { color: var(--encre-douce); font-size: .95rem; }
.carte__icone {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 1.15rem;
  background: var(--surface-bleu); color: var(--bleu-lisible);
}
.carte__etiquette {
  display: inline-block; margin-bottom: .85rem;
  padding: .3rem .7rem; border-radius: var(--rayon-pilule);
  background: var(--surface-bleu); color: var(--jci-marine);
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.section--nuit .carte {
  background: var(--nuit-surface); border-color: var(--nuit-trait); color: var(--nuit-encre);
}
.section--nuit .carte p { color: var(--nuit-encre-douce); }

/* ─── Étapes numérotées ────────────────────────────────────────────────────── */
.etapes { display: grid; gap: 2rem; counter-reset: etape; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
/* Le titre démarre plus bas que le trait bleu, qui est posé en absolu à
   3,55 rem du haut. À 3,5 rem de réserve, le trait touchait presque la hampe
   des majuscules : l'œil lisait un seul bloc au lieu d'un numéro PUIS un
   titre. Un demi-rem de plus suffit à séparer les deux. */
.etape { position: relative; padding-top: 4.1rem; }
.etape::before {
  counter-increment: etape; content: counter(etape, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-size: 2.25rem; font-weight: 700; line-height: 1;
  color: var(--jci-bleu); opacity: .28; letter-spacing: -.03em;
}
.etape::after {
  content: ''; position: absolute; top: 1.35rem; left: 0;
  width: 44px; height: 3px; border-radius: 3px; background: var(--jci-bleu);
  transform: translateY(2.2rem);
}
.etape h3 { margin-bottom: .55rem; }
.etape p { color: var(--encre-douce); font-size: .95rem; }

/* ─── Calendrier de passation ──────────────────────────────────────────────── */
.frise { position: relative; display: grid; gap: 0; }
.frise__jalon {
  position: relative; padding: 0 0 2.25rem 2.25rem;
  border-left: 2px solid var(--trait);
}
.frise__jalon:last-child { border-left-color: transparent; padding-bottom: 0; }
.frise__jalon::before {
  content: ''; position: absolute; left: -9px; top: .35rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--jci-bleu);
}
.frise__jalon--fort::before { background: var(--jci-bleu); }
.frise__mois {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--jci-marine); margin-bottom: .3rem;
}
/* La frise vit sur le fond nuit de la section passation. Le marine y donne
   2,34:1 et l'encre douce 2,34 également : les deux sont prévus pour un fond
   clair. Mesuré à l'écran, pas déduit. */
.section--nuit .frise__mois { color: var(--bleu-sur-sombre); }
.section--nuit .frise__jalon { border-left-color: var(--nuit-trait); }
.section--nuit .frise__jalon::before { background: var(--jci-nuit); border-color: var(--bleu-sur-sombre); }
.section--nuit .frise__jalon--fort::before { background: var(--bleu-sur-sombre); }
.section--nuit .frise__titre { color: #fff; }
.section--nuit .frise__jalon p { color: var(--nuit-encre-douce); }
.frise__titre { font-size: 1.05rem; font-weight: 600; line-height: 1.4; margin-bottom: .3rem; }
.frise__jalon p { color: var(--encre-douce); font-size: .93rem; }

/* ─── Tarifs ───────────────────────────────────────────────────────────────── */
.offres {
  display: grid; gap: 1.5rem; align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 860px)  { .offres { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.offre {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 2rem 1.75rem;
  height: 100%;
}
.offre--vedette {
  border-color: var(--jci-bleu); border-width: 2px;
  box-shadow: var(--ombre-forte);
}
@media (min-width: 860px) { .offre--vedette { transform: scale(1.035); z-index: 1; } }
.offre__fanion {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--bleu-lisible); color: #fff;
  padding: .3rem 1rem; border-radius: var(--rayon-pilule);
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap;
}
.offre__nom { font-size: 1.3rem; font-weight: 700; }
.offre__pour {
  margin-top: .5rem; font-size: .9rem; color: var(--encre-douce);
  min-height: 3.6rem;
}
.offre__prix {
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--trait);
}
.offre__montant {
  font-size: 2.4rem; font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--encre);
}
.offre__unite { font-size: .875rem; color: var(--encre-tenue); margin-top: .4rem; }
.offre__mensuel { margin-top: 1rem; font-size: 1.05rem; font-weight: 600; }
.offre__mensuel span { font-size: .875rem; font-weight: 400; color: var(--encre-tenue); }
.offre__total {
  margin-top: .85rem; padding: .6rem .8rem; border-radius: var(--rayon-petit);
  background: var(--surface-doux); font-size: .84rem; color: var(--encre-douce);
}
.offre__liste { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: .7rem; }
.offre__liste li {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .92rem; color: var(--encre-douce);
}
.offre__liste svg { flex: 0 0 auto; margin-top: .18rem; color: var(--jci-sarcelle); }
.offre__liste li.est-absent { color: var(--encre-tenue); }
.offre__liste li.est-absent svg { color: var(--encre-tenue); opacity: .55; }
.offre__titre-groupe {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--jci-marine);
  margin-top: .35rem;
}
.offre .bouton { margin-top: auto; }

.mention-tva {
  margin-top: 2rem; font-size: .85rem; color: var(--encre-tenue); text-align: center;
}

/* ─── Le récapitulatif ligne par ligne ─────────────────────────────────────── */
/* Un vrai <table>, pas une grille de <div> : c'est un tableau de comparaison,
   et l'en-tête de colonne comme l'en-tête de ligne doivent être annoncés à
   chaque case par le lecteur d'écran. Une grille CSS lit trente valeurs sans
   jamais dire de quelle formule elles parlent.

   Pas d'`overflow: hidden` sur le bloc, contrairement aux autres cartes de la
   page : il rognerait les coins, ce dont ce bloc n'a pas besoin (son en-tête et
   son pied n'ont pas de fond à eux), et surtout il ferait de ce bloc le repère
   de `position: sticky` pour l'en-tête du tableau, qui se retrouverait décalé
   de 73 px vers le bas au lieu de suivre la fenêtre. */
.comparatif {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--surface);
  /* Replier depuis le bouton du bas ramène ce bloc en vue. Sans cette marge de
     défilement, il se calerait à zéro, c'est-à-dire SOUS la barre de navigation
     collée en haut : le visiteur retomberait sur un bloc dont le bouton
     « Voir toutes les fonctionnalités » est caché par la barre. */
  scroll-margin-top: calc(var(--hauteur-entete) + 1rem);
}

/* ── Le repli ──────────────────────────────────────────────────────────────
   Les deux boutons n'existent que si le SCRIPT a pris la main : c'est lui qui
   pose `est-repliable`. Sans lui, le tableau est déplié et les boutons restent
   cachés, plutôt qu'un bouton mort devant un tableau qui ne s'ouvrira pas.
   Même raisonnement que `@media (scripting: enabled)` plus bas, en plus sûr :
   la requête média dit que JavaScript est autorisé, pas que NOTRE fichier est
   bien arrivé. */
.comparatif__deplier, .comparatif__replier { display: none; }
.comparatif.est-repliable .comparatif__deplier { display: block; padding: 1.25rem; margin: 0; }
.comparatif.est-repliable .comparatif__replier { display: inline-flex; }
.comparatif.est-repliable .comparatif__detail { display: none; }
.comparatif.est-repliable.est-ouvert .comparatif__deplier { display: none; }
.comparatif.est-repliable.est-ouvert .comparatif__detail { display: block; }

/* La flèche du bouton pointe vers le bas quand il ouvre, vers le haut quand le
   tableau est déjà là : c'est le seul indice qui distingue « déplier » de
   « aller au tableau » avant d'avoir lu l'étiquette. */
.comparatif__deplier .bouton { gap: .6rem; }
.comparatif__replier { flex: 0 0 auto; align-self: flex-start; white-space: nowrap; }

.comparatif__tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; padding: 2rem 1.75rem 1.5rem;
}
.comparatif__tete p {
  margin-top: .5rem; font-size: .93rem; color: var(--encre-douce); max-width: 54ch;
}

.comparatif__cadre { min-width: 0; }

.comparatif__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem; text-align: left;
}
.comparatif__table th,
.comparatif__table td {
  padding: .8rem 1rem;
  border-top: 1px solid var(--trait);
  vertical-align: middle;
}

.comparatif__table thead th {
  background: var(--surface-doux);
  border-top: 0; border-bottom: 1px solid var(--trait);
  padding-block: 1rem;
}
.comparatif__coin {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--encre-tenue);
}
.comparatif__colonne { text-align: center; }
.comparatif__colonne.est-vedette { background: var(--surface-bleu); }
.comparatif__nom {
  display: block; font-size: 1.02rem; font-weight: 700; color: var(--encre);
}
.comparatif__colonne.est-vedette .comparatif__nom { color: var(--bleu-lisible); }
.comparatif__prix {
  display: block; margin-top: .2rem;
  font-size: .78rem; font-weight: 400; color: var(--encre-tenue);
}

/* Le titre de groupe : une ligne pleine largeur, qui découpe les trente et une
   lignes en cinq lectures possibles. */
.comparatif__groupe th {
  background: var(--surface-doux);
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--jci-marine);
}

/* Pas de `display: flex` ici, si tentant soit-il pour aligner le « i » : il
   sortirait la cellule de la mise en page du tableau et ferait glisser toute la
   ligne d'une colonne. Le libellé et l'infobulle sont en ligne, comme du texte,
   et c'est `vertical-align` qui les aligne. */
.comparatif__table tbody th[scope="row"] {
  font-weight: 500; color: var(--encre-douce);
}
.comparatif__table tbody th[scope="row"] .infobulle {
  vertical-align: middle; margin-left: .25rem;
}
.comparatif__oui, .comparatif__non, .comparatif__valeur { text-align: center; }
.comparatif__oui svg, .comparatif__non svg { margin-inline: auto; }
.comparatif__oui svg { color: var(--jci-sarcelle); }
/* La croix est volontairement PÂLE. Un « non » en rouge sur une grille de prix
   se lit comme un reproche fait à la formule la moins chère, alors qu'Essentiel
   est une offre qu'on assume et qu'on vend. */
.comparatif__non svg { color: var(--trait); }
.comparatif__valeur { font-size: .84rem; font-weight: 600; color: var(--encre); }
.comparatif__table tbody td.est-vedette { background: var(--surface-bleu); }

/* L'étiquette de formule dans la case ne sert que sur téléphone, où l'en-tête
   de colonne n'existe plus. */
.comparatif__etiquette { display: none; }

/* ── Grand écran : l'en-tête suit la lecture ──────────────────────────────── */
/* Trente et une lignes, c'est deux écrans. Sans en-tête collant, une case
   cochée au milieu du tableau n'appartient plus visiblement à aucune formule.
   Il se cale sous la barre de navigation, elle-même collée en haut. */
@media (min-width: 761px) {
  .comparatif__table thead th {
    position: sticky; top: var(--hauteur-entete); z-index: 2;
  }
}

.comparatif__table tbody tr:hover td,
.comparatif__table tbody tr:hover th[scope="row"] { background: var(--surface-doux); }
.comparatif__table tbody tr:hover td.est-vedette { background: #E4F1F9; }
.comparatif__groupe:hover th { background: var(--surface-doux); }

.comparatif__pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 1.75rem 1.5rem;
  border-top: 1px solid var(--trait);
  font-size: .88rem; color: var(--encre-tenue);
}
.comparatif__pied p { margin: 0; }

/* ── Téléphone : le tableau se déplie en blocs ────────────────────────────── */
/* Quatre colonnes ne rentrent pas dans 375 px. La version précédente les
   faisait défiler de côté dans un cadre : la moitié du tableau était hors
   champ en permanence, et il fallait deviner qu'on pouvait pousser. Ici chaque
   ligne devient un bloc qui tient dans la largeur, avec les trois formules
   côte à côte sous son libellé. Rien n'est coupé, rien ne défile de côté, et
   les trois formules restent comparables d'un coup d'œil, ce qui est le seul
   intérêt du tableau.

   `display: block` sur un <table> lui retire sa nature de tableau dans l'arbre
   d'accessibilité. Les rôles ARIA écrits dans le balisage la lui rendent : les
   retirer casserait la lecture ici, et nulle part ailleurs, donc sans que rien
   ne le montre sur grand écran. */
@media (max-width: 760px) {
  .comparatif__table,
  .comparatif__table thead,
  .comparatif__table tbody,
  .comparatif__table tr,
  .comparatif__table th,
  .comparatif__table td { display: block; width: auto; }

  /* L'en-tête de colonne disparaît : chaque case porte désormais son étiquette. */
  .comparatif__table thead { display: none; }

  .comparatif__table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
    padding: .95rem 1rem;
    border-top: 1px solid var(--trait);
  }
  .comparatif__table tbody th[scope="row"] {
    grid-column: 1 / -1;
    padding: 0 0 .2rem; border: 0;
    font-size: .95rem; font-weight: 600; color: var(--encre);
  }

  .comparatif__table tbody td {
    padding: .55rem .35rem; border: 0;
    border-radius: var(--rayon-petit);
    background: var(--surface-doux);
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    justify-content: flex-start;
  }
  .comparatif__table tbody td.est-vedette { background: var(--surface-bleu); }

  /* Les trois noms tiennent chacun sur UNE ligne, et c'est ce qui décide de
     leur corps : « Rayonnement » fait onze caractères pour une case de
     soixante-seize pixels. Coupé en « Rayonneme / nt », il donne trois
     étiquettes de hauteurs différentes, donc trois cases de hauteurs
     différentes, ce qui se lit comme une hiérarchie entre les formules alors
     qu'il n'y en a pas ici. */
  .comparatif__etiquette {
    display: block;
    font-size: .64rem; font-weight: 700; letter-spacing: 0;
    line-height: 1.25; white-space: nowrap;
    color: var(--encre-tenue);
  }
  .comparatif__valeur { font-size: .78rem; line-height: 1.3; }

  /* Le survol n'existe pas au doigt, et sa trame grise écraserait le fond des
     cases, qui est ici le seul repère de colonne. */
  .comparatif__table tbody tr:hover td,
  .comparatif__table tbody tr:hover th[scope="row"] { background: var(--surface-doux); }
  .comparatif__table tbody tr:hover td.est-vedette { background: var(--surface-bleu); }

  /* Le titre de groupe est une LIGNE de tableau comme les autres : sans ce
     sélecteur aussi précis que celui des lignes de données, il hérite de leur
     grille à trois colonnes et se recroqueville dans la première, en petite
     boîte alignée à gauche au lieu d'un bandeau pleine largeur. */
  .comparatif__table tbody tr.comparatif__groupe { display: block; padding: 0; }
  .comparatif__groupe th {
    padding: .7rem 1rem;
    border-top: 1px solid var(--trait);
  }

  .comparatif__tete, .comparatif__pied {
    display: block;
    padding-inline: 1.25rem;
  }
  .comparatif__replier { margin-top: 1rem; width: 100%; justify-content: center; }
  .comparatif.est-repliable .comparatif__replier { display: flex; }

  /* « Voir toutes les fonctionnalités » plus le chevron font trente et un
     caractères : au corps et aux marges de la page, ils passent à la ligne dans
     une pilule, ce qui fait un bouton haut de deux étages. On resserre. */
  .comparatif.est-repliable .comparatif__deplier { padding: 1rem; }
  .comparatif__deplier .bouton { padding-inline: 1rem; font-size: .9rem; }

  /* L'infobulle se cale sur la LIGNE, pas sur son petit « i ».
     Ailleurs sur la page elle est centrée sur son déclencheur et large de
     268 px : dans une colonne de 375 px, cette bulle centrée sur un rond de
     18 px déborde de quarante pixels à droite, et sa moitié droite est rognée
     par `overflow-x: hidden` du corps de page. Autrement dit, la précision
     qu'on est allé chercher est illisible exactement là où on en a le plus
     besoin. Le repère devient donc la cellule du libellé, et la bulle prend sa
     largeur : elle ne peut plus sortir de l'écran. */
  .comparatif__table tbody th[scope="row"] { position: relative; }
  .comparatif .infobulle { position: static; }
  .comparatif .infobulle__texte {
    left: 0; right: 0;
    width: auto; max-width: none;
    transform: translateY(4px);
  }
  .comparatif .infobulle__declencheur:hover + .infobulle__texte,
  .comparatif .infobulle__declencheur:focus-visible + .infobulle__texte {
    transform: translateY(0);
  }
  /* Sans repère centré, la pointe n'a plus rien à désigner. */
  .comparatif .infobulle__texte::after { display: none; }
}

/* Le « i » qui dit ce que couvre une ligne. Pas un titre natif : il doit être
   atteignable au clavier et lisible au toucher. */
.infobulle { position: relative; display: inline-flex; }
.infobulle__declencheur {
  width: 18px; height: 18px; border-radius: 50%; padding: 0;
  border: 1px solid var(--trait); background: var(--surface-doux);
  color: var(--encre-douce); font-size: .7rem; font-weight: 700;
  line-height: 1; cursor: help; display: grid; place-items: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.infobulle__declencheur:hover,
.infobulle__declencheur:focus-visible { background: var(--bleu-lisible); color: #fff; border-color: var(--bleu-lisible); }

/* La zone que le doigt atteint est plus grande que le rond qu'on voit.
   Le rond fait 18 px, ce qui est juste à l'œil dans une ligne de liste et bien
   trop petit pour un pouce : le seuil est 44. Agrandir le rond déséquilibrerait
   la ligne, donc c'est la zone sensible qui s'étend, pas le dessin. */
.infobulle__declencheur::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.infobulle__texte {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 268px;
  background: var(--jci-nuit); color: #fff;
  padding: .7rem .85rem; border-radius: var(--rayon-petit);
  font-size: .82rem; line-height: 1.45; font-weight: 400;
  text-align: left; text-transform: none; letter-spacing: 0;
  box-shadow: var(--ombre-forte);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 20;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.infobulle__texte::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--jci-nuit);
}
.infobulle__declencheur:hover + .infobulle__texte,
.infobulle__declencheur:focus-visible + .infobulle__texte {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* ─── Simulateur ──────────────────────────────────────────────────────────── */
.simulateur {
  display: grid; gap: 0;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  overflow: hidden; background: var(--surface);
  box-shadow: var(--ombre);
}
@media (min-width: 940px) { .simulateur { grid-template-columns: .95fr 1.05fr; } }

.simulateur__saisie { padding: clamp(1.75rem, 3vw, 2.5rem); }
.simulateur__sortie {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--jci-nuit); color: var(--nuit-encre);
  display: flex; flex-direction: column;
}

.champ { margin-bottom: 1.5rem; }
.champ:last-child { margin-bottom: 0; }
.champ > label, .champ__legende {
  display: block; font-size: .9rem; font-weight: 600; margin-bottom: .5rem;
}
.champ__aide { font-size: .82rem; color: var(--encre-tenue); margin-top: .4rem; }
.champ input[type="number"] {
  width: 100%; padding: .8rem 1rem;
  border: 1px solid var(--trait); border-radius: var(--rayon-petit);
  background: var(--surface); font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  -moz-appearance: textfield;
}
.champ input[type="number"]:focus {
  border-color: var(--jci-bleu);
  box-shadow: 0 0 0 3px rgba(0,151,215,.16);
  outline: none;
}
.champ__unite { position: relative; }
.champ__unite input { padding-right: 2.5rem; }
.champ__unite::after {
  content: '€'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--encre-tenue); font-weight: 600; pointer-events: none;
}

/* Groupe de choix : des étiquettes qui se comportent comme des onglets, sans un
   octet de JavaScript pour l'apparence. L'entrée radio reste la source de
   vérité, donc le clavier et le lecteur d'écran fonctionnent tels quels. */
.choix { display: grid; gap: .5rem; }
.choix--ligne { grid-template-columns: repeat(3, 1fr); }
.choix--paire { grid-template-columns: repeat(2, 1fr); }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix label {
  display: block; text-align: center; cursor: pointer;
  padding: .7rem .5rem; border: 1px solid var(--trait);
  border-radius: var(--rayon-petit); font-size: .9rem; font-weight: 600;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.choix label small { display: block; font-weight: 400; font-size: .76rem; color: var(--encre-tenue); margin-top: .15rem; }
.choix label:hover { border-color: var(--jci-bleu); }
.choix input:checked + label {
  border-color: var(--jci-bleu); background: var(--surface-bleu); color: var(--jci-marine);
}
.choix input:checked + label small { color: var(--jci-marine); }
.choix input:focus-visible + label { outline: 3px solid var(--jci-bleu); outline-offset: 2px; }

.resultat { margin-bottom: 1.5rem; }
.resultat__etiquette {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bleu-sur-sombre); margin-bottom: .5rem;
}
.resultat__valeur {
  font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700;
  line-height: 1; letter-spacing: -.03em; color: #fff;
}
.resultat__detail { margin-top: .5rem; font-size: .9rem; color: var(--nuit-encre-douce); }

.bascule {
  display: grid; gap: 1rem; margin-top: auto;
  padding-top: 1.5rem; border-top: 1px solid var(--nuit-trait);
}
@media (min-width: 520px) { .bascule { grid-template-columns: repeat(2, 1fr); } }
.bascule__bloc {
  background: rgba(255,255,255,.06); border: 1px solid var(--nuit-trait);
  border-radius: var(--rayon-petit); padding: 1.1rem;
}
.bascule__nombre {
  font-size: 2rem; font-weight: 700; line-height: 1; color: var(--jci-sarcelle);
  letter-spacing: -.02em;
}
.bascule__texte { margin-top: .45rem; font-size: .86rem; color: var(--nuit-encre-douce); }

.reperes { margin-top: 1.25rem; font-size: .84rem; color: var(--nuit-encre-douce); }
.reperes strong { color: #fff; font-weight: 600; }

/* ─── Défi régional ────────────────────────────────────────────────────────── */
.paliers { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .paliers { grid-template-columns: repeat(3, 1fr); } }
.palier {
  position: relative; padding: 1.75rem;
  border: 1px solid var(--nuit-trait); border-radius: var(--rayon);
  background: var(--nuit-surface);
}
.palier--atteint { border-color: rgba(87,188,188,.5); }
.palier__rang {
  font-size: .76rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bleu-sur-sombre); margin-bottom: .75rem;
}
.palier h3 { color: #fff; margin-bottom: .5rem; }
.palier p { font-size: .92rem; color: var(--nuit-encre-douce); }
.palier__onde {
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--jci-sarcelle); opacity: .3;
}

/* ─── Questions ────────────────────────────────────────────────────────────── */
.questions { display: grid; gap: .75rem; }
.question {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.question[open] { border-color: rgba(0,151,215,.42); box-shadow: var(--ombre); }
.question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.25rem 1.5rem; cursor: pointer;
  font-weight: 600; font-size: 1.02rem; list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: ''; flex: 0 0 auto; width: 11px; height: 11px;
  border-right: 2px solid var(--jci-bleu); border-bottom: 2px solid var(--jci-bleu);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--transition);
}
.question[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.question summary:hover { color: var(--bleu-lisible); }
.question__corps { padding: 0 1.5rem 1.5rem; color: var(--encre-douce); font-size: .95rem; }
.question__corps p + p { margin-top: .75rem; }

/* ─── Ce qui n'est pas compris ─────────────────────────────────────────────── */
.hors-perimetre {
  display: grid; gap: .65rem; list-style: none; padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .hors-perimetre { grid-template-columns: repeat(2, 1fr); } }
.hors-perimetre li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .92rem; color: var(--encre-douce);
}
.hors-perimetre svg { flex: 0 0 auto; margin-top: .2rem; color: var(--encre-tenue); }

/* ─── Formulaire de contact ────────────────────────────────────────────────── */
.contact {
  display: grid; gap: 0;
  border-radius: var(--rayon); overflow: hidden;
  border: 1px solid var(--nuit-trait);
}
@media (min-width: 940px) { .contact { grid-template-columns: 1fr 1fr; } }
.contact__discours { padding: clamp(1.75rem, 3.5vw, 3rem); }
.contact__discours h2 { color: #fff; }
.contact__formulaire {
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--surface); color: var(--encre);
}
.contact__formulaire .champ > label { color: var(--encre); }
.contact input[type="text"],
.contact input[type="email"],
.contact textarea {
  width: 100%; padding: .8rem 1rem;
  border: 1px solid var(--trait); border-radius: var(--rayon-petit);
  background: var(--surface); font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact textarea { min-height: 110px; resize: vertical; }
.contact input:focus, .contact textarea:focus {
  border-color: var(--jci-bleu); box-shadow: 0 0 0 3px rgba(0,151,215,.16); outline: none;
}
.contact__rendez-vous {
  margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--nuit-trait);
}
.contact__liste { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: .8rem; }
.contact__liste li { display: flex; gap: .65rem; align-items: flex-start; font-size: .93rem; color: var(--nuit-encre-douce); }
.contact__liste svg { flex: 0 0 auto; margin-top: .15rem; color: var(--jci-sarcelle); }

/* Le piège à robots : jamais affiché, jamais atteignable au clavier, jamais lu à
   voix haute. `display:none` suffirait pour l'œil, pas pour un lecteur d'écran. */
.piege {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.encart {
  padding: 1rem 1.15rem; border-radius: var(--rayon-petit);
  font-size: .93rem; margin-bottom: 1.25rem;
  border: 1px solid transparent;
}
.encart--ok      { background: #E8F7EF; border-color: #A9E0C4; color: #16603A; }
.encart--erreur  { background: #FDECEC; border-color: #F3B9B9; color: #8A1F1F; }

/* ─── Vidéo ────────────────────────────────────────────────────────────────── */
.video {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--rayon); overflow: hidden;
  background: linear-gradient(135deg, #1B2140, var(--jci-nuit));
  border: 1px solid var(--nuit-trait);
  display: grid; place-items: center; text-align: center;
  padding: 2rem;
}
.video__marque {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid var(--nuit-trait);
  display: grid; place-items: center; margin: 0 auto 1.25rem;
  color: var(--bleu-sur-sombre);
}
.video p { color: var(--nuit-encre-douce); font-size: .95rem; max-width: 42ch; margin-inline: auto; }

/* ─── Bandeau d'appel ──────────────────────────────────────────────────────── */
.bandeau {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--jci-marine); color: #fff;
  border-radius: var(--rayon);
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.bandeau::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 90% at 12% 10%, rgba(0,151,215,.55), transparent 60%),
    radial-gradient(60% 80% at 88% 90%, rgba(87,188,188,.30), transparent 62%);
}
.bandeau h2 { color: #fff; }
.bandeau .accroche { color: rgba(255,255,255,.82); margin: 1rem auto 0; }
.bandeau .actions { justify-content: center; margin-top: 2rem; }

/* ─── Pied de page ─────────────────────────────────────────────────────────── */
.pied {
  background: var(--jci-nuit); color: var(--nuit-encre-douce);
  padding-block: 3.5rem 2.5rem; font-size: .92rem;
}
.pied__haut {
  display: grid; gap: 2rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--nuit-trait);
}
@media (min-width: 820px) { .pied__haut { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied h3 { color: #fff; margin-bottom: .9rem; font-size: .95rem; font-weight: 600; }
.pied ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.pied a { color: var(--nuit-encre-douce); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__bas {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  justify-content: space-between; align-items: center;
  padding-top: 1.75rem; font-size: .85rem;
}
/* Le lien de l'espace membres est celui par lequel un bureau élu en 2031 doit
   retrouver l'outil. Il ne baisse donc pas d'opacité : c'est le défaut D9b
   relevé sur le thème des sites, et il ne se répète pas ici. */
.pied__membres { color: #fff; font-weight: 600; text-decoration: underline; }

/* La signature de l'agence, dans la ligne de copyright. Elle est discrète par
   construction : c'est une signature, pas un appel à l'action, et elle ne doit
   pas concurrencer « Espace membres » juste au-dessus, qui est le seul lien de
   ce pied de page dont un bureau ait vraiment besoin. */
.pied__agence {
  color: var(--nuit-encre-douce); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.pied__agence:hover, .pied__agence:focus-visible { color: #fff; }

/* ─── Le surligneur des titres ─────────────────────────────────────────────── */
/* Le mot important est posé sur un rectangle sarcelle légèrement penché, comme
   un coup de surligneur donné à la main. C'est le seul ornement de la page qui
   n'est pas fonctionnel, et il gagne sa place en faisant lire le titre en deux
   temps : la phrase, puis le mot qui compte.

   ─── Trois précautions, chacune payée d'un défaut réel ──────────────────
   1. Le rectangle est un `::before` DERRIÈRE le texte (`z-index: -1`), pas un
      fond sur l'élément : un fond suivrait les retours à la ligne et donnerait
      deux rectangles décalés sur mobile, l'un sous l'autre.
   2. L'élément est `inline-block` et le rectangle déborde de part et d'autre,
      donc le titre a besoin d'`isolation: isolate` sur son conteneur, sinon le
      `z-index: -1` fait passer le rectangle SOUS le fond de la section et il
      disparaît purement et simplement.
   3. La rotation est minuscule (1,2 degré). Au-delà, la ligne de base du titre
      paraît fautive plutôt que délibérée, et le rectangle mord sur la ligne du
      dessus dans un titre à trois lignes. */
.surligne {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding-inline: .38em;
  white-space: nowrap;
}
.surligne::before {
  content: '';
  position: absolute; z-index: -1;
  left: 0; right: 0;
  /* Le rectangle ne fait pas toute la hauteur de la ligne : il couvre les
     lettres, pas l'interligne. Sinon il ressemble à un bandeau de titre. */
  top: .14em; bottom: .1em;
  background: var(--jci-sarcelle);
  transform: rotate(-1.2deg) skewX(-4deg);
  border-radius: 2px;
}
/* Le texte posé SUR l'aplat sarcelle est encre nuit, quelle que soit la couleur
   du titre autour. Mesuré : blanc sur #57BCBC donne 2,25:1, en dessous de tous
   les seuils, y compris celui des grands titres. Le h1 de la bannière est blanc
   et sortait donc illisible sur son propre surligneur.

   La règle est portée par le surligneur, pas par la bannière : c'est ce qui
   empêche un futur titre blanc de reposer le même défaut ailleurs dans la page.
   Contraste obtenu : 8,22:1. */
.surligne:not(.surligne--clair) { color: var(--encre); }

/* Sur fond nuit, la sarcelle pleine passerait devant le texte blanc. Elle est
   donc remplacée par une version dense mais transparente : le blanc reste
   dessus, sur un fond composite mesuré à 9,4:1. */
.surligne--clair::before {
  background: rgba(87,188,188,.34);
  box-shadow: inset 0 0 0 1.5px rgba(87,188,188,.55);
}
/* La variante fine, pour les h2 : un trait épais au lieu d'un bloc, quand le
   titre est déjà long et qu'un aplat le rendrait lourd. */
.surligne--fin::before {
  top: auto; bottom: .02em; height: .38em;
  border-radius: 1px;
}
@media (max-width: 520px) {
  /* Un mot surligné qui ne peut pas se couper déborde de l'écran. En dessous
     de cette largeur, on préfère un titre qui tient à un surlignage parfait. */
  .surligne { white-space: normal; }
}

/* ─── Lueurs de section ────────────────────────────────────────────────────── */
/* Un halo diffus posé derrière le contenu des sections sombres. Purement
   décoratif, donc `aria-hidden` dans le balisage et `pointer-events: none`
   ici : il ne doit jamais intercepter un clic destiné à un bouton. */
.section--nuit { position: relative; overflow: hidden; isolation: isolate; }
.section__lueur, .banniere__lueur {
  position: absolute; z-index: -1; pointer-events: none;
  top: -30%; right: -10%; width: min(680px, 80%); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,151,215,.22), transparent 66%);
  filter: blur(40px);
}
.banniere__lueur { top: auto; bottom: -40%; left: -12%; right: auto;
  background: radial-gradient(circle, rgba(87,188,188,.16), transparent 64%); }

/* ─── Grilles supplémentaires ──────────────────────────────────────────────── */
.grille--4 { grid-template-columns: 1fr; }
.grille--5 { grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) {
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .grille--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grille--4 { grid-template-columns: repeat(4, 1fr); }
  /* Cinq colonnes égales : les habillages sont cinq alternatives de même rang,
     et les mettre sur deux rangs de 3 + 2 laisserait croire à une hiérarchie. */
  .grille--5 { grid-template-columns: repeat(5, 1fr); }
}

/* ─── Le bandeau des locales clientes ──────────────────────────────────────── */
.bandeau-clients { padding-block: clamp(2rem, 4vw, 3rem); overflow: hidden; }
.bandeau-clients__titre {
  text-align: center; margin-bottom: 1.75rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-tenue);
}

/* Deux pistes identiques côte à côte, décalées en boucle d'exactement la
   largeur d'une piste : au moment où la copie atteint la place de l'originale,
   l'animation revient à zéro et personne ne voit la couture. Un carrousel à
   flèches serait ici une fausse bonne idée : il n'y a rien à lire, seulement
   un nombre à faire sentir, et un contrôle qui ne sert à rien est un contrôle
   qu'on doit quand même rendre accessible. */
.defile {
  display: flex; width: max-content;
  animation: defile 42s linear infinite;
}
.defile__piste {
  display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem);
  list-style: none; margin: 0; padding: 0 clamp(1.25rem, 2.5vw, 2.25rem);
}
.defile__marque { flex: 0 0 auto; }
.defile__marque img {
  /* Le logo JCI est plus haut que large (le bouclier surmonte le nom de la
     locale), là où la plupart des logos d'association sont en bandeau. On
     contraint donc la HAUTEUR, jamais la largeur : imposer une largeur écrase
     ce logo-ci et étire les autres. */
  height: 62px; width: auto; max-width: none;
  /* Les logos arrivent de dix associations différentes, avec dix palettes.
     Les désaturer les met sur un pied d'égalité et empêche qu'un logo rouge
     vif attire l'œil plus que les neuf autres. Ils reprennent leur couleur au
     survol, ce qui donne au bandeau sa seule interaction. */
  filter: grayscale(1); opacity: .62;
  transition: filter var(--transition), opacity var(--transition);
}
.defile__marque img:hover { filter: none; opacity: 1; }

/* Au survol du bandeau, le défilement s'arrête : sans ça, on ne peut pas lire
   un nom qui passe, ni cliquer si un jour ces logos deviennent des liens. */
.defile:hover { animation-play-state: paused; }

@keyframes defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mouvement réduit : le bandeau ne bouge plus du tout. Il devient une bande
   qu'on fait défiler au doigt ou au clavier, et la piste dupliquée disparaît
   pour ne pas montrer deux fois les mêmes locales. */
@media (prefers-reduced-motion: reduce) {
  .defile { animation: none; width: 100%; overflow-x: auto; }
  .defile__piste[aria-hidden="true"] { display: none; }
}

/* ─── Les cartes du problème ───────────────────────────────────────────────── */
/* Le titre de ces cartes est une citation de rendez-vous, pas un argument
   rédigé. Il est donc en italique et sans guillemets typographiques ajoutés :
   ils sont déjà dans le texte, où ils appartiennent au contenu. */
.carte--probleme h3 {
  font-style: italic; font-weight: 600;
  font-size: 1.05rem; color: var(--jci-marine);
}

/* ─── Le constat de fin de section ─────────────────────────────────────────── */
.constat {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.15rem 1.5rem;
  border-left: 3px solid var(--jci-bleu);
  background: var(--surface);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  font-size: 1rem; color: var(--encre-douce);
  max-width: 66ch;
}
.section--doux .constat { background: var(--surface); }

/* ─── Les gestes du quotidien ──────────────────────────────────────────────── */
.gestes { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .gestes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .gestes { grid-template-columns: repeat(3, 1fr); } }
.geste {
  position: relative;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.75rem 1.5rem 1.5rem;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.geste:hover { transform: translateY(-3px); box-shadow: var(--ombre); border-color: var(--jci-bleu); }
/* La durée est le vrai argument de la carte : elle passe donc avant le titre,
   en gros, parce que « facile » ne veut rien dire tant qu'on ne l'a pas mis en
   minutes. */
.geste__duree {
  display: inline-block; margin-bottom: .75rem;
  padding: .3rem .7rem; border-radius: var(--rayon-pilule);
  background: var(--surface-bleu); color: var(--bleu-lisible);
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
}
.geste h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.geste p { color: var(--encre-douce); font-size: .93rem; }

/* ─── Les idées d'articles ─────────────────────────────────────────────────── */
.idees { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .idees { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .idees { grid-template-columns: repeat(3, 1fr); } }
.idee {
  background: var(--nuit-surface);
  border: 1px solid var(--nuit-trait);
  border-radius: var(--rayon); padding: 1.6rem 1.5rem;
  transition: border-color var(--transition), background var(--transition);
}
.idee:hover { border-color: rgba(87,188,188,.45); background: rgba(255,255,255,.08); }
.idee__moment {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--jci-sarcelle);
  margin-bottom: .6rem;
}
.idee h3 { color: #fff; font-size: 1.08rem; margin-bottom: .5rem; }
.idee p { font-size: .93rem; }

/* ─── Les habillages ───────────────────────────────────────────────────────── */
.habillage {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.25rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.habillage:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.habillage h3 { font-size: 1rem; margin-bottom: .35rem; }
.habillage p { font-size: .87rem; color: var(--encre-douce); }
/* Un aperçu dessiné en CSS plutôt qu'une capture d'écran : cinq captures
   pèseraient plus lourd que toute la page, et elles seraient fausses le jour
   où un habillage bouge. Ce sont des silhouettes, elles disent une ambiance
   sans prétendre montrer le site. */
.habillage__apercu {
  display: block; height: 92px; margin-bottom: 1rem;
  border-radius: var(--rayon-petit);
  background: var(--surface-doux);
  border: 1px solid var(--trait);
  position: relative; overflow: hidden;
}
.habillage__apercu::before {
  content: ''; position: absolute; inset: 10px 12px auto 12px; height: 8px;
  border-radius: 2px; background: var(--jci-bleu); opacity: .85;
}
.habillage__apercu::after {
  content: ''; position: absolute; inset: 26px 12px 12px 12px;
  border-radius: 3px; background: var(--trait);
}
.habillage__apercu--0::before { width: 46%; inset-inline: 12px auto; }
.habillage__apercu--1::before { background: var(--jci-marine); width: 62%; inset-inline: 12px auto; }
.habillage__apercu--1::after  { inset: 26px 12px 12px 12px; background:
  linear-gradient(180deg, var(--trait) 0 46%, transparent 46% 54%, var(--trait) 54%); }
.habillage__apercu--2::before { background: var(--jci-nuit); width: 34%; inset-inline: 12px auto; }
.habillage__apercu--2::after  { inset: 26px 12px 12px 12px; background:
  linear-gradient(90deg, var(--trait) 0 58%, transparent 58% 64%, var(--surface-bleu) 64%); }
.habillage__apercu--3::before { background: var(--jci-jaune); width: 72%; inset-inline: 12px auto; }
.habillage__apercu--3::after  { background: var(--jci-nuit); opacity: .12; }
.habillage__apercu--4::before { background: var(--jci-sarcelle); width: 52%; inset-inline: 12px auto; }
.habillage__apercu--4::after  { inset: 26px 12px 12px 12px; background:
  radial-gradient(circle at 30% 55%, var(--jci-sarcelle) 0 14px, var(--trait) 14px); }

/* ─── Le mot lié au lexique ────────────────────────────────────────────────── */
/* Un mot technique qu'on ne pouvait pas éviter. Souligné en pointillé, il
   annonce qu'il y a quelque chose à savoir ; au survol et au clavier, la
   définition courte s'affiche ; au clic, on va au lexique.

   Il n'est PAS de la couleur des liens. Un texte truffé de liens bleus se lit
   comme un sommaire : le pointillé signale sans crier, et c'est le bon niveau
   pour un mot qu'on peut très bien ignorer. */
.mot {
  position: relative;
  color: inherit; font-weight: 600;
  text-decoration: underline dotted var(--jci-bleu);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  cursor: help;
}
.mot:hover, .mot:focus-visible { color: var(--bleu-lisible); }
.section--nuit .mot:hover, .section--nuit .mot:focus-visible { color: var(--bleu-sur-sombre); }
.mot__bulle {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: min(300px, 78vw);
  background: var(--jci-nuit); color: #fff;
  padding: .75rem .9rem; border-radius: var(--rayon-petit);
  font-size: .82rem; line-height: 1.45; font-weight: 400;
  text-align: left; text-decoration: none;
  box-shadow: var(--ombre-forte);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 30;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.mot__bulle strong { color: var(--jci-sarcelle); font-weight: 700; display: block; margin-bottom: .2rem; }
.mot:hover .mot__bulle, .mot:focus-visible .mot__bulle {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Sur téléphone, une bulle centrée sur un mot en bord de ligne sort de l'écran
   et sa moitié est rognée. Elle s'aligne alors sur le bloc de texte. */
@media (max-width: 620px) {
  .mot__bulle { left: 0; transform: translateY(4px); max-width: 82vw; }
  .mot:hover .mot__bulle, .mot:focus-visible .mot__bulle { transform: translateY(0); }
}

/* ─── Le fil d'Ariane ──────────────────────────────────────────────────────── */
.fil-ariane {
  font-size: .84rem; color: var(--nuit-encre-douce); margin-bottom: 1.25rem;
}
.fil-ariane a { color: var(--bleu-sur-sombre); }
.fil-ariane span { margin-inline: .4rem; opacity: .6; }

/* ─── Le lexique ───────────────────────────────────────────────────────────── */
.lex-tete { padding-block: clamp(3rem, 7vw, 5rem); }
.lex-tete h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.lex-tete .accroche { color: var(--nuit-encre-douce); }

.lex-outils { margin-bottom: clamp(2rem, 4vw, 3rem); }
.lex-recherche {
  display: flex; align-items: center; gap: .75rem;
  background: var(--surface); border: 1.5px solid var(--trait);
  border-radius: var(--rayon-pilule); padding: .2rem 1.25rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.lex-recherche:focus-within { border-color: var(--jci-bleu); box-shadow: 0 0 0 4px rgba(0,151,215,.12); }
.lex-recherche svg { color: var(--encre-tenue); flex: 0 0 auto; }
.lex-recherche input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding-block: .95rem; font-size: 1rem;
}
.lex-recherche input::-webkit-search-cancel-button { cursor: pointer; }

.lex-familles { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.25rem; }
.lex-puce {
  border: 1.5px solid var(--trait); background: var(--surface);
  color: var(--encre-douce); border-radius: var(--rayon-pilule);
  padding: .5rem 1rem; font-size: .85rem; font-weight: 600; cursor: pointer;
  min-height: 40px;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.lex-puce:hover { border-color: var(--jci-bleu); color: var(--bleu-lisible); }
.lex-puce[aria-pressed="true"] {
  background: var(--bleu-lisible); border-color: var(--bleu-lisible); color: #fff;
}

.lex-alphabet { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; margin-top: 1.25rem; }
.lex-alphabet a, .lex-alphabet span {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 8px; font-size: .82rem; font-weight: 700; text-decoration: none;
}
.lex-alphabet a { color: var(--encre-douce); }
.lex-alphabet a:hover { background: var(--bleu-lisible); color: #fff; }
.lex-alphabet span { color: var(--trait); }

.lex-liste { display: grid; gap: 1rem; }
.lex-ancre { display: block; height: 0; scroll-margin-top: calc(var(--hauteur-entete) + 1.5rem); }
.lex-terme {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 1.5rem;
  scroll-margin-top: calc(var(--hauteur-entete) + 1.5rem);
}
/* Un terme atteint par un lien direct est mis en évidence une fois : quelqu'un
   qui arrive depuis la page de vente doit voir LEQUEL des soixante termes il
   est venu lire, sans avoir à comparer les titres. */
.lex-terme:target { border-color: var(--jci-bleu); box-shadow: 0 0 0 4px rgba(0,151,215,.12); }
.lex-terme__tete { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-bottom: .6rem; }
.lex-terme h2 { font-size: 1.15rem; font-weight: 700; }
.lex-terme dfn { font-style: normal; }
.lex-terme p { color: var(--encre-douce); font-size: .95rem; }
.lex-terme__lien {
  margin-left: auto; color: var(--trait); font-weight: 800; text-decoration: none;
  padding-inline: .3rem;
}
.lex-terme:hover .lex-terme__lien { color: var(--jci-bleu); }

.lex-etiquette {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  padding: .25rem .65rem; border-radius: var(--rayon-pilule);
  background: var(--surface-doux); color: var(--encre-tenue);
}
.lex-etiquette--bases   { background: var(--surface-bleu);        color: var(--bleu-lisible); }
.lex-etiquette--site    { background: rgba(87,188,188,.16);       color: #17706F; }
.lex-etiquette--espace  { background: rgba(31,71,137,.10);        color: var(--jci-marine); }
.lex-etiquette--trouve  { background: rgba(239,196,15,.20);       color: #7A6205; }
.lex-etiquette--contenu { background: rgba(0,151,215,.12);        color: var(--bleu-lisible); }
.lex-etiquette--regles  { background: rgba(19,15,45,.07);         color: var(--encre); }

.lex-vide { text-align: center; padding: 2.5rem 1rem; color: var(--encre-tenue); }
.lex-appel {
  text-align: center; background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: clamp(2rem, 5vw, 3rem);
}
.lex-appel .actions { justify-content: center; }

/* ─── Révélation au défilement ─────────────────────────────────────────────── */
/* Le contenu n'est masqué QUE si un script peut le révéler.
   Sans cette condition, `.revele { opacity: 0 }` s'applique toujours et la page
   entière (48 blocs, soit tout sauf la bannière) reste blanche dès que le
   fichier JS ne s'exécute pas : script bloqué, erreur réseau, ou politique de
   sécurité réécrite par un intermédiaire. Ce dernier cas n'est pas théorique
   sur ce projet, le CDN de l'hébergeur remplace déjà l'en-tête de politique de
   sécurité du moteur par le sien.
   Une animation d'entrée est un agrément. Elle ne doit jamais être la condition
   pour que le texte existe. `scripting: enabled` pose exactement cette question,
   et un navigateur qui ne connaît pas la requête ignore le bloc, donc montre
   tout : le repli va dans le bon sens. */
@media (scripting: enabled) {
  .revele { opacity: 0; transform: translateY(22px); }
}
.revele.est-vu {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .revele, .revele.est-vu { opacity: 1; transform: none; transition: none; }
  .globe__toile { opacity: 1; transition: none; }
  .bouton:hover, .carte--survol:hover { transform: none; }
}

/* ─── Cibles tactiles ──────────────────────────────────────────────────────── */
/* Le thème des sites laissait treize cibles sous 44 pixels, dont les liens du
   pied de page. Ici la règle est posée une fois pour toutes. */
@media (max-width: 719px) {
  .pied ul a, .pied__bas a, .entete__nav a {
    display: inline-block; min-height: 44px; line-height: 44px;
  }
}

@media print {
  .entete, .globe, .video, .bandeau { display: none; }
  body { color: #000; background: #fff; }
}


/* ─── Utilitaires d'espacement et de couleur ───────────────────────────────
   La politique de sécurité du moteur interdit les styles en ligne autant que
   les scripts en ligne (`style-src 'self'`, sans 'unsafe-inline'). Un
   attribut `style=""` n'est donc pas « du CSS rapide » ici : il est purement
   et simplement ignoré par le navigateur, en silence. Cette page en portait
   dix-huit à sa première écriture, et quatre d'entre eux étaient les seules
   choses qui rendaient la frise lisible sur son fond sombre.
   D'où ces quelques classes : ce ne sont pas des utilitaires de confort, c'est
   le seul moyen d'exprimer ces règles. */
.espace-haut-sm { margin-top: .6rem; }
.espace-haut    { margin-top: 1rem; }
.espace-haut-md { margin-top: 1.25rem; }
.espace-haut-lg { margin-top: 1.5rem; }
.espace-bas-md  { margin-bottom: 1.25rem; }
.tete-section--eloignee { margin-top: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: 1.5rem; }
.mesure-44 { max-width: 44ch; }
.mesure-70 { max-width: 70ch; }
.sur-nuit { color: #fff; }
.sur-nuit-doux { color: var(--nuit-encre-douce); }

/* Lu, jamais vu. Sert au tableau comparatif, dont les cases disent « compris »
   ou « non compris » par un pictogramme : le pictogramme est décoratif, donc
   muet, et sans ce texte une lectrice d'écran entendrait trente cases vides.
   `display: none` ne conviendrait pas, il masque AUSSI pour elle. */
.pour-lecteur-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.champ--groupe { border: 0; padding: 0; }

/* ─── Les pages légales ────────────────────────────────────────────────────── */
.legal-maj { margin-top: 1.5rem; font-size: .86rem; color: var(--nuit-encre-douce); }

.legal-grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 940px) {
  /* Le sommaire à gauche, collé sous la barre de navigation : dix-sept
     articles, on doit pouvoir sauter de l'un à l'autre sans remonter. */
  .legal-grille { grid-template-columns: 260px 1fr; align-items: start; }
  .legal-sommaire { position: sticky; top: calc(var(--hauteur-entete) + 1.5rem); }
}

.legal-sommaire {
  background: var(--surface-doux);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.5rem 1.25rem;
}
.legal-sommaire__titre {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-tenue); margin-bottom: .9rem;
}
.legal-sommaire ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.legal-sommaire li { font-size: .86rem; }
.legal-sommaire a { color: var(--encre-douce); text-decoration: none; }
.legal-sommaire a:hover { color: var(--bleu-lisible); text-decoration: underline; }
.legal-sommaire__autres {
  display: grid; gap: .45rem;
  margin-top: 1.25rem; padding-top: 1.1rem;
  border-top: 1px solid var(--trait);
  font-size: .84rem; font-weight: 600;
}

.legal-corps { max-width: 72ch; }
.legal-article { scroll-margin-top: calc(var(--hauteur-entete) + 1.5rem); }
.legal-article + .legal-article { margin-top: 2.75rem; }
.legal-article h2 {
  font-size: 1.22rem; line-height: 1.35;
  padding-bottom: .6rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--trait);
}
.legal-article p { color: var(--encre-douce); margin-bottom: 1rem; }
.legal-article ul {
  margin: 0 0 1.1rem; padding-left: 1.3rem;
  color: var(--encre-douce); display: grid; gap: .5rem;
}
.legal-fin {
  margin-top: 3rem; padding: 1.15rem 1.5rem;
  border-left: 3px solid var(--jci-bleu);
  background: var(--surface-doux);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  font-size: .95rem; color: var(--encre-douce);
}