/* ==========================================================================
   TRADELYS — Apprendre sans parier
   Feuille de style commune à toutes les pages publiques.
   Aucune dépendance, aucune ressource distante : si « Playfair Display »
   n'est pas installée sur l'appareil, Georgia puis une serif système
   prennent le relais. Le texte courant utilise la pile système.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de design (couleurs, typographie, espacements)
   -------------------------------------------------------------------------- */
:root {
  /* Palette imposée */
  --navy: #0A1931;
  --navy-2: #0F2245;
  --gold: #D4AF37;
  --gold-light: #FFD700;
  --cream: #FFF8E7;
  --cyan: #06B6D4;
  --green: #10B981;
  --red: #EF4444;

  /* Déclinaisons lisibles sur fond clair (contraste AA garanti) */
  --gold-ink: #8A6A16;
  --green-ink: #046C4E;
  --red-ink: #B42318;
  --ink: #0A1931;
  --ink-soft: #3C4A63;
  --paper: #FFFDF7;
  --line: #E4DCC8;
  --line-dark: rgba(212, 175, 55, 0.28);
  --mist: #C9D4E6;

  /* Ors relevés sur le logo fourni : liseré clair et or saturé du wordmark */
  --gold-soft: #E8C766;
  --navy-logo: #12224A;

  /* Anneau de focus : recalculé par les sections claires */
  --focus: #FFD700;

  /* Typographie */
  --font-title: Georgia, "Playfair Display", "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  /* Rythme */
  --radius: 14px;
  --radius-sm: 9px;
  --wrap: 1120px;
  --gap: 1rem;
  --shadow: 0 18px 40px rgba(10, 25, 49, 0.10);
  --shadow-dark: 0 18px 46px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(1.9rem, 6.2vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 4.4vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }

a { color: var(--gold-light); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }

img, svg { max-width: 100%; }

/* Focus clavier toujours visible */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Contenu réservé aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 60;
  background: var(--gold-light);
  color: var(--navy);
  font-weight: 700;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 0.15s ease-in;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. Mise en page
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.1rem;
}

.section { padding: 3.25rem 0; }
.section--tight { padding: 2.25rem 0; }

.section--dark {
  background:
    radial-gradient(900px 320px at 12% -10%, rgba(212, 175, 55, 0.13), transparent 70%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--cream);
}

.section--cream {
  --focus: #0A1931;
  background: var(--cream);
  color: var(--ink);
}

.section--paper {
  --focus: #0A1931;
  background: var(--paper);
  color: var(--ink);
}

.section--cream a,
.section--paper a { color: var(--gold-ink); }
.section--cream a:hover,
.section--paper a:hover { color: var(--navy); }

.section--cream p,
.section--paper p { color: var(--ink-soft); }

.section--navy-band {
  background: var(--navy-2);
  color: var(--cream);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.section--cream .eyebrow,
.section--paper .eyebrow { color: var(--gold-ink); }

.badge {
  display: inline-block;
  background: rgba(212, 175, 55, 0.14);
  border: 1px solid var(--line-dark);
  color: var(--gold-light);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
}

.section--cream .badge,
.section--paper .badge {
  background: rgba(212, 175, 55, 0.20);
  border-color: rgba(138, 106, 22, 0.45);
  color: #6B4F0C;
}

.lead {
  font-size: clamp(1.03rem, 2.4vw, 1.2rem);
  max-width: 62ch;
}

.center { text-align: center; }
.center .lead { margin-inline: auto; }

.grid { display: grid; gap: var(--gap); }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (min-width: 980px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}

/* --------------------------------------------------------------------------
   4. En-tête et navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 25, 49, 0.96);
  border-bottom: 1px solid var(--line-dark);
  backdrop-filter: blur(8px);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 0.6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--cream);
}
.brand:hover { color: var(--cream); }

.brand__mark { width: 44px; height: 44px; flex: none; }

.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-title);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold-light);
}
.brand__tag {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}

.site-nav { width: 100%; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cream);
  text-decoration: none;
}
.site-nav a:hover { background: rgba(212, 175, 55, 0.16); color: var(--gold-light); }
.site-nav a[aria-current="page"] {
  background: rgba(212, 175, 55, 0.20);
  color: var(--gold-light);
  box-shadow: inset 0 -2px 0 var(--gold);
}

@media (min-width: 900px) {
  .site-nav { width: auto; }
  .site-nav ul { align-items: center; }
  .site-nav a { font-size: 0.92rem; padding: 0.5rem 0.8rem; }
}

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #14203A;
}
.btn--gold:hover { color: #14203A; box-shadow: 0 12px 26px rgba(212, 175, 55, 0.38); }

.btn--ghost {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(10, 25, 49, 0.35);
}
.btn--ghost:hover { background: rgba(212, 175, 55, 0.16); color: #fff; }

.section--cream .btn--ghost,
.section--paper .btn--ghost {
  border-color: var(--gold-ink);
  color: #6B4F0C;
  background: transparent;
}
.section--cream .btn--ghost:hover,
.section--paper .btn--ghost:hover { background: rgba(212, 175, 55, 0.20); color: var(--navy); }

.btn--navy { background: var(--navy); color: var(--cream); }
.btn--navy:hover { color: #fff; box-shadow: var(--shadow); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
@media (max-width: 560px) {
  .btn-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   6. Cartes, étapes, encadrés
   -------------------------------------------------------------------------- */
.card {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow);
}
.card h3 { color: var(--navy); margin-bottom: 0.4rem; }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), #1B3A63);
  color: var(--gold-light);
  margin-bottom: 0.9rem;
}

.card--dark {
  background: linear-gradient(150deg, #12294D, #0C1D3A);
  border-color: var(--line-dark);
  color: var(--cream);
  box-shadow: var(--shadow-dark);
}
.card--dark h3 { color: var(--gold-light); }
.card--dark p { color: var(--mist); }

.card--refuse { border-left: 6px solid var(--red); }
.card--refuse .card__icon { background: rgba(239, 68, 68, 0.16); color: var(--red-ink); }
.card--keep { border-left: 6px solid var(--green); }
.card--keep .card__icon { background: rgba(16, 185, 129, 0.16); color: var(--green-ink); }

/* Étapes numérotées */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: step; }
.steps > li {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.3rem 1.3rem 4.1rem;
  color: var(--ink-soft);
  box-shadow: var(--shadow);
}
.steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 1.1rem;
  top: 1.15rem;
  width: 2.1rem; height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #14203A;
  font-family: var(--font-title);
  font-weight: 700;
}
.steps h3 { color: var(--navy); margin-bottom: 0.3rem; }
.steps p:last-child { margin-bottom: 0; }
.steps--dark > li {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-dark);
  color: var(--mist);
}
.steps--dark h3 { color: var(--gold-light); }

@media (min-width: 760px) {
  .steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps--four > li { padding-left: 1.3rem; padding-top: 4.3rem; }
  .steps--four > li::before { top: 1.2rem; left: 1.3rem; }
  .steps--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Encadrés d'alerte / d'information */
.callout {
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-left-width: 6px;
}
.callout h3 { margin-top: 0; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout--info { border-left-color: var(--cyan); }
.callout--ok { border-left-color: var(--green); }
.callout--warn { border-left-color: var(--gold); }
.callout--danger { border-left-color: var(--red); }

.callout--dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-dark);
  color: var(--cream);
}
.callout--dark p, .callout--dark li { color: var(--mist); }
.callout--dark.callout--danger { border-left-color: var(--red); }
.callout--dark.callout--ok { border-left-color: var(--green); }
.callout--dark.callout--info { border-left-color: var(--cyan); }

