/* ==========================================================================
   CAPMEDIA ACADEMY · az.css
   Les 15 composants de la charte, en CSS de production.

   Les maquettes Claude Design portent les états de survol sur un attribut
   `style-hover` interprété par le canvas. Ici ils sont traduits en vrais
   :hover / :focus-visible / :disabled / [aria-current].

   Dépend de tokens.css, chargé avant.
   ========================================================================== */

/* --- Socle --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--texte);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }

a { color: var(--action); text-decoration: none; }
a:hover { color: var(--action-survol); text-decoration: underline; text-underline-offset: 2px; }

::selection { background: var(--anneau); }

/* --- Typographie --------------------------------------------------------- */
/* Propriétés explicites plutôt que le raccourci `font:` : plus fiable et
   plus facile à surcharger. Les jetons --t-* restent disponibles pour les
   maquettes et les prochaines passes. */

.t-display {
  font-weight: 700;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.t-h1 {
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: var(--ls-h1);
  text-wrap: balance;
}
.t-h2 {
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}
.t-h3 {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.t-lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--texte-2);
  text-wrap: pretty;
}
.t-corps  { font-size: 16px; line-height: 1.6; }
.t-petit  { font-size: 14px; line-height: 1.5; }
.t-micro  { font-size: 12px; line-height: 1.4; font-weight: 500; }
.t-mono   { font-family: var(--police-mono); }

.t-2      { color: var(--texte-2); }
.t-3      { color: var(--texte-3); }
.t-fort   { font-weight: 600; }
.t-centre { text-align: center; }
.t-nb     { font-variant-numeric: tabular-nums; }

/* L'étiquette de section : c'est elle qui donne le rythme éditorial */
.etiquette {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.etiquette-mono {
  font-family: var(--police-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-3);
}

/* --- Structure ----------------------------------------------------------- */
.enveloppe {
  width: 100%;
  max-width: var(--conteneur-marketing);
  margin-inline: auto;
  padding-inline: var(--marge-mobile);
}
.colonne {
  width: 100%;
  max-width: var(--colonne-lecture);
}
.colonne-centree {
  width: 100%;
  max-width: var(--colonne-lecture);
  margin-inline: auto;
}

/* Les sections sont séparées par du VIDE, jamais par un fond alterné. */
.sections {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vw, var(--e-10));
}
.section { display: flex; flex-direction: column; gap: var(--e-6); }
.section-tete { display: flex; flex-direction: column; gap: var(--e-2); }

/* Le seul écart au fond blanc : --bg-2, et deux fois maximum par page. */
.creux {
  background: var(--bg-2);
  border-radius: var(--r-3);
  padding: clamp(32px, 5vw, var(--e-7));
}

.pile   { display: flex; flex-direction: column; }
.g-1 > * + * { margin-top: var(--e-1); }
.g-2 > * + * { margin-top: var(--e-2); }
.g-3 > * + * { margin-top: var(--e-3); }
.g-4 > * + * { margin-top: var(--e-4); }
.g-5 > * + * { margin-top: var(--e-5); }
.g-6 > * + * { margin-top: var(--e-6); }
.g-7 > * + * { margin-top: var(--e-7); }

.rang { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.rang-espace { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.rang-haut { align-items: flex-start; }

.grille { display: grid; gap: var(--e-5); }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille-auto { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
@media (max-width: 900px) { .grille-3, .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grille-2, .grille-3, .grille-4 { grid-template-columns: minmax(0, 1fr); } }

/* 10 : Séparateur. Rare. */
.filet { border: 0; border-top: 1px solid var(--trait); margin-block: var(--e-5); }

/* --- 01 à 04 : Boutons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  border: 1px solid transparent;
  border-radius: var(--r-rond);          /* pill, style Apple / Revolut */
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-survol), color var(--t-survol),
              border-color var(--t-survol), transform var(--t-survol),
              box-shadow var(--t-survol);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--anneau); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; }

/* 01 : principal */
.btn-principal {
  background: var(--action); color: #fff;
  box-shadow: 0 1px 2px rgba(35,131,226,.28), 0 2px 8px -2px rgba(35,131,226,.4);
}
.btn-principal:hover {
  background: var(--action-survol); color: #fff;
  box-shadow: 0 2px 4px rgba(35,131,226,.32), 0 8px 20px -4px rgba(35,131,226,.5);
}
.btn-principal:active { background: var(--action-survol); }
.btn-principal:disabled { opacity: 0.4; }

