/* [HOME-BENEFIT-FLASHCARDS-CINEMA-20260919] À gauche de « génération de
   flashcards » : une scène cinématique SANS cadre téléphone, en un seul
   travelling fluide, en boucle. Un cours de topologie ultra réaliste en
   PDF, sans aucun encadré, se révèle en s'affinant (la caméra recule et
   fait le point) : un trait noir le lit de haut en bas pendant que trois
   passages se surlignent en gris neutre, puis chaque passage devient une
   flashcard et le cours s'efface ; un grand mur monochrome de seize fiches
   apparaît, questions au recto, et ondule comme une vague, puis trois
   séries mettent en flou toutes les cartes hors catégorie (définitions,
   théorèmes, méthodes) et plongent sur une carte nette en travelling
   continu, sans recul entre les séries — le cadre coupe net les bords
   zoomés — et chaque fiche se retourne sur sa réponse noire jusqu'à 100%
   de maîtrise avant que les cartes s'effacent en cascade et le fondu.
   Tons : noir, blanc, transparent — aucune autre couleur. La machine à
   états vit dans benefit-flashcards.js et pilote data-act (pdf, read,
   lift, wall, focus-def, focus-thm, focus-met, mastery, outro) ; les
   positions des cartes passent par des variables CSS (--x, --y, --s).
   Les maths sont en vrai HTML (<sub>/<sup>, jamais de caractères
   souscrits Unicode qui manquent dans les polices). */

/* Le cadre coupe net : le zoom déborde, ses bords sont rognés au lieu
   d'envahir la page sous le bloc. */
.benefit-fc-stage {
  flex: 0 1 600px;
  min-width: 0;
  display: flex;
  justify-content: center;
  margin: 0;
  overflow: clip;
}

/* La scène remplace le téléphone réduit : transparente, les éléments y
   flottent directement sur le fond blanc de la page. */
.benefit-fc-scene {
  position: relative;
  width: min(100%, 600px);
  height: 540px;
  overflow: clip;
  color: #000;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  transition:
    opacity 600ms ease,
    transform 1400ms ease;
}

/* Fin de boucle : fondu de sortie avant le nouveau cycle. */
.benefit-fc-scene.is-fading {
  opacity: 0;
}

/* Zoom de série : plongée sur la carte nette (décalages calculés par le
   JS depuis sa case). D'une série à l'autre, la caméra voyage sans
   reculer : le travelling reste continu. */
.benefit-fc-scene.is-zoomed[data-act] {
  transform: translate(var(--zx, 0px), var(--zy, 0px)) scale(var(--zs, 1));
}

/* Les indices/exposants maths : vrai HTML, chasse resserrée. */
.benefit-fc-course sub,
.benefit-fc-course sup,
.benefit-fc-face sub,
.benefit-fc-face sup {
  font-size: 0.72em;
  line-height: 0;
}

/* ---------------- Le cours ultra réaliste ---------------- */

/* Un vrai cours PDF, seul sujet de l'ouverture : texte libre sans aucun
   encadré, grandes marges, typographie généreuse qui se lit comme un
   imprimé. L'ouverture le révèle en s'affinant : la caméra recule et fait
   le point. Il s'efface quand le mur apparaît. */
.benefit-fc-course {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 60px;
  width: 320px;
  height: 420px;
  padding: 20px 22px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transform: translate(-50%, 0) scale(1.08);
  filter: blur(3px);
  transition:
    opacity 800ms ease,
    transform 2500ms ease,
    filter 2500ms ease;
}

.benefit-fc-scene[data-act="pdf"] .benefit-fc-course,
.benefit-fc-scene[data-act="read"] .benefit-fc-course,
.benefit-fc-scene[data-act="lift"] .benefit-fc-course {
  transform: translate(-50%, 0) scale(1);
  filter: blur(0);
}

.benefit-fc-scene[data-act="wall"] .benefit-fc-course,
.benefit-fc-scene[data-act="focus-def"] .benefit-fc-course,
.benefit-fc-scene[data-act="focus-thm"] .benefit-fc-course,
.benefit-fc-scene[data-act="focus-met"] .benefit-fc-course,
.benefit-fc-scene[data-act="mastery"] .benefit-fc-course,
.benefit-fc-scene[data-act="outro"] .benefit-fc-course {
  opacity: 0;
  transform: translate(-50%, 0) scale(0.9);
}

