/* COUCHE CSS « outil » — tout le CSS livré par l'outil (moteur, Takoprez, éditeur) vit dans UNE
   couche, dans l'ordre de chargement : entre ses feuilles, la cascade est celle d'avant les couches
   (spécificité, puis ordre). Une feuille HORS couche — une charte, un ajout d'auteur ou de client —
   l'emporte donc toujours sur l'outil, sans course à la spécificité ni !important. Preuve :
   tools/audit-styles.js (styles calculés identiques). Voir docs/GUIDE.md, « Couches CSS ». */
@layer outil {

/* ============================================================
   core/content.css — Bibliothèque des pages, thème « Aurora »
   ------------------------------------------------------------
   Composants : titres gradient, encarts verre, cartes 3D,
   frise pulsante, quiz animé + révélations en cascade (fx.js).
   ============================================================ */

.page {
  --page-pad: 32px;              /* repris par les sections pleine largeur */
  --largeur-contenu: var(--largeur-module, 880px);   /* colonne de texte ; réglable par le module (--largeur-module) */
  max-width: 880px;
  margin: 0 auto;
  --page-pad-haut: 56px;         /* repris par une section pleine largeur en tête de page */
  padding: var(--page-pad-haut) var(--page-pad) 88px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--texte);
}

/* ================= Révélation en cascade =================
   fx.js pose .fx-item (avec --i) sur les enfants directs et
   .est-visible sur la page quand elle entre à l'écran. */
.fx-item { opacity: 0; }

.page.est-visible .fx-item {
  /* délai et durée : réglages du module (« Délai entre deux blocs », « Durée d'apparition »), 24/09 ;
     une durée posée sur un bloc (réglage d'animation) reste prioritaire */
  animation: fx-entree var(--anim-duree, var(--fx-duree, 0.7s)) cubic-bezier(0.2, 1, 0.25, 1) both;
  animation-delay: calc(var(--i, 0) * var(--fx-delai, 90ms));
}

@keyframes fx-entree {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Animations d'entrée configurables par bloc (réglage « Animation d'entrée »).
   On surcharge seulement le nom : durée, easing et délai en cascade sont conservés. */
.page.est-visible .fx-item[data-anim="fondu"]  { animation-name: fx-fondu; }
.page.est-visible .fx-item[data-anim="bas"]    { animation-name: fx-bas; }
.page.est-visible .fx-item[data-anim="gauche"] { animation-name: fx-gauche; }
.page.est-visible .fx-item[data-anim="droite"] { animation-name: fx-droite; }
.page.est-visible .fx-item[data-anim="zoom"]   { animation-name: fx-zoom; }
.fx-item[data-anim="aucune"] { opacity: 1; }
.page.est-visible .fx-item[data-anim="aucune"] { animation: none; }
@keyframes fx-fondu  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-bas    { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes fx-gauche { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes fx-droite { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes fx-zoom   { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }

/* Courbe de l'animation (easing) — surcharge la timing-function par bloc */
.page.est-visible .fx-item[data-ease="lineaire"],
.ed-apercu-anim[data-ease="lineaire"]     { animation-timing-function: linear; }
.page.est-visible .fx-item[data-ease="acceleration"],
.ed-apercu-anim[data-ease="acceleration"] { animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.page.est-visible .fx-item[data-ease="deceleration"],
.ed-apercu-anim[data-ease="deceleration"] { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.page.est-visible .fx-item[data-ease="douce2"],
.ed-apercu-anim[data-ease="douce2"]       { animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
.page.est-visible .fx-item[data-ease="rebond"],
.ed-apercu-anim[data-ease="rebond"]       { animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.page.est-visible .fx-item[data-ease="elastique"],
.ed-apercu-anim[data-ease="elastique"]    { animation-timing-function: cubic-bezier(0.5, -0.6, 0.35, 1.6); }

/* Aperçu de l'animation dans l'éditeur (classe posée le temps d'un cycle, à la sélection) */
.ed-apercu-anim { animation: fx-entree 0.7s cubic-bezier(0.2, 1, 0.25, 1) both; }
.ed-apercu-anim[data-anim="fondu"]  { animation-name: fx-fondu; }
.ed-apercu-anim[data-anim="bas"]    { animation-name: fx-bas; }
.ed-apercu-anim[data-anim="gauche"] { animation-name: fx-gauche; }
.ed-apercu-anim[data-anim="droite"] { animation-name: fx-droite; }
.ed-apercu-anim[data-anim="zoom"]   { animation-name: fx-zoom; }

/* ================= Typographie ================= */
.page h1 {
  font-family: var(--police-titre);
  font-size: clamp(26px, 4.6vw, 38px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  background: var(--gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--texte); /* repli */
  animation: titre-brille 7s linear infinite;
}

@keyframes titre-brille {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* Soulignement qui se dessine sous le titre — réservé au titre de page (bloc verrouillé).
   Dans les blocs de texte ordinaires, un style « titre » n'affiche pas cette barre. */
.page h1::after {
  content: "";
  display: none;
  width: 72px;
  height: 5px;
  margin-top: 16px;
  border-radius: 3px;
  background: var(--gradient);
  transform-origin: left;
  animation: trace 0.9s 0.35s cubic-bezier(0.6, 0, 0.2, 1) both;
}
.page-bloc--titre h1::after { display: block; }

@keyframes trace {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.page h2 {
  font-family: var(--police-titre);
  font-size: 19px;
  font-weight: 700;
  margin: 40px 0 12px;
}

.page .chapeau {
  font-size: 19px;
  color: var(--attenue);
  margin: 18px 0 0;
}

.page p { margin: 15px 0; }

.page strong {
  color: var(--solaire);
  font-weight: 700;
}

.page em { color: var(--menthe); font-style: normal; }

/* ================= Encarts ================= */
.encart {
  position: relative;
  margin: 30px 0;
  padding: 20px 24px;
  border-radius: var(--rayon);
  background: var(--cadre-fond, var(--surface));
  border: 1px solid var(--surface-bord);
  overflow: hidden;
}

.encart::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gradient);
}
.encart.sans-barre::before { display: none; }
.encart.sans-barre { padding-left: 20px; }

.encart--titre {
  display: block;
  font-family: var(--police-titre);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.encart--alerte::before { background: var(--corail); }

/* ================= Cartes (relief 3D piloté par fx.js) ================= */
.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 18px;
  margin: 30px 0;
}

.carte {
  position: relative;
  padding: 22px;
  border-radius: var(--rayon);
  background: var(--surface);
  border: 1px solid var(--surface-bord);
  transform: perspective(700px)
             rotateX(calc(var(--ry, 0) * 1deg))
             rotateY(calc(var(--rx, 0) * 1deg));
  transition: border-color 0.25s, box-shadow 0.25s;
  will-change: transform;
}

.carte:hover {
  border-color: color-mix(in srgb, var(--violet) 60%, transparent);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--violet) 22%, transparent);
}

/* Halo qui suit le curseur (variables --mx/--my posées par fx.js) */
.carte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, 0.09), transparent 65%);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.carte:hover::after { opacity: 1; }

.carte h3 {
  font-family: var(--police-titre);
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}

.carte p { margin: 0; font-size: 14px; color: var(--attenue); }

.carte .carte-pictogramme {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 30%, transparent), color-mix(in srgb, var(--violet) 12%, transparent));
  color: var(--solaire);
  margin-bottom: 14px;
}

/* ================= Frise chronologique ================= */
.frise {
  list-style: none;
  margin: 34px 0;
  padding: 0;
  position: relative;
}

.frise::before {
  content: "";
  position: absolute;
  left: 6px; top: 4px; bottom: 4px;
  width: 2px;
  background: linear-gradient(var(--violet), var(--corail), var(--solaire));
  border-radius: 1px;
}

.frise li {
  position: relative;
  padding: 0 0 30px 32px;
}

.frise li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fond);
  border: 3px solid var(--corail);
  animation: pulse-point 2.4s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.5s);
}

@keyframes pulse-point {
  0%   { box-shadow: 0 0 0 0 rgba(255, 92, 138, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 92, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 92, 138, 0); }
}

.frise .frise-date {
  display: block;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ================= Quiz ================= */
.quiz-question {
  margin: 32px 0;
  padding: 24px;
  border-radius: var(--rayon);
  background: var(--surface);
  border: 1px solid var(--surface-bord);
}

.quiz-question > p {
  margin: 0 0 16px;
  font-family: var(--police-titre);
  font-size: 15px;
  font-weight: 700;
}

.quiz-choix {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin: 8px 0;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s cubic-bezier(0.3, 1.6, 0.4, 1), background 0.15s, border-color 0.15s;
}

.quiz-choix:hover {
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  transform: translateX(6px);
}

.quiz-choix:has(input:checked) {
  border-color: var(--violet);
  background: color-mix(in srgb, var(--violet) 16%, transparent);
  transform: scale(1.015);
}

.quiz-choix input { margin-top: 4px; accent-color: var(--violet); }

.quiz-question.est-corrigee .quiz-choix { cursor: default; transform: none; }

.quiz-question.est-corrigee .quiz-choix.est-bonne {
  border-color: var(--menthe);
  background: rgba(75, 224, 195, 0.14);
  animation: bonne-reponse 0.5s cubic-bezier(0.3, 1.6, 0.4, 1);
}

@keyframes bonne-reponse {
  0% { transform: scale(1); }
  45% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.quiz-question.est-corrigee .quiz-choix.est-fausse-cochee {
  border-color: var(--corail);
  background: rgba(255, 92, 138, 0.14);
}

/* Secousse de la question fausse */
.quiz-question.est-fausse { animation: secousse 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

@keyframes secousse {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.quiz-actions { margin-top: 34px; }

/* ============================================================================
   CONTRASTE DES BOUTONS D'ACTION (WCAG 1.4.3)
   Du texte blanc sur l'accent par défaut donne 3,11:1 — sous le seuil de 4,5.
   Le problème n'est pas propre à cet accent : tout accent clair choisi par un
   auteur le reproduirait.

   Plutôt que de figer une couleur, on ASSOMBRIT l'accent juste assez pour le
   fond des boutons. La teinte est conservée, l'identité visuelle aussi, et la
   conformité tient quel que soit l'accent du module.
   --accent-bouton est utilisable partout où du texte blanc se pose sur l'accent.
   ========================================================================== */
:root {
  --accent-bouton: var(--violet);                                   /* REPLI */
  --accent-bouton: color-mix(in srgb, var(--violet) 78%, #000);
}

.btn-action {
  padding: 14px 30px;
  border: none;
  border-radius: 999px;
  background: var(--accent-bouton);                                 /* REPLI */
  background: var(--gradient-bouton, var(--accent-bouton));
  background-size: 200% 100%;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.15s ease-out, box-shadow 0.2s;
  animation: coule 6s linear infinite;
  will-change: transform;
}

.btn-action:hover:not(:disabled) { box-shadow: 0 8px 30px color-mix(in srgb, var(--violet) 42%, transparent); }
.btn-action:disabled { opacity: 0.35; cursor: not-allowed; }

.quiz-resultat {
  margin-top: 24px;
  font-family: var(--police-titre);
  font-size: 18px;
  font-weight: 700;
}

/* ================= Confettis (fx.js) ================= */
.fx-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

.fx-confetti i {
  position: absolute;
  top: -3vh;
  left: var(--x);
  width: var(--t);
  height: calc(var(--t) * 1.6);
  background: var(--c);
  border-radius: 2px;
  animation: confetti-chute var(--d) linear var(--r) forwards;
}

@keyframes confetti-chute {
  to {
    transform: translateY(110vh) rotate(var(--rot)) translateX(var(--dx));
    opacity: 0.8;
  }
}

/* ================= Responsive ================= */
@media (max-width: 560px) {
  .page { --page-pad: 20px; --page-pad-haut: 36px; padding: var(--page-pad-haut) var(--page-pad) 64px; }   /* la variable suit le rembourrage réel : les sections pleine largeur débordaient de 12 px sur mobile */
}

/* ============================================================
   GRILLE 12 COLONNES — pages composées par l'éditeur
   (additif : n'affecte que les pages portant .page--grille)
   ============================================================ */
.page--grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-page, 22px) 20px;
  align-content: start;
  max-width: max(1000px, calc(var(--largeur-module, 880px) + 120px));   /* suit la colonne réglée */
}

.page--grille > .page-bloc {
  grid-column: span var(--col, 12);
  min-width: 0;
}

.page--grille > .page-bloc > * { margin-top: 0; }

/* Le titre garde son filet même en grille */
.page--grille .encart-corps { display: block; }

/* Bloc image */
.bloc-image {
  margin: 0;
  border-radius: var(--rayon, 14px);
  overflow: hidden;
  border: 1px solid var(--surface-bord);
  background: var(--figure-bg, #101014);
}

.bloc-image img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 16 / 9);
  object-fit: cover;
}

.bloc-image figcaption {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--attenue);
}

.bloc-image.est-vide {
  aspect-ratio: var(--ratio, 16 / 9);
  display: grid;
  place-items: center;
  min-height: 120px;
}
.bloc-image.est-vide img { display: none; }
.bloc-image.est-vide::after {
  content: "Image";
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--attenue);
}

/* Figures vides des blocs interactifs (aperçu éditeur) */
.revelation figure.est-vide, .carrousel-vue figure.est-vide { min-height: 160px; position: relative; }
.revelation figure.est-vide::after, .carrousel-vue figure.est-vide::after {
  content: "Image"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--attenue);
}

@media (max-width: 640px) {
  .page--grille > .page-bloc { grid-column: span 12; }
}

/* ============================================================
   STYLES DE TEXTE (bloc « texte » à styles prédéfinis)
   ============================================================ */
.page--grille h3.bloc-texte { font-family: var(--police-titre); font-size: 16px; font-weight: 700; margin: 0; color: var(--texte); }
.bloc-texte--puces { margin: 0; padding-left: 22px; }
.bloc-texte--puces li { margin: 6px 0; }
.bloc-texte--puces li::marker { color: var(--violet); }