/* 02 : secondaire */
.btn-secondaire { background: transparent; color: var(--texte); border-color: var(--trait-fort); }
.btn-secondaire:hover { background: var(--survol); color: var(--texte); }
.btn-secondaire:active { background: var(--bg-3); }
.btn-secondaire:focus-visible { border-color: var(--action); }
.btn-secondaire:disabled { color: var(--texte-3); border-color: var(--trait); }

/* 03 : fantôme. Le bouton le plus utilisé dans l'interface. */
.btn-fantome {
  background: transparent;
  color: var(--texte-2);
  font-weight: 500;
  padding: 6px 10px;
}
.btn-fantome:hover { background: var(--survol); color: var(--texte); }
.btn-fantome:active { background: var(--bg-3); color: var(--texte); }
.btn-fantome:disabled { color: var(--texte-3); opacity: 0.6; }

/* 04 : marketing large */
.btn-large { font-size: 16px; padding: 13px 28px; }
.btn-bloc { width: 100%; }

/* --- 05 : Champ de saisie ------------------------------------------------ */
.champ {
  width: 100%;
  background: var(--bg);
  color: var(--texte);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-rond);       /* pill, comme les boutons */
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 16px;
  outline: none;
  transition: border-color var(--t-survol), box-shadow var(--t-survol);
}
/* Un champ multi-lignes ne peut pas être une pilule : rayon doux à la place */
textarea.champ { border-radius: 18px; padding: 12px 16px; }
.champ::placeholder { color: var(--texte-3); }
.champ:hover { border-color: var(--texte-3); }
.champ:focus { border-color: var(--action); box-shadow: 0 0 0 3px var(--anneau); }
.champ[aria-invalid="true"] { border-color: var(--danger); color: var(--danger); }
.champ:disabled { background: var(--bg-2); color: var(--texte-3); border-color: var(--trait); }
.champ-large { font-size: 16px; padding: 13px 20px; }

.etiquette-champ {
  display: block;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: var(--texte-2);
  margin-bottom: var(--e-2);
}

/* --- 06 : Encadré de contenu -------------------------------------------- */
/* Aucune bordure. Fond voile, rayon 4px, emoji aligné sur la 1re ligne. */
.encadre {
  display: flex;
  gap: var(--e-3);
  background: var(--voile-gris);
  border-radius: var(--r-2);
  padding: var(--e-4);
  margin-block: var(--e-3);
  font-size: 16px;
  line-height: 1.65;
}
.encadre > .marqueur {
  flex: none;
  display: grid; place-items: center;
  width: 20px; height: 26px;
  color: var(--texte-2);
}
.encadre--astuce    > .marqueur { color: var(--action); }
.encadre--attention > .marqueur { color: #B8860B; }
.encadre--piege     > .marqueur { color: var(--danger); }
.encadre--action    > .marqueur { color: var(--valide); }
.ico { display: inline-block; vertical-align: -0.15em; }
.rang-etoiles { display: inline-flex; gap: 2px; color: #E7B93C; vertical-align: -0.15em; }
.encadre > div { min-width: 0; }
.encadre > div > * + * { margin-top: var(--e-3); }

.encadre--note      { background: var(--voile-gris); }
.encadre--astuce    { background: var(--voile-bleu); }
.encadre--attention { background: var(--voile-jaune); }
.encadre--piege     { background: var(--voile-rouge); }
.encadre--action    { background: var(--voile-vert); }

/* --- 07 : Bloc de code -------------------------------------------------- */
.bloc-code { position: relative; margin-block: var(--e-3); }
pre {
  background: var(--bg-3);
  border-radius: var(--r-2);
  padding: var(--e-4);
  overflow-x: auto;
  font-family: var(--police-mono);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texte);
}
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* Le bouton Copier est invisible et n'apparaît qu'au survol du bloc. */
.copier {
  position: absolute;
  top: var(--e-2);
  right: var(--e-2);
  z-index: 1;
  background: var(--bg);
  color: var(--texte-2);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-1);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  padding: 3px 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-apparition), color var(--t-survol);
}
.bloc-code:hover .copier,
.copier:focus-visible,
.copier[data-copie="1"] { opacity: 1; }
.copier:hover { color: var(--texte); }
.copier:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--anneau); }

