/* =====================================================================
   MesRevisions.com — habillage des cours animés
   ---------------------------------------------------------------------
   La scène imite une page de cahier Seyès : c'est le décor dans lequel
   les élèves écrivent tous les jours, et il rend le passage du cours à
   l'animation moins abrupt. Les lignes restent bleues — un cahier Seyès
   est bleu —, tout le reste suit la charte du site.

   Les tailles à l'intérieur de la scène sont en « cqw » (pourcentage de
   la largeur du conteneur) et non en pixels : la mise en page reste
   identique du téléphone au grand écran, sans point de rupture à régler.
   ===================================================================== */

:root{
  --desk:#f3ece6; --paper:#fffcfa;
  --seyes:#e3ecf7; --seyes-fort:#c3d5ec; --marge:#d98a8a;
  --enc:#3a2c24; --doux:#7c6a5f; --filet:#ece0d5;
  --acc:#b9531a;        /* l'orange du site : c'est la couleur d'appui  */
  --acc2:#a8501d;
  --bleu:#2f6bb5;       /* réservé aux repères « cahier »               */
  --vert:#1d6e52;         /* le vert de la charte du site */
  --violet:#7a4a8c;
  --rouge:#c0473f;
  --surlign:#ffe8a8;
  --sur-acc:#ffffff;
  --ombre:0 18px 40px rgba(90,42,18,.13);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --desk:#1a1512; --paper:#241d18; --seyes:#2c2a38; --seyes-fort:#3b3a4e; --marge:#8e5252;
    --enc:#f5efe9; --doux:#b3a297; --filet:#3a2f27;
    --acc:#f0a06a; --acc2:#e88d52; --bleu:#8fb4e0; --vert:#5cc79a; --violet:#c3a0d0; --rouge:#ef8a82;
    --surlign:#6b5520; --sur-acc:#241d18;
    --ombre:0 18px 40px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --desk:#1a1512; --paper:#241d18; --seyes:#2c2a38; --seyes-fort:#3b3a4e; --marge:#8e5252;
  --enc:#f5efe9; --doux:#b3a297; --filet:#3a2f27;
  --acc:#f0a06a; --acc2:#e88d52; --bleu:#8fb4e0; --vert:#5cc79a; --violet:#c3a0d0; --rouge:#ef8a82;
  --surlign:#6b5520; --sur-acc:#241d18;
}

.ca *{box-sizing:border-box}
.ca{background:var(--desk);color:var(--enc);min-height:100vh;
    font-family:var(--font-body,system-ui,sans-serif);line-height:1.45}
.ca-wrap{max-width:1020px;margin:0 auto;padding:18px 16px 46px}
.ca-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:12px}
.ca-tete h1{font-family:var(--font-head,system-ui,sans-serif);font-weight:800;
  font-size:clamp(22px,3.4vw,32px);margin:0;line-height:1.1;color:var(--enc)}
.ca-tete p{margin:0;color:var(--doux);font-weight:700;font-size:15px}
.ca-retour{font-size:13px;font-weight:700;color:var(--acc2);text-decoration:none}
.ca-retour:hover{text-decoration:underline}
.ca button,.ca select{font-family:inherit}
.ca :focus-visible{outline:3px solid var(--acc);outline-offset:2px}

/* ---------------------------------------------------------------- la scène */
.scene{position:relative;container-type:inline-size;aspect-ratio:16/10;border-radius:14px;
  overflow:hidden;box-shadow:var(--ombre);border:1px solid var(--filet);
  background-color:var(--paper);
  background-image:
    linear-gradient(90deg,transparent 7.5cqw,var(--marge) 7.5cqw,var(--marge) calc(7.5cqw + 2px),transparent calc(7.5cqw + 2px)),
    repeating-linear-gradient(180deg,var(--seyes-fort) 0 1px,transparent 1px 4.8cqw),
    repeating-linear-gradient(180deg,var(--seyes) 0 1px,transparent 1px 1.2cqw);
}
@media (max-width:620px){.scene{aspect-ratio:4/3}}
.plateau{position:absolute;inset:0;padding:3cqw 3cqw 3cqw 10cqw;
  display:flex;align-items:center;justify-content:center}
.col{display:flex;flex-direction:column;align-items:center;gap:2.4cqw;width:100%;text-align:center}
.rang{display:flex;align-items:center;justify-content:center;gap:3cqw;flex-wrap:wrap}

