/* =============================================================================
   schemas.css — les animations du cours (Word, PowerPoint, Canva, Excel).
   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 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)}

/* ======================================================== 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}

/* =============================================================================
   Vocabulaire commun des étapes (généré) :
     a-N  visible à l'étape N seulement
     de-N visible à partir de l'étape N
     jq-N visible jusqu'à l'étape N-1
   Les règles jq viennent APRÈS les règles de : à spécificité égale, c'est
   l'ordre qui tranche, et « de-1 jq-3 » doit s'éteindre à l'étape 3.
   ========================================================================== */
.sc .a-0,.sc .a-1,.sc .a-2,.sc .a-3,.sc .a-4,.sc .a-5,
.sc .de-1,.sc .de-2,.sc .de-3,.sc .de-4,.sc .de-5{opacity:0;transition:opacity .45s var(--ease)}
.sc .jq-1,.sc .jq-2,.sc .jq-3,.sc .jq-4,.sc .jq-5{transition:opacity .45s var(--ease)}
.schema[data-etape="0"] .a-0{opacity:1}
.schema[data-etape="1"] .a-1{opacity:1}
.schema[data-etape="2"] .a-2{opacity:1}
.schema[data-etape="3"] .a-3{opacity:1}
.schema[data-etape="4"] .a-4{opacity:1}
.schema[data-etape="5"] .a-5{opacity:1}
.schema[data-etape="1"] .de-1,.schema[data-etape="2"] .de-1,.schema[data-etape="3"] .de-1,.schema[data-etape="4"] .de-1,.schema[data-etape="5"] .de-1{opacity:1}
.schema[data-etape="2"] .de-2,.schema[data-etape="3"] .de-2,.schema[data-etape="4"] .de-2,.schema[data-etape="5"] .de-2{opacity:1}
.schema[data-etape="3"] .de-3,.schema[data-etape="4"] .de-3,.schema[data-etape="5"] .de-3{opacity:1}
.schema[data-etape="4"] .de-4,.schema[data-etape="5"] .de-4{opacity:1}
.schema[data-etape="5"] .de-5{opacity:1}
.schema[data-etape="1"] .jq-1,.schema[data-etape="2"] .jq-1,.schema[data-etape="3"] .jq-1,.schema[data-etape="4"] .jq-1,.schema[data-etape="5"] .jq-1{opacity:0}
.schema[data-etape="2"] .jq-2,.schema[data-etape="3"] .jq-2,.schema[data-etape="4"] .jq-2,.schema[data-etape="5"] .jq-2{opacity:0}
.schema[data-etape="3"] .jq-3,.schema[data-etape="4"] .jq-3,.schema[data-etape="5"] .jq-3{opacity:0}
.schema[data-etape="4"] .jq-4,.schema[data-etape="5"] .jq-4{opacity:0}
.schema[data-etape="5"] .jq-5{opacity:0}