/* --- 08 : Code en ligne ------------------------------------------------- */
code, kbd {
  background: var(--bg-3);
  border-radius: var(--r-1);
  padding: 2px 5px;
  color: var(--danger);
  font-family: var(--police-mono);
  font-size: 0.9em;
  line-height: 1;
}

/* --- 09 : Ligne de barre latérale --------------------------------------- */
.lien-module {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  min-height: 28px;
  padding: var(--e-1) var(--e-2);
  border: 0;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--texte-2);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-survol), color var(--t-survol);
}
.lien-module:hover { background: var(--survol); color: var(--texte); }
.lien-module:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--anneau); }
.lien-module[aria-current="true"] {
  background: var(--bg-3);
  color: var(--texte);
  font-weight: 600;
}
.lien-module .num {
  flex: none;
  width: 18px;
  font-family: var(--police-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}
.lien-module.est-fait .num { color: var(--valide); }
.lien-module.est-verrouille { color: var(--texte-3); }
.lien-module .titre-module {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 11 : Tableau ------------------------------------------------------- */
.cadre-tableau { overflow-x: auto; margin-block: var(--e-4); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
th {
  text-align: left;
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--trait);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-3);
}
td {
  padding: 10px var(--e-3);
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
th:first-child, td:first-child { padding-left: 0; }
th:last-child,  td:last-child  { padding-right: 0; }
td.nb, th.nb { text-align: right; font-variant-numeric: tabular-nums; }

/* --- 12 : Progression --------------------------------------------------- */
.jauge {
  height: 4px;
  border-radius: var(--r-rond);
  background: var(--bg-3);
  overflow: hidden;
}
.jauge > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-rond);
  background: var(--action);
  transition: width 400ms cubic-bezier(.2, .8, .2, 1);
}

.anneau { position: relative; width: 64px; height: 64px; flex: none; }
.anneau svg { transform: rotate(-90deg); }
.anneau .piste { fill: none; stroke: var(--bg-3); stroke-width: 6; }
.anneau .arc {
  fill: none;
  stroke: var(--action);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 175.9;
  transition: stroke-dashoffset 600ms cubic-bezier(.2, .8, .2, 1);
}
.anneau .valeur {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

/* --- 13 : Pastille d'état ----------------------------------------------- */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-rond);
  padding: 4px 10px;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  background: var(--bg-3);
  color: var(--texte-2);
}
.pastille--termine    { background: var(--voile-vert); color: var(--texte); }
.pastille--encours    { background: var(--voile-bleu); color: var(--texte); }
.pastille--avenir     { background: var(--bg-3); color: var(--texte-2); }
.pastille--verrouille { background: var(--bg-3); color: var(--texte-3); }

/* --- 14 : Accordéon ----------------------------------------------------- */
.acc { border-bottom: 1px solid var(--trait); }
.acc > summary {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 14px var(--e-1);
  border-radius: var(--r-1);
  cursor: pointer;
  list-style: none;
  transition: background var(--t-survol);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::marker { content: ""; }
.acc > summary:hover { background: var(--survol); }
.acc > summary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--anneau); }

.acc .chevron {
  flex: none;
  width: 12px;
  font-size: 12px;
  line-height: 1;
  color: var(--texte-3);
  transition: transform var(--t-apparition);
}
.acc[open] > summary .chevron { transform: rotate(90deg); }

.acc .num-acc {
  flex: none;
  font-family: var(--police-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: var(--texte-3);
}
.acc .titre-acc { font-weight: 600; font-size: 16px; line-height: 1.4; }

.acc .corps-acc {
  padding: 0 var(--e-1) var(--e-4) 40px;
  animation: deplie var(--t-apparition);
}
.acc .corps-acc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texte-2);
}
.acc .corps-acc li { position: relative; padding-left: var(--e-4); }
.acc .corps-acc li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 4px; height: 4px;
  border-radius: var(--r-rond);
  background: var(--texte-3);
}
@media (max-width: 620px) { .acc .corps-acc { padding-left: var(--e-5); } }

