/* Mini-film d'ouverture v9 : le cercle se déroule en flux réels.
   La progression avance seule (~9 s) ; la molette, le doigt ou le clavier la font avancer ou reculer. */
#intro{display:none}
html.intro-on,html.intro-on body{overflow:hidden}
html.intro-on #intro{display:flex;position:fixed;inset:0;z-index:1000;background:var(--paper,#f2f4f0);
  flex-direction:column;align-items:center;justify-content:center;padding:16px;transition:opacity .45s ease;touch-action:none}
#intro.out{opacity:0}
.intro-svg{width:min(100%,1100px);height:auto;max-height:64vh}
.intro-cap{display:grid;justify-items:center;min-height:6.5em}.intro-cap>p{grid-area:1/1}
.intro-q,.intro-k{font-family:var(--display);color:var(--ink,#1c2a23);text-align:center;margin:.4rem 0 0;max-width:46rem;
  font-size:clamp(1.15rem,3.2vw,2rem);line-height:1.2;font-weight:800;opacity:0}
.intro-k{margin:0}
.intro-k strong{color:var(--red,#bd3a2b);font-size:1.35em}
.intro-k span{display:block;font-family:var(--text);font-weight:400;font-size:.8rem;color:var(--ink-soft,#4c5b53);margin-top:.3rem}

.ring-c{fill:none;stroke:#aab5ad}
.ring-ar path,.ring-n circle{fill:var(--ink,#1c2a23)}
.ring-n text{fill:#fff;font:800 20px var(--display,sans-serif);text-anchor:middle}
.fl{fill:none;stroke-dasharray:1;stroke-dashoffset:1}
.fr{opacity:0;transform-box:view-box;transform-origin:482px 300px}
.fr-shape{fill:#b9c3bb}.fr-stock{fill:#8d9a92}
.fr-line{fill:none;stroke:var(--ink,#1c2a23);stroke-width:2.5;stroke-linejoin:round}
.fr-isl{fill:#b9c3bb}
.ico,.lb{opacity:0}
.i-air{fill:#e6ebf0;stroke:var(--ink,#1c2a23);stroke-width:3}
.i-eau{fill:none;stroke:#3f78a8;stroke-width:5;stroke-linecap:round}
.lb{font:700 19px var(--display,sans-serif);fill:var(--ink,#1c2a23)}
.intro-cue{position:absolute;bottom:14px;left:50%;width:18px;height:18px;margin-left:-9px;border-right:3px solid var(--ink-soft,#4c5b53);
  border-bottom:3px solid var(--ink-soft,#4c5b53);transform:rotate(45deg);opacity:.55;animation:intro-cue 1.4s ease-in-out infinite}
@keyframes intro-cue{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(6px) rotate(45deg)}}
@media (max-aspect-ratio:1/1){.intro-svg{max-height:56vh}.lb{font-size:22px}}
@media (prefers-reduced-motion:reduce){.intro-cue{animation:none}}
.intro-act{display:grid;justify-items:center;min-height:3.4rem;margin-top:.6rem}
.intro-btn{grid-area:1/1;font:700 1.05rem var(--display,sans-serif);background:var(--ink,#1c2a23);color:#fff;border:0;
  padding:.8rem 1.6rem;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .4s ease}
.intro-btn.on{opacity:1;visibility:visible}
.intro-btn:hover{background:#000}
.mo{fill:none;stroke-linecap:butt;stroke-linejoin:round}
.ring-lab{font:800 22px var(--display,sans-serif);fill:var(--amber,#d58b1c);opacity:0}
html.intro-on header.site{position:relative;z-index:1001}
.intro-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:16px 16px 6rem}
.intro-end p{margin:.2rem 0;opacity:0;font-family:var(--display);color:var(--ink,#1c2a23)}
.ie-1{font-size:clamp(1.1rem,2.6vw,1.7rem);font-weight:700;max-width:40rem;line-height:1.3}
.ie-1 .bs{color:var(--ink-soft,#4c5b53)}
.ie-2{font-size:clamp(1.6rem,4.5vw,3rem);font-weight:800;color:var(--ink-soft,#4c5b53)!important}
.ie-s{position:relative;display:inline-block}
.ie-s::after{content:"";position:absolute;left:-4%;top:52%;height:.12em;width:108%;background:var(--red,#bd3a2b);transform-origin:left;transform:scaleX(var(--s,0))}
.ie-3{font-size:clamp(1.1rem,2.6vw,1.7rem);font-weight:700}
.ie-4{font-size:clamp(2.6rem,9vw,6.5rem);font-weight:900;letter-spacing:.01em;line-height:1}
/* accès à la suite de l'accueil par action volontaire */
html.v-locked main#contenu > section:not(#tester),html.v-locked footer.site{display:none}
.go-visite{display:none;justify-content:center;margin:2rem 0 1rem}
html.v-locked .go-visite{display:flex}
.go-visite button{font:700 1.05rem var(--display,sans-serif);background:var(--ink,#1c2a23);color:#fff;border:0;padding:.85rem 1.7rem;cursor:pointer}
/* v5 */
.intro-cap{min-height:5.6em;width:min(100%,52rem)}
.cap{grid-area:1/1;font-family:var(--display);color:var(--ink,#1c2a23);text-align:center;margin:.3rem 0 0;font-size:clamp(1.1rem,3vw,1.9rem);line-height:1.25;font-weight:800;opacity:0}
.cap.small{font-size:clamp(.95rem,2vw,1.25rem);font-weight:600}
.cap .big{color:var(--red,#bd3a2b);font-size:1.3em}
.cap span{display:block;font-family:var(--text);font-weight:400;font-size:.8rem;color:var(--ink-soft,#4c5b53);margin-top:.3rem}
.la{fill:none;stroke-dasharray:1;stroke-dashoffset:1}
.ll{font:700 17px var(--display,sans-serif);fill:var(--ink,#1c2a23)}
.lbw{fill:#fff}
.sm{fill:#c9d1cb;animation:intro-smoke 2.4s ease-in-out infinite}
.sm2{animation-delay:.4s}.sm3{animation-delay:.8s}
@keyframes intro-smoke{0%{opacity:.2;transform:translateY(4px)}50%{opacity:.9}100%{opacity:.2;transform:translateY(-6px)}}
#intro .fr,#intro .ring,#intro .ring-rot{transform-origin:0 0;transform-box:view-box}
.lbs{font-size:18px}
.intro-pause{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink,#1c2a23);background:var(--paper,#f2f4f0);color:var(--ink,#1c2a23);font:700 14px var(--display,sans-serif);cursor:pointer;z-index:2}
.intro-pause:hover{background:var(--ink,#1c2a23);color:#fff}
.intro-dev{display:none;position:absolute;top:16px;left:14px;font:600 13px var(--mono,monospace);color:var(--ink-soft,#4c5b53)}
/* v9 */
.llb{font-size:24px;font-weight:800}
.lls{font-size:15px;font-weight:600;fill:var(--ink-soft,#4c5b53)}
.veil{pointer-events:none}
@media (max-aspect-ratio:1/1){
  html.intro-on #intro{padding:8px 4px}
  .intro-svg{width:100%;max-height:60vh}
  .lb{font-size:20px}.lbs{font-size:18px}
  .ll{font-size:19px}.llb{font-size:26px}.lls{font-size:16px}
  .cap{font-size:clamp(1.25rem,5.6vw,1.9rem)}
}
/* v12 : conclusion courte */
.c4 .k{display:block;font-family:var(--display);font-size:inherit;font-weight:800;color:var(--ink,#1c2a23);margin:0;line-height:1.2}
.c4 .k strong{color:var(--red,#bd3a2b)}
.c4 .k2 strong{color:var(--amber,#d58b1c)}
.c4 .k3{font-size:.8em;font-weight:700;margin-top:.25em}
.c4 .src{display:block;font-family:var(--text);font-weight:400;font-size:1rem;color:var(--ink-soft,#4c5b53);margin-top:.3rem}
.mtnote{font:600 16px var(--text,sans-serif);fill:var(--ink-soft,#4c5b53);opacity:0}
@media (max-aspect-ratio:1/1){.mtnote{font-size:17px}}
.ie-d{display:block;font-family:var(--text,sans-serif);font-size:clamp(.85rem,1.6vw,1.05rem);font-weight:600;letter-spacing:0;line-height:1.3;color:var(--ink-soft,#4c5b53);margin-top:.25rem}
/* v16 : champ de test à la fin du film */
.intro-btn.intro-ask{background:none;padding:0;cursor:default;display:flex;flex-direction:column;align-items:center;gap:.55rem;width:min(92vw,30rem)}
.intro-btn.intro-ask:hover{background:none}
.ia-q{width:100%;font:500 1.05rem var(--text,sans-serif);padding:.7rem .9rem;border:2px solid var(--ink,#1c2a23);background:#fff;color:var(--ink,#1c2a23);box-sizing:border-box}
.ia-q:focus{outline:3px solid var(--amber,#d58b1c);outline-offset:1px}
.ia-go{font:800 1.15rem var(--display,sans-serif);background:var(--ink,#1c2a23);color:#fff;border:0;padding:.8rem 1.8rem;cursor:pointer;letter-spacing:.02em}
.ia-go:hover{background:#000}
.intro-act{min-height:3.4rem}
.intro-btn.intro-ask{position:relative;top:-5.5rem}
.intro-end{padding-bottom:13rem}
/* v17 : limites planétaires */
.pbt{font:800 15px var(--display,sans-serif);fill:#fff}
.pbc{font:700 15px var(--display,sans-serif);fill:var(--ink-soft,#4c5b53)}
.pbh{font:800 26px var(--display,sans-serif);fill:var(--ink,#1c2a23)}
.pbs{font:500 15px var(--text,sans-serif);fill:var(--ink-soft,#4c5b53)}
.pbbase{opacity:0}
.pbl{fill:none;stroke:var(--ink,#1c2a23);stroke-width:1.6;opacity:.55;stroke-dasharray:1;stroke-dashoffset:1}
#intro .scene,#intro .flyers{transform-box:view-box;transform-origin:0 0}
.intro-act{position:relative}
.intro-btn.intro-ask{position:absolute;left:50%;top:-5.5rem;transform:translateX(-50%)}
.c4 .k1,.c4 .k2{display:inline}
.c4 .k1::after{content:"  ·  ";white-space:pre;color:var(--ink-soft,#4c5b53)}
.halo{paint-order:stroke;stroke:#f2f4f0;stroke-width:5px;stroke-linejoin:round}
.pblb{font:800 18px var(--display,sans-serif);fill:var(--ink,#1c2a23)}
.pbtr{pointer-events:none}
.pbtop{opacity:0;pointer-events:none}
.pbgrid{opacity:0}
.pbsep{stroke:#9aa59f;stroke-width:.8}
.pbframe{fill:none;stroke:#9aa59f;stroke-width:.8}
.pbsub{font:700 12px var(--display,sans-serif);fill:#fff}
.pbt{font:800 15px var(--display,sans-serif)}

#intro .prologue{position:absolute;inset:0;z-index:30;background:var(--paper,#f2f4f0);display:flex;align-items:center;justify-content:center;transition:opacity .8s}
#intro .prologue.out{opacity:0;pointer-events:none}
#intro .pro-t{position:absolute;font:800 clamp(2.2rem,7vw,5.5rem)/1.1 var(--display,system-ui,sans-serif);color:var(--ink,#1c2a23);text-align:center;padding:0 16px;opacity:0;transition:opacity .9s}
#intro .pro-t.on{opacity:1}
#intro .pro-f{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .45s;background:transparent}
#intro .pro-f.on{opacity:1}
#intro .pro-skip{position:absolute;right:14px;bottom:14px;z-index:2;font:600 15px var(--text,system-ui,sans-serif);padding:8px 14px;border:1.5px solid var(--ink,#1c2a23);background:transparent;color:var(--ink,#1c2a23);border-radius:4px;cursor:pointer}

#intro .pro-t{transition:opacity .9s,top .9s,font-size .9s,transform .9s;top:50%;transform:translateY(-50%)}
#intro .pro-t.top{top:6px;transform:none;font-size:clamp(1.15rem,2.6vw,1.9rem)}
#intro .prologue.withtop .pro-f{top:clamp(2.4rem,4.6vw,3.6rem);height:calc(100% - clamp(2.4rem,4.6vw,3.6rem))}

/* sommaire */
#intro .intro-toc{position:absolute;left:0;top:0;bottom:0;width:210px;z-index:40;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 10px 0 14px;border-right:1px solid rgba(28,42,35,.12);background:var(--paper,#f2f4f0)}
#intro .intro-toc button{display:flex;align-items:center;gap:10px;text-align:left;border:0;background:none;padding:8px 6px;cursor:pointer;font:600 15px/1.25 var(--text,system-ui,sans-serif);color:#8a948e;border-radius:6px}
#intro .intro-toc button:hover{background:rgba(28,42,35,.06);color:var(--ink,#1c2a23)}
#intro .intro-toc .tn{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--text,system-ui);border:1.5px solid currentColor}
#intro .intro-toc button.past{color:#5d6a63}
#intro .intro-toc button.on{color:var(--ink,#1c2a23);font-weight:800}
#intro .intro-toc button.on .tn{background:var(--ink,#1c2a23);color:#fff;border-color:var(--ink,#1c2a23)}
@media (min-width:900px){html.intro-on #intro{padding-left:220px}#intro .prologue{left:210px}}
@media (max-width:899px){
 #intro .intro-toc{top:0;bottom:auto;left:0;right:0;width:auto;height:44px;flex-direction:row;justify-content:center;gap:6px;padding:6px;border-right:0;border-bottom:1px solid rgba(28,42,35,.12)}
 #intro .intro-toc button{padding:2px}#intro .intro-toc .tt{display:none}
 #intro .intro-toc button.on .tt{display:inline;font-size:13px}
 html.intro-on #intro{padding-top:48px}#intro .prologue{top:44px}
}

/* v23 : le dessin remplit l'écran, sommaire étroit */
html.intro-on #intro{justify-content:flex-start}
#intro .intro-svg{flex:1 1 0;min-height:0;width:100%;max-width:none;max-height:none;height:auto}
#intro .intro-cap{min-height:4.4em}
#intro .mtnote{margin:.1rem 0 0;font:500 .78rem var(--text,system-ui,sans-serif);color:var(--ink-soft,#4c5b53);opacity:0;text-align:center}
@media (min-width:900px){
 #intro .intro-toc{width:64px;padding:0 6px;align-items:center}
 #intro .intro-toc button{position:relative;padding:6px}
 #intro .intro-toc .tt{position:absolute;left:46px;top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--ink,#1c2a23);color:#fff;font:600 14px var(--text,system-ui);padding:6px 10px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .15s}
 #intro .intro-toc button:hover .tt,#intro .intro-toc button:focus-visible .tt{opacity:1}
 #intro .intro-toc .tn{flex-basis:30px;height:30px;font-size:14px}
 html.intro-on #intro{padding-left:72px}#intro .prologue{left:64px}
}

#intro .lrn{font:800 24px var(--display,system-ui,sans-serif);fill:#fff}
#intro .lrs{font:700 15px var(--text,system-ui,sans-serif);fill:#fff;opacity:.9}
#intro .lrl{fill:none;stroke:var(--ink,#1c2a23);stroke-width:1.6}
#intro .lrect,#intro .lrl{opacity:0}

#intro .intro-pause{z-index:45}
#intro .ring-n text.ring-t{fill:var(--ink,#1c2a23);font:800 19px var(--display,sans-serif);text-anchor:start;paint-order:stroke;stroke:#f2f4f0;stroke-width:5px;opacity:0}
/* v27 : menu des objets + bouton objet suivant */
#intro .pro-menu{position:absolute;z-index:3;display:flex;gap:6px;opacity:0;pointer-events:none;transition:opacity .6s}
#intro .prologue.withtop .pro-menu{opacity:1;pointer-events:auto}
#intro .pro-menu button{font:600 15px var(--text,system-ui,sans-serif);padding:7px 12px;border:1.5px solid var(--ink,#1c2a23);background:transparent;color:var(--ink,#1c2a23);border-radius:4px;cursor:pointer;text-align:left}
#intro .pro-menu button.past{opacity:.6}
#intro .pro-menu button.on{background:var(--ink,#1c2a23);color:var(--paper,#f2f4f0);opacity:1}
#intro .pro-next{position:absolute;z-index:3;left:50%;bottom:14px;transform:translate(-50%,8px);font:600 17px var(--text,system-ui,sans-serif);padding:11px 18px;border:0;background:var(--ink,#1c2a23);color:var(--paper,#f2f4f0);border-radius:4px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;max-width:calc(100% - 140px)}
#intro .pro-next.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
@media (min-width:700px){
 #intro .pro-menu{flex-direction:column;left:14px;top:50%;transform:translateY(-50%);width:140px}
 #intro .prologue.withtop .pro-f{left:160px;width:calc(100% - 160px)}
}
@media (max-width:699.98px){
 #intro .pro-menu{left:0;right:0;justify-content:center;flex-wrap:wrap;top:calc(clamp(2.4rem,4.6vw,3.6rem) - 4px)}
 #intro .pro-menu button{font-size:13px;padding:5px 8px}
 #intro .prologue.withtop .pro-f{top:calc(clamp(2.4rem,4.6vw,3.6rem) + 34px);height:calc(100% - clamp(2.4rem,4.6vw,3.6rem) - 34px - 62px)}
 #intro .pro-next{font-size:14px;padding:9px 12px;left:14px;bottom:14px;transform:translateY(8px);max-width:calc(100% - 130px);text-align:left}
 #intro .pro-next.on{transform:none}
}
/* v27 : roue lisible — pas de squelette, libellés au premier plan avec halo */
#intro .pbgrid{display:none}
#intro .pblb{paint-order:stroke;stroke:var(--paper,#f2f4f0);stroke-width:5px;stroke-linejoin:round}
#intro .pbl{opacity:.35}
#intro .lrh{font:800 22px var(--display,sans-serif);fill:var(--ink,#1c2a23)}
#intro .pbl{display:none}
/* v28 : barre de défilement */
#intro .intro-bar{position:absolute;left:28px;right:28px;bottom:0;height:16px;z-index:46;display:flex;align-items:center}
#intro .intro-bar input{-webkit-appearance:none;appearance:none;width:100%;height:16px;margin:0;background:transparent;cursor:pointer}
#intro .intro-bar input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(76,91,83,.28)}
#intro .intro-bar input::-moz-range-track{height:4px;border-radius:2px;background:rgba(76,91,83,.28)}
#intro .intro-bar input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ink,#1c2a23);border:2px solid var(--paper,#f2f4f0);margin-top:-5px}
#intro .intro-bar input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink,#1c2a23);border:2px solid var(--paper,#f2f4f0)}
#intro .intro-bar input:focus{outline:none}
/* v28 : menu des objets dans la bande du titre (ordinateur), rangée compacte (téléphone) */
@media (min-width:700px){
 #intro .pro-t.top{left:18px;right:auto;transform:none;text-align:left;padding:0}
 #intro .pro-menu{flex-direction:row;left:auto;right:62px;top:10px;transform:none;width:auto;gap:5px}
 #intro .pro-menu button{font-size:13px;padding:5px 10px}
 #intro .prologue.withtop .pro-f{left:0;width:100%}
 #intro .pro-next{bottom:22px}
}
@media (max-width:699.98px){
 #intro .pro-menu{top:calc(clamp(2.4rem,4.6vw,3.6rem) - 8px);gap:4px}
 #intro .pro-menu button{font-size:12px;padding:4px 7px}
 #intro .prologue.withtop .pro-f{top:calc(clamp(2.4rem,4.6vw,3.6rem) + 24px);height:calc(100% - clamp(2.4rem,4.6vw,3.6rem) - 24px - 66px)}
 #intro .pro-next,#intro .pro-skip{bottom:20px}
}
#intro .intro-cue{bottom:22px}
@media (min-width:700px){#intro .intro-bar{left:84px;right:24px}}
@media (max-width:699.98px){#intro .intro-bar{left:16px;right:16px}}
/* v29 */
#intro .intro-bar .mk{position:absolute;top:3px;width:2px;height:10px;background:var(--ink,#1c2a23);opacity:.55;pointer-events:none;border-radius:1px}
#intro .ie-d{opacity:0}
@media (min-width:700px){#intro .prologue.withtop .pro-f{top:0;height:100%}#intro .pro-menu{top:8px}}
@media (max-width:699.98px){#intro .pro-menu{top:6px}#intro .prologue.withtop .pro-f{top:40px;height:calc(100% - 40px - 66px)}}

@media (max-width:699.98px){#intro .intro-toc{padding-right:58px}}

.ab-l{fill:none;stroke:#bd3a2b;stroke-width:3.5;stroke-dasharray:7 5;marker-end:url(#ab-ar)}.ab-t{font:700 16px var(--display,sans-serif);fill:#1c2a23}.ab-h{font:700 21px var(--display,sans-serif);fill:#1c2a23}.ab-s{font:700 21px var(--display,sans-serif);fill:#bd3a2b}



/* v55 : son + pause en haut à gauche du sommaire, vitesse en mots, titres de chapitres sur l'accueil */
#intro .toc-tr{display:flex;gap:8px;align-items:center}
#intro .toc-tr button{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink,#1c2a23);background:var(--paper,#f2f4f0);color:var(--ink,#1c2a23);cursor:pointer;padding:0;flex:0 0 38px}
#intro .toc-tr .intro-voice{font:600 18px/1 system-ui}
#intro .toc-tr .intro-voice[aria-pressed="false"]{opacity:.5}
#intro .toc-tr .intro-pause{font:700 14px var(--display,sans-serif);opacity:0;transition:opacity .3s}
#intro.live .toc-tr .intro-pause{opacity:1}
#intro .toc-ctl{align-self:stretch;width:100%;box-sizing:border-box}
#intro .toc-ctl .ctl-h{margin:0 0 3px 2px;font:800 11px var(--display,sans-serif);color:var(--ink,#1c2a23);text-transform:uppercase;letter-spacing:.04em}
#intro .toc-ctl .spd{display:flex;flex-direction:column;gap:1px}
#intro .toc-ctl .spd button{font:600 13px/1.3 var(--text,system-ui);text-align:left;padding:4px 2px;border:0;background:none;border-radius:6px;cursor:pointer;color:#8a948e;white-space:nowrap}
#intro .toc-ctl .spd button::before{content:"○ ";color:#8a948e}
#intro .toc-ctl .spd button.on{color:var(--ink,#1c2a23);font-weight:800}#intro .toc-ctl .spd button.on::before{content:"● ";color:var(--ink,#1c2a23)}
#intro .toc-ctl .spd button:hover{background:rgba(28,42,35,.06)}
/* écran d'accueil */
#intro .intro-start{position:absolute;inset:0;z-index:35;background:var(--paper,#f2f4f0);display:flex;align-items:center;justify-content:center;padding:16px;transition:opacity .45s}
#intro .intro-start.out{opacity:0;pointer-events:none}
#intro .intro-start.go .st-in>*:not(.intro-play){opacity:0;transition:opacity .4s}
#intro .st-in{max-width:44rem;width:100%;text-align:center}
#intro .st-t{margin:0 0 1.4rem;font:800 clamp(1.6rem,4vw,2.4rem)/1.1 var(--display,sans-serif);color:var(--ink,#1c2a23)}
#intro .st-l{margin:1.1rem 0 .5rem;font:700 1.05rem var(--display,sans-serif);color:var(--ink,#1c2a23)}
#intro .st-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
#intro .st-row button{font:inherit;flex:1 1 11rem;max-width:14rem;display:flex;flex-direction:column;gap:.2rem;align-items:center;padding:.7rem .6rem;border:2px solid var(--ink,#1c2a23);background:#fff;color:var(--ink,#1c2a23);cursor:pointer;border-radius:8px}
#intro .st-row button b{font:800 1.05rem var(--display,sans-serif)}#intro .st-row button small{font-size:.82rem;color:#4c5b53;line-height:1.25}
#intro .st-row button.on{background:var(--ink,#1c2a23);color:#f2f4f0}#intro .st-row button.on small{color:#c9d3cc}
#intro .st-v button{flex:0 1 8rem}
#intro .intro-play{display:block;margin:2rem auto 0;width:min(34vw,150px);height:min(34vw,150px);border-radius:50%;border:4px solid var(--ink,#1c2a23);background:#f2c230;color:var(--ink,#1c2a23);font:700 min(14vw,64px)/1 system-ui;padding-left:.12em;cursor:pointer;box-shadow:0 8px 24px rgba(28,42,35,.25)}
#intro .intro-play:hover{background:var(--ink,#1c2a23);color:#f2c230}
/* ordinateur : colonne à gauche, large avec les titres sur l'accueil, étroite pendant le film */
@media (min-width:900px){
 #intro .intro-toc{width:88px;padding:12px 6px;align-items:stretch;justify-content:flex-start;transition:width .5s cubic-bezier(.4,0,.2,1)}
 #intro .toc-tr{flex-direction:column;padding-left:13px;margin-bottom:auto}
 #intro .intro-toc button[data-k]{padding:6px 5px}
 #intro .intro-toc .tn{flex:0 0 30px;height:30px;font-size:14px}
 #intro .toc-ctl{margin-top:auto;padding-top:12px;border-top:1px solid rgba(28,42,35,.15)}
 #intro:not(.live) .intro-toc{width:290px}
 #intro:not(.live) .intro-toc .tt{position:static;transform:none;opacity:1;background:none;color:inherit;font:600 15px/1.25 var(--text,system-ui);padding:0;white-space:normal}
 #intro .intro-start{left:290px}#intro.live .intro-start{left:88px}
 html.intro-on #intro{padding-left:96px}#intro .prologue{left:88px}
}
/* téléphone et tablette : bande en haut, son et pause à gauche, vitesse sur une seconde ligne */
@media (max-width:899.98px){
 #intro .intro-toc{height:auto;flex-wrap:wrap;padding:5px 6px 4px;justify-content:flex-start;gap:4px}
 #intro .toc-tr{flex:0 0 auto;margin-right:6px}
 #intro .toc-tr button{width:32px;height:32px;flex-basis:32px;font-size:13px}#intro .toc-tr .intro-voice{font-size:15px}
 #intro .intro-toc button[data-k]{padding:2px}
 #intro .toc-ctl{flex:0 0 100%;display:flex;align-items:center;gap:6px;margin:2px 0 0;padding:0;border:0}
 #intro .toc-ctl .ctl-h{margin:0 2px 0 0}
 #intro .toc-ctl .spd{flex-direction:row;gap:4px}#intro .toc-ctl .spd button{padding:3px 4px;font-size:12px}
 html.intro-on #intro{padding-top:76px}#intro .prologue{top:72px}#intro .intro-start{top:72px}
 #intro .st-row button small{display:none}
}
@media (min-width:900px){#intro .intro-bar{left:104px}}

/* v57 : icônes centrées et plus grandes, infobulles entières */
#intro .toc-tr button{width:44px;height:44px;flex-basis:44px;display:grid;place-items:center;padding:0;line-height:0}
#intro .toc-tr button svg{display:block}
#intro .toc-tr .intro-voice{font-size:0}
@media (min-width:900px){#intro .toc-tr{padding-left:0}#intro.live .intro-toc button[data-k]{justify-content:center}#intro .intro-toc .tt{left:54px;z-index:50;max-width:none}#intro .intro-toc{overflow:visible}}
@media (max-width:899.98px){#intro .toc-tr button{width:36px;height:36px;flex-basis:36px}#intro .toc-tr button svg{width:20px;height:20px}}

/* v58 : chapitre 6, Recyclable ou réversible ? */
#intro .intro-fin{position:absolute;inset:0;z-index:35;background:var(--paper,#f2f4f0);display:flex;align-items:center;justify-content:center;padding:16px}
#intro.fin .intro-btn,#intro.fin .intro-cue{display:none}
#intro .fin-in{max-width:52rem;width:100%}
#intro .fin-lead{margin:0 0 .4rem;font:700 clamp(1.05rem,2vw,1.3rem) var(--display,sans-serif);color:#4c5b53}
#intro .fin-gag{position:relative;height:clamp(6rem,11vw,8.5rem)}#intro .fin-gag .fg-new{font-size:min(7vw,4.8rem)}#intro .fin-gag .fg-old{font-size:clamp(1.5rem,4vw,2.6rem)}
#intro .fg-old{position:absolute;left:0;bottom:0;margin:0;z-index:2;font:700 clamp(1.8rem,5vw,3.4rem) var(--display,sans-serif);color:#3f4a44;letter-spacing:.02em;transform-origin:0 100%;animation:fgres 5s infinite cubic-bezier(.4,0,.2,1)}
#intro .fg-new{position:absolute;left:0;bottom:.22em;margin:0;font:850 min(8.4vw,6.4rem)/1 var(--display,sans-serif);font-stretch:125%;color:var(--ink,#1c2a23);text-transform:uppercase;transform-origin:0 100%;animation:fgpres 5s infinite cubic-bezier(.4,0,.2,1)}
@keyframes fgres{0%,40%{transform:scaleY(.2) scaleX(1.15)}62%{transform:scaleY(.95) scaleX(1)}70%{transform:scaleY(1.05) scaleX(.98)}74%{transform:scaleY(.12) scaleX(1.25)}80%{transform:scaleY(.26) scaleX(1.12)}86%,100%{transform:scaleY(.2) scaleX(1.15)}}
@keyframes fgpres{0%,40%{transform:translateY(0)}62%{transform:translateY(-.78em)}70%{transform:translateY(-.9em)}74%{transform:translateY(.06em) scaleY(.94)}80%{transform:translateY(-.04em) scaleY(1.02)}86%,100%{transform:translateY(0) scaleY(1)}}
@media (prefers-reduced-motion:reduce){#intro .fg-old{animation:none;transform:scaleY(.2) scaleX(1.15)}#intro .fg-new{animation:none}}
#intro .fin-defs{margin:.9rem 0 0;max-width:46rem}
#intro .fin-defs p{margin:.4rem 0;font:400 clamp(1.05rem,1.8vw,1.25rem)/1.4 var(--text,system-ui);color:var(--ink,#1c2a23)}#intro .fin-defs b{font:800 1em var(--display,sans-serif)}
#intro .fin-go{margin:1.6rem 0 0;font:800 clamp(1.15rem,2.2vw,1.45rem) var(--display,sans-serif);padding:.85rem 1.6rem;border:3px solid var(--ink,#1c2a23);background:#f2c230;color:var(--ink,#1c2a23);cursor:pointer;box-shadow:0 6px 18px rgba(28,42,35,.18)}
#intro .fin-go:hover{background:var(--ink,#1c2a23);color:#f2c230}
@media (min-width:900px){#intro .intro-fin{left:88px}}
@media (max-width:899.98px){#intro .intro-fin{top:72px}}

/* v59 : pas de barre sur l'accueil ; chapitre 6 animé */
#intro:not(.live) .intro-bar{display:none}
#intro .fin-in{max-width:60rem}
#intro .fin-scene{display:block;width:100%;max-height:48vh;margin:.4rem 0 0}
#intro .fin-go{opacity:0;transition:opacity .5s}#intro .intro-fin.go .fin-go{opacity:1}
#intro .f-h{font:800 26px var(--display,sans-serif);letter-spacing:.06em}#intro .f-grey{fill:#5d6a63}#intro .f-green{fill:#3f7d3a}
#intro .f-t{font:600 18px var(--text,system-ui);fill:#1c2a23}#intro .f-red{fill:#bd3a2b;font-weight:700}
#intro .f-ok{font:800 40px var(--display,sans-serif);fill:#3f7d3a}
#intro .f-l{fill:none;stroke:#1c2a23;stroke-width:3;marker-end:url(#f-ar)}
#intro .fs{opacity:0;transition:opacity .7s}#intro .fs.on{opacity:1}
#intro .fs1>*{opacity:0}#intro .fs1.on>*{opacity:1;transition:opacity .5s}
#intro .fs1.on>*:nth-child(n+2){transition-delay:.9s}#intro .fs1.on>*:nth-child(n+4){transition-delay:1.8s}#intro .fs1.on>*:nth-child(n+8){transition-delay:2.7s}
#intro .fs0.on .f-drop{animation:fdrop 1.4s cubic-bezier(.5,0,1,1) forwards}
@keyframes fdrop{0%{transform:translateY(0)}70%{transform:translateY(118px)}100%{transform:translateY(118px)}}
#intro .f-ok{opacity:0}#intro .fs0.on .f-ok{animation:fok .4s 1.5s forwards}@keyframes fok{to{opacity:1}}
#intro .fs2.on .f-smoke{animation:fsmoke 1.6s ease-in-out infinite alternate}@keyframes fsmoke{from{stroke-dashoffset:0;opacity:.6}to{opacity:1;transform:translateY(-6px)}}
#intro .f-loop{opacity:0}#intro .fs3.on .f-loop{animation:floop .8s .4s ease-out forwards}#intro .fs3.on .f-loop2{animation-delay:1.4s}@keyframes floop{to{opacity:1}}
@media (prefers-reduced-motion:reduce){#intro .fs0.on .f-drop{animation:none;transform:translateY(118px)}#intro .f-ok{opacity:1}#intro .f-loop{stroke-dashoffset:0}}

/* v62 : téléphone — écran de rotation, paysage compact */
#intro .intro-rot{display:none;position:absolute;inset:0;z-index:70;background:var(--paper,#f2f4f0);align-items:center;justify-content:center;text-align:center;padding:24px}
#intro.rot .intro-rot{display:flex}
#intro .rot-ph{width:120px;height:120px}
#intro .rot-g{transform-origin:60px 60px;animation:rotph 2.4s ease-in-out infinite}
@keyframes rotph{0%,20%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
#intro .rot-t{margin:14px 0 4px;font:800 1.5rem var(--display,sans-serif);color:var(--ink,#1c2a23)}
#intro .rot-s{margin:0 0 22px;font:500 1rem var(--text,system-ui);color:#4c5b53}
#intro .rot-skip{font:inherit;font-size:.9rem;background:none;border:0;color:#4c5b53;text-decoration:underline;cursor:pointer;padding:8px}
@media (prefers-reduced-motion:reduce){#intro .rot-g{animation:none;transform:rotate(-90deg)}}
@media (orientation:landscape) and (max-height:500px){
 html.intro-on header.site{display:none}
 html.intro-on #intro{padding:4px 6px 4px 54px!important}
 #intro .intro-toc{top:0!important;bottom:0!important;left:0!important;right:auto!important;width:48px!important;height:auto!important;flex-direction:column!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:center!important;gap:3px!important;padding:6px 3px!important;border-right:1px solid rgba(28,42,35,.12)!important;border-bottom:0!important;overflow:visible!important}
 #intro .toc-tr{flex-direction:column!important;gap:5px!important;margin:0 0 8px!important;padding:0!important}
 #intro .toc-tr button{width:38px!important;height:38px!important;flex-basis:38px!important}
 #intro .toc-tr button svg{width:20px;height:20px}
 #intro .intro-toc button[data-k]{padding:2px!important;justify-content:center!important}
 #intro .intro-toc .tn{flex:0 0 28px!important;height:28px!important;font-size:13px!important}
 #intro .intro-toc .tt,#intro .toc-ctl{display:none!important}
 #intro .prologue,#intro .intro-start,#intro .intro-fin{left:48px!important;top:0!important}
 #intro .intro-start{overflow-y:auto;align-items:flex-start}
 #intro .st-t{margin:.2rem 0 .5rem;font-size:1.3rem}#intro .st-l{margin:.5rem 0 .3rem}
 #intro .intro-play{width:84px;height:84px;font-size:38px;margin-top:.8rem}
 #intro .intro-bar{left:58px!important;right:12px!important}
 #intro .pro-menu{top:4px!important}#intro .pro-menu button{font-size:11px!important;padding:3px 7px!important}
 #intro .prologue.withtop .pro-f{top:0!important;height:100%!important}
 #intro .fin-scene{max-height:42vh}#intro .fin-lead{font-size:.95rem}
}

/* v63 : choix de langue */
#intro .st-lang{margin:0 0 .6rem}#intro .st-lang button{flex:0 1 9rem;padding:.45rem .6rem}

/* v64 : chapitre 6 en sept pages */
#intro .intro-fin{align-items:stretch;padding:8px 16px}
#intro .fin-in{display:flex;flex-direction:column;height:100%;max-width:66rem;width:100%;margin:0 auto}
#intro .fp-stage{position:relative;flex:1;min-height:0}
#intro .fpg{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .5s}
#intro .fpg.on{opacity:1;pointer-events:auto}
#intro .fp-t{margin:0 0 .4rem;font:800 clamp(1.5rem,3vw,2.3rem)/1.15 var(--display,sans-serif);color:#1c2a23}
#intro .fpg .fp-s{flex:1;min-height:0;width:100%;display:block}
#intro .fp-x{margin:.3rem 0 0;font:500 .8rem/1.35 var(--text,system-ui);color:#5d6a63}
#intro .fp-ref{margin:.4rem 0 0;font:800 clamp(1.05rem,1.8vw,1.35rem)/1.3 var(--display,sans-serif);color:#bd3a2b;text-align:center}
#intro .fpg>*{flex-shrink:0}#intro .fpg[data-p="0"] .fin-lead{margin-bottom:1.4rem}#intro .fpg>.fp-s{flex-shrink:1}
#intro .fp-q{margin:0 0 .4rem;padding:.6rem 1rem;border-left:5px solid #f2c230;background:#fff;font:500 clamp(1.1rem,2vw,1.45rem)/1.45 var(--text,system-ui);color:#1c2a23}
#intro .fp-q mark{background:#f2c230;color:#1c2a23;padding:0 .15em}
#intro .fp-nav{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 0 2px}
#intro .fp-nav .ar{width:40px;height:40px;border-radius:50%;border:2px solid #1c2a23;background:#f2f4f0;color:#1c2a23;font:700 22px/1 system-ui;cursor:pointer;padding:0}
#intro .fp-nav .ar:disabled{opacity:.25;cursor:default}
#intro .fp-nav .ar.wait{background:#f2c230;animation:fpwait 1.2s ease-in-out infinite}
@keyframes fpwait{50%{transform:scale(1.12)}}
#intro .fp-dots span{display:inline-block;width:10px;height:10px;margin:0 4px;border-radius:50%;background:#c9cfd2;cursor:pointer}
#intro .fp-dots span.on{background:#1c2a23}
#intro .fp-nav .fin-go{margin:0 0 0 14px;font-size:clamp(1rem,1.8vw,1.2rem);padding:.55rem 1.1rem}
#intro .fpg .k0,#intro .fpg .k1,#intro .fpg .k2,#intro .fpg .k3,#intro .fpg .k4{opacity:0;transition:opacity .7s}
#intro .fpg.s0 .k0,#intro .fpg.s1 .k1,#intro .fpg.s2 .k2,#intro .fpg.s3 .k3,#intro .fpg.s4 .k4{opacity:1}
#intro .fpg .ft{font:600 25px var(--text,system-ui);fill:#1c2a23}
#intro .fpg .fh{font:800 28px var(--display,sans-serif);fill:#1c2a23}
#intro .fpg .frd{fill:#bd3a2b}#intro .fpg .fg{fill:#3f7d3a}
#intro .fpg .fbig{font:800 56px var(--display,sans-serif);fill:#1c2a23}
#intro .fpg .fstamp{font:900 36px var(--display,sans-serif);fill:#3f7d3a;letter-spacing:.06em}
#intro .fpg .fban{font:800 30px var(--display,sans-serif);fill:#fff}
#intro .fpg .fin-defs{margin:.4rem 0 0}
#intro .tirebody{transform-box:fill-box;transform-origin:center}
#intro .fpg.on .tirebody{animation:fpspin 2.4s linear infinite}
#intro .fpg[data-p="2"] .tirebody,#intro .fpg[data-p="5"] .tirebody{animation:none}
@keyframes fpspin{to{transform:rotate(360deg)}}
#intro .fpg.s2 .rollin{animation:fproll 2.4s cubic-bezier(.2,.7,.3,1) both}
@keyframes fproll{from{transform:translate(-400px,140px)}to{transform:translate(500px,140px)}}
#intro .fpg .dust{opacity:0}
#intro .fpg.on .dust{animation:fpdust 2.2s linear infinite}
#intro .fpg .dust.d1{animation-delay:.35s}#intro .fpg .dust.d2{animation-delay:.7s}#intro .fpg .dust.d3{animation-delay:1.05s}#intro .fpg .dust.d4{animation-delay:1.4s}#intro .fpg .dust.d5{animation-delay:1.75s}
@keyframes fpdust{0%{opacity:0;transform:translate(0,0)}20%{opacity:.9}100%{opacity:0;transform:translate(-60px,-40px)}}
#intro .fpg .smk{animation:fpsmk 1.6s ease-in-out infinite alternate}
@keyframes fpsmk{to{transform:translateY(-6px);opacity:.6}}
#intro .fpg.s3 .stamp{animation:fpstamp .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes fpstamp{from{transform:scale(1.6);opacity:0}to{transform:none;opacity:1}}
#intro .fpg .stamp{transform-box:fill-box;transform-origin:center}
#intro .fpg .leaf{transform-box:fill-box;transform-origin:center}
#intro .fpg.s2 .leaf{animation:fpleaf 4s ease-in infinite}
#intro .fpg.s2 .lf1{animation-delay:.7s}#intro .fpg.s2 .lf2{animation-delay:1.4s}#intro .fpg.s2 .lf3{animation-delay:2.1s}#intro .fpg.s2 .lf4{animation-delay:2.8s}#intro .fpg.s2 .lf5{animation-delay:3.4s}
@keyframes fpleaf{0%{transform:translate(0,0) rotate(0)}80%{transform:translate(20px,190px) rotate(200deg);opacity:1}100%{transform:translate(20px,195px) rotate(220deg);opacity:0}}
#intro .fpg .peel{opacity:0}
#intro .fpg.s2 .peel{animation:fppeel 3s ease-in 1s infinite}
@keyframes fppeel{0%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(28px)}100%{opacity:0;transform:translateY(32px)}}
#intro .fpg .sprout{opacity:0;transition:opacity 1s 2.5s}#intro .fpg.s2 .sprout{opacity:1}
@media (prefers-reduced-motion:reduce){#intro .fpg *{animation:none!important}}
@media (max-width:699.98px){#intro .fp-x{display:none}#intro .fp-nav .fin-go{margin:6px 0 0}#intro .fp-nav{flex-wrap:wrap}}

#intro .fp-prev,#intro .fp-next,#intro .fp-dots{display:none!important}
#intro .fp-nav{justify-content:flex-end;padding:0;min-height:0}
#intro .fp-nav .fin-go{margin:0}
#intro .fin-go{pointer-events:none}#intro .intro-fin.go .fin-go{pointer-events:auto}

#intro .fin-in{position:relative}
#intro .fp-nav{position:absolute;right:0;bottom:0;z-index:3}

/* v65 : pause et barre du chapitre 6 */
#intro .intro-fin.fpz .fpg *{animation-play-state:paused!important}
#intro .intro-fin{bottom:18px}