/* Listes à puces personnalisées */
.list { margin: 0 0 1em; padding-left: 1.2rem; }
.list li { margin-bottom: 0.45rem; }

.list--check, .list--cross, .list--arrow {
  list-style: none;
  padding-left: 0;
}
.list--check > li, .list--cross > li, .list--arrow > li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: 0.6rem;
}
.list--check > li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--green-ink);
  font-weight: 700;
}
.list--cross > li::before {
  content: "✕";
  position: absolute; left: 0; top: 0;
  color: var(--red-ink);
  font-weight: 700;
}
.list--arrow > li::before {
  content: "→";
  position: absolute; left: 0; top: 0;
  color: var(--gold-ink);
  font-weight: 700;
}
.section--dark .list--check > li::before { color: var(--green); }
.section--dark .list--cross > li::before { color: var(--red); }
.section--dark .list--arrow > li::before { color: var(--gold-light); }

/* Signaux d'alerte : grille de cartes rouges */
.signals { display: grid; gap: 1rem; }
@media (min-width: 760px) { .signals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.signal {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--red);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  color: var(--ink);
}
.signal h3 { color: var(--navy); font-size: 1.12rem; margin-bottom: 0.35rem; }
.signal p { color: var(--ink-soft); margin-bottom: 0; }
.signal__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin-bottom: 0.35rem;
}

/* --------------------------------------------------------------------------
   7. Tableaux (défilement horizontal sur mobile, accessible au clavier)
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.section--dark .table-wrap {
  border-color: var(--line-dark);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: var(--shadow-dark);
}
table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.93rem;
}
caption {
  caption-side: top;
  text-align: left;
  padding: 0.9rem 1rem 0.2rem;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-title);
}
.section--dark caption { color: var(--gold-light); }
th, td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.section--dark th, .section--dark td {
  border-bottom-color: rgba(212, 175, 55, 0.18);
  color: var(--mist);
}
thead th {
  background: rgba(212, 175, 55, 0.16);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
}
.section--dark thead th { background: rgba(212, 175, 55, 0.20); color: var(--gold-light); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { color: var(--navy); font-family: var(--font-title); font-size: 0.98rem; }
.section--dark tbody th { color: var(--cream); }
.table-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.6rem; }
.section--dark .table-note { color: var(--mist); }

/* --------------------------------------------------------------------------
   8. Héro
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 88% 6%, rgba(6, 182, 212, 0.16), transparent 68%),
    radial-gradient(620px 380px at 4% 92%, rgba(212, 175, 55, 0.16), transparent 70%),
    linear-gradient(150deg, #0A1931 0%, #12294D 58%, #0F2245 100%);
  color: var(--cream);
  padding: 2.6rem 0 3rem;
}
.hero__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 980px) {
  .hero { padding: 3.6rem 0 4rem; }
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; }
}
.hero h1 { margin-bottom: 0.5rem; }
.hero h1 .accent { display: block; color: var(--gold-light); }
.hero .lead { color: var(--mist); }
.hero__promise {
  font-family: var(--font-title);
  font-size: clamp(1.02rem, 2.6vw, 1.3rem);
  color: var(--cream);
  border-left: 4px solid var(--gold);
  padding-left: 1rem;
  margin: 0 0 1.4rem;
}
.hero__proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  padding: 0;
  margin: 1.2rem 0 0;
  font-size: 0.88rem;
  color: var(--mist);
}
.hero__proof li::before { content: "◆ "; color: var(--gold); }
.hero__visual {
  background: linear-gradient(160deg, rgba(15, 34, 69, 0.86), rgba(10, 25, 49, 0.92));
  border: 1px solid var(--line-dark);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: var(--shadow-dark);
}
.hero__visual svg { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   9. Bandeau de chiffres-clés (aucune performance, uniquement des règles)
   -------------------------------------------------------------------------- */
.facts { display: grid; gap: 0.9rem; }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.fact__value {
  display: block;
  font-family: var(--font-title);
  font-size: 1.5rem;
  color: var(--gold-light);
}
.fact__label { font-size: 0.85rem; color: var(--mist); }

/* --------------------------------------------------------------------------
   10. Pages légales
   -------------------------------------------------------------------------- */
.legal { max-width: 78ch; }
.legal h2 {
  margin-top: 2.2rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid rgba(212, 175, 55, 0.35);
}
.legal h2:first-of-type { margin-top: 0.5rem; }
.legal h3 { margin-top: 1.6rem; }
.legal ul, .legal ol { padding-left: 1.25rem; }
.legal li { margin-bottom: 0.45rem; }
.legal dt { font-weight: 700; color: var(--navy); margin-top: 0.8rem; }
.legal dd { margin: 0.2rem 0 0 0; color: var(--ink-soft); }
.legal__meta {
  font-size: 0.86rem;
  color: var(--ink-soft);
  border-left: 4px solid var(--gold);
  padding-left: 0.9rem;
}

/* Zones « À COMPLÉTER » : impossibles à manquer avant publication */
mark.todo {
  background: #FFF1C9;
  border: 1px dashed var(--gold-ink);
  color: #57430B;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  border-radius: 6px;
}

/* Informations de l'éditeur servies par le back-office (lib/editeur.js).
   Vert discret : une information renseignée ne doit pas attirer l'œil
   comme une zone manquante, mais elle doit rester repérable en relecture. */
mark.fait {
  background: #E7F6EE;
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #04543C;
  font-weight: 600;
  padding: 0.05rem 0.35rem;
  border-radius: 6px;
}

/* Bloc « forme juridique » des mentions légales : remplacé à la diffusion. */
.forme-juridique {
  background: #F7F9FC;
  border: 1px solid var(--line);
  border-left: 6px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 0.4rem 1.1rem 0.9rem;
  margin: 1.2rem 0;
}
.forme-juridique h3 { margin-top: 0.8rem; }
.forme-juridique dt { margin-top: 0.6rem; }
.forme-juridique dd { margin: 0.15rem 0 0 0; color: var(--ink-soft); }

/* Valeurs de l'éditeur servies par le back-office. Des <span> et non des
   <mark> : un <mark> est un élément en ligne, ses marges verticales ne
   s'appliquent pas, et deux lignes consécutives se chevaucheraient.
   Les marges sont donc portées par un conteneur en ligne-bloc, dans
   lequel le texte se replie proprement. */