/* [HOME-ANIM-REPOS-COMPLET-20260930] Repos survol-arret : le cours
   est net d'emblee (pas de re-affinage a chaque retour au repos). */
.benefit-fc-scene.is-static .benefit-fc-course {
  transition: none;
}

.benefit-fc-doc-sec {
  margin: 10px 0 5px;
  font-size: 12px;
  font-weight: 800;
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

.benefit-fc-doc-sec:first-child {
  margin-top: 0;
}

/* Définitions sans encadré : le texte seul, comme le reste de la page. */
.benefit-fc-doc-def {
  margin: 0 0 7px;
  font-family: Georgia, "Gelasio", "Times New Roman", serif;
  font-size: 11px;
  line-height: 1.55;
  text-align: justify;
  hyphens: auto;
}

.benefit-fc-doc-text {
  margin: 0 0 7px;
  font-family: Georgia, "Gelasio", "Times New Roman", serif;
  font-size: 11px;
  line-height: 1.55;
  text-align: justify;
  hyphens: auto;
}

/* Équation centrée, comme un environnement display math. */
.benefit-fc-doc-display {
  margin: 3px 0 7px;
  font-family: Georgia, "Gelasio", "Times New Roman", serif;
  font-size: 11.5px;
  line-height: 1.55;
  text-align: center;
}

/* Théorème façon LaTeX : chapeau gras, corps en italique. */
.benefit-fc-doc-thm {
  margin: 0 0 7px;
  font-family: Georgia, "Gelasio", "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
  line-height: 1.55;
  text-align: justify;
  hyphens: auto;
}

.benefit-fc-doc-thm strong {
  font-style: normal;
}

.benefit-fc-doc-proof {
  margin: 0 0 7px;
  font-family: Georgia, "Gelasio", "Times New Roman", serif;
  font-size: 11px;
  line-height: 1.55;
  text-align: justify;
  hyphens: auto;
}

/* Le tombeau ■, ferré à droite comme un \qedhere. */
.benefit-fc-doc-qed {
  float: right;
  font-style: normal;
}

/* Le trait de lecture : un filet noir qui descend lentement la page
   pendant que les passages se surlignent à son passage, avec une douce
   traîne d'ombre. */
.benefit-fc-rule {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 80px;
  width: 320px;
  height: 2px;
  margin-left: -160px;
  background: #000;
  box-shadow: 0 10px 18px -4px rgba(0, 0, 0, 0.35);
  opacity: 0;
}

.benefit-fc-scene[data-act="read"] .benefit-fc-rule {
  opacity: 1;
  animation: benefit-fc-rule-sweep 4200ms linear forwards;
}

@keyframes benefit-fc-rule-sweep {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(320px);
  }
}

/* Passages sources : le surlignage gris neutre et transparent se dessine
   au passage du trait — on voit le texte au travers. Le fond transparent
   neutralise le jaune natif de <mark>. */
.benefit-fc-hl {
  padding: 1px 2px;
  border-radius: 2px;
  background-color: transparent;
  background-image: linear-gradient(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.14));
  background-repeat: no-repeat;
  background-position: 0 55%;
  background-size: 0% 92%;
  color: inherit;
  transition:
    background-size 600ms ease,
    transform 700ms ease-in,
    opacity 700ms ease-in;
}

.benefit-fc-scene[data-read="1"] .benefit-fc-hl[data-hl="1"],
.benefit-fc-scene[data-read="2"] .benefit-fc-hl[data-hl="1"],
.benefit-fc-scene[data-read="3"] .benefit-fc-hl[data-hl="1"],
.benefit-fc-scene[data-read="2"] .benefit-fc-hl[data-hl="2"],
.benefit-fc-scene[data-read="3"] .benefit-fc-hl[data-hl="2"],
.benefit-fc-scene[data-read="3"] .benefit-fc-hl[data-hl="3"] {
  background-size: 100% 92%;
}

/* Chaque passage devient sa flashcard : le surlignage se contracte et
   s'évanouit pendant que la carte naît dessus. */
.benefit-fc-scene[data-lift="1"] .benefit-fc-hl[data-hl="1"],
.benefit-fc-scene[data-lift="2"] .benefit-fc-hl[data-hl="1"],
.benefit-fc-scene[data-lift="3"] .benefit-fc-hl[data-hl="1"],
.benefit-fc-scene[data-lift="2"] .benefit-fc-hl[data-hl="2"],
.benefit-fc-scene[data-lift="3"] .benefit-fc-hl[data-hl="2"],
.benefit-fc-scene[data-lift="3"] .benefit-fc-hl[data-hl="3"] {
  display: inline-block;
  background-size: 0% 92%;
  transform: scale(0);
  opacity: 0;
}

