/* =============================================================================
   schemas.css — les schémas animés du cours.
   Principe : le PHP sort un SVG complet et statique ; ici, chaque étape
   (data-etape="0…3" sur la figure) montre, masque et déplace les pièces.
   Tout est en transform / opacity, sauf de rares largeurs qui portent le sens.
   ========================================================================== */

.schema{
  margin:clamp(28px,4vw,46px) 0;
  padding:clamp(18px,2.6vw,28px);
  background:var(--grey);
  border-radius:4px;
}
/* Titre du bloc : un filet le sépare de la scène — le vocabulaire des
   séparateurs de la charte amU, angles droits et trait fin. */
.schema-titre{
  font-family:var(--font-medium);
  font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.3;
  color:var(--encre);
  margin:0 0 clamp(16px,2.2vw,22px);
  padding-bottom:10px;
  border-bottom:1px solid #cfc9dd;
  text-wrap:balance;
}

.schema-scene{max-width:620px;margin:0 auto}
.schema-large .schema-scene{max-width:720px}
.sc{display:block;width:100%;height:auto;overflow:visible}

/* --- les boutons d'étape --------------------------------------------------- */
.schema-controles{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin-top:20px;
}
/* angles droits et filet, comme les boutons du kit amU — pas de pilule */
.schema-etape{
  font-family:var(--font-text);font-size:14px;line-height:1;
  padding:11px 16px;border:1px solid #cfc9dd;background:#fff;color:#4a4458;
  cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.schema-etape:hover{border-color:var(--black);color:var(--black)}
.schema-etape[aria-current="step"]{background:var(--black);border-color:var(--black);color:#fff}
.schema-etape:focus-visible{outline:2px solid var(--amu-purple-fonce);outline-offset:2px}

.schema-legende{
  max-width:64ch;margin:20px auto 0;
  font-size:15px;line-height:1.6;color:#4a4458;text-wrap:pretty;
}

/* --- la grille de ligne de base, en vis-à-vis ------------------------------ */
.sc-lb .lb-page{fill:#fff;stroke:#d9d3e6;stroke-width:1}

.sc-lb .lb-gl{stroke:var(--amu-purple);stroke-width:.6;opacity:0;
  transition:opacity .3s var(--ease);transition-delay:calc(var(--i) * 26ms)}

/* Le texte de la page de droite dérive d'abord — interligne légèrement
   différent, la cause la plus fréquente — puis se recale d'un bloc. */
.sc-lb .lb-tx{fill:#6f6785;transition:transform .55s var(--ease),opacity .3s var(--ease)}
.sc-lb .lb-d{transform:translateY(calc(var(--i) * .9px))}

.sc-lb .lb-ac{stroke:var(--amu-yellow);stroke-width:2;opacity:0;
  transition:opacity .35s var(--ease)}

.sc-lb .lb-ok,.sc-lb .lb-ko{opacity:0;transition:opacity .4s var(--ease)}
.sc-lb .lb-zone{fill:var(--amu-yellow);opacity:.16}
.sc-lb .lb-titre{fill:#2b2340}
.sc-lb .lb-crochet{stroke:#2b2340;stroke-width:1.2;fill:none}
.sc-lb .lb-fleche{stroke:#c0392b;stroke-width:1.2;fill:none}
.sc-lb .lb-lab{fill:#4a4458}
.sc-lb .lb-lab-ko{fill:#c0392b}
.sc-lb .lb-notes text{opacity:0}

.schema[data-etape="0"] .sc-lb .lb-n0{opacity:1}
.schema[data-etape="1"] .sc-lb .lb-gl{opacity:.45}
.schema[data-etape="1"] .sc-lb .lb-n1{opacity:1}
.schema[data-etape="2"] .sc-lb .lb-gl{opacity:.3}
.schema[data-etape="2"] .sc-lb .lb-d{transform:none}
.schema[data-etape="2"] .sc-lb .lb-ac{opacity:1}
.schema[data-etape="2"] .sc-lb .lb-n2{opacity:1}
.schema[data-etape="3"] .sc-lb .lb-gl{opacity:.3}
.schema[data-etape="3"] .sc-lb .lb-d{transform:none}
.schema[data-etape="3"] .sc-lb .lb-ok,
.schema[data-etape="3"] .sc-lb .lb-ko{opacity:1}
/* À la dernière étape, le texte courant recule : ce sont les deux titres
   qu'on compare. Choisi plutôt qu'un masquage ligne à ligne — un sélecteur
   [style*="--i:1"] attraperait aussi --i:10 et --i:11. */
.schema[data-etape="3"] .sc-lb .lb-tx{opacity:.2}
.schema[data-etape="3"] .sc-lb .lb-n3{opacity:1}

/* --- la méthode en trois temps, sous un schéma ----------------------------- */
.schema-etapes{
  margin:0 0 14px;padding:0;list-style:none;counter-reset:etape;
}
.schema-etapes li{
  position:relative;padding-left:32px;margin-bottom:10px;
  font-size:15px;line-height:1.6;color:#4a4458;text-wrap:pretty;
}
.schema-etapes li::before{
  counter-increment:etape;content:counter(etape);
  position:absolute;left:0;top:1px;
  width:21px;height:21px;line-height:21px;text-align:center;
  font-family:var(--font-medium);font-size:12px;
  color:#fff;background:var(--black);
}
.schema-etapes li:last-child{margin-bottom:0}

/* une capture isolée dans un bloc de développement */
.schema-capture{max-width:420px;margin:0 0 20px}
.schema-capture .capture{margin:0}

/* --- vocabulaire commun aux scènes ---------------------------------------- */
.sc-note{font-family:var(--font-text);font-size:11px;fill:#6a6280}
.sc text{font-family:var(--font-text)}
.sc .sc-note{transition:opacity .3s var(--ease)}

/* =========================================================== FOND PERDU === */
.sc-fp .fp-papier{fill:#fff;stroke:#e6e1ee;stroke-width:1}
.sc-fp .fp-aplat{fill:var(--amu-purple-fonce);
  transition:x .5s var(--ease),y .5s var(--ease),width .5s var(--ease),height .5s var(--ease)}
.sc-fp .fp-rond{fill:var(--amu-yellow)}

/* les trois repères restent visibles à toutes les étapes */
.sc-fp .fp-cadre-fp,.sc-fp .fp-cadre-fin,.sc-fp .fp-cadre-sec{fill:none;transition:opacity .3s var(--ease)}
.sc-fp .fp-cadre-fp {stroke:#a99ecb;stroke-width:1.2;stroke-dasharray:6 4}
.sc-fp .fp-cadre-fin{stroke:var(--black);stroke-width:1.6}
.sc-fp .fp-cadre-sec{stroke:var(--amu-yellow);stroke-width:1.4;stroke-dasharray:5 4}
.sc-fp .fp-coupes path{stroke:var(--black);stroke-width:1.1;fill:none}

/* la légende des repères */
.sc-fp .fp-lg path{fill:none;stroke-width:1.1;stroke-linecap:round}
.sc-fp .fp-lg-fp  path,.sc-fp .fp-lg-fp  circle{stroke:#a99ecb;fill:#a99ecb}
.sc-fp .fp-lg-fin path,.sc-fp .fp-lg-fin circle{stroke:var(--black);fill:var(--black)}
.sc-fp .fp-lg-sec path,.sc-fp .fp-lg-sec circle{stroke:var(--amu-yellow);fill:var(--amu-yellow)}
.sc-fp .fp-lg-fp  .sc-note{fill:#6a6280}
.sc-fp .fp-lg-fin .sc-note{fill:var(--black)}
.sc-fp .fp-lg-sec .sc-note{fill:#9a7a00}
.sc-fp .fp-lg{transition:opacity .3s var(--ease)}

/* la ligne de coupe réelle : 4 px à l'intérieur du format fini */
.sc-fp .fp-tombe{opacity:0;transition:opacity .35s var(--ease)}
.sc-fp .fp-tombe rect{fill:none;stroke:#e0393e;stroke-width:1.6;stroke-dasharray:7 4}
.sc-fp .fp-tombe .sc-note{fill:#c2262b}

/* le bord en gros plan : papier à gauche de la coupe, encre à droite */
.sc-fp .fp-zoom{opacity:0;transition:opacity .35s var(--ease)}
.sc-fp .fp-zoom-titre{fill:#6a6280}
.sc-fp .fp-zoom-papier{fill:#fff;stroke:#d9d3e6;stroke-width:1}
.sc-fp .fp-zoom-encre{fill:var(--amu-purple-fonce);
  transition:x .45s var(--ease),width .45s var(--ease)}
.sc-fp .fp-zoom-coupe{stroke:#e0393e;stroke-width:2;fill:none}
.sc-fp .fp-zoom-filet{opacity:0;transition:opacity .3s var(--ease)}
.sc-fp .fp-zoom-filet path{stroke:#c2262b;stroke-width:1.2;fill:none}
.sc-fp .fp-zoom-filet .sc-note{fill:#c2262b}
.sc-fp .fp-zoom-ok{fill:#1a7f45;opacity:0;transition:opacity .3s var(--ease)}

.sc-fp .fp-notes text{opacity:0}
.sc-fp .fp-note-0{opacity:1}

/* étape 1 — sans fond perdu : le visuel se rétracte au liseré noir */
.schema[data-etape="1"] .sc-fp .fp-aplat{x:52px;y:46px;width:226px;height:156px}
.schema[data-etape="1"] .sc-fp .fp-cadre-sec,
.schema[data-etape="1"] .sc-fp .fp-lg-sec{opacity:.25}
.schema[data-etape="1"] .sc-fp .fp-note-0{opacity:0}
.schema[data-etape="1"] .sc-fp .fp-note-1{opacity:1}

/* étape 2 — où le massicot tombe : la coupe mord à l'intérieur, et le gros plan
   montre le filet de papier nu laissé par un visuel arrêté trop tôt */
.schema[data-etape="2"] .sc-fp .fp-aplat{x:52px;y:46px;width:226px;height:156px}
.schema[data-etape="2"] .sc-fp .fp-tombe{opacity:1}
.schema[data-etape="2"] .sc-fp .fp-zoom{opacity:1}
.schema[data-etape="2"] .sc-fp .fp-zoom-encre{x:352px;width:90px}
.schema[data-etape="2"] .sc-fp .fp-zoom-filet{opacity:1;transition-delay:.4s}
.schema[data-etape="2"] .sc-fp .fp-cadre-sec,
.schema[data-etape="2"] .sc-fp .fp-lg-sec{opacity:.25}
.schema[data-etape="2"] .sc-fp .fp-note-0{opacity:0}

/* étape 3 — avec fond perdu : même coupe, mais elle tombe dans la matière */
.schema[data-etape="3"] .sc-fp .fp-tombe{opacity:1}
.schema[data-etape="3"] .sc-fp .fp-tombe .sc-note{opacity:0}
.schema[data-etape="3"] .sc-fp .fp-zoom{opacity:1}
.schema[data-etape="3"] .sc-fp .fp-zoom-ok{opacity:1;transition-delay:.4s}
.schema[data-etape="3"] .sc-fp .fp-note-0{opacity:0}
.schema[data-etape="3"] .sc-fp .fp-note-3{opacity:1}

/* =============================================================== GRILLE === */
.sc-gr .gr-page{fill:#fff;stroke:#d9d3e6;stroke-width:1}
.sc-gr .gr-col{fill:var(--amu-purple);opacity:0;transform:scaleY(.6);transform-origin:center;
  transition:opacity .35s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--i) * 55ms)}
.sc-gr .gr-bloc{fill:#2b2340;opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.sc-gr .gr-tiers{opacity:0;transition:opacity .4s var(--ease)}
.sc-gr .gr-tiers path{stroke:var(--amu-yellow);stroke-width:1.2;fill:none}
.sc-gr .gr-tiers circle{fill:var(--amu-yellow)}
.sc-gr .gr-notes text{opacity:0}

.schema[data-etape="1"] .sc-gr .gr-col{opacity:.22;transform:none}
.schema[data-etape="1"] .sc-gr .gr-note-col{opacity:1}
.schema[data-etape="2"] .sc-gr .gr-col{opacity:.12;transform:none}
.schema[data-etape="2"] .sc-gr .gr-bloc{opacity:1;transform:none}
.schema[data-etape="2"] .sc-gr .gr-note-bloc{opacity:1}
.schema[data-etape="3"] .sc-gr .gr-col{opacity:.08;transform:none}
.schema[data-etape="3"] .sc-gr .gr-bloc{opacity:.14;transform:none}
.schema[data-etape="3"] .sc-gr .gr-tiers{opacity:1}
.schema[data-etape="3"] .sc-gr .gr-note-tiers{opacity:1}

/* =========================================================== HIÉRARCHIE === */
.sc-hi .hi-page{fill:#fff;stroke:#d9d3e6;stroke-width:1}
.sc-hi rect[class^="hi-"]:not(.hi-page){transition:all .5s var(--ease)}
.sc-hi .hi-ligne{fill:#b9b2c9}
.sc-hi .hi-titre,.sc-hi .hi-titre-2{fill:#b9b2c9}
.sc-hi .hi-chapo{fill:#b9b2c9}
.sc-hi .hi-inter{fill:#b9b2c9}
.sc-hi .hi-image{fill:#d7d1e2}
.sc-hi .hi-legende{fill:#b9b2c9}
.sc-hi .hi-notes text{opacity:0}
.sc-hi .hi-note-plat{opacity:1}

/* étape 0 : tout au même poids — on ramène titre, chapô et intertitre
   à la hauteur du texte courant */
.schema[data-etape="0"] .sc-hi .hi-titre  {height:4px;y:52px}
.schema[data-etape="0"] .sc-hi .hi-titre-2{height:4px;y:60px;width:206px}
.schema[data-etape="0"] .sc-hi .hi-chapo  {height:4px}
.schema[data-etape="0"] .sc-hi .hi-inter  {height:4px;width:236px}

/* étape 1 : le titre prend son rang */
.schema[data-etape="1"] .sc-hi .hi-titre,
.schema[data-etape="1"] .sc-hi .hi-titre-2{fill:var(--black)}
.schema[data-etape="1"] .sc-hi .hi-chapo{height:4px}
.schema[data-etape="1"] .sc-hi .hi-inter{height:4px;width:236px}
.schema[data-etape="1"] .sc-hi .hi-note-titre{opacity:1}
.schema[data-etape="1"] .sc-hi .hi-note-plat{opacity:0}

/* étape 2 : les trois rangs + la légende */
.schema[data-etape="2"] .sc-hi .hi-titre,
.schema[data-etape="2"] .sc-hi .hi-titre-2{fill:var(--black)}
.schema[data-etape="2"] .sc-hi .hi-chapo{fill:#4a4458}
.schema[data-etape="2"] .sc-hi .hi-inter{fill:var(--amu-purple-fonce)}
.schema[data-etape="2"] .sc-hi .hi-image{fill:var(--amu-purple)}
.schema[data-etape="2"] .sc-hi .hi-note-rang{opacity:1}
.schema[data-etape="2"] .sc-hi .hi-note-plat{opacity:0}

/* étape 3 : idem + le chemin visuel */
.schema[data-etape="3"] .sc-hi .hi-titre,
.schema[data-etape="3"] .sc-hi .hi-titre-2{fill:var(--black)}
.schema[data-etape="3"] .sc-hi .hi-chapo{fill:#4a4458}
.schema[data-etape="3"] .sc-hi .hi-inter{fill:var(--amu-purple-fonce)}
.schema[data-etape="3"] .sc-hi .hi-image{fill:var(--amu-purple)}
.schema[data-etape="3"] .sc-hi .hi-note-chem{opacity:1}
.schema[data-etape="3"] .sc-hi .hi-note-plat{opacity:0}

.sc-hi .hi-chemin{opacity:0;transition:opacity .3s var(--ease)}
.sc-hi .hi-trace{fill:none;stroke:var(--amu-yellow);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:600;stroke-dashoffset:600}
.sc-hi .hi-pt circle{fill:var(--amu-yellow)}
.sc-hi .hi-pt text{font-size:11px;fill:var(--black);text-anchor:middle}
.sc-hi .hi-pt{opacity:0}
.schema[data-etape="3"] .sc-hi .hi-chemin{opacity:1}
.schema[data-etape="3"] .sc-hi .hi-trace{animation:hi-trace 1.4s var(--ease) .1s forwards}
.schema[data-etape="3"] .sc-hi .hi-pt{animation:hi-pt .4s var(--ease) forwards;
  animation-delay:calc(.25s + var(--i) * .45s)}
@keyframes hi-trace{to{stroke-dashoffset:0}}
@keyframes hi-pt{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.sc-hi .hi-pt{transform-box:fill-box;transform-origin:center}

/* ======================================================= PIXEL / VECTEUR == */
.sc-pv .pv-fenetre{fill:#fff;stroke:#d9d3e6;stroke-width:1}
.sc-pv .pv-grille-pix rect{fill:var(--amu-purple-fonce)}
.sc-pv .pv-zoom{overflow:hidden}
.sc-pv .pv-disque{fill:var(--amu-purple-fonce)}
.sc-pv .pv-ancres circle{fill:#fff;stroke:var(--amu-yellow);stroke-width:.3;opacity:0;transition:opacity .3s var(--ease)}
.sc-pv .pv-zoom{transition:none}
.sc-pv .pv-zoom > g,.sc-pv .pv-zoom > circle,.sc-pv .pv-zoom > .pv-ancres{
  transform-box:view-box;transform-origin:9.6px 6px;   /* le bord du disque, pas son centre */
  transition:transform .8s var(--ease)}
.schema[data-etape="1"] .sc-pv .pv-zoom > *{transform:scale(4)}
.schema[data-etape="2"] .sc-pv .pv-zoom > *{transform:scale(12)}
.schema[data-etape="2"] .sc-pv .pv-ancres circle{opacity:1}

/* ============================================================ RVB / CMJN == */
.sc-rc .rc-fond{fill:#0c0a12}
.sc-rc .rc-fond-papier{fill:#fff;stroke:#d9d3e6;stroke-width:1}
.sc-rc .rc-disques circle{opacity:0;transition:opacity .45s var(--ease),transform .45s var(--ease);
  transform-box:fill-box;transform-origin:center;transform:scale(.8)}
.sc-rc .rc-rvb circle{mix-blend-mode:screen}
.sc-rc .rc-cmjn circle{mix-blend-mode:multiply}
.sc-rc .rc-r{fill:#ff2f2f}.sc-rc .rc-v{fill:#22dd55}.sc-rc .rc-b{fill:#2f6bff}
.sc-rc .rc-c{fill:#00aeef}.sc-rc .rc-m{fill:#ec008c}.sc-rc .rc-j{fill:#fff200}
.sc-rc .rc-sous{fill:#8a8399}

.schema[data-etape="0"] .sc-rc .rc-r,
.schema[data-etape="0"] .sc-rc .rc-c{opacity:1;transform:none}
.schema[data-etape="1"] .sc-rc .rc-r,.schema[data-etape="1"] .sc-rc .rc-v,
.schema[data-etape="1"] .sc-rc .rc-c,.schema[data-etape="1"] .sc-rc .rc-m{opacity:1;transform:none}
.schema[data-etape="2"] .sc-rc .rc-disques circle{opacity:1;transform:none}

/* ========================================================== RÉSOLUTION ==== */
.sc-re .re-page{fill:#fff;stroke:#d9d3e6;stroke-width:1}
.sc-re .re-image{fill:var(--amu-purple);transition:all .6s var(--ease)}
.sc-re .re-lignes path{stroke:none}
.sc-re .re-val{font-size:38px;fill:var(--black);opacity:0}
.sc-re .re-v0{opacity:1}
.sc-re .re-v1,.sc-re .re-v2,.sc-re .re-v3{fill:#c2262b}
.sc-re .re-verdict{opacity:0}
.sc-re .re-d0{opacity:1;fill:#1a7f45}
.sc-re .re-d1{fill:#8a5a00}
.sc-re .re-d2,.sc-re .re-d3{fill:#c2262b}
.sc-re .re-unite{fill:#6a6280}
.sc-re .re-barre-fond{fill:#ded8ea}
.sc-re .re-barre{fill:var(--amu-purple-fonce);transition:width .6s var(--ease),fill .3s var(--ease)}
.sc-re .re-seuil{fill:#8a8399}
.sc-re .re-d0{fill:#1a7f45}

.schema[data-etape="1"] .sc-re .re-image{width:105px;height:78px}
.schema[data-etape="2"] .sc-re .re-image{width:140px;height:104px}
.schema[data-etape="3"] .sc-re .re-image{width:190px;height:141px}
.schema[data-etape="1"] .sc-re .re-barre{width:74.7px}
.schema[data-etape="2"] .sc-re .re-barre{width:56px;fill:#d08a00}
.schema[data-etape="3"] .sc-re .re-barre{width:28px;fill:#c2262b}
/* une seule valeur et un seul verdict à la fois */
.schema[data-etape="1"] .sc-re .re-v0,.schema[data-etape="1"] .sc-re .re-d0,
.schema[data-etape="2"] .sc-re .re-v0,.schema[data-etape="2"] .sc-re .re-d0,
.schema[data-etape="3"] .sc-re .re-v0,.schema[data-etape="3"] .sc-re .re-d0{opacity:0}
.schema[data-etape="1"] .sc-re .re-v1,.schema[data-etape="1"] .sc-re .re-d1,
.schema[data-etape="2"] .sc-re .re-v2,.schema[data-etape="2"] .sc-re .re-d2,
.schema[data-etape="3"] .sc-re .re-v3,.schema[data-etape="3"] .sc-re .re-d3{opacity:1}

/* ============================================================ CHAÎNAGE ==== */
.sc-ch .ch-bloc{fill:#fff;stroke:#c9c2db;stroke-width:1.2}
.sc-ch .ch-l{fill:#b9b2c9}
.sc-ch .ch-l-b{opacity:0;transition:opacity .3s var(--ease);
  transition-delay:calc((var(--i) - 9) * 70ms)}
.sc-ch .ch-exces rect{fill:#e0393e}
.sc-ch .ch-exces path{stroke:#fff;stroke-width:1.6}
.sc-ch .ch-exces{opacity:0;transition:opacity .3s var(--ease)}
.sc-ch .ch-curseur{opacity:0;transform:translate(168px,164px)}
.sc-ch .ch-curseur path{fill:var(--black);stroke:#fff;stroke-width:1}
.sc-ch .ch-notes text{opacity:0}

.schema[data-etape="0"] .sc-ch .ch-exces{opacity:1}
.schema[data-etape="0"] .sc-ch .ch-note-1{opacity:1}
.schema[data-etape="0"] .sc-ch .ch-bloc-2{stroke-dasharray:4 4}

.schema[data-etape="1"] .sc-ch .ch-exces{opacity:1}
.schema[data-etape="1"] .sc-ch .ch-curseur{opacity:1;animation:ch-curseur 1.3s var(--ease) forwards}
.schema[data-etape="1"] .sc-ch .ch-note-2{opacity:1}

.schema[data-etape="2"] .sc-ch .ch-exces{opacity:0}
.schema[data-etape="2"] .sc-ch .ch-l-b{opacity:1}
.schema[data-etape="2"] .sc-ch .ch-note-3{opacity:1}
@keyframes ch-curseur{
  0%  {transform:translate(168px,164px)}
  55% {transform:translate(168px,164px)}
  100%{transform:translate(276px,92px)}
}

/* ============================================================= CADRAGE ==== */
.sc-ca .ca-cadre{fill:none;stroke:var(--black);stroke-width:1.4}
.sc-ca .ca-vide{fill:#fff;stroke:none}
.sc-ca .ca-ciel{fill:#cdd9f0}
.sc-ca .ca-soleil{fill:var(--amu-yellow)}
.sc-ca .ca-mont{fill:var(--amu-purple-fonce)}
.sc-ca .ca-photo{opacity:0;transition:opacity .45s var(--ease)}
.sc-ca .ca-sous{fill:#8a8399;font-size:10.5px}
.sc-ca .ca-titre{font-family:var(--font-medium);fill:var(--black)}
.schema[data-etape="1"] .sc-ca .ca-photo{opacity:1}

/* =========================================================== HABILLAGE ==== */
.sc-ha .ha-bloc{fill:#fff;stroke:#d9d3e6;stroke-width:1}
.sc-ha .ha-l{fill:#b9b2c9;transition:width .45s var(--ease),x .45s var(--ease),opacity .3s var(--ease);
  transition-delay:calc(var(--i) * 22ms)}
.sc-ha .ha-image{fill:var(--amu-purple)}
.sc-ha .ha-marge{fill:none;stroke:var(--amu-yellow);stroke-width:1;stroke-dasharray:4 3;opacity:0;
  transition:opacity .3s var(--ease)}
.sc-ha .ha-notes text{opacity:0}
.schema[data-etape="0"] .sc-ha .ha-note-1{opacity:1}
.schema[data-etape="1"] .sc-ha .ha-note-2{opacity:1}
.schema[data-etape="1"] .sc-ha .ha-marge{opacity:1}
/* les lignes qui croisent l'image se raccourcissent : c'est l'habillage */
.schema[data-etape="1"] .sc-ha .ha-l:nth-child(n+5):nth-child(-n+11){width:128px}

/* ============================================================= GABARIT ==== */
.sc-ga .ga-feuille{fill:#fff;stroke:#d9d3e6;stroke-width:1}
.sc-ga .ga-modele{stroke:var(--black);stroke-width:1.4}
.sc-ga .ga-etiquette{font-family:var(--font-medium);fill:var(--black)}
.sc-ga .ga-pose > *{opacity:0;transition:opacity .4s var(--ease),fill .4s var(--ease)}
.sc-ga .ga-courant{fill:#2b2340}
.sc-ga .ga-filet{fill:var(--black)}
.sc-ga .ga-folio{font-size:9px;fill:#6a6280}
.sc-ga .ga-pose .ga-folio{font-size:11px}
.sc-ga .ga-herite > *{opacity:0;transition:opacity .4s var(--ease),fill .4s var(--ease);
  transition-delay:calc(var(--i) * 90ms)}
.sc-ga .ga-contenu rect{fill:#cfc8dd}
.sc-ga .ga-notes text,.sc-ga .ga-notes-modele text{opacity:0;transition:opacity .3s var(--ease)}
.sc-ga .ga-note-0{opacity:1}

.schema[data-etape="1"] .sc-ga .ga-pose > *,
.schema[data-etape="2"] .sc-ga .ga-pose > *,
.schema[data-etape="3"] .sc-ga .ga-pose > *{opacity:1}
.schema[data-etape="1"] .sc-ga .ga-note-0{opacity:0}
.schema[data-etape="1"] .sc-ga .ga-note-1,.schema[data-etape="1"] .sc-ga .ga-n1{opacity:1}

.schema[data-etape="2"] .sc-ga .ga-herite > *,
.schema[data-etape="3"] .sc-ga .ga-herite > *{opacity:1}
.schema[data-etape="2"] .sc-ga .ga-note-0{opacity:0}
.schema[data-etape="2"] .sc-ga .ga-note-2{opacity:1}

/* on modifie le gabarit : le filet passe au jaune et s'allonge, partout à la fois */
.schema[data-etape="3"] .sc-ga .ga-filet{fill:var(--amu-yellow);height:4px}
.schema[data-etape="3"] .sc-ga .ga-courant{fill:var(--amu-purple-fonce)}
.schema[data-etape="3"] .sc-ga .ga-note-0{opacity:0}
.schema[data-etape="3"] .sc-ga .ga-note-3{opacity:1}
.sc-ga .ga-filet{transition:fill .4s var(--ease),height .4s var(--ease)}

/* ====================================================== STYLES (HÉRITAGE) == */
.sc-st .st-noeud rect{fill:#fff;stroke:#c9c2db;stroke-width:1.2;transition:stroke .3s var(--ease)}
.sc-st .st-noeud text{font-size:12px;fill:var(--black)}
.sc-st .st-dapres{font-size:9.5px;fill:#8a8399}
.sc-st .st-parent rect{stroke:var(--black)}
.sc-st .st-lien{fill:none;stroke:#c9c2db;stroke-width:1.4;transition:stroke .3s var(--ease)}
.sc-st .st-page{fill:#fff;stroke:#d9d3e6;stroke-width:1}
.sc-st .st-ap-courant{fill:#b9b2c9;transition:fill .5s var(--ease)}
.sc-st .st-ap-inter{fill:#2b2340;transition:fill .5s var(--ease)}
.sc-st .st-ap-legende{fill:#b9b2c9;transition:fill .5s var(--ease)}
.sc-st .st-notes text{opacity:0}
.sc-st .st-note-0{opacity:1}

.schema[data-etape="1"] .sc-st .st-parent rect{stroke:var(--amu-purple-fonce);stroke-width:2.4}
.schema[data-etape="1"] .sc-st .st-ap-courant{fill:var(--amu-purple-fonce)}
.schema[data-etape="1"] .sc-st .st-note-0{opacity:0}
.schema[data-etape="1"] .sc-st .st-note-1{opacity:1}

.schema[data-etape="2"] .sc-st .st-parent rect{stroke:var(--amu-purple-fonce);stroke-width:2.4}
.schema[data-etape="2"] .sc-st .st-noeud.st-enfant rect{stroke:var(--amu-purple-fonce)}
.schema[data-etape="2"] .sc-st .st-lien{stroke:var(--amu-purple-fonce);stroke-width:2}
.schema[data-etape="2"] .sc-st .st-ap-courant,
.schema[data-etape="2"] .sc-st .st-ap-inter,
.schema[data-etape="2"] .sc-st .st-ap-legende{fill:var(--amu-purple-fonce)}
.schema[data-etape="2"] .sc-st .st-note-0{opacity:0}
.schema[data-etape="2"] .sc-st .st-note-2{opacity:1}

/* ============================================================== BÉZIER ==== */
.sc-bz .bz-droit,.sc-bz .bz-courbe,.sc-bz .bz-angle{
  fill:none;stroke:var(--amu-purple-fonce);stroke-width:2.6;opacity:0;
  transition:opacity .4s var(--ease)}
.sc-bz .bz-pt{fill:#fff;stroke:var(--black);stroke-width:1.6}
.sc-bz .bz-pt-milieu{transition:fill .3s var(--ease)}
.sc-bz .bz-h{opacity:0;transition:opacity .4s var(--ease)}
.sc-bz .bz-h path{stroke:var(--amu-yellow);stroke-width:1.4}
.sc-bz .bz-h circle{fill:var(--amu-yellow)}
.sc-bz .bz-notes text{opacity:0}
.sc-bz .bz-note-0{opacity:1}

.schema[data-etape="1"] .sc-bz .bz-droit{opacity:1}
.schema[data-etape="1"] .sc-bz .bz-note-0{opacity:0}
.schema[data-etape="1"] .sc-bz .bz-note-1{opacity:1}

.schema[data-etape="2"] .sc-bz .bz-courbe{opacity:1}
.schema[data-etape="2"] .sc-bz .bz-h{opacity:1}
.schema[data-etape="2"] .sc-bz .bz-note-0{opacity:0}
.schema[data-etape="2"] .sc-bz .bz-note-2{opacity:1}

.schema[data-etape="3"] .sc-bz .bz-angle{opacity:1}
.schema[data-etape="3"] .sc-bz .bz-h1,.schema[data-etape="3"] .sc-bz .bz-h3{opacity:1}
.schema[data-etape="3"] .sc-bz .bz-pt-milieu{fill:var(--amu-yellow)}
.schema[data-etape="3"] .sc-bz .bz-note-0{opacity:0}
.schema[data-etape="3"] .sc-bz .bz-note-3{opacity:1}

/* ========================================================== PATHFINDER ==== */
.sc-pf .pf-rect{fill:var(--amu-purple);opacity:.9}
.sc-pf .pf-cercle{fill:var(--amu-purple-fonce);opacity:.9}
.sc-pf .pf-depart{opacity:0;transition:opacity .35s var(--ease)}
.sc-pf .pf-res{opacity:0;transition:opacity .35s var(--ease)}
.sc-pf .pf-res *{fill:var(--amu-purple-fonce)}
.sc-pf .pf-notes text{opacity:0}

.schema[data-etape="0"] .sc-pf .pf-depart{opacity:1}
.schema[data-etape="0"] .sc-pf .pf-note-0{opacity:1}
.schema[data-etape="1"] .sc-pf .pf-reunion{opacity:1}
.schema[data-etape="1"] .sc-pf .pf-note-1{opacity:1}
.schema[data-etape="2"] .sc-pf .pf-soustraction{opacity:1}
.schema[data-etape="2"] .sc-pf .pf-note-2{opacity:1}
.schema[data-etape="3"] .sc-pf .pf-intersection{opacity:1}
.schema[data-etape="3"] .sc-pf .pf-note-3{opacity:1}
.schema[data-etape="4"] .sc-pf .pf-exclusion{opacity:1}
.schema[data-etape="4"] .sc-pf .pf-note-4{opacity:1}

/* ====================================================== VEUVES / ORPHELINES */
.sc-vo .vo-col{fill:#fff;stroke:#d9d3e6;stroke-width:1}
.sc-vo .vo-l{fill:#c4bdd2}
.sc-vo .vo-para{fill:#7a7290}          /* le paragraphe qu'on suit d'une colonne à l'autre */
.sc-vo .vo-seule{fill:#c2262b}
.sc-vo .vo-etat{opacity:0;transition:opacity .4s var(--ease)}
.sc-vo .vo-repere{opacity:0;transition:opacity .3s var(--ease)}
.sc-vo .vo-repere rect{fill:none;stroke:#e0393e;stroke-width:1.4;stroke-dasharray:4 3}
.sc-vo .vo-notes text{opacity:0}

.schema[data-etape="0"] .sc-vo .vo-ko,
.schema[data-etape="0"] .sc-vo .vo-repere,
.schema[data-etape="0"] .sc-vo .vo-note-0{opacity:1}
.schema[data-etape="1"] .sc-vo .vo-ok,
.schema[data-etape="1"] .sc-vo .vo-note-1{opacity:1}

/* ============================================================= DRAPEAU ==== */
.sc-dr .dr-bloc{fill:#fff;stroke:#d9d3e6;stroke-width:1}
.sc-dr .dr-l{fill:#b9b2c9}
.sc-dr .dr-jeu{opacity:0;transition:opacity .4s var(--ease)}
.sc-dr .dr-profil{fill:none;stroke:var(--amu-yellow);stroke-width:2;stroke-linejoin:round;
  opacity:0;transition:opacity .4s var(--ease)}
.sc-dr .dr-pr-0,.sc-dr .dr-pr-1{stroke:#e0393e}
.sc-dr .dr-notes text{opacity:0}

.schema[data-etape="0"] .sc-dr .dr-jeu-0,.schema[data-etape="0"] .sc-dr .dr-pr-0,
.schema[data-etape="0"] .sc-dr .dr-note-0{opacity:1}
.schema[data-etape="1"] .sc-dr .dr-jeu-1,.schema[data-etape="1"] .sc-dr .dr-pr-1,
.schema[data-etape="1"] .sc-dr .dr-note-1{opacity:1}
.schema[data-etape="2"] .sc-dr .dr-jeu-2,.schema[data-etape="2"] .sc-dr .dr-pr-2,
.schema[data-etape="2"] .sc-dr .dr-note-2{opacity:1}

/* ======================================================== moins d'animation */
@media (prefers-reduced-motion:reduce){
  .schema *,
  .schema *::before,
  .schema *::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
}

@media(max-width:560px){
  .schema{padding:14px}
  .schema-etape{font-size:13px;padding:9px 12px}
  .schema-titre{font-size:.98rem;margin-bottom:14px}
  .schema-legende{font-size:14.5px}
}

/* --- un développement sous la légende, quand une notion mérite plus ---------- */
.schema-plus{
  max-width:64ch;margin:22px auto 0;padding-top:20px;
  border-top:1px solid #ddd6e8;
}
.schema-plus h4{
  font-family:var(--font-medium);font-size:1rem;margin:0 0 10px;color:var(--black);
}
.schema-plus p{
  font-size:15px;line-height:1.6;color:#4a4458;margin:0 0 12px;text-wrap:pretty;
}
.schema-plus p:last-child{margin-bottom:0}
.schema-plus .amu-liste{margin:0 0 14px}
.schema-plus .amu-liste li{font-size:15px;line-height:1.6;color:#4a4458}
.schema-plus strong{color:var(--black);font-family:var(--font-medium);font-weight:400}