/* =============================================================
   « Pour comprendre en 30 secondes » — le diaporama explicatif.
   Quatre idées, une illustration SVG animée chacune (faite main,
   aucune ressource externe). Sans JavaScript : les quatre diapos
   s'affichent à la suite, complètes, illustrations à l'état final.
   ⚠️ Toute illustration est dessinée dans son ÉTAT FINAL ; les
      animations ne déclarent que leur point de départ (`from`).
      Couper les animations (reduced-motion, pas de JS) laisse donc
      toujours une image complète.
   Animations : transform / opacity / stroke-dashoffset seulement.
   ============================================================= */

.expl{margin:8px 0 34px;padding:22px 22px 16px;border:1px solid var(--trait);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,150,60,.06),transparent 55%),var(--ardoise)}
.expl h2{font-size:18px;font-weight:600;letter-spacing:.01em;margin:0 0 16px}

/* --- Une diapo : l'illustration, puis le texte --------------------------- */
.diapo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px 34px;align-items:center}
.diapo + .diapo{margin-top:24px;padding-top:24px;border-top:1px solid var(--trait)}
.diapo-illu{position:relative;width:100%;max-width:480px;justify-self:center;padding:10px;border:1px solid var(--trait);border-radius:13px;
  background:radial-gradient(120% 70% at 50% 118%,rgba(255,150,60,.16),transparent 62%),var(--nuit)}
.diapo-illu svg{display:block;width:100%;height:auto;overflow:visible}

.diapo-texte{position:relative;padding-left:42px;min-width:0}
.diapo-texte .diapo-num{position:absolute;left:0;top:1px;margin:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:13px;font-weight:700;line-height:1;color:var(--nuit);background:var(--soleil)}
.diapo-texte h3{font-size:19px;line-height:1.3;margin:0 0 10px;color:var(--blanc)}
.diapo-texte p{margin:0 0 12px;color:var(--gris);font-size:15px;line-height:1.62}
.diapo-texte b{color:var(--blanc)}
.diapo-texte .diapo-note{font-size:13.5px;color:var(--gris-sourd);padding:9px 12px;border-left:2px solid var(--soleil);
  background:rgba(255,150,60,.05);border-radius:0 8px 8px 0}

