/* =====================================================================
   demo.css — LA DÉMO EN CINQ TEMPS.

   CE FICHIER NE REDÉFINIT AUCUNE COULEUR. Il consomme les jetons du socle
   (--mrs-*), qui portent déjà la palette validée : encre #1A1A1A, crème
   #F4F1E0, violet #5F2F8A, carmin #C8203D, or #EAB939. Aucune substitution,
   aucune nuance inventée. Les seules valeurs propres à ce fichier sont des
   éclaircissements NEUTRES de l'encre pour les surfaces — ce que le socle
   fait déjà et documente : un fond strictement plat rendrait les cartes
   indiscernables du châssis.

   MOBILE D'ABORD, ET PAS PAR PRINCIPE. Le visiteur arrive en flashant un QR
   code : il est debout, sur son téléphone, seul. Tout est écrit pour 390 px
   de large, et le bureau n'est qu'un élargissement — jamais l'inverse.

   TOUT DOIT SE COMPRENDRE SON COUPÉ. Aucune information ne vit dans l'audio.
   Les sous-titres sont affichés par défaut, la voix ajoute, elle ne porte
   jamais seule. C'est la règle
   produit.regle-parcours-integralement-faisable-sans-son.

   ON NE RESKINNE PAS L'ANCIEN LECTEUR. Ni texte sur fond crème pleine page,
   ni navigation basse : c'est exactement ce que la démo v1 faisait et qui a
   été rejeté. Ici, univers carte à jouer sur châssis noir.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* L'ATTRIBUT [hidden] DOIT GAGNER, TOUJOURS.
   Une classe qui pose « display: flex » bat la règle « [hidden]{display:none} »
   du navigateur, parce qu'une classe l'emporte sur un sélecteur d'attribut de
   la feuille par défaut. Résultat trouvé en recette : le bouton d'écoute
   s'affichait DANS la carte alors qu'aucun audio n'existe — un bouton qui ne
   mène à rien, sur la carte qu'on veut premium. La règle est posée une fois,
   ici, pour tous les éléments du parcours qui apparaissent au fil de la
   boucle. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  /* Le fond est posé sur les DEUX. Le poser sur body seul laisse du blanc
     dès qu'on dépasse la hauteur de la vue — défaut trouvé à l'œil sur la
     démo v1, qu'aucune assertion n'avait attrapé. */
  background: var(--mrs-encre, #1A1A1A);
  color: var(--mrs-creme, #F4F1E0);
  font-family: var(--mrs-police, 'Atkinson Hyperlegible', system-ui, sans-serif);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  /* Le débordement horizontal est la faute la plus fréquente d'une page
     mobile, et la plus visible. On le rend impossible ici, puis on vérifie
     tout de même scrollWidth au navigateur : une règle CSS qui masque un
     débordement n'est pas une preuve qu'il n'existe pas. */
  overflow-x: hidden;
}

body { min-height: 100vh; min-height: 100dvh; }

/* Un halo violet très sourd, immobile : il donne de la profondeur au
   châssis sans introduire de couleur nouvelle. */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--mrs-violet, #5F2F8A) 26%, transparent), transparent 70%),
    radial-gradient(90% 50% at 50% 110%, color-mix(in srgb, var(--mrs-violet, #5F2F8A) 14%, transparent), transparent 70%);
}

.enveloppe {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  margin: 0 auto; padding: 0 16px 40px;
}

/* ── L'EN-TÊTE ET LE BANDEAU DE RÔLE ───────────────────────────────────
   Le bandeau dit au visiteur DE QUEL CÔTÉ il regarde, et il BASCULE au
   temps 3. C'est la charnière de tout le parcours : « ce que vivront vos
   vendeurs » devient « ce que VOUS verrez ». Sans lui, le temps 3 ressemble
   à un écran de plus. */
.tete {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 0 8px;
}
.tete img { height: 34px; width: auto; display: block; }

.bandeau-role {
  display: block; width: 100%;
  text-align: center;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700;
  padding: 9px 12px; margin: 0 0 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mrs-or, #EAB939) 38%, transparent);
  color: var(--mrs-or, #EAB939);
  background: color-mix(in srgb, var(--mrs-or, #EAB939) 8%, transparent);
  transition: background var(--mrs-duree, .28s) ease, border-color var(--mrs-duree, .28s) ease, color var(--mrs-duree, .28s) ease;
}
/* La bascule décideur : le même bandeau, en violet. Le changement de
   couleur EST le signal — on ne compte pas sur le fait qu'il soit lu. */
.bandeau-role.decideur {
  color: var(--mrs-creme, #F4F1E0);
  border-color: color-mix(in srgb, var(--mrs-violet, #5F2F8A) 70%, transparent);
  background: color-mix(in srgb, var(--mrs-violet, #5F2F8A) 34%, transparent);
}

/* ── LE FIL DES CINQ TEMPS ─────────────────────────────────────────────
   Cinq traits, pas des chiffres : le visiteur voit qu'il avance et combien
   il reste, sans avoir à compter. */
.fil { display: flex; gap: 6px; margin: 0 0 20px; }
.fil span {
  flex: 1; height: 3px; border-radius: 3px;
  background: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 16%, transparent);
  transition: background var(--mrs-duree, .28s) ease;
}
.fil span.fait { background: color-mix(in srgb, var(--mrs-or, #EAB939) 55%, transparent); }
.fil span.ici  { background: var(--mrs-or, #EAB939); }

/* ── LES TEMPS ─────────────────────────────────────────────────────────
   Un seul visible à la fois. L'entrée est une montée douce : le mouvement
   dit « il se passe quelque chose », il ne fait pas le spectacle. */
.temps { display: none; }
.temps.actif { display: block; animation: monte .5s ease both; }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

h1, h2 {
  font-family: var(--mrs-police-titre, 'Playfair Display', Georgia, serif);
  font-weight: 700; line-height: 1.15; margin: 0 0 10px;
}
h1 { font-size: 1.72rem; }
h2 { font-size: 1.3rem; }
.sur-titre {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mrs-or, #EAB939); font-weight: 700; margin: 0 0 6px;
}
.dit { color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 76%, transparent); font-size: 0.95rem; }

/* ── LE CADRE VIDÉO, ET SON ATTENTE ────────────────────────────────────
   RÈGLE : AUCUN TEMPS N'EST OTAGE D'UN MÉDIA NON PRODUIT. Les deux
   séquences de Charlotte n'existent pas encore. Le cadre est donc en place,
   avec sa piste de sous-titres prête, ET une attente qui se suffit — pas un
   rectangle gris avec « vidéo à venir ». Ce que le visiteur lit ici, ce sont
   les mots de Charlotte, écrits par elle. Le jour où le fichier arrive, il
   remplace le contenu du cadre et rien d'autre ne bouge. */
.cadre-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--mrs-rayon, 14px); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mrs-or, #EAB939) 30%, transparent);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--mrs-violet, #5F2F8A) 42%, transparent), transparent 72%),
    #212121;
  display: grid; place-items: center;
}
.cadre-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.attente-video { text-align: center; padding: 18px; }
.attente-video .sceau {
  width: 62px; height: 62px; margin: 0 auto 10px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--mrs-or, #EAB939);
  color: var(--mrs-or, #EAB939); font-size: 1.5rem;
  background: color-mix(in srgb, var(--mrs-or, #EAB939) 10%, transparent);
}
.attente-video .qui { font-family: var(--mrs-police-titre, Georgia, serif); font-size: 1.06rem; color: var(--mrs-creme, #F4F1E0); }
.attente-video .quoi { font-size: 0.78rem; color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 62%, transparent); }

/* ── LE PREMIER ÉCRAN, POSÉ SUR LE LOGO ──────────────────────────────────
   Décision reprise le 10/09 (annule decision-cedric-premier-ecran-assume-
   image-fixe-et-bouton-avant-la-video-d-accueil-03092026) : plus d'image
   plein cadre — le repos montre le cartouche (data-mr-logo, même point
   d'inclusion que l'en-tête) au-dessus du bouton, sur le fond déjà sombre
   du cadre. Le scrim reste un fond doux derrière les deux ; UN SEUL
   bouton, grand, tactile aux deux largeurs (min 56px de haut, bien au-delà
   des 44px recommandés). */
.premier-ecran {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.premier-ecran-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,13,20,0) 45%, rgba(16,13,20,.55) 78%, rgba(16,13,20,.78) 100%);
}
.premier-ecran-contenu {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 0 20px;
}
.premier-ecran-logo {
  width: min(62%, 300px); height: auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
}
.premier-ecran-bouton {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 15px 30px 15px 24px;
  border-radius: 999px; border: none; cursor: pointer;
  background: var(--mrs-or, #EAB939); color: var(--mrs-encre, #1A1A1A);
  font: inherit; font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transform: translateY(6%);
}
.premier-ecran-bouton:hover, .premier-ecran-bouton:focus-visible { filter: brightness(1.06); }
.premier-ecran-icone {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--mrs-encre, #1A1A1A) 14%, transparent);
  font-size: .8rem; padding-left: 3px; /* optique du triangle, centré à l'œil */
}

/* ── LES SOUS-TITRES INCRUSTÉS SUR LA VIDÉO D'ACCUEIL ────────────────────
   Rendu maison (voir la garde posée dans index.html) : AUCUNE couleur
   propre à ce bloc, uniquement les jetons déjà en usage dans ce fichier
   (--mrs-encre, --mrs-creme, --mrs-or, --mrs-rayon) — même géométrie de
   bande dégradée que .premier-ecran-scrim juste au-dessus, pour que les
   deux calques (repos / lecture) se répondent visuellement.
   BANDE BASSE, jamais sur le visage : Charlotte occupe le haut/centre du
   cadre (vérifié image par image sur accueil-temps1.mp4 — visage et mains
   ne descendent jamais sous ~65 % de la hauteur) ; la bande grandit vers
   le haut avec le texte mais reste ancrée en bas, jamais au centre. */
.video-legende {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; align-items: flex-end;
  padding: 20px 11px max(12px, env(safe-area-inset-bottom, 12px));
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--mrs-encre, #1A1A1A) 55%, transparent) 55%,
    color-mix(in srgb, var(--mrs-encre, #1A1A1A) 88%, transparent) 100%);
}
.video-legende p {
  margin: 0; max-width: 97%;
  padding: 5px 12px;
  border-radius: var(--mrs-rayon, 14px);
  background: color-mix(in srgb, var(--mrs-encre, #1A1A1A) 68%, transparent);
  color: var(--mrs-creme, #F4F1E0);
  font-size: .88rem; font-weight: 600; line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  /* Ne coupe jamais un mot : le retour se fait seulement aux espaces —
     c'est la largeur (97 % du cadre utile) et la taille de police choisies
     pour tenir qui évitent le débordement, pas une coupure forcée. La plus
     longue des sept phrases (~205 signes, borne 17,078s→28,524s) a servi de
     cas de calibrage : elle doit tenir sans jamais monter jusqu'au visage. */
  overflow-wrap: normal; word-break: normal; white-space: pre-line;
}

/* ── L'ATTENTE DE LECTURE — discrète, tenue, jamais une saccade ─────────
   Ne s'affiche QUE si le clic arrive avant que la vidéo ait assez
   bufferisé pour démarrer sans à-coup (voir demo.js, canplay). Le fond
   reste sombre et stable : aucune image figée, aucun sursaut visuel. */
.attente-lecture {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; gap: 14px;
  background: #100d14; color: var(--mrs-creme, #F4F1E0); text-align: center;
}
.attente-lecture-anneau {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--mrs-or, #EAB939) 25%, transparent);
  border-top-color: var(--mrs-or, #EAB939);
  animation: attente-lecture-tourne 0.9s linear infinite;
}
.attente-lecture p { margin: 0; font-size: .92rem; color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 78%, transparent); }
@keyframes attente-lecture-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .attente-lecture-anneau { animation: none; }
}

/* LE TEXTE DE CHARLOTTE, PRÉSENTÉ COMME UN SOUS-TITRAGE.
   Ce n'est pas un pis-aller : c'est la forme qu'aura le sous-titre quand la
   vidéo existera. Le visiteur son coupé lit exactement la même chose, au
   même endroit. */
.sous-titre {
  margin: 12px 0 0; padding: 14px 16px;
  border-radius: var(--mrs-rayon, 14px);
  background: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 7%, transparent);
  border-left: 3px solid var(--mrs-or, #EAB939);
  font-size: 1rem;
}
.sous-titre p { margin: 0 0 10px; }
.sous-titre p:last-child { margin-bottom: 0; }
.sous-titre .chute { color: var(--mrs-or, #EAB939); font-weight: 700; }

/* ── LA CARTE QUI SE RETOURNE ──────────────────────────────────────────
   L'univers carte à jouer, et il n'est pas décoratif : c'est lui qui rend
   la collection naturelle au temps 2, et la carte BOP Aptitude évidente au
   temps 4. Crème sur châssis noir, filet or. */
.scene-carte { perspective: 1200px; margin: 4px 0 16px; }
.carte {
  /* Plus haute sur téléphone qu'une carte à jouer stricte : on préfère
     donner de la place au texte plutôt que de le faire défiler beaucoup.
     L'univers carte reste lisible, la lecture passe avant le format. */
  position: relative; width: 100%; aspect-ratio: 3 / 4.5;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.2,.7,.2,1);
  cursor: pointer;
}
.carte.retournee { transform: rotateY(180deg); }
.carte .face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 16px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mrs-or, #EAB939) 46%, transparent);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
/* LE FOND OFFICIEL, PAS UN PLACEHOLDER — relevé par Cédric en direct : le
   dos portait des hachures or/gris inventées pour la démo, sans rapport
   avec la carte réelle. Repris À L'IDENTIQUE depuis .face-front du lecteur
   (public/player.html, le damier BOP, identite.fond-noir-plateforme-
   cartes-creme, VALIDE CÉDRIC 17/08) — mêmes déclarations, mêmes jetons
   --mrs-*, aucune teinte étrangère à la charte. */
.carte .dos {
  background:
    radial-gradient(ellipse at 50% 16%, color-mix(in srgb, var(--mrs-violet, #5F2F8A) 42%, transparent), transparent 62%),
    var(--mrs-encre, #1A1A1A);
  display: grid; place-items: center; text-align: center; padding: 22px;
  position: relative; overflow: hidden;
}
.carte .dos::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-conic-gradient(color-mix(in srgb, var(--mrs-creme, #F4F1E0) 10%, transparent) 0% 25%, transparent 0% 50%) 50% / 20px 20px,
    repeating-linear-gradient(115deg, color-mix(in srgb, var(--mrs-creme, #F4F1E0) 5%, transparent) 0 2px, transparent 2px 6px);
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(ellipse 76% 62% at 50% 42%, #000 40%, transparent 88%);
          mask-image: radial-gradient(ellipse 76% 62% at 50% 42%, #000 40%, transparent 88%);
}
.carte .dos::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid color-mix(in srgb, var(--mrs-or, #EAB939) 18%, transparent);
  border-radius: 10px; pointer-events: none;
}
.carte .dos > div { position: relative; z-index: 1; }
.carte .dos .sceau-dos {
  width: 74px; height: 74px; border-radius: 50%;
  border: 2px solid var(--mrs-or, #EAB939); color: var(--mrs-or, #EAB939);
  display: grid; place-items: center; font-size: 1.7rem; margin: 0 auto 14px;
}
.carte .dos .invite { color: var(--mrs-or, #EAB939); font-weight: 700; font-size: .95rem; letter-spacing: .04em; }
.carte .dos .invite-sous { color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 60%, transparent); font-size: .8rem; }
.carte .avant {
  transform: rotateY(180deg);
  background: var(--mrs-creme, #F4F1E0);
  color: var(--mrs-encre, #1A1A1A);
  display: flex; flex-direction: column;
}
.carte .avant .haut {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--mrs-creme-bord, #DED8C0);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.carte .avant .rang { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mrs-violet, #5F2F8A); font-weight: 700; }
.carte .avant h3 { font-family: var(--mrs-police-titre, Georgia, serif); font-size: 1.08rem; margin: 4px 0 0; }
/* DÉCISION CÉDRIC (produit.decision-cedric-la-demo-montre-ce-qu-on-vend...) :
   la démo MONTRE ce qu'on vend, elle ne le DONNE pas. Le corps ne défile
   plus jamais — hauteur bornée par le flex du parent (`.avant`), overflow
   caché, et le texte s'éteint en fondu avant le bord bas, laissant une
   bande vide qui dit « il y a une suite » sans jamais l'offrir en entier.
   `min-height:0` est nécessaire : sans lui un enfant flex refuse de se
   réduire sous sa hauteur de contenu, et redevient scrollable malgré
   `overflow:hidden`. `injecterExtraitCorps` (demo.js) ne place dans ce
   bloc que des paragraphes entiers, jamais une phrase coupée. */
.carte .avant .corps {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  padding: 12px 16px 40px; font-size: .93rem;
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 78%);
}
.carte .avant .corps p { margin: 0 0 10px; }
.carte .avant .corps strong { color: var(--mrs-violet, #5F2F8A); }

/* Le bouton d'écoute. OPTIONNEL, et il le dit : la voix ajoute, elle ne
   porte jamais seule. */
.ecoute {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--mrs-violet, #5F2F8A); color: var(--mrs-violet, #5F2F8A);
  background: transparent; border-radius: 999px;
  padding: 7px 13px; font: inherit; font-size: .78rem; font-weight: 700;
  cursor: pointer; min-height: 34px;
}

/* @keyframes eclot — reprise plus bas par .collection .vignette.acquise.
   Portait aussi l'ancien bloc .recompense (quiz inventé, retiré : la vraie
   mécanique P1-03 scène 1 conclut par sa propre clôture, mot pour mot). */
@keyframes eclot { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ── LA PROGRESSION : JAUGE + COLLECTION ───────────────────────────────
   Le gain doit se VOIR bouger. Une valeur qui s'affiche déjà atteinte ne
   récompense rien. */
.progression { margin: 18px 0 0; }
.jauge-etiquette { display: flex; justify-content: space-between; font-size: .76rem; color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 66%, transparent); margin-bottom: 6px; }
.jauge { height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 12%, transparent); overflow: hidden; }
.jauge > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--mrs-or, #EAB939), var(--mrs-or-clair, #F3CE6E));
  border-radius: 999px;
  transition: width 1.1s cubic-bezier(.2,.8,.2,1);
}
.collection { display: flex; gap: 8px; margin: 14px 0 0; }
.collection .vignette {
  flex: 1; aspect-ratio: 3 / 4; border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--mrs-creme, #F4F1E0) 20%, transparent);
  display: grid; place-items: center; font-size: .68rem;
  color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 40%, transparent);
}
.collection .vignette.acquise {
  border: 1px solid var(--mrs-or, #EAB939);
  background: color-mix(in srgb, var(--mrs-or, #EAB939) 14%, transparent);
  color: var(--mrs-or, #EAB939);
  animation: eclot .45s ease both;
}

/* ── LA PHRASE DE CLÔTURE DU TEMPS 2 ────────────────────────────────────
   Le mot de Charlotte sur ce qui vient d'être joué, avant que le teaser
   n'ouvre sur la suite verrouillée. Elle n'est pas floutée : ce n'est pas
   du contenu à débloquer, c'est la clôture de ce qui vient de se jouer. */
.phrase-cloture {
  margin: 20px 0 0; text-align: center;
  font-family: var(--mrs-police-titre, Georgia, serif);
  font-style: italic; font-size: 1rem;
  color: var(--mrs-creme, #F4F1E0);
}

/* ── LE TEASER VERROUILLÉ ──────────────────────────────────────────────
   Ce qu'on montre sans le donner. Il parle du problème du décideur — ses
   vendeurs face à « c'est cher » — et pas de la curiosité générale. */
.teaser {
  margin: 20px 0 0; padding: 16px;
  border-radius: var(--mrs-rayon, 14px);
  border: 1px solid color-mix(in srgb, var(--mrs-violet, #5F2F8A) 60%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--mrs-violet, #5F2F8A) 26%, transparent), transparent);
  position: relative;
}
.teaser .etiquette { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mrs-or, #EAB939); font-weight: 700; }
.teaser h3 { font-family: var(--mrs-police-titre, Georgia, serif); font-size: 1.06rem; margin: 6px 0 8px; }
.teaser .flou {
  font-size: .9rem; color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 74%, transparent);
  /* Le flou est décoratif : le texte du teaser reste intégralement lisible
     par un lecteur d'écran, et rien d'essentiel n'y est caché. */
  filter: blur(3.2px); user-select: none;
}
.teaser .cadenas {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: .8rem; font-weight: 700; color: var(--mrs-or, #EAB939);
}

/* ── TEMPS 3 : LE TABLEAU DU DÉCIDEUR ──────────────────────────────────
   Déroulé guidé, deux ou trois révélations. Aucune navigation libre où se
   perdre : on détecte en un coup d'œil, on n'explore pas. */
.revelation { margin: 0 0 16px; opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; }
.revelation.vue { opacity: 1; transform: none; }
.bloc {
  padding: 16px; border-radius: var(--mrs-rayon, 14px);
  background: #212121; border: 1px solid var(--mrs-bord, #383838);
}
.mention-fictive {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px; margin-bottom: 12px;
  color: var(--mrs-encre, #1A1A1A); background: var(--mrs-or, #EAB939);
}
.grand-chiffre { font-family: var(--mrs-police-titre, Georgia, serif); font-size: 3rem; line-height: 1; color: var(--mrs-or, #EAB939); }
.grand-chiffre small { font-size: 1.1rem; }
.equipe { display: grid; gap: 9px; margin-top: 6px; }
.equipe .ligne { display: grid; grid-template-columns: 76px 1fr 44px; align-items: center; gap: 10px; font-size: .88rem; }
.equipe .barre { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 12%, transparent); overflow: hidden; }
.equipe .barre > i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--mrs-or, #EAB939); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.equipe .pct { text-align: right; color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 78%, transparent); font-variant-numeric: tabular-nums; }
.matrice { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.matrice i { width: 13px; height: 13px; border-radius: 3px; background: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 12%, transparent); }

/* Option A du 30/08/2026 (voir /comparaison-demo-temps3-rendu-reel-30082026) :
   rendu Temps 3 aligné sur entreprise-rapport.html -- liste, pas de barre
   nominative ; matrice en barres agrégées par carte, pas en tuiles. Les
   règles .equipe .ligne / .barre et .matrice i ci-dessus deviennent alors
   du code mort, à retirer dans la foulée si cette option est retenue. */
.equipe .ligne-reelle { display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--mrs-creme, #F4F1E0) 8%, transparent);
  font-size: .88rem; }
.equipe .ligne-reelle:last-child { border-bottom: none; }
.equipe .lr-nom { font-weight: 600; }
.equipe .lr-pct { color: var(--mrs-or, #EAB939); font-variant-numeric: tabular-nums; }
.matrice.matrice-reelle { display: block; flex-wrap: initial; }
/* Cartes NOMMÉES (Cédric, 06/09) : le nom réel de la carte prend la ligne du
   haut (il peut faire deux lignes sur un titre long, à 390px), la barre et
   le pourcentage suivent en dessous -- jamais un numéro seul comme identifiant.
   Voir arbitrage.temps3-lisibilite-matrice-vraies-donnees-06092026 pour la
   question de fond (40 lignes nommées, est-ce trop long sur un téléphone). */
.mat-ligne { display: flex; flex-direction: column; gap: 3px;
  font-size: .72rem; margin-bottom: 9px; }
.mat-nom { line-height: 1.25; opacity: .92; }
.mat-barre-row { display: flex; align-items: center; gap: 8px; }
.mat-barre { flex: 1; height: 7px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 10%, transparent); }
.mat-barre > i { display: block; height: 100%; border-radius: 999px; background: var(--mrs-or, #EAB939); }
.mat-pct { width: 34px; flex-shrink: 0; text-align: right; opacity: .8; font-variant-numeric: tabular-nums; }
.insight {
  border-left: 3px solid var(--mrs-carmin, #C8203D);
  background: color-mix(in srgb, var(--mrs-carmin, #C8203D) 11%, transparent);
  padding: 14px 16px; border-radius: var(--mrs-rayon, 14px); font-size: .97rem;
}
.insight .titre-insight { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mrs-carmin, #C8203D); font-weight: 700; margin-bottom: 6px; }

/* ── TEMPS 4 : LA CARTE BOP APTITUDE ───────────────────────────────────
   Le pic visuel de toute la démo, et il se joue ENTIÈREMENT À L'IMAGE :
   c'est le passage qui fonctionne le mieux son coupé. */
/* LE GABARIT DE CARTE A ÉTÉ RETIRÉ LE 25/08, et ses règles avec lui.
   Il définissait « .bop-carte » et « .bop-scene » — les MÊMES noms que le
   composant du produit. Les garder aurait fait combattre deux feuilles de
   style sur les mêmes classes, et la vraie carte serait sortie déformée.
   Le style vient désormais de carte-bop-aptitude.css, servi tel quel.
   CE QUE DISAIT LE COMMENTAIRE D'ORIGINE, ET POURQUOI ON NE LE SUIT PLUS :
   « les champs restent vides, la vraie carte est personnalisée à la lecture ».
   C'était juste tant qu'on montrait un gabarit. Cédric a tranché l'inverse le
   21/08 : il veut LA carte. On montre donc la vraie, remplie avec un vendeur
   de démonstration — la même convention que l'équipe du temps 3, qui est
   inventée et le dit. */
.carte-bop-hote { margin: 8px auto 14px; max-width: 420px; }

/* ── TEMPS 5 : LES DEUX PORTES ─────────────────────────────────────────
   MÊME TAILLE, MÊME RANG, CÔTE À CÔTE. Jamais l'une au-dessus de l'autre :
   la hiérarchie visuelle choisirait à la place du visiteur. Sur 390 px
   elles s'empilent — c'est la seule concession, et elles gardent alors une
   hauteur identique. */
.portes { display: grid; gap: 12px; margin: 4px 0 0; }
@media (min-width: 560px) { .portes { grid-template-columns: 1fr 1fr; } }
.porte {
  display: flex; flex-direction: column; min-height: 178px;
  padding: 18px; border-radius: var(--mrs-rayon, 14px);
  border: 1px solid var(--mrs-bord, #383838); background: #212121;
}
.porte .titre-porte { font-family: var(--mrs-police-titre, Georgia, serif); font-size: 1.16rem; margin: 0 0 6px; }
/* PLUS DE flex:1 ICI — relevé par Cédric en direct : sur la colonne achat,
   bien plus courte que le formulaire d'à côté, cette règle étirait le seul
   paragraphe disponible pour combler tout l'espace, ouvrant un grand vide
   entre le texte et le bouton. Le paragraphe garde maintenant sa hauteur
   naturelle ; ce qui reste de place se range en pied de carte, jamais au
   milieu. */
.porte .quoi { font-size: .88rem; color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 74%, transparent); margin: 0 0 14px; }
.porte.rappel { border-color: color-mix(in srgb, var(--mrs-or, #EAB939) 46%, transparent); }
/* "porte achat" DEVIENT "porte decouverte" — 06/09/2026 (mandat aligner-
   la-porte-licence-equipe-sur-la-boutique-06092026). Le carmin (couleur
   d'alerte/urgence d'achat ailleurs sur la plateforme) est retiré : cette
   porte ne mène plus à un achat, la garder aurait fait mentir la couleur.
   Bordure neutre, comme une carte d'information — "Être rappelé" reste la
   SEULE porte à porter un accent de couleur, donc la seule à attirer
   l'œil en premier. */
.porte.decouverte { border-color: var(--mrs-bord, #383838); }
/* LE REPÈRE DE PRIX — même texte, même montant que l'ancienne mention
   « .mini » sous le bouton, seulement remonté et mis en valeur (encadré,
   comme les champs de saisie de la colonne d'à côté) pour redonner à cette
   colonne une densité comparable, sans rien ajouter au texte. BORDURE
   REPASSÉE EN NEUTRE le 06/09/2026 (même raison que .porte.decouverte
   ci-dessus) — le prix reste vrai, il n'annonce plus une occasion à saisir. */
.porte-prix {
  margin: 0 0 14px; padding: 10px 13px;
  border: 1px solid var(--mrs-bord, #383838);
  border-radius: var(--mrs-rayon, 14px); background: #1A1A1A;
  font-family: var(--mrs-police-titre, Georgia, serif); font-size: 1.2rem; font-weight: 700;
  color: var(--mrs-or, #EAB939);
}
.porte-prix span {
  display: block; margin-top: 2px;
  font-family: var(--mrs-police, 'Atkinson Hyperlegible', system-ui, sans-serif);
  font-weight: 400; font-size: .78rem;
  color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 74%, transparent);
}

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; padding: 13px 18px;
  border-radius: var(--mrs-rayon, 14px); border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  text-decoration: none; text-align: center;
}
.bouton.or     { background: var(--mrs-or, #EAB939); color: var(--mrs-encre, #1A1A1A); }
.bouton.carmin { background: var(--mrs-carmin, #C8203D); color: var(--mrs-creme, #F4F1E0); }
.bouton.fantome { background: transparent; color: var(--mrs-or, #EAB939); border-color: var(--mrs-or, #EAB939); }
.bouton:disabled { opacity: .55; cursor: default; }

.champ-saisie { display: block; margin: 0 0 10px; }
.champ-saisie span { display: block; font-size: .78rem; margin-bottom: 5px; color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 74%, transparent); }
.champ-saisie input {
  width: 100%; min-height: 46px; padding: 11px 13px; font: inherit; font-size: 1rem;
  border-radius: var(--mrs-rayon, 14px); border: 1px solid var(--mrs-bord, #383838);
  background: #1A1A1A; color: var(--mrs-creme, #F4F1E0);
}
.champ-saisie input:focus { outline: 2px solid var(--mrs-or, #EAB939); outline-offset: 1px; }
/* LA CASE D'ACCORD. Elle n'est JAMAIS pré-cochée — c'est la règle, et une
   case pré-cochée ne vaut pas consentement. Sa cible tactile fait 44 px de
   haut comme partout ailleurs : au salon, on coche avec un pouce, debout.
   Le texte reste au rang des mentions (.mini) et non des libellés de champ :
   il informe, il ne demande pas une saisie de plus. */
.champ-accord {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 2px 0 12px; min-height: 44px; padding: 4px 0; cursor: pointer;
}
.champ-accord input {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0;
  accent-color: var(--mrs-or, #EAB939); cursor: pointer;
}
.champ-accord span {
  font-size: .78rem; line-height: 1.45;
  color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 74%, transparent);
}
.champ-accord input:focus-visible { outline: 2px solid var(--mrs-or, #EAB939); outline-offset: 2px; }

.mini { font-size: .74rem; color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 56%, transparent); }

.actions { margin-top: 20px; display: grid; gap: 10px; }
.pied { margin-top: 26px; text-align: center; font-size: .74rem; color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 46%, transparent); }
/* Le lien du pied est une CIBLE TACTILE comme les autres : 14 px de haut sur
   un téléphone, c'est une cible qu'on rate. On lui donne sa surface au lieu
   d'agrandir le texte, qui déséquilibrerait le pied. */
.pied a {
  color: color-mix(in srgb, var(--mrs-creme, #F4F1E0) 70%, transparent);
  display: inline-block; padding: 15px 8px; min-height: 44px;
}

/* Un focus visible partout : au salon on navigue parfois au clavier d'un
   poste, et un anneau invisible est un piège. */
:focus-visible { outline: 2px solid var(--mrs-or, #EAB939); outline-offset: 2px; border-radius: 6px; }

/* Qui demande moins de mouvement en reçoit moins. La démo doit rester
   entièrement jouable sans une seule animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .carte { transition: none; }
}

/* ── LE BUREAU N'EST QU'UN ÉLARGISSEMENT ───────────────────────────────
   Rien n'y est réorganisé : la démo est pensée pour un décideur sur son
   téléphone, et l'écran large lui donne juste plus d'air.
   ⚠ « PLUS D'AIR » ÉTAIT UN CHIFFRE FIXE, PAS UNE RÈGLE. max-width:720px
   ne bougeait plus au-delà de 900px : mesuré (Puppeteer réel, avant/après
   identiques sur c25392b1 et sur ce commit — défaut pré-existant, pas une
   régression de cette bascule) 720px de large, marges de 280px à 1280px
   et 600px à 1920px de chaque côté. Vu par Cédric, signalé « moche ».
   CLAMP, PAS UN SECOND PALIER FIXE : la colonne suit désormais la largeur
   de l'écran (82vw) au lieu d'être plafonnée une fois pour toutes, avec
   un plancher qui raccorde sans saut au 720px du bord bas (900px de
   large : 82vw = 738px) et un plafond à 1200px qui garde des lignes de
   texte lisibles sur un très grand écran — un plein-large edge-to-edge
   dégraderait la lecture des sept phrases de l'accueil et de la carte du
   temps 2, ce que personne n'a demandé. Rien sous 900px n'est touché :
   390px, la condition de référence du salon, est strictement inchangé. */
@media (min-width: 900px) {
  .enveloppe { max-width: clamp(720px, 82vw, 1200px); padding-bottom: 60px; }
  h1 { font-size: 2.1rem; }
  .tete img { height: 42px; }
  .carte { aspect-ratio: 16 / 10; }
  .carte .avant .corps { font-size: 1rem; }
  /* Temps 4 : la colonne s'élargit ici (clamp ci-dessus), et
     .carte-bop-hote { margin: 8px auto 14px } centre alors la carte dans
     cette largeur pendant que le sur-titre, le h1 et le badge restent au
     bord gauche — décalage d'axe entre le texte et l'objet qu'il présente.
     On aligne la carte sur le même bord que le texte plutôt que de
     centrer le texte, pour ne pas désaxer à son tour le paragraphe .dit
     qui suit la carte. Sous 900px l'auto ne change déjà rien (carte
     quasi pleine largeur de la colonne) : rien n'y est touché. */
  #temps-4 .carte-bop-hote { margin-left: 0; margin-right: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   L'INTERACTION INCARNÉE — l'accueil de la mécanique premium
   Le bloc ne fait que MÉNAGER LA PLACE : l'habillage de la mécanique vient
   de interactions.css, la même feuille que la plateforme. Rien n'est
   redessiné ici, sans quoi la démo montrerait une imitation et finirait par
   en diverger.
   ═══════════════════════════════════════════════════════════════════════ */
.bloc-mecanique {
  margin: 26px 0 0;
  animation: mecanique-vient 420ms ease both;
}
.bloc-mecanique #mecanique-amorce {
  margin: 0 0 14px;
  font-weight: 600;
  color: var(--mrs-or, #EAB939);
}
@keyframes mecanique-vient {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* LE MOUVEMENT RÉDUIT RETIRE LE TRAJET, JAMAIS L'INFORMATION. */
@media (prefers-reduced-motion: reduce) {
  .bloc-mecanique { animation: none; }
}

/* =====================================================================
   LE TEXTE QUI SE MARQUE AU FIL DE LA LECTURE — 24/08/2026.

   ╔═══ CE QUE CÉDRIC A DEMANDÉ, ET C'EST DOUBLE ═══╗
   « il faudrait que le texte soit marqué où la lecture vocale en est, et
   descende automatiquement en visuel jusqu'à la fin. ça rendrait un effet
   de vivant à une page statique. » ET, indissociable : la démo doit rester
   comprise SON COUPÉ, pour un visiteur debout dans le bruit d'un salon.
   LES DEUX EXIGENCES VONT ENSEMBLE. Aucune ne s'efface.

   ╔═══ D'OÙ LE PARTI PRIS ═══╗
   LE MARQUAGE NE DÉPEND PAS DU SON. Il se joue sur une horloge, que cette
   horloge soit celle de l'audio (son allumé) ou une simple horloge de
   page (son coupé). LE CAS « SON COUPÉ » EST DONC LE CAS NORMAL, pas un
   repli : c'est lui qui tourne par défaut, et il est complet.
   Rien d'essentiel ne vit dans l'audio — les sept phrases sont écrites,
   entières, et le resteraient si le fichier disparaissait.

   ╔═══ POURQUOI ON N'ÉTEINT PAS LE TEXTE NON LU ═══╗
   Première version essayée puis ABANDONNÉE : les phrases pas encore lues
   à 35 % d'opacité. Ça donnait un karaoké, et surtout ça rendait ILLISIBLE
   ce qu'un visiteur pressé veut faire — lire les sept phrases d'un coup
   sans attendre quarante secondes. Le texte non lu reste donc PLEINEMENT
   lisible ; c'est la phrase EN COURS qu'on distingue, pas les autres
   qu'on efface.
   ===================================================================== */

.lecture-commande {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 0;
}
.lecture-bouton, .lecture-son {
  font: inherit; font-size: .88rem; line-height: 1;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--mrs-or, #EAB939) 55%, transparent);
  background: color-mix(in srgb, var(--mrs-or, #EAB939) 12%, transparent);
  color: var(--mrs-creme, #F4F1E0);
  transition: background .18s ease, border-color .18s ease;
}
.lecture-bouton:hover, .lecture-son:hover {
  background: color-mix(in srgb, var(--mrs-or, #EAB939) 22%, transparent);
}
.lecture-bouton:focus-visible, .lecture-son:focus-visible {
  outline: 2px solid var(--mrs-or, #EAB939); outline-offset: 2px;
}
.lecture-son { display: inline-flex; align-items: center; gap: 7px; }
/* L'ÉTAT SE VOIT SANS LIRE : allumé, le bouton se remplit. Un bouton dont
   l'état ne tient qu'au mot se rate d'un coup d'œil, et un salon ne se
   parcourt qu'en coups d'œil. */
.lecture-son[aria-pressed="true"] {
  background: var(--mrs-or, #EAB939);
  border-color: var(--mrs-or, #EAB939);
  color: #191218;
}
.lecture-note { margin: 0; font-size: .76rem; opacity: .6; flex-basis: 100%; }

/* ── LE MARQUAGE ────────────────────────────────────────────────────── */
.sous-titre p {
  /* Le filet de gauche est posé en transparent DÈS LE DÉPART : sans lui,
     l'apparition de la barre décalerait le texte de 3 px à chaque phrase,
     et la page tremblerait pendant toute la lecture. */
  border-left: 3px solid transparent;
  margin-left: -14px; padding-left: 11px;
  border-radius: 0 6px 6px 0;
  transition: background-color .28s ease, border-color .28s ease;
}
.sous-titre p.dite {
  /* Déjà lue : elle reste PLEINEMENT lisible, elle porte seulement une
     marque discrète de passage. */
  border-left-color: color-mix(in srgb, var(--mrs-or, #EAB939) 35%, transparent);
}
.sous-titre p.en-cours {
  border-left-color: var(--mrs-or, #EAB939);
  background: color-mix(in srgb, var(--mrs-or, #EAB939) 10%, transparent);
}

/* CE QU'UN ÉCRAN QUI REFUSE LE MOUVEMENT REÇOIT : le marquage, sans aucune
   transition ni défilement animé. L'information reste entière ; c'est le
   mouvement qui disparaît, pas le sens. */
@media (prefers-reduced-motion: reduce) {
  .sous-titre p { transition: none; }
}