/* ---------------- Le grand mur de seize ---------------- */

/* v27 : sur téléphone, deux colonnes de huit mini-fiches paysage
   (voir la media query) — mêmes actes, mêmes timings.
   v28 : fiches espacées, pastilles réduites. */
/* Quatre colonnes de quatre fiches, toutes à l'écran d'un coup : aucun
   défilement, le mur ondule comme une vague, les séries se contentent de
   flouter et de voyager au zoom, chaque fiche se retourne sur sa réponse
   puis toutes s'effacent en cascade. Noir, blanc, transparent : chaque
   pastille a son traitement monochrome, tout le contenu s'affiche sans
   rien tronquer — la réponse n'est jamais au recto. */
.benefit-fc-cards {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.benefit-fc-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130px;
  height: 112px;
  margin: -56px 0 0 -65px;
  perspective: 600px;
  opacity: 0;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--s, 0.2));
  transition:
    transform 1100ms cubic-bezier(0.22, 0.8, 0.24, 1),
    opacity 600ms ease,
    filter 800ms ease;
}

.benefit-fc-card.is-in {
  opacity: 1;
}

/* Le pivot 3D : la fiche tourne sur elle-même pour révéler son verso. */
.benefit-fc-face {
  position: absolute;
  inset: 0;
  color: #000;
  transform-style: preserve-3d;
  transition: transform 600ms ease;
}

/* Fiche validée : elle se retourne sur sa réponse noire. */
.benefit-fc-card.is-done .benefit-fc-face {
  transform: rotateY(180deg);
}

/* Recto et verso : la fiche blanche porte la question, le verso noir la
   réponse — pivoté de 180°, seule la face tournée vers la caméra se voit. */
.benefit-fc-front,
.benefit-fc-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 10px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: box-shadow 800ms ease;
}

/* Le recto blanc garde son reflet haut ; le verso noir reste franc
   jusqu'au bord, sans reflet ni bordure claire. */
.benefit-fc-front {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    8px 16px 28px -10px rgba(0, 0, 0, 0.3);
}

.benefit-fc-back {
  justify-content: center;
  transform: rotateY(180deg);
  border-color: #000;
  background: #000;
  box-shadow: 8px 16px 28px -10px rgba(0, 0, 0, 0.3);
  color: #fff;
}

/* En vol, la carte décolle : son ombre s'allonge puis se repose quand
   elle rejoint le mur. Le verso noir garde son ombre seule, sans le
   reflet blanc du recto. */
.benefit-fc-card.is-flying .benefit-fc-front {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    18px 34px 44px -12px rgba(0, 0, 0, 0.45);
}

.benefit-fc-card.is-flying .benefit-fc-back {
  box-shadow: 18px 34px 44px -12px rgba(0, 0, 0, 0.45);
}

/* Le ✓ éclôt sur le verso pendant le retournement (posé à gauche du
   verso : le pivot le ramène en haut à droite côté caméra). */
.benefit-fc-back::after {
  content: "✓";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  transform: scale(0);
  transition: transform 280ms ease;
}

.benefit-fc-card.is-done .benefit-fc-back::after {
  transform: scale(1);
}