/* Image : object-fit sélectionnable + hauteur fixe (non-homothétique) */
.bloc-image img { object-fit: var(--fit, cover); }
.bloc-image:not(.est-fixe) img { width: 100%; height: auto; }       /* ratio naturel */
.bloc-image.est-fixe { height: var(--h, 200px); }
.bloc-image.est-fixe img { height: 100%; width: 100%; }
.bloc-image.est-vide:not(.est-fixe) { min-height: 160px; }
.bloc-image.est-fixe.est-vide { aspect-ratio: auto; }
/* En mode « contain », un fond neutre derrière l'image */
.bloc-image { background: var(--figure-bg, #101014); }

/* Styles appliqués en ligne à une portion sélectionnée (taille / police / graisse),
   sans barre animée ni dégradé animé — pour mettre en forme quelques mots. */
/* Mise en forme EN LIGNE (barre flottante).
   Deux pièges corrigés ici :
   1. les tailles étaient RELATIVES au parent (em) : appliquer « Contenu » à
      une sélection dans un titre donnait 1em DU TITRE, soit 38 px — d'où un
      texte « trop gros » alors qu'on demandait du contenu ;
   2. leurs valeurs ne correspondaient pas à celles des blocs (1,7em contre
      2,3em pour un titre) : le même intitulé donnait deux résultats.
   Les deux familles partagent désormais la MÊME échelle, en valeurs absolues.
   « !important » est nécessaire : les règles de page (.page--grille h1.bloc-texte)
   ont une spécificité supérieure et l'emporteraient sur une simple classe. */
.rt-titre {
  font-family: var(--police-titre) !important;
  font-size: var(--t-titre) !important; font-weight: 900 !important;
  letter-spacing: -.02em;
}
.rt-sous-titre-1 {
  font-family: var(--police-titre) !important;
  font-size: var(--t-st1) !important; font-weight: 700 !important;
}
.rt-sous-titre-2 {
  font-family: var(--police-titre) !important;
  font-size: var(--t-st2) !important; font-weight: 700 !important;
}
.rt-contenu {
  font-family: var(--police-corps) !important;
  font-size: var(--t-contenu) !important; font-weight: 400 !important;
}
.rt-puces {
  font-family: var(--police-corps) !important;
  font-size: var(--t-contenu) !important; font-weight: 400 !important;
  list-style: disc outside; padding-left: 1.35em; display: inline-block;
}
.rt-puces li { display: list-item; }

/* Texte multi-parties : espacement entre les sous-éléments */
.bloc-texte-groupe > * + * { margin-top: 10px; }
/* Dans un bloc texte, le groupe gère l'espacement : on neutralise les marges
   verticales propres des éléments pour éviter les espaces doublés (haut/bas). */
.bloc-texte-groupe > h1, .bloc-texte-groupe > h2, .bloc-texte-groupe > h3,
.bloc-texte-groupe > p, .bloc-texte-groupe > ul { margin-top: 0; margin-bottom: 0; }

/* Web Object (iframe d'un paquet .zip) */
.bloc-webobjet {
  position: relative;
  border-radius: var(--rayon, 14px);
  overflow: hidden;
  border: 1px solid var(--surface-bord);
  background: var(--figure-bg, #101014);
  height: var(--h, 384px);
}
.bloc-webobjet iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.bloc-webobjet.est-vide { display: grid; place-items: center; }
.bloc-webobjet.est-vide iframe { display: none; }
.bloc-webobjet.est-vide::after {
  content: "Web object (.zip)"; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--attenue);
}

/* Couverture intégrée (bloc couverture de l'éditeur) */
.couverture-embed .couverture-hero { position: relative; width: 100%; box-sizing: border-box; border-radius: var(--rayon,16px); overflow: hidden; border: 1px solid var(--surface-bord); aspect-ratio: 16 / 7.5; min-height: 240px; background: #0a0a0c; }   /* width : sans elle, min-height × ratio imposait 512 px de large et débordait sur téléphone (matrice 25/09) */
.couverture-embed .couverture-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--fit, cover); }
.couverture-embed .couverture-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.12) 30%, rgba(0,0,0,.82)); }
.couverture-embed .couverture-hero .chip { position: absolute; top: 14px; right: 14px; z-index: 2; }
.couverture-embed .couverture-hero-texte { position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 2; }
.couverture-embed .couverture-hero-texte .sur-titre { color: #fff; }
.couverture-embed .couverture-hero-texte h1 { color: #fff; -webkit-text-fill-color: #fff; margin: 0; }
.couverture-embed .couverture-hero-texte h1::after { display: none; }
.couverture-embed .couverture-hero.est-vide { display: grid; place-items: center; }
.couverture-embed .couverture-hero.est-vide img { display: none; }
.couverture-embed .couverture-hero.est-vide::before { content: "Image de fond"; position: relative; z-index: 2; color: rgba(255,255,255,.6); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.couv-intro { margin: 18px 0 0; }

/* Liste de choix du bloc quiz */
.quiz-choix-liste { display: block; }

/* ============================================================
   Templates additionnels : onglets, accordéon, vidéo, citation,
   tableau, séparateur (thémés par variables)
   ============================================================ */

/* Onglets */
.onglets-tetes { display: flex; gap: 4px; border-bottom: 1px solid var(--surface-bord); flex-wrap: wrap; }
.onglet-tete {
  padding: 10px 16px; border: none; background: none; color: var(--attenue);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s;
}
.onglet-tete:hover { color: var(--texte); }
.onglet-tete.est-actif { color: var(--texte); border-bottom-color: var(--violet); }
.onglet-panneau { display: none; padding: 18px 2px; }
.onglet-panneau.est-actif { display: block; }
.onglet-image { margin: 0 0 14px; border-radius: var(--rayon, 12px); overflow: hidden; max-height: 320px; }
.onglet-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Accordéon */
.accordeon-item { border: 1px solid var(--surface-bord); border-radius: var(--rayon, 10px); margin-bottom: 8px; overflow: hidden; background: var(--surface); }
.accordeon-tete {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: none; background: none; color: var(--texte);
  font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.accordeon-chevron { color: var(--violet); transition: transform .25s; }
.accordeon-item.est-ouvert .accordeon-chevron { transform: rotate(180deg); }
.accordeon-corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.accordeon-item.est-ouvert .accordeon-corps { grid-template-rows: 1fr; }
.accordeon-corps-int { overflow: hidden; }
.accordeon-item.est-ouvert .accordeon-corps-int { padding: 0 16px 16px; }

/* Vidéo */
.bloc-video { border-radius: var(--rayon,14px); overflow: hidden; border: 1px solid var(--surface-bord); background: #000; }
.bloc-video video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.bloc-video.est-fixe { height: var(--h,320px); }
.bloc-video.est-fixe video { height: 100%; aspect-ratio: auto; object-fit: contain; }
.bloc-video.est-vide { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--figure-bg,#101014); }
.bloc-video.est-vide video { display: none; }
.bloc-video.est-vide::after { content: "Vidéo (mp4)"; color: var(--attenue); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }

/* Citation */
.citation { margin: 0; padding: 16px 22px 16px 24px; border-left: 3px solid var(--violet); border-radius: var(--rayon); }
.citation blockquote { margin: 0; font-size: 19px; line-height: 1.5; font-style: italic; color: var(--texte); }
.citation figcaption { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.citation-auteur { font-weight: 700; color: var(--texte); }
.citation-role { font-size: 13px; color: var(--attenue); }

/* Tableau */
.bloc-tableau { overflow-x: auto; border: 1px solid var(--surface-bord); border-radius: var(--rayon,12px); }
.bloc-tableau table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bloc-tableau th, .bloc-tableau td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--surface-bord); }
.bloc-tableau th { background: var(--surface); font-weight: 700; color: var(--texte); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.bloc-tableau tr:last-child td { border-bottom: none; }
.bloc-tableau td { color: var(--texte); }

/* Séparateur */
.separateur { width: 100%; }
.separateur--ligne { border-top: var(--taille,2px) solid var(--surface-bord); }
.separateur--espace { height: var(--taille,24px); }
.separateur--points { border-top: var(--taille,2px) dotted var(--surface-bord); }

/* ============================================================
   Fonds de page (calques plein cadre, hauteur/position en rangées)
   ============================================================ */
.page.a-fond { position: relative; }
.page-fond {
  position: absolute;
  left: calc(50% - 50vw); width: 100vw;
  pointer-events: none;
  overflow: hidden;
}
.page--grille.a-fond > .page-bloc { position: relative; z-index: 10; }
.pl-scene, .ed-canvas { overflow-x: hidden; }

/* Bouton / CTA */
.bloc-bouton-hote { width: 100%; }
.bloc-bouton {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px;
  font-family: var(--police-titre, inherit); font-weight: 700; font-size: 15px;
  text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .2s, border-color .2s;
}
/* Bouton plein : mêmes surcharges possibles que le contour. */
.bloc-bouton--plein {
  background: var(--btn-fond, var(--gradient));
  color: var(--btn-texte, #fff);
  border: none;
}
.bloc-bouton--plein[style*="--btn-bordure"] { border: 1.5px solid var(--btn-bordure); }
.bloc-bouton--plein:hover { transform: translateY(-2px); box-shadow: 0 10px 28px color-mix(in srgb, var(--violet) 42%, transparent); }
/* BOUTON CONTOUR — style d'origine : encre et filet discret.
   Les couleurs sont surchargeables bloc par bloc (--btn-texte, --btn-fond,
   --btn-bordure), posées par le rendu quand l'auteur en choisit une. C'est la
   réponse au cas particulier : un bouton contour posé sur un aplat sombre au
   milieu d'une page claire hérite sinon d'une encre sombre, et devient
   invisible. Plutôt que de changer le défaut pour tout le monde, l'auteur
   ajuste là où c'est nécessaire. */
.bloc-bouton--ghost {
  background: var(--btn-fond, transparent);
  color: var(--btn-texte, var(--texte));
  border: 1px solid var(--btn-bordure, var(--surface-bord));
}
.bloc-bouton--ghost:hover { border-color: var(--btn-bordure, var(--violet)); }

/* ============================================================
   Blocs de landing (hero, stats, cartes) — reprend le style landing.html
   ============================================================ */
.ld-hero-embed {
  position: relative; min-height: 460px; display: flex; align-items: flex-end;
  padding: 0 32px 40px; overflow: hidden; border-radius: var(--rayon, 16px);
  border: 1px solid var(--surface-bord);
}
.ld-hero-media { position: absolute; inset: 0; z-index: 0; background: #0a0a0c; }
.ld-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.ld-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 34%, transparent 46%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.82) 100%);
}
.ld-hero-media.est-vide::before { content: "Image de fond"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.5); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.ld-hero-txt { position: relative; z-index: 1; max-width: 940px; }
.ld-surtitre {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--police-titre); font-size: 13px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: #fff; margin-bottom: 18px;
}
.ld-surtitre::before { content: ""; width: 34px; height: 3px; background: var(--violet); }
.ld-hero-embed .ld-hero-txt h1 {
  font-family: var(--police-titre); font-size: clamp(34px, 6vw, 68px); font-weight: 900;
  line-height: 0.98; letter-spacing: -0.01em; margin: 0;
  color: #fff; -webkit-text-fill-color: #fff; background: none;
}
.ld-hero-embed .ld-hero-txt h1::after { display: none; }
.ld-hero-embed .ld-hero-txt h1 em { color: var(--violet); font-style: normal; -webkit-text-fill-color: var(--violet); }
.ld-hero-embed p { max-width: 560px; margin: 22px 0 28px; font-size: 17px; color: rgba(255,255,255,.82); }
.ld-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ld-btn-grand {
  display: inline-flex; align-items: center; gap: 11px; padding: 15px 32px;
  border-radius: 999px; background: var(--gradient); color: #fff;
  font-family: var(--police-titre); font-weight: 700; font-size: 15px; text-decoration: none;
  transition: transform .15s, box-shadow .2s;
}
.ld-btn-grand:hover { transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in srgb, var(--violet) 42%, transparent); }

.ld-stats { display: grid; grid-template-columns: repeat(var(--stats-n, 3), minmax(0, 1fr)); }
@media (max-width: 640px) { .ld-stats:not(.ld-stats--cartes) { grid-template-columns: 1fr; }
  .ld-stats:not(.ld-stats--cartes) .ld-stat { border-radius: 0; border-left: 1px solid var(--surface-bord); }
  .ld-stats:not(.ld-stats--cartes) .ld-stat + .ld-stat { border-top: none; }
  .ld-stats:not(.ld-stats--cartes) .ld-stat:first-child { border-radius: var(--rayon, 16px) var(--rayon, 16px) 0 0; }
  .ld-stats:not(.ld-stats--cartes) .ld-stat:last-child { border-radius: 0 0 var(--rayon, 16px) var(--rayon, 16px); }
  .ld-stats:not(.ld-stats--cartes) .ld-stat:only-child { border-radius: var(--rayon, 16px); } }
.ld-stat { text-align: center; padding: 28px 18px; border: 1px solid var(--surface-bord); background: var(--surface); }
.ld-stat:first-child { border-radius: var(--rayon, 16px) 0 0 var(--rayon, 16px); }
.ld-stat:last-child { border-radius: 0 var(--rayon, 16px) var(--rayon, 16px) 0; }
.ld-stat + .ld-stat { border-left: none; }
.ld-stat:only-child { border-radius: var(--rayon, 16px); }
.ld-stat-val { font-family: var(--police-titre); font-size: 32px; font-weight: 900; line-height: 1; color: var(--violet); }
/* Sur fond sombre, l'accent seul peut tomber sous le seuil (mesuré : 12 défauts avec un bleu
   profond, 23/09) : on l'éclaircit, comme pour le sur-titre des transitions. */
html[data-theme="dark"] .ld-stat-val,
.page-section[data-theme-section="dark"] .ld-stat-val,
.page-bloc[data-theme="dark"] .ld-stat-val, .page-bloc [data-theme="dark"] .ld-stat-val {
  color: color-mix(in srgb, var(--violet) 45%, #ffffff);
}
/* … sauf si le bloc lui-même est redéclaré CLAIR : il retrouve alors l'accent plein (23/09) */
/* le thème clair peut être porté par le CADRE intérieur du bloc, pas par le bloc lui-même */
[data-theme-section="dark"] [data-theme="light"] .ld-stat-val,
[data-theme-section="dark"] [data-theme="light"] .ld-stat-lib,
.page-bloc[data-theme="light"] .ld-stat-val, [data-theme="light"] .ld-stat-val { color: var(--violet); }
.ld-stat-lib { margin-top: 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--attenue); }

.ld-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.ld-carte {
  padding: 28px 24px; border: 1px solid var(--surface-bord); border-radius: 16px;
  background: var(--surface); transition: transform .25s, border-color .25s, box-shadow .25s;
}
.ld-carte:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--violet) 55%, transparent); box-shadow: 0 18px 44px var(--ombre-carte); }
.ld-carte-ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: var(--figure-bg); margin-bottom: 18px; overflow: hidden; }
.ld-carte-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-carte h3 { font-family: var(--police-titre); font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.ld-carte p { color: var(--attenue); font-size: 15px; margin: 0; }
.ld-num { font-family: var(--police-titre); font-size: 13px; font-weight: 900; color: var(--violet); letter-spacing: 0.1em; margin-bottom: 6px; }

/* ============================================================
   Landing pleine largeur : hero full-bleed, contenu centré
   ============================================================ */
.page--landing { max-width: none; padding: 0; row-gap: 0; }
.page--landing > .page-bloc {
  grid-column: 1 / -1;
  width: 100%; max-width: 1020px;
  margin: 0 auto; padding: 0 30px;
  box-sizing: border-box;
}
.page--landing > .page-bloc + .page-bloc { margin-top: 56px; }
/* Le hero occupe toute la largeur, sans marge ni gouttière */
/* Deux écritures pour la même règle : la classe est posée au rendu et
   fonctionne partout ; le :has() reste pour les cas où le balisage vient
   d'ailleurs (contenu importé, page HTML pleine page). */
.page--landing > .page-bloc--hero,
.page--landing > .page-bloc:has(.ld-hero-embed) { max-width: none; padding: 0; margin-top: 0; }
.page--landing .ld-hero-embed { border-radius: 0; border: none; min-height: 78vh; }

/* Couleur de texte « accent » : liée au thème (suit --violet si l'accent change) */
.txt-accent { color: var(--violet); -webkit-text-fill-color: var(--violet); }

/* Formes du bloc image (rectangle par défaut / carré / cercle) */
.bloc-image.forme-carre img, .bloc-image.forme-cercle img { aspect-ratio: 1 / 1; }
.bloc-image.forme-cercle { border: none; background: none; overflow: visible; border-radius: 0; }
.bloc-image.forme-cercle img { border-radius: 50%; }
.bloc-image.forme-cercle figcaption { text-align: center; }

/* Redimensionnement : en hauteur fixe, l'image remplit toujours la zone selon le mode */
.bloc-image.est-fixe img { aspect-ratio: auto; height: 100%; width: 100%; }

/* Mode « coins carrés » : zéroïse aussi les éléments au rayon codé en dur
   (les conteneurs pilotés par var(--rayon) sont déjà couverts par --rayon:0). */
.coins-carre .carte-pictogramme,
.coins-carre .quiz-choix,
.coins-carre .accordeon-item,
.coins-carre .ld-carte,
.coins-carre .ld-carte-ico { border-radius: 0; }

/* ============================================================
   TEMPLATE LIBRE (mode canvas) — scène à ratio fixe + objets en absolu
   ============================================================ */
.page--canvas { display: block; }
.canvas-scene {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--surface, #101014);
  border-radius: var(--rayon, 16px);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.canvas-objet { position: absolute; box-sizing: border-box; }
.canvas-objet-inner { position: absolute; inset: 0; }
/* Le contenu (texte / image / bouton) remplit le conteneur interne */
.canvas-objet-inner > * { width: 100%; height: 100%; margin: 0; }
.canvas-objet .bloc-image, .canvas-objet .bloc-image img { width: 100%; height: 100%; }
.canvas-objet .bloc-image img { object-fit: cover; }
.canvas-objet .bloc-bouton-hote { display: flex; align-items: center; height: 100%; }
.canvas-objet .bloc-bouton { width: 100%; height: 100%; justify-content: center; }
.canvas-objet .encart, .canvas-objet .bloc-texte { height: 100%; overflow: auto; }

/* Option transverse : masquer le soulignement sous le titre */
.sans-barre-titre h1::after { display: none; }

/* Texte qui épouse une forme (reflow via shape-outside) */
.tk-forme .bloc-texte { overflow: visible; }
.tk-forme-l { float: left; width: 50%; height: 100%; pointer-events: none; }
.tk-forme-r { float: right; width: 50%; height: 100%; pointer-events: none; }

/* Format de page pleine largeur (option par page) */
.page--large { max-width: none; }

/* Alignement horizontal du texte (option par bloc) */
.al-h-centre { text-align: center; }
.al-h-droite { text-align: right; }
.al-h-justifie { text-align: justify; }
/* Alignement vertical dans les objets de page libre (hauteur fixe) */
.canvas-objet-inner.al-v-centre { display: flex; flex-direction: column; justify-content: center; }
.canvas-objet-inner.al-v-bas { display: flex; flex-direction: column; justify-content: flex-end; }
.canvas-objet-inner.al-v-centre > *, .canvas-objet-inner.al-v-bas > * { height: auto; }
/* Alignement vertical du bloc texte en grille : le groupe remplit la hauteur
   du bloc (étiré par la grille quand un voisin est plus haut). */
.bloc-texte-groupe.al-v-centre, .bloc-texte-groupe.al-v-bas { display: flex; flex-direction: column; height: 100%; }
.bloc-texte-groupe.al-v-centre { justify-content: center; }
.bloc-texte-groupe.al-v-bas { justify-content: flex-end; }
/* Fond de couleur du bloc texte (formes carré / arrondi / rond). */
.bloc-texte-fond { padding: 18px 22px; }
.bloc-texte-fond--carre { border-radius: 0; }
.bloc-texte-fond--arrondi { border-radius: 14px; }
.bloc-texte-fond--rond { border-radius: 999px; padding: 22px 34px; }

/* Bloc Pictogramme */
.bloc-picto { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.bloc-picto-ico { line-height: 0; }
.bloc-picto-fond { display: inline-flex; align-items: center; justify-content: center; box-sizing: content-box; }
.bloc-picto-fond--carre { border-radius: 0; }
.bloc-picto-fond--arrondi { border-radius: 18px; }
.bloc-picto-fond--cercle { border-radius: 999px; }
.bloc-picto-legende { font-size: 15px; color: var(--texte); }

/* Bloc HTML libre */
.cover3d-hero .c3d-canvas { opacity: 0; transition: opacity .55s ease; }
.cover3d-hero.c3d-pret .c3d-canvas { opacity: 1; }
.bloc-html { width: 100%; }
/* ── Effet verre (glassmorphism) — option, avec repli accessible ──
   À réserver aux blocs posés sur un fond maîtrisé (image/dégradé). */
.effet-verre {
  background: color-mix(in srgb, var(--cadre-fond, var(--surface, #ffffff)) var(--verre-op, 50%), transparent) !important;   /* REPLI sans color-mix */
  background: color-mix(in srgb, var(--cadre-fond, var(--surface, #ffffff)) var(--verre-op, 50%), transparent) !important;
  -webkit-backdrop-filter: blur(var(--verre-blur, 16px)) saturate(1.35);
  backdrop-filter: blur(var(--verre-blur, 16px)) saturate(1.35);
  border: 1px solid #ffffff;   /* REPLI sans color-mix */
  border: 1px solid color-mix(in srgb, var(--texte, #ffffff) 14%, transparent);
  box-shadow: 0 10px 34px rgba(12, 43, 62, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* Repli si backdrop-filter non supporté → surface opaque (jamais de texte illisible) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .effet-verre { background: var(--cadre-fond, var(--surface, #f4f5f7)) !important; }
}
/* Accessibilité : l'utilisateur demande moins de transparence → surface opaque, pas de flou */
@media (prefers-reduced-transparency: reduce) {
  .effet-verre { background: var(--surface, #f4f5f7) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Section scrollytelling : visuel épinglé (sticky natif) + étapes qui pilotent le visuel */
.bloc-scrolly { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.scrolly-sticky { position: sticky; top: calc(var(--scene-h, 100vh) * 0.12); height: calc(var(--scene-h, 100vh) * 0.76); }
.scrolly-scene { position: relative; width: 100%; height: 100%; border-radius: var(--rayon, 16px); overflow: hidden; border: 1px solid var(--surface-bord, rgba(127,127,140,.16)); background: var(--surface, rgba(127,127,140,.06)); }
.scrolly-visuel { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .5s ease; display: flex; align-items: center; justify-content: center; }
.scrolly-visuel.est-actif { opacity: 1; }
.scrolly-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scrolly-visuel.est-vide span { font-family: var(--police-titre); font-size: clamp(3rem, 10vw, 7rem); font-weight: 800; color: var(--violet); opacity: .5; }
.scrolly-etapes { display: flex; flex-direction: column; }
.scrolly-etape { min-height: calc(var(--scene-h, 100vh) * 0.62); display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .35s ease; }
.scrolly-etape.est-actif { opacity: 1; }
.scrolly-etape h3 { font-family: var(--police-titre); font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 800; margin: 0 0 10px; color: var(--texte); }
.scrolly-etape.est-actif h3 { color: var(--violet); }
.scrolly-etape-txt { line-height: 1.7; color: var(--texte); }
@media (max-width: 760px) {
  .bloc-scrolly { grid-template-columns: 1fr; }
  .scrolly-sticky { position: relative; top: 0; height: 42vh; margin-bottom: 18px; }
  .scrolly-etape { min-height: 40vh; }
}
/* Zoom-reveal : cartes qui grossissent en entrant (CSS view() natif, repli statique) */
.bloc-scroll-zoom { display: flex; flex-direction: column; gap: 12vh; }
.zoom-carte { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.zoom-carte:nth-child(even) { direction: rtl; } .zoom-carte:nth-child(even) > * { direction: ltr; }
.zoom-visuel { margin: 0; border-radius: var(--rayon, 16px); overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--surface-bord, rgba(127,127,140,.16)); background: var(--surface, rgba(127,127,140,.06)); display: flex; align-items: center; justify-content: center; }
.zoom-visuel img { width: 100%; height: 100%; object-fit: cover; }
.zoom-visuel.est-vide span { font-family: var(--police-titre); font-size: clamp(3rem, 8vw, 6rem); font-weight: 800; color: var(--violet); opacity: .5; }
.zoom-carte h3 { font-family: var(--police-titre); font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 800; margin: 0 0 10px; color: var(--texte); }
.zoom-txt { line-height: 1.7; color: var(--texte); opacity: .85; }
@supports (animation-timeline: view()) {
  .zoom-carte { animation: scroll-zoomin linear both; animation-timeline: view(); animation-range: entry 5% cover 38%; }
}
@keyframes scroll-zoomin { from { transform: scale(.9); opacity: .25; } to { transform: none; opacity: 1; } }
@media (max-width: 760px) { .zoom-carte { grid-template-columns: 1fr; } }
/* Snap plein écran : panneaux aimantés (CSS scroll-snap) */
.bloc-scroll-snap { height: var(--scene-h, 100vh); overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; border-radius: var(--rayon, 16px); border: 1px solid var(--surface-bord, rgba(127,127,140,.16)); }
.snap-pane { height: var(--scene-h, 100vh); scroll-snap-align: start; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6vh 8vw; position: relative; background: var(--surface, rgba(127,127,140,.06)); }
.snap-pane:nth-child(even) { background: color-mix(in srgb, var(--violet) 8%, var(--surface, transparent)); }
.snap-pane.a-image { background-size: cover; background-position: center; color: #fff; }
.snap-pane.a-image::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.snap-inner { position: relative; max-width: 44ch; }
.snap-pane h3 { font-family: var(--police-titre); font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: 800; margin: 0 0 12px; }
.snap-pane:not(.a-image) h3 { color: var(--violet); }
.snap-txt { line-height: 1.7; }
/* En édition, les effets pilotés par le scroll sont neutralisés (pas de scroll réel) → contenu clair */
body.mode-edition .zoom-carte,
body.mode-edition .scrolly-etape { animation: none !important; transform: none !important; opacity: 1 !important; }
body.mode-edition .scrolly-visuel { opacity: 1 !important; }
body.mode-edition .bloc-scroll-snap { height: auto; overflow: visible; scroll-snap-type: none; }
body.mode-edition .snap-pane { height: auto; min-height: 340px; }
/* Galerie glissable (drag + inertie) */
.bloc-scroll-drag { width: 100%; }
.drag-rail { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 12px; cursor: grab; scrollbar-width: none; scroll-snap-type: x proximity; }
.drag-rail::-webkit-scrollbar { display: none; }
.drag-rail.agrippe { cursor: grabbing; }
.drag-carte { flex: 0 0 clamp(240px, 32vw, 340px); scroll-snap-align: start; user-select: none; }
.drag-visuel { margin: 0 0 12px; border-radius: var(--rayon, 14px); overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--surface-bord, rgba(127,127,140,.16)); background: var(--surface, rgba(127,127,140,.06)); display: flex; align-items: center; justify-content: center; }
.drag-visuel img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.drag-visuel.est-vide span { font-family: var(--police-titre); font-size: 3rem; font-weight: 800; color: var(--violet); opacity: .5; }
.drag-carte h3 { font-family: var(--police-titre); font-size: 1.2rem; font-weight: 800; margin: 0 0 6px; color: var(--texte); }
.drag-txt { line-height: 1.6; color: var(--texte); opacity: .82; font-size: .95rem; }
.drag-hint { margin-top: 10px; text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .5; }
/* Défilement horizontal pinné (GSAP) */
.bloc-scroll-hpin { position: relative; height: calc(var(--scene-h, 100vh) * 3); }
.bloc-scroll-hpin .hpin-sticky { position: sticky; top: 0; height: var(--scene-h, 100vh); display: flex; align-items: center; overflow: hidden; }
.hpin-rail { display: flex; gap: 28px; padding-left: 6vw; will-change: transform; }
.hpin-panneau { flex: 0 0 60vw; height: calc(var(--scene-h, 100vh) * 0.66); border-radius: var(--rayon, 18px); overflow: hidden; position: relative; background: var(--surface, rgba(127,127,140,.06)); border: 1px solid var(--surface-bord, rgba(127,127,140,.16)); display: flex; align-items: flex-end; padding: 40px; }
.hpin-panneau.a-image { background-size: cover; background-position: center; color: #fff; }
.hpin-panneau.a-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.5)); }
.hpin-inner { position: relative; max-width: 34ch; }
.hpin-num { font-family: var(--police-titre); font-size: 3rem; font-weight: 800; color: var(--violet); opacity: .9; line-height: 1; }
.hpin-panneau.a-image .hpin-num { color: #fff; }
.hpin-panneau h3 { font-family: var(--police-titre); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; margin: 8px 0 8px; }
.hpin-txt { line-height: 1.6; }
/* En édition : le pin GSAP est inactif → affichage en rail simple défilable */
body.mode-edition .bloc-scroll-hpin { height: auto; }
body.mode-edition .bloc-scroll-hpin .hpin-sticky { position: relative; height: auto; overflow-x: auto; }
body.mode-edition .hpin-panneau { height: 320px; }
/* Parallaxe : visuel de fond fixe par étape (natif background-attachment) */
.bloc-scroll-parallaxe { width: 100%; }
.para-etape { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8vh 8vw; background: var(--surface, rgba(127,127,140,.08)); }
.para-etape.a-image { background-size: cover; background-position: center; background-attachment: fixed; color: #fff; }
.para-etape.a-image::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.para-inner { position: relative; max-width: 40ch; }
.para-etape h3 { font-family: var(--police-titre); font-size: clamp(2rem, 6vw, 4rem); font-weight: 800; margin: 0 0 14px; }
.para-etape:not(.a-image) h3 { color: var(--violet); }
.para-txt { line-height: 1.7; font-size: 1.05rem; }
@media (max-width: 760px) { .para-etape.a-image { background-attachment: scroll; } }   /* fixed peu fiable sur mobile */
/* Révélation de texte : grands titres dévoilés au scroll (gradient wipe natif) */
.bloc-scroll-revel { display: flex; flex-direction: column; gap: 14vh; padding: 8vh 0; }
.revel-etape { max-width: 22ch; }
.revel-etape:nth-child(even) { align-self: flex-end; text-align: right; }
.revel-titre { font-family: var(--police-titre); font-size: clamp(2.2rem, 7vw, 5rem); font-weight: 800; line-height: 1.05; margin: 0 0 16px;
  color: color-mix(in srgb, var(--texte, #333) 18%, transparent); background: var(--texte, #222); -webkit-background-clip: text; background-clip: text; }
.revel-txt { line-height: 1.7; color: var(--texte); opacity: .55; }
@supports (animation-timeline: view()) {
  .revel-titre { background: linear-gradient(90deg, var(--violet) 50%, color-mix(in srgb, var(--texte, #333) 16%, transparent) 50%); background-size: 220% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: revel-wipe linear both; animation-timeline: view(); animation-range: entry 15% cover 42%; }
  .revel-txt { animation: revel-fade linear both; animation-timeline: view(); animation-range: entry 20% cover 46%; }
}
@keyframes revel-wipe { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes revel-fade { from { opacity: .18; } to { opacity: .9; } }
/* En édition, tout est révélé (pas de scroll) */
body.mode-edition .revel-titre { animation: none; background: var(--violet); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.mode-edition .revel-txt { animation: none; opacity: .9; }
/* Parallaxe à la souris : couches empilées qui suivent le curseur */
.bloc-scroll-mouse { width: 100%; }
.mouse-scene { position: relative; min-height: 62vh; display: grid; place-items: center; overflow: hidden; border-radius: var(--rayon, 16px); background: var(--surface, rgba(127,127,140,.06)); border: 1px solid var(--surface-bord, rgba(127,127,140,.16)); }
.mouse-couche { position: absolute; transition: transform .18s ease-out; will-change: transform; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mouse-couche:nth-child(1) { top: 16%; left: 14%; }
.mouse-couche:nth-child(2) { top: 44%; right: 12%; }
.mouse-couche:nth-child(3) { bottom: 12%; left: 30%; }
.mouse-couche:nth-child(4) { top: 20%; right: 30%; }
.mouse-visuel { margin: 0; width: clamp(120px, 16vw, 200px); aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(12,43,62,.2); display: flex; align-items: center; justify-content: center; background: var(--surface, #e9ecf0); }
.mouse-visuel img { width: 100%; height: 100%; object-fit: cover; }
.mouse-visuel.est-vide span { font-family: var(--police-titre); font-size: 2.4rem; font-weight: 800; color: var(--violet); opacity: .5; }
.mouse-cap h3 { font-family: var(--police-titre); font-size: 1rem; font-weight: 800; margin: 0; color: var(--texte); }
.mouse-txt { font-size: .85rem; opacity: .7; max-width: 24ch; }
/* Timeline scrubée : étapes en deux colonnes, animées au scroll */
.bloc-scroll-scrub { display: flex; flex-direction: column; gap: 14vh; padding: 8vh 0; }
.scrub-etape { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.scrub-etape:nth-child(even) { direction: rtl; } .scrub-etape:nth-child(even) > * { direction: ltr; }
.scrub-visuel { margin: 0; aspect-ratio: 16/10; border-radius: var(--rayon, 16px); overflow: hidden; border: 1px solid var(--surface-bord, rgba(127,127,140,.16)); background: var(--surface, rgba(127,127,140,.06)); display: flex; align-items: center; justify-content: center; }
.scrub-visuel img { width: 100%; height: 100%; object-fit: cover; }
.scrub-visuel.est-vide span { font-family: var(--police-titre); font-size: 3rem; font-weight: 800; color: var(--violet); opacity: .5; }
.scrub-cap h3 { font-family: var(--police-titre); font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 800; margin: 0 0 10px; color: var(--texte); }
.scrub-txt { line-height: 1.7; opacity: .85; }
@media (max-width: 760px) { .scrub-etape { grid-template-columns: 1fr; } }
/* Profondeur / axe Z : plans épinglés en perspective */
.bloc-scroll-depth { position: relative; height: calc(var(--scene-h, 100vh) * 3); }
.depth-sticky { position: sticky; top: 0; height: var(--scene-h, 100vh); overflow: hidden; perspective: 900px; transform-style: preserve-3d; display: grid; place-items: center; background: var(--surface, rgba(127,127,140,.06)); }
.depth-plan { position: absolute; width: min(66vw, 720px); height: 62vh; border-radius: var(--rayon, 18px); overflow: hidden; display: flex; align-items: flex-end; padding: 36px; transform-style: preserve-3d; background: var(--surface, #e9ecf0); border: 1px solid var(--surface-bord, rgba(127,127,140,.16)); }
.depth-plan.a-image { background-size: cover; background-position: center; color: #fff; }
.depth-plan.a-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.5)); }
.depth-inner { position: relative; max-width: 32ch; }
.depth-plan h3 { font-family: var(--police-titre); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; margin: 0 0 8px; }
.depth-plan:not(.a-image) h3 { color: var(--violet); }
.depth-txt { line-height: 1.6; }
/* En édition : GSAP inactif → plans en pile lisible, souris neutralisée */
body.mode-edition .bloc-scroll-depth { height: auto; }
body.mode-edition .depth-sticky { position: relative; height: auto; perspective: none; display: flex; flex-direction: column; gap: 18px; padding: 18px; }
body.mode-edition .depth-plan { position: relative; width: 100%; height: 300px; }
body.mode-edition .mouse-couche { position: relative; top: auto; left: auto; right: auto; bottom: auto; transform: none !important; }
body.mode-edition .mouse-scene { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; padding: 20px; min-height: 0; }
/* Sommaire (liste de liens éditables) */
.bloc-sommaire { width: 100%; }
.bloc-sommaire-titre { font-family: var(--police-titre); font-size: clamp(22px, 3.4vw, 30px); font-weight: 900; margin-bottom: 18px; color: var(--texte); }
.bloc-sommaire-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: som; }
.bloc-sommaire-item { margin: 0; }
.bloc-sommaire-lien { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--rayon, 14px); background: var(--surface, rgba(127,127,140,.08)); border: 1px solid var(--surface-bord, rgba(127,127,140,.16)); color: var(--texte); text-decoration: none; font-weight: 600; transition: border-color .18s, background .18s, transform .18s; }
.bloc-sommaire-lien:hover { border-color: var(--violet); transform: translateX(4px); }
.bloc-sommaire-num { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--violet); color: #fff; font-weight: 800; font-size: 15px; }
.bloc-sommaire.sans-num .bloc-sommaire-num { display: none; }
.bloc-sommaire-txt { flex: 1; }
.bloc-lottie { width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bloc-lottie svg { max-width: 100%; height: 100% !important; }
.bloc-lottie-vide { color: var(--attenue, #8895a2); font-size: 14px; border: 1px dashed var(--surface-bord, rgba(127,127,140,.3)); border-radius: var(--rayon, 16px); padding: 24px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.bloc-html-frame { width: 100%; border: 0; border-radius: var(--rayon, 16px); background: transparent; display: block; }
/* Page HTML pleine page : le bloc HTML remplit toute la zone de contenu.
   L'interface du module (en-tête, navigation) reste par-dessus (hors scène). */
.page--htmlplein { display: block; max-width: none !important; width: 100%; margin: 0; padding: 0;
  height: 100%; min-height: 100%; gap: 0; }
.page--htmlplein > .page-bloc { height: 100%; margin: 0; padding: 0; }
.page--htmlplein .bloc-html, .page--htmlplein .bloc-html-frame { height: 100% !important; }
.page--htmlplein .bloc-html-frame { border-radius: 0; }

/* Bloc Audio + sous-titres */
.bloc-audio { display: flex; flex-direction: column; gap: 10px; }
.bloc-audio-titre { font-family: var(--police-titre); font-weight: 700; font-size: 18px; color: var(--texte); }
.bloc-audio-el { width: 100%; }
.bloc-audio-st { min-height: 1.6em; padding: 10px 14px; border-radius: var(--rayon, 12px);
  background: var(--surface, rgba(0,0,0,.05)); color: var(--texte); font-size: 16px; text-align: center; }
.bloc-audio-st:empty { display: none; }

/* Bloc Score / Bilan */
.bloc-score { text-align: center; padding: 24px; border-radius: var(--rayon, 16px); background: var(--surface, rgba(0,0,0,.04)); }
.bloc-score-titre { font-family: var(--police-titre); font-weight: 800; font-size: 22px; color: var(--texte); margin-bottom: 14px; }
.bloc-score-jauge { position: relative; height: 26px; border-radius: 13px; background: rgba(0,0,0,.12); overflow: hidden; max-width: 460px; margin: 0 auto; }
.bloc-score-aiguille { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gradient, linear-gradient(100deg,#E8420F,#FF5A2D)); transition: width .6s ease; }
.bloc-score-valeur { position: relative; z-index: 1; line-height: 26px; font-weight: 800; color: var(--texte); }
.bloc-score.est-reussi .bloc-score-aiguille { background: linear-gradient(100deg,#1f9d55,#34d17a); }
.bloc-score.est-echoue .bloc-score-aiguille { background: linear-gradient(100deg,var(--rouge),#e05a4b); }
.bloc-score-detail { margin-top: 12px; color: var(--texte); opacity: .8; font-size: 15px; }
.bloc-score-message { margin-top: 8px; font-weight: 600; color: var(--texte); }
.bloc-score-relance { margin-top: 16px; }

/* Barrière de progression */
.bloc-barriere { text-align: center; padding: 22px 24px; border-radius: var(--rayon, 16px);
  background: var(--surface, rgba(0,0,0,.04)); border: 2px dashed var(--violet, #FF5A2D); }
.bloc-barriere-msg { font-weight: 600; color: var(--texte); font-size: 17px; }
.bloc-barriere-btn { margin-top: 14px; }
.bloc-barriere.est-ouvert { display: none; }
.tk-barriere-masque { display: none !important; }

/* ===== Couverture 3D ===== */
/* Aperçu 2D (édition) */
.c3d-edit { text-align: center; padding: 20px 0; }
.c3d-copy-edit .eyebrow { color: var(--violet, #FF5A2D); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.c3d-copy-edit h1 { margin: 8px 0; }
.c3d-copy-edit .lead { opacity: .8; max-width: 640px; margin: 0 auto; }
.c3d-poster { position: relative; margin: 26px auto 0; width: min(560px, 82%); aspect-ratio: 16/10.6; }
.c3d-lid { position: absolute; left: 5%; top: 0; width: 90%; height: 82%; background: #0a0a0c; border-radius: 16px; padding: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06); box-sizing: border-box; }
.c3d-screen { width: 100%; height: 100%; border-radius: 6px; overflow: hidden; background: #0a2230; display: flex; align-items: center; justify-content: center; }
.c3d-screen img { width: 100%; height: 100%; object-fit: cover; }
.c3d-empty { color: #8aa0ab; font-size: 14px; }
.c3d-base { position: absolute; left: 0; bottom: 0; width: 100%; height: 9%; background: linear-gradient(#cfd3d6, #aeb2b5); border-radius: 3px 3px 12px 12px; box-shadow: 0 14px 24px rgba(0,0,0,.4); }
.c3d-base::after { content: ""; position: absolute; left: 42%; top: 0; width: 16%; height: 4px; background: rgba(0,0,0,.18); border-radius: 0 0 6px 6px; }
.c3d-note { margin-top: 18px; font-size: 13px; opacity: .6; }
/* Scène 3D (aperçu / export) */
.cover3d-hero { position: relative; min-height: 78vh; border-radius: var(--rayon, 16px); overflow: hidden; background: radial-gradient(120% 120% at 70% 20%, #0e2c3f, #061019); }
.cover3d-hero .c3d-stage { position: absolute; inset: 0; overflow: hidden; }
.cover3d-hero .c3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cover3d-hero .c3d-copy { position: absolute; left: 6%; top: 15%; max-width: min(560px, 80%); z-index: 3; pointer-events: none; transition: opacity .2s ease; color: #fff; }
.cover3d-hero .c3d-copy .eyebrow { color: var(--violet, #FF5A2D); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.cover3d-hero .c3d-copy h1 { color: #fff; }
.cover3d-hero .c3d-copy .lead { color: rgba(255,255,255,.82); }
.cover3d-hero .c3d-fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 2; }
.cover3d-hero .c3d-fallback img { width: min(58%, 520px); aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 90px rgba(0,0,0,.55); }
.cover3d-hero.nowebgl .c3d-canvas { display: none; }
.cover3d-hero.nowebgl .c3d-fallback { display: flex; }
.cover3d-hero .c3d-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; color: #9fb0bb; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }

/* ── Comparateur avant / après ── */
.bloc-avant-apres { width: 100%; }
.aa-scene { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--rayon, 16px); user-select: none; touch-action: none; background: var(--surface, #e9ecf0); cursor: ew-resize; }
.aa-vertical .aa-scene { cursor: ns-resize; }
.aa-couche { position: absolute; inset: 0; }
.aa-couche img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.aa-avant { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.aa-vertical .aa-avant { clip-path: inset(0 0 calc(100% - var(--pos, 50%)) 0); }
.aa-vide { display: grid; place-items: center; color: var(--attenue, #889); font-weight: 700; }
.aa-vide::after { content: "Image"; }
.aa-apres.aa-vide { background: color-mix(in srgb, var(--violet) 8%, var(--surface, #e9ecf0)); }
.aa-poignee { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.aa-vertical .aa-poignee { left: 0; right: 0; top: var(--pos, 50%); bottom: auto; height: 2px; width: auto; transform: translateY(-1px); }
.aa-poignee-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--violet); display: grid; place-items: center; box-shadow: 0 2px 12px rgba(12,43,62,.3); font-size: 16px; }
.aa-vertical .aa-poignee-btn { transform: translate(-50%, -50%) rotate(90deg); }
.aa-label { position: absolute; bottom: 12px; padding: 4px 12px; background: rgba(12,43,62,.72); color: #fff; border-radius: 20px; font-size: 13px; font-weight: 600; }
.aa-apres .aa-label { right: 12px; } .aa-avant .aa-label { left: 12px; }

/* ── Bandeau défilant (marquee) ── */
.bloc-marquee { width: 100%; padding: 14px 0; display: flex; align-items: center; gap: 10px; }
/* le fondu des bords porte sur la bande seule : le bouton Pause, à côté, reste net (29/09) */
.marquee-fenetre { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
/* PAUSE (WCAG 2.2.2) : un mouvement qui dure doit pouvoir s'arrêter — au clavier, pas seulement au survol */
.marquee-pause { display: none; }   /* visible une fois le bloc animé par le moteur (hydraté) : sans lui, le bouton ne ferait rien (deck, édition) */
.bloc-marquee[data-hydrate] .marquee-pause { flex: none; width: 40px; height: 40px; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--bord, rgba(127,127,140,.45)); background: var(--surface, transparent); color: var(--texte, inherit); }
.marquee-pause::before { content: ""; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
.marquee-pause[aria-pressed="true"]::before { width: 0; height: 0; border: none; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.marquee-pause:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.bloc-marquee.est-en-pause .marquee-piste { animation-play-state: paused; }
html[data-pref-mouvement="reduit"] .marquee-piste { animation: none !important; }
html[data-pref-mouvement="reduit"] .bloc-marquee .marquee-pause { display: none; }
.marquee-piste { display: inline-flex; gap: 52px; white-space: nowrap; animation: marquee-defile var(--duree, 30s) linear infinite; will-change: transform; }
.bloc-marquee.pause-survol:hover .marquee-piste { animation-play-state: paused; }
.marquee-item { font-family: var(--police-titre); font-size: clamp(1.1rem, 2.4vw, 1.8rem); font-weight: 800; color: var(--texte); opacity: .82; }
@keyframes marquee-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-piste { animation: none; } .bloc-marquee[data-hydrate] .marquee-pause { display: none; } }   /* immobile : rien à mettre en pause */

/* ── Frise chronologique (timeline) ── */
.bloc-timeline { width: 100%; }
/* Verticale */
.tl-verticale { position: relative; padding: 6px 0; }
.tl-verticale::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 78px; width: 2px; background: var(--surface-bord, rgba(127,127,140,.2)); }
.tl-verticale .tl-evenement { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 26px; padding: 0 0 26px; }
.tl-verticale .tl-marqueur { position: relative; text-align: right; padding-right: 4px; }
.tl-verticale .tl-point { position: absolute; right: -21px; top: 5px; width: 13px; height: 13px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px var(--surface, #fff); }
.tl-date { font-family: var(--police-titre); font-weight: 800; color: var(--violet); font-size: .95rem; }
.tl-contenu h3 { font-family: var(--police-titre); font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 800; margin: 0 0 6px; color: var(--texte); }
.tl-txt { line-height: 1.65; color: var(--texte); opacity: .85; }
/* Horizontale (défilable) */
.tl-horizontale { display: flex; gap: 26px; overflow-x: auto; padding: 26px 2px 12px; scrollbar-width: thin; }
.tl-horizontale::-webkit-scrollbar { height: 6px; }
.tl-horizontale .tl-evenement { flex: 0 0 clamp(220px, 30vw, 300px); position: relative; padding-top: 22px; }
.tl-horizontale .tl-evenement::before { content: ""; position: absolute; top: 0; left: 0; right: -26px; height: 2px; background: var(--surface-bord, rgba(127,127,140,.2)); }
.tl-horizontale .tl-evenement:last-child::before { right: 0; }
.tl-horizontale .tl-point { position: absolute; top: -6px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px var(--surface, #fff); }
.tl-horizontale .tl-marqueur { margin-bottom: 6px; }
/* Révélation au scroll */
.tl-reveal .tl-evenement { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.tl-reveal .tl-evenement.est-vu { opacity: 1; transform: none; }
body.mode-edition .tl-reveal .tl-evenement { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tl-reveal .tl-evenement { transition: none; opacity: 1; transform: none; } }
@media (max-width: 560px) { .tl-verticale::before { left: 8px; } .tl-verticale .tl-evenement { grid-template-columns: 1fr; gap: 6px; padding-left: 26px; } .tl-verticale .tl-marqueur { text-align: left; } .tl-verticale .tl-point { left: -22px; right: auto; } }

/* ── Débordement texte des effets scroll : zones plus larges + wrap ── */
.revel-etape { max-width: 42ch; }
.revel-titre { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.revel-txt, .para-txt, .hpin-txt, .depth-txt, .scrub-txt, .snap-txt, .scrolly-etape-txt, .mouse-txt { overflow-wrap: break-word; }
.para-inner { max-width: 46ch; }
.hpin-inner, .depth-inner { max-width: 40ch; }
.snap-inner { max-width: 50ch; }
.scrolly-etape { padding-right: 8px; }
.mouse-cap { max-width: 30ch; }
/* les panneaux/scènes laissent respirer le texte long */
.hpin-panneau, .depth-plan { padding: 44px; }
.para-etape { padding: 8vh 10vw; }

/* ── Scrollbars internes masquées (blocs à défilement propre) ── */
.drag-rail, .bloc-scroll-snap, .hpin-sticky, .scrolly-sticky, .mouse-scene {   /* frise horizontale exclue : sans barre, ses derniers repères étaient inatteignables sans molette horizontale */
  scrollbar-width: none; -ms-overflow-style: none;
}
.drag-rail::-webkit-scrollbar, .bloc-scroll-snap::-webkit-scrollbar,
.hpin-sticky::-webkit-scrollbar, .scrolly-sticky::-webkit-scrollbar, .mouse-scene::-webkit-scrollbar { display: none; }

/* ── Verre sur conteneurs à image : pas de liseré disgracieux (le média fait déjà le cadre) ── */
.flipcard-face.effet-verre,
.revelation.effet-verre,
.carrousel.effet-verre,
.bloc-video.effet-verre { border: none; }
/* Sur ces conteneurs, le verre garde le flou + une ombre douce, sans contour */
.flipcard-face.effet-verre,
.revelation.effet-verre { box-shadow: 0 6px 20px rgba(12,43,62,.12); }

/* ── Repli si GSAP indisponible (CSP/échec) ou mouvement réduit : contenu lisible en flux ── */
.bloc-scroll-hpin.sans-gsap { height: auto; }
.bloc-scroll-hpin.sans-gsap .hpin-sticky { position: relative; height: auto; overflow-x: auto; }
.bloc-scroll-hpin.sans-gsap .hpin-panneau { height: 320px; }
.bloc-scroll-scrub.sans-gsap .scrub-etape { opacity: 1; transform: none; }
.bloc-scroll-depth.sans-gsap { height: auto; }
.bloc-scroll-depth.sans-gsap .depth-sticky { position: relative; height: auto; perspective: none; display: flex; flex-direction: column; gap: 18px; padding: 18px; }
.bloc-scroll-depth.sans-gsap .depth-plan { position: relative; width: 100%; height: 320px; transform: none !important; opacity: 1 !important; }

/* Hero : le titre reste dans une colonne lisible même sur un fond chargé,
   au lieu de s'étaler sur toute la largeur et de couvrir le visuel. */
.ld-hero-txt h1 { max-width: 18ch; }
.ld-hero-txt p { max-width: 46ch; }

/* ============================================================================
   LISIBILITÉ SUR FOND COLORÉ — un fond coloré pose désormais le THÈME du bloc
   (clair / sombre, voir poserContraste dans core/blocks.js). Les couleurs viennent
   des VARIABLES du thème : plus aucune couleur imposée au contenu, donc plus de
   bouton, pastille ou bulle repeint de travers. Le thème choisi par l'auteur prime.
   ========================================================================== */

/* ============================================================================
   IMAGE DE FOND PAR BLOC
   Le bloc porte son propre décor : image en couche de fond, voile réglable
   pour garder le texte lisible. Voir appliquerFondCadre (core/blocks.js).
   ========================================================================== */
.a-fond-image { position: relative; isolation: isolate; overflow: hidden; }
/* spécificité renforcée ([style] : le porteur a toujours --fond-image en ligne) — une charte peut poser « background: none !important » sur un bloc (encart TAKOMA) */
.a-fond-image[style] {
  /* Image et voile = deux COUCHES D'ARRIÈRE-PLAN de l'élément (voile au-dessus), et non plus
     ses ::before / ::after : ceux-ci servent au dessin propre de nombreux blocs (barre d'accent
     de l'encart, ligne de la frise, décor du pilier…), que l'image effaçait (21/09). La couleur
     de fond de l'élément reste dessous. --fond-voile-min : voile plancher (contraste renforcé). */
  --voile-effectif: max(var(--fond-voile, 0), var(--fond-voile-min, 0));
  background-image: linear-gradient(rgb(var(--fond-voile-rgb, 14 26 36) / var(--voile-effectif)), rgb(var(--fond-voile-rgb, 14 26 36) / var(--voile-effectif))), var(--fond-image) !important;
  background-size: 100% 100%, var(--fond-mode, cover) !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* ============================================================================
   SECTIONS DE PAGE
   Une bande regroupe les blocs consécutifs de même section et porte leur
   décor commun. Voir rendrePage (core/blocks.js) et docs/CONCEPTION-SECTIONS.md.

   La bande occupe les 12 colonnes de la page ; ses blocs retrouvent la grille
   à l'intérieur, via .page-section-contenu.
   ========================================================================== */
.page-section {
  grid-column: 1 / -1;
  position: relative;
  padding-top: var(--marge-haut, 0px);
  padding-bottom: var(--marge-bas, 0px);
  border-radius: var(--rayon, 0);
}

/* Le contenu reprend la grille à 12 colonnes de la page. */
.page-section-contenu {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-page, 22px);
  align-content: start;
}

/* Pleine largeur : la bande sort du PADDING de la page, pas de la fenêtre.
   Utiliser 50vw déborderait dans l'éditeur, où la page ne fait pas toute la
   largeur de l'écran (panneaux latéraux). En compensant le padding, le rendu
   est juste dans l'éditeur comme au player. */
.page-section--pleine {
  margin-inline: calc(-1 * var(--page-pad, 32px));
  width: calc(100% + 2 * var(--page-pad, 32px));
  border-radius: 0;
}
/* Le CONTENU est indépendant du fond : par défaut il revient dans la grille,
   même quand la bande s'étend d'un bord à l'autre. C'est le comportement
   attendu — un bandeau illustré large, du texte aligné sur la colonne.
   La classe --contenu-pleine lève cette contrainte quand on veut aussi
   étaler le contenu (galerie, carte, tableau large). */
.page-section--pleine > .page-section-contenu {
  max-width: var(--largeur-contenu, 880px);
  margin-inline: auto;
  padding-inline: var(--page-pad, 32px);
}
.page-section--contenu-pleine > .page-section-contenu {
  max-width: none;
  padding-inline: 0;          /* le contenu touche les bords de la bande */
}

/* Hauteur d'écran : utile pour une ouverture de chapitre. */
.page-section--ecran { min-height: var(--scene-h, 100vh); display: flex; flex-direction: column; justify-content: center; }
.page-section--ecran.page-section--bas { justify-content: flex-end; }
.page-section--ecran.page-section--haut { justify-content: flex-start; }

/* Marqueur d'édition : la limite de section reste visible pendant qu'on
   travaille, sinon on ne comprend pas pourquoi un bloc hérite d'un décor. */
body.mode-edition .page-section {
  outline: 1px dashed var(--violet);   /* REPLI sans color-mix */
  outline: 1px dashed color-mix(in srgb, var(--violet) 35%, transparent);
  outline-offset: 2px;
}
/* Étiquette « section » en édition : un ÉLÉMENT posé par l'éditeur (zones-edition.js), et non
   le ::after de la bande — celui-ci peint la transition « fondu » : en édition, l'étiquette
   l'écrasait (le fondu devenait une étiquette étirée sur 90 px, en dégradé). */
.ed-section-etiquette { position: absolute; top: 2px; right: 6px; z-index: 4; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ed-accent, #FF5A2D); opacity: .7; pointer-events: none; }
body:not(.mode-edition) .ed-section-etiquette { display: none; }

/* Poignées de marge de section — visibles en édition seulement.
   À la frontière entre deux sections, une seule poignée pilote l'espace
   total et le répartit (voir core/marges-section.js). */
.section-poignee { display: none; }
body.mode-edition .section-poignee {
  display: block; position: absolute; left: 0; right: 0; height: 14px;
  cursor: ns-resize; z-index: 5;
}
body.mode-edition .section-poignee--haut { top: -7px; }
body.mode-edition .section-poignee--bas { bottom: -7px; }
body.mode-edition .section-poignee::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 4px; border-radius: 3px;
  background: var(--violet);   /* REPLI si color-mix absent */
  background: var(--violet);   /* REPLI sans color-mix */
  background: color-mix(in srgb, var(--violet) 45%, transparent);
  transition: background .15s, width .15s;
}
body.mode-edition .section-poignee:hover::before,
body.mode-edition .page-section.est-regle .section-poignee::before {
  background: var(--violet); width: 78px;
}
/* La poignée fusionnée est plus large : elle agit sur deux sections. */
body.mode-edition .section-poignee.est-fusionnee::before { width: 78px; height: 5px; }
body.mode-edition .section-poignee.est-fusionnee:hover::before { width: 104px; }

.section-bulle {
  position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
  background: var(--violet); color: #fff; border-radius: 6px;
  padding: 3px 9px; font-size: 11px; font-weight: 700; white-space: nowrap;
  pointer-events: none; z-index: 6;
}
body.mode-edition .page-section.est-regle { outline-color: var(--violet); }

/* Effets au défilement (voir core/effets-scroll.js).
   La couche de parallaxe déborde volontairement de la bande : en la
   déplaçant, on ne doit jamais découvrir de vide sur les bords. */
.page-section.a-parallaxe { overflow: hidden; }
.page-section.a-parallaxe.a-fond-image { background-image: none !important; }   /* image ET voile passent dans la couche mobile */
.section-parallaxe {
  position: absolute; inset: -16% 0; z-index: -2;
  background-position: center; background-repeat: no-repeat;
  will-change: transform;
}
/* Épinglage : la bande reste en place pendant que la suite la recouvre. */
.page-section.est-epinglee { position: sticky; top: 0; z-index: 0; }

@media (prefers-reduced-motion: reduce) {
  .section-parallaxe { transform: none !important; }
  .page-section.est-epinglee { position: relative; }
}

/* ============================================================================
   TRANSITIONS ENTRE SECTIONS
   Comment une bande rejoint la suivante. « Franche » est le défaut et ne
   produit aucune règle : une transition doit être un choix, pas un état.

   Toutes s'appuient sur --cadre-fond, la couleur posée par appliquerFondCadre :
   la transition suit donc automatiquement le décor, sans réglage en double.
   ========================================================================== */

/* ANIMATION LOTTIE EN FOND DE SECTION (core/blocks.js › poserFondLottie) : l'animation, puis le voile, sous le
   contenu ; l'image de fond éventuelle reste dessous, SANS son voile (il passe au-dessus de l'animation). */
.page-section.a-fond-lottie { position: relative; isolation: isolate; overflow: hidden; }
.a-fond-lottie.a-fond-image[style] { --voile-effectif: 0 !important; }
.fond-lottie, .fond-lottie-voile { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fond-lottie > svg { width: 100% !important; height: 100% !important; display: block; }
.fond-lottie-voile { background: rgb(var(--fond-voile-rgb, 14 26 36) / max(var(--fond-voile, 0), var(--fond-voile-min, 0))); }
.fond-lottie-pause { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .55); background: rgb(14 26 36 / .72); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.fond-lottie-pause::before { content: ""; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
.fond-lottie-pause.est-en-pause::before { width: 0; height: 0; border: none; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.fond-lottie-pause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px rgb(14 26 36); }

/* Fondu : le bas de la bande s'estompe vers la suivante. */
.page-section--t-fondu::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  /* Derrière le contenu : un dégradé posé au-dessus atténuerait le texte,
     ce qui est précisément ce qu'on ne veut pas d'une transition. */
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--cadre-fond, transparent));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
  mask-image: linear-gradient(to bottom, transparent, #000);
}

/* Chevauchement : la bande suivante remonte sur celle-ci. */
.page-section--t-chevauchement { margin-bottom: -56px; z-index: 0; }
.page-section--t-chevauchement + .page-section { z-index: 1; }
/* Un arrondi haut rend le recouvrement lisible plutôt qu'accidentel. */
.page-section--t-chevauchement + .page-section { border-start-start-radius: 18px; border-start-end-radius: 18px; }

/* Diagonale : le bas de la bande est coupé en biais. */
.page-section--t-diagonale { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), 0 100%); }
/* La suivante reçoit l'angle complémentaire, sinon le biais laisse un vide. */
.page-section--t-diagonale + .page-section { margin-top: -42px; padding-top: calc(var(--marge-haut, 0px) + 42px); }

@media (prefers-reduced-motion: reduce) {
  /* Les transitions sont statiques : rien à neutraliser, mais le
     chevauchement peut gêner la lecture au zoom — on le réduit. */
  .page-section--t-chevauchement { margin-bottom: -24px; }
}

/* Bouton d'affichage des sous-titres (bloc audio).
   L'état vit sur le conteneur : le CSS masque la zone sans que le script
   ait à toucher au style. */
.bloc-audio { position: relative; }
.bloc-audio-cc {
  position: absolute; top: 10px; right: 12px;
  font: 700 12px/1 var(--police-titre, inherit); letter-spacing: .06em;   /* 12 px au moins : l'audit téléphone (29/09) */
  padding: 5px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--bord, rgba(127,127,140,.35));
  background: var(--surface, rgba(127,127,140,.12));
  color: var(--texte, inherit); opacity: .75; transition: opacity .15s, background .15s;
}
.bloc-audio-cc:hover { opacity: 1; }
.bloc-audio-cc[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.bloc-audio-cc:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; opacity: 1; }
.bloc-audio.st-masques .bloc-audio-st { display: none; }

/* ============================================================================
   LISTE DE VÉRIFICATION
   Outil d'accompagnement : aucune notion de bonne ou mauvaise réponse.
   ========================================================================== */
.bloc-checklist { display: flex; flex-direction: column; gap: 11px; }
.bloc-cl-titre { font-family: var(--police-titre, inherit); font-weight: 700; font-size: 17px; }
.bloc-cl-jauge { height: 6px; border-radius: 4px; background: var(--bord, rgba(127,127,140,.25)); overflow: hidden; }
.bloc-cl-jauge > i { display: block; height: 100%; width: 0; border-radius: 4px;
  background: var(--vert, #1E7B4D); transition: width .25s ease; }
.bloc-cl-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.bloc-cl-item { display: flex; align-items: flex-start; gap: 11px; padding: 10px 13px;
  border: 1px solid var(--bord, rgba(127,127,140,.3)); border-radius: var(--rayon, 10px);
  background: var(--surface, transparent); transition: background .15s, border-color .15s; }
.bloc-cl-item.est-faite { border-color: var(--vert, #1E7B4D);
  background: color-mix(in srgb, var(--vert, #1E7B4D) 10%, transparent); }
.bloc-cl-item input { margin-top: 1px; accent-color: var(--vert, #1E7B4D); }
.bloc-cl-item label { cursor: pointer; }
.bloc-cl-texte { display: block; }
.bloc-cl-detail { display: block; font-size: .88em; opacity: .68; margin-top: 2px; }

/* ============================================================================
   CURSEUR D'ESTIMATION
   ========================================================================== */
.bloc-estim { display: flex; flex-direction: column; gap: 9px; }
.bloc-estim-q { font-size: 1.02em; }
.bloc-estim-val { font-family: var(--police-titre, inherit); font-weight: 800;
  font-size: 32px; text-align: center; color: var(--violet, #0072CE); }
.bloc-estim-curseur { width: 100%; accent-color: var(--violet, #0072CE); }
.bloc-estim-echelle { display: flex; justify-content: space-between; font-size: .82em; opacity: .6; }
.bloc-estim-actions { display: flex; gap: 9px; }
.bloc-estim-valider { font: inherit; font-size: .9em; font-weight: 700; padding: 9px 17px;
  border-radius: 8px; border: 0; cursor: pointer; background: var(--accent-bouton, var(--violet, #0072CE)); color: #fff; }
.bloc-estim-valider:disabled { opacity: .5; cursor: default; }
.bloc-estim-reponse { padding: 12px 15px; border-radius: var(--rayon, 10px);
  background: var(--surface, rgba(127,127,140,.1)); font-size: .95em; }
.bloc-estim-verdict { display: block; margin-bottom: 3px; }
.bloc-estim.est-juste .bloc-estim-verdict { color: color-mix(in srgb, var(--vert, #1E7B4D) 88%, #000); }   /* vert soutenu : 4,41:1 sur un fond ivoire, sous le seuil */
.bloc-estim-edition { font-size: .82em; opacity: .6; font-style: italic; }

/* ============================================================================
   POINTS CHAUDS
   Les pastilles sont positionnées en pourcentage : le bloc change de largeur
   selon sa colonne, des pixels seraient faux au premier redimensionnement.
   ========================================================================== */
.bloc-hotspots { display: flex; flex-direction: column; gap: 11px; }
/* La zone et l'image doivent coïncider : les points sont placés en % DE LA ZONE. Avec une hauteur
   minimale de 220 px, une image plus basse laissait du vide, et les points tombaient à côté (23/09). */
.bloc-hs-zone { position: relative; border-radius: var(--rayon, 10px); overflow: hidden;
  background: var(--surface, rgba(127,127,140,.15)); height: var(--h, auto); }
.bloc-hs-img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bloc-hs-zone.est-vide { display: grid; place-items: center; min-height: 220px; }
.bloc-hs-zone.est-vide::after { content: "Image du bloc"; font-size: 13px; opacity: .5;
  text-transform: uppercase; letter-spacing: .08em; }
.bloc-hs-zone.est-vide .bloc-hs-img { display: none; }
.bloc-hs-point { position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid #fff; background: var(--violet, #0072CE); color: #fff;
  font: 700 13px/1 var(--police-titre, inherit); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.bloc-hs-point[aria-expanded="true"] { background: var(--encre, #222); transform: translate(-50%, -50%) scale(1.12); }
.bloc-hs-point:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bloc-hs-donnee { display: none; }          /* porteurs de texte, pour la traduction */
.bloc-hs-info { padding: 13px 15px; border-radius: var(--rayon, 10px);
  background: var(--surface, rgba(127,127,140,.12));
  border-left: 3px solid var(--violet, #0072CE); min-height: 3.2em; font-size: .95em; }
.bloc-hs-titre { display: block; margin-bottom: 3px; }
.bloc-hs-invite { opacity: .6; font-weight: 400; }
.bloc-hs-info.est-rempli .bloc-hs-invite { display: none; }

/* ============================================================================
   INTERACTIONS NOTÉES — éléments communs (ordre, paires, tri)
   ========================================================================== */
.bloc-ordre-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.bloc-i-valider, .bloc-i-rejouer { font: inherit; font-size: .88em; font-weight: 700;
  padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.bloc-i-valider { border: 0; background: var(--accent-bouton, var(--violet, #0072CE)); color: #fff; }
.bloc-i-rejouer { border: 1px solid var(--bord, rgba(127,127,140,.35)); background: transparent; color: inherit; }
.bloc-i-retour { font-size: .88em; font-weight: 600; }
.bloc-i-retour.est-juste { color: var(--vert, #1E7B4D); }
.bloc-i-retour.est-faux { color: var(--rouge, #C0392B); }

/* ---- Ordonnancement ------------------------------------------------------ */
.bloc-ordre-consigne { margin-bottom: 11px; }
.bloc-ordre-liste { list-style: none; margin: 0; padding: 0; counter-reset: ord;
  display: flex; flex-direction: column; gap: 7px; }
.bloc-ordre-item { counter-increment: ord; display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border: 1px solid var(--bord, rgba(127,127,140,.3));
  border-radius: var(--rayon, 10px); background: var(--surface, transparent); cursor: grab; }
.bloc-ordre-item::before { content: counter(ord); flex: none; width: 24px; height: 24px;
  border-radius: 50%; display: grid; place-items: center; font-size: .78em; font-weight: 700;
  background: var(--bord, rgba(127,127,140,.25)); }
.bloc-ordre-item.est-pris { opacity: .5; }
.bloc-ordre-item.est-juste { border-color: var(--vert, #1E7B4D); }
.bloc-ordre-item.est-faux { border-color: var(--rouge, #C0392B); }
.bloc-ordre-texte { flex: 1; }
.bloc-ordre-nav { display: flex; gap: 4px; }
.bloc-ordre-nav button { width: 27px; height: 27px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--bord, rgba(127,127,140,.35)); background: transparent; color: inherit; font-size: .75em; }
.bloc-ordre-nav button:disabled { opacity: .28; cursor: default; }

/* ---- Appariement --------------------------------------------------------- */
.bloc-paires-consigne { margin-bottom: 11px; }
.bloc-paires-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.bloc-paires-col h4 { font-size: .78em; text-transform: uppercase; letter-spacing: .07em;
  opacity: .6; margin-bottom: 8px; font-weight: 700; }
.bloc-paires-item { display: block; width: 100%; text-align: left; font: inherit; font-size: .95em;
  padding: 9px 13px; margin-bottom: 7px; cursor: pointer; color: inherit;
  border: 1px solid var(--bord, rgba(127,127,140,.3)); border-radius: var(--rayon, 9px);
  background: var(--surface, transparent); }
.bloc-paires-item[aria-pressed="true"] { border-color: var(--violet, #0072CE);
  background: color-mix(in srgb, var(--violet, #0072CE) 12%, transparent); }
.bloc-paires-item.est-liee { border-color: var(--vert, #1E7B4D); cursor: default;
  background: color-mix(in srgb, var(--vert, #1E7B4D) 12%, transparent); }
.bloc-paires-item.est-ratee { border-color: var(--rouge, #C0392B);
  background: color-mix(in srgb, var(--rouge, #C0392B) 12%, transparent); }

/* ---- Tri par catégories --------------------------------------------------- */
.bloc-tri-consigne { margin-bottom: 11px; }
.bloc-tri-reserve { border: 1px dashed var(--bord, rgba(127,127,140,.4));
  border-radius: var(--rayon, 10px); padding: 11px; min-height: 62px; }
.bloc-tri-cibles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-top: 12px; }
.bloc-tri-cible { border: 2px dashed var(--bord, rgba(127,127,140,.4));
  border-radius: var(--rayon, 10px); padding: 11px; min-height: 86px;
  transition: border-color .15s, background .15s; }
.bloc-tri-cible.est-survol, .bloc-tri-reserve.est-survol { border-color: var(--violet, #0072CE);
  background: color-mix(in srgb, var(--violet, #0072CE) 8%, transparent); }
.bloc-tri-cible h4 { font-size: .78em; text-transform: uppercase; letter-spacing: .07em;
  opacity: .6; margin-bottom: 8px; font-weight: 700; }
.bloc-tri-etiq { display: inline-block; font: inherit; font-size: .92em; color: inherit;
  padding: 7px 12px; margin: 0 6px 6px 0; cursor: grab;
  border: 1px solid var(--bord, rgba(127,127,140,.35)); border-radius: 8px;
  background: var(--surface, transparent); }
.bloc-tri-etiq.est-choisie { border-color: var(--violet, #0072CE);
  background: color-mix(in srgb, var(--violet, #0072CE) 14%, transparent); }
.bloc-tri-etiq.est-juste { border-color: var(--vert, #1E7B4D);
  background: color-mix(in srgb, var(--vert, #1E7B4D) 12%, transparent); }
.bloc-tri-etiq.est-faux { border-color: var(--rouge, #C0392B);
  background: color-mix(in srgb, var(--rouge, #C0392B) 12%, transparent); }

/* ---- Texte à trous -------------------------------------------------------- */
.bloc-trous-consigne { margin-bottom: 10px; }
.bloc-trous-texte { line-height: 2.5; font-size: 1.02em; }
.bloc-trous-champ { font: inherit; font-size: .92em; padding: 4px 9px;
  border: 0; border-bottom: 2px solid var(--violet, #0072CE); border-radius: 5px 5px 0 0;
  background: var(--surface, rgba(127,127,140,.12)); color: inherit; min-width: 118px; }
.bloc-trous-champ.est-juste { border-color: var(--vert, #1E7B4D);
  background: color-mix(in srgb, var(--vert, #1E7B4D) 12%, transparent); }
.bloc-trous-champ.est-faux { border-color: var(--rouge, #C0392B);
  background: color-mix(in srgb, var(--rouge, #C0392B) 12%, transparent); }

/* ---- Scénario ------------------------------------------------------------- */
.bloc-sc-donnees { display: none; }          /* porteurs de texte pour la traduction */
.bloc-sc-texte { font-size: 1.02em; padding: 14px 17px; border-radius: var(--rayon, 10px);
  background: var(--surface, rgba(127,127,140,.12));
  border-left: 3px solid var(--violet, #0072CE); }
.bloc-sc-retour { display: none; font-size: .92em; font-style: italic; opacity: .8;
  margin-top: 9px; padding-left: 4px; }
.bloc-sc-retour.est-visible { display: block; }
.bloc-sc-choix { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bloc-sc-bouton { text-align: left; font: inherit; font-size: .95em; color: inherit;
  padding: 11px 14px; cursor: pointer;
  border: 1px solid var(--bord, rgba(127,127,140,.3)); border-radius: var(--rayon, 9px);
  background: var(--surface, transparent); }
.bloc-sc-bouton:hover { border-color: var(--violet, #0072CE); }
.bloc-sc-fil { font-size: .82em; opacity: .6; margin-top: 11px; }
.bloc-sc-alerte { margin-top: 11px; padding: 10px 13px; border-radius: 8px; font-size: .85em;
  background: color-mix(in srgb, #B8860B 14%, transparent); border-left: 3px solid #B8860B; }
.ed-champ--alerte select { border-color: #B8860B; }

/* ============================================================================
   TAILLE DES CIBLES (WCAG 2.5.8 — 24 × 24 px)
   Les cases à cocher natives font 13 à 17 px selon le système. Plutôt que de
   les grossir — ce qui changerait l'apparence — on élargit la zone cliquable
   autour, par un pseudo-élément transparent. La cible atteint 24 px, le visuel
   ne bouge pas.
   ========================================================================== */
/* Les pseudo-éléments ne s'appliquent pas aux <input> : la seule voie fiable
   est de leur donner la taille requise. Les cases grossissent donc un peu —
   changement visuel assumé, c'est le prix de la conformité. */
.bloc-cl-item input[type="checkbox"],
.quiz-choix input[type="checkbox"],
.quiz-choix input[type="radio"] {
  width: 24px; height: 24px; min-width: 24px; min-height: 24px;
  flex: none; cursor: pointer;
}
/* Le libellé reste cliquable : c'est la cible réelle la plus large. */
.bloc-cl-item label, .quiz-choix label { min-height: 24px; display: block; }

/* ============================================================================
   THÈME PAR BLOC
   Un bloc peut forcer un thème indépendamment de la page — un encart sombre
   au milieu d'une page claire, par exemple. On redéfinit les variables sur le
   bloc lui-même : aucune règle dédiée à écrire, le reste du style suit.
   ========================================================================== */
/* Les variables du thème d'un bloc viennent de la COPIE GÉNÉRÉE (core/theme-leaf.css, 18 variables,
   partagée avec les sections et les zones). Une seconde définition vivait ici avec 4 variables :
   selon l'ordre de chargement, l'une écrasait l'autre — d'où un rendu différent entre l'éditeur et
   le module (titre blanc sur fond blanc). Supprimée le 23/09. */
/* Un bloc au thème forcé sans fond propre reçoit une surface, sinon le
   changement de couleur de texte serait illisible sur le fond de la page. */
/* RESTREINT AUX BLOCS : la version globale attrapait tout élément portant data-theme — la racine du
   document et, depuis 2.36.0, la PAGE elle-même, dont le fond ne suivait plus la bascule clair/sombre. */
.page-bloc[data-theme="dark"]:not([style*="background"]), .page-bloc [data-theme="dark"]:not([style*="background"]) { background: #12202C; }
.page-bloc[data-theme="light"]:not([style*="background"]), .page-bloc [data-theme="light"]:not([style*="background"]) { background: #FFFFFF; }



/* ============================================================================
   STYLES DE TEXTE — famille complète et cohérente
   ----------------------------------------------------------------------------
   Le CSS ne définissait que « titre » et « puces ». Conséquences observées :
     · le CONTENU n'avait aucune règle propre — il héritait de ce qui le
       précédait, d'où un texte tantôt gros et gras sans raison ;
     · « Sous-titre 1 » et « Sous-titre 2 », proposés par la barre, ne
       correspondaient à aucune classe : les choisir ne changeait rien ;
     · les PUCES n'affichaient pas de puce, faute de règle de liste.

   Les noms suivent EXACTEMENT les valeurs du sélecteur (editor.html, #rtStyle)
   et celles posées dans parts[].style. Toute nouvelle valeur doit avoir sa
   règle ici, sinon elle sera sans effet.
   ========================================================================== */
/* ÉCHELLE TYPOGRAPHIQUE — source unique.
   Les styles de bloc (.bloc-texte--*) et les mises en forme en ligne (.rt-*)
   s'y réfèrent tous les deux : le même intitulé donne donc le même résultat,
   qu'il soit appliqué à un paragraphe entier ou à une sélection. */
.page, .page--grille, .bloc-texte, .deck-slide {
  /* Valeurs REPRISES des blocs existants, pas inventées :
       titre    → .page h1                (clamp 26-38px, 900)
       st1      → .citation-auteur        (16,5px, 700)
       st2      → .revelation-legende     (14px)
       contenu  → p.bloc-texte--contenu   (16,5px, 400)
     La différence entre « contenu » et « sous-titre 1 » tient à la GRAISSE,
     pas à la taille : c'est ainsi que le projet les distingue déjà. */
  --t-titre: calc(clamp(26px, 4.6vw, 38px) * var(--echelle-titre, 1));
  --t-contenu: calc(16.5px * var(--echelle-texte, 1));
  /* Les sous-titres suivent AUSSI le texte courant (25/09) : avec un texte agrandi (échelle 1,35),
     un sous-titre 1 tombait à 19 px sous un texte de 22,3 px. Aux échelles par défaut, rien ne
     change : sous-titre 1 = taille du texte (la graisse les distingue), sous-titre 2 = 14 px. */
  --t-st1: max(calc(16.5px * var(--echelle-titre, 1)), var(--t-contenu));
  --t-st2: max(calc(14px * var(--echelle-titre, 1)), calc(var(--t-contenu) * .85));
  /* Tailles SECONDAIRES dérivées du texte courant : elles suivent le réglage « Taille du texte ».
     Figées en px, elles restaient à 11-15 px quand le texte courant passait à 20-22 px. */
  --t-secondaire: calc(var(--t-contenu) * .9);                  /* feedback, détail, bilan */
  --t-etiquette: max(13px, calc(var(--t-contenu) * .7));        /* surtitres, étiquettes en capitales, numéros */
}

.bloc-texte.bloc-texte--titre {
  font-family: var(--police-titre, inherit);
  font-size: var(--t-titre); font-weight: 900; line-height: 1.12;
  letter-spacing: -.02em;
}
.bloc-texte.bloc-texte--sous-titre-1,
.bloc-texte.bloc-texte--soustitre,
.page--grille .bloc-texte--sous-titre-1,
.page--grille .bloc-texte--soustitre {          /* ancien nom, conservé pour les projets existants */
  font-family: var(--police-titre, inherit);
  font-size: var(--t-st1); font-weight: 700; line-height: 1.45;
}
.bloc-texte.bloc-texte--sous-titre-2,
.page--grille h3.bloc-texte--sous-titre-2,
.page--grille .bloc-texte--sous-titre-2 {
  font-family: var(--police-titre, inherit);
  font-size: var(--t-st2); font-weight: 700; line-height: 1.45;
}
.bloc-texte.bloc-texte--contenu,
.page--grille .bloc-texte--contenu {
  font-family: var(--police-corps, inherit);
  font-size: var(--t-contenu); font-weight: 400; line-height: 1.7;
}
/* Titraille : un sous-titre collé à son titre, pas deux paragraphes. */
.bloc-texte--titre + .bloc-texte--sous-titre-1,
.bloc-texte--titre + .bloc-texte--soustitre { margin-top: -.15em; opacity: .88; }

/* Puces : sans ces règles, le style « Puces » ne montrait aucune puce. */
.bloc-texte.bloc-texte--puces {
  font-family: var(--police-corps, inherit);
  font-size: var(--t-contenu); font-weight: 400; line-height: 1.7;
  list-style: disc outside;
  margin: 0; padding-left: 1.35em;
}
.bloc-texte--puces li { display: list-item; margin: .35em 0; }
.bloc-texte--puces li::marker { color: var(--violet); }

/* Mise en forme EN LIGNE (barre flottante) : mêmes proportions, appliquées à
   une sélection plutôt qu'à un paragraphe entier. */
.rt-puces { list-style: disc outside; padding-left: 1.35em; display: inline-block; }
.rt-puces li { display: list-item; }

/* Transcription d'un audio : repliée par défaut, elle ne doit pas encombrer
   la page. L'horodatage sert de repère pour se situer dans l'écoute. */
.bloc-audio-transcription { margin-top: 10px; font-size: .92em; }
.bloc-audio-transcription > summary {
  cursor: pointer; padding: 7px 0; font-weight: 700; font-size: .92em;
  list-style: none; display: flex; align-items: center; gap: 7px; min-height: 24px;
}
.bloc-audio-transcription > summary::-webkit-details-marker { display: none; }
.bloc-audio-transcription > summary::before {
  content: "▸"; color: var(--violet); transition: transform .15s;
}
.bloc-audio-transcription[open] > summary::before { transform: rotate(90deg); }
.bloc-audio-transcription > summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.bloc-audio-tr-corps {
  padding: 11px 14px; border-radius: var(--rayon, 10px);
  background: var(--surface, rgba(127,127,140,.1)); max-height: 340px; overflow-y: auto;
}
.bloc-audio-tr-ligne { display: flex; gap: 11px; margin: 0 0 7px; line-height: 1.6; }
.bloc-audio-tr-t { flex: none; min-width: 3.4em; opacity: .55; font-variant-numeric: tabular-nums; font-size: .9em; }

/* ============================================================================
   RESSOURCES À TÉLÉCHARGER
   ========================================================================== */
.bloc-res-titre { font-family: var(--police-titre, inherit); font-weight: 700;
  font-size: 1.12em; margin-bottom: 11px; }
.bloc-res-liste { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.bloc-res-item { display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--bord, rgba(127,127,140,.28)); border-radius: var(--rayon, 10px);
  background: var(--surface, transparent); transition: border-color .15s, background .15s; }
.bloc-res-item:hover { border-color: var(--violet); }
.bloc-res-ico { flex: none; width: 38px; height: 38px; margin-left: 11px;
  display: grid; place-items: center; border-radius: 9px; font-size: 17px;
  background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); }
.bloc-res-lien { flex: 1; display: block; padding: 12px 14px 12px 0;
  text-decoration: none; color: inherit; min-height: 24px; }
.bloc-res-lib { display: block; font-weight: 600; }
.bloc-res-det { display: block; font-size: .86em; opacity: .62; margin-top: 2px; }
/* Une ressource sans fichier ne doit pas ressembler à un lien actif. */
.bloc-res-item.est-vide { opacity: .5; }
.bloc-res-item.est-vide .bloc-res-lien { cursor: default; }
.bloc-res-lien:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 8px; }

/* ============================================================================
   GLOSSAIRE
   ========================================================================== */
.bloc-glo-titre { font-family: var(--police-titre, inherit); font-weight: 700;
  font-size: 1.12em; margin-bottom: 11px; }
.bloc-glo-filtre { width: 100%; font: inherit; font-size: .95em; padding: 9px 13px;
  margin-bottom: 13px; border-radius: var(--rayon, 9px); color: inherit;
  border: 1px solid var(--bord, rgba(127,127,140,.3)); background: var(--surface, transparent); }
.bloc-glo-filtre:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.bloc-glo-liste { margin: 0; }
.bloc-glo-entree { padding: 11px 0; border-bottom: 1px solid var(--bord, rgba(127,127,140,.18)); }
.bloc-glo-entree:last-child { border-bottom: 0; }
.bloc-glo-entree dt { font-weight: 700; font-family: var(--police-titre, inherit); }
.bloc-glo-entree dd { margin: 4px 0 0; opacity: .86; line-height: 1.6; }
.bloc-glo-vide { opacity: .6; font-style: italic; padding: 13px 0; }

/* ============================================================================
   MÉDIA + TEXTE — quatre dispositions
   La grille change d'axe selon la disposition ; le contenu, lui, ne bouge pas.
   Écrire quatre variantes de balisage aurait multiplié les chemins de rendu
   pour un seul résultat.
   ========================================================================== */
.bloc-duo { display: grid; gap: 22px; align-items: center; }
.bloc-duo[data-disposition="image-haut"],
.bloc-duo[data-disposition="image-bas"] { grid-template-columns: 1fr; }
.bloc-duo[data-disposition="image-gauche"] { grid-template-columns: var(--part, 50%) 1fr; }
/* Image à droite : la part revient à la SECONDE colonne, puisque l'ordre
   visuel est inversé — sinon le réglage agirait sur le texte. */
.bloc-duo[data-disposition="image-droite"] { grid-template-columns: 1fr var(--part, 50%); }
/* L'ordre visuel suffit : le DOM garde image puis texte, ce qui donne l'ordre
   de lecture attendu au clavier et aux lecteurs d'écran, quelle que soit la
   disposition choisie. */
.bloc-duo[data-disposition="image-bas"] .bloc-duo-media,
.bloc-duo[data-disposition="image-droite"] .bloc-duo-media { order: 2; }

.bloc-duo-media { margin: 0; border-radius: var(--rayon, 12px); overflow: hidden;
  background: var(--surface, rgba(127,127,140,.12)); height: var(--h, auto); }
.bloc-duo-media img { width: 100%; height: 100%; display: block;
  object-fit: var(--fit, cover); }
.bloc-duo-media.est-vide { min-height: var(--h, 180px); display: grid; place-items: center; }
.bloc-duo-media.est-vide::after { content: "Image"; font-size: 12px; opacity: .45;
  text-transform: uppercase; letter-spacing: .09em; }
.bloc-duo-media.est-vide img { display: none; }

.bloc-duo-corps { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bloc-duo-titre { font-family: var(--police-titre, inherit); font-weight: 800;
  font-size: var(--t-st1, 24px); line-height: 1.25; }
.bloc-duo-texte { line-height: 1.7; }
.bloc-duo-bouton { margin-top: 6px; }

/* Sous 720 px, deux colonnes donnent deux colonnes illisibles : on empile. */
@media (max-width: 720px) {
  .bloc-duo[data-disposition="image-gauche"],
  .bloc-duo[data-disposition="image-droite"] { grid-template-columns: 1fr; }
  .bloc-duo .bloc-duo-media { order: 0; }
  .bloc-duo[data-disposition="image-bas"] .bloc-duo-media { order: 2; }
}


/* Poignée de répartition du bloc « Média + texte » (édition seulement).
   Elle se tient sur la frontière des deux colonnes : discrète au repos, nette
   au survol — on doit pouvoir la trouver sans qu'elle encombre la lecture. */
.bloc-duo { position: relative; }
.bloc-duo-poignee {
  position: absolute; top: 12%; bottom: 12%; width: 14px;
  left: calc(var(--part, 50%) + 4px);
  cursor: col-resize; z-index: 4; opacity: 0; transition: opacity .15s;
}
.bloc-duo[data-disposition="image-droite"] .bloc-duo-poignee {
  left: auto; right: calc(var(--part, 50%) + 4px);
}
.bloc-duo-poignee::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
  transform: translateX(-50%); border-radius: 3px; background: var(--violet);
}
.bloc-duo:hover .bloc-duo-poignee, .bloc-duo-poignee.est-actif { opacity: .75; }
.bloc-duo-poignee.est-actif { opacity: 1; }
@media (max-width: 720px) { .bloc-duo-poignee { display: none; } }

/* ============================================================
   Bloc « Média + texte » — présentation CARTE (2.28.5)
   Un seul cadre aux coins arrondis ; l'image touche les bords de la carte
   (rognée par ses coins, sans coins propres) ; le texte vit dans une zone à
   marge intérieure. Côte à côte, l'image occupe toute la hauteur de la carte.
   ============================================================ */
.bloc-duo--carte { gap: 0; align-items: stretch; overflow: hidden; border-radius: var(--rayon-carte, 18px);
  background: var(--cadre-fond, var(--surface)); border: 1px solid var(--surface-bord); }
.bloc-duo--carte .bloc-duo-media { border-radius: 0; margin: 0; min-height: var(--h, 220px); }
.bloc-duo--carte .bloc-duo-media img { height: 100%; object-fit: var(--fit, cover); }
.bloc-duo--carte[data-disposition="image-haut"] .bloc-duo-media,
.bloc-duo--carte[data-disposition="image-bas"] .bloc-duo-media { height: var(--h, 220px); }
.bloc-duo--carte[data-disposition="image-gauche"] .bloc-duo-media,
.bloc-duo--carte[data-disposition="image-droite"] .bloc-duo-media { height: auto; min-height: 100%; align-self: stretch; }
.bloc-duo--carte[data-disposition="image-gauche"] .bloc-duo-media img,
.bloc-duo--carte[data-disposition="image-droite"] .bloc-duo-media img { position: absolute; inset: 0; }
.bloc-duo--carte[data-disposition="image-gauche"] .bloc-duo-media,
.bloc-duo--carte[data-disposition="image-droite"] .bloc-duo-media { position: relative; }
.bloc-duo--carte .bloc-duo-corps { padding: clamp(18px, 3vw, 30px); justify-content: center; }
.bloc-duo--carte[data-disposition="image-gauche"] .bloc-duo-corps,
.bloc-duo--carte[data-disposition="image-droite"] .bloc-duo-corps { justify-content: center; min-height: 240px; }
/* la séparation image / texte : un filet, comme sur le croquis */
.bloc-duo--carte[data-disposition="image-haut"] .bloc-duo-media { border-bottom: 1px solid var(--surface-bord); }
.bloc-duo--carte[data-disposition="image-bas"] .bloc-duo-media { border-top: 1px solid var(--surface-bord); }
.bloc-duo--carte[data-disposition="image-gauche"] .bloc-duo-media { border-right: 1px solid var(--surface-bord); }
.bloc-duo--carte[data-disposition="image-droite"] .bloc-duo-media { border-left: 1px solid var(--surface-bord); }
@media (max-width: 720px) {
  .bloc-duo--carte[data-disposition="image-gauche"] .bloc-duo-media,
  .bloc-duo--carte[data-disposition="image-droite"] .bloc-duo-media { min-height: var(--h, 220px); border: 0; border-bottom: 1px solid var(--surface-bord); }
  .bloc-duo--carte[data-disposition="image-gauche"] .bloc-duo-corps,
  .bloc-duo--carte[data-disposition="image-droite"] .bloc-duo-corps { min-height: 0; }
}

/* ============================================================
   ZONES DE SECTION (2.30) — séparations verticales, 2 à 4 zones côte à côte
   Chaque zone a son fond (appliquerFondCadre) et sa grille de 12 colonnes ; les
   marges de la section passent aux zones pour que les fonds couvrent toute la hauteur.
   ============================================================ */
.page-section--zones { padding-top: 0; padding-bottom: 0; }
.page-section-zones { display: grid; align-items: stretch; min-width: 0; }
.page-section-zone { position: relative; min-width: 0; padding: var(--marge-haut, 32px) var(--zone-pad, 28px) var(--marge-bas, 32px); }
.page-section-zone > .page-section-contenu { max-width: none; margin: 0; padding: 0; }
.page-section--pleine .page-section-zone:first-child { padding-left: max(var(--zone-pad, 28px), var(--page-pad, 32px)); }
.page-section--pleine .page-section-zone:last-child { padding-right: max(var(--zone-pad, 28px), var(--page-pad, 32px)); }
@media (max-width: 720px) {
  .page-section-zones { grid-template-columns: 1fr !important; }   /* mobile : les zones s'empilent, chacune avec son fond */
}
/* Édition : on voit les zones et leurs limites */
body.mode-edition .page-section-zone { outline: 1px dashed color-mix(in srgb, var(--violet) 35%, transparent); outline-offset: -1px; }
/* Étiquette « Zone n » : un ÉLÉMENT posé par l'éditeur (zones-edition.js). Un ::before
   l'affichait avant, mais ::before porte aussi l'image de fond de la zone (a-fond-image) :
   l'image n'était peinte que dans la minuscule boîte de l'étiquette (21/09). */
.ed-zone-etiquette { position: absolute; top: 4px; left: 8px; z-index: 2; font: 600 10px/1 var(--police, system-ui); letter-spacing: .06em; text-transform: uppercase; opacity: .6; pointer-events: none; }
body.mode-edition .page-section-zone:has(> .page-section-contenu:empty) { min-height: 140px; }
body.mode-edition .page-section-zone > .page-section-contenu:empty::after { content: "Zone vide — rangez-y un bloc (onglet Section › « Ce bloc est dans »)"; grid-column: 1 / -1; align-self: center; text-align: center; font-size: 12.5px; opacity: .55; padding: 28px 8px; }
/* Grille intérieure d'une zone : 11 espaces de 22 px exigeaient ≥ 242 px et débordaient
   des zones étroites (3 ou 4 zones). Espacement proportionnel, colonnes réductibles. */
.page-section-zone > .page-section-contenu { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(6px, 1.4vw, 18px); }
.page-section-zone .page-bloc { min-width: 0; }

/* ============================================================
   PLEINE LARGEUR — jusqu'aux bords de l'ÉCRAN, et jusqu'en haut (21/09)
   Dans le player, la page est limitée (max-width) et centrée dans la scène : la
   bande ne sortait que du rembourrage de la page. La scène devient conteneur de
   taille, et la bande s'étend sur toute sa largeur (100cqw). Dans l'éditeur, la
   page représente l'écran : la règle d'origine (compensation du rembourrage) reste.
   ============================================================ */
#scene { container-type: inline-size; }
#scene .page-section--pleine { width: 100cqw; margin-inline: calc(50% - 50cqw); }
/* Section pleine largeur en TÊTE de page : elle remonte jusqu'en haut (le rembourrage
   supérieur de la page est absorbé ; ses propres marges intérieures restent). */
.page-section--pleine.page-section--en-tete { margin-top: calc(-1 * var(--page-pad-haut, 56px)); }
/* Un bloc ne déborde JAMAIS de son emplacement (21/09). Un contenu à rapport fixe
   (aspect-ratio) avec une hauteur minimale reçoit du navigateur une LARGEUR minimale
   déduite (image vide : 160 px × 16/9 = 284 px) : il refusait de rétrécir et sortait de
   son cadre dans une zone, une colonne étroite ou sur mobile. */
.page-bloc > * { min-width: 0; max-width: 100%; }

/* Image : plus de contour par défaut (21/09) ; « Couleur du contour » en pose un. */
.bloc-image { border-width: 0; }
.bloc-image.a-contour, .a-contour { border-style: solid; border-width: max(1px, var(--contour-epaisseur, 1px)); }
/* Espace au-dessus d'une section, réglable jusqu'à 0 (la grille de page espace de 22 px). */
.page--grille > .page-section.a-espace-avant { margin-top: calc(var(--espace-avant, 22px) - 22px); }
.page--grille > .page-section.a-espace-avant.page-section--en-tete { margin-top: 0; }
.page--grille > .page-section--pleine.a-espace-avant.page-section--en-tete { margin-top: calc(-1 * var(--page-pad-haut, 56px)); }

/* ============================================================
   CARROUSEL « VITRINE » — pleine largeur, façon apple.com
   La largeur réelle (bords de l'écran) est posée par hydraterVitrine ; en
   édition, la vitrine est à plat (défilable) pour la saisie.
   ============================================================ */
.carrousel--vitrine { --cv-largeur: min(86%, 1260px); --cv-ecart: 18px; position: relative; padding: 0; border: 0; background: none; overflow: visible; }
.cv-fenetre { overflow: hidden; position: relative; }
.cv-piste { display: flex; gap: var(--cv-ecart); transition: transform .7s cubic-bezier(.4, 0, .1, 1); will-change: transform; }
.cv-vue { position: relative; flex: 0 0 var(--cv-largeur); aspect-ratio: var(--cv-ratio, 21 / 9); border-radius: 18px; overflow: hidden; background: var(--figure-bg, #101014); cursor: pointer; transition: opacity .5s; }
.cv-vue:not(.est-active) { opacity: .55; }
.cv-vue.est-active { cursor: default; }
.cv-media { position: absolute; inset: 0; margin: 0; }
.cv-media img { width: 100%; height: 100%; object-fit: var(--fit, cover); display: block; }
.cv-media.est-vide { display: grid; place-items: center; }
.cv-media.est-vide::after { content: "Image"; opacity: .45; font-size: 13px; color: #fff; }
.cv-legende { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 3.2vw, 44px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.28) 55%, transparent); }
.cv-surtitre { font-size: .82rem; font-weight: 700; letter-spacing: .02em; opacity: .85; }
.cv-surtitre:empty, .cv-titre:empty, .cv-accroche:empty { display: none; }
.cv-titre { margin: 0; font-family: var(--police-titre, inherit); font-size: clamp(1.2rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.1; color: #fff; }
.cv-accroche { font-size: clamp(.95rem, 1.4vw, 1.15rem); line-height: 1.4; max-width: 46ch; }
.cv-bouton { margin-top: 10px; display: inline-flex; align-items: center; height: 38px; padding: 0 20px; border-radius: 999px; background: #fff; color: #1d1d1f; font-weight: 600; font-size: .95rem; text-decoration: none; }
.cv-bouton:hover { background: #e8e8ed; }
.cv-bouton.est-vide-edition { opacity: .5; border: 1px dashed currentColor; background: transparent; color: #fff; }
.cv-controles { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.cv-points { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: color-mix(in srgb, var(--texte, #1d1d1f) 8%, transparent); }
.cv-point { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--texte, #1d1d1f) 35%, transparent); cursor: pointer; transition: width .3s, background .3s; }
.cv-point.est-actif { width: 22px; background: var(--texte, #1d1d1f); }
.cv-lecture { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--texte, #1d1d1f); background: color-mix(in srgb, var(--texte, #1d1d1f) 8%, transparent); }
.cv-ico-pause { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.cv-ico-lecture { display: none; width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.cv-lecture.est-en-pause .cv-ico-pause { display: none; }
.cv-lecture.est-en-pause .cv-ico-lecture { display: block; }
.cv-point:focus-visible, .cv-lecture:focus-visible, .cv-bouton:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
@media (max-width: 720px) { .carrousel--vitrine { --cv-largeur: 88%; --cv-ecart: 10px; } .cv-vue { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .cv-piste { transition: none; } }
/* Édition : pleine largeur de la page, vues à plat et défilables (aimantées au centre) */
body.mode-edition .page--grille > .page-bloc > .carrousel--vitrine,
body.mode-edition .page-section-contenu > .page-bloc > .carrousel--vitrine { max-width: none; }
body.mode-edition .carrousel--vitrine .cv-fenetre { overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: calc((100% - var(--cv-largeur)) / 2); scrollbar-width: thin; }
body.mode-edition .carrousel--vitrine .cv-vue { scroll-snap-align: center; opacity: 1; cursor: text; }
/* Exception VOULUE à « un bloc ne déborde jamais » : la vitrine s'étend jusqu'aux bords de l'écran. */
.page-bloc > .carrousel--vitrine { max-width: none; }
/* Priorités : theme-leaf.css (chargé après) redonnait à .carrousel son cadre et son fond ;
   l'édition arrondit tout champ éditable à 3 px. */
.carrousel.carrousel--vitrine { border: 0; background: none; box-shadow: none; border-radius: 0; padding: 0; }
.carrousel.carrousel--vitrine .cv-bouton { border-radius: 999px; }
.cv-lecture[hidden] { display: none; }
/* Éditeur : la page représente l'écran — la vitrine (bloc pleine page) va de bord à bord */
body.mode-edition #rendu.page--grille > .page-bloc > .carrousel--vitrine { margin-inline: calc(-1 * var(--page-pad, 32px)); width: calc(100% + 2 * var(--page-pad, 32px)); }

/* Icône de bouton (bouton, média + texte, vitrine) — optionnelle */
.bloc-bouton.a-icone, .cv-bouton.a-icone, .bloc-duo-bouton.a-icone { display: inline-flex; align-items: center; gap: .5em; }
.btn-ico { display: inline-flex; flex: none; width: var(--btn-ico, 1.25em); height: var(--btn-ico, 1.25em); }
.btn-ico svg { width: 100%; height: 100%; }
.btn-ico--svg { background: currentColor; -webkit-mask: var(--btn-ico-url) center / contain no-repeat; mask: var(--btn-ico-url) center / contain no-repeat; }
.a-icone .bloc-bouton-libelle { display: inline; }

/* section conditionnelle qui vient d'apparaître (sa condition vient d'être remplie) */
.page-section.vient-apparaitre { animation: sec-apparait .5s ease-out both; }
@keyframes sec-apparait { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .page-section.vient-apparaitre { animation: none; } }

/* ===== Bloc « Message simulé » (courriel / SMS / messagerie) =====
   Une carte de message réaliste (sans marque) et, en inspection, une carte d'enquête de même largeur. */
.bloc-msg { --msg-bord: color-mix(in srgb, var(--texte) 11%, transparent); --msg-doux: color-mix(in srgb, var(--texte) 4%, var(--fond));
  --msg-accent: var(--violet); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.msg-fenetre, .msg-inspection { width: 100%; max-width: 640px; }
.msg-fenetre { position: relative; background: var(--fond); color: var(--texte); border: 1px solid var(--msg-bord); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 22px 44px -28px rgba(0,0,0,.32); text-align: left; }
/* courriel */
.msg-outils { display: flex; justify-content: flex-end; gap: 4px; padding: 10px 14px 0; color: var(--attenue); }
.msg-outils span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.msg-entete { display: flex; align-items: flex-start; gap: 12px; padding: 6px 22px 12px; }
.msg-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; letter-spacing: .03em;
  color: #fff; background: hsl(var(--msg-teinte, 210) 32% 30%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }   /* 30 % : initiales blanches au-dessus de 4,5:1 quelle que soit la teinte */
.msg-de { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 1px; }
.msg-nom { font-weight: 700; font-size: 1.02em; }
.msg-adresse { font-size: .86em; color: var(--attenue); overflow-wrap: anywhere; }
.msg-a { font-size: .82em; color: var(--attenue); margin-top: 2px; }
.msg-heure { flex: none; font-size: .8em; color: var(--attenue); font-variant-numeric: tabular-nums; padding-top: 3px; }
.msg-objet { margin: 0 22px; padding: 4px 0 14px; font-size: 1.14em; line-height: 1.35; font-weight: 700; letter-spacing: -.005em; border-bottom: 1px solid var(--msg-bord); }
.msg-contenu { padding: 16px 22px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.msg-corps { line-height: 1.65; }
.msg-lien-wrap { position: relative; display: inline-block; max-width: 100%; }
.msg-lien { display: inline-block; padding: 10px 16px; border-radius: 10px; background: var(--msg-accent); color: #fff; font-weight: 700; text-decoration: none; }
.msg-reel { position: absolute; left: 0; top: calc(100% + 10px); z-index: 5; width: max-content; max-width: min(400px, 86vw); padding: 10px 12px; border-radius: 10px;
  background: #16130F; color: #EDE6DC; font-size: .8em; line-height: 1.45; box-shadow: 0 14px 30px -12px rgba(0,0,0,.55); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s; }
.msg-reel::before { content: ''; position: absolute; left: 18px; top: -5px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
.msg-reel-url { display: block; margin-top: 2px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; overflow-wrap: anywhere; color: #FFD6A0; }
.msg-lien-wrap:hover .msg-reel, .msg-lien:focus + .msg-reel, .msg-lien-wrap.est-revele .msg-reel { opacity: 1; transform: none; }   /* est-revele : toucher / clic, tous navigateurs (Safari iPhone ne donne pas le focus à un lien touché) */
.msg-pj { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border: 1px solid var(--msg-bord); border-radius: 12px; background: var(--msg-doux); font-size: .9em; font-weight: 600; }
.msg-pj-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--fond); border: 1px solid var(--msg-bord); font-size: 14px; }
/* SMS : un téléphone */
.bloc-msg--sms .msg-fenetre { max-width: 360px; border-radius: 34px; padding: 0 0 22px; background: var(--msg-doux); box-shadow: 0 0 0 7px var(--fond), 0 0 0 8px var(--msg-bord), 0 26px 50px -28px rgba(0,0,0,.4); }
.msg-statut { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px 4px; font-size: .78em; font-weight: 700; font-variant-numeric: tabular-nums; }
.msg-encoche { width: 86px; height: 22px; border-radius: 12px; background: #16130F; }
.msg-statut-ico { display: inline-flex; gap: 4px; } .msg-statut-ico svg { width: 15px; height: 15px; }
.bloc-msg--sms .msg-entete { flex-direction: column; align-items: center; gap: 6px; padding: 10px 16px 14px; text-align: center; border-bottom: 1px solid var(--msg-bord); }
.bloc-msg--sms .msg-de { align-items: center; }
.bloc-msg--sms .msg-heure { padding: 0; }
.bloc-msg--sms .msg-contenu { position: relative; margin: 18px 56px 0 16px; padding: 12px 14px; border-radius: 20px 20px 20px 6px; background: var(--fond); border: 1px solid var(--msg-bord); gap: 10px; }
.bloc-msg--sms .msg-lien { padding: 0; background: none; color: var(--msg-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Messagerie d'équipe : un fil de canal */
.bloc-msg--messagerie .msg-fenetre { max-width: 680px; border-radius: 12px; }
.msg-canal { display: flex; align-items: center; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--msg-bord); font-weight: 700; font-size: .92em; }
.msg-canal-ico { display: inline-flex; color: var(--attenue); }
.bloc-msg--messagerie .msg-entete { padding: 16px 18px 0; align-items: center; }
.bloc-msg--messagerie .msg-de { flex-direction: row; align-items: baseline; gap: 8px; flex: 0 1 auto; }
.bloc-msg--messagerie .msg-contenu { padding: 2px 18px 18px 72px; }
.bloc-msg--messagerie .msg-lien { padding: 0; background: none; color: var(--msg-accent); text-decoration: underline; }
/* Carte d'enquête (inspection) */
.msg-inspection { display: grid; gap: 14px; padding: 18px 20px; border-radius: 16px; background: var(--msg-doux); border: 1px solid var(--msg-bord); }
.msg-ins-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* spécificité renforcée : « .page p » (marge de 15 px) l'emportait sur la classe seule */
.bloc-msg p.msg-consigne, .bloc-msg p.msg-retour { margin: 0; }
.msg-consigne { font-weight: 700; }
.msg-progres { display: inline-flex; align-items: center; gap: 10px; font-size: .86em; color: var(--attenue); font-variant-numeric: tabular-nums; }
.msg-pastilles { display: inline-flex; gap: 5px; }
.msg-pastilles i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--msg-accent); transition: background-color .2s; }
.msg-pastilles i.est-plein { background: var(--msg-accent); }
.msg-explications { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.msg-explications li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--fond); border: 1px solid var(--msg-bord); animation: msg-apparait .3s ease-out both; }
.msg-ind-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--msg-accent); }
.msg-ind-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
.msg-explications li.est-manque { border-style: dashed; }
.msg-explications li.est-manque .msg-ind-num { background: #B42318; }
.msg-ins-pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.msg-retour { margin: 0; font-size: .92em; color: var(--attenue); }
.msg-ins-pied .msg-terminer { margin-left: auto; }
.msg-annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bloc-msg.est-reussi .msg-retour { color: var(--texte); font-weight: 700; }
/* zones examinables */
/* Surlignage avec de l'air À L'INTÉRIEUR : marge intérieure compensée (rien ne bouge), contour intérieur,
   pastille dans l'angle. L'air pris à l'extérieur (ombre 6 px, contour à 7 px, pastille à 18 px) faisait
   se CHEVAUCHER deux zones voisines — l'expéditeur et l'objet, 12 px plus bas (22/09). */
.bloc-msg[data-inspection="1"] .msg-fenetre [data-cible] { cursor: pointer; border-radius: 6px; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .15s, background-color .15s; }
/* air intérieur compensé — sauf l'objet, qui a déjà sa marge intérieure et son filet */
/* TOUTES les réserves sont strictement compensées (marge intérieure = marge négative) : sinon la largeur minimale
   du bloc augmente et, dans une zone étroite, la grille s'élargit et décale la colonne (22/09) */
.bloc-msg[data-inspection="1"] .msg-fenetre .msg-de { padding: 5px; margin: -5px; }
.bloc-msg[data-inspection="1"] .msg-fenetre .msg-corps { padding: 5px 9px; margin: -5px -9px; }
.bloc-msg[data-inspection="1"] .msg-fenetre .msg-lien, .bloc-msg[data-inspection="1"] .msg-fenetre .msg-pj { padding: 5px 34px 5px 9px; margin: -5px -34px -5px -9px; }
/* l'heure : rien à gauche (l'expéditeur est à 12 px), la réserve de la pastille reste dans la marge du cadre (18 px) */
.bloc-msg[data-inspection="1"] .msg-fenetre .msg-heure { padding: 5px 6px; margin: -5px -6px; }   /* 5 + 6 < 12 px d'écart avec l'expéditeur */
.bloc-msg[data-inspection="1"] .msg-fenetre .msg-lien { display: inline-block; }
/* courriel : le lien est un BOUTON plein (fond d'accent, texte blanc) — il garde son fond et sa marge ;
   le fond pâle de surlignage le rendait blanc sur blanc. Contour juste à l'extérieur, place de la pastille réservée. */
.bloc-msg--courriel[data-inspection="1"] .msg-fenetre .msg-lien { padding: 10px 42px 10px 16px; margin: 0 -26px 0 0; }   /* +26 px pour la pastille, compensés */
.bloc-msg--courriel .msg-fenetre .msg-lien.est-trouve { background-color: var(--msg-accent) !important; outline-offset: 3px !important; }
.bloc-msg--courriel .msg-fenetre .msg-lien.est-trouve::after { box-shadow: 0 0 0 2px #fff; top: 50%; transform: translateY(-50%); }
.bloc-msg[data-inspection="1"] .msg-fenetre [data-cible]:hover { background-color: color-mix(in srgb, var(--msg-accent) 7%, transparent); }
.bloc-msg[data-inspection="1"] .msg-fenetre [data-cible]:focus-visible { outline-color: var(--msg-accent); }
.msg-fenetre [data-cible].est-trouve { position: relative; outline: 2px solid var(--msg-accent) !important; background-color: color-mix(in srgb, var(--msg-accent) 9%, transparent); }
.msg-fenetre [data-cible].est-trouve::after { content: attr(data-num); position: absolute; top: 5px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff; background: var(--msg-accent); }
.msg-fenetre [data-cible].est-manque { outline: 2px dashed #B42318 !important; }
.msg-fenetre [data-cible].est-neutre { animation: msg-neutre .4s ease-in-out; }
@keyframes msg-neutre { 25%, 75% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
@keyframes msg-apparait { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .msg-fenetre [data-cible].est-neutre, .msg-explications li { animation: none; } .msg-reel { transition: none; } }
@media (max-width: 520px) { .msg-entete, .msg-contenu { padding-left: 16px; padding-right: 16px; } .msg-objet { margin: 0 16px; } .bloc-msg--messagerie .msg-contenu { padding-left: 16px; } }
/* éditeur : lien / pièce jointe vides visibles mais discrets ; explications visibles */
body.mode-edition .msg-lien-wrap.est-vide, body.mode-edition .msg-pj.est-vide { opacity: .45; }
body.mode-edition .msg-lien-wrap.est-vide .msg-lien:empty::before { content: 'Texte du lien (facultatif)'; }
body.mode-edition .msg-pj.est-vide .msg-pj-nom:empty::before { content: 'Pièce jointe (facultative)'; }
body.mode-edition .bloc-msg .msg-explications li { opacity: .7; }
body.mode-edition .bloc-msg .msg-ind-num:empty::before { content: '·'; }

/* Liens dans les textes : couleur d'accent (ils prenaient le bleu par défaut du navigateur, hors charte).
   Sur fond sombre : texte clair souligné d'accent (un accent foncé en texte fin serait peu lisible). */
.bloc-texte a, .bloc-texte-groupe a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bloc-texte a:hover { text-decoration-thickness: 2px; }
html[data-theme="dark"] .bloc-texte a, .page-bloc [data-theme="dark"] .bloc-texte a, .page-bloc[data-theme="dark"] .bloc-texte a { color: inherit; text-decoration-color: var(--violet); }

/* ===== Zones d'une section pleine largeur : CONTENU ALIGNÉ SUR LA GRILLE (21/09) =====
   « Largeur du contenu : aligné sur la grille » (défaut) n'agissait pas sur les sections à zones :
   dans le player, la bande couvre toute la scène (100cqw) et les zones s'étalaient jusqu'aux bords,
   leur contenu avec elles — décalé par rapport au titre de la page. Le conteneur des zones reçoit une
   gouttière = (scène − largeur de la page) / 2 ; les zones du bord la reprennent en marge négative :
   leurs FONDS vont toujours jusqu'aux bords, leurs CONTENUS s'alignent sur la colonne, et le partage
   (7/5…) se calcule sur la largeur de contenu réelle. « Contenu pleine largeur » : inchangé. */
.page { --page-max: 880px; }
.page--grille { --page-max: 1000px; }
:is(#scene, .pl-landing) .page-section--pleine:not(.page-section--contenu-pleine) > .page-section-zones {
  --gouttiere: max(0px, calc((100cqw - var(--page-max, 1000px)) / 2));
  padding-inline: var(--gouttiere);
}
:is(#scene, .pl-landing) .page-section--pleine:not(.page-section--contenu-pleine) .page-section-zone:first-child {
  margin-left: calc(-1 * var(--gouttiere)); padding-left: calc(var(--gouttiere) + var(--page-pad, 32px));
}
:is(#scene, .pl-landing) .page-section--pleine:not(.page-section--contenu-pleine) .page-section-zone:last-child {
  margin-right: calc(-1 * var(--gouttiere)); padding-right: calc(var(--gouttiere) + var(--page-pad, 32px));
}

/* ===== Style de texte « affiche » (G2) : très grand, fin, pour chiffres-chocs, heures, ouvertures ===== */
.bloc-texte.bloc-texte--affiche, .page--grille .bloc-texte--affiche { font-family: var(--police-titre); font-weight: 300; font-size: clamp(2.6rem, 6.4vw, 7rem);   /* laissait la suite de l'écran sous la ligne de flottaison */
  line-height: .95; letter-spacing: -.02em; margin: .05em 0 .15em; color: var(--texte); }
.bloc-texte--affiche em { font-style: italic; color: var(--violet); }
/* ===== Héros plein écran (G3) : bord à bord et hauteur de l'écran, dans la scène et la landing ===== */
/* bord à bord : décalé de la moitié du conteneur puis recentré sur lui-même — ne dépend PAS de la largeur du
   conteneur (des marges négatives en % se calculaient sur la page, pas sur le bloc : 7 à 10 px d'écart) */
#scene .ld-hero-embed.ld-hero--plein, .pl-landing .ld-hero-embed.ld-hero--plein { max-width: none; width: var(--largeur-scene, 100vw);   /* échappe au plafond « largeur de la colonne » des blocs */
  margin-inline: 0; position: relative; left: 50%; transform: translateX(-50%); border: 0; border-radius: 0;
  min-height: calc(100dvh - var(--hauteur-entete, 60px) - var(--hauteur-barre, 68px)); align-items: center; padding: 0 max(6vw, 32px); }
.pl-landing .ld-hero-embed.ld-hero--plein { min-height: 100dvh; width: var(--largeur-landing, 100vw); }   /* largeur RÉELLE : 100vw inclut la barre de défilement */   /* la landing couvre tout l'écran */
body.pl-nav--superpose #scene .ld-hero-embed.ld-hero--plein { min-height: 100dvh; }
.ld-hero--plein .ld-hero-media::after { background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, transparent 75%); }
.ld-hero--plein .ld-hero-txt { max-width: min(620px, 92%); }
/* une page qui commence par un héros plein écran : pas de marge au-dessus */
#scene .page > .page-bloc:first-child .ld-hero--plein, .pl-landing .page > .page-bloc:first-child .ld-hero--plein { margin-top: calc(-1 * var(--page-pad-haut, 56px)); }

/* ===== Tri : décision ligne par ligne / boîte de réception (S1) ===== */
.tri-lignes { list-style: none; margin: 14px 0; padding: 0; border: 1px solid var(--surface-bord); border-radius: 12px; overflow: hidden; background: var(--fond); }
.tri-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texte choix" "corr corr"; gap: 6px 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--surface-bord); }
.tri-ligne:last-child { border-bottom: 0; }
.tri-texte { grid-area: texte; } .tri-choix { grid-area: choix; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .tri-corr { grid-area: corr; margin: 2px 0 0; font-size: .92em; font-weight: 600; color: #B42318; }
.tri-choix-btn { min-height: 38px; padding: 0 14px; border: 1px solid var(--surface-bord); border-radius: 8px; background: transparent; color: var(--texte); font: inherit; font-size: .9em; font-weight: 600; cursor: pointer; }
.tri-choix-btn:hover { border-color: var(--violet); } .tri-choix-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
/* état choisi : l'accent de la charte (mêmes jetons que le bouton plein), pas du noir */
.tri-choix-btn[aria-pressed="true"] { background: var(--btn-fond, var(--gradient)); color: var(--btn-texte, #fff); border-color: transparent; }
.bloc-tri--lignes.est-valide .tri-choix-btn { pointer-events: none; }
.tri-ligne.est-juste { background: color-mix(in srgb, #2F6B4F 8%, transparent); } .tri-ligne.est-faux { background: color-mix(in srgb, #B42318 7%, transparent); }
/* boîte de réception : pastille, expéditeur, objet, heure */
.bloc-tri--messagerie .tri-ligne { grid-template-columns: 38px minmax(120px, .9fr) minmax(0, 1.6fr) auto auto; grid-template-areas: "pastille qui texte info choix" ". corr corr corr corr"; }
.tri-pastille { grid-area: pastille; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: hsl(var(--teinte, 30) 30% 30%); }
.tri-qui { grid-area: qui; display: flex; flex-direction: column; min-width: 0; } .tri-auteur { font-weight: 700; } .tri-detail { font-size: .84em; color: var(--attenue); overflow-wrap: anywhere; }
.bloc-tri--messagerie .tri-texte { font-weight: 600; } .tri-info { grid-area: info; font-size: .85em; color: var(--attenue); font-variant-numeric: tabular-nums; }
.bloc-tri--lignes:not(.bloc-tri--messagerie) .tri-qui { grid-area: texte; } .bloc-tri--lignes:not(.bloc-tri--messagerie) .tri-info { display: none; }
@media (max-width: 720px) {
  .tri-ligne, .bloc-tri--messagerie .tri-ligne { grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: "pastille qui info" "pastille texte texte" "choix choix choix" "corr corr corr"; }
  .bloc-tri--lignes:not(.bloc-tri--messagerie) .tri-ligne { grid-template-columns: 1fr; grid-template-areas: "texte" "choix" "corr"; }
  .tri-choix { justify-content: stretch; } .tri-choix-btn { flex: 1; }
}
body.mode-edition .tri-detail:empty::before { content: 'Détail (facultatif)'; opacity: .5; } body.mode-edition .tri-info:empty::before { content: 'Heure'; opacity: .5; } body.mode-edition .tri-auteur:empty::before { content: 'Auteur (facultatif)'; opacity: .5; font-weight: 400; }

/* ===== Bloc Dialogue (S4) : conversation en bulles, réactions Vrai / Faux ===== */
.dlg-fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.dlg-replique { display: flex; gap: 12px; align-items: flex-end; max-width: min(640px, 92%); }
.dlg-replique.dlg--droite { align-self: flex-end; flex-direction: row-reverse; }
.dlg-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; background: hsl(var(--msg-teinte, 30) 30% 30%); }   /* 33 % : marge au-dessus de 4,5:1 pour les initiales blanches */
.dlg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dlg-corps { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dlg--droite .dlg-corps { align-items: flex-end; }
.dlg-qui { font-size: .8em; font-weight: 700; color: var(--attenue); }
.dlg-bulle { background: var(--fond); border: 1px solid var(--surface-bord); padding: 13px 17px; border-radius: 18px 18px 18px 5px; line-height: 1.5; }
.dlg--droite .dlg-bulle { background: var(--texte); color: var(--fond); border-color: var(--texte); border-radius: 18px 18px 5px 18px; }
.dlg-reaction { display: flex; gap: 8px; }
.dlg-rep { min-height: 38px; padding: 0 20px; border: 1px solid var(--texte); background: transparent; color: var(--texte); font: inherit; font-weight: 700; font-size: .9em; cursor: pointer; border-radius: 6px; }
.dlg-rep:hover:not(:disabled) { background: color-mix(in srgb, var(--texte) 8%, transparent); } .dlg-rep:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.dlg-rep[aria-pressed="true"] { background: var(--btn-fond, var(--gradient)); color: var(--btn-texte, #fff); border-color: transparent; } .dlg-rep:disabled { cursor: default; }
.dlg-rep:disabled:not([aria-pressed="true"]) { opacity: .45; }
.dlg-expli { margin: 2px 0 0; border-left: 2px solid var(--violet); padding: 3px 0 3px 14px; line-height: 1.55; }
.est-juste .dlg-verdict { color: #2F6B4F; } .est-faux .dlg-verdict { color: #B42318; }
.dlg-arrive { animation: dlg-arrive .35s ease-out both; }
@keyframes dlg-arrive { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .dlg-arrive { animation: none; } }
/* bouton choisi : lisible même désactivé (le style « désactivé » du navigateur l'emportait : noir sur noir) */
.dlg-rep[aria-pressed="true"], .dlg-rep[aria-pressed="true"]:disabled { background: var(--btn-fond, var(--gradient)); color: var(--btn-texte, #fff); -webkit-text-fill-color: var(--btn-texte, #fff); border-color: transparent; opacity: 1; }
.dlg-rep:disabled:not([aria-pressed="true"]) { color: var(--texte); -webkit-text-fill-color: var(--texte); }
/* l'avatar s'aligne sur la BULLE (sous le nom), pas sous l'explication */
.dlg-replique { align-items: flex-start; } .dlg-avatar { margin-top: 22px; }
/* bulle de droite (fond sombre) et initiales : couleur ET remplissage du texte fixés — le paragraphe intérieur
   et une règle de remplissage du texte les ramenaient à la couleur du texte courant (sombre sur sombre) */
.dlg--droite .dlg-bulle, .dlg--droite .dlg-bulle * { color: var(--fond); -webkit-text-fill-color: var(--fond); }
.bloc-dialogue .dlg-avatar { color: #fff; -webkit-text-fill-color: #fff; }

/* ===== Écran de transition (G4) ===== */
.ld-transition { position: relative; display: grid; place-items: center; text-align: center; min-height: 70vh; padding: 60px 24px; overflow: hidden; background: #0E0C0A; color: #F6F1EA; border-radius: var(--rayon, 16px); }
#scene .ld-transition, .pl-landing .ld-transition { max-width: none; width: var(--largeur-scene, 100vw); margin-inline: 0; left: 50%; transform: translateX(-50%); border-radius: 0;
  min-height: calc(100dvh - var(--hauteur-entete, 60px) - var(--hauteur-barre, 68px)); }
body.pl-nav--superpose #scene .ld-transition { min-height: 100dvh; }
#scene .page > .page-bloc:first-child .ld-transition { margin-top: calc(-1 * var(--page-pad-haut, 56px)); }
.ld-trans-media { position: absolute; inset: 0; } .ld-trans-media img { width: 100%; height: 100%; object-fit: cover; }
.ld-trans-media::after { content: ""; position: absolute; inset: 0; background: rgba(8, 7, 6, var(--voile, .45)); }
.ld-trans-txt { position: relative; z-index: 1; display: grid; justify-items: center; }
.ld-trans-sur { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--violet) 55%, #F6F1EA); }   /* accent ÉCLAIRCI : sur le noir de la transition, l'accent seul tombait à 3,7:1 */
.ld-trans-affiche { margin: .12em 0 .08em; font-family: var(--police-titre); font-weight: 300; font-size: clamp(5rem, 16vw, 16rem); line-height: .95; letter-spacing: -.03em; color: #F6F1EA; }
.ld-trans-affiche em { font-style: italic; color: var(--violet); }
.ld-trans-phrase { margin: 0; font-size: clamp(1rem, 1.6vw, 1.3rem); color: rgba(246, 241, 234, .82); }
.ld-trans-aiguille { width: 1px; height: 90px; margin-top: 28px; background: linear-gradient(var(--violet), transparent); }
.ld-trans-passer { position: absolute; z-index: 2; right: max(4vw, 24px); bottom: 34px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(246, 241, 234, .4); background: transparent; color: #F6F1EA; font: inherit; font-size: .9em; font-weight: 600; cursor: pointer; }
.ld-trans-passer:hover, .ld-trans-passer:focus-visible { border-color: #F6F1EA; outline: none; background: rgba(246, 241, 234, .08); }
.ld-trans-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(246, 241, 234, .12); z-index: 2; }
.ld-trans-barre i { display: block; height: 100%; width: 0; background: var(--violet); }
.ld-transition.est-en-cours .ld-trans-barre i { animation: ld-trans-barre var(--duree, 4s) linear forwards; }
.ld-transition.est-arrete .ld-trans-barre { opacity: 0; }
@keyframes ld-trans-barre { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ld-transition.est-en-cours .ld-trans-barre i { animation: none; width: 100%; opacity: .5; } }
/* italique en accent : couleur ET remplissage (une règle de remplissage le ramenait au blanc) */
.ld-trans-affiche em, .bloc-texte--affiche em { -webkit-text-fill-color: var(--violet); }
/* bandeaux flous / masqués : la barre du bas se superpose — « Passer » et la progression passent au-dessus */
body.pl-nav--superpose #scene .ld-trans-passer { bottom: calc(var(--hauteur-barre, 68px) + 24px); }
body.pl-nav--superpose #scene .ld-trans-barre { bottom: var(--hauteur-barre, 68px); }
/* bandeaux superposés : un écran plein en tête de page remonte AUSSI sous l'en-tête translucide (la première page
   réserve sa hauteur) — sinon il dépassait l'écran de la hauteur de l'en-tête et « Passer » en sortait */
body.pl-nav--superpose #scene .page > .page-bloc:first-child .ld-transition,
body.pl-nav--superpose #scene .page > .page-bloc:first-child .ld-hero--plein { margin-top: calc(-1 * (var(--page-pad-haut, 56px) + var(--hauteur-entete, 60px))); }

/* ===== Scénario, présentation « appel » (S7) ===== */
.bloc-sc--appel { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); column-gap: 48px; row-gap: 14px; align-items: start; }
.bloc-sc--appel > :not(.sc-tel) { grid-column: 2; }
.sc-tel { grid-column: 1; grid-row: 1 / span 6; align-self: center; text-align: center; color: #F6F1EA; padding: 44px 22px 40px; border-radius: 42px;
  background: linear-gradient(170deg, #2A221C, #0E0C0A); border: 1px solid color-mix(in srgb, var(--violet) 55%, transparent); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
.sc-ondes { width: 128px; height: 128px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--violet) 45%, transparent);
  box-shadow: 0 0 0 16px color-mix(in srgb, var(--violet) 8%, transparent), 0 0 0 34px color-mix(in srgb, var(--violet) 4%, transparent); animation: sc-ondes 2.4s ease-in-out infinite; }
.sc-avatar { width: 82px; height: 82px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #5B4A3A; font-family: var(--police-titre); font-size: 30px; color: #fff; -webkit-text-fill-color: #fff; }
.sc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sc-appelant { margin: 0; font-family: var(--police-titre); font-size: 1.7em; line-height: 1.1; color: #F6F1EA; -webkit-text-fill-color: #F6F1EA; }
.sc-role { margin: 6px 0 0; font-size: .85em; color: rgba(246,241,234,.7); -webkit-text-fill-color: rgba(246,241,234,.7); }
.sc-etat { margin: 14px 0 0; font-size: max(.72em, 12.5px); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--violet) 60%, #fff); -webkit-text-fill-color: color-mix(in srgb, var(--violet) 60%, #fff); font-variant-numeric: tabular-nums; }
@keyframes sc-ondes { 50% { box-shadow: 0 0 0 22px color-mix(in srgb, var(--violet) 7%, transparent), 0 0 0 44px color-mix(in srgb, var(--violet) 3%, transparent); } }
@media (prefers-reduced-motion: reduce) { .sc-ondes { animation: none; } }
.bloc-sc--appel .bloc-sc-texte { border-left: 2px solid var(--violet); padding: 6px 0 6px 20px; font-family: var(--police-titre); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.4; }
.bloc-sc--appel .bloc-sc-choix { display: grid; gap: 10px; }
.bloc-sc--appel .bloc-sc-bouton { text-align: left; padding: 15px 18px; border: 1px solid var(--surface-bord); background: transparent; color: inherit; border-radius: 6px; font: inherit; cursor: pointer; }
.bloc-sc--appel .bloc-sc-bouton::before { content: '« '; } .bloc-sc--appel .bloc-sc-bouton::after { content: ' »'; }
html:not(:lang(fr)) .bloc-sc--appel .bloc-sc-bouton::before { content: '“'; } html:not(:lang(fr)) .bloc-sc--appel .bloc-sc-bouton::after { content: '”'; }   /* guillemets de la langue du module */
.bloc-sc--appel .bloc-sc-bouton:hover, .bloc-sc--appel .bloc-sc-bouton:focus-visible { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 9%, transparent); outline: none; }
@media (max-width: 720px) { .bloc-sc--appel { grid-template-columns: 1fr; } .bloc-sc--appel > * { grid-column: 1 !important; } .sc-tel { grid-row: auto; padding: 26px 18px; border-radius: 28px; } .sc-ondes { width: 96px; height: 96px; margin-bottom: 16px; } .sc-avatar { width: 62px; height: 62px; font-size: 22px; } }

/* ===== Journal de décisions (S8) ===== */
.jr-liste { list-style: none; margin: 0; padding: 0; }
.jr-entree { display: grid; grid-template-columns: 88px 30px minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--surface-bord); }
.jr-heure { font-family: var(--police-titre); font-size: max(1.5em, 24px); color: var(--violet); line-height: 1.1; }   /* ≥ 24 px : grand texte, seuil 3:1 — tenu même avec un accent clair */
.jr-etat { font-weight: 800; font-size: 1.05em; text-align: center; }
.jr-entree.est-juste .jr-etat { color: #2F6B4F; } .jr-entree.est-faux .jr-etat { color: #B42318; } .jr-entree.est-attente .jr-etat { color: var(--attenue); }
html[data-theme="dark"] .jr-entree.est-juste .jr-etat, .page-section[data-theme-section="dark"] .jr-entree.est-juste .jr-etat { color: #7FC8A0; }
html[data-theme="dark"] .jr-entree.est-faux .jr-etat, .page-section[data-theme-section="dark"] .jr-entree.est-faux .jr-etat { color: #F0917F; }
.jr-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .jr-lib { font-weight: 700; }
.jr-d { color: var(--attenue); font-size: .9em; } .jr-d:empty { display: none; }
.jr-entree:not(.est-juste) .jr-d--juste, .jr-entree:not(.est-faux) .jr-d--faux, .jr-entree:not(.est-attente) .jr-d--attente { display: none; }
body.mode-edition .jr-entree .jr-d { display: block !important; } body.mode-edition .jr-d--juste::before { content: '✓ '; } body.mode-edition .jr-d--faux::before { content: '✕ '; }
.jr-entree.est-attente .jr-lib { color: var(--attenue); }
.jr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jr-bilan { margin: 16px 0 0; font-weight: 700; }
@media (max-width: 560px) { .jr-entree { grid-template-columns: 64px 24px minmax(0, 1fr); gap: 4px 10px; } .jr-heure { font-size: 1.1em; } }

/* SMS en inspection : l'expéditeur est centré et étroit — place réservée des deux côtés pour la pastille */
.bloc-msg--sms[data-inspection="1"] .msg-fenetre .msg-de { padding: 5px 30px; margin: -5px -30px; }

/* ===== Encart : ton « alerte » / « réussite » (S6) — couleur ET pictogramme ===== */
.encart.encart--alerte, .encart.encart--succes { position: relative; padding-left: 52px; }
.encart--alerte { border-left-color: #B42318 !important; background: color-mix(in srgb, #B42318 8%, var(--fond)); }
.encart--succes { border-left-color: #2F6B4F !important; background: color-mix(in srgb, #2F6B4F 8%, var(--fond)); }
.encart-ico { position: absolute; left: 18px; top: 18px; width: 20px; height: 20px; display: grid; }
.encart--alerte .encart-ico, .encart--alerte .encart--titre { color: #B42318; } .encart--succes .encart-ico, .encart--succes .encart--titre { color: #2F6B4F; }
html[data-theme="dark"] .encart--alerte .encart-ico, html[data-theme="dark"] .encart--alerte .encart--titre, .page-section[data-theme-section="dark"] .encart--alerte .encart-ico, .page-section[data-theme-section="dark"] .encart--alerte .encart--titre { color: #F0917F; }
html[data-theme="dark"] .encart--succes .encart-ico, html[data-theme="dark"] .encart--succes .encart--titre, .page-section[data-theme-section="dark"] .encart--succes .encart-ico, .page-section[data-theme-section="dark"] .encart--succes .encart--titre { color: #7FC8A0; }

/* ===== Aspect des boutons d'une interaction (section « Boutons » de chaque bloc, 23/09) ===== */
.a-btns--carre :is(.btn-action, .bloc-i-valider, .bloc-i-rejouer, .bloc-estim-valider, .msg-terminer, .tri-choix-btn, .dlg-rep, .bloc-sc-bouton, .bloc-bouton) { border-radius: 0; }
.a-btns--arrondi :is(.btn-action, .bloc-i-valider, .bloc-i-rejouer, .bloc-estim-valider, .msg-terminer, .tri-choix-btn, .dlg-rep, .bloc-sc-bouton, .bloc-bouton) { border-radius: 10px; }
.a-btns--rond :is(.btn-action, .bloc-i-valider, .bloc-i-rejouer, .bloc-estim-valider, .msg-terminer, .tri-choix-btn, .dlg-rep, .bloc-sc-bouton, .bloc-bouton) { border-radius: 999px; }
.a-btns--contour :is(.btn-action, .bloc-i-valider, .bloc-estim-valider, .msg-terminer) { background: transparent; color: var(--violet); border: 1px solid var(--violet); }
.a-btns--contour :is(.btn-action, .bloc-i-valider, .bloc-estim-valider, .msg-terminer):hover { background: color-mix(in srgb, var(--violet) 10%, transparent); }
.a-btns--plein :is(.btn-action, .bloc-i-valider, .bloc-estim-valider, .msg-terminer) { background: var(--btn-fond, var(--gradient)); color: var(--btn-texte, #fff); border-color: transparent; }

/* ===== Bloc SCHÉMA (23/09) — trois dispositions, positions calculées par le bloc ===== */
.bloc-schema { --sch-delai: 220ms; --sch-couleur: var(--violet); container-type: inline-size; }
.sch-scene { position: relative; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: stretch; }
.sch-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px 16px;
  border: 1px solid var(--bord, rgba(127,127,140,.28)); background: var(--surface, rgba(127,127,140,.08));
  color: inherit; font: inherit; cursor: default; }
button.sch-item { cursor: pointer; }
button.sch-item:hover, button.sch-item:focus-visible { border-color: var(--sch-couleur); }
.sch-item[data-forme="bulle"] { border-radius: 22px 22px 22px 6px; }
.sch-item[data-forme="cercle"] { border-radius: 50%; aspect-ratio: 1; justify-content: center; }
.sch-item[data-forme="pastille"] { border-radius: 14px; }
.sch-item[data-forme="hexagone"] { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border: 0; background: color-mix(in srgb, var(--sch-couleur) 12%, transparent); padding: 22px 26px; }
.sch-forme { display: grid; place-items: center; min-height: 30px; color: var(--sch-couleur); }
.sch-forme:empty { display: none; }   /* sans pictogramme ni image : pas de place réservée pour rien */
.sch-forme img { max-width: 72px; max-height: 72px; object-fit: contain; }
.sch-titre { font-weight: 700; }
.sch-text { font-size: .94em; opacity: .9; }
.sch-detail { margin-top: 8px; font-size: .94em; text-align: left; border-top: 1px solid var(--bord, rgba(127,127,140,.28)); padding-top: 8px; }
/* coche « vu » : HORS du flux du texte, dans le coin de l'élément — ajoutée à la suite du titre,
   elle le faisait passer sur deux lignes et tout le texte se décalait au clic (signalé le 24/09) */
.sch-item { position: relative; }
/* le signe « vu » est un PICTOGRAMME de la banque (circle-check), pas un caractère de police : même
   dessin au trait que le reste du module, quelle que soit la fonte (demande de Richard, 24/09) */
.sch-coche { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 22px; height: 22px;
  color: var(--violet); pointer-events: none; }
.sch-coche svg { width: 20px; height: 20px; }
.sch-item:not(.est-vu) .sch-coche { display: none; }
.sch-fin { margin: 14px 0 0; font-weight: 700; color: var(--sch-couleur); }

/* Constellation : un centre, des satellites répartis sur un cercle (angle calculé au rendu) */
.bloc-schema[data-disposition="constellation"] .sch-scene { min-height: var(--sch-hauteur, 560px); display: block; }
.bloc-schema[data-disposition="constellation"] .sch-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 168px; height: 168px; border-radius: 50%; text-align: center; padding: 16px;
  background: var(--violet); color: var(--btn-texte, #fff); font-weight: 700; }
/* rayon en pixels : un pourcentage dans « translate » se rapporte à la TAILLE DE L'ÉLÉMENT,
   et non à la scène — les satellites se retrouvaient empilés au centre (23/09). */
.bloc-schema[data-disposition="constellation"] .sch-item { position: absolute; left: 50%; top: 50%; width: 170px;
  margin: 0; transform: translate(-50%, -50%) rotate(var(--sch-angle)) translate(var(--sch-rayon, 210px)) rotate(calc(-1 * var(--sch-angle))); }
@media (max-width: 1100px) { .bloc-schema[data-disposition="constellation"] .sch-item { --sch-rayon: 175px; } }

/* Cycle : les étapes en ligne, numérotées, qui se déplient */
.bloc-schema[data-disposition="cycle"] .sch-scene { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: start; }
.bloc-schema[data-disposition="cycle"] .sch-item { border-radius: 12px; }
.bloc-schema[data-disposition="cycle"] .sch-item.est-ouvert { grid-column: 1 / -1; }

/* Apparition en cascade : chaque élément entre après le précédent */
.bloc-schema[data-apparition="cascade"] .sch-item { opacity: 0; animation: sch-entree .55s ease-out forwards; animation-delay: calc(var(--sch-ordre) * var(--sch-delai)); }
@keyframes sch-entree { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.bloc-schema[data-disposition="constellation"][data-apparition="cascade"] .sch-item { animation-name: sch-entree-constellation; }
@keyframes sch-entree-constellation { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bloc-schema .sch-item { animation: none !important; opacity: 1 !important; } }
/* La constellation a besoin de place : sous 560 px de BLOC (et non de fenêtre — un bloc étroit
   dans une zone large débordait, mesuré à 8 colonnes), elle devient une liste verticale. */
/* repli en liste : seuil de secours (container) ET mesure réelle (classe « est-liste ») */
.bloc-schema[data-disposition="constellation"].est-liste .sch-scene { min-height: 0 !important; display: flex; flex-direction: column; align-items: stretch; }
.bloc-schema[data-disposition="constellation"].est-liste .sch-centre,
.bloc-schema[data-disposition="constellation"].est-liste .sch-item { position: static; transform: none; width: auto; height: auto; border-radius: 14px; }
.bloc-schema[data-disposition="constellation"].est-liste .sch-centre { margin-bottom: 6px; }

@container (max-width: 560px) {
  .bloc-schema[data-disposition="constellation"] .sch-scene { min-height: 0; display: flex; flex-direction: column; align-items: stretch; }
  .bloc-schema[data-disposition="constellation"] .sch-centre,
  .bloc-schema[data-disposition="constellation"] .sch-item { position: static; transform: none; width: auto; height: auto; border-radius: 14px; }
  .bloc-schema[data-disposition="constellation"] .sch-centre { margin-bottom: 6px; }
}

/* MOBILE — mesuré sur le module exporté (23/09) :
   · le titre d'encart tombait à 11 px, sous le seuil de lisibilité ;
   · les segments de la barre de progression ne faisaient que 14 px de haut, impossibles à viser
     au doigt : on élargit leur zone tactile SANS changer leur apparence. */
@media (max-width: 820px) {
  .encart--titre { font-size: max(12px, .78em); }
  /* puces d'étapes : 39 px de large, juste sous la cible tactile de 40 px (mesuré) */
  .etapes-liste > * { min-width: 44px; min-height: 44px; }
}

/* Surlignage (barre d'outils du texte) : aplat d'accent clair, texte foncé — comme les
   surlignages du brand book. Jamais de couleur seule : le contraste est vérifié. */
.page mark { background: color-mix(in srgb, var(--violet) 22%, transparent); color: inherit;
  padding: .06em .22em; border-radius: 3px; box-decoration-break: clone; }
html[data-theme="dark"] .page mark, .page-section[data-theme-section="dark"] mark {
  background: color-mix(in srgb, var(--violet) 45%, transparent); }

/* ===== Inspiré du gabarit du brand book Danone (23/09) =====
   · sur-titre en capitales bleues, précédé d'une barre oblique
   · filet en pointillés ronds sous les titres
   Réservés aux modules qui le demandent : classes posées par le style du bloc. */
.bloc-texte--surtitre { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--violet); font-size: .8em; }
/* sur fond sombre, l'accent devient illisible : on reprend la couleur du texte du thème */
html[data-theme="dark"] .bloc-texte--surtitre,
.page-section[data-theme-section="dark"] .bloc-texte--surtitre,
.page-section-zone[data-theme-section="dark"] .bloc-texte--surtitre,
.page-bloc[data-theme="dark"] .bloc-texte--surtitre, .page-bloc [data-theme="dark"] .bloc-texte--surtitre { color: var(--texte); }
.separateur--pointilles { border: 0; height: 2px; background-image: radial-gradient(circle, var(--violet) 1px, transparent 1.2px);
  background-size: 6px 2px; background-repeat: repeat-x; opacity: .8; }

/* Titres en capitales : parti pris de certaines chartes (brand book Danone). Transformation
   VISUELLE seulement : le texte réel est inchangé pour les lecteurs d'écran et la traduction. */
html[data-titres="majuscules"] .bloc-texte--titre,
html[data-titres="majuscules"] .bloc-texte--affiche,
html[data-titres="majuscules"] .bloc-duo-titre,
html[data-titres="majuscules"] .ld-carte h3 { text-transform: uppercase; letter-spacing: .01em; }

/* Zone centrée verticalement (héros en deux moitiés) */
.page-section-zone--centree { display: flex; flex-direction: column; justify-content: center; }

.ld-stat-txt { margin: 10px 0 0; font-size: .92em; line-height: 1.5; color: var(--attenue, #43566e); }

/* ===== Zones alignées sur la colonne de contenu (23/09) =====
   Chaque moitié cale son contenu sur la colonne de la page. Calcul EXPLICITE : dans une zone
   de largeur Z (100 %), la section fait 2Z ; la colonne de contenu (L) y est centrée, donc son
   bord gauche est à Z − L/2. Les marges automatiques ne se calaient pas (texte décalé). */
.page-section--grille-alignee .page-section-zone > .page-section-contenu {
  box-sizing: border-box; max-width: none; width: 100%; margin: 0; }
.page-section--grille-alignee .page-section-zone:first-child > .page-section-contenu {
  padding-left: max(24px, calc(100% - var(--largeur-contenu, 880px) / 2 + var(--page-pad, 32px))); padding-right: clamp(24px, 3vw, 48px); }
.page-section--grille-alignee .page-section-zone:last-child > .page-section-contenu {
  padding-right: max(24px, calc(100% - var(--largeur-contenu, 880px) / 2 + var(--page-pad, 32px))); padding-left: clamp(24px, 3vw, 48px); }
@media (max-width: 820px) {
  .page-section--grille-alignee .page-section-zone > .page-section-contenu { padding-inline: 20px; }
}



.page-section--grille-alignee.page-section--pleine .page-section-zone:first-child,
.page-section--grille-alignee.page-section--pleine .page-section-zone:last-child { padding-left: 0; padding-right: 0; }

/* ===== Présentations ajoutées d'après la maquette Danone (23/09) ===== */
/* Chiffres : cartes SÉPARÉES, contenu aligné à gauche, grands chiffres (au lieu d'un bandeau centré) */
.ld-stats--cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 2.4vw, 36px);
  background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
.ld-stats--cartes .ld-stat { text-align: left; align-items: flex-start; padding: clamp(22px, 2.6vw, 36px);
  background: var(--fond-carte, var(--fond, #fff)); border-radius: var(--rayon, 16px); }   /* fond, coins, contour, ombre : réglages de cadre du bloc */
.ld-stats--cartes .ld-stat + .ld-stat { border-left: 0; }
.ld-stats--cartes .ld-stat-val { font-size: clamp(2.4rem, 4.2vw, 3.6rem); }
/* Citation : filet vertical seul, sans cadre ni fond */
.citation--filet { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  border-left: 4px solid var(--violet) !important; padding: 4px 0 4px 28px !important; }
.citation--filet blockquote { font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.35; }

/* Cartes : nombre fixe par ligne (réglage « Cartes par ligne ») — évite les 4 + 2 d'une grille
   automatique ; sur petit écran, la grille reprend son empilement naturel (23/09). */
.ld-cartes--fixe { grid-template-columns: repeat(var(--cartes-col, 3), minmax(0, 1fr)) !important; }
@media (max-width: 1100px) and (min-width: 821px) { .ld-cartes--rangees { grid-template-columns: repeat(var(--cartes-col-tablette, 2), minmax(0, 1fr)) !important; } }
@media (max-width: 820px) { .ld-cartes--fixe { grid-template-columns: 1fr !important; } .ld-cartes--rangees.ld-cartes--pastilles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Titres internes (carte illustrée, cartes) : ils suivent l'échelle des titres du module (23/09) */
.bloc-duo-titre { font-size: calc(1.35rem * var(--echelle-titre, 1)); }
.ld-carte h3 { font-size: calc(1.08rem * var(--echelle-titre, 1)); }
/* Cartes illustrées côte à côte : même hauteur (la plus haute donne la mesure) */
.page--grille > .page-bloc:has(> .bloc-duo--carte), .page-section-contenu > .page-bloc:has(> .bloc-duo--carte) { align-self: stretch; }
.page-bloc > .bloc-duo--carte { height: 100%; }

/* Cartes — présentation « pastilles numérotées » : une ligne par élément, numéro dans un rond
   de la couleur d'accent, fond blanc arrondi (maquette Danone, écran 4) — 23/09 */
.ld-cartes--pastilles .ld-carte { flex-direction: row; align-items: center; gap: 14px; padding: 14px 22px; min-height: 0; border-radius: var(--rayon, 999px); }   /* fond, contour, ombre : réglages de cadre du bloc */
.ld-cartes--pastilles .ld-num { flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--violet); color: var(--btn-texte, #fff); font-size: .78rem; font-weight: 700; letter-spacing: 0; }
.ld-cartes--pastilles .ld-carte h3 { margin: 0; font-size: 1rem; text-transform: none; }
.ld-cartes--pastilles .ld-carte p:empty, .ld-cartes--pastilles .ld-carte-ico { display: none; }

/* pastilles : numéro À GAUCHE du titre (la carte n'était pas en flex), titre en casse normale
   même quand le module met ses titres en capitales — une pastille est un libellé, pas un titre */
.ld-cartes.ld-cartes--pastilles .ld-carte { display: flex !important; flex-direction: row !important; align-items: center; }
html[data-titres] .ld-cartes--pastilles .ld-carte h3 { text-transform: none; letter-spacing: 0; }

/* ===== Textes intérieurs des blocs = taille du TEXTE COURANT (réglage « Taille du texte courant ») =====
   Ils étaient figés entre 14 et 15 px, trop petits face au site danone.com (23/09). */
.bloc-duo-texte, .ld-carte p, .ld-stat-txt, .encart p, .encart-texte, .encart-corps { font-size: var(--t-contenu); line-height: 1.6; }
.bloc-duo-surtitre { font-family: var(--police-titre, inherit); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); margin-bottom: 8px; }
.bloc-duo-surtitre:empty { display: none; }
[data-theme="dark"] .bloc-duo-surtitre, .bloc-duo[data-theme="dark"] .bloc-duo-surtitre { color: var(--texte); }

/* Quiz « jusqu'à la bonne réponse » (23/09) : un choix écarté reste visible, barré et désactivé */
.quiz-choix.est-ecartee { opacity: .55; text-decoration: line-through; }
.quiz-ressayer { margin: 10px 0 0; font-weight: 700; color: var(--rouge, #B42318); }
.quiz-ressayer.secoue { animation: quiz-secoue .35s ease; }
@keyframes quiz-secoue { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .quiz-ressayer.secoue { animation: none; } }

/* Cartes illustrées à hauteur égale : contenu calé EN HAUT (centré, le texte le plus court
   descendait — deux cartes côte à côte n'étaient plus alignées, signalé le 24/09) */
.bloc-duo--carte { justify-content: flex-start !important; align-content: flex-start; }
.bloc-duo--carte .bloc-duo-corps { justify-content: flex-start; flex: 1 1 auto; }

/* Cartes : apparition échelonnée (réglage « Apparition des cartes ») */
.ld-cartes--cascade .ld-carte { opacity: 0; animation: ld-carte-entree .5s ease-out forwards; animation-delay: calc(var(--i, 0) * var(--cartes-delai, 180ms)); }
@keyframes ld-carte-entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ld-cartes--cascade .ld-carte { animation: none; opacity: 1; } }

/* ===== Schéma « cycle » (24/09) : les étapes restent en rangée, à hauteur ÉGALE ; le détail
   s'affiche dans un PANNEAU commun sous la rangée — ouvrir une étape ne décale plus rien. ===== */
.bloc-schema[data-disposition="cycle"] .sch-scene { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); align-items: stretch; gap: 12px; }
.bloc-schema[data-disposition="cycle"] .sch-item { justify-content: center; min-height: 96px; }
.bloc-schema[data-disposition="cycle"] .sch-item.est-ouvert { grid-column: auto; outline: 2px solid var(--violet); outline-offset: 2px; }
.bloc-schema[data-disposition="cycle"] .sch-item .sch-detail { display: none !important; }
.sch-panneau { margin-top: 18px; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--rayon, 16px); background: var(--fond-carte, var(--fond, #fff)); }
.sch-panneau[hidden] { display: none; }
.sch-panneau .sch-panneau-titre { font-family: var(--police-titre, inherit); font-weight: 700; font-size: calc(1.2rem * var(--echelle-titre, 1)); margin: 0 0 10px; }
.sch-panneau .sch-panneau-corps { font-size: var(--t-contenu); line-height: 1.6; }
@media (max-width: 820px) { .bloc-schema[data-disposition="cycle"] .sch-scene { grid-template-columns: repeat(2, 1fr); } }

/* ===== Image de fond FLOUTÉE (réglage « Flou de l'image ») — 24/09 =====
   Le flou ne peut pas s'appliquer à une couche d'arrière-plan seule : un calque placé derrière le
   contenu reprend l'image, la floute et porte le voile ; le contenu reste net au-dessus. On utilise
   ::before seulement sur les éléments qui le demandent (a-fond-flou), sans toucher aux autres blocs. */
.a-fond-image.a-fond-flou[style] { background-image: none !important; }
.a-fond-flou::before { content: ''; position: absolute; inset: calc(-2 * var(--fond-flou, 0px)); z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgb(var(--fond-voile-rgb, 14 26 36) / var(--voile-effectif, 0)), rgb(var(--fond-voile-rgb, 14 26 36) / var(--voile-effectif, 0))), var(--fond-image);
  background-size: cover; background-position: center; filter: blur(var(--fond-flou, 0px)); }
.a-fond-flou > * { position: relative; z-index: 1; }

/* ===== Cartes — présentation « équation » (A + B + C = D) : une rangée de cartes, et entre elles
   le SIGNE saisi dans le champ « numéro », dans une pastille de la couleur d'accent. La dernière
   carte (le résultat) est mise en valeur. Sur mobile : colonne, signes entre les cartes. ===== */
.ld-cartes.ld-cartes--equation { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 14px; }
.ld-cartes--equation > .ld-carte { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; }
/* le RÉSULTAT (dernière carte) prend la couleur d'accent — elle l'emporte sur le fond de cadre du bloc,
   sinon le texte clair se retrouvait blanc sur blanc */
.ld-cartes--equation > .ld-carte:last-child { flex-grow: 1.25; background: var(--violet) !important; color: var(--btn-texte, #fff); border-color: transparent; }
.ld-cartes--equation > .ld-carte:last-child h3, .ld-cartes--equation > .ld-carte:last-child p { color: inherit; }
.ld-cartes--equation .ld-carte-ico { margin: 0 auto 14px; }
.ld-signe { flex: none; align-self: center; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--violet); color: var(--btn-texte, #fff); font-family: var(--police-titre, inherit); font-weight: 700; font-size: 1.35rem; line-height: 1; }
.ld-cartes--equation.ld-cartes--cascade .ld-signe { opacity: 0; animation: ld-carte-entree .5s ease-out forwards; animation-delay: calc(var(--i, 0) * var(--cartes-delai, 180ms)); }
@media (prefers-reduced-motion: reduce) { .ld-cartes--equation.ld-cartes--cascade .ld-signe { animation: none; opacity: 1; } }
@media (max-width: 820px) {
  .ld-cartes.ld-cartes--equation { flex-direction: column; }
  .ld-cartes--equation > .ld-carte { flex: none; }
}
/* ===== Cartes — repère « coche » (liste d'acquis, écran de certification) ===== */
.ld-coche { width: 34px; height: 34px; color: var(--violet); margin-bottom: 12px; flex: none; }
.ld-cartes--pastilles .ld-coche { margin: 0; }
.ld-cartes--coche.ld-cartes--pastilles .ld-carte h3 { font-weight: 600; }

/* ===== Schéma « constellation » — liens (réglage « Liens ») : traits pointillés sous les
   éléments, du centre vers chaque satellite ; en « tout est relié », une corde entre voisins. ===== */
.bloc-schema[data-disposition="constellation"] .sch-lien { position: absolute; left: 50%; top: 50%; height: 0; width: var(--sch-rayon, 210px);
  border-top: 2px dotted color-mix(in srgb, var(--violet) 55%, transparent); transform-origin: 0 0; transform: rotate(var(--sch-angle)); pointer-events: none; z-index: 0; }
.bloc-schema[data-disposition="constellation"] .sch-lien--corde { width: calc(var(--sch-rayon, 210px) * var(--sch-corde, 1));
  transform: rotate(var(--sch-angle)) translate(var(--sch-rayon, 210px)) rotate(calc(var(--sch-dir) - var(--sch-angle))); }
.bloc-schema[data-disposition="constellation"] .sch-item, .bloc-schema[data-disposition="constellation"] .sch-centre { z-index: 1; }
.bloc-schema[data-disposition="constellation"][data-apparition="cascade"] .sch-lien { opacity: 0; animation: sch-entree-constellation .55s ease-out forwards; animation-delay: calc(var(--sch-ordre) * var(--sch-delai, 220ms)); }
@media (prefers-reduced-motion: reduce) { .bloc-schema .sch-lien { animation: none !important; opacity: 1 !important; } }
.bloc-schema[data-disposition="constellation"].est-liste .sch-lien { display: none; }
@container (max-width: 560px) { .bloc-schema[data-disposition="constellation"] .sch-lien { display: none; } }
@media (max-width: 1100px) { .bloc-schema[data-disposition="constellation"] .sch-lien { --sch-rayon: 175px; } }

/* Panneau du cycle : popup ANCRÉ — une flèche le relie à l'étape ouverte (position calculée au clic) */
.sch-panneau { position: relative; }
.sch-panneau::before { content: ""; position: absolute; top: -9px; left: var(--fleche-x, 50%); width: 18px; height: 18px; transform: translateX(-50%) rotate(45deg);
  background: inherit; border-radius: 3px 0 0 0; }

/* Paragraphes successifs d'un même bloc Texte : un vrai souffle entre eux (ils étaient collés,
   sans aucune marge — deux idées se lisaient comme une seule). Relatif à la taille du texte. */
.bloc-texte-groupe > .bloc-texte--contenu + .bloc-texte--contenu,
.bloc-texte-groupe > .bloc-texte--contenu + .bloc-texte--puces,
.bloc-texte-groupe > .bloc-texte--puces + .bloc-texte--contenu { margin-top: .6em; }

/* QUIZ — la question et le feedback suivent la TAILLE DU TEXTE COURANT du module (réglage « Taille du
   texte ») : figés à 15 et 14 px, ils étaient nettement plus petits que le reste de l'écran (24/09). */
.quiz-question > p { font-size: calc(var(--t-contenu) * 1.05); line-height: 1.45; }
.quiz-choix > span { font-size: var(--t-contenu); line-height: 1.5; }
.quiz-question .quiz-feedback { font-size: var(--t-secondaire, 14px); line-height: 1.6; }
.quiz-question .quiz-feedback ul { margin: .4em 0; padding-left: 1.3em; }
.quiz-ressayer { font-size: var(--t-contenu); }

/* TRI — texte à la taille du TEXTE COURANT (il tombait à 13 px) ; avec un fond de cadre, le bloc
   reçoit une marge intérieure : la consigne touchait le bord de la carte (24/09). */
.bloc-tri { font-size: var(--t-contenu); line-height: 1.5; }
.bloc-tri-consigne { font-weight: 700; }
.bloc-tri[style*="--cadre-fond"] { padding: clamp(18px, 2.2vw, 30px); border-radius: var(--rayon, 16px); }
.tri-ligne { padding: 16px 18px; }
/* Cartes : numéro ou titre laissés VIDES — aucune place réservée dans le module (l'éditeur les garde
   pour qu'on puisse les remplir). */
body:not(.mode-edition) .ld-carte > .ld-num:empty, body:not(.mode-edition) .ld-carte > h3:empty { display: none; }
body:not(.mode-edition) .ld-carte > p:empty { display: none; }
.bloc-texte-groupe > .bloc-texte--contenu + .bloc-texte--sous-titre-1,
.bloc-texte-groupe > .bloc-texte--contenu + .bloc-texte--sous-titre-2 { margin-top: .7em; }
.bloc-texte-groupe > .bloc-texte--sous-titre-1 + .bloc-texte--contenu,
.bloc-texte-groupe > .bloc-texte--sous-titre-2 + .bloc-texte--contenu { margin-top: .5em; }
/* Encarts côte à côte : même hauteur (le plus haut donne la mesure), comme les cartes illustrées */
.page--grille > .page-bloc:has(> .encart), .page-section-contenu > .page-bloc:has(> .encart) { align-self: stretch; }
.page-bloc > .encart { height: 100%; box-sizing: border-box; }
.bloc-texte-groupe > .bloc-texte--contenu + .bloc-texte--surtitre,
.bloc-texte-groupe > .bloc-texte--sous-titre-1 + .bloc-texte--surtitre,
.bloc-texte-groupe > .bloc-texte--sous-titre-2 + .bloc-texte--surtitre { margin-top: 1.6em; }
/* écrans tactiles : les boutons de décision du tri atteignent 44 px (cible tactile recommandée) */
@media (max-width: 820px), (pointer: coarse) { .tri-choix-btn { min-height: 44px; } }

/* ===== Tailles secondaires qui suivent le texte courant (25/09) =====
   Mesuré sur un module à texte « grande » (19,8 px) : feedback 14 px, étiquettes 11 px, titres de
   pastilles 16 px, schéma 16,5 px, boutons 15 px. Chacune dérive désormais de --t-contenu. */
.encart--titre, .ld-num, .bloc-duo-surtitre, .bloc-texte.bloc-texte--surtitre { font-size: var(--t-etiquette, 13px); }
.bloc-score-detail { font-size: var(--t-secondaire, 15px); }
.ld-carte h3 { font-size: max(calc(1.08rem * var(--echelle-titre, 1)), var(--t-contenu, 1rem)); }
.ld-cartes--pastilles .ld-carte h3 { font-size: var(--t-contenu, 1rem); }
.bloc-schema .sch-item { font-size: var(--t-contenu, inherit); }
.page .btn-action { font-size: max(15px, calc(var(--t-contenu, 17.6px) * .85)); }

/* Image « à la hauteur du bloc voisin » : la rangée de la grille donne la hauteur (texte plus
   long → image plus haute), la hauteur réglée (rangées) reste un minimum. Seule sur sa
   rangée (téléphone), l'image garde sa hauteur réglée. */
/* l'image est posée en absolu : sa taille naturelle ne pèse plus sur la hauteur de la rangée
   (sinon une image « haute » agrandissait la rangée au lieu de suivre le texte) */
.bloc-image.est-etiree { position: relative; height: 100%; min-height: var(--h, 240px); }
.bloc-image.est-etiree img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: var(--fit, cover); }
.bloc-image.est-etiree figcaption { position: absolute; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--surface-page, #fff) 92%, transparent); }

.bloc-image figcaption { font-size: max(13px, calc(var(--t-contenu, 16.5px) * .8)); }   /* légende : suit le texte courant */

/* ===== Encart : pictogramme aligné sur l'étiquette, à la couleur de l'étiquette (25/09) =====
   Le pictogramme était calé à 18 px du haut quelle que soit la taille de l'étiquette (4 à 5 px trop
   haut en texte agrandi) ; et vert pour un encart « succès » dont l'étiquette, elle, est à la couleur
   d'accent. Il suit désormais l'étiquette : centré sur sa ligne, même couleur (rouge seulement pour
   une alerte, où l'étiquette passe aussi en rouge). */
.encart--titre { line-height: 1.5; }
.encart-ico { top: calc(20px + (var(--t-etiquette, 13px) * 1.5 - 20px) / 2); }
.encart--succes .encart-ico { color: var(--violet); }
html[data-theme="dark"] .encart--succes .encart-ico, .page-section[data-theme-section="dark"] .encart--succes .encart-ico { color: var(--texte); }
.encart--alerte .encart--titre { background: none; -webkit-text-fill-color: currentColor; }

/* ===== Titres des éléments à la couleur d'accent (réglage du module, 25/09) =====
   Étapes et schémas, cartes, duos, panneau de détail — sur fond clair seulement : sur un fond
   sombre ou coloré, le titre garde la couleur du texte. */
html[data-titres-accent] :is(.sch-titre, .sch-panneau-titre, .ld-carte h3, .bloc-duo-titre) { color: var(--violet); }
html[data-titres-accent] :is([data-theme="dark"], [data-theme-section="dark"]) :is(.sch-titre, .sch-panneau-titre, h3, .bloc-duo-titre),
html[data-titres-accent] .ld-cartes--pastilles .ld-carte h3 { color: inherit; }

/* ===== Puces des listes à la couleur d'accent (réglage du module) ===== */
html[data-puces-accent] .page :is(ul, ol) > li::marker { color: var(--violet); }
html[data-puces-accent] .page :is([data-theme="dark"], [data-theme-section="dark"]) :is(ul, ol) > li::marker { color: inherit; }

/* ===== Pastilles sans numéro : le mot est centré dans la pastille (25/09) ===== */
.ld-cartes--pastilles .ld-carte:not(:has(> .ld-num:not(:empty))) { justify-content: center; text-align: center; }
.ld-cartes--pastilles .ld-carte:not(:has(> .ld-num:not(:empty))) h3 { width: 100%; }

/* ===== Schéma : titres AJUSTÉS à la largeur des éléments (mesurés, cf. structure.js) =====
   Un mot long (« Implementation », « Measurement ») ne déborde plus de sa case : la taille des
   titres du schéma baisse d'un cran commun à toutes les cases jusqu'à ce que le plus long tienne. */
.sch-txt { display: block; max-width: 100%; }
.sch-titre { display: block; font-size: var(--sch-titre-taille, inherit); overflow-wrap: normal; hyphens: manual; }
/* colonnes équilibrées posées par la mesure des titres (structure.js) ; sur téléphone, la règle à 2 colonnes reste maîtresse */
.bloc-schema[data-disposition="cycle"] .sch-scene[style*="--sch-colonnes"] { grid-template-columns: repeat(var(--sch-colonnes), minmax(0, 1fr)); }
@media (max-width: 820px) { .bloc-schema[data-disposition="cycle"] .sch-scene[style*="--sch-colonnes"] { grid-template-columns: repeat(2, 1fr); } }
/* Schéma « sur une ligne » : cases égales, titres coupés entre les mots (jamais dans un mot) */
.bloc-schema[data-rangees="une"] .sch-titre, .bloc-schema[data-rangees="deux"] .sch-titre { overflow-wrap: normal; word-break: normal; }
.bloc-schema[data-disposition="bulles"] .sch-scene[style*="--sch-colonnes"] { display: grid; grid-template-columns: repeat(var(--sch-colonnes), minmax(0, 1fr)); }
@media (max-width: 820px) { .bloc-schema[data-disposition="bulles"] .sch-scene[style*="--sch-colonnes"] { grid-template-columns: repeat(2, 1fr); } }
.bloc-schema[data-rangees="une"] .sch-scene[style*="--sch-colonnes"] > .sch-item { padding-left: 10px; padding-right: 10px; }   /* une ligne : un peu plus de place pour le mot le plus long */

/* ── Section scroll « Grand texte » (effet mots) : une phrase par étape, épinglée au centre de la
   scène ; les mots s'allument un à un au défilement (opacité posée par l'hydratation). ── */
.bloc-scroll-mots { width: 100%; }
.mots-etape { position: relative; height: calc(var(--scene-h, 100vh) * 1.7); }
.mots-etape + .mots-etape { margin-top: calc(var(--scene-h, 100vh) * -0.15); }
.mots-sticky { position: sticky; top: 0; height: var(--scene-h, 100vh); display: grid; grid-template-columns: 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); }
.mots-sticky.a-visuel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mots-sticky.a-visuel.visuel-gauche { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.mots-sticky.visuel-gauche .mots-visuel { order: -1; }
.mots-inner { min-width: 0; }
.mots-label { font-family: var(--police-titre); font-size: var(--t-etiquette, 13px); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--violet); margin: 0 0 clamp(14px, 2vh, 24px); }
.mots-texte { font-family: var(--police-titre); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; color: var(--texte); overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; }
.mots-texte p { margin: 0 0 .5em; }
.bloc-scroll-mots[data-taille="m"] .mots-texte { font-size: clamp(1.7rem, 3.3vw, 2.9rem); }
.bloc-scroll-mots[data-taille="l"] .mots-texte { font-size: clamp(2rem, 4.3vw, 3.9rem); }
.bloc-scroll-mots[data-taille="xl"] .mots-texte { font-size: clamp(2.3rem, 5.8vw, 5.2rem); line-height: 1.04; }
.mots-texte .mot { transition: opacity .12s linear; }
.mots-visuel { margin: 0; height: min(64vh, calc(var(--scene-h, 100vh) * .66)); border-radius: var(--rayon, 18px); overflow: hidden;
  opacity: calc(.25 + var(--mots-p, 1) * 1.5); transform: scale(calc(.9 + min(var(--mots-p, 1) * .2, .1))); transition: opacity .2s linear, transform .2s linear; }
.mots-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mots-visuel.est-vide { background: var(--surface, rgba(127,127,140,.08)); border: 1px dashed var(--surface-bord, rgba(127,127,140,.3)); }
body.mode-edition .mots-etape { height: auto; padding: 40px 0; }
body.mode-edition .mots-etape + .mots-etape { margin-top: 0; }
body.mode-edition .mots-sticky { position: relative; height: auto; }
body.mode-edition .mots-visuel { height: 320px; opacity: 1; transform: none; }
@media (max-width: 820px) {
  .mots-sticky.a-visuel, .mots-sticky.a-visuel.visuel-gauche { grid-template-columns: 1fr; align-content: center; gap: 20px; }
  .mots-sticky.visuel-gauche .mots-visuel { order: 0; }
  .mots-visuel { height: calc(var(--scene-h, 100vh) * .3); }
}
@media (prefers-reduced-motion: reduce) { .mots-texte .mot { opacity: 1 !important; } .mots-visuel { opacity: 1; transform: none; } }

/* ── Révélation de texte : la largeur se compte dans la taille du TITRE (un « ch » du texte courant
   faisait 42 caractères de petit texte, soit à peine un mot du grand titre : les mots étaient coupés) ── */
.revel-etape { max-width: min(100%, 980px); }
.revel-titre { font-size: clamp(2rem, 5.2vw, 4.4rem); overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; }
.revel-txt { max-width: 60ch; }
.revel-etape:nth-child(even) .revel-txt { margin-left: auto; }

/* ── Parallaxe plein écran : panneaux à la hauteur de la scène, sans coins ; voile réglable ── */
.bloc-scroll-parallaxe .para-etape.a-image::before { background: rgba(var(--para-voile-rgb, 0,0,0), var(--para-voile, .4)); }
.bloc-scroll-parallaxe.est-plein-ecran .para-etape { min-height: var(--scene-h, 100vh); border-radius: 0; }
.bloc-scroll-parallaxe.est-plein-ecran .para-etape h3 { font-size: clamp(2.4rem, 6.4vw, 5.6rem); line-height: 1.05; text-wrap: balance; }
.bloc-scroll-parallaxe.est-plein-ecran .para-txt { font-size: var(--t-st2, 1.2rem); max-width: 52ch; margin: 0 auto; }

/* ── Écran de transition : fond, voile et accent réglables ; taille de l'affiche au choix ── */
.ld-transition { background: var(--trans-fond, #0E0C0A); }
.ld-trans-media::after { background: rgba(var(--trans-voile-rgb, 8, 7, 6), var(--voile, .45)); }
.ld-trans-affiche em { color: var(--trans-accent, var(--violet)); -webkit-text-fill-color: var(--trans-accent, var(--violet)); }
.ld-trans-affiche { max-width: 100%; overflow-wrap: normal; word-break: normal; text-wrap: balance; }
.ld-transition[data-taille="auto"] .ld-trans-affiche { font-size: clamp(3rem, 11vw, 11rem); line-height: 1; }
.ld-transition[data-taille="l"] .ld-trans-affiche { font-size: clamp(2.6rem, 7.5vw, 7rem); line-height: 1; }
.ld-transition[data-taille="m"] .ld-trans-affiche { font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.05; }
.ld-trans-txt { max-width: min(100%, 1200px); }

/* ── Frise : tailles à l'échelle du module ; horizontale, les repères se PARTAGENT la largeur
   (largeur fixe auparavant : une frise de 4 débordait en 1200 px) ; lisible sur une bande sombre ── */
.tl-date { font-size: calc(var(--t-etiquette, 13px) * 1.15); letter-spacing: .04em; }
.tl-contenu h3 { font-size: var(--t-st2, 1.2rem); line-height: 1.25; }
.tl-txt { font-size: var(--t-contenu, 1rem); }
.tl-horizontale .tl-evenement { flex: 1 1 0; min-width: min(170px, 70vw); }
.tl-horizontale .tl-contenu h3 { padding-right: 12px; }
[data-theme-section="dark"] .tl-date, [data-theme="dark"] .tl-date { color: var(--texte); opacity: .8; }
[data-theme-section="dark"] .tl-point, [data-theme="dark"] .tl-point { background: var(--texte); box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
[data-theme-section="dark"] .tl-horizontale .tl-evenement::before, [data-theme-section="dark"] .tl-verticale::before { background: rgba(255,255,255,.3); }
/* étiquette du grand texte sur une bande sombre : l'accent (bleu sur bleu) disparaissait */
[data-theme-section="dark"] .mots-label, [data-theme="dark"] .mots-label { color: var(--texte); opacity: .72; }
/* panneau de parallaxe sur image : tout le texte en clair (le gras héritait de la couleur du thème de page) */
.para-etape.a-image, .para-etape.a-image * { color: #fff; -webkit-text-fill-color: #fff; }
.bloc-scroll-parallaxe.est-plein-ecran .para-inner { max-width: min(92%, 34em); }
.bloc-scroll-parallaxe.est-plein-ecran .para-txt { font-family: var(--police-titre); font-size: clamp(1.5rem, 2.9vw, 2.6rem); line-height: 1.22; max-width: none; text-wrap: balance; }
.bloc-scroll-parallaxe.est-plein-ecran .para-inner h3:empty { display: none; }
/* liste à cocher : la ligne entière se coche (libellé englobant) ; titre à l'échelle du module */
.bloc-cl-item:has(> .bloc-cl-cible) { padding: 0; }
.bloc-cl-item label.bloc-cl-cible { display: flex; align-items: flex-start; gap: 11px; flex: 1; min-height: 44px; padding: 10px 13px; box-sizing: border-box; cursor: pointer; }
.bloc-cl-item .bloc-cl-cible input[type="checkbox"] { margin-top: 0; }
.bloc-cl-titre { font-size: var(--t-st2, 17px); }

/* Texte réservé aux lecteurs d'écran (états d'exercice donnés aussi par la couleur) */
.tk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.aa-poignee:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

/* ---- Cibles tactiles (audit 25/09) ----------------------------------------------------------
   Sur écran tactile, toute commande offre au moins 40 × 40 px (WCAG 2.5.8 demande 24, la
   pratique mobile 44) : points du carrousel, flèches de l'ordonnancement, points chauds,
   curseur d'estimation, onglets, zones d'un message à inspecter, réponses Vrai / Faux.
   La souris garde les tailles compactes : seul le pointeur grossier est concerné. */
@media (pointer: coarse) {
  /* carrousel en vitrine : ses points faisaient 8 × 8 px (22 × 8 pour l'actif) — le point reste dessiné petit,
     la cible fait 40 px (mesuré sur un module reçu, 29/09) */
  .cv-points { gap: 0; padding: 0 6px; }
  .cv-points > .cv-point { width: 40px; height: 40px; background: transparent; position: relative; }
  .cv-points > .cv-point::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%);
    border-radius: 999px; background: color-mix(in srgb, var(--texte, #1d1d1f) 35%, transparent); transition: width .3s, background .3s; }
  .cv-points > .cv-point.est-actif { width: 40px; background: transparent; }
  .cv-points > .cv-point.est-actif::after { width: 22px; background: var(--texte, #1d1d1f); }
  .carrousel-points { gap: 0; }
  .carrousel-points > .carrousel-point { width: 40px; height: 40px; background: transparent; position: relative; border-radius: 50%; }   /* > : l'emporte sur theme-leaf.css, chargée après */
  .carrousel-points > .carrousel-point::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
    border-radius: 999px; background: rgba(255, 255, 255, 0.22); transition: background .3s, transform .3s; }
  .carrousel-points > .carrousel-point.est-actif { background: transparent; transform: none; }
  .carrousel-points > .carrousel-point.est-actif::after { background: var(--violet); transform: scale(1.25); }
  .bloc-ordre-nav button { width: 40px; height: 40px; }
  .bloc-hs-point { width: 40px; height: 40px; }
  .bloc-estim-curseur { min-height: 40px; }
  .onglets-tetes [role="tab"] { min-height: 44px; }
  .bloc-msg [data-cible][role="button"] { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; }
  .dlg-rep, .dlg-rep button, .dlg-reaction button { min-height: 44px; min-width: 44px; }
  .bloc-paires-item, .tri-choix-btn, .bloc-tri-etiq, .bloc-i-rejouer, .bloc-i-valider, .bloc-estim-valider, .btn-action,
  .onglet-tete, .accordeon-tete, .etape-bouton, .ld-trans-passer, .bloc-audio-cc, .cv-lecture { min-height: 44px; }
  .bloc-audio-cc { min-width: 44px; }   /* « CC » faisait 37 px de large : sous la cible tactile de 40 px (mesuré, 29/09) */
}

/* Verdicts et corrections en thème SOMBRE (audit 25/09) : rouge #B42318 sur fond sombre = 2,4:1.
   Mêmes teintes éclaircies que le journal et les encarts (#F0917F / #7FC8A0, > 7:1 sur #12202C). */
:is(html[data-theme="dark"], .page-section[data-theme-section="dark"], .page-bloc[data-theme="dark"], .page-bloc [data-theme="dark"]) :is(.est-faux .dlg-verdict, .tri-corr, .quiz-ressayer) { color: #F0917F; }
:is(html[data-theme="dark"], .page-section[data-theme-section="dark"], .page-bloc[data-theme="dark"], .page-bloc [data-theme="dark"]) .est-juste .dlg-verdict { color: #7FC8A0; }

}   /* fin @layer outil */