.forme-juridique dd {
  display: block;
  margin-bottom: 0.35rem;
}
.forme-juridique dd > span,
.legal dd > span { display: block; }
.editeur-valeur {
  background: #E7F6EE;
  border: 1px solid rgba(16, 185, 129, 0.45);
  border-radius: 6px;
  color: #04543C;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  overflow-wrap: anywhere;
}
.editeur-attente {
  background: #FFF8E1;
  border: 1px dashed var(--gold-ink);
  border-radius: 6px;
  color: #57430B;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  overflow-wrap: anywhere;
}
.todo-block {
  background: #FFF8E1;
  border: 1px dashed var(--gold-ink);
  border-left: 6px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  margin: 1.2rem 0;
  color: #4A3908;
}
.todo-block h3 { margin-top: 0; color: #6B4F0C; }
.todo-block h2 { font-size: 1.2rem; margin-top: 0; margin-bottom: 0.5em; color: #6B4F0C; }
.todo-block p, .todo-block li { color: #4A3908; }
.todo-block a { color: #6B4F0C; }

/* --------------------------------------------------------------------------
   11. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  background: #060E1F;
  color: #93A3BD;
  padding: 2.4rem 0 1.4rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.9rem;
}
.site-footer h2 {
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--font-body);
  margin-bottom: 0.6rem;
}
.site-footer a { color: var(--gold); }
.site-footer a:hover { color: var(--gold-light); }
.site-footer__cols { display: grid; gap: 1.6rem; }
@media (min-width: 760px) { .site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.site-footer__brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.site-footer__brand svg { width: 40px; height: 40px; flex: none; }
.site-footer__brand span {
  font-family: var(--font-title);
  font-size: 1.2rem;
  color: var(--gold-light);
  letter-spacing: 0.05em;
}
.disclaimer {
  margin-top: 1.8rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  color: #C3CEDF;
  font-size: 0.88rem;
}
.disclaimer strong { color: var(--cream); }
.site-footer__bottom {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(212, 175, 55, 0.16);
  font-size: 0.82rem;
  color: #7E8DA6;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   12. Filet décoratif lys + chandeliers
   -------------------------------------------------------------------------- */
.divider-lys {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 auto 1.8rem;
  max-width: 460px;
  color: var(--gold);
}
.divider-lys::before,
.divider-lys::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.divider-lys svg { width: 46px; height: 46px; flex: none; }
.section--cream .divider-lys, .section--paper .divider-lys { color: var(--gold-ink); }

/* --------------------------------------------------------------------------
   13. Préférences système et impression
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover { transform: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .skip-link, .btn-row { display: none !important; }
  .section, .section--dark, .section--cream, .section--paper {
    background: #fff !important;
    color: #000 !important;
    padding: 0.6rem 0;
  }
  .section p, .section li, .card, .callout { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .callout, .card, .table-wrap { border-color: #999; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   14. Logo fourni par la famille
   (tradelys_icon.png : l'écu seul • tradelys_logo_transparent.png : écu + nom)
   Le logo n'est jamais posé sur un fond chargé : soit un aplat marine calme,
   soit une plaque crème qui laisse respirer le liseré doré.
   -------------------------------------------------------------------------- */
.brand__ico {
  width: 54px;
  height: 54px;
  flex: none;
  display: block;
}

.brand__name .tr { color: var(--cream); }
.brand__name .ly { color: var(--gold-soft); }

/* « Trade » + « Lys » : « Lys » en or, dans les zones sombres uniquement */
.ly { color: var(--gold-soft); }
.hero h1 .ly { color: var(--gold-soft); }

/* Appel à l'action de la navigation */
.nav-cta {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #14203A !important;
  box-shadow: 0 8px 18px rgba(212, 175, 55, 0.26);
}
.nav-cta:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #14203A !important;
  box-shadow: 0 10px 22px rgba(212, 175, 55, 0.36);
}

/* Plaque crème : le logo respire, le liseré doré reste net */
.logo-plate {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream) 100%);
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 18px;
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow-dark);
}
.logo-plate img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-inline: auto;
}

.hero__chart { display: block; width: 100%; height: auto; margin-top: 1rem; }

.divider-lys img { width: 56px; height: 56px; flex: none; }

.site-footer__brand img { width: 46px; height: 46px; flex: none; }
.site-footer__brand .tr { color: var(--gold-soft); }
.site-footer__brand .ly { color: var(--gold); }

/* --------------------------------------------------------------------------
   15. Double affichage euro / franc CFA d'Afrique centrale (XAF)
   Parité fixe annoncée : 1 EUR = 655,957 XAF.
   Aucun JavaScript n'est nécessaire : l'euro est écrit dans la page et
   reste affiché si la bascule n'est pas exécutée.
   -------------------------------------------------------------------------- */
.money { white-space: nowrap; }

.money__alt {
  display: block;
  font-size: 0.86em;
  font-weight: 600;
  color: #5B6478;
  white-space: nowrap;
}
.section--dark .money__alt,
.section--navy-band .money__alt,
.card--dark .money__alt,
.disclaimer .money__alt { color: var(--mist); }

.currency {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 0.25rem 0.35rem;
}
.currency__note {
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mist);
  padding-inline: 0.55rem;
}
.currency__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
}
.currency__btn:hover { background: rgba(212, 175, 55, 0.18); }
.currency__btn[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #14203A;
}
.section--cream .currency,
.section--paper .currency {
  background: rgba(10, 25, 49, 0.05);
  border-color: rgba(138, 106, 22, 0.35);
}
.section--cream .currency__btn,
.section--paper .currency__btn { color: var(--navy); }
.section--cream .currency__note,
.section--paper .currency__note { color: var(--ink-soft); }

.currency-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  font-size: 0.9rem;
  color: var(--mist);
}
.section--cream .currency-line,
.section--paper .currency-line { color: var(--ink-soft); }

/**
 * L'ÉTAT DU PAYS — LA COCHE VERTE, LE ROUGE, ET L'INFORMATION.
 * ------------------------------------------------------------------
 * Écrit par `devise.js` dans `#pays-statut`, présent sur la page Écoles
 * seulement. Les trois états ne se confondent pas, et c'est le fond :
 *
 *   · `--ouvert` : le pays est OUVERT (coche verte). Un répertoire vide reste
 *     VERT — le pays est ouvert, seule la liste est vide. Afficher « non
 *     couvert » à un proviseur gabonais serait une régression de la décision
 *     de la liste fermée, pas une prudence.
 *   · `--refus`  : hors des dix-neuf. Rouge, « Pays non couvert pour le
 *     moment », et la porte de sortie reste « nous écrire ».
 *   · `--info`   : ni l'un ni l'autre — le dollar ne vise aucun pays ouvert
 *     et n'ouvre donc aucune porte.
 *
 * ⚠️ LE TEXTE PORTE TOUJOURS LE MOT, PAS SEULEMENT LA COULEUR : une coche
 * verte seule serait illisible pour qui ne distingue pas le vert, et le
 * message est ce qui protège. La couleur ne fait que renforcer.
 * ------------------------------------------------------------------
 */
.pays-statut {
  display: none;
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.85rem 0.65rem 2.1rem;
  position: relative;
  border-radius: 0.6rem;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: left;
}
/* Le bloc ne se montre QUE rempli : vide, il ne doit pas laisser un cadre. */
.pays-statut:not(:empty) { display: block; }
.pays-statut::before {
  position: absolute;
  left: 0.75rem;
  top: 0.55rem;
  font-weight: 800;
  font-size: 1rem;
}
.pays-statut--ouvert {
  border-color: rgba(4, 108, 78, 0.38);
  background: rgba(16, 185, 129, 0.10);
  color: var(--green-ink);
}
.pays-statut--ouvert::before { content: "✓"; color: var(--green-ink); }
.pays-statut--refus {
  border-color: rgba(180, 35, 24, 0.38);
  background: rgba(239, 68, 68, 0.10);
  color: var(--red-ink);
}
.pays-statut--refus::before { content: "✕"; color: var(--red-ink); }
.pays-statut--info {
  border-color: var(--line);
  background: var(--cream);
  color: var(--ink-soft);
}
.pays-statut--info::before { content: "i"; color: var(--gold-ink); font-family: var(--font-title); }
/* Dans le héros sombre, les mêmes états doivent rester lisibles. */
.hero .pays-statut--ouvert { background: rgba(16, 185, 129, 0.14); color: #6EE7B7; border-color: rgba(16, 185, 129, 0.45); }
.hero .pays-statut--ouvert::before { color: #6EE7B7; }
.hero .pays-statut--refus { background: rgba(239, 68, 68, 0.14); color: #FCA5A5; border-color: rgba(239, 68, 68, 0.45); }
.hero .pays-statut--refus::before { color: #FCA5A5; }
.hero .pays-statut--info { background: rgba(255, 255, 255, 0.08); color: var(--mist); border-color: var(--line-dark); }
.hero .pays-statut--info::before { color: var(--gold-light); }

/* ==========================================================================
   ⚠️ LE SÉLECTEUR DE PAYS PORTE DEUX ÉTAGES, ET IL LE MONTRE.
   --------------------------------------------------------------------------
   DÉCISION DU FONDATEUR : « je veux que l'activation d'un pays se fasse
   automatiquement depuis mon Back-Office — raison pour laquelle je veux que
   tu crées DÉJÀ leur identité sur le site. »

   Le select liste donc DIX-NEUF pays : les huit OUVERTS, et les onze dont
   l'identité est créée sans être encore ouverts. L'option elle-même écrit
   déjà « — pas encore ouvert », et ce n'est pas une décoration : c'est la
   première chose que lit un visiteur qui déplie la liste.

   ⚠️ ET LE GRIS VIENT DE `data-ferme`, PAS DU TEXTE. Il ferme la boucle du
   refus nommé : le rouge de #pays-statut dit POURQUOI, et l'option grisée
   dit LESQUELS — sans que le visiteur ait à ouvrir chaque pays pour le
   découvrir.

   ⚠️ ON NE DÉSACTIVE PAS L'OPTION. Un pays fermé n'est pas un pays
   désactivé, c'est un pays qui ouvrira : il reste CHOISISSIBLE — c'est
   tout l'intérêt —, et c'est en le choisissant qu'on apprend qu'il
   ouvrira. Une option `disabled` aurait rendu ce pays muet.
   ========================================================================== */
select option[data-ferme="true"] { color: #6B7280; font-style: italic; }

.noscript-note {
  margin-top: 0.7rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--gold);
  font-size: 0.86rem;
  color: var(--mist);
}
.section--cream .noscript-note,
.section--paper .noscript-note { color: var(--ink-soft); }

.rate-table th[scope="row"] { font-variant-numeric: tabular-nums; }
.rate-table td { font-variant-numeric: tabular-nums; }
.rate-table { min-width: 0; }

/* ==========================================================================
   16. VITRINE COMMERCIALE — ajouts du 5 octobre 2026
   Tout ce qui suit est NOUVEAU : aucune règle existante n'est modifiée,
   les six pages déjà validées ne changent donc pas d'apparence.
   ========================================================================== */

/* --------------------------------------------------------------------------
   16.1 Baseline, promesse, citations
   -------------------------------------------------------------------------- */
.brand__tag { letter-spacing: 0.11em; }

.promise {
  font-family: var(--font-title);
  font-size: clamp(1.05rem, 2.7vw, 1.35rem);
  line-height: 1.35;
  color: var(--cream);
  border-left: 5px solid var(--gold);
  padding: 0.15rem 0 0.15rem 1.1rem;
  margin: 0 0 1.3rem;
}
.section--cream .promise,
.section--paper .promise { color: var(--navy); }
.promise cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.7rem;
}
.section--cream .promise cite,
.section--paper .promise cite { color: var(--gold-ink); }

.duo { display: grid; gap: 1.2rem; }
@media (min-width: 820px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   16.2 Pastilles d'état
   -------------------------------------------------------------------------- */
.pill {
  display: inline-block;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
}
.pill--gold { background: rgba(212, 175, 55, 0.18); border-color: rgba(138, 106, 22, 0.45); color: #6B4F0C; }
.pill--green { background: rgba(16, 185, 129, 0.16); border-color: rgba(4, 108, 78, 0.40); color: var(--green-ink); }
.pill--red { background: rgba(239, 68, 68, 0.14); border-color: rgba(180, 35, 24, 0.38); color: var(--red-ink); }
.pill--navy { background: var(--navy); border-color: var(--navy); color: var(--gold-light); }
.hero .pill--gold,
.section--dark .pill--gold {
  background: rgba(212, 175, 55, 0.16);
  border-color: var(--line-dark);
  color: var(--gold-light);
}
.hero .pill--green,
.section--dark .pill--green { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.45); color: #6EE7B7; }
.hero .pill--red,
.section--dark .pill--red { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.45); color: #FCA5A5; }

/* --------------------------------------------------------------------------
   16.3 Les trois offres
   -------------------------------------------------------------------------- */
.price-grid { display: grid; gap: 1.2rem; align-items: stretch; }
@media (min-width: 880px) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.price {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 6px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.35rem;
  box-shadow: var(--shadow);
}
.price--feature {
  border-top-color: var(--gold-light);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF6DE 100%);
  box-shadow: 0 22px 48px rgba(10, 25, 49, 0.16);
}
.price__name {
  font-family: var(--font-title);
  font-size: 1.35rem;
  color: var(--navy);
  margin: 0 0 0.25rem;
}
.price__for { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 0.7rem; }
.price__amount {
  font-family: var(--font-title);
  font-size: 1.5rem;
  color: var(--navy);
  margin: 0.2rem 0 0.1rem;
}
.price__amount small { display: block; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); margin-top: 0.3rem; }
.price__list { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.price__list li { position: relative; padding-left: 1.55rem; margin-bottom: 0.5rem; font-size: 0.94rem; color: var(--ink-soft); }
.price__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-ink); font-weight: 700; }
.price__list li.no::before { content: "✕"; color: var(--red-ink); }
.price__list li.plus::before { content: "+"; color: var(--gold-ink); }
.price__foot { margin-top: auto; padding-top: 1.1rem; }

/* --------------------------------------------------------------------------
   16.4 L'accès à trois niveaux (échelle)
   -------------------------------------------------------------------------- */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: palier -1; }
.ladder > li {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
  border-left: 6px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.2rem 1.2rem 1.2rem 4.2rem;
  color: var(--mist);
}
.ladder > li::before {
  counter-increment: palier;
  content: counter(palier);
  position: absolute;
  left: 1.05rem;
  top: 1.05rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #14203A;
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 700;
}
.ladder h3 { color: var(--gold-light); margin-bottom: 0.3rem; }
.ladder p:last-child { margin-bottom: 0; }
.ladder--light > li { background: var(--paper); border-color: var(--line); color: var(--ink-soft); }
.ladder--light h3 { color: var(--navy); }

/* --------------------------------------------------------------------------
   16.5 Démonstration du compteur de majorité
   -------------------------------------------------------------------------- */
.demo {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.demo__fields { display: flex; flex-wrap: wrap; gap: 0.9rem 1.2rem; align-items: flex-end; margin-bottom: 1rem; }
.demo__field { display: flex; flex-direction: column; gap: 0.3rem; }
.demo label { font-size: 0.85rem; font-weight: 700; color: var(--navy); }
.demo input {
  font: inherit;
  width: 6.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--navy);
}
.demo__out {
  font-family: var(--font-title);
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  color: var(--navy);
  margin: 0 0 0.4rem;
}
.demo__sub { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }
.demo__note { font-size: 0.82rem; color: var(--ink-soft); margin: 0.9rem 0 0; }

/* --------------------------------------------------------------------------
   16.6 Les dix règles anti-arnaque
   -------------------------------------------------------------------------- */
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; counter-reset: regle; }
.rules > li {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.95rem 1.05rem 0.95rem 3.3rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.rules > li::before {
  counter-increment: regle;
  content: counter(regle);
  position: absolute;
  left: 0.9rem;
  top: 0.85rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-light);
  font-family: var(--font-title);
  font-weight: 700;
}
@media (min-width: 860px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rules--dark > li { background: rgba(255, 255, 255, 0.05); border-color: var(--line-dark); color: var(--mist); }
.rules--dark > li::before { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #14203A; }
.rules > li strong { color: var(--navy); }
.rules--dark > li strong { color: var(--cream); }

/* --------------------------------------------------------------------------
   16.7 Blocs de repères et mention de l'éditeur
   -------------------------------------------------------------------------- */
.repere {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  color: var(--ink-soft);
  box-shadow: var(--shadow);
}
.repere--dark { background: rgba(255, 255, 255, 0.05); border-color: var(--line-dark); color: var(--mist); box-shadow: none; }
.repere h3 { margin-top: 0; }
.repere p:last-child { margin-bottom: 0; }

.editor-line {
  margin: 1.4rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-dark);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.9rem;
  color: var(--mist);
}
.section--cream .editor-line,
.section--paper .editor-line {
  background: rgba(10, 25, 49, 0.04);
  border-color: var(--line);
  border-left-color: var(--gold);
  color: var(--ink-soft);
}
.editor-line strong { color: inherit; }

/* --------------------------------------------------------------------------
   16.8 Troisième devise d'affichage : dollar américain (USD)
   Le franc CFA reste à parité fixe ; le dollar fluctue, son taux est un
   taux de référence daté, écrit dans devise.js à un seul endroit.
   -------------------------------------------------------------------------- */
.money > [hidden] { display: none; }

.currency__taux {
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.section--dark .currency__taux,
.hero .currency__taux,
.section--navy-band .currency__taux { color: var(--mist); }

/* --------------------------------------------------------------------------
   16.9 Petites améliorations de lecture des tableaux comparatifs
   -------------------------------------------------------------------------- */
.table-wrap table td .pill { white-space: nowrap; }
.compare td:first-child { font-weight: 600; }

/* --------------------------------------------------------------------------
   16.10 Contraste des notes et métadonnées sur les fonds sombres
   Les sections marine (bandeau et héro) héritaient de la couleur de texte
   des fonds clairs : les notes y étaient trop peu lisibles. Corrigé ici,
   sans toucher aux fonds clairs.
   -------------------------------------------------------------------------- */
.hero .table-note,
.section--dark .table-note,
.section--navy-band .table-note { color: var(--mist); }

.hero .legal__meta,
.section--dark .legal__meta,
.section--navy-band .legal__meta {
  color: var(--mist);
  border-left-color: var(--gold);
}

.hero .demo__note,
.section--dark .demo__note { color: var(--mist); }

/* --------------------------------------------------------------------------
   17. Compte établissement scolaire — page « Écoles » et formulaire
   Ajouts uniquement : aucune règle existante n'est modifiée. La page
   ecoles.html réutilise les blocs de la charte (section, carte, palier)
   et n'ajoute que ce qui lui est propre : le formulaire de lettre
   d'intention et son état d'envoi.
   -------------------------------------------------------------------------- */
.formulaire {
  background: var(--paper, #FFFDF7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow);
}
.formulaire__grille { display: grid; gap: 1.1rem; }
.formulaire__paire { display: grid; gap: 1.1rem; }
.champ { display: flex; flex-direction: column; gap: 0.35rem; }
.champ > label { font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.champ__aide { font-size: 0.83rem; color: var(--ink-soft); margin: 0; }
.champ__obligatoire { color: var(--red-ink, #B42318); font-weight: 700; }
.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="number"],
.formulaire select,
.formulaire textarea {
  font: inherit;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
  background: #fff;
  color: var(--navy);
}
.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
  outline: 3px solid var(--gold-soft, #E8C766);
  outline-offset: 1px;
  border-color: var(--gold);
}
.formulaire textarea { min-height: 7rem; resize: vertical; }
.formulaire__case { display: flex; gap: 0.6rem; align-items: flex-start; }
.formulaire__case input { width: auto; margin-top: 0.35rem; flex: none; }
.formulaire__pied { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reponse {
  margin-top: 1.2rem;
  border-left: 6px solid var(--green);
  border-radius: var(--radius-sm, 10px);
  padding: 0.9rem 1.1rem;
  background: rgba(16, 185, 129, 0.10);
  display: none;
}
.reponse--visible { display: block; }
.reponse--erreur { border-left-color: var(--red); background: rgba(239, 68, 68, 0.10); }
.reponse__titre { font-family: var(--font-title); font-size: 1.1rem; margin: 0 0 0.4rem; color: var(--navy); }
.reponse__reference { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; font-weight: 700; }
.etapes-dues { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.etapes-dues li { display: flex; gap: 0.7rem; align-items: baseline; font-size: 0.95rem; }
.etapes-dues span.num { font-family: var(--font-title); color: var(--gold); font-weight: 700; min-width: 1.4rem; }
@media (min-width: 720px) {
  .formulaire__paire { grid-template-columns: 1fr 1fr; }
  .formulaire__grille { gap: 1.3rem; }
}

/* --------------------------------------------------------------------------
   16.14 Comparatif à coches — ajout du 6 octobre 2026
   --------------------------------------------------------------------------
   Décision du commanditaire : sur la page des offres, « tu coches les
   principales fonctions en indiquant : plus de détails sur les
   interfaces connectées ». Chaque ligne du comparatif porte donc, sous
   le nom de la fonction, le renvoi vers l'écran connecté qui porte le
   détail. C'est un ajout : aucune règle existante n'est modifiée, et la
   classe ne sert qu'à cette page.
   -------------------------------------------------------------------------- */
.compare-detail {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-soft, #4A5568);
  max-width: 30ch;
}
.section--dark .compare-detail { color: var(--cream-soft, #E8E3D6); }
.compare th[scope="row"] { vertical-align: top; }


/* ==========================================================================
   LES OFFRES ET LES PRIX — premier écran de la page des offres
   ==========================================================================
   DÉCISION DU FONDATEUR, 7 OCTOBRE 2026 : les offres et leurs prix d'abord,
   un bouton sous chaque offre, et tout le reste après — « on les découvre en
   défilant vers le bas ».

   L'ANNUEL EST L'ÉTAT ÉCRIT DANS LE HTML : sans JavaScript la page reste
   donc lisible dans l'état par défaut. `duree.js` ne fait que CHOISIR entre
   deux variantes déjà présentes — il n'écrit aucun montant.
   ========================================================================== */

.duree {
  display: inline-flex;
  gap: 0.25rem;
  margin: 1.6rem auto 0.6rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
}
.duree__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.duree__btn[aria-pressed="true"] {
  background: var(--navy);
  color: var(--cream);
  box-shadow: var(--shadow);
}
.duree__deal {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.duree__note {
  max-width: 62ch;
  margin: 0.6rem auto 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

/* --- Les quatre colonnes ------------------------------------------------ */
.offres-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
  align-items: start;
}
@media (max-width: 1080px) { .offres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .offres-grille { grid-template-columns: minmax(0, 1fr); } }

.offre-carte {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.25rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.offre-carte__niveau {
  margin: 0;
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
}
.offre-carte__type {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.offre-carte__prix {
  margin: 0.5rem 0 0;
  font-size: 1.06rem;
  color: var(--navy);
}
.offre-carte__prix strong { font-size: 1.35rem; }
.offre-carte__prix s { color: var(--ink-soft); font-weight: 400; }
.offre-carte__prix--dossier {
  font-family: var(--font-title);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gold-ink);
}
.offre-carte__precision {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.offre-carte__liste {
  margin: 0.2rem 0 0;
  padding-left: 1.05rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.offre-carte__formule {
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line);
}
.offre-carte__formule-titre {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.offre-carte__action { margin: auto 0 0; padding-top: 0.6rem; }
.offre-carte__action .btn { width: 100%; text-align: center; line-height: 1.3; }

.etiquette-deal {
  display: inline-block;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: middle;
}

/* La médiane est mise en avant, la plus haute dans un traitement distinct —
   et la colonne Écoles reste sobre : « l'une s'achète, l'autre se demande ». */
.offre-carte--mise-en-avant { border-color: var(--gold); border-width: 2px; }
.offre-carte--noble {
  border-color: var(--navy);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-logo) 100%);
  color: var(--cream);
}
.offre-carte--noble .offre-carte__niveau,
.offre-carte--noble .offre-carte__prix { color: var(--gold-light); }
.offre-carte--noble .offre-carte__type,
.offre-carte--noble .offre-carte__precision,
.offre-carte--noble .offre-carte__liste,
.offre-carte--noble .offre-carte__prix s { color: var(--cream-soft, #E8E3D6); }
.offre-carte--noble .offre-carte__formule { border-top-color: var(--line-dark); }
.offre-carte--noble .offre-carte__formule-titre { color: var(--gold-light); }
.offre-carte--dossier { background: var(--cream); }

/* --- La bascule Annuel / Mensuel --------------------------------------- */
/**
 * ⚠️ CES DEUX CLASSES ONT ÉTÉ RENOMMÉES LE 7 OCTOBRE 2026 :
 * `prix--annuel` → `prix__variante--annuel`. CE N'EST PAS DE LA MISE EN
 * FORME, C'EST LA MÊME RÈGLE QUE CELLE QUI FERME LE DÉFAUT DE DIFFUSION.
 * ------------------------------------------------------------------
 * LE DÉFAUT, MESURÉ CE JOUR-LÀ. Les jetons de tarifs portent des préfixes
 * communs : `TARIF_FRANCE_PREMIUM` est le préfixe de
 * `TARIF_FRANCE_PREMIUM_MOIS`, de `TARIF_FRANCE_PREMIUM_INDIVIDUEL`, et de
 * quatre autres. Le rendu de la vitrine remplaçait les jetons dans l'ordre de
 * construction de sa table ; le jeton COURT passait donc avant le jeton LONG
 * qui le contient, et la page servait à un client un texte où
 * `{{…_PREMIUM_MOIS}}` restait collé derrière la valeur de `{{…_PREMIUM}}`.
 * Un jeton brut, affiché sur la page qui vend.
 *
 * Le correctif est dans `lib/editeur.js` (remplacement du plus long au plus
 * court) et il est VÉRIFIÉ : `outils/verifier-modules.js`, section 6, refuse
 * qu'un jeton servi soit le préfixe d'un autre jeton DE LA MÊME PAGE. C'est
 * la condition exacte du défaut, ni plus ni moins.
 *
 * CE RENOMMAGE SERT LA MÊME RÈGLE, APPLIQUÉE AU BALISAGE — ET IL FAUT LE
 * DIRE HONNÊTEMENT : `prix--annuel` n'a JAMAIS fabriqué de jeton. Le
 * contrôle de la section 6 compare les jetons d'une même page, pas les noms
 * de classes. Ce renommage ne ferme donc aucun défaut mesuré.
 *
 * IL EST FAIT QUAND MÊME, POUR UNE RAISON PRÉCISE : la page des offres est
 * désormais celle où les jetons de tarifs sont les plus nombreux (21 jetons
 * distincts, dont six préfixés par `TARIF_FRANCE_PREMIUM`), et un nom de
 * classe qui RESSEMBLE à un jeton rend la prochaine lecture fausse — celle
 * d'un humain comme celle d'un contrôle écrit plus tard. `prix__variante--`
 * dit ce que la classe est : une variante d'affichage d'un prix, pas un prix.
 * C'est un gain de lisibilité, pas une correction, et il est présenté comme
 * tel.
 *
 * LE COMPORTEMENT EST IDENTIQUE : la règle de bascule n'a pas changé d'un
 * caractère, et `duree.js` ne fait toujours que CHOISIR entre deux variantes
 * DÉJÀ présentes dans le HTML.
 * ------------------------------------------------------------------
 */
html[data-duree="annuel"] .prix__variante--mensuel { display: none; }
html[data-duree="mensuel"] .prix__variante--annuel { display: none; }

/* ==========================================================================
   LA PAGE « CRÉER SON COMPTE » — sept boutons, un seul écran
   ========================================================================== */
.compte-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}
@media (max-width: 900px) { .compte-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .compte-grille { grid-template-columns: minmax(0, 1fr); } }

.compte-bouton {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.05rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: left;
}
.compte-bouton__offre {
  font-family: var(--font-title);
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--navy);
}
.compte-bouton__prix { font-size: 0.92rem; color: var(--navy); }
.compte-bouton__prix strong { font-size: 1.12rem; }
.compte-bouton__dit {
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.compte-bouton .btn { width: 100%; text-align: center; }
.compte-bouton--ecoles { background: var(--cream); }

/* ==========================================================================
   LA PAGE DE TÉLÉCHARGEMENT
   ========================================================================== */
.telechargement {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: start;
  margin-top: 1.6rem;
}
@media (max-width: 900px) { .telechargement { grid-template-columns: minmax(0, 1fr); } }
.telechargement__carte {
  padding: 1.3rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.telechargement__carte--principal { border-color: var(--gold); border-width: 2px; }
.telechargement__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0.3rem 0 0.9rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.telechargement__aide {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.telechargement__discret {
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ==========================================================================
   LE FORMULAIRE ÉCOLE — le pays commande le formulaire
   ========================================================================== */
.rep__mention {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--cream);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.rep__mention h4 {
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--navy);
}
.rep__mention p { margin: 0 0 0.4rem; }
.rep__mention p:last-child { margin-bottom: 0; }

.bride-pays {
  margin: 0.9rem 0 0;
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius-sm);
  background: rgba(6, 182, 212, 0.10);
  border-left: 4px solid var(--cyan);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.bride-pays strong { color: var(--navy); }

/* ==========================================================================
   LA PAGE DE SOUSCRIPTION SUCCINCTE — LE MODÈLE DONNÉ PAR LE FONDATEUR
   ==========================================================================
   DÉCISION DU FONDATEUR, 7 OCTOBRE 2026, MOT POUR MOT, EN DONNANT LA PAGE DE
   RÉFÉRENCE (une page de souscription directe, « assez succincte, il n'y a
   rien d'autre dessus, juste un bouton discret en bas ») :

     · UN SÉLECTEUR DE TYPE, en plus du sélecteur de durée : Individuel ·
       Famille · Écoles. On n'affiche plus que TROIS CARTES à la fois.
     · LE PRIX BARRÉ, LE PRIX RÉEL, ET LA PASTILLE « 2 MOIS OFFERTS ».
     · LE BOUTON IMMÉDIATEMENT SOUS LE PRIX, jamais après la liste.
     · ET PAS DE « LE PLUS POPULAIRE » : ce qui est écrit à la place est un
       jugement sur NOS prix (« Le meilleur rapport »), pas une affirmation
       sur nos clients.

   ⚠️ AUCUNE RÈGLE EXISTANTE N'EST MODIFIÉE ICI : tout est ajouté à la fin,
   sous des noms qui n'existaient pas. `duree.js` et `type-offre.js` ne font
   que CHOISIR entre des variantes DÉJÀ présentes dans le HTML — ils
   n'écrivent aucun montant.
   ========================================================================== */

/* --- 1. Le héro resserré ------------------------------------------------- */
/* La page de souscription n'a plus d'argumentaire au-dessus des cartes : son
   premier écran doit porter le titre, les sélecteurs et les prix. Le héro
   garde son identité (fond marine, titre doré) mais rend la place. */
.hero--compact { padding: 2.2rem 0 1.6rem; }
.hero--compact h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.hero--compact .hero__promise { margin-bottom: 1rem; }
@media (max-width: 640px) { .hero--compact { padding: 1.5rem 0 1.1rem; } }

/* --- 2. LA BANDE DU TYPE DE COMPTE (Individuel · Famille · Écoles) ------- */
/**
 * ⚠️ ELLE REMPLACE LA PASTILLE, ET LA RAISON EST UNE MESURE, PAS UN GOÛT.
 * ------------------------------------------------------------------
 * DÉCISION DU FONDATEUR, 7 OCTOBRE 2026, MOT POUR MOT :
 *
 *   « Le mot FAMILLE doit — et Écoles ou Établissement — doivent être mis en
 *     avant, dans le rectangle que je propose. »
 *
 * Il entourait le GRAND BLANC qui suit les deux sélecteurs, et il y pointait
 * deux flèches. Ce blanc ne portait qu'une note grise de 13,76 px. Les deux
 * mots, eux, vivaient dans une pastille, à 16 px, en `--navy` pour l'option
 * choisie et en `--cream` pour les deux autres : donc, pour « Famille » et
 * « Écoles », les deux mots les PLUS DISCRETS de la page.
 *
 * ⚠️ CE QUI A CHANGÉ, ET CE QUI N'A PAS CHANGÉ :
 *   · les mots passent de 16 px à 1,35 rem (~21,6 px), en gras 800 — et ils
 *     vivent maintenant DANS le rectangle, pas au-dessus ;
 *   · le mot ÉCOLES prend la même taille que les deux autres, alors que la
 *     pastille le rangeait avec les options non choisies ;
 *   · le blanc n'est plus vide : il porte un intitulé, les trois mots, et
 *     une note ;
 *   · ⚠️ ET LE COMPORTEMENT EST INTACT : même `data-offre-type-set`, même
 *     `aria-pressed`, même script `type-offre.js`. Seule la forme a bougé.
 *
 * ⚠️ POURQUOI LE SEGMENT ÉCOLES EST UN VRAI `href` ET PAS UN BOUTON : en
 * choisissant « Écoles et établissements », on ne filtre pas trois cartes —
 * on quitte la grille des forfaits familiaux pour le dossier scolaire. Le
 * segment MÈNE donc à son formulaire, et la règle 6 de `type-offre.js`
 * garantit que le clic n'est pas avalé par la bascule.
 *
 * ⚠️ ET LE BLOC EST EN DEUX COLONNES : le titre occupe la première, les mots
 * la seconde. En dessous de 880 px il repasse sur une colonne — mesuré, une
 * bande à deux colonnes sur un écran étroit empile des mots de 21,6 px dans
 * une colonne de 140 px.
 * ------------------------------------------------------------------
 */
.offre-type-vedette {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 0.9rem 2.2rem;
  align-items: center;
  max-width: 72rem;
  margin: 2.1rem auto 0;
  padding: 1.5rem 1.7rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--paper);
  box-shadow: var(--shadow);
  text-align: left;
}
.offre-type-vedette__titre {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.offre-type-vedette__accroche {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
}
.offre-type-vedette__mots {
  display: grid;
  gap: 0.5rem;
  align-content: center;
}
/**
 * ⚠️ `display: block` EST OBLIGATOIRE ICI, PAS `inline-block` : la règle
 * générique `a { color: … }` de cette feuille vise le LIEN LUI-MÊME, et une
 * règle posée sur le PARENT ne la bat pas. Avec `inline-block`, les trois mots
 * s'affichaient en couleur de lien, c'est-à-dire exactement l'inverse de ce
 * que le fondateur demande.
 */
.offre-type-vedette__mot {
  display: block;
  padding: 0.6rem 1rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--cream);
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-decoration: none;
}
.offre-type-vedette__mot:hover { border-color: var(--gold); color: var(--navy); }
/**
 * ⚠️ L'ÉTAT CHOISI GARDE LE MÊME LANGAGE QUE LA PASTILLE QU'IL REMPLACE :
 * fond marine, texte crème. C'est ce qui rend « Individuel » lisible comme un
 * choix enfoncé plutôt que comme un mot parmi trois.
 */
.offre-type-vedette__mot[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--cream);
  box-shadow: var(--shadow);
}
.offre-type-vedette__note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ink-soft);
}
.offre-type-vedette__mot[aria-pressed="true"] .offre-type-vedette__note { color: var(--cream-soft, #E8E3D6); }
.offre-type-vedette__mot--ecole { border-color: var(--gold); }
.offre-type-vedette__mot--ecole .offre-type-vedette__note { color: var(--gold-ink); }
.offre-type-vedette__mot--ecole[aria-pressed="true"] .offre-type-vedette__note { color: var(--gold-light); }
@media (max-width: 880px) {
  .offre-type-vedette { grid-template-columns: minmax(0, 1fr); padding: 1.2rem 1.1rem 1.3rem; }
  .offre-type-vedette__mot { font-size: 1.15rem; }
}
/* Les deux sélecteurs (type et durée) et leur note sont centrés : ils vivent
   dans un `.wrap` qui, lui, porte du texte aligné à gauche. La règle porte sur
   les ENFANTS DIRECTS, donc sur les sélecteurs eux-mêmes, jamais sur les
   cartes ni sur le tableau comparatif de la page de comparaison. */
#offres .wrap > .type-offre,
#offres .wrap > .duree,
#offres .wrap > .type-offre__note-bloc,
#offres .wrap > .duree__note,
#offres .wrap > .center { text-align: center; }
#offres .wrap > .type-offre,
#offres .wrap > .duree { margin-left: auto; margin-right: auto; }

/* --- 3. Les trois blocs de type ----------------------------------------- */
/**
 * ⚠️ DEUX GRILLES IMBRIQUÉES, ET C'EST UN DÉFAUT MESURÉ QUI A IMPOSÉ CETTE
 * FORME — PAS UNE PRÉFÉRENCE DE RÉDACTION.
 * ------------------------------------------------------------------
 * Première version : les trois blocs de type vivaient À L'INTÉRIEUR de
 * `.offres-grille`, qui était elle-même une grille `repeat(3, 1fr)`. Chaque
 * bloc occupait donc UNE COLONNE de cette grille, et les trois cartes
 * qu'il portait se répartissaient dans le tiers restant.
 *
 * MESURÉ DANS LE NAVIGATEUR, sur la page servie : `.offres-grille` valait
 * `348.812px 348.812px 348.812px` et le bloc visible `348.812px` — une seule
 * colonne de 349 px, les trois cartes empilées dans un quart de page, la
 * moitié droite vide. **Le défaut ne se voyait ni dans le fichier ni dans un
 * contrôle : il fallait regarder la page.**
 *
 * LA FORME CORRECTE SÉPARE LES DEUX RÔLES, parce qu'ils n'ont rien à voir :
 *   · `.offres-zone` est le CONTENEUR des types : il ne fait aucune mise en
 *     page, il laisse chaque bloc prendre toute la largeur ;
 *   · `.offres-grille` est la grille DES CARTES, portée par chaque bloc.
 * Un seul bloc est visible à la fois, donc une seule grille est active — et
 * elle a toute la largeur pour ses trois colonnes.
 * ------------------------------------------------------------------
 */
.offres-zone { display: block; margin-top: 2rem; }
.offres-bloc { display: none; width: 100%; }
html[data-offre-type="individuel"] .offres-bloc[data-offre-type="individuel"],
html[data-offre-type="famille"] .offres-bloc[data-offre-type="famille"],
html[data-offre-type="ecoles"] .offres-bloc[data-offre-type="ecoles"] { display: grid; }

/* --- 4. La grille passe de quatre colonnes à trois ---------------------- */
/* Le sélecteur de type a remplacé la quatrième colonne : la grille ne porte
   donc plus que trois cartes, plus larges et plus lisibles. */
.offres-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .offres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .offres-grille { grid-template-columns: minmax(0, 1fr); } }
/* La carte Écoles est SEULE dans son bloc : elle ne s'étire pas sur trois
   colonnes vides, elle garde la largeur d'une carte.
   ⚠️ LA LARGEUR SE POSE SUR LA **CARTE**, JAMAIS SUR LE BLOC. Poser
   `max-width: 30rem` sur le bloc plafonnait la GRILLE, donc rétrécissait
   aussi les trois cartes des types Individuel et Famille — mesuré :
   `gridTemplateColumns` valait « 348.812px », une seule colonne. */
.offres-bloc[data-offre-type="ecoles"] { grid-template-columns: minmax(0, 1fr); }
.offres-bloc[data-offre-type="ecoles"] > .offre-carte { max-width: 30rem; margin-left: auto; margin-right: auto; }

/* --- 5. Le prix barré, le prix réel, et la pastille --------------------- */
/* « 6,90 € » barré, « 5,75 € » en grand, « /mois », et « 2 MOIS OFFERTS ».
   Les trois nombres sont CALCULÉS par `lib/tarifs.js` : la page ne les
   recopie jamais, et elle ne les recalcule pas non plus. */
.prix__unite { font-size: 0.86rem; font-weight: 400; color: var(--ink-soft); }
.prix__barre { margin-left: 0.15rem; color: var(--ink-soft); font-weight: 400; }
.prix__barre .money { text-decoration: line-through; }
.offre-carte--noble .prix__unite,
.offre-carte--noble .prix__barre { color: var(--cream-soft, #E8E3D6); }

/* --- 6. Le bouton, immédiatement sous le prix --------------------------- */
/* « On choisit d'abord, on lit ensuite. » Le bouton n'est donc plus poussé
   en bas de carte (`.offre-carte__action` portait `margin: auto 0 0`) : il
   vient juste après le prix, et la liste des fonctionnalités suit. */
.offre-carte__action--sous-prix { margin: 0; padding-top: 0.15rem; }
.offre-carte__action--sous-prix .btn { width: 100%; text-align: center; line-height: 1.3; }

/* La pastille du rapport qualité-prix — un jugement sur NOS prix, jamais
   une preuve sociale : voir le commentaire en tête de `offres.html`. */
.etiquette-deal--rapport {
  margin-left: 0.5rem;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-ink);
  vertical-align: middle;
}
.offre-carte--noble .etiquette-deal--rapport { color: var(--gold-light); border-color: var(--gold-light); }

/**
 * « TOP DEAL » — SUR LA CARTE, ET NULLE PART AILLEURS.
 * ------------------------------------------------------------------
 * CORRECTION DU FONDATEUR, 7 OCTOBRE 2026 : « TOP DEAL n'est pas une mention
 * qui se perd quelque part : l'œil doit le voir sur l'offre la plus
 * avantageuse mise en avant. »
 *
 * Elle vivait sur le BOUTON « Annuel » du sélecteur, à 10,88 px, dans un
 * bouton de 16 px — c'est-à-dire à l'endroit exact où l'œil ne cherche pas un
 * prix. Elle vit maintenant DANS l'en-tête de la carte, sur la même ligne que
 * le nom de l'offre, dans un bloc plus grand et plus contrasté (fond marine,
 * texte or : la forme la plus voyante disponible dans cette palette).
 *
 * ⚠️ ELLE EST DANS LA VARIANTE ANNUELLE, DONC ELLE SUIT LA DURÉE. En mensuel,
 * `.prix__variante--annuel` est caché et la mention disparaît avec lui — ce
 * qui est voulu : un « top deal » affiché à côté d'un prix qui n'est PAS le
 * meilleur serait exactement le mensonge que cette page s'interdit.
 * ------------------------------------------------------------------
 */
.etiquette-deal--top {
  margin-left: 0.5rem;
  padding: 0.16rem 0.5rem;
  border: 1px solid var(--navy-deep, #061223);
  background: var(--navy);
  color: var(--gold-light);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  vertical-align: middle;
}
/**
 * ⚠️ ET ELLE DISPARAÎT EN MENSUEL — MESURÉ, PUIS CORRIGÉ.
 * ------------------------------------------------------------------
 * La première version laissait « TOP DEAL » dans l'en-tête de la carte, donc
 * VISIBLE DANS LES DEUX DURÉES. La capture du mode mensuel l'a montré : la
 * carte Standard portait « TOP DEAL » à côté du nom, et « 6,90 € /mois » juste
 * en dessous — un « top deal » collé à un prix qui n'est PAS le meilleur.
 * C'est exactement le mensonge que cette page s'interdit, et il ne se voyait
 * NI dans le fichier NI dans un contrôle : il fallait regarder la page.
 *
 * La règle ci-dessous la fait suivre la durée, comme le prix barré et la
 * pastille « 2 MOIS OFFERTS » : en mensuel, il n'y a plus de meilleure offre
 * à désigner, donc plus de mention.
 * ------------------------------------------------------------------
 */
html[data-duree="mensuel"] .etiquette-deal--top { display: none; }
/* La carte Écoles ne porte PAS de « top deal », et c'est délibéré : il n'existe
   qu'UNE offre scolaire, donc « la plus avantageuse » n'a aucun sens entre
   plusieurs. Elle porte le mot de son régime : « Sur dossier ». */
.etiquette-deal--dossier {
  margin-left: 0.5rem;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-ink);
  vertical-align: middle;
}

/* --- 7. Le bouton discret du bas ---------------------------------------- */
/* « juste un bouton discret en bas, "voir la comparaison complète" ». En
   texte, sobre : il ne concurrence pas les boutons de souscription, et il
   donne une porte à celui qui hésite. */
.lien-discret { margin: 1.8rem 0 0.4rem; text-align: center; }
.lien-discret a {
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.lien-discret a:hover, .lien-discret a:focus { color: var(--navy); }