/* =====================================================================
   MesRevisions.com — habillage du cours animé, chapitre par chapitre
   ---------------------------------------------------------------------
   Le lecteur s'ouvre À L'INTÉRIEUR du chapitre, juste sous son titre.
   Il ne prend la place de rien : le cours écrit reste dessous, l'élève
   referme et retrouve sa lecture au même endroit.

   Les couleurs viennent de style.css. Chaque type de scène reprend la
   teinte de l'encadré correspondant dans le cours, pour que l'élève
   reconnaisse « une définition », « une méthode » ou « un exemple » sans
   avoir à lire l'étiquette.
   ===================================================================== */

/* ---------------------------------------------------------- le bouton */
.anime-ouvrir{
  display:flex;align-items:center;gap:10px;width:100%;
  margin:0 0 18px;padding:11px 15px;
  background:var(--g-50);border:1.5px solid var(--g-200);border-radius:12px;
  color:var(--g-800);font:inherit;font-size:.87rem;font-weight:700;
  cursor:pointer;text-align:left;transition:background .15s,border-color .15s;
}
.anime-ouvrir:hover{background:var(--g-100);border-color:var(--g-400)}
.anime-ouvrir .ico{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--g-700);color:#fff;display:grid;place-items:center;font-size:.7rem;
}
.anime-ouvrir .anime-duree{
  margin-left:auto;font-weight:600;font-size:.74rem;color:var(--muted);
  background:#fff;border-radius:999px;padding:3px 10px;
}

/* --------------------------------------------------------- la fenêtre */
/* Le cours animé s'ouvre dans une fenêtre qui occupe un quart de l'écran,
   posée en bas à gauche — Orion garde le coin droit. Elle ne bloque pas la
   page : l'élève peut continuer à lire le chapitre, faire défiler, prendre
   ses notes pendant que le cours se joue à côté. Un bouton l'agrandit pour
   ceux qui préfèrent regarder en grand.

   « position:fixed » se rapporte à la fenêtre du navigateur : le cadre
   couvre l'écran quel que soit l'endroit où l'on avait défilé, mais il
   laisse passer les clics (« pointer-events:none »), si bien que seule la
   fenêtre elle-même intercepte la souris. */
.anime-fond{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:16px;pointer-events:none;
}
/* Un quart de l'écran : la moitié de la largeur par la moitié de la
   hauteur. On raisonne en pourcentage du cadre, et non en vw/vh : le site
   est rendu à 90 % (html{zoom:.9}), et les unités de fenêtre seraient
   mises à l'échelle elles aussi. Le pourcentage, lui, se rapporte au
   cadre, qui couvre déjà l'écran exactement. */
.anime-zone{
  pointer-events:auto;
  width:50%;height:50%;
  min-width:330px;min-height:290px;
  display:flex;flex-direction:column;
  border:2px solid var(--g-200);border-radius:14px;
  background:#fff;overflow:hidden;
  box-shadow:0 26px 64px -18px rgba(43,33,24,.55);
}
/* En petit format, on resserre un peu : la place est comptée. */
.anime-fond:not(.anime-grand) .anime-scene{padding:14px}
.anime-fond:not(.anime-grand) .anime-ligne{font-size:.87rem;line-height:1.55}
.anime-fond:not(.anime-grand) .anime-figure{width:190px}
.anime-fond:not(.anime-grand) .anime-quiz{padding:12px 14px 14px}

/* Format agrandi : là, on revient à une vraie fenêtre centrée, et le fond
   s'assombrit pour concentrer l'attention sur le cours. */
.anime-fond.anime-grand{
  align-items:center;justify-content:center;
  padding:26px 20px;background:rgba(43,33,24,.55);pointer-events:auto;
}
.anime-fond.anime-grand .anime-zone{
  width:100%;max-width:860px;height:100%;max-height:100%;
}

/* Seule la scène défile : l'en-tête et les commandes restent visibles,
   même sur un chapitre qui se termine par trois questions. */
/* La fenêtre a maintenant une hauteur fixe : la scène doit occuper la
   place restante, sinon les commandes flottent au milieu et un grand vide
   blanc s'ouvre en dessous. « min-height:0 » est indispensable pour qu'un
   élément flexible accepte de rétrécir sous la taille de son contenu et
   défile au lieu de déborder. */
.anime-zone > .anime-scene,
.anime-zone > .anime-quiz{flex:1 1 auto;min-height:0;overflow-y:auto}
.anime-zone > .anime-quiz[hidden]{display:none}
.anime-zone > .anime-tete,
.anime-zone > .anime-barre,
.anime-zone > .anime-commandes{flex:none}