/* apparitions */
.fade{opacity:0;transform:translateY(1.4cqw);transition:opacity .55s ease,transform .55s ease}
.fade.on{opacity:1;transform:none}
.pop{opacity:0;transform:scale(.8);transition:opacity .4s,transform .5s cubic-bezier(.2,1.5,.4,1)}
.pop.on{opacity:1;transform:none}

/* ---------------------------------------------------------------- textes */
.t-titre{font-family:var(--font-head,sans-serif);font-weight:800;font-size:7.6cqw;
  line-height:1;margin:0;color:var(--acc2)}
.t-sur{font-size:2.6cqw;font-weight:800;color:var(--doux);margin:0}
.t-lead{font-family:var(--font-head,sans-serif);font-weight:700;font-size:4cqw;margin:0;line-height:1.12}
.t-note{font-size:2.6cqw;font-weight:700;margin:0;min-height:3.6cqw;max-width:74cqw}
.t-note b{color:var(--acc2)}
.t-pt{font-size:2.3cqw;font-weight:700;color:var(--doux);margin:0}

/* ---------------------------------------------------------------- fiches */
.fiches{display:flex;gap:3cqw;justify-content:center;flex-wrap:nowrap}
.fiche{background:var(--paper);border:.25cqw solid var(--enc);
  border-radius:1.6cqw 1.6cqw 1.6cqw .4cqw;padding:1.6cqw 2.4cqw;min-width:19cqw;
  transform:rotate(-1.5deg)}
.fiche:nth-child(2){transform:rotate(1.2deg)}
.fiche.fade:not(.on){transform:translateY(2cqw) rotate(0)}
.fiche .ico{font-size:4.2cqw;line-height:1}
.fiche .val{font-family:var(--font-head,sans-serif);font-weight:800;font-size:4.4cqw;line-height:1.1}
.fiche .lab{font-size:2cqw;font-weight:700;color:var(--doux)}
.v{color:var(--rouge);display:inline-block;transition:transform .4s}
.ping .v{animation:ping 1s ease 2}
@keyframes ping{50%{transform:scale(1.8)}}

/* ---------------------------------------------------------------- encadrés */
.boite{background:var(--paper);border:.3cqw solid var(--filet);border-radius:1.6cqw;
  padding:1.8cqw 2.6cqw;transition:border-color .4s,box-shadow .4s,background .4s}
.boite.acc{border-color:var(--acc)}
.boite.vert{border-color:var(--vert)}
.boite.rouge{border-color:var(--rouge)}
.boite.gagne{border-color:var(--vert);box-shadow:0 0 0 1cqw color-mix(in srgb,var(--vert) 20%,transparent)}
.boite .chapo{font-size:2.1cqw;font-weight:800;color:var(--doux);margin-bottom:.6cqw}
.boite .gros{font-family:var(--font-head,sans-serif);font-weight:800;font-size:6.4cqw;line-height:1}

/* ---------------------------------------------------------------- calcul
   « calcul » et non « formule » : style.css décore déjà une classe
   .formule d'un cadre en pointillés et d'une police à empattements, qui
   se retrouvait collée autour de chaque fraction. */
.calcul{font-family:var(--font-head,sans-serif);font-weight:800;font-size:7cqw;line-height:1.1;
  display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;margin-bottom:5cqw}
.grp{position:relative;padding:0 .8cqw;border-radius:1.4cqw;transition:background .4s,color .4s}
.grp::after{content:"";position:absolute;left:10%;right:10%;bottom:-.6cqw;height:.6cqw;
  border-radius:1cqw;background:currentColor;transform:scaleX(0);transition:transform .5s}
.grp .tag{position:absolute;left:50%;top:calc(100% + 1.4cqw);transform:translateX(-50%);
  font:800 2.4cqw var(--font-body,sans-serif);white-space:nowrap;opacity:0;transition:opacity .4s .2s}