@keyframes deplie {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Listes de contenu marketing */
.liste-marque { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.liste-marque li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
}
.liste-marque li::before {
  position: absolute;
  left: 0; top: 0.05em;
  width: 16px;
  color: var(--valide);
  font-weight: 600;
  content: "✓";
}
.liste-marque--non li::before { color: var(--texte-3); content: "✕"; }

/* --- 15 : Barre de navigation marketing --------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-survol);
}
.entete.decolle { border-bottom-color: var(--trait); }
.entete > .enveloppe {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--e-4);
  flex-wrap: nowrap;
  min-width: 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  color: var(--texte);
  text-decoration: none;
  flex: none;
}
.logo:hover { color: var(--texte); text-decoration: none; }
.logo .marque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--r-2);
  background: var(--texte);
  color: var(--bg);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

.logo img.marque { background: none; object-fit: cover; padding: 0; }

.nav-liens { display: flex; gap: 20px; flex: none; }
.nav-liens a {
  font-size: 14px;
  line-height: 1;
  color: var(--texte-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-survol);
}
.nav-liens a:hover { color: var(--texte); text-decoration: none; }
@media (max-width: 900px) { .nav-liens { display: none; } }

.lien-discret {
  font-size: 14px;
  line-height: 1;
  color: var(--texte-2);
  text-decoration: none;
}
.lien-discret:hover { color: var(--texte); text-decoration: none; }

/* --- Sélecteur de thème (clair / sombre / système) ---------------------- */
.selecteur-theme {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-3);
  border-radius: var(--r-rond);
  padding: 3px;
}
.selecteur-theme button {
  background: transparent;
  color: var(--texte-2);
  border: 0;
  border-radius: var(--r-rond);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  padding: 5px 12px;
  cursor: pointer;
  transition: background var(--t-survol), color var(--t-survol);
}
.selecteur-theme button:hover { color: var(--texte); }
.selecteur-theme button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--anneau); }
.selecteur-theme button[aria-pressed="true"] { background: var(--bg); color: var(--texte); }

/* --- Carte (rare : jamais bordure + ombre + grand rayon) ---------------- */
.carte {
  background: var(--bg);
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
  padding: var(--e-5);
}
.carte-creuse { background: var(--bg-2); border: 0; border-radius: var(--r-3); padding: var(--e-5); }