.benefit-fc-card-tag {
  padding: 2px 8px;
  border-radius: 999px;
  color: #000;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* Pastilles monochromes : définitions en noir plein, théorèmes en
   contour noir, méthodes en voile noir transparent. */
.benefit-fc-card-tag.is-def {
  background: #000;
  color: #fff;
}

.benefit-fc-card-tag.is-thm {
  border: 1px solid #000;
  background: #fff;
  color: #000;
}

.benefit-fc-card-tag.is-met {
  background: rgba(0, 0, 0, 0.08);
  color: #000;
}

.benefit-fc-card-q {
  margin: 0;
  color: #000;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.benefit-fc-card-a {
  margin: 0;
  color: #fff;
  font-family: Georgia, "Gelasio", "Times New Roman", serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

/* Séries de focus : tout ce qui n'est pas de la catégorie s'efface en
   flou pendant que la caméra voyage au zoom sur une carte nette. */
.benefit-fc-scene[data-act="focus-def"] .benefit-fc-card:not(.cat-def),
.benefit-fc-scene[data-act="focus-thm"] .benefit-fc-card:not(.cat-thm),
.benefit-fc-scene[data-act="focus-met"] .benefit-fc-card:not(.cat-met) {
  filter: blur(3px);
  opacity: 0.3;
}

/* [HOME-FC-MASTERY-TOP-20260922] Jauge de maîtrise : pastille dépolie
   en haut de la scène (demande : le « Maîtrise 100% » en haut, pas en
   bas), visible pendant l'acte mastery — la barre monte à 100%. */

.benefit-fc-mastery {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 18px;
  width: 240px;
  padding: 12px 18px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 500ms ease;
  pointer-events: none;
}

.benefit-fc-scene[data-act="mastery"] .benefit-fc-mastery {
  opacity: 1;
}

.benefit-fc-mastery-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.benefit-fc-mastery-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: #000;
  transition: width 120ms linear;
}

.benefit-fc-mastery-label {
  margin: 8px 0 0;
  color: #000;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

/* ---------------- Profondeur ---------------- */

/* no-vignette-1 : pas de vignette. La scène flotte transparente sur le fond blanc
   de la page : le moindre assombrissement aux bords (surtout en bas)
   dessine une coupure nette avec le fond. Le bas reste donc aussi clair
   que le haut, sur ordinateur comme sur téléphone. */

/* ---------------- Écologie de la page ---------------- */

/* Sous 680px la rangée redevient une colonne : la scène passe au-dessus
   de la carte, en largeur réduite. v27 : le mur passe en deux colonnes
   de huit mini-fiches paysage ajustées au cadre — fini l’empilement
   du 4×4 resserré. v28 : fiches 140×64 espacées (gouttières 12×10)
   dans le cadre 340×600, pastilles réduites. */
@media (max-width: 680px) {
  .benefit-fc-stage {
    flex-basis: auto;
    width: min(100%, 340px);
    margin-inline: auto;
    overflow: clip;
  }

  .benefit-fc-scene {
    height: 600px;
  }

  /* [HOME-BENEFIT-ANIM-TITLE-GAP-20260928] Sur téléphone uniquement,
     le cours et son trait de lecture remontent de 52 px : l’animation
     touche presque son titre. Le balayage (320 px) reste dans la
     page (8 + 420) et dans la scène (600 px). */
  .benefit-fc-course {
    top: 8px;
  }

  .benefit-fc-rule {
    top: 28px;
  }

  /* Mini-fiches paysage espacées : pastille + question au recto,
     pastille réduite + réponse centrée au verso — mêmes tons,
     mêmes actes, mêmes timings. */
  .benefit-fc-card {
    width: 140px;
    height: 64px;
    margin: -32px 0 0 -70px;
  }

  .benefit-fc-front {
    padding: 8px;
    gap: 4px;
  }

  .benefit-fc-back {
    padding: 6px;
    gap: 3px;
  }

  .benefit-fc-card-tag {
    padding: 1px 6px;
    font-size: 10px;
  }

  .benefit-fc-card-q {
    font-size: 11px;
  }

  /* [HOME-FC-CHECK-MOBILE-20260930] Sur téléphone uniquement, le rond
     blanc coché du verso se réduit avec sa coche (mêmes proportions
     que la pastille 14/9) : à 20 px il chevauchait le texte des
     mini-fiches 140×64. Bureau inchangé (20 px/12 px). */
  .benefit-fc-back::after {
    top: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    font-size: 9px;
    line-height: 14px;
  }

  .benefit-fc-check {
    width: 14px;
    height: 14px;
  }

  .benefit-fc-check::before {
    font-size: 9px;
  }

  .benefit-fc-card-a {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .benefit-fc-scene,
  .benefit-fc-course,
  .benefit-fc-hl,
  .benefit-fc-card,
  .benefit-fc-face,
  .benefit-fc-front,
  .benefit-fc-back,
  .benefit-fc-mastery,
  .benefit-fc-mastery-fill,
  .benefit-fc-back::after,
  .benefit-fc-scene.is-static,
  .benefit-fc-scene.is-static .benefit-fc-card {
    transition: none;
  }

  .benefit-fc-scene[data-act="read"] .benefit-fc-rule {
    animation: none;
  }
}