.expl-chiffres{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.expl-chiffres li{padding:10px 12px 11px;border:1px solid var(--trait);border-radius:11px;background:var(--nuit);
  color:var(--gris);font-size:13.5px;line-height:1.45}
.expl-chiffres b{display:block;margin:0 0 3px;font-size:clamp(21px,2.5vw,27px);font-weight:700;line-height:1.15;
  color:var(--soleil-clair);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.expl-chiffres b small{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;color:var(--soleil-clair)}
.compte-vue{display:inline}
.compte-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:720px){
  .expl{padding:18px 14px 12px}
  .diapo{grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
  .diapo-illu{max-width:440px;padding:6px}
  .diapo-texte{padding-left:0}
  .diapo-texte .diapo-num{position:static;display:inline-grid;width:24px;height:24px;font-size:12px;margin:0 0 6px}
  .diapo-texte h3{font-size:18px}
  .diapo-texte p{font-size:14.5px}
}
@media(max-width:360px){.expl-chiffres li{padding:9px 9px 10px;font-size:13px}}

/* --- Les dessins : jetons de la charte ----------------------------------- */
.diapo-illu text{font-family:var(--sans)}
.f-soleil{fill:var(--soleil)} .f-numen{fill:var(--numen)} .f-gris{fill:var(--gris)} .f-blanc{fill:var(--blanc)}
.f-carte{fill:var(--ardoise-clair)}
.f-orange{fill:var(--g-orange)} .f-jaune{fill:var(--g-jaune)} .f-vert{fill:var(--g-vert)} .f-rouge{fill:var(--g-rouge)}
.planche{fill:var(--gris-sourd);opacity:.55}
.planche-sourde{opacity:.25}
.carte{fill:var(--ardoise-clair);stroke:var(--trait);stroke-width:1}
.carte-soleil{stroke:rgba(255,150,60,.55)}
.filet{stroke:var(--trait);stroke-width:1;fill:none}
.barre{fill:var(--gris-sourd);opacity:.42}
.t-titre{font-size:13px;font-weight:600;fill:var(--blanc)}
.t-titre-g{font-size:16px;font-weight:700;letter-spacing:.06em;fill:var(--blanc)}
.t-sous{font-size:10.5px;fill:var(--gris)}
.t-numen{font-size:10.5px;font-weight:600;fill:var(--numen)}
.t-entete{font-size:9.5px;font-weight:700;letter-spacing:.14em;fill:var(--soleil-clair)}
.t-legende{font-size:11px;font-weight:600;letter-spacing:.04em;fill:var(--soleil-clair)}
.t-legende-sourde{font-size:11px;fill:var(--gris)}
.t-num,.t-art,.t-jeton{font-family:var(--mono)}
.t-num{font-size:11px;fill:var(--blanc)}
.t-art{font-size:11.5px;font-weight:600;fill:var(--blanc)}
.t-lettre,.t-lettre-g{font-family:var(--mono);font-weight:700;fill:var(--nuit);text-anchor:middle}
.t-lettre{font-size:11px}
.t-lettre-g{font-size:14px}
.t-emporte{font-size:10.5px;font-style:italic;fill:var(--soleil-clair)}
.t-date{font-size:10.5px;font-weight:600;fill:var(--soleil-clair)}

/* 1. L'étagère et le recueil ouvert */
.livre{fill:var(--ardoise-clair);stroke:var(--trait);stroke-width:1}
.livre-actif{fill:var(--soleil);stroke:var(--soleil-clair)}
.livre-dore{fill:var(--soleil);opacity:.5}
.livre-dore-actif{fill:var(--nuit);opacity:.35}
.livre-titre{font-size:10px;font-weight:700;letter-spacing:.1em;fill:var(--gris)}
.livre-titre-actif{fill:var(--nuit)}
.pl-l{fill:var(--soleil)} .pl-r{fill:var(--numen)} .pl-a{fill:var(--gris)}
.marche-l{fill:rgba(255,150,60,.13);stroke:rgba(255,150,60,.6)}
.marche-r{fill:rgba(63,216,200,.08);stroke:rgba(63,216,200,.45)}
.marche-a{fill:rgba(150,150,162,.07);stroke:var(--trait)}
.fleche,.fleche-pointe{fill:none;stroke:var(--soleil-clair);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.l1-ouvre{transform:translateY(-8px)}
.l1-defile{transform:translateY(-66px)}

/* 2. Les 76 tranches */
.l2-dos{fill:var(--soleil);transform-box:fill-box;transform-origin:50% 100%}
.l2-ancien{fill:rgba(150,150,162,.06);stroke:var(--gris-sourd);stroke-width:1;opacity:.6}

/* 3. Le circuit de la donnée */
.flux{fill:none;stroke:var(--soleil-clair);stroke-width:2;stroke-dasharray:3 5;stroke-linecap:round}
.flux-pointe{fill:none;stroke:var(--soleil-clair);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.base-cyl{fill:rgba(63,216,200,.14);stroke:var(--numen);stroke-width:1.4}
.base-haut{fill:var(--numen)}
.base-trait{fill:none;stroke:var(--numen);stroke-width:1;opacity:.6}
.puce{fill:var(--nuit);stroke:var(--numen);stroke-width:1}
.t-puce{font-size:10px;font-weight:600;fill:var(--numen)}
.tour,.tour-pointe{fill:none;stroke:var(--gris);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.l3-tour{transform-box:view-box;transform-origin:203px 188px}
.horizon{stroke:var(--blanc);stroke-width:2.5;stroke-linecap:round}
.l3-halo{fill:none;stroke:var(--soleil);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}

/* 4. La fiche d'article et ses défauts */
.t-jeton{font-size:10.5px;font-weight:600}
.j-orange{fill:var(--g-orange)} .j-vert{fill:var(--g-vert)} .j-rouge{fill:var(--g-rouge)}
.souligne{fill:none;stroke-width:1.4;stroke-dasharray:1}
.s-orange{stroke:var(--g-orange)}
.s-rouge{stroke:var(--g-rouge)}
.chaine{fill:none;stroke-width:2;stroke-linecap:round}
.c-orange{stroke:var(--g-orange)}
.guide{fill:none;stroke-width:1.2;opacity:.8}
.g-or{stroke:var(--g-orange)} .g-ja{stroke:var(--g-jaune)} .g-ve{stroke:var(--g-vert)} .g-ro{stroke:var(--g-rouge)}
.doublon{fill:rgba(245,220,90,.06);stroke:var(--g-jaune);stroke-width:1.3}
.doublon-fantome{fill:none;stroke:var(--g-jaune);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.barre-nom{fill:none;stroke:var(--blanc);stroke-width:1.3;opacity:.9}
.badge{stroke-width:1}
.b-orange{fill:rgba(240,120,42,.12);stroke:rgba(240,120,42,.55)}
.b-jaune{fill:rgba(245,220,90,.10);stroke:rgba(245,220,90,.5)}
.b-vert{fill:rgba(47,168,122,.13);stroke:rgba(47,168,122,.6)}
.b-rouge{fill:rgba(217,63,122,.13);stroke:rgba(217,63,122,.6)}
.t-badge{font-size:11px;font-weight:700;fill:var(--blanc)}
.t-badge-sous{font-size:9.5px;fill:var(--gris)}

/* --- Le diaporama (posé par explication.js) ------------------------------ */
.expl-actif .expl-diapos{display:grid;touch-action:pan-y;overflow:hidden}
.expl-actif .diapo{grid-area:1/1;margin:0;padding:0;border:0;opacity:0;visibility:hidden;transform:translateX(32px);
  transition:opacity .4s ease,transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s linear .55s}
.expl-actif .diapo.avant{transform:translateX(-32px)}
.expl-actif .diapo.active{opacity:1;visibility:visible;transform:none;
  transition:opacity .45s ease .08s,transform .6s cubic-bezier(.2,.7,.2,1) .04s,visibility 0s}

/* Les contrôles */
.expl-nav{display:flex;align-items:center;gap:10px;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--trait)}
.expl-nav[hidden]{display:none}
.expl-nav button{font:inherit;color:var(--blanc);background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.expl-nav button:focus-visible{outline:2px solid var(--soleil);outline-offset:2px}
.expl-lecture,.expl-fleche{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;
  border:1px solid var(--trait) !important;border-radius:18px;background:var(--nuit) !important;transition:border-color .2s,background-color .2s}
.expl-lecture{padding:0 14px 0 11px;font-size:13px !important;font-weight:600;min-width:94px}
.expl-fleche{width:36px;padding:0}
.expl-lecture:hover,.expl-fleche:hover{border-color:var(--soleil) !important}
.expl-nav svg{width:15px;height:15px;flex:none}
.expl-lecture svg{fill:var(--soleil)}
.expl-fleche svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-lecture{display:none}
.expl:not(.en-lecture) .ic-pause{display:none}
.expl:not(.en-lecture) .ic-lecture{display:block}

.expl-segs{flex:1;min-width:0;display:flex;gap:6px}
.expl-seg{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:10px 0 !important;text-align:left}
.seg-piste{display:block;height:4px;border-radius:2px;background:var(--trait);overflow:hidden}
.seg-plein{display:block;height:100%;border-radius:2px;background:var(--soleil);transform:scaleX(0);transform-origin:0 50%}
.expl-seg.vu .seg-plein{transform:none;opacity:.5}
.expl-seg.actif .seg-plein{transform:none}
.en-lecture .expl-seg.actif .seg-plein{animation:expl-remplir var(--duree,8s) linear both}
.seg-titre{font-size:12px;line-height:1.2;color:var(--gris-sourd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.expl-seg.actif .seg-titre,.expl-seg:hover .seg-titre{color:var(--blanc)}
.expl-seg:hover .seg-piste{background:var(--gris-sourd)}
@keyframes expl-remplir{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:560px){
  .expl-nav{gap:6px}
  .expl-lecture{min-width:0;width:36px;padding:0}
  .expl-lecture-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .seg-titre{display:none}
  .expl-segs{gap:4px}
}

/* --- Les animations : jouées quand la diapo est active ET visible -------- */
@keyframes expl-monte{from{opacity:0;transform:translateY(14px)}}
@keyframes expl-fondu{from{opacity:0}}
@keyframes expl-pop{from{opacity:0;transform:scale(.3)}}
@keyframes expl-zoom{from{opacity:0;transform:scale(.9)}}
@keyframes expl-glisse{from{opacity:0;transform:translateX(-12px)}}
@keyframes expl-trace{from{stroke-dashoffset:1}}
@keyframes expl-souleve{from{transform:none}}
@keyframes expl-defile{from{transform:none}}
@keyframes expl-remplit{from{transform:scaleY(0)}}
@keyframes expl-flux{to{stroke-dashoffset:-16}}
@keyframes expl-tourne{from{transform:rotate(-360deg)}}
@keyframes expl-halo{0%{opacity:0;transform:scale(.97)}35%{opacity:.9}100%{opacity:0;transform:scale(1.05)}}
@keyframes expl-decale{from{opacity:0;transform:translate(-5px,-5px)}}
@keyframes expl-casse-g{from{transform:translateX(5px)}}
@keyframes expl-casse-d{from{transform:translateX(-5px)}}

.expl-actif .a-pop,.expl-actif .a-zoom{transform-box:fill-box;transform-origin:center}
.expl-actif .a-zoom{transform-origin:0 50%}
.expl-actif .a-trace{stroke-dasharray:1}
.expl-actif .joue .a-monte{animation:expl-monte .6s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.expl-actif .joue .a-fondu{animation:expl-fondu .5s ease var(--d,0s) both}
.expl-actif .joue .a-pop{animation:expl-pop .45s cubic-bezier(.3,1.5,.5,1) var(--d,0s) both}
.expl-actif .joue .a-zoom{animation:expl-zoom .6s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.expl-actif .joue .a-glisse{animation:expl-glisse .5s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.expl-actif .joue .a-trace{animation:expl-trace .7s cubic-bezier(.45,0,.3,1) var(--d,0s) both}
.expl-actif .joue .a-decale{animation:expl-decale .6s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.expl-actif .joue .diapo-texte>*{animation:expl-monte .55s cubic-bezier(.2,.7,.2,1) both}
.expl-actif .joue .diapo-texte>:nth-child(2){animation-delay:.06s}
.expl-actif .joue .diapo-texte>:nth-child(3){animation-delay:.14s}
.expl-actif .joue .diapo-texte>:nth-child(4){animation-delay:.22s}

.expl-actif .joue .l1-ouvre{animation:expl-souleve .5s cubic-bezier(.2,.7,.2,1) 1s both}
.expl-actif .joue .l1-defile{animation:expl-defile 2.6s cubic-bezier(.5,0,.3,1) 1.7s both}
.expl-actif .joue .l2-dos{animation:expl-remplit .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.25s + var(--i) * 22ms)}
.expl-actif .joue .l2-ancien{animation:expl-fondu .35s ease both;animation-delay:calc(2.1s + var(--i) * 28ms)}
.expl-actif .joue .l3-flux,.expl-actif .joue .flux{animation:expl-fondu .5s ease var(--d,0s) both,expl-flux 1s linear 2.4s 7}
.expl-actif .joue .l3-halo{animation:expl-halo 1.1s ease-out var(--d,0s) both}
.expl-actif .joue .l3-tour{animation:expl-tourne 1.4s cubic-bezier(.5,0,.3,1) 2.2s both}
.expl-actif .joue .l4-casse-g{animation:expl-casse-g .4s ease 1.5s both}
.expl-actif .joue .l4-casse-d{animation:expl-casse-d .4s ease 1.5s both}

/* Hors de l'écran (ou onglet caché) : tout s'arrête là où il en est. */
.expl.hors-champ .joue *,.expl.hors-champ .seg-plein{animation-play-state:paused !important}

/* Mouvement réduit : pas de lecture automatique (explication.js), et de
   simples fondus d'une diapo à l'autre ; les dessins sont montrés finis. */
@media(prefers-reduced-motion:reduce){
  .expl .diapo *,.expl .seg-plein{animation:none !important}
  .expl-actif .diapo,.expl-actif .diapo.avant{transform:none;transition:opacity .3s ease,visibility 0s linear .3s}
  .expl-actif .diapo.active{transition:opacity .3s ease,visibility 0s}
}