/* --- Prix --------------------------------------------------------------- */
.prix { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.prix .montant {
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.025em;
}
.prix .barre {
  font-size: 16px;
  color: var(--texte-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* --- Barre collante mobile ---------------------------------------------- */
.barre-collante {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) var(--marge-mobile) calc(var(--e-3) + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--trait);
  transform: translateY(110%);
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}
.barre-collante.visible { transform: none; }
@media (min-width: 860px) { .barre-collante { display: none; } }

/* --- Apparition au défilement ------------------------------------------- */
.apparait {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-apparition), transform var(--t-apparition);
}
.apparait.vu { opacity: 1; transform: none; }
.apparait[data-retard="1"] { transition-delay: 60ms; }
.apparait[data-retard="2"] { transition-delay: 120ms; }
.apparait[data-retard="3"] { transition-delay: 180ms; }
.apparait[data-retard="4"] { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) { .apparait { opacity: 1; transform: none; } }

/* --- Pied de page ------------------------------------------------------- */
.pied {
  border-top: 1px solid var(--trait);
  padding-block: var(--e-7);
  font-size: 14px;
  color: var(--texte-2);
}
.pied a { color: var(--texte-2); text-decoration: none; }
.pied a:hover { color: var(--texte); text-decoration: underline; text-underline-offset: 2px; }

/* --- Utilitaires -------------------------------------------------------- */
.masque { display: none !important; }
.lecteur-seul {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tourne { animation: tourne 800ms linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }


/* --- Sélecteur de langue -------------------------------------------------- */
.sel-langue { display: inline-flex; gap: 2px; }
.sel-langue a {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--texte-3);
  text-decoration: none;
  padding: 4px 7px;
  border-radius: var(--r-1);
  transition: color var(--t-survol), background var(--t-survol);
}
.sel-langue a:hover { color: var(--texte); background: var(--survol); text-decoration: none; }
.sel-langue a[aria-current="true"] { color: var(--texte); background: var(--bg-3); }

/* ==========================================================================
   Bandeau et panneau cookies
   ========================================================================== */
.cookie-bandeau {
  position: fixed;
  left: 50%; bottom: var(--e-4);
  transform: translateX(-50%) translateY(16px);
  z-index: 120;
  width: min(760px, calc(100vw - 32px));
  background: var(--bg);
  border: 1px solid var(--trait);
  border-radius: var(--r-lg, 18px);
  box-shadow: var(--ombre-flottant);
  opacity: 0;
  transition: opacity var(--t-apparition), transform var(--t-apparition);
}
.cookie-bandeau.visible { opacity: 1; transform: translateX(-50%); }
.cookie-inner {
  display: flex; align-items: center; gap: var(--e-5);
  padding: var(--e-4) var(--e-5);
}
.cookie-texte { flex: 1; min-width: 0; }
.cookie-actions { display: flex; gap: var(--e-2); flex: none; }
@media (max-width: 640px) {
  .cookie-inner { flex-direction: column; align-items: stretch; gap: var(--e-3); }
  .cookie-actions { flex-direction: column-reverse; }
  .cookie-actions .btn { width: 100%; }
}

.cookie-surcouche {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center;
  background: rgba(15,15,15,.4);
  padding: var(--marge-mobile);
  animation: fondu-surcouche 160ms ease-out;
}
.cookie-panneau {
  width: 100%; max-width: 460px;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-radius: var(--r-3);
  box-shadow: var(--ombre-flottant);
  overflow: hidden;
}
.cookie-pan-tete {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-5) var(--e-5) var(--e-3);
}
.cookie-ico {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-rond);
  background: var(--bg-3);
  color: var(--action);
  flex: none;
}
.cookie-pan-corps {
  padding: 0 var(--e-5);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.cookie-cat { padding: var(--e-4) 0; border-top: 1px solid var(--trait); }
.cookie-cat:first-child { border-top: 0; }
.cookie-cat-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: 4px; }
.cookie-cat--off { opacity: 0.6; }
.cookie-fige {
  font-size: 12px; font-weight: 500;
  color: var(--texte-3);
  background: var(--bg-3);
  border-radius: var(--r-rond);
  padding: 2px 10px;
}
.cookie-pan-pied {
  display: flex; gap: var(--e-2);
  padding: var(--e-4) var(--e-5) var(--e-5);
  border-top: 1px solid var(--trait);
}
.cookie-pan-pied .btn { flex: 1; }

/* Interrupteur, style iOS */
.cookie-switch { position: relative; display: inline-block; width: 40px; height: 24px; flex: none; cursor: pointer; }
.cookie-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cookie-switch span {
  position: absolute; inset: 0;
  background: var(--trait-fort);
  border-radius: var(--r-rond);
  transition: background var(--t-survol);
}
.cookie-switch span::before {
  content: ""; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff;
  border-radius: var(--r-rond);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform var(--t-apparition);
}
.cookie-switch input:checked + span { background: var(--action); }
.cookie-switch input:checked + span::before { transform: translateX(16px); }
.cookie-switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--anneau); }


/* ==========================================================================
   Header : repli progressif pour ne jamais déborder
   ========================================================================== */
.logo { white-space: nowrap; }
.entete .lien-discret { white-space: nowrap; flex: none; }
.entete .btn { flex: none; white-space: nowrap; }
.sel-langue { flex: none; }
.entete .selecteur-theme { flex: none; }

/* Sous 1180px : le sélecteur de thème disparaît de la barre (le thème
   automatique suit le système ; le réglage reste dans l'espace membre). */
@media (max-width: 1180px) {
  .entete .selecteur-theme { display: none; }
}
/* Sous 1024px : la nav de rubriques disparaît (déjà gérée plus bas à 900). */
@media (max-width: 1024px) {
  .entete .nav-liens { gap: 16px; }
}
@media (max-width: 560px) {
  .entete .lien-discret { display: none; }
  .entete > .enveloppe { gap: var(--e-3); }
}