.anime-tete{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;background:var(--g-700);color:#fff;
}
.anime-pastille{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:.64rem;
}
.anime-titre{flex:1;min-width:0;font-weight:800;font-size:.9rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anime-tete button{
  flex:none;border:0;background:rgba(255,255,255,.16);color:#fff;
  width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:.8rem;line-height:1;
}
.anime-tete button:hover{background:rgba(255,255,255,.3)}
.anime-voix.muet{opacity:.55}

/* ----------------------------------------------------------- la scène */
.anime-scene{display:flex;gap:18px;padding:18px;align-items:flex-start}

/* ------------------------------------------------- le mouvement -----
   Un cours animé qui se contente d'afficher du texte fixe se regarde
   comme une page. Trois mouvements suffisent à lui donner vie, et aucun
   ne coûte quoi que ce soit au serveur : la scène entre en glissant, la
   ligne prononcée apparaît et se surligne au fil de la voix, et la
   figure se dessine trait par trait, comme au tableau.

   Tout est en CSS ou en animations du navigateur : rien n'est calculé
   image par image, rien n'est téléchargé. */
@keyframes anime-entre-scene{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes anime-entre-ligne{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes anime-entre-etiq {from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes anime-entre-num  {from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes anime-entre-fig  {from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes anime-bat        {0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}

.anime-scene.entre{animation:anime-entre-scene .38s cubic-bezier(.2,.8,.3,1) both}
.anime-etiquette.entre{animation:anime-entre-etiq .34s cubic-bezier(.2,1,.3,1) both}
.anime-figure.entre{animation:anime-entre-fig .45s cubic-bezier(.2,.8,.3,1) both}
.anime-ligne.entre{animation:anime-entre-ligne .40s cubic-bezier(.2,.8,.3,1) both}
.anime-ligne.entre .anime-num{animation:anime-entre-num .38s cubic-bezier(.2,1.5,.4,1) .08s both}

/* La pastille de l'en-tête bat doucement pendant la lecture : d'un coup
   d'oeil, l'élève voit que le cours tourne, même s'il lit à côté. */
.anime-zone.joue .anime-pastille{animation:anime-bat 1.9s ease-in-out infinite}

.anime-texte{flex:1;min-width:0}

.anime-etiquette{
  display:inline-block;font-size:.68rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;padding:4px 11px;border-radius:999px;margin-bottom:11px;
  background:var(--o-100);color:var(--o-700);
}
/* chaque type de scène reprend la couleur de son encadré dans le cours */
.anime-etiquette.e-def{background:var(--o-100);color:var(--o-800)}
.anime-etiquette.e-meth{background:#eef4fd;color:#2f5a86}
.anime-etiquette.e-ex{background:#f7f3fb;color:#5f4578}
.anime-etiquette.e-attention{background:#fdf3ee;color:#a8431a}
.anime-etiquette.e-astuce{background:var(--g-100);color:var(--g-700)}
.anime-etiquette.e-retenir{background:var(--g-700);color:#fff}
/* Les encadrés propres aux autres matières : l'histoire a ses dates et
   ses personnages, les sciences leurs expériences. Chacun sa teinte, pour
   que l'élève reconnaisse la nature de ce qu'il lit avant même de lire. */
.anime-etiquette.e-vocab{background:#f4f3fa;color:#4a4180}
.anime-etiquette.e-date{background:#fdf6e9;color:#7a5a1c}
.anime-etiquette.e-portrait{background:#fbf1ec;color:#8c421a}
.anime-etiquette.e-source{background:#eef4fd;color:#2f5a86}
.anime-etiquette.e-exp{background:var(--g-100);color:var(--g-800)}
.anime-etiquette.e-remarque{background:#f6f3f0;color:#7c6a5f}

/* Le surlignage se dépose de gauche à droite pendant que la voix lit :
   « background-size » passe de 0 à 100 % de la largeur. C'est une
   transition, pas une animation, pour ne pas entrer en conflit avec
   l'entrée de la ligne, qui se joue au même instant sur d'autres
   propriétés. Le fond est un dégradé d'une seule couleur : c'est le seul
   moyen d'obtenir un aplat dont on puisse animer la largeur. */
.anime-ligne{
  position:relative;font-size:.92rem;line-height:1.6;color:var(--muted);
  margin:0 0 7px;padding:4px 9px;border-radius:9px;
  background:linear-gradient(var(--g-50),var(--g-50)) left center/0 100% no-repeat;
  transition:color .25s,opacity .25s,background-size .75s ease-out;
}
.anime-ligne.vive{color:var(--ink);font-weight:500;background-size:100% 100%}
.anime-ligne:not(.vive){opacity:.62}
.anime-num{
  display:inline-grid;place-items:center;width:21px;height:21px;margin-right:9px;
  border-radius:50%;background:var(--g-100);color:var(--g-700);
  font-size:.7rem;font-weight:800;vertical-align:1px;
}
.anime-ligne.vive .anime-num{background:var(--g-700);color:#fff}

/* ---------------------------------------------------------- la figure */
.anime-figure{
  flex:none;width:250px;background:var(--o-25,#fffcfa);
  border:1px solid var(--o-100);border-radius:11px;padding:9px;
}
.anime-figure svg{width:100%;height:auto;display:block}

/* ---------------------------------------------- les questions de fin */
.anime-quiz{padding:0 18px 18px;border-top:1px dashed var(--g-200);margin-top:4px;padding-top:16px}
.anime-quiz-titre{
  font-family:var(--font-head);font-weight:800;font-size:.95rem;
  color:var(--g-800);margin-bottom:12px;
}
.anime-qr{
  background:var(--g-50);border-left:4px solid var(--g-500);
  border-radius:0 10px 10px 0;padding:11px 14px;margin-bottom:10px;
}
.anime-q{font-size:.87rem;font-weight:700;color:var(--ink);margin:0 0 8px}
.anime-voir{
  border:0;background:var(--g-100);color:var(--g-800);border-radius:8px;
  padding:5px 12px;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;
}
.anime-voir:hover{background:var(--g-200)}
.anime-r{
  margin:9px 0 0;font-size:.85rem;line-height:1.55;color:var(--g-900);
  background:#fff;border-radius:8px;padding:9px 11px;
}

/* -------------------------------------------- barre et commandes */
.anime-barre{height:4px;background:var(--g-100)}
.anime-barre i{display:block;height:100%;background:var(--g-600);width:0;transition:width .3s}

.anime-commandes{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:var(--g-50);border-top:1px solid var(--g-100);
}
.anime-commandes button{
  border:0;border-radius:9px;cursor:pointer;font:inherit;line-height:1;
  background:#fff;border:1px solid var(--g-200);color:var(--g-800);
  width:34px;height:34px;display:grid;place-items:center;font-size:.8rem;
}
.anime-commandes button:hover{background:var(--g-100)}
.anime-jouer{background:var(--g-700)!important;color:#fff!important;border-color:transparent!important}
.anime-jouer:hover{background:var(--g-800)!important}
.anime-rang{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--muted)}

/* --------------------------------------------------- écrans étroits */
@media (max-width:760px){
  .anime-scene{flex-direction:column;gap:14px}
  .anime-figure{width:100%;max-width:330px;margin:0 auto}
  /* Sur un téléphone, un quart d'écran serait illisible : la fenêtre
     prend toute la place, comme avant. */
  .anime-fond,.anime-fond.anime-grand{padding:0;align-items:stretch;justify-content:stretch}
  .anime-zone,.anime-fond.anime-grand .anime-zone{
    width:100%;height:100%;max-width:none;min-width:0;border:0;border-radius:0;
  }
  .anime-fond:not(.anime-grand) .anime-scene{padding:18px}
  .anime-fond:not(.anime-grand) .anime-figure{width:100%}
  /* la fenêtre couvre l'écran : le doigt ne doit pas traverser */
  .anime-fond{pointer-events:auto}
  .anime-agrandir{display:none}
}

/* Certains élèves règlent leur appareil sur « réduire les animations »
   (mal des transports, vertiges, troubles de l'attention). On respecte ce
   choix : plus aucun mouvement, mais le cours et la voix restent entiers.
   Une animation coupée ne doit jamais faire disparaître un contenu. */
@media (prefers-reduced-motion:reduce){
  .anime-scene.entre,.anime-etiquette.entre,.anime-figure.entre,
  .anime-ligne.entre,.anime-ligne.entre .anime-num,
  .anime-zone.joue .anime-pastille{animation:none!important}
  .anime-ligne{transition:color .25s,opacity .25s}
  .anime-ligne.vive{background-size:100% 100%}
}

/* ------------------------------------------------------- impression */
@media print{
  .anime-ouvrir,.anime-fond{display:none!important}
}