.grp.on::after{transform:scaleX(1)} .grp.on .tag{opacity:1}
.grp.a.on{color:var(--acc2);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.grp.b.on{color:var(--bleu);background:color-mix(in srgb,var(--bleu) 13%,transparent)}
.grp.c.on{color:var(--vert);background:color-mix(in srgb,var(--vert) 13%,transparent)}
.grp.d.on{color:var(--violet);background:color-mix(in srgb,var(--violet) 13%,transparent)}
.sepa{color:var(--enc);transition:color .3s}
.sepa.on{color:var(--rouge);animation:ping 1s ease 2}
.frac{display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-size:.8em}
.frac span:first-child{border-bottom:.35cqw solid currentColor;padding:0 .6cqw .3cqw}
.frac span:last-child{padding-top:.3cqw}
.rac{border-top:.3cqw solid currentColor;padding:0 .3cqw}

/* ---------------------------------------------------------------- tableau */
.tabl{display:grid;border:.25cqw solid var(--enc);border-radius:1.2cqw;overflow:hidden;
  background:var(--paper);width:86cqw}
.th{font-weight:800;font-size:1.9cqw;padding:1cqw .3cqw;border-bottom:.25cqw solid var(--enc);
  transition:background .3s;text-align:center}
.td{position:relative;font-family:var(--font-head,sans-serif);font-weight:800;font-size:5.6cqw;
  height:9cqw;display:flex;align-items:center;justify-content:center}
.td.petit{font-size:2.6cqw;font-family:var(--font-body,sans-serif);height:6.4cqw;padding:0 .6cqw;
  text-align:center;line-height:1.15}
.th+.th,.td+.td{border-left:.15cqw solid var(--filet)}
.k0,.k1,.k2{color:var(--bleu)} .k3{color:var(--acc2)} .k4{color:var(--vert)} .k5{color:var(--violet)}
.th.act{background:color-mix(in srgb,currentColor 15%,transparent)}
.td span{opacity:0;transform:translateY(-5cqw) scale(1.35);
  transition:opacity .35s,transform .55s cubic-bezier(.2,1.4,.4,1)}
.td.on span{opacity:1;transform:none}
.virg{position:absolute;left:-1.6cqw;bottom:.4cqw;font-size:5cqw;color:var(--rouge);
  opacity:0;transition:opacity .4s}
.virg.on{opacity:1}

/* ---------------------------------------------------------------- grille (crible) */
.crible{display:grid;grid-template-columns:repeat(10,1fr);gap:.5cqw;width:70cqw}
.cell{aspect-ratio:1;display:grid;place-items:center;border-radius:.8cqw;background:var(--paper);
  border:.15cqw solid var(--filet);font-weight:800;font-size:2.2cqw;
  transition:background .3s,color .3s,transform .3s,border-color .3s}
.cell.barre{background:var(--filet);color:var(--doux);text-decoration:line-through;opacity:.6}
.cell.prem{background:var(--vert);border-color:var(--vert);color:#fff;transform:scale(1.06)}
.cell.vise{border-color:var(--acc);box-shadow:0 0 0 .3cqw color-mix(in srgb,var(--acc) 40%,transparent)}
.cell.un{background:var(--filet);color:var(--doux);opacity:.55}

/* ---------------------------------------------------------------- barres */
.barrow{width:70cqw;display:flex;flex-direction:column;align-items:flex-start;gap:.8cqw}
.bar{width:100%;height:6.4cqw;display:flex;gap:0;border-radius:1cqw;overflow:hidden;
  transition:gap .8s ease}
.bar.split{gap:.5cqw}
.bar i{flex:1;background:color-mix(in srgb,var(--acc) 20%,var(--paper));transition:background .5s}
.bar i.c{background:var(--acc)}
.bar.plein{background:var(--acc2);align-items:center;justify-content:center;color:#fff;
  font-weight:800;font-size:2.4cqw}
.barlab{font-weight:800;font-size:2.3cqw;color:var(--doux)}

/* ---------------------------------------------------------------- SVG */
.dessin{width:100%;max-width:84cqw;height:auto;overflow:visible}
.ax{stroke:var(--enc);stroke-width:4;stroke-linecap:round}
.tk{stroke:var(--enc);stroke-width:4}
.tk2{stroke:var(--doux);stroke-width:3;transition:stroke .3s,stroke-width .3s}
.tk2.on{stroke:var(--acc);stroke-width:6}
.cote{fill:var(--enc);font:700 34px var(--font-head,sans-serif);text-anchor:middle}
.cote2{fill:var(--acc2);font:800 21px var(--font-body,sans-serif);text-anchor:middle;
  opacity:0;transition:opacity .3s}
.cote2.on{opacity:1}
.zone{fill:var(--surlign)}
.tiret{stroke:var(--doux);stroke-width:2;stroke-dasharray:8 8}
.pt{fill:var(--rouge)}
.ptl{fill:var(--rouge);font:800 34px var(--font-head,sans-serif);text-anchor:middle}
.courbe{fill:none;stroke:var(--acc2);stroke-width:5;stroke-linecap:round}
.glisse{opacity:0;transition:opacity .4s,transform 2s ease-in-out}
.glisse.on{opacity:1}

/* ---------------------------------------------------------------- quiz */
.qbox{width:78cqw}
.qnum{font-weight:800;color:var(--doux);font-size:2.2cqw}
.qq{font-family:var(--font-head,sans-serif);font-weight:700;font-size:3.9cqw;line-height:1.15;
  margin:.6cqw 0 2.4cqw}
.opts{display:flex;gap:2.2cqw;justify-content:center;flex-wrap:wrap}
.opt{font-family:var(--font-head,sans-serif);font-weight:800;font-size:4.4cqw;min-width:17cqw;
  padding:.8cqw 2cqw;border-radius:1.6cqw;border:.3cqw solid var(--enc);background:var(--paper);
  color:var(--enc);cursor:pointer;transition:transform .15s,background .3s}
.opt:hover:not(:disabled){transform:translateY(-.4cqw)}
.opt.bon{background:var(--vert);border-color:var(--vert);color:#fff}
.opt.faux{background:var(--rouge);border-color:var(--rouge);color:#fff}
.opt:disabled{cursor:default}
.fb{font-weight:800;font-size:2.4cqw;margin-top:2cqw;min-height:4cqw}
.fb.g{color:var(--vert)} .fb.b{color:var(--rouge)}
.recap{text-align:left;font-size:2.5cqw;font-weight:700;margin:0;padding-left:3cqw}
.recap li{margin:.6cqw 0}
.score{font-family:var(--font-head,sans-serif);font-weight:800;font-size:4cqw;color:var(--vert)}

/* ---------------------------------------------------------------- voile */
.voile{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.4cqw;background:color-mix(in srgb,var(--paper) 80%,transparent);
  backdrop-filter:blur(3px);z-index:5;text-align:center;padding:4cqw}
.voile[hidden]{display:none}
.grosplay{font-family:var(--font-head,sans-serif);font-weight:800;
  font-size:clamp(18px,3.6cqw,34px);border:0;border-radius:99px;padding:1.4cqw 4cqw;
  background:var(--acc2);color:#fff;cursor:pointer;box-shadow:var(--ombre)}
.grosplay:hover{background:var(--acc)}
.voile p{margin:0;font-weight:700;color:var(--doux);font-size:clamp(13px,2.2cqw,18px)}

/* ---------------------------------------------------------------- commandes */
.jauge{height:6px;background:var(--filet);border-radius:99px;overflow:hidden;margin-top:10px}
.jauge i{display:block;height:100%;width:0;background:var(--acc);transition:width .5s}
.stitres{min-height:3.4em;margin-top:10px;padding:12px 16px;background:var(--paper);
  border:1px solid var(--filet);border-left:4px solid var(--marge);border-radius:10px;
  font-size:clamp(15px,2.1vw,19px);font-weight:700}
.cmd{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.cbtn{font-weight:800;font-size:15px;border:1px solid var(--filet);background:var(--paper);
  color:var(--enc);padding:9px 14px;border-radius:10px;cursor:pointer}
.cbtn:hover{border-color:var(--enc)}
.cbtn.prim{background:var(--acc2);color:#fff;border-color:transparent;min-width:118px}
.cbtn.prim:hover{background:var(--acc)}
.esp{flex:1}
.chapitres{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.puce-ch{font-weight:700;font-size:14px;border:1px solid var(--filet);background:transparent;
  color:var(--enc);padding:6px 12px;border-radius:99px;cursor:pointer}
.puce-ch.actif{background:var(--acc2);color:#fff;border-color:transparent}
.avis{margin:8px 0 0;font-size:13px;color:var(--doux)}
.ca-suite{margin-top:26px;padding-top:20px;border-top:1px solid var(--filet);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--doux)}
.ca-suite a{font-weight:800;color:var(--acc2);text-decoration:none}
.ca-suite a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.ca *{transition-duration:.01s!important;animation:none!important}}

/* le zéro qu'on ajoute au bout d'un décimal, et le surlignage d'un chiffre */
.zero{display:inline-block;max-width:0;opacity:0;overflow:hidden;vertical-align:bottom;
  color:var(--vert);transition:max-width .6s,opacity .6s}
.zero.on{max-width:1em;opacity:1}
.surl{background:var(--surlign);border-radius:.6cqw;padding:0 .3cqw}
/* un facteur qu'on simplifie dans une fraction */
.sim{transition:color .4s,opacity .4s}
.sim.raye{color:var(--rouge);opacity:.45;text-decoration:line-through}
.borne{transition:fill .4s}