/* la note de bas de schéma, et la touche dessinée */
.sc .sc-legende{font-size:11.5px;fill:#4a4458}
.sc .sc-touche rect{fill:#fff;stroke:var(--black);stroke-width:1}
.sc .sc-touche text{font-family:var(--font-medium);font-size:11px;fill:var(--black)}

/* ========================================================= W : TABULATIONS */
.sc-tb .tb-regle{fill:#fff;stroke:#cfc9dd}
.sc-tb .tb-grad{stroke:#8a8399;stroke-width:.8}
.sc-tb .tb-chiffre{font-size:7px;fill:#8a8399}
.sc-tb .tb-taquet path{fill:none;stroke:var(--amu-purple-fonce);stroke-width:2}
.sc-tb .tb-taquet circle{fill:var(--amu-purple-fonce)}
.sc-tb .tb-txt{font-size:8.6px;fill:var(--encre)}
.sc-tb .tb-tete{font-family:var(--font-medium)}
.sc-tb .tb-barre{stroke:var(--encre);stroke-width:1}
/* chaque colonne porte sa position à chaque étape (--d0 … --d3, calculées en PHP) */
.sc-tb .tb-col{transform:translateX(var(--d0));transition:transform .6s var(--ease)}
.schema[data-etape="1"] .sc-tb .tb-col{transform:translateX(var(--d1))}
.schema[data-etape="2"] .sc-tb .tb-col{transform:translateX(var(--d2))}
.schema[data-etape="3"] .sc-tb .tb-col{transform:translateX(var(--d3))}

/* =================================================== W : PARAGRAPHES VIDES */
.sc-pv .pv-page{fill:#fff;stroke:#d9d3e6}
.sc-pv .pv-ligne{fill:#b9b2c9}
.sc-pv .pv-pied{font-size:11px;fill:var(--amu-purple-fonce);font-family:var(--font-medium)}
.sc-pv .pv-halo{fill:none;stroke:#c0392b;stroke-width:1.2}
.sc-pv .pv-par{transition:transform .6s var(--ease)}
.sc-pv .pv-vide{transition:opacity .4s var(--ease)}
.schema[data-etape="2"] .sc-pv .pv-vide,.schema[data-etape="3"] .sc-pv .pv-vide{opacity:0}
.schema[data-etape="2"] .sc-pv .pv-p2{transform:translateY(-14px)}
.schema[data-etape="2"] .sc-pv .pv-p3{transform:translateY(-28px)}
.schema[data-etape="2"] .sc-pv .pv-p4{transform:translateY(-42px)}
.schema[data-etape="3"] .sc-pv .pv-p2{transform:translateY(-4px)}
.schema[data-etape="3"] .sc-pv .pv-p3{transform:translateY(-8px)}
.schema[data-etape="3"] .sc-pv .pv-p4{transform:translateY(-12px)}
.sc-pv .pv-esp path{fill:none;stroke:#1e8a4c;stroke-width:1.2}
.sc-pv .pv-esp text{font-size:9px;fill:#1e8a4c}
.sc-pv .pv-dlg-fond{fill:#fff;stroke:#cfc9dd}
.sc-pv .pv-dlg-t{font-size:9.5px;fill:#4a4458}
.sc-pv .pv-champ{fill:var(--grey);stroke:#cfc9dd}
.sc-pv .pv-code{font-family:ui-monospace,Menlo,monospace;font-size:10px;fill:var(--black)}

/* ============================================================== W : STYLES */
.sc-ws .ws-volet,.sc-ws .ws-page{fill:#fff;stroke:#d9d3e6}
.sc-ws .ws-volet-t{font-family:var(--font-medium);font-size:11px;fill:var(--black)}
.sc-ws .ws-item text{font-size:10px;fill:#4a4458}
.sc-ws .ws-item rect{fill:var(--grey);stroke:#cfc9dd}
.sc-ws .ws-pastille{fill:var(--encre);transition:fill .5s var(--ease)}
.sc-ws .ws-titre{fill:var(--encre);transform-box:fill-box;transform-origin:left center;
  transition:fill .5s var(--ease),transform .5s var(--ease)}
.sc-ws .ws-txt{fill:#c9c2db}
.sc-ws .ws-num{font-family:var(--font-medium);font-size:9px;fill:#4472c4}
.sc-ws .ws-tag rect{fill:#fff;stroke:var(--amu-purple-fonce)}
.sc-ws .ws-tag text{font-size:8px;fill:var(--amu-purple-fonce)}
.sc-ws .ws-maj{fill:#4472c4}
.sc-ws .ws-bloc .ws-titre{transition:fill .5s var(--ease),transform .5s var(--ease)}
.schema[data-etape="2"] .sc-ws .ws-titre,.schema[data-etape="3"] .sc-ws .ws-titre{fill:#4472c4;transform:scaleY(1.45)}
.schema[data-etape="2"] .sc-ws .ws-pastille,.schema[data-etape="3"] .sc-ws .ws-pastille{fill:#4472c4}
.schema[data-etape="3"] .sc-ws .ws-titre{transform:translateX(18px) scaleY(1.45)}
.schema[data-etape="2"] .sc-ws .ws-item-a rect{stroke:#4472c4;stroke-width:1.6}

/* ============================================================ W : SECTIONS */
.sc-ss .ss-feuille{fill:#fff;stroke:#d9d3e6}
.sc-ss .ss-entete rect{fill:var(--amu-purple-fonce)}
.sc-ss .ss-entete path{stroke:var(--amu-purple-fonce);stroke-width:.8}
.sc-ss .ss-ligne{fill:#c9c2db}
.sc-ss .ss-grand{fill:var(--encre)}
.sc-ss .ss-num{font-size:9px;fill:#4a4458}
.sc-ss .ss-alerte{fill:none;stroke:#c0392b;stroke-width:1.2;stroke-dasharray:3 2}
.sc-ss .ss-bordure{fill:none;stroke:var(--amu-yellow);stroke-width:3}
.sc-ss .ss-coupure path{stroke:var(--amu-purple-fonce);stroke-width:1.2;stroke-dasharray:5 4}
.sc-ss .ss-coupure text{font-family:var(--font-medium);font-size:10px;fill:var(--amu-purple-fonce)}

/* ============================================================ W : SOMMAIRE */
.sc-so .so-page{fill:#fff;stroke:#d9d3e6}
.sc-so .so-titre text{font-family:var(--font-medium);font-size:9.5px;fill:#4472c4}
.sc-so .so-t2 text{font-size:9px}
.sc-so .so-l{fill:#c9c2db}
.sc-so .so-tags text{font-size:7.5px;fill:var(--amu-purple-fonce)}
.sc-so .so-som-t{font-family:var(--font-medium);font-size:12px;fill:var(--black)}
.sc-so .so-entree text{font-size:9px;fill:var(--encre)}
.sc-so .so-entree path{stroke:#8a8399;stroke-width:1;stroke-dasharray:1 2.5}
.schema[data-etape="1"] .sc-so .so-entree{transition-delay:calc(var(--i) * 180ms)}
.sc-so .so-faux{fill:rgba(192,57,43,.08);stroke:#c0392b;stroke-width:1}
.sc-so .so-ok{fill:rgba(30,138,76,.08);stroke:#1e8a4c;stroke-width:1}

/* ============================================================== P : PLAN */
.sc-pp .pp-volet{fill:#fff;stroke:#d9d3e6}
.sc-pp .pp-l{font-size:10px;fill:var(--encre)}
.sc-pp .pp-n0{font-family:var(--font-medium);font-size:11px}
.sc-pp .pp-n2{font-size:9.5px;fill:#4a4458}
.sc-pp .pp-icone text{font-size:10px;fill:#8a8399}
.sc-pp .pp-icone rect{fill:none;stroke:#8a8399}
.sc-pp .pp-diapo{fill:#fff;stroke:#cfc9dd}
.sc-pp .pp-titre{font-family:var(--font-medium);font-size:12px;fill:#c26a10}
.sc-pp .pp-mini{font-size:7.5px;fill:#4a4458}
.sc-pp .pp-puce{fill:#c26a10}

/* ============================================================ P : MASQUE */
.sc-pm .pm-fond{fill:#fff;stroke:#cfc9dd}
.sc-pm .pm-cadre{transition:stroke .3s var(--ease),stroke-width .3s var(--ease)}
.schema:not([data-etape="0"]) .sc-pm .pm-cadre{stroke:var(--amu-purple-fonce);stroke-width:2}
.sc-pm .pm-etiq{font-family:var(--font-medium);font-size:11px;fill:var(--black)}
.sc-pm .pm-maquette{font-size:6.5px;fill:#fff}
.sc-pm .pm-titre{fill:#8a8399;transition:fill .5s var(--ease)}
.sc-pm .pm-sous,.sc-pm .pm-l{fill:#d3cde0}
.sc-pm .pm-n{font-size:8px;fill:#8a8399}
.sc-pm .pm-logo rect{fill:var(--encre)}
.sc-pm .pm-logo path{fill:var(--amu-yellow)}
.sc-pm .pm-fleche{fill:none;stroke:var(--amu-purple-fonce);stroke-width:1.5}
.schema[data-etape="2"] .sc-pm .pm-lie,.schema[data-etape="3"] .sc-pm .pm-lie,
.schema[data-etape="4"] .sc-pm .pm-lie{fill:#c0392b}

/* ====================================================== P : DISPOSITIONS */
.sc-pd .pd-fond{fill:#fff;stroke:#cfc9dd}
.sc-pd .pd-zone{fill:none;stroke:#b9b2c9;stroke-dasharray:4 3}
.sc-pd .pd-t{font-family:var(--font-medium);font-size:15px;fill:#c26a10}
.sc-pd .pd-s{font-size:11px;fill:#4a4458}
.sc-pd .pd-puces circle{fill:#c26a10}
.sc-pd .pd-puces rect{fill:#c9c2db}
.sc-pd .pd-image rect{fill:var(--grey);stroke:#cfc9dd}
.sc-pd .pd-image path{fill:#b9b2c9}
.sc-pd .pd-image circle{fill:var(--amu-yellow)}
.sc-pd .pd-wordart{font-family:var(--font-title);font-size:19px;fill:#e67e22;stroke:#a04f0c;stroke-width:.6}
.sc-pd .pd-coeurs circle{fill:#e67e22}

/* ========================================================== C : FORMATS */
.sc-cf .cf-rect{fill:#fff;stroke:#b9b2c9;stroke-width:1.2;transition:fill .4s var(--ease),stroke .4s var(--ease)}
.sc-cf .cf-dim{font-size:9px;fill:#8a8399;transition:fill .4s var(--ease)}
.sc-cf .cf-nom{font-size:9.5px;fill:#4a4458}
.sc-cf .sc-legende{font-size:12px}
.schema[data-etape="1"] .sc-cf .cf-f1 .cf-rect,.schema[data-etape="2"] .sc-cf .cf-f2 .cf-rect,
.schema[data-etape="3"] .sc-cf .cf-f3 .cf-rect,.schema[data-etape="4"] .sc-cf .cf-f4 .cf-rect{fill:var(--amu-purple-fonce);stroke:var(--amu-purple-fonce)}
.schema[data-etape="1"] .sc-cf .cf-f1 .cf-dim,.schema[data-etape="2"] .sc-cf .cf-f2 .cf-dim,
.schema[data-etape="3"] .sc-cf .cf-f3 .cf-dim,.schema[data-etape="4"] .sc-cf .cf-f4 .cf-dim{fill:#fff}
.schema[data-etape="1"] .sc-cf .cf-f1 .cf-nom,.schema[data-etape="2"] .sc-cf .cf-f2 .cf-nom,
.schema[data-etape="3"] .sc-cf .cf-f3 .cf-nom,.schema[data-etape="4"] .sc-cf .cf-f4 .cf-nom{fill:var(--black);font-family:var(--font-medium)}

/* ============================================================ C : PLANS */
.sc-cp .cp-fond{fill:#f39c34}
.sc-cp .cp-logo circle{fill:#e8872a}
.sc-cp .cp-logo text{font-family:var(--font-title);font-size:18px;fill:#e8872a}
.sc-cp .cp-blanc{fill:#fff}
.sc-cp .cp-cadre rect{fill:#6f6785}
.sc-cp .cp-cadre path{fill:#fff}
.sc-cp .cp-etiq{font-size:10px;fill:#8a8399}
.sc-cp .cp-p rect{fill:#fff;stroke:#cfc9dd}
.sc-cp .cp-p text{font-size:10px;fill:var(--encre)}
.sc-cp .cp-p{transition:transform .55s var(--ease),opacity .4s var(--ease)}
/* la pile : 0 = en haut. Étape par étape, chaque objet prend sa place. */
.sc-cp .cp-p-cadre{opacity:0}
.sc-cp .cp-p-rect{opacity:0}
.sc-cp .cp-p-logo{transform:translateY(0)}
.sc-cp .cp-p-fond{transform:translateY(28px)}
.schema[data-etape="1"] .sc-cp .cp-p-rect{opacity:1;transform:translateY(0)}
.schema[data-etape="1"] .sc-cp .cp-p-logo{transform:translateY(28px)}
.schema[data-etape="1"] .sc-cp .cp-p-fond{transform:translateY(56px)}
.schema[data-etape="2"] .sc-cp .cp-p-logo{transform:translateY(0)}
.schema[data-etape="2"] .sc-cp .cp-p-rect{opacity:1;transform:translateY(28px)}
.schema[data-etape="2"] .sc-cp .cp-p-fond{transform:translateY(56px)}
.schema[data-etape="3"] .sc-cp .cp-p-cadre{opacity:1;transform:translateY(0)}
.schema[data-etape="3"] .sc-cp .cp-p-logo{transform:translateY(28px)}
.schema[data-etape="3"] .sc-cp .cp-p-rect{opacity:1;transform:translateY(56px)}
.schema[data-etape="3"] .sc-cp .cp-p-fond{transform:translateY(84px)}
.schema[data-etape="4"] .sc-cp .cp-p-logo{transform:translateY(0)}
.schema[data-etape="4"] .sc-cp .cp-p-rect{opacity:1;transform:translateY(28px)}
.schema[data-etape="4"] .sc-cp .cp-p-cadre{opacity:1;transform:translateY(56px)}
.schema[data-etape="4"] .sc-cp .cp-p-fond{transform:translateY(84px)}
.schema[data-etape="1"] .sc-cp .cp-p-rect rect,.schema[data-etape="2"] .sc-cp .cp-p-rect rect,
.schema[data-etape="3"] .sc-cp .cp-p-cadre rect,.schema[data-etape="4"] .sc-cp .cp-p-cadre rect{stroke:var(--amu-purple-fonce);stroke-width:1.6}

/* =========================================================== C : EXPORT */
.sc-ce .ce-carte{fill:#fff;stroke:#b9b2c9}
.sc-ce .ce-dos{fill:var(--grey)}
.sc-ce .ce-soleil{fill:var(--amu-yellow)}
.sc-ce .ce-mont{fill:var(--amu-purple-fonce)}
.sc-ce .ce-ligne{fill:#c9c2db}
.sc-ce .ce-play{fill:var(--encre)}
.sc-ce .ce-bouge{fill:var(--amu-purple);animation:ce-bouge 1.6s var(--ease) infinite alternate}
@keyframes ce-bouge{to{transform:translateX(60px)}}
.sc-ce .ce-son path{fill:var(--encre)}
.sc-ce .ce-sans path{opacity:.35}
.sc-ce .ce-barre{stroke:#c0392b;stroke-width:2.4;opacity:1 !important}
.sc-ce .ce-cadre{fill:none;stroke:#cfc9dd}
.sc-ce .ce-choix{fill:var(--amu-yellow)}
.sc-ce .ce-f{font-family:var(--font-medium);font-size:11px;fill:var(--black)}
.sc-ce .ce-d{font-size:9.5px;fill:#6a6280}

/* ============================================================ X : GRILLE */
.sc .xg-entete{fill:#eeecf3;stroke:#cfc9dd;stroke-width:.8}
.sc .xg-cell{fill:#fff;stroke:#dcd7e6;stroke-width:.8}
.sc .xg-lettre{font-size:9px;fill:#6a6280}
.sc .xg-val{font-size:10px;fill:var(--encre)}
.sc .xg-tete{font-family:var(--font-medium)}
.sc .xg-barre{fill:#fff;stroke:#cfc9dd}
.sc .xg-fx{font-size:9px;font-style:italic;fill:#8a8399}
.sc .xg-formule{font-family:ui-monospace,Menlo,monospace;font-size:10px;fill:var(--black)}
.sc .xr-hl{fill:none;stroke-width:2}
.sc .xr-bleu{stroke:#2f6fd6}
.sc .xr-orange{stroke:#e0891e}
.sc .xr-rouge{stroke:#c0392b;stroke-dasharray:3 2}
.sc .xr-erreur{fill:#c0392b;font-family:var(--font-medium)}
.sc-xr .sc-note{font-size:11px}
.sc-xf .xf-plage{fill:rgba(47,111,214,.08);stroke:#2f6fd6;stroke-width:1.2;stroke-dasharray:4 3}
.sc-xf .xf-res{font-family:var(--font-medium);fill:#1e8a4c}
.sc-xf .xf-nc{fill:#8a8399}
.sc-xf .xf-barre{stroke:#c0392b;stroke-width:1.6}
.sc-xf .xf-syntaxe{fill:#6a6280}
.sc-xf .sc-note.sc-legende{font-size:11px}

/* ======================================================= X : GRAPHIQUES */
.sc-xgr .xgr-axe{fill:none;stroke:#8a8399;stroke-width:1}
.sc-xgr .xgr-etiq{font-size:9px;fill:#4a4458}
.sc-xgr .xgr-courbe{fill:none;stroke:var(--amu-purple-fonce);stroke-width:2.4;
  stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.2s var(--ease) .2s}
.schema[data-etape="1"] .sc-xgr .xgr-courbe{stroke-dashoffset:0}
.sc-xgr .xgr-point{fill:var(--amu-purple-fonce);opacity:0;transition:opacity .3s var(--ease)}
.schema[data-etape="1"] .sc-xgr .xgr-point{opacity:1;transition-delay:calc(.25s + var(--i) * 170ms)}
.sc-xgr .xgr-barre{fill:var(--amu-purple-fonce);transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);
  transition:transform .6s var(--ease)}
.schema[data-etape="2"] .sc-xgr .xgr-barre{transform:scaleY(1);transition-delay:calc(var(--i) * 90ms)}
.sc-xgr .xgr-sect{fill:none;stroke-width:80}
.sc-xgr .xgr-s0{stroke:var(--amu-purple-fonce)} .sc-xgr .xgr-s0-f{fill:var(--amu-purple-fonce)}
.sc-xgr .xgr-s1{stroke:var(--amu-yellow)}       .sc-xgr .xgr-s1-f{fill:var(--amu-yellow)}
.sc-xgr .xgr-s2{stroke:#53DE94}                 .sc-xgr .xgr-s2-f{fill:#53DE94}
.sc-xgr .xgr-s3{stroke:#2b2340}                 .sc-xgr .xgr-s3-f{fill:#2b2340}

/* ==================================================== X : TRI ET FILTRE */
.sc-xt .xt-ligne{transition:transform .6s var(--ease),opacity .4s var(--ease)}
.sc-xt .xt-filtre path{fill:var(--amu-purple-fonce);stroke:var(--amu-purple-fonce);stroke-width:1.2}
/* étape 1 : Genre = BD ado → lignes 2, 3, 5 */
.schema[data-etape="1"] .sc-xt .xt-l1,.schema[data-etape="1"] .sc-xt .xt-l4,.schema[data-etape="1"] .sc-xt .xt-l6,
.schema[data-etape="2"] .sc-xt .xt-l1,.schema[data-etape="2"] .sc-xt .xt-l2,.schema[data-etape="2"] .sc-xt .xt-l4,.schema[data-etape="2"] .sc-xt .xt-l6,
.schema[data-etape="3"] .sc-xt .xt-l1,.schema[data-etape="3"] .sc-xt .xt-l2,.schema[data-etape="3"] .sc-xt .xt-l4,.schema[data-etape="3"] .sc-xt .xt-l6{opacity:0}
.schema[data-etape="1"] .sc-xt .xt-l2{transform:translateY(-22px)}
.schema[data-etape="1"] .sc-xt .xt-l3{transform:translateY(-22px)}
.schema[data-etape="1"] .sc-xt .xt-l5{transform:translateY(-44px)}
/* étape 2 : + Auteur = Dupont → lignes 3, 5 */
.schema[data-etape="2"] .sc-xt .xt-l3{transform:translateY(-44px)}
.schema[data-etape="2"] .sc-xt .xt-l5{transform:translateY(-66px)}
/* étape 3 : tri décroissant des prêts → 5 (44) passe devant 3 (27) */
.schema[data-etape="3"] .sc-xt .xt-l5{transform:translateY(-88px)}
.schema[data-etape="3"] .sc-xt .xt-l3{transform:translateY(-22px)}
.schema[data-etape="3"] .sc-xt .xt-l5 .xg-cell{fill:#eafaf1}

/* les résultats attendus redessinés (organigramme, pyramide) */
.resultat-svg{margin:0 0 18px}
.resultat-svg svg{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--trait);padding:10px}
.resultat-svg figcaption{margin-top:8px;font-size:.87rem;line-height:1.5;color:var(--gris-txt)}
.rs-orga .rs-traits path{fill:none;stroke:#44546a;stroke-width:1.6}
.rs-orga .rs-boites rect{fill:#4f76b8}
.rs-orga .rs-boites text{font-family:var(--font-medium);font-size:12px;fill:#fff;text-anchor:middle}
.rs-maslow .rs-etages polygon{fill:#5b82c0;stroke:#fff;stroke-width:2}
.rs-maslow .rs-etages text{font-family:var(--font-medium);fill:#fff;text-anchor:middle}
.rs-maslow .rs-fleche path{fill:#5b82c0;stroke:#44546a;stroke-width:1}
.rs-maslow .rs-fleche text{font-size:13px;fill:#fff}

@media (prefers-reduced-motion:reduce){
  .sc-ce .ce-bouge{animation:none}
}