/* --- Cartes de tarifs : hauteur égale, bouton aligné en bas ---------------- */
.cartes-prix { align-items: stretch; }
.cartes-prix .carte { height: 100%; }
.cartes-prix .carte .btn-bloc { margin-top: auto; }
.cartes-prix .carte { padding: clamp(24px, 3vw, 32px); }

/* ==========================================================================
   Mockup de téléphone (app Rituel) : CSS pur, épuré
   ========================================================================== */
.mock-tel {
  width: 248px;
  flex: none;
  border-radius: 42px;
  background: var(--encre-fond, #14130F);
  padding: 10px;
  box-shadow: 0 30px 60px -30px rgba(15,15,15,.5), 0 0 0 1px rgba(15,15,15,.06);
}
[data-theme="dark"] .mock-tel { box-shadow: 0 30px 60px -28px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }
.mock-ecran {
  position: relative;
  border-radius: 33px;
  background: #FBFAF8;
  overflow: hidden;
  aspect-ratio: 9 / 19;
  color: #1A1917;                       /* écran toujours clair, c'est l'app */
}
.mock-encoche {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 22px;
  background: #14130F; border-radius: 999px;
}
.mock-corps { padding: 40px 18px 16px; display: flex; flex-direction: column; height: 100%; }
.mock-heure { font-size: 11px; font-weight: 600; color: #9C978D; letter-spacing: .04em; }
.mock-titre { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 14px; }
.mock-sous  { font-size: 12px; color: #9C978D; margin-top: 2px; }
.mock-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.mock-item  {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border: 1px solid #E8E4DC; border-radius: 13px;
  font-size: 12.5px;
}
.mock-rond  { width: 18px; height: 18px; border-radius: 999px; flex: none; border: 1.5px solid #D6D1C7; }
.mock-item.fait .mock-rond { background: #2F7D52; border-color: #2F7D52; position: relative; }
.mock-item.fait .mock-rond::after {
  content: ""; position: absolute; left: 5px; top: 3px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.mock-item.fait span { color: #9C978D; text-decoration: line-through; text-decoration-color: #D6D1C7; }
.mock-cta {
  margin-top: auto;
  background: #14130F; color: #FBFAF8;
  text-align: center; font-size: 12.5px; font-weight: 600;
  padding: 12px; border-radius: 999px;
}
.mock-etiquette {
  position: absolute; bottom: -12px; right: -8px;
  background: var(--bg); border: 1px solid var(--trait);
  border-radius: 999px; padding: 7px 14px;
  font-size: 12px; font-weight: 500;
  box-shadow: var(--ombre-flottant);
  white-space: nowrap;
}
.mock-porte { position: relative; display: inline-block; }

/* Grilles contenant un mockup : passage en colonne sur mobile */
@media (max-width: 860px) {
  .creux .grille[style*="auto 1fr"] { grid-template-columns: minmax(0,1fr) !important; }
  .creux .mock-porte { margin-inline: auto; }
  .masque-tel-mobile { display: none; }
  .section .grille[style*="1fr auto"] { grid-template-columns: minmax(0,1fr) !important; }
}

/* ==========================================================================
   Cartes de formation (catalogue + cross-sell)
   ========================================================================== */
.grille-catalogue { align-items: stretch; }
.carte-formation {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 190px;
  text-decoration: none;
  color: var(--texte);
  transition: border-color var(--t-survol), transform var(--t-apparition), box-shadow var(--t-apparition);
}
.carte-formation:hover {
  text-decoration: none;
  color: var(--texte);
  border-color: var(--trait-fort);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(15, 15, 15, 0.18);
}
.cf-ico {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-rond);
  background: var(--bg-3);
  color: var(--action);
  flex: none;
}
.cf-prix { font-variant-numeric: tabular-nums; }
.cf-possede {
  position: absolute;
  top: -9px; left: var(--e-4);
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--voile-vert);
  color: var(--texte);
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-rond);
  box-shadow: 0 1px 2px rgba(15,15,15,.1);
}
.cf-possede .ico-coche { color: var(--valide); display: inline-flex; }
.carte-formation.est-possedee { border-color: var(--valide); }