/* Apprendre : les éléments de la rubrique (29-guides.md, §9), pour les planches du
   6 octobre 2026. Ils s'ajoutent à site/assets/site.css et mouvement.css, dont ils
   reprennent les jetons : aucune couleur, police ni rayon qui ne vienne de .
   Le trait avance par images, la surface glisse (09-mouvement.md, §2). */

/* ————————————————————————————————————————— la page d'article */
.ap-tete{padding-top:clamp(2rem,1.2rem + 3vw,4.5rem)}
.ap-fil{display:flex;flex-wrap:wrap;gap:.375rem;font-size:var(--t-leg);color:var(--texte-2)}
.ap-fil a{color:var(--texte-2);text-decoration:none}
.ap-fil a:hover{color:var(--accent);text-decoration:underline}
.ap-fil span[aria-hidden]{opacity:.6}
.ap-leg{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .75rem;font-size:var(--t-leg);font-weight:500;color:var(--texte-2)}
.ap-genre{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent);font-weight:600}
.ap-genre svg{width:16px;height:16px;flex:none}
.ap-leg .sep{opacity:.5}
.ap-tete .titre-1{max-width:20ch;margin-top:1rem}
.ap-tete .chapo{margin-top:1.25rem;max-width:58ch}
/* la planche de tête (35-images-des-pages.md, famille A) : une gravure du domaine public, posée
   à même le fond de la page, sans cadre ni légende (Oscar, 8 octobre 2026) ; le papier du scan est
   transparent, seul le trait reste, en cobalt, et en bleu de nuit en sombre. À droite du titre dès
   1 000 px ; dessous, un bandeau 16:10 qui garde le haut de la gravure et se fond vers le bas. Sa
   source est dans « Limites et sources ». Écrite par remplir.py. */
.ap-tete-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem var(--duo)}
@media (min-width:1000px){.ap-tete-grille{grid-template-columns:minmax(0,1fr) minmax(15rem,27%);align-items:start}}
.ap-planche{color:var(--accent)}
.ap-planche > svg{display:block;width:100%;height:auto}
@media (min-width:1000px){.ap-planche{margin-top:.5rem;-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent);mask-image:linear-gradient(to bottom,#000 82%,transparent)}}
@media (max-width:999px){
  .ap-planche{max-width:34rem;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent)}
  .ap-planche > svg{aspect-ratio:8 / 5}
}
.ap-date{margin-top:1rem;font-size:.9375rem;color:var(--texte-2)}

/* le bandeau d'apprentissage : trois cases, sous la tête */
.ap-bandeau{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:clamp(1.75rem,1.2rem + 1.6vw,2.75rem);border-radius:var(--rayon-m);box-shadow:inset 0 0 0 1px var(--filet)}
.ap-bandeau > div{padding:1.25rem 1.5rem}
.ap-bandeau > div + div{border-top:1px solid var(--filet)}
.ap-bandeau h2{font:600 var(--t-petit)/1.3 var(--sans);color:var(--texte-2);margin-bottom:.625rem}
.ap-bandeau ul{list-style:none;display:flex;flex-direction:column;gap:.375rem}
.ap-bandeau li{display:grid;grid-template-columns:1.125rem minmax(0,1fr);gap:.5rem;line-height:1.45}
.ap-bandeau li::before{content:"";width:.5rem;height:.5rem;margin-top:.5rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--accent)}
.ap-bandeau a{color:var(--accent)}
.ap-progres{display:flex;gap:5px;margin-top:.625rem}
.ap-progres i{flex:1;height:4px;border-radius:2px;background:var(--filet)}
.ap-progres i.ici{background:var(--accent)}
@media (min-width:900px){
  .ap-bandeau{grid-template-columns:1.35fr 1fr 1fr}
  .ap-bandeau > div + div{border-top:0;border-left:1px solid var(--filet)}
}

/* la charpente : le sommaire à gauche, le texte, la marge des notes */
.ap-page{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--duo);margin-top:clamp(2.5rem,1.6rem + 3vw,4.5rem)}
.ap-sommaire{display:none}
.ap-sommaire-mobile{margin-bottom:2rem;border-block:1px solid var(--filet)}
.ap-sommaire-mobile summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:52px;font-weight:600}
.ap-sommaire-mobile summary::-webkit-details-marker{display:none}
.ap-sommaire-mobile summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translate(-2px,-2px)}
.ap-sommaire-mobile[open] summary::after{transform:rotate(-135deg)}
.ap-sommaire-mobile ol{padding:0 0 1rem 1.25rem;display:flex;flex-direction:column;gap:.375rem}
.ap-sommaire-mobile a{color:var(--texte);text-decoration:none}
@media (min-width:1100px){
  .ap-page{grid-template-columns:13.5rem minmax(0,1fr)}
  .ap-sommaire{display:block;position:sticky;top:calc(var(--entete) + 1.5rem);align-self:start;max-height:calc(100vh - var(--entete) - 3rem);overflow:auto}
  .ap-sommaire-mobile{display:none}
}
.ap-sommaire h2{font:600 var(--t-petit)/1.3 var(--sans);color:var(--texte-2);margin-bottom:.75rem}
.ap-sommaire ol{list-style:none;counter-reset:s;border-left:1px solid var(--filet)}
.ap-sommaire li{counter-increment:s}
.ap-sommaire a{position:relative;display:block;padding:.4rem 0 .4rem 1rem;font-size:.9375rem;line-height:1.35;color:var(--texte-2);text-decoration:none}
.ap-sommaire a:hover{color:var(--texte)}
.ap-sommaire a[aria-current="true"]{color:var(--accent);font-weight:600}
.ap-sommaire a[aria-current="true"]::before{content:"";position:absolute;left:-1.5px;top:.35rem;bottom:.35rem;width:2px;background:var(--accent)}
.ap-sommaire .ap-temps{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--filet);font-size:var(--t-petit);color:var(--texte-2)}

/* une rangée : le texte, et sa note en marge dès 1 280 px */
.ap-r{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem var(--gout)}
.ap-r + .ap-r{margin-top:1.25rem}
.ap-t{max-width:var(--mesure);min-width:0}
.ap-t > * + *{margin-top:.875rem}
.ap-t p,.ap-t li{text-wrap:pretty}
.ap-t ul.liste,.ap-t ol.liste{padding-left:1.25rem}
.ap-t ul.liste li + li,.ap-t ol.liste li + li{margin-top:.375rem}
.ap-m{min-width:0}
.ap-large{grid-column:1 / -1;min-width:0}
/* un bloc à filets seul dans sa colonne de texte (replis, liste de contrôle, réglages, fichiers)
   s'aligne sur le filet de sa section et sur les autres blocs pleins ; ses textes gardent la mesure */
.ap-r:not(:has(> .ap-m)) > .ap-t:has(> :is(.ap-pb,.ap-controle,.ap-regl,.ap-fichiers):only-child){grid-column:1 / -1;max-width:none}
/* un bloc d'onglets (réglages par outil, variantes par éditeur) prend aussi toute la colonne : la
   barre d'onglets tient sur une ligne, les tableaux de réglages s'alignent sur la synthèse ; le
   texte courant des onglets garde la mesure (Oscar, 8 octobre 2026, page « Avant de brancher un
   assistant ») */
.ap-r:not(:has(> .ap-m)) > .ap-t.ap-onglets{grid-column:1 / -1;max-width:none}
.ap-t.ap-onglets [role="tabpanel"] > :is(p,ul.liste,ol.liste,.ap-chemin){max-width:var(--mesure)}
@media (min-width:1280px){
  /* la marge prend le reste de la colonne : les blocs pleins finissent là où finit le filet de la
     section, à toutes les largeurs ; la note garde sa largeur (Oscar, 8 octobre 2026) */
  .ap-r{grid-template-columns:minmax(0,var(--mesure)) minmax(12rem,1fr)}
  .ap-m{padding-top:.25rem;max-width:15rem}
}

/* une section : le filet, le numéro, le titre */
.ap-sec{scroll-margin-top:calc(var(--entete) + 1.5rem)}
.ap-sec + .ap-sec{margin-top:clamp(3rem,2.2rem + 2.6vw,5rem)}
/* le filet court sur toute la colonne, comme les blocs pleins dessous ; le titre garde la mesure
   (Oscar, 8 octobre 2026 : « problèmes visuels de composition largeur ») */
.ap-h2{display:flex;flex-direction:column;gap:.5rem;padding-top:1.25rem;border-top:1px solid var(--filet);margin-bottom:1.5rem}
.ap-h2 h2{max-width:var(--mesure)}
.ap-h2 .num{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.125rem;color:var(--accent)}
.ap-h2 h2{font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-2);line-height:1.1;letter-spacing:-.015em;text-wrap:balance}

/* l'essentiel : la seule mise en avant de la page */
.ap-essentiel{background:var(--fond-2);border-radius:var(--rayon);padding:clamp(1.5rem,1.1rem + 1.6vw,2.5rem)}
/* en pleine largeur de page, les cinq lignes passent sur deux colonnes pour rester lisibles */
@media (min-width:1100px){.w > .ap-essentiel ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem var(--gout)}
  .w > .ap-essentiel li:last-child:nth-child(odd){grid-column:1 / -1}
  .mo-corps .ap-essentiel ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem var(--gout)}
  .mo-corps .ap-essentiel li:last-child:nth-child(odd){grid-column:1 / -1}}
.ap-essentiel .legende{display:block;margin-bottom:1rem}
.ap-essentiel ol{list-style:none;counter-reset:l;display:flex;flex-direction:column;gap:.875rem}
.ap-essentiel li{counter-increment:l;display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.5rem;font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);line-height:1.35}
.ap-essentiel li::before{content:counter(l);font-size:1rem;line-height:1.9;color:var(--accent)}

/* la note en marge : un mot, une source, un renvoi */
.ap-note{font-size:var(--t-petit);line-height:1.5;color:var(--texte-2);padding-top:.625rem;border-top:1px solid var(--filet)}
.ap-note b{display:block;color:var(--texte);font-weight:600;margin-bottom:.25rem}
.ap-note a{color:var(--accent)}
.ap-note + .ap-note{margin-top:1.25rem}

/* la définition */
.ap-def{display:grid;gap:.375rem;padding:1.125rem 1.25rem;border-radius:var(--rayon-m);box-shadow:inset 0 0 0 1px var(--filet)}
.ap-def dt{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4)}
.ap-def dt small{font-family:var(--sans);font-size:.875rem;color:var(--texte-2);margin-left:.5rem}
.ap-def dd{margin:0;color:var(--texte-2)}

/* le mot du glossaire, et sa bulle (une surface : elle glisse) */
.ap-terme{position:relative;display:inline;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:help;text-decoration:underline dotted var(--accent) 1.5px;text-underline-offset:.25em}
.ap-terme:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
.ap-bulle{position:absolute;z-index:40;left:0;top:calc(100% + .5rem);width:min(20rem,80vw);padding:.875rem 1rem;border-radius:var(--rayon-champ);background:var(--eleve);box-shadow:inset 0 0 0 1px var(--filet),0 6px 24px rgba(14,18,32,.12);
  font:400 .9375rem/1.5 var(--sans);color:var(--texte);text-align:left;white-space:normal;display:none;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--etat) var(--courbe),transform var(--etat) var(--courbe),display var(--etat) allow-discrete}
.ap-bulle b{display:block;font-weight:600;margin-bottom:.25rem}
.ap-bulle a{color:var(--accent);font-weight:600}
.ap-terme[aria-expanded="true"] .ap-bulle,.ap-terme:hover .ap-bulle{display:block;opacity:1;transform:none;pointer-events:auto}
@starting-style{.ap-terme[aria-expanded="true"] .ap-bulle,.ap-terme:hover .ap-bulle{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.ap-bulle{transition:none}}

/* les encadrés : l'exemple, l'essai, l'attention */
.ap-encadre{border-radius:var(--rayon);padding:clamp(1.25rem,1rem + 1.2vw,2rem);box-shadow:inset 0 0 0 1px var(--filet)}
.ap-encadre > .ap-enc-tete{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-bottom:1.25rem}
.ap-enc-tete .lab{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--accent)}
.ap-enc-tete .lab svg{width:20px;height:20px}
.ap-enc-tete .info{font-size:var(--t-petit);color:var(--texte-2)}
.ap-encadre.essai{background:var(--eleve);box-shadow:inset 0 0 0 1.5px var(--accent)}
.ap-encadre.attention{box-shadow:inset 0 0 0 1px var(--filet),inset 4px 0 0 var(--destructif)}
.ap-encadre.attention .lab{color:var(--destructif)}
.ap-encadre ol.liste{padding-left:1.25rem}
.ap-encadre ol.liste li + li{margin-top:.5rem}

/* l'exemple pas à pas : ce qui entre, ce qui se passe, ce qui sort */
.ap-pas{list-style:none;counter-reset:p;display:flex;flex-direction:column;gap:0}
.ap-pas > li{counter-increment:p;display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.25rem .875rem;padding:1rem 0;border-top:1px solid var(--filet)}
.ap-pas > li::before{content:counter(p);grid-row:1 / span 3;width:1.75rem;height:1.75rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);display:grid;place-items:center;font-weight:600;font-size:.875rem}
.ap-pas > li > *{grid-column:2}
.ap-pas .quoi{font-weight:600}
.ap-pas .vu{color:var(--texte-2)}
.ap-passage{display:block;margin-top:.5rem;padding:.75rem .875rem;border-radius:var(--rayon-champ);background:var(--fond-2);font-size:.9375rem;line-height:1.5}
.ap-passage .src{display:block;font-size:.8125rem;font-weight:600;color:var(--texte-2);margin-bottom:.125rem}
.ap-passage.retenu{box-shadow:inset 0 0 0 1.5px var(--accent)}
.ap-passage.perime{box-shadow:inset 0 0 0 1.5px var(--destructif)}
.ap-reponse{display:block;margin-top:.5rem;padding:.875rem 1rem;border-radius:var(--rayon-champ);background:var(--eleve);box-shadow:inset 0 0 0 1px var(--filet);font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.0625rem;line-height:1.5}
.ap-cite{display:inline-grid;place-items:center;min-width:1.375rem;height:1.375rem;padding:0 .25rem;margin:0 .125rem;border-radius:99px;background:var(--accent);color:var(--sur-accent);font:700 .75rem/1 var(--sans);vertical-align:.15em;text-decoration:none}
.ap-fabrique{font-size:var(--t-petit);color:var(--texte-2)}

/* le tableau des pannes : ce qu'on voit, la cause, le remède ; en cartes sur mobile */
.ap-tab{width:100%;border-collapse:collapse;font-size:.9375rem}
.ap-tab th{text-align:left;font-weight:600;font-size:.8125rem;color:var(--texte-2);padding:.625rem .75rem .625rem 0;border-bottom:1.5px solid var(--filet)}
.ap-tab td{padding:.875rem .75rem .875rem 0;border-bottom:1px solid var(--filet);vertical-align:top;line-height:1.45}
.ap-tab td:first-child{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.0625rem;width:34%}
.ap-tab td:last-child{color:var(--texte)}
.ap-tab td:nth-child(2){color:var(--texte-2)}
.ap-tab sup{color:var(--accent)}
@media (max-width:699px){
  .ap-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ap-tab tr{display:block;padding:1rem 0;border-bottom:1px solid var(--filet)}
  .ap-tab td{display:block;padding:.25rem 0;border:0;width:auto !important}
  .ap-tab td::before{content:attr(data-l);display:block;font:600 .8125rem/1.3 var(--sans);color:var(--texte-2)}
  .ap-tab td:first-child::before{display:none}
}

/* un tableau de deux ou trois colonnes (une étiquette, puis du texte) se lit en rangées : l'étiquette à gauche,
   le texte à droite, le motif des pages de réalisations. Le code reste un tableau, seul le dessin change.
   site/_apprendre.py pose .ap-rangees sur les tableaux qui s'y prêtent (aucun nombre à comparer en travers) ;
   --cap est la largeur des légendes d'un tableau à trois colonnes. Sur mobile, les cartes ci-dessus restent. */
@media (min-width:700px){
  .ap-tab.ap-rangees{display:block;font-size:.9375rem}
  .ap-tab.ap-rangees thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ap-tab.ap-rangees tbody{display:block;border-top:1px solid var(--filet)}
  .ap-tab.ap-rangees tr{display:grid;grid-template-columns:minmax(9rem,30%) minmax(0,1fr);column-gap:2.5rem;padding:1rem 0;border-bottom:1px solid var(--filet)}
  .ap-tab.ap-rangees td{display:block;padding:0;border:0;width:auto;grid-column:2;color:var(--texte)}
  .ap-tab.ap-rangees td:first-child{grid-column:1;grid-row:1 / span 3}
  .ap-tab.ap-rangees td + td{margin-top:.25rem}
  .ap-tab.ap-rangees.ap-r3{--cap:5.5rem}
  .ap-tab.ap-rangees.ap-r3 td:nth-child(n+2){padding-left:calc(var(--cap) + .75rem);text-indent:calc(-1 * (var(--cap) + .75rem))}
  .ap-tab.ap-rangees.ap-r3 td:nth-child(n+2)::before{content:attr(data-l);display:inline-block;width:var(--cap);margin-right:.75rem;text-indent:0;font:600 .75rem/1.45 var(--sans);color:var(--texte-2);vertical-align:baseline}
}

/* les onglets d'environnement : la forme segmentée de l'index des réalisations */
.ap-onglets [role="tablist"]{margin-bottom:1.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ap-onglets .segmente button{white-space:nowrap}
.ap-onglets [role="tabpanel"] > * + *{margin-top:.75rem}
.ap-onglets [role="tabpanel"][hidden]{display:none}
.ap-onglets .ap-pour{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:1rem}
.ap-onglets .ap-pour div{padding:.75rem 0;border-top:1px solid var(--filet)}
.ap-onglets .ap-pour b{display:block;font-size:.875rem;color:var(--texte-2);font-weight:600}
@media (min-width:700px){.ap-onglets .ap-pour{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gout)}}
.no-js .ap-onglets [role="tabpanel"][hidden]{display:block}
.no-js .ap-onglets [role="tablist"]{display:none}

/* pour vérifier : l'accordéon du site, une question par pli */
.ap-verif .acc summary,.ap-rappel .acc summary{font-size:var(--t-4)}
.ap-verif .qnum,.ap-rappel .qnum{flex:none;font-family:var(--sans);font-size:.875rem;font-weight:600;color:var(--accent);margin-right:.75rem}
.ap-verif summary span.q{flex:1}
.ap-verif .type{display:block;font-family:var(--sans);font-size:.8125rem;font-weight:600;color:var(--texte-2);margin-bottom:.25rem}

/* les idées de la page */
.ap-idees{display:flex;flex-wrap:wrap;gap:.625rem}
.ap-idee{display:inline-flex;align-items:center;gap:.625rem;min-height:44px;padding:.375rem 1rem .375rem .5rem;border-radius:99px;box-shadow:inset 0 0 0 1px var(--filet);text-decoration:none;color:var(--texte);font-size:.9375rem}
.ap-idee i{font-style:normal;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--accent);color:var(--sur-accent);display:grid;place-items:center;font-weight:700;font-size:.8125rem}
.ap-idee:hover{box-shadow:inset 0 0 0 1px var(--accent)}

/* le même sujet sous un autre angle */
.ap-angles{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.ap-angles li{border-top:1px solid var(--filet)}
.ap-angles a,.ap-angles .ici{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;gap:.25rem 1rem;align-items:baseline;padding:.875rem 0;text-decoration:none;color:var(--texte)}
.ap-angles .g{font-size:.875rem;font-weight:600;color:var(--accent)}
.ap-angles .n{font-size:.8125rem;color:var(--texte-2);white-space:nowrap}
.ap-angles a:hover .t{text-decoration:underline}
.ap-angles .ici .t{color:var(--texte-2)}
.ap-angles .ici .g{color:var(--texte-2)}
@media (max-width:599px){
  .ap-angles a,.ap-angles .ici{grid-template-columns:minmax(0,1fr) auto}
  .ap-angles .g{grid-column:1 / -1}
}

/* la sortie : l'étape suivante, la carte de l'offre */
.ap-sortie{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gout);margin-top:clamp(2rem,1.5rem + 2vw,3rem)}
@media (min-width:900px){.ap-sortie{grid-template-columns:1.2fr 1fr}}
.ap-sortie .suivante .ap-progres{width:100%;max-width:18rem}
.ap-sortie .suivante,.ap-sortie .forfait-lie{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.75rem}
.ap-sortie .forfait-lie .b{margin-top:auto}

/* le bloc de code d'un atelier */
.ap-code{background:var(--fond-2);border-radius:var(--rayon-m);overflow:hidden}
.ap-code .ent{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem;padding:.5rem .5rem .5rem 1.125rem;border-bottom:1px solid var(--filet);font-size:.8125rem;color:var(--texte-2)}
.ap-code .ent code{color:var(--texte)}
.ap-code pre{margin:0;padding:1rem 1.125rem 1.25rem;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem;line-height:1.6;color:var(--texte);-webkit-overflow-scrolling:touch}
.ap-code .k{color:var(--accent);font-weight:600}
.ap-code .c{color:var(--texte-2)}
.ap-code .s{color:var(--texte)}
.ap-copier{min-height:36px;padding:0 .875rem;border:0;border-radius:99px;background:var(--fond);color:var(--texte);font-size:.8125rem;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px var(--filet)}
.ap-copier:hover{box-shadow:inset 0 0 0 1px var(--texte-2)}
.ap-copier:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* une commande par système, côte à côte (page poste-dev) */
.ap-os{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;margin-top:.5rem}
@media (min-width:700px){.ap-os{grid-template-columns:repeat(2,minmax(0,1fr))}.ap-os > .ap-code:only-child{grid-column:1 / -1}}
/* deux façons côte à côte : un long document, une fiche (page base-de-fiches) */
.ap-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem var(--gout)}
@media (min-width:700px){.ap-duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ap-duo > div > .legende{display:block;margin-bottom:.5rem}
.ap-duo .ap-passage + .discret{margin-top:.625rem;font-size:var(--t-petit)}
.ap-fiche dl{display:grid;grid-template-columns:minmax(0,1fr);gap:.125rem;margin-top:.5rem}
.ap-fiche dt{font-size:.8125rem;font-weight:600;color:var(--texte-2);margin-top:.375rem}
.ap-fiche dd{margin:0}
/* une sortie pas encore obtenue : décision du 7 octobre 2026 (33, §6) */
.sortie.a-venir{background:transparent;box-shadow:inset 0 0 0 1.5px var(--filet)}
.sortie.a-venir .attente{padding:.875rem 1.125rem 1rem;font-size:var(--t-petit);line-height:1.5;color:var(--texte-2)}
.sortie.a-venir .attente b{color:var(--texte)}
/* les fichiers d'exercice à télécharger (pages S'exercer) */
.ap-fichiers{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--filet)}
.ap-fichiers > li{display:grid;grid-template-columns:1.75rem minmax(0,1fr) auto;gap:.25rem .875rem;align-items:start;padding:1rem 0;border-bottom:1px solid var(--filet)}
.ap-fichiers .ico{width:1.5rem;height:1.5rem;margin-top:.125rem;color:var(--accent)}
.ap-fichiers .nom{font-weight:600}
.ap-fichiers .meta{display:block;font-size:var(--t-petit);color:var(--texte-2);margin-top:.125rem}
.ap-fichiers .b{align-self:center;white-space:nowrap}
.ap-fichiers details{grid-column:2 / -1;margin-top:.25rem}
.ap-fichiers details summary{cursor:pointer;font-size:var(--t-petit);color:var(--texte-2)}
.ap-fichiers .apercu{margin-top:.5rem;padding:1rem 1.125rem;border-radius:var(--rayon-m);background:var(--fond-2);font-size:.9375rem;line-height:1.5}
.ap-fichiers .apercu h4{font-size:1rem;margin:.75rem 0 .25rem}
.ap-fichiers .apercu h4:first-child{margin-top:0}
@media (max-width:560px){.ap-fichiers > li{grid-template-columns:1.75rem minmax(0,1fr)}.ap-fichiers .b{grid-column:2;justify-self:start;margin-top:.5rem}}
.ap-essaye{font-size:var(--t-petit);color:var(--texte-2);margin-top:.5rem}

/* l'interface redessinée (35-images-des-pages.md, famille C) : la fenêtre de l'outil en papier
   découpé, dans l'étape qu'elle montre, avant « Ce que vous voyez ». Toile de 800 : elle tient
   dans la colonne de lecture, et défile dans son cadre sous 34rem. Dessinée par
   outils/interfaces_apprendre.py. */
.ap-pas .ap-interface{margin:1rem 0 .75rem}
.ap-interface svg{min-width:34rem}
.ap-interface figcaption{font-size:var(--t-petit);color:var(--texte-2)}

/* le logo repère (35-images-des-pages.md, §2) : devant le nom de l'outil, à la hauteur du texte,
   à sa couleur ; dans un onglet, il suit l'état de l'onglet. Écrit par outils/remplir.py. */
.ap-logo{display:inline-flex;gap:.3em;margin-right:.45em;vertical-align:-.14em}
.ap-logo svg{width:1em;height:1em;flex:none}

/* le fac-similé d'un lot de documents fabriqués (35-images-des-pages.md, famille B) : écrit par
   outils/remplir.py depuis le Markdown de fichiers/, jamais à la main. Le lot arrive en vrac, les
   feuilles un peu de travers ; rangé (.range), elles se redressent en deux tas, et la ligne en
   échec est cerclée de rouge, le trait posé en trois images à 6 par seconde (09-mouvement.md).
   Sur téléphone, les feuilles défilent dans leur cadre plutôt que de rapetisser (33, §8). */
.ap-facs{margin-top:1.5rem}
.ap-facs > figcaption,.ap-facs-note{margin-top:.875rem;font-size:var(--t-petit);line-height:1.5;color:var(--texte-2);max-width:var(--mesure)}
.ap-facs-tas + .ap-facs-tas{margin-top:1.5rem}
.ap-facs-tas > .legende{display:block;margin-bottom:.75rem}
.ap-facs-lot{list-style:none;margin:0;padding:.25rem 0 .5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));gap:1.125rem 1rem;align-items:start}
.ap-fac{position:relative;padding:1rem 1rem .875rem;border:1px solid var(--filet);border-radius:6px;background:var(--eleve);
  box-shadow:0 1px 0 var(--filet),0 10px 18px -14px rgba(23,24,28,.35);font-size:.8125rem;line-height:1.45;font-variant-numeric:tabular-nums}
.ap-fac::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grain);opacity:var(--grain-opacite);mix-blend-mode:var(--grain-mode);pointer-events:none}
.ap-facs-lot:not(.range) > .ap-fac:nth-child(3n+1){rotate:-.7deg}
.ap-facs-lot:not(.range) > .ap-fac:nth-child(3n+2){rotate:.5deg}
.ap-facs-lot:not(.range) > .ap-fac:nth-child(4n){rotate:-.25deg;translate:0 3px}
.ap-fac-n{position:absolute;top:-.625rem;right:.75rem;display:grid;place-items:center;min-width:1.375rem;height:1.375rem;padding:0 .3rem;border-radius:999px;
  background:var(--fond);box-shadow:inset 0 0 0 1px var(--contour);font-size:.75rem;font-weight:600;color:var(--texte)}
.ap-fac-tete{display:flex;flex-wrap:wrap;gap:0 .375rem;align-items:baseline;padding-right:1rem}
.ap-fac-tete b{font-size:.9375rem;font-weight:600;letter-spacing:0}
.ap-fac-tete .date{flex-basis:100%;color:var(--texte-2)}
.ap-fac-de{margin-top:.5rem;font-weight:600}
.ap-fac-de span{display:block;font-weight:400;font-size:.75rem;color:var(--texte-2)}
.ap-fac-l{list-style:none;margin:.625rem 0 0;padding:.5rem 0 0;border-top:1px dashed var(--trait-2)}
.ap-fac-l li,.ap-fac-tot > div{display:flex;justify-content:space-between;gap:.75rem}
.ap-fac-l li > span:first-child{flex:1 1 0;min-width:0}
.ap-fac-l li + li{margin-top:.25rem}
.ap-fac-l li.ent{font-size:.6875rem;color:var(--texte-2)}
.ap-fac .m{white-space:nowrap;text-align:right}
.ap-fac-tot{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--filet)}
.ap-fac-tot > div + div{margin-top:.125rem}
.ap-fac-tot > div:last-child{font-weight:600}
.ap-fac .ch{position:relative}
.ap-fac .ch.faute{color:var(--destructif)}
.ap-fac .manque{font-style:italic}
.ap-fac .cercle{position:absolute;left:-.5rem;top:-.3rem;width:calc(100% + 1rem);height:calc(100% + .6rem);overflow:visible;pointer-events:none}
.ap-fac .cercle path{fill:none;stroke:var(--destructif);stroke-width:1.4;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;animation:ap-pose calc(var(--pas) * 3) steps(3,end) forwards}
.ap-fac-verdict{margin-top:.75rem;padding-top:.5rem;border-top:1px solid var(--filet);font-size:.8125rem}
.ap-fac-verdict b{display:block;font-weight:600}
.ap-fac-verdict.ok{display:flex;align-items:center;gap:.4rem;font-weight:600;color:var(--accent)}
.ap-fac-verdict.ok::before{content:"";width:.875rem;height:.875rem;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--accent)}
.ap-fac-verdict.nok b{color:var(--destructif)}
@media (max-width:699px){
  .ap-facs-lot{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:.875rem;padding:.75rem .25rem .875rem;margin:0 -.25rem}
  .ap-facs-lot > .ap-fac{flex:0 0 min(15rem,78%);scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.ap-fac .cercle path{animation:none;stroke-dashoffset:0}}
/* les documents d'exercice en feuilles (data-forme="document") : la première page de chaque
   fichier, sur papier, qui s'estompe vers le bas ; le texte entier se lit dans le repli au-dessus.
   Le titre du document en Fraunces, le corps petit, les tableaux à filets. */
.ap-feuilles{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
.ap-feuille{position:relative;max-height:25rem;overflow:hidden;padding:1.375rem 1.375rem 0;border:1px solid var(--filet);border-radius:6px;background:var(--eleve);
  box-shadow:0 1px 0 var(--filet),0 10px 18px -14px rgba(23,24,28,.35);
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.ap-feuille::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:var(--grain-opacite);mix-blend-mode:var(--grain-mode);pointer-events:none}
.ap-feuille .texte{font-size:.75rem;line-height:1.5;color:var(--texte)}
.ap-feuille .texte > * + *{margin-top:.5rem}
.ap-feuille h1{font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.0625rem;line-height:1.2}
.ap-feuille h2{font-size:.8125rem;font-weight:600;margin-top:.875rem}
.ap-feuille h3{font-size:.75rem;font-weight:600}
.ap-feuille h1 + p{color:var(--texte-2);font-size:.6875rem}
.ap-feuille ul,.ap-feuille ol{padding-left:1rem}
.ap-feuille table{width:100%;border-collapse:collapse;font-size:.6875rem}
.ap-feuille th,.ap-feuille td{padding:.25rem .375rem .25rem 0;border-bottom:1px solid var(--filet);text-align:left;vertical-align:top}
.ap-feuille th{font-weight:600}
@media (max-width:699px){.ap-facs-lot > .ap-feuille{flex:0 0 min(17rem,82%)}}

/* la liste de contrôle */
.ap-controle{list-style:none}
.ap-controle li{border-top:1px solid var(--filet)}
.ap-controle li:last-child{border-bottom:1px solid var(--filet)}
.ap-controle label{display:grid;grid-template-columns:1.375rem minmax(0,1fr);gap:.875rem;align-items:start;padding:.875rem 0;cursor:pointer}
.ap-controle input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:.15rem 0 0;border-radius:6px;border:1.5px solid var(--contour);background:var(--champ);display:grid;place-items:center}
.ap-controle input::after{content:"";width:10px;height:6px;border-left:2px solid var(--sur-accent);border-bottom:2px solid var(--sur-accent);transform:rotate(-45deg) translate(1px,-1px) scale(0)}
.ap-controle input:checked{background:var(--accent);border-color:var(--accent)}
.ap-controle input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.ap-controle input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ap-controle .pq{display:block;font-size:var(--t-petit);color:var(--texte-2);margin-top:.25rem}
.ap-controle input:checked + span{color:var(--texte-2)}
.ap-temps-controle{font-size:var(--t-petit);color:var(--texte-2);margin-bottom:.5rem}

/* le chiffre dans son contexte : le contexte d'abord, le chiffre ensuite, la source dessous */
.ap-chiffre{display:grid;gap:.375rem;padding:1.25rem 0;border-block:1px solid var(--filet)}
.ap-chiffre .ctx{color:var(--texte-2);max-width:48ch}
.ap-chiffre .v{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem}
.ap-chiffre .v .chiffre{color:var(--accent)}
.ap-chiffre .src{font-size:.8125rem;color:var(--texte-2)}

/* la citation sourcée */
.ap-citation{margin:0;padding:1.25rem 0 1.25rem 1.5rem;border-left:2px solid var(--accent)}
.ap-citation p{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-3);line-height:1.3}
.ap-citation footer{margin-top:.75rem;font-size:var(--t-petit);color:var(--texte-2)}

/* ce qui se vérifie, ce qui ne se vérifie pas : deux colonnes alignées ligne à ligne */
.ap-deux{width:100%;border-collapse:collapse;font-size:.9375rem}
.ap-deux th{text-align:left;padding:.625rem .75rem .625rem 0;font-size:.8125rem;font-weight:600;color:var(--texte-2);border-bottom:1.5px solid var(--filet);width:50%}
.ap-deux td{padding:.875rem .75rem .875rem 0;border-bottom:1px solid var(--filet);vertical-align:top;line-height:1.45}
.ap-deux .ok,.ap-deux .ko{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;margin-right:.5rem;border-radius:50%;font:700 .75rem/1 var(--sans);vertical-align:.1em}
.ap-deux .ok{background:var(--accent);color:var(--sur-accent)}
.ap-deux .ko{box-shadow:inset 0 0 0 1.5px var(--texte-2);color:var(--texte-2)}

/* l'échelle : les niveaux d'autonomie d'un agent */
.ap-echelle{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.ap-echelle li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.25rem .875rem;align-items:start;padding:1rem 1.125rem;border-radius:var(--rayon-champ);background:var(--fond-2)}
.ap-echelle li b{font-weight:600}
.ap-echelle li p{grid-column:2;color:var(--texte-2);font-size:.9375rem}
.ap-echelle .niv{grid-row:1 / span 2;font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.75rem;line-height:1;color:var(--accent)}
.ap-echelle li.limite{background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent)}
.ap-echelle .borne{grid-column:1 / -1;display:flex;align-items:center;gap:.75rem;padding:.375rem 0;font-size:.8125rem;font-weight:600;color:var(--accent);background:none}
.ap-echelle .borne::before,.ap-echelle .borne::after{content:"";flex:1;height:1.5px;background:var(--accent)}

/* les jetons d'une phrase */
.ap-jetons{display:flex;flex-wrap:wrap;gap:5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9375rem}
.ap-jetons span{padding:.25rem .5rem;border-radius:6px;background:var(--fond-2);box-shadow:inset 0 0 0 1px var(--filet);white-space:pre}
.ap-jetons span:nth-child(3n+2){background:var(--eleve)}
.js .ap-jetons.mvt-att span{visibility:hidden}
.ap-jetons span.on{visibility:visible !important}

/* ————————————————————————————————————————— les scènes : un phénomène, état après état */
.ap-scene{margin:0;border-radius:var(--rayon);background:var(--fond-2);padding:clamp(1rem,.7rem + 1.2vw,1.75rem)}
.ap-scene .cadre{position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.ap-scene svg{display:block;width:100%;min-width:40rem;max-width:50rem;height:auto;margin-inline:auto}
/* sous 640 px, la scène défile dans son cadre plutôt que de rapetisser son texte, comme les schémas du site */
.ap-scene figcaption{display:flex;flex-direction:column;gap:.625rem;margin-top:1rem}
.ap-scene .etats{list-style:none;display:flex;flex-wrap:wrap;gap:.375rem .5rem;font-size:.8125rem;color:var(--texte-2)}
.ap-scene .etats li{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:99px;box-shadow:inset 0 0 0 1px var(--filet)}
.ap-scene .etats li i{font-style:normal;font-weight:700;color:var(--accent)}
.ap-scene .etats li.ici{background:var(--fond);color:var(--texte);box-shadow:inset 0 0 0 1.5px var(--accent)}
.ap-scene .bas{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem}
.ap-scene .titre{font-weight:600}
.ap-scene .note{font-size:.8125rem;color:var(--texte-2)}
.ap-rejouer{min-height:36px;padding:0 .875rem;border:0;border-radius:99px;background:var(--fond);color:var(--accent);font-size:.8125rem;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px var(--filet)}
.ap-rejouer:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.ap-rejouer:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.no-js .ap-rejouer{display:none}

/* les encres des scènes : elles suivent le thème */
.ap-scene text,.ap-graphe text{font-family:var(--sans);fill:var(--texte)}
.ap-scene text.g,.ap-graphe text.g{fill:var(--texte-2)}
.ap-scene text.a,.ap-graphe text.a{fill:var(--accent)}
.ap-scene text.f{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100}
.ap-scene text.sur{fill:var(--sur-accent)}
.x-fond{fill:var(--fond)} .x-eleve{fill:var(--eleve)} .x-fond2{fill:var(--fond-2)} .x-filet{fill:var(--filet)}
.x-accent{fill:var(--accent)} .x-texte{fill:var(--texte)} .x-texte2{fill:var(--texte-2)} .x-rouge{fill:var(--destructif)}
.s-accent{stroke:var(--accent);fill:none} .s-texte{stroke:var(--texte);fill:none} .s-texte2{stroke:var(--texte-2);fill:none}
.s-filet{stroke:var(--filet);fill:none} .s-rouge{stroke:var(--destructif);fill:none}

/* un élément de scène paraît à son état (data-des) et le garde ; avec script seulement */
.js .ap-scene.mvt-att [data-des]{visibility:hidden}
.js .ap-scene.mvt-att [data-des].on{visibility:visible}
.js .ap-scene.mvt-att [data-jusqua].off{visibility:hidden}
/* un trait se pose en six pas, à 6 images par seconde : il saute, il ne fond pas */
.ap-scene .tr{stroke-dasharray:1;stroke-dashoffset:0}
.js .ap-scene.mvt-att .tr[data-des].on{animation:ap-pose calc(var(--pas) * 6) steps(6,end) both}
@keyframes ap-pose{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* une surface glisse sur la courbe commune */
.ap-scene .gl{transition:transform var(--entree) var(--courbe),opacity var(--entree) var(--courbe)}
@media (prefers-reduced-motion:reduce){
  .ap-scene .gl{transition:none}
  .js .ap-scene.mvt-att .tr[data-des].on{animation:none}
}

/* le graphique en points */
.ap-graphe{margin:0}
.ap-graphe .cadre{border-radius:var(--rayon);background:var(--fond-2);padding:clamp(1rem,.7rem + 1.2vw,1.75rem)}
.ap-graphe .cadre{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ap-graphe svg{display:block;width:100%;min-width:38rem;height:auto;overflow:visible}
.ap-graphe .pt{cursor:pointer}
.ap-graphe .pt:focus{outline:none}
.ap-graphe .pt:focus-visible .cible{stroke:var(--focus);stroke-width:2}
.ap-graphe .cible{fill:transparent}
.ap-graphe figcaption{margin-top:.75rem;font-size:.8125rem;color:var(--texte-2);max-width:var(--mesure)}
.ap-info{position:absolute;z-index:30;pointer-events:none;padding:.625rem .75rem;border-radius:12px;background:var(--eleve);box-shadow:inset 0 0 0 1px var(--filet),0 6px 20px rgba(14,18,32,.12);font-size:.8125rem;line-height:1.45;color:var(--texte);max-width:16rem;opacity:0;transition:opacity var(--etat) var(--courbe)}
.ap-info.on{opacity:1}
.ap-info b{display:block}
.ap-tableau-vue{margin-top:.75rem}
.ap-tableau-vue summary{cursor:pointer;font-size:.875rem;font-weight:600;color:var(--accent);min-height:44px;display:inline-flex;align-items:center}
.ap-tableau-vue table{width:100%;border-collapse:collapse;font-size:.875rem;margin-top:.5rem}
.ap-tableau-vue th,.ap-tableau-vue td{text-align:left;padding:.5rem .5rem .5rem 0;border-bottom:1px solid var(--filet)}
.ap-tableau-vue td.n{text-align:right;font-variant-numeric:tabular-nums}

/* ————————————————————————————————————————— la planche : les annotations */
.pl-barre{position:fixed;z-index:80;left:1rem;bottom:1rem;display:flex;gap:.5rem;align-items:center;padding:.375rem;border-radius:99px;background:var(--texte);color:var(--fond);box-shadow:0 6px 24px rgba(14,18,32,.25);font-size:.8125rem}
.pl-barre span{padding:0 .5rem;font-weight:600}
.pl-barre button{min-height:32px;padding:0 .875rem;border:0;border-radius:99px;background:var(--fond);color:var(--texte);font:600 .8125rem/1 var(--sans);cursor:pointer}
.pl-barre button[aria-pressed="true"]{background:var(--accent);color:var(--sur-accent)}
.pl-annote [data-type]{position:relative;outline:1.5px dashed color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:6px}
.pl-annote [data-type]::after{content:attr(data-type);position:absolute;z-index:45;top:-1.125rem;right:-4px;padding:.125rem .5rem;border-radius:6px;background:var(--accent);color:var(--sur-accent);font:600 .6875rem/1.4 var(--sans);white-space:nowrap;pointer-events:none}

/* ————————————————————————————————————————— la planche des types d'information */
.el-tete{padding-top:clamp(2rem,1.2rem + 3vw,4.5rem)}
.el-tete .titre-1{max-width:18ch;margin-top:1rem}
.el-tete .chapo{margin-top:1.25rem}
.el-tete .sommaire{margin-top:2rem}
.el-fam{padding-top:var(--section);scroll-margin-top:calc(var(--entete) + 1rem)}
.el-fam-tete{display:flex;flex-direction:column;gap:.75rem;max-width:46rem;margin-bottom:clamp(1.5rem,1rem + 2vw,2.5rem)}
.el{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem var(--duo);padding-block:clamp(1.75rem,1.3rem + 1.6vw,2.75rem);border-top:1px solid var(--filet);scroll-margin-top:calc(var(--entete) + 1rem)}
@media (min-width:1000px){.el{grid-template-columns:18.5rem minmax(0,1fr)}}
.el-info{display:flex;flex-direction:column;gap:.625rem}
.el-info .num{font-size:.8125rem;font-weight:600;color:var(--accent)}
.el-info p{color:var(--texte-2);font-size:.9375rem;line-height:1.5}
.el-info dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem .75rem;font-size:.875rem;margin-top:.25rem}
.el-info dt{font-weight:600;color:var(--texte)}
.el-info dd{margin:0;color:var(--texte-2)}
.el-vue{min-width:0}
.el-vue > * + *{margin-top:1rem}
.el-renvoi{font-size:.875rem}
.genres{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:700px){.genres{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gout)}}
.genres > div{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.125rem .75rem;padding:.875rem 0;border-top:1px solid var(--filet)}
.genres .ico{grid-row:1 / span 2;width:2rem;height:2rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);display:grid;place-items:center}
.genres .ico svg{width:16px;height:16px}
.genres b{font-weight:600}
.genres span.b2{font-size:.875rem;color:var(--texte-2)}
.niveaux{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
@media (min-width:700px){.niveaux{grid-template-columns:repeat(4,minmax(0,1fr))}}
.niveaux > div{padding:1rem 1.125rem;border-radius:var(--rayon-champ);background:var(--fond-2)}
.niveaux b{display:block;font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.25rem}
.niveaux span{display:block;font-size:.875rem;color:var(--texte-2);margin-top:.25rem}
.fait{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1.5px solid var(--texte)}
.fait > div{padding:.875rem 0;border-bottom:1px solid var(--filet)}
.fait b{display:block;font-size:.8125rem;font-weight:600;color:var(--texte-2);margin-bottom:.25rem}
.fait .t{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);line-height:1.3}
.journal{list-style:none;font-size:.875rem;color:var(--texte-2)}
.journal li{padding:.5rem 0;border-top:1px solid var(--filet)}
.journal b{color:var(--texte);font-weight:600}
.position{border-radius:var(--rayon);padding:clamp(1.25rem,1rem + 1.2vw,2rem);background:var(--fond-2)}
.position .legende{display:block;margin-bottom:.5rem}
.position p.t{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);line-height:1.35}
.position .change{margin-top:1rem;padding-top:.875rem;border-top:1px solid var(--filet);font-size:.9375rem;color:var(--texte-2)}
.position .change b{color:var(--texte)}
.tab-date{width:100%;border-collapse:collapse;font-size:.9375rem}
.tab-date caption{text-align:left;font-size:.8125rem;color:var(--texte-2);padding-bottom:.625rem;caption-side:top}
.tab-date th{text-align:left;font-size:.8125rem;font-weight:600;color:var(--texte-2);padding:.625rem .75rem .625rem 0;border-bottom:1.5px solid var(--filet)}
.tab-date td{padding:.75rem .75rem .75rem 0;border-bottom:1px solid var(--filet);vertical-align:top}
.tab-date td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.tab-date td:first-child{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.0625rem}
.tab-date sup{color:var(--accent);font-weight:700}
.tab-date tr.choisie td{background:var(--fond-2)}
.renvois{list-style:none;margin-top:.75rem;font-size:.8125rem;color:var(--texte-2);display:flex;flex-direction:column;gap:.25rem}
.renvois b{color:var(--accent)}

/* sur téléphone, la bulle du glossaire se pose en bas de l'écran : elle ne déborde jamais */
@media (max-width:699px){
  .ap-bulle{position:fixed;left:1rem;right:1rem;bottom:1rem;top:auto;width:auto;transform:translateY(8px)}
}
/* une carte en grille garde sa colonne dans l'écran, même avec un schéma qui défile */
.carte.ap-large{grid-template-columns:minmax(0,1fr)}

/* ————————————————————————————————————————— l'explorable : prédire, lancer, comparer */
.ex{margin:0;border-radius:var(--rayon);background:var(--fond-2);padding:clamp(1.25rem,.9rem + 1.4vw,2.25rem);display:flex;flex-direction:column;gap:1.25rem}
.ex-tete{display:flex;flex-direction:column;gap:.5rem;max-width:var(--mesure)}
.ex-etapes{list-style:none;display:flex;flex-wrap:wrap;gap:.375rem .5rem;font-size:.8125rem;color:var(--texte-2)}
.ex-etapes li{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:99px;box-shadow:inset 0 0 0 1px var(--filet)}
.ex-etapes li i{font-style:normal;font-weight:700;color:var(--accent)}
.ex-etapes li.ici{background:var(--fond);color:var(--texte);box-shadow:inset 0 0 0 1.5px var(--accent)}
.ex-questions{display:flex;flex-wrap:wrap;gap:.5rem}
.ex-q{min-height:40px;padding:.375rem .875rem;border:0;border-radius:12px;background:var(--fond);color:var(--texte);font-size:.9375rem;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px var(--filet)}
.ex-q:hover{box-shadow:inset 0 0 0 1px var(--texte-2)}
.ex-q[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);font-weight:600}
.ex-q:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ex-corps{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
@media (min-width:900px){.ex-corps{grid-template-columns:minmax(0,1.45fr) minmax(15rem,1fr);align-items:start}}
.ex-carte{background:var(--fond);border-radius:var(--rayon-m);padding:.75rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ex-carte svg{display:block;width:100%;min-width:30rem;height:auto}
.ex-qtexte{min-height:1.5em;padding:.25rem .5rem 0;font-weight:600;color:var(--accent)}
.ex-carte text{font-family:var(--sans);fill:var(--texte)} .ex-carte text.g{fill:var(--texte-2)} .ex-carte text.a{fill:var(--accent)}
.ex-pt{cursor:pointer;outline:none}
.ex-pt .zone{fill:transparent}
.ex-pt .pt{fill:var(--texte-2);transition:opacity var(--etat) var(--courbe)}
.ex-pt:hover .pt,.ex-pt:focus-visible .pt{fill:var(--texte)}
.ex-pt:focus-visible .zone{stroke:var(--focus);stroke-width:2}
.ex-pt .predit,.ex-pt .trouve{fill:none;opacity:0}
.ex-pt .predit{stroke:var(--texte);stroke-width:1.8;stroke-dasharray:3 3}
.ex-pt.est-predit .predit{opacity:1}
.ex-pt .trouve{stroke:var(--accent);stroke-width:2.6}
.ex-pt.est-trouve .trouve{opacity:1}
.ex-pt.est-trouve .pt{fill:var(--accent)}
.ex-pt.eteint .pt{opacity:.3}
.ex-pt .compte{fill:var(--accent)}
.ex-carte .rayon{fill:color-mix(in srgb,var(--accent) 8%,transparent);stroke:var(--accent);stroke-width:1.5}
.ex-carte .tr-ex{stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;fill:none;stroke-dasharray:1;stroke-dashoffset:1;animation:ap-pose calc(var(--pas) * 2) steps(2,end) forwards}
@media (prefers-reduced-motion:reduce){.ex-carte .tr-ex{animation:none;stroke-dashoffset:0}}
.ex-panneau{background:var(--fond);border-radius:var(--rayon-m);padding:1.125rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;font-size:.9375rem;line-height:1.5}
.ex-p-lab{font-size:.8125rem;font-weight:600;color:var(--texte-2)}
.ex-compteur{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.5rem;color:var(--accent)}
.ex-lu{min-height:3.5em;padding-top:.75rem;border-top:1px solid var(--filet);color:var(--texte)}
.ex-lu:empty{display:none}
.ex-src{display:block;font-size:.8125rem;font-weight:600;color:var(--texte-2);margin-bottom:.125rem}
.ex-res{list-style:none;counter-reset:r;display:flex;flex-direction:column;gap:0}
.ex-res li{counter-increment:r;position:relative;padding:.625rem 0 .625rem 1.75rem;border-top:1px solid var(--filet)}
.ex-res li::before{content:counter(r);position:absolute;left:0;top:.6rem;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--accent);color:var(--sur-accent);font-size:.75rem;font-weight:700;display:grid;place-items:center}
.ex-res .ex-t{display:block}
.ex-res b{color:var(--accent)}
.ex-barre{display:block;height:4px;margin-top:.5rem;border-radius:2px;background:var(--filet)}
.ex-barre i{display:block;height:100%;border-radius:2px;background:var(--accent)}
.ex-verdict{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4)}
.ex-lecon{padding:.75rem .875rem;border-radius:var(--rayon-champ);background:var(--fond-2)}
.ex-suite{font-size:.875rem;color:var(--texte-2)}
.ex-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem}
.ex-mode button{min-height:40px}
.ex-lancer[disabled]{opacity:.45;cursor:not-allowed}
.ex-note{font-size:.8125rem;color:var(--texte-2);max-width:var(--mesure)}
.no-js .ex{display:none}

/* ————————————————————————————————————————— la planche des structures (30-apprendre-structures.md) */
.st-cadre{border-radius:var(--rayon);background:var(--fond-2);padding:clamp(1rem,.8rem + 1.2vw,2rem)}
.st-cadre svg{display:block;width:100%;height:auto}
.st-defile{overflow-x:auto;-webkit-overflow-scrolling:touch}
.st-defile svg{min-width:46rem}
.st-legende{margin-top:.75rem;font-size:.8125rem;color:var(--texte-2);max-width:var(--mesure)}
.st-pour{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:1rem;font-size:.9375rem}
@media (min-width:700px){.st-pour{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gout)}}
.st-pour div{padding:.75rem 0;border-top:1px solid var(--filet)}
.st-pour b{display:block;font-size:.8125rem;color:var(--texte-2)}
/* S1 · la boussole */
.bous-mini{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
@media (min-width:800px){.bous-mini{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bous-mini a{display:flex;flex-direction:column;gap:.125rem;padding:.75rem .875rem;border-radius:var(--rayon-champ);background:var(--fond);text-decoration:none;color:var(--texte);box-shadow:inset 0 0 0 1px var(--filet)}
.bous-mini a:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.bous-mini .dir{font-size:.75rem;font-weight:700;color:var(--accent)}
.bous-mini .t{font-size:.9375rem;line-height:1.35}
.bous{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;margin-top:1.5rem}
@media (min-width:800px){.bous{grid-template-columns:1fr 1.1fr 1fr;grid-template-areas:". haut ." "avant ici apres" ". bas .";align-items:center}
  .bous .haut{grid-area:haut}.bous .avant{grid-area:avant}.bous .ici{grid-area:ici}.bous .apres{grid-area:apres}.bous .bas{grid-area:bas}}
.bous > div{padding:1rem 1.125rem;border-radius:var(--rayon-m);background:var(--fond);box-shadow:inset 0 0 0 1px var(--filet)}
.bous .dir{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:700;color:var(--accent);margin-bottom:.375rem}
.bous a{color:var(--texte);text-decoration:none;display:block;line-height:1.35}
.bous a:hover{text-decoration:underline}
.bous a + a{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--filet)}
.bous .m{display:block;font-size:.8125rem;color:var(--texte-2);margin-top:.125rem}
.bous .ici{background:var(--accent);color:var(--sur-accent);box-shadow:none;text-align:center}
.bous .ici .dir{color:var(--sur-accent);justify-content:center;opacity:.85}
.bous .ici p{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);line-height:1.3}
/* S2 · l'arbre, S3 · les lignes : les encres */
.st-cadre text{font-family:var(--sans);fill:var(--texte)} .st-cadre text.g{fill:var(--texte-2)} .st-cadre text.a{fill:var(--accent)} .st-cadre text.sur{fill:var(--sur-accent)}
.arb-n rect{fill:var(--fond);stroke:var(--filet);stroke-width:1.2;transition:fill var(--etat) var(--courbe),stroke var(--etat) var(--courbe)}
.arb-n{cursor:pointer;outline:none}
.arb-n:focus-visible rect{stroke:var(--focus);stroke-width:2}
.arb-n.ici rect{fill:var(--accent);stroke:var(--accent)} .arb-n.ici text{fill:var(--sur-accent)}
.arb-n.allume rect{stroke:var(--accent);stroke-width:2}
.arb-n.eteint{opacity:.35}
.arb-l{fill:none;stroke:var(--trait-2);stroke-width:1.4;transition:stroke var(--etat) var(--courbe),opacity var(--etat) var(--courbe)}
.arb-l.allume{stroke:var(--accent);stroke-width:2.4}
.arb-l.eteint{opacity:.25}
.arb-pointe{fill:var(--trait-2)} .arb-pointe-a{fill:var(--accent)}
.st-choix{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;align-items:center}
.st-choix span{font-size:.875rem;color:var(--texte-2);margin-right:.25rem}
.lig-l{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.lig-1{stroke:var(--accent)} .lig-2{stroke:var(--texte)} .lig-3{stroke:var(--texte-2)}
.lig-st{fill:var(--fond);stroke:var(--texte);stroke-width:2.5}
.lig-co{fill:var(--fond);stroke:var(--texte);stroke-width:3.5}
.lig-ici{fill:var(--accent);stroke:var(--accent);stroke-width:3}
/* S4 · le mécanisme comme sommaire */
.meca{display:grid;grid-template-columns:minmax(0,1fr);gap:.625rem}
@media (min-width:700px){.meca{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.meca{grid-template-columns:repeat(4,minmax(0,1fr))}}
.meca-r{grid-column:1 / -1;font-size:.875rem;font-weight:600;color:var(--texte-2);margin-top:.5rem}
.meca a{position:relative;display:flex;flex-direction:column;gap:.375rem;padding:1rem;border-radius:var(--rayon-m);background:var(--fond);text-decoration:none;color:var(--texte);box-shadow:inset 0 0 0 1px var(--filet);min-height:9.5rem}
.meca a:hover,.meca a:focus-visible{box-shadow:inset 0 0 0 1.5px var(--accent)}
.meca a.noir{background:var(--nuit-fixe);color:#EDE7DA;box-shadow:none}
.meca .n{width:1.75rem;height:1.75rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;display:grid;place-items:center;font-size:.8125rem;font-weight:700}
.meca .e{font-weight:600}
.meca .p{margin-top:auto;padding-top:.5rem;border-top:1px solid var(--filet);font-size:.875rem;color:var(--accent);line-height:1.35}
.meca a.noir .p{border-color:rgba(237,231,218,.2);color:#B3C4F3}
.meca .p small{display:block;color:var(--texte-2);font-size:.75rem;margin-top:.125rem}
.meca a.noir .p small{color:#A8A294}
/* S5 · les liens dits, et leur aperçu */
.dit{position:relative;display:inline;color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;cursor:pointer}
.dit svg{display:inline-block;width:.95em;height:.95em;vertical-align:-.12em;margin-right:.2em}
.apercu{position:absolute;z-index:40;width:min(19rem,80vw);padding:1rem;border-radius:var(--rayon-champ);background:var(--eleve);box-shadow:inset 0 0 0 1px var(--filet),0 8px 28px rgba(14,18,32,.14);font:400 .875rem/1.45 var(--sans);color:var(--texte);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--etat) var(--courbe),transform var(--etat) var(--courbe)}
.apercu.on{opacity:1;transform:none}
.apercu .lg{display:block;font-size:.75rem;font-weight:600;color:var(--accent);margin-bottom:.25rem}
.apercu b{display:block;font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.0625rem;line-height:1.3;margin-bottom:.375rem}
.apercu .d{color:var(--texte-2)}
.dits-leg{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:.8125rem;color:var(--texte-2);margin-top:1rem}
.dits-leg span{display:inline-flex;align-items:center;gap:.375rem}
.dits-leg svg{width:14px;height:14px;color:var(--accent)}
.retour{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--filet)}
.retour ul{list-style:none;margin-top:.5rem;display:flex;flex-direction:column;gap:.25rem}
.retour a{color:var(--texte)}
/* S6 · les questions en chaîne */
.chaine{list-style:none;display:flex;flex-direction:column;gap:0}
.chaine > li{position:relative;padding:0 0 1.25rem 2rem}
.chaine > li::before{content:"";position:absolute;left:.55rem;top:1.6rem;bottom:0;width:2px;background:var(--filet)}
.chaine > li:last-child::before{display:none}
.chaine .q{position:relative;display:block;font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);line-height:1.3}
.chaine .q::before{content:"";position:absolute;left:-2rem;top:.35rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--accent)}
.chaine .pg{display:block;margin-top:.25rem;font-size:.875rem;color:var(--texte-2)}
.chaine .pg a{color:var(--accent)}
.chaine .ens{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.chaine .ens a{padding:.375rem .75rem;border-radius:99px;background:var(--fond);box-shadow:inset 0 0 0 1px var(--filet);font-size:.875rem;color:var(--texte);text-decoration:none}
.chaine .ens a:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
/* le système recommandé */
.sys{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
@media (min-width:900px){.sys{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sys > div{padding:1.125rem;border-radius:var(--rayon-m);background:var(--fond);box-shadow:inset 0 0 0 1px var(--filet)}
.sys .ech{font-size:.75rem;font-weight:700;color:var(--accent)}
.sys b{display:block;font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.25rem;margin:.25rem 0 .375rem}
.sys p{font-size:.875rem;color:var(--texte-2)}

/* ————————————————————————————————————————— une question posée à un assistant : la réponse attend
   avec le globe qui bouillonne (09-mouvement.md, P01 : trois images, 6 par seconde, cycle de
   480 ms ; 2,4 s sous « réduire les animations »), comme la barre de réponse d'un assistant */
.ap-echange{display:flex;flex-direction:column;gap:.5rem}
.ap-qbarre{display:flex;flex-direction:column;gap:.125rem;align-self:flex-end;max-width:min(36rem,92%);padding:.75rem 1rem;border-radius:var(--rayon-champ);background:var(--fond);box-shadow:inset 0 0 0 1px var(--filet)}
.ap-qbarre .lab,.ap-rbarre .lab{font-size:.75rem;font-weight:600;color:var(--texte-2)}
.ap-rbarre{display:flex;flex-direction:column;gap:.375rem;max-width:min(40rem,96%);padding:.875rem 1rem;border-radius:var(--rayon-champ);background:var(--eleve);box-shadow:inset 0 0 0 1px var(--filet)}
.ap-rbarre .rep{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.0625rem;line-height:1.5}
.ap-attente{display:flex;align-items:center;gap:.75rem;min-height:2.25rem;color:var(--accent);font-size:.9375rem}
.ap-attente .charge{width:26px;height:26px}
.ap-attente .t{color:var(--texte-2)}
.ap-echange .gl-in{transition:opacity var(--entree) var(--courbe),transform var(--entree) var(--courbe)}
.js .ap-echange.attend .rep{display:none}
.js .ap-echange:not(.attend) .ap-attente{display:none}
.js .ap-echange.arrive .rep{opacity:0;transform:translateY(6px)}
.no-js .ap-attente{display:none}
.ap-reposer{align-self:flex-start;min-height:32px;padding:0 .75rem;border:0;border-radius:99px;background:transparent;color:var(--accent);font-size:.8125rem;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px var(--filet)}
.ap-reposer:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.no-js .ap-reposer{display:none}
@media (prefers-reduced-motion:reduce){
  .ap-attente .charge i{animation-duration:2.4s}
  .ap-attente .charge i:nth-child(2){animation-delay:-1.6s}
  .ap-attente .charge i:nth-child(3){animation-delay:-.8s}
  .ap-echange .gl-in{transition:none}
}

/* ————————————————————————————————————————— l'explorable riche : l'index, ses niveaux, la recherche */
.ex-riche .ex-carte svg{min-width:40rem}
.ex-liens line{stroke:var(--trait-2);stroke-width:.7;opacity:0;transition:opacity var(--etat) var(--courbe)}
.voir-liens .ex-liens line{opacity:.55}
.ex-niv line{stroke:var(--accent);stroke-width:1;opacity:0;transition:opacity var(--etat) var(--courbe)}
.ex-niv line.n2{stroke-width:1.6}
.voir-niveaux .ex-niv line{opacity:.45}
.voir-niveaux .ex-pt.haut1 .pt,.voir-niveaux .ex-pt.haut2 .pt{fill:var(--accent)}
.voir-niveaux .ex-pt.haut2 .zone{stroke:var(--accent);stroke-width:1.5;fill:none}
.ex-pt.texte .pt{fill:var(--texte)}
.ex-pt.conf .pt{fill:none;stroke:var(--destructif);stroke-width:1.3}
.ex-pt.filtre .pt{opacity:.55}
.ex-pt.visite .pt{fill:var(--accent);opacity:.75}
.ex-pt.candidat .trouve{opacity:.55;stroke-width:1.4}
.ex-pt.eteint:not(.candidat) .pt{opacity:.22}
.ex-pt.est-trouve .trouve{opacity:1;stroke-width:2.4}
.ex-pt.est-trouve .pt{fill:var(--accent);opacity:1}
.ex-riche .ex-pt .predit{stroke-width:1.5}
.ex-doc .chaine{fill:none;stroke:var(--texte);stroke-width:1.4;opacity:.55}
.ex-doc .vois{stroke:var(--accent);stroke-width:1.4}
.ex-trace line{stroke-dasharray:1;stroke-dashoffset:1;fill:none;stroke-linecap:round;animation:ap-pose var(--pas) steps(1,end) forwards}
.ex-trace .saut{stroke:var(--accent);stroke-width:2.6}
.ex-trace .saut.n2{stroke-width:3.4}
.ex-trace .expl{stroke:var(--accent);stroke-width:1;opacity:.5}
.ex-trace .retenu{stroke:var(--accent);stroke-width:2.4;animation-duration:calc(var(--pas) * 2);animation-timing-function:steps(2,end)}
@media (prefers-reduced-motion:reduce){.ex-trace line{animation:none;stroke-dashoffset:0}}
.ex-legende{display:flex;flex-wrap:wrap;gap:.25rem .875rem;padding:.625rem .5rem 0;font-size:.75rem;color:var(--texte-2)}
.ex-legende span{display:inline-flex;align-items:center;gap:.375rem}
.ex-legende i{display:inline-block;width:10px;height:10px;border-radius:50%}
.ex-legende .l-pt{background:var(--texte-2);width:7px;height:7px}
.ex-legende .l-texte{background:var(--texte)}
.ex-legende .l-conf{box-shadow:inset 0 0 0 1.3px var(--destructif)}
.ex-legende .l-lien{width:16px;height:1.5px;border-radius:0;background:var(--trait-2)}
.ex-legende .l-q{background:var(--accent);width:12px;height:12px}
.ex-legende .l-visite{background:var(--accent);opacity:.75;width:7px;height:7px}
.ex-legende .l-retenu{box-shadow:inset 0 0 0 2.4px var(--accent);width:14px;height:14px}
.ex-legende .l-predit{box-shadow:inset 0 0 0 1.5px var(--texte);width:14px;height:14px;border:1px dashed transparent}
.ex-pipe{list-style:none;display:flex;flex-direction:column;gap:0}
.ex-pipe li{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.5rem;padding:.5rem 0;border-top:1px solid var(--filet);font-size:.875rem;line-height:1.45}
.ex-pipe li .k{width:1.375rem;height:1.375rem;border-radius:50%;background:var(--accent);color:var(--sur-accent);display:grid;place-items:center;font-size:.75rem;font-weight:700}
.ex-pipe li.attend{color:var(--texte-2)}
.ex-pipe li.attend .k{background:transparent;color:var(--texte-2);box-shadow:inset 0 0 0 1.5px var(--filet)}
.ex-pipe b{display:block;font-weight:600}
.ex-pipe .v{display:block;color:var(--texte-2)}
.ex-vec{display:grid;grid-template-columns:repeat(32,minmax(0,1fr));gap:1px;margin-top:.375rem;height:14px}
.ex-vec i{display:block;border-radius:1px}
.ex-mots{color:var(--texte-2);font-style:italic}
.ex-reglages{align-items:flex-end}
.ex-reglage{display:flex;flex-direction:column;gap:.25rem}
.ex-r-lab{font-size:.75rem;font-weight:600;color:var(--texte-2)}
.ex-reglage .segmente button{min-height:36px;padding:0 .875rem;font-size:.875rem}
@media (min-width:900px){.ex-riche .ex-corps{grid-template-columns:minmax(0,1.7fr) minmax(16rem,1fr)}}
/* la carte riche prend toute la largeur ; pendant la recherche, le panneau se lit en deux colonnes */
@media (min-width:900px){.ex-riche .ex-corps{grid-template-columns:minmax(0,1fr)}}
.ex-riche .ex-panneau.deux{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem 2rem;align-items:start}
@media (min-width:900px){
  .ex-riche .ex-panneau.deux{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .ex-riche .ex-panneau.deux > .ex-p-lab{grid-column:1 / -1}
  .ex-riche .ex-panneau.deux > .ex-pipe{grid-column:1}
  .ex-riche .ex-panneau.deux > .ex-fin{grid-column:2;grid-row:2}
}
.ex-fin{display:flex;flex-direction:column;gap:.75rem}
.ex-trace .expl{stroke-width:.8;opacity:.3}

/* ————————————————————————————————————————— le marché des modèles et leurs classements */
.mo-sec{padding-top:var(--section);scroll-margin-top:calc(var(--entete) + 1rem)}
.mo-sec > .el-fam-tete{max-width:50rem}
.mo-filtres{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:flex-end;margin-bottom:1rem}
.mo-filtres .segmente button{min-height:36px;padding:0 .875rem;font-size:.875rem}
.mo-compte{font-size:.875rem;color:var(--texte-2);margin-bottom:.75rem}
.mo-erreur{padding:1rem;border-radius:var(--rayon-champ);box-shadow:inset 0 0 0 1.5px var(--destructif)}
/* la grille du marché : un éditeur par ligne, une gamme par colonne */
.mo-grille{display:flex;flex-direction:column;gap:0;border-radius:var(--rayon);background:var(--fond-2);padding:clamp(.75rem,.5rem + 1vw,1.5rem)}
.mo-g-tete{display:none}
.mo-g-zone{margin:1.25rem 0 .25rem;font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4)}
.mo-g-zone:first-of-type{margin-top:0}
.mo-g-ligne{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;padding:.75rem 0;border-top:1px solid var(--filet)}
.mo-g-ed{font-weight:600}
.mo-g-cel{display:flex;flex-direction:column;gap:6px;min-width:0}
.mo-g-cel:empty,.mo-g-cel:not(:has(.mo-m)){display:none}
.mo-g-lab{font-size:.75rem;font-weight:600;color:var(--texte-2)}
@media (min-width:1000px){
  .mo-g-tete{display:grid;grid-template-columns:9rem repeat(4,minmax(0,1fr));gap:.75rem;padding-bottom:.5rem;font-size:.8125rem;font-weight:600;color:var(--texte-2)}
  .mo-g-ligne{grid-template-columns:9rem repeat(4,minmax(0,1fr));gap:.75rem}
  .mo-g-cel:not(:has(.mo-m)){display:block}
  .mo-g-lab{display:none}
}
.mo-m{display:flex;flex-direction:column;gap:.25rem;width:100%;padding:.625rem .75rem;border:0;border-radius:var(--rayon-champ);background:var(--fond);color:var(--texte);text-align:left;font:inherit;cursor:default;box-shadow:inset 0 0 0 1px var(--filet);transition:opacity var(--etat) var(--courbe)}
.mo-m:hover,.mo-m:focus-visible{box-shadow:inset 0 0 0 1.5px var(--accent);outline:none}
.mo-m.eteint{opacity:.28}
.mo-m.ancien .n{color:var(--texte-2)}
.mo-m .n{font-weight:600;font-size:.9375rem;line-height:1.25}
.mo-m .px{font-size:.8125rem;color:var(--texte-2);font-variant-numeric:tabular-nums}
.mo-m .ix{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem;font-size:.75rem}
.mo-m .ix i{display:block;height:5px;border-radius:3px;background:var(--accent)}
.mo-m .ix b{font-variant-numeric:tabular-nums}
.mo-m .ix.vide{display:block;color:var(--texte-2)}
.mo-m .ps{display:flex;flex-wrap:wrap;gap:4px;margin-top:.125rem}
.mo-p{font-size:.6875rem;font-weight:600;line-height:1.2;padding:.125rem .375rem;border-radius:5px;box-shadow:inset 0 0 0 1px var(--filet);color:var(--texte-2)}
.mo-p.ouvert{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.mo-p.ue-oui,.mo-p.ue-cloud{color:var(--accent)}
.mo-p.ue-non{color:var(--destructif)}
/* la bulle */
.mo-info{max-width:21rem;font-size:.8125rem}
.mo-info b{display:block;font-size:.9375rem;margin-bottom:.125rem}
.mo-info .s{display:block;color:var(--texte-2);margin-top:.25rem}
.mo-info .v{display:block;font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.375rem;color:var(--accent);margin-top:.25rem}
.mo-info dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem .625rem;margin:.5rem 0 0}
.mo-info dt{color:var(--texte-2)}
.mo-info dd{margin:0}
/* choisir selon votre besoin */
.mo-besoins{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
@media (min-width:1000px){.mo-besoins{grid-template-columns:16rem minmax(0,1fr);gap:var(--duo)}}
.mo-b-choix{display:flex;flex-wrap:wrap;gap:.5rem;align-content:flex-start}
@media (min-width:1000px){.mo-b-choix{flex-direction:column}}
.mo-b-choix button{min-height:44px;padding:.5rem .875rem;border:0;border-radius:12px;background:var(--fond-2);color:var(--texte);text-align:left;font:inherit;font-size:.9375rem;cursor:pointer}
.mo-b-choix button[aria-pressed="true"]{background:var(--accent);color:var(--sur-accent);font-weight:600}
.mo-b-d{color:var(--texte-2);margin-bottom:.75rem}
.mo-b-l{list-style:none;counter-reset:b;display:grid;grid-template-columns:minmax(0,1fr);gap:.625rem}
@media (min-width:700px){.mo-b-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mo-b-l li{counter-increment:b;position:relative;display:flex;flex-direction:column;gap:.25rem;padding:1rem 1rem 1rem 3rem;border-radius:var(--rayon-m);background:var(--fond-2)}
.mo-b-l li::before{content:counter(b);position:absolute;left:1rem;top:1rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--accent);color:var(--sur-accent);display:grid;place-items:center;font-size:.8125rem;font-weight:700}
.mo-b-n{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.25rem;line-height:1.2}
.mo-b-e,.mo-b-x{font-size:.8125rem;color:var(--texte-2)}
.mo-b-m{font-size:.9375rem}
.mo-b-pied{margin-top:1rem;font-size:.875rem;color:var(--texte-2)}
/* le nuage du prix et du niveau */
.mo-nuage-cadre{border-radius:var(--rayon);background:var(--fond-2);padding:clamp(.75rem,.5rem + 1vw,1.5rem);overflow-x:auto;-webkit-overflow-scrolling:touch}
.mo-nuage-cadre svg{display:block;width:100%;min-width:44rem;height:auto}
.mo-nuage-cadre text{font-family:var(--sans);fill:var(--texte)} .mo-nuage-cadre text.g{fill:var(--texte-2)}
.mo-gr{stroke:var(--filet);stroke-width:1}
.mo-front{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:none;opacity:.55}
.mo-pt{cursor:default;outline:none}
.mo-pt .zone{fill:transparent}
.mo-pt .pt{fill:var(--accent)}
.mo-pt.ouvert .pt{fill:var(--fond-2);stroke:var(--accent);stroke-width:2.2}
.mo-pt:not(.front) .pt{opacity:.65}
.mo-pt:focus-visible .zone{stroke:var(--focus);stroke-width:2}
.mo-leg{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin-top:.75rem;font-size:.8125rem;color:var(--texte-2)}
.mo-leg span{display:inline-flex;align-items:center;gap:.375rem}
.mo-leg i{width:11px;height:11px;border-radius:50%;background:var(--accent)}
.mo-leg i.o{background:transparent;box-shadow:inset 0 0 0 2px var(--accent)}
.mo-leg i.l{width:18px;height:2px;border-radius:0;opacity:.55}
/* la carte des classements */
.mo-carte-cadre{border-radius:var(--rayon);background:var(--fond-2);padding:.5rem;overflow:auto;max-height:44rem;-webkit-overflow-scrolling:touch}
.mo-hm{border-collapse:separate;border-spacing:2px;font-size:.8125rem;font-variant-numeric:tabular-nums}
.mo-hm th,.mo-hm td{padding:0}
.mo-hm thead th{position:sticky;top:0;z-index:2;background:var(--fond-2)}
.mo-hm thead tr:nth-child(2) th{top:1.9rem}
.mo-hm th.coin{position:sticky;left:0;z-index:3;text-align:left}
.mo-hm th.fam{height:1.9rem;padding:0 .375rem;font-size:.75rem;font-weight:600;color:var(--texte-2);text-align:left;border-bottom:1.5px solid var(--filet);white-space:nowrap}
.mo-hm th.t button{display:flex;flex-direction:column;justify-content:flex-end;width:5.25rem;min-height:3.75rem;padding:.25rem .375rem;border:0;background:none;color:var(--texte);font:inherit;font-size:.75rem;font-weight:600;line-height:1.2;text-align:left;cursor:pointer;border-radius:6px}
.mo-hm th.t button:hover{background:var(--survol)}
.mo-hm th.t.trie button{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.mo-hm th.t .et{font-weight:500;color:var(--texte-2);font-size:.6875rem;margin-top:.125rem}
.mo-hm th.t.sature button{color:var(--texte-2)}
.mo-hm tbody th{position:sticky;left:0;z-index:1;background:var(--fond-2);text-align:left;padding:.25rem .5rem .25rem 0;min-width:11.5rem}
.mo-hm tbody th .n{display:block;font-weight:600;font-size:.8125rem;white-space:nowrap}
.mo-hm tbody th .e{display:block;font-size:.6875rem;color:var(--texte-2);white-space:nowrap}
.mo-hm td{position:relative;height:2.375rem;min-width:5.25rem;text-align:center;border-radius:5px;color:var(--texte);outline:none}
.mo-hm td.fonce{color:var(--sur-accent);font-weight:600}
.mo-hm td.vide{color:var(--texte-2);opacity:.5}
.mo-hm td.ed::after{content:"";position:absolute;top:3px;right:3px;width:0;height:0;border-left:7px solid transparent;border-top:7px solid var(--destructif)}
.mo-hm td:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.mo-hm-leg{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin-top:.75rem;font-size:.8125rem;color:var(--texte-2)}
.mo-hm-leg span{display:inline-flex;align-items:center;gap:.375rem}
.mo-hm-leg .rampe{width:6rem;height:10px;border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),var(--accent))}
.mo-hm-leg .rampe.gris{background:linear-gradient(90deg,color-mix(in srgb,var(--texte-2) 5%,transparent),color-mix(in srgb,var(--texte-2) 53%,transparent))}
.mo-hm-leg .tri{width:0;height:0;border-left:7px solid transparent;border-top:7px solid var(--destructif)}
/* le profil */
.mo-profil-tete{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1rem}
.mo-profil-tete select{min-height:44px;padding:0 .875rem;border:1px solid var(--contour);border-radius:var(--rayon-champ);background:var(--champ);color:var(--texte);font:inherit}
.mo-profil{border-radius:var(--rayon);background:var(--fond-2);padding:clamp(1rem,.8rem + 1vw,1.75rem)}
.mo-pf-fam{margin:1rem 0 .25rem;font-size:.8125rem;font-weight:600;color:var(--texte-2)}
.mo-pf-fam:first-child{margin-top:0}
.mo-pf{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 8.5rem;align-items:center;gap:.75rem;min-height:2rem}
.mo-pf-t{font-size:.8125rem;font-weight:600}
.mo-pf svg{width:100%;height:24px}
.mo-pf .autre{fill:var(--texte-2);opacity:.45}
.mo-pf .moi{fill:var(--accent)}
.mo-pf-v{font-size:.8125rem;color:var(--texte-2);font-variant-numeric:tabular-nums}
.mo-pf-v b{color:var(--texte)}
@media (max-width:599px){.mo-pf{grid-template-columns:6.5rem minmax(0,1fr);}.mo-pf-v{grid-column:2}}
/* les tests */
.mo-t-fam{margin:1.75rem 0 .75rem;font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4)}
.mo-t-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
@media (min-width:700px){.mo-t-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.mo-t-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mo-t{display:flex;flex-direction:column;gap:.625rem;padding:1.125rem;border-radius:var(--rayon-m);background:var(--fond-2);font-size:.9375rem}
.mo-t header{display:flex;flex-direction:column;gap:.375rem}
.mo-t h3{font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.1875rem;line-height:1.2}
.mo-etat{align-self:flex-start;font-size:.75rem;font-weight:600;padding:.125rem .5rem;border-radius:99px;box-shadow:inset 0 0 0 1px var(--filet);color:var(--texte-2)}
.mo-etat.ouvert{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.mo-etat.limite{color:var(--destructif);box-shadow:inset 0 0 0 1px var(--destructif)}
.mo-t dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem .75rem;font-size:.8125rem}
.mo-t dt{color:var(--texte-2)}
.mo-t dd{margin:0}
.mo-t-lim{font-size:.8125rem;color:var(--texte-2)}
.mo-t-lim b{color:var(--texte)}
.mo-t a{margin-top:auto;font-size:.8125rem;color:var(--accent);font-weight:600}
/* lire sans se tromper, les abonnements, ce qui a changé */
.mo-avert{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
@media (min-width:800px){.mo-avert{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.mo-avert{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mo-avert > div{padding:1.125rem;border-radius:var(--rayon-m);box-shadow:inset 0 0 0 1px var(--filet)}
.mo-avert b{display:block;font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.125rem;margin-bottom:.375rem}
.mo-avert p{font-size:.9375rem;color:var(--texte-2)}
.mo-abo td{vertical-align:top}
.mo-abo .e{display:block;font-family:var(--sans);font-size:.8125rem;color:var(--texte-2);margin-top:.25rem}
.mo-abo td:first-child{width:22%}
.mo-notes{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
@media (min-width:800px){.mo-notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mo-notes article{padding:1.125rem;border-radius:var(--rayon-m);background:var(--fond-2)}
.mo-notes h3{font-weight:600;font-size:.9375rem;margin-bottom:.375rem}
.mo-notes p{font-size:.9375rem;color:var(--texte-2)}
.mo-limites{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem var(--duo)}
@media (min-width:900px){.mo-limites{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mo-limites h3{font-weight:600;font-size:.9375rem;margin-bottom:.5rem}
.mo-limites ul{padding-left:1.125rem;font-size:.875rem;color:var(--texte-2);display:flex;flex-direction:column;gap:.375rem}
/* les traits principaux, allégés (Oscar, 6 octobre 2026) : la carte est agrandie d'environ 30 %
   à l'écran, donc chaque trait est dessiné plus fin que l'épaisseur voulue à l'écran */
.ex-trace path,.ex-trace line{fill:none;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round;animation:ap-pose var(--pas) steps(1,end) forwards}
.ex-trace .saut{stroke:var(--accent);stroke-width:1.3;opacity:.9}
.ex-trace .saut.n2{stroke-width:1.6}
.ex-trace .atterrit{fill:var(--accent)}
.ex-trace .expl{stroke-width:.6;opacity:.32}
.ex-trace .retenu{stroke-width:1.4}
.ex-pt.est-trouve .trouve{stroke-width:1.8}
.ex-pt.candidat .trouve{stroke-width:1.1}
.ex-doc .chaine{stroke-width:1.1}
.ex-doc .vois{stroke-width:1.1}
@media (prefers-reduced-motion:reduce){.ex-trace path{animation:none;stroke-dashoffset:0}}
.mo-pf-s{position:relative;display:block;height:20px;margin:0 8px}
.mo-pf-s::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:1px;background:var(--filet)}
.mo-pf-s i{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--texte-2);opacity:.45}
.mo-pf-s i.moi{width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--accent);opacity:1;z-index:1}

/* ——— le système de liens, dans la page (30-apprendre-structures.md, §4) ——— */
.ap-tete .bous-mini{margin-top:.75rem}
.ap-rappel{padding:1.25rem 1.5rem .25rem;border-radius:var(--rayon-m);box-shadow:inset 0 0 0 1px var(--filet)}
.ap-rappel summary span.q{flex:1;text-align:left}
.ap-rappel-tete{display:flex;flex-direction:column;gap:.375rem;margin-bottom:.75rem;max-width:var(--mesure)}
.ap-rappel-tete .discret{font-size:.9375rem}
.ap-rappel .acc{border-top:0}
.ap-rappel .acc details:last-child{border-bottom:0}
.ap-rappel .acc summary{min-height:56px}
.ap-dossier-lien{margin-top:1rem}
.ap-licence{margin-top:1rem;font-size:.8125rem;color:var(--texte-2);max-width:var(--mesure)}
.ap-licence a{color:inherit}
.ap-sec .retour{margin-top:0}

/* ——— un calcul qu'on manipule (le prix d'une conversation) ——— */
.calc{display:flex;flex-direction:column;gap:1rem;padding:1.25rem 1.5rem;border-radius:var(--rayon-m);box-shadow:inset 0 0 0 1px var(--filet);background:var(--fond)}
.calc-reglages{display:flex;flex-direction:column;gap:.75rem}
.calc-lab{font-size:.8125rem;font-weight:600;color:var(--texte-2)}
.calc-curseur{display:flex;flex-direction:column;gap:.375rem;max-width:28rem}
.calc-curseur output{color:var(--texte);font-variant-numeric:tabular-nums;margin-left:.375rem}
.calc-curseur input{accent-color:var(--accent);width:100%}
.calc-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}
.calc-ligne .calc-lab{min-width:4.5rem}
.calc-res{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;padding-top:.75rem;border-top:1px solid var(--filet)}
@media (min-width:640px){.calc-res{grid-template-columns:1fr 1fr 1.6fr}}
.calc-res > div{display:flex;flex-direction:column;gap:.125rem}
.calc-v{font-size:1.0625rem;font-variant-numeric:tabular-nums}
.calc-res .fort .calc-v{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);color:var(--accent)}
.calc-barres{width:100%;height:auto;display:block}
.calc-barres .calc-axe{stroke:var(--trait-2);stroke-width:1}
.calc-barres .calc-t{font:500 11px var(--sans);fill:var(--texte-2)}
.calc-barres .c-cons{fill:var(--texte-2)} .calc-barres .c-hist{fill:var(--accent);opacity:.38} .calc-barres .c-q{fill:var(--accent)}
.calc-barres .c-cache{fill:var(--accent);opacity:.2}
.calc-barres .calc-zone{fill:transparent;outline:none} .calc-barres .calc-zone:hover,.calc-barres .calc-zone:focus-visible{fill:var(--accent);fill-opacity:.07}
.calc-info{font-size:.8125rem;color:var(--texte-2);min-height:1.2em}
.calc-leg{display:flex;flex-wrap:wrap;gap:.375rem 1rem;font-size:.8125rem;color:var(--texte-2)}
.calc-leg span{display:inline-flex;align-items:center;gap:.375rem}
.calc-leg i{width:12px;height:12px;border-radius:3px;display:inline-block}
.calc-leg .c-cons{background:var(--texte-2)} .calc-leg .c-hist{background:var(--accent);opacity:.38} .calc-leg .c-q{background:var(--accent)}
.calc-leg .c-cache{background:var(--accent);opacity:.2}
.calc-leg [hidden]{display:none}
.calc-detail summary{cursor:pointer;font-size:.875rem;font-weight:600;color:var(--accent)}
.calc-formule{display:flex;flex-direction:column;gap:.5rem;margin-top:.625rem;font-size:.9375rem;line-height:1.5;max-width:var(--mesure);font-variant-numeric:tabular-nums}
.calc-formule a{color:inherit}
.calc-note{font-size:.8125rem;color:var(--texte-2);max-width:var(--mesure)}

/* ——— l'index de la rubrique (29-guides.md, §9.14 ; 30-apprendre-structures.md, §4) ——— */
.ix-tete .titre-1{max-width:22ch}
.ix-portes{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:clamp(1.75rem,1.2rem + 1.6vw,2.75rem)}
@media (min-width:800px){.ix-portes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ix-portes a{display:flex;flex-direction:column;gap:.375rem;padding:1.125rem 1.25rem;border-radius:var(--rayon-m);background:var(--fond-2);text-decoration:none;color:var(--texte)}
.ix-portes a:hover,.ix-portes a:focus-visible{box-shadow:inset 0 0 0 1.5px var(--accent)}
.ix-portes .dir{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);color:var(--accent)}
.ix-portes .t{font-size:.9375rem;color:var(--texte-2);line-height:1.45}
.ix-sec{scroll-margin-top:calc(var(--entete) + 1rem)}
.ix-sec-tete{display:flex;flex-direction:column;gap:.75rem;max-width:46rem;margin-bottom:clamp(1.25rem,1rem + 1.4vw,2rem)}
.ix-h3{margin:clamp(2rem,1.6rem + 1.6vw,3rem) 0 1rem}
.ix-idees{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
@media (min-width:700px){.ix-idees{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ix-idees{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ix-idees a{display:flex;flex-direction:column;gap:.5rem;height:100%;padding:1.125rem;border-radius:var(--rayon-m);box-shadow:inset 0 0 0 1px var(--filet);text-decoration:none;color:var(--texte)}
.ix-idees a:hover,.ix-idees a:focus-visible{box-shadow:inset 0 0 0 1.5px var(--accent)}
.ix-idees b{font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.125rem;line-height:1.3}
.ix-idees a > span:last-child{font-size:.875rem;color:var(--texte-2);line-height:1.45}
.ix-num{width:1.75rem;height:1.75rem;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);display:grid;place-items:center;font-size:.8125rem;font-weight:700}
.ix-niveaux{margin-top:clamp(1.5rem,1.2rem + 1.2vw,2.25rem)}
.ix-niveaux ul{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:.5rem}
@media (min-width:800px){.ix-niveaux ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gout)}}
.ix-niveaux li{display:flex;flex-direction:column;gap:.25rem;padding:.875rem 0;border-top:1px solid var(--filet)}
.ix-niveaux b{font-weight:500}
.ix-parcours{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:800px){.ix-parcours{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gout)}}
@media (min-width:1200px){.ix-parcours{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ix-parc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.875rem;padding:1.125rem 0;border-top:1px solid var(--filet)}
.ix-parc .titre-4 a{color:var(--texte);text-decoration:none} .ix-parc .titre-4 a:hover{color:var(--accent)}
.ix-meta{font-size:.8125rem;font-weight:600;color:var(--texte-2);margin-top:.25rem}
.ix-desc{font-size:.9375rem;color:var(--texte-2);line-height:1.45;margin-top:.375rem}
.ix-tracer{margin-top:.625rem;min-height:32px;padding:0 .75rem;border:0;border-radius:99px;background:transparent;color:var(--accent);font-size:.8125rem;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px var(--filet)}
.ix-tracer:hover{box-shadow:inset 0 0 0 1px var(--accent)} .ix-tracer[aria-pressed="true"]{background:var(--accent);color:var(--sur-accent);box-shadow:none}
.ix-questions{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:900px){.ix-questions{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gout)}}
.ix-questions a{display:flex;flex-direction:column;gap:.25rem;padding:.875rem 0;border-top:1px solid var(--filet);text-decoration:none;color:var(--texte)}
.ix-questions a:hover .ix-q,.ix-questions a:focus-visible .ix-q{color:var(--accent)}
/* les pages publiées, par dossier : une colonne par dossier, les titres seuls (l'aperçu au survol) */
.ix-publiees{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:2rem var(--duo);align-items:start}
.ix-pub .titre-4{margin-bottom:.625rem}
.ix-pub ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ix-pub a{color:var(--texte);text-decoration:none;line-height:1.4}
.ix-pub a:hover,.ix-pub a:focus-visible{color:var(--accent)}
.ix-q{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.125rem;line-height:1.35}
.ix-r{font-size:.875rem;color:var(--texte-2)} .ix-r .g{font-weight:600;color:var(--accent)}
.ix-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem var(--duo)}
@media (min-width:900px){.ix-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ix-liste{list-style:none;margin-top:.5rem}
.ix-liste li{display:flex;align-items:center;gap:.5rem;padding:.625rem 0;border-top:1px solid var(--filet)}
.ix-liste a{color:var(--texte);text-decoration:none} .ix-liste a:hover{color:var(--accent)}
.ix-preuve{width:16px;height:16px;flex:none;color:var(--accent);vertical-align:-.15em}
.ix-tot{margin-left:auto;font-size:.75rem;font-weight:600;color:var(--texte-2)}
.ix-puces{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.625rem}
.ix-puce{display:inline-flex;align-items:center;min-height:36px;padding:0 .875rem;border-radius:99px;box-shadow:inset 0 0 0 1px var(--filet);text-decoration:none;color:var(--texte);font-size:.875rem}
.ix-puce:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.ix-mois{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
@media (min-width:900px){.ix-mois{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ix-carte{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;border-radius:var(--rayon-m);background:var(--fond-2);text-decoration:none;color:var(--texte)}
.ix-carte:hover,.ix-carte:focus-visible{box-shadow:inset 0 0 0 1.5px var(--accent)}
.ix-carte b{font-family:var(--serif);font-weight:400;font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);line-height:1.3}
.ix-carte > span:last-child{font-size:.9375rem;color:var(--texte-2);line-height:1.45}
.ix-regles{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:60rem}
@media (min-width:800px){.ix-regles{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gout)}}
.ix-regles li{padding:1rem 0;border-top:1px solid var(--filet);color:var(--texte-2);line-height:1.5}
.ix-regles b{display:block;color:var(--texte);font-weight:600;margin-bottom:.25rem}
.ix-regles a{color:inherit}

/* ——— la page des modèles, réorganisée (Oscar, 6 octobre 2026) : un plan à gauche, des intitulés
   sans surtitre, les classements en trois vues, le détail replié ——— */
.mo-page{margin-top:clamp(2rem,1.5rem + 2vw,3rem)}
.mo-corps{min-width:0}
.mo-corps > .mo-sec{padding-top:clamp(3rem,2.2rem + 2.6vw,4.75rem)}
.mo-corps > .mo-sec#essentiel{padding-top:clamp(1.25rem,1rem + 1vw,2rem)}
.mo-corps > .mo-sec > .titre-2{margin-bottom:.625rem}
.mo-corps > .mo-sec > .chapo{max-width:60ch;margin-bottom:clamp(1.25rem,1rem + 1vw,1.75rem)}
.mo-vues{margin-bottom:1.25rem}
.mo-vues button{min-height:40px}
.mo-vue-d{max-width:var(--mesure);margin-bottom:1rem}
/* les listes repliées */
.mo-acc{border-top:1px solid var(--filet)}
.mo-acc details{border-bottom:1px solid var(--filet)}
.mo-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.75rem;min-height:52px;padding:.625rem 0}
.mo-acc summary::-webkit-details-marker{display:none}
.mo-acc summary .q{flex:1;font-weight:600}
.mo-acc summary::after{content:"";flex:none;width:9px;height:9px;margin-right:.375rem;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--etat) var(--courbe)}
.mo-acc details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.mo-acc summary:hover .q{color:var(--accent)}
.mo-acc-c{padding:0 0 1rem;display:flex;flex-direction:column;gap:.625rem;max-width:var(--mesure);font-size:.9375rem;color:var(--texte-2)}
.mo-acc-c p{color:var(--texte-2)}
.mo-acc-c dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem .75rem;font-size:.875rem}
.mo-acc-c dt{color:var(--texte);font-weight:600}
.mo-acc-c dd{margin:0}
.mo-acc-c a{color:var(--accent);font-weight:600;font-size:.875rem;align-self:flex-start}
@media (min-width:1100px){.mo-acc-2,#mo-avert,#mo-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gout);border-top:0}
  .mo-acc-2 details:nth-child(-n+2),#mo-avert details:nth-child(-n+2),#mo-notes details:nth-child(-n+2){border-top:1px solid var(--filet)}}
.mo-acc .mo-etat{flex:none}
.mo-t-fam{margin:1.5rem 0 .5rem;font-size:.875rem;font-weight:600;font-family:var(--sans);color:var(--texte-2)}
.mo-t-fam:first-child{margin-top:0}
.mo-limites summary{font-weight:600}
.mo-limites ul{list-style:disc;padding:0 0 1rem 1.25rem;display:flex;flex-direction:column;gap:.375rem;font-size:.9375rem;color:var(--texte-2);max-width:var(--mesure)}
/* les abonnements : une ligne par offre, le détail replié */
.mo-abo-tete{display:none}
.mo-abo summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .75rem;align-items:start}
.mo-abo summary > span[data-l]{grid-column:1 / -1;font-size:.875rem;color:var(--texte-2)}
.mo-abo summary > span[data-l]::before{content:attr(data-l) " : ";font-weight:600;color:var(--texte)}
.mo-abo .o b,.mo-abo .px b{display:block}
.mo-abo .e{display:block;font-size:.8125rem;color:var(--texte-2)}
.mo-abo summary::after{display:none}
@media (min-width:900px){
  .mo-abo-tete{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.3fr;gap:1rem;padding-bottom:.5rem;font-size:.8125rem;font-weight:600;color:var(--texte-2)}
  .mo-abo summary{grid-template-columns:1.2fr 1fr 1fr 1.3fr;gap:1rem}
  .mo-abo summary > span[data-l]{grid-column:auto;font-size:.9375rem}
  .mo-abo summary > span[data-l]::before{content:none}
}
/* le marché : des cartes plus compactes */
.mo-m{padding:.5rem .625rem;gap:.1875rem}
.mo-m .ps{margin-top:0}
.mo-g-ligne{padding:.5rem 0}
.mo-g-zone{margin-top:.875rem}
/* la carte des notes : rien ne passe sous les colonnes et les lignes figées */
.mo-carte-cadre{padding:0;max-height:min(44rem,78vh);overscroll-behavior:contain}
.mo-hm{margin:0}
.mo-hm thead th{box-shadow:0 1px 0 var(--filet)}
.mo-hm th.coin{background:var(--fond-2)}
.mo-hm thead tr:first-child th.coin{z-index:4}
.mo-hm tbody th{z-index:2;box-shadow:6px 0 8px -6px rgba(14,18,32,.22)}
.mo-hm tbody th button{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:.25rem .5rem;border:0;border-radius:6px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.mo-hm tbody th button:hover,.mo-hm tbody th button:focus-visible{background:var(--survol);outline:none}
.mo-hm tbody th button:hover .n{color:var(--accent)}
.mo-hm tbody tr:hover th .n{color:var(--accent)}
.mo-hm td.col{box-shadow:inset 0 0 0 1.5px var(--accent)}
.mo-hm th.col button{color:var(--accent)}
.mo-hm th.t.trie button::after{content:" ↓";font-weight:600}
@media (max-width:699px){.mo-hm tbody th{min-width:8.5rem}.mo-hm tbody th .e{display:none}.mo-hm tbody th .n{white-space:normal}}

/* la carte des notes : les familles se replient en une colonne de barres */
.mo-hm th.fam{padding:0}
.mo-hm th.fam button{display:flex;align-items:center;gap:.375rem;width:100%;height:1.9rem;padding:0 .5rem;border:0;border-radius:6px 6px 0 0;background:none;color:var(--texte);font:inherit;font-size:.75rem;font-weight:600;text-align:left;white-space:nowrap;cursor:pointer}
.mo-hm th.fam button::before{content:"";flex:none;width:6px;height:6px;border-right:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);transform:rotate(-45deg);transition:transform var(--etat) var(--courbe)}
.mo-hm th.fam.ouverte button::before{transform:rotate(45deg) translateY(-2px)}
.mo-hm th.fam button:hover{background:var(--survol);color:var(--accent)}
.mo-hm th.fam .nb{font-weight:500;color:var(--texte-2)}
.mo-hm th.t.replie button{color:var(--accent);font-weight:600;justify-content:center;align-items:center;width:5.75rem}
.mo-hm td.fam-c{min-width:5.75rem;background:color-mix(in srgb,var(--fond) 70%,transparent)}
.mo-hm td.fam-c .barres{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:24px;padding:0 .375rem}
.mo-hm td.fam-c i{display:block;width:5px;border-radius:2px;background:var(--accent)}
.mo-hm td.fam-c i.g{background:var(--texte-2);opacity:.6}
.mo-hm td.fam-c i.vide{height:2px;background:var(--filet)}
.mo-hm td.fam-c:hover,.mo-hm td.fam-c:focus-visible{box-shadow:inset 0 0 0 1.5px var(--accent)}
.mo-hm-leg .mini{display:inline-flex;align-items:flex-end;gap:1px;width:14px;height:10px;background:linear-gradient(to top,var(--accent) 60%,transparent 60%) 0 0/3px 100% no-repeat,linear-gradient(to top,var(--accent) 100%,transparent 0) 5px 0/3px 100% no-repeat,linear-gradient(to top,var(--accent) 35%,transparent 35%) 10px 0/3px 100% no-repeat}
.mo-plier{min-height:36px}

/* la page générique : une page prévue, un dossier, un parcours */
.gp-corps{display:flex;flex-direction:column;gap:clamp(2.5rem,2rem + 2vw,4rem);margin-top:clamp(2rem,1.5rem + 2vw,3rem);padding-bottom:var(--section)}
.gp-attente{padding:1.25rem 1.5rem;border-radius:var(--rayon-m);background:var(--fond-2);max-width:46rem;display:flex;flex-direction:column;gap:.375rem}
.gp-sec > .titre-2,.gp-sec > .titre-3{margin-bottom:1rem}
.gp-liste{list-style:none;display:flex;flex-direction:column}
.gp-liste li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem;padding:.625rem 0;border-top:1px solid var(--filet)}
.gp-liste a{color:var(--texte);text-decoration:none;font-weight:500} .gp-liste a:hover{color:var(--accent)}
.gp-liste .m,.gp-etapes .m{font-size:.8125rem;color:var(--texte-2)}
.gp-genres{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem var(--duo)}
@media (min-width:900px){.gp-genres{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gp-genres .legende{margin-bottom:.25rem}
.gp-saurez{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);line-height:1.4;max-width:var(--mesure)}
.gp-etapes{list-style:none;display:flex;flex-direction:column;max-width:52rem}
.gp-etapes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.875rem;padding:1rem 0;border-top:1px solid var(--filet)}
.gp-etapes li > div{display:flex;flex-direction:column;gap:.25rem}
.gp-etapes a{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.1875rem;color:var(--texte);text-decoration:none}
.gp-etapes a:hover{color:var(--accent)}
.gp-etapes li.fin .ix-num{background:var(--accent);color:var(--sur-accent);box-shadow:none}
.ap-bandeau-un{grid-template-columns:minmax(0,1fr) !important}
.ap-bandeau-un:has(> [hidden]){display:none}
.bous .vide{font-size:.875rem;color:var(--texte-2)}
.bous .apres .m{display:block;font-size:.8125rem;color:var(--texte-2);margin-top:.25rem}
[data-carte-locale] .cl{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;margin:.5rem 0 1rem}
@media (min-width:800px){[data-carte-locale] .cl{grid-template-columns:1fr 1.1fr 1fr;align-items:stretch}}
[data-carte-locale] .cl > div{display:flex;flex-direction:column;gap:.375rem;padding:1rem 1.125rem;border-radius:var(--rayon-m);box-shadow:inset 0 0 0 1px var(--filet)}
[data-carte-locale] .cl .dir{font-size:.8125rem;font-weight:700;color:var(--accent)}
[data-carte-locale] .cl a{color:var(--texte);text-decoration:none;line-height:1.35} [data-carte-locale] .cl a:hover{text-decoration:underline}
[data-carte-locale] .cl .cl-ici{background:var(--accent);color:var(--sur-accent);box-shadow:none}
[data-carte-locale] .cl .cl-ici .dir{color:var(--sur-accent);opacity:.85}
[data-carte-locale] .cl .cl-ici a{color:var(--sur-accent)}
[data-carte-locale] .cl .cl-ici p{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);line-height:1.3}
[data-carte-locale] .vide{font-size:.875rem;color:var(--texte-2)}
.arb-n.doux rect{stroke:var(--accent);stroke-width:1.2;stroke-dasharray:4 3}
a.arb-n{cursor:pointer}
.ix-depart{margin-top:.5rem;font-size:.875rem;color:var(--texte-2)} .ix-depart a{color:var(--accent);font-weight:600}
.ix-secteurs{display:flex;flex-wrap:wrap;gap:.5rem}
.ix-secteur{display:inline-flex;align-items:center;min-height:44px;padding:0 1.125rem;border-radius:99px;background:var(--fond-2);color:var(--texte);text-decoration:none;font-weight:500;font-size:.9375rem}
.ix-secteur:hover,.ix-secteur:focus-visible{background:var(--accent);color:var(--sur-accent);outline:none}

/* le marché : une carte sur deux lignes, la fiche au survol */
.mo-m{display:flex;flex-direction:column;gap:.125rem;padding:.4375rem .625rem}
.mo-m .l1,.mo-m .l2{display:flex;align-items:baseline;gap:.375rem;min-width:0}
.mo-m .l1 .n{flex:1;min-width:0;font-size:.875rem}
.mo-m .l1 .ix{display:inline;flex:none;font-size:.8125rem;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.mo-m .l2{flex-wrap:wrap;row-gap:.125rem}
.mo-m .l2 .px{margin-right:auto;font-size:.75rem}
.mo-m .mo-p{font-size:.625rem;padding:.0625rem .3125rem}
.mo-g-cel{gap:4px}
.mo-plier{min-height:36px;font-family:var(--sans);font-size:.875rem;font-weight:600}
.mo-pt.ed .pt{stroke:var(--destructif);stroke-width:2}
.mo-leg i.ed{background:var(--accent);box-shadow:0 0 0 2px var(--destructif)}
.mo-nuage-choix button{min-height:36px}
/* un sélecteur à beaucoup d'options passe à la ligne plutôt que de déborder */
.st-choix .segmente,.mo-nuage-choix,.mo-filtres .segmente{flex-wrap:wrap}
.st-choix .segmente button{white-space:normal;text-wrap:balance;line-height:1.25;padding-block:.5rem}   /* sur téléphone, la grille à deux colonnes du site : un libellé long passe à la ligne au lieu de chevaucher le voisin */

/* ——— les pages Faire (33, §5.2) ———
   Le chemin dans l'outil : les libellés de l'interface, dans l'ordre où l'on clique, écrits
   dans la page par outils/remplir.py depuis donnees/reglages.json (jamais à la main). Le lieu
   (la console, l'application) en clair, chaque clic dans une pastille ; la source au bout. */
.ap-chemin{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.375rem 0;font-size:.9375rem;line-height:1.35;vertical-align:baseline}
.ap-chemin .lieu{margin-right:.5rem;color:var(--texte-2)}
.ap-chemin .clic{padding:.1875rem .5625rem;border-radius:8px;background:var(--fond-2);box-shadow:inset 0 0 0 1px var(--filet);color:var(--texte);font-weight:500}
.ap-chemin .clic + .clic{margin-left:1.25rem;position:relative}
.ap-chemin .clic + .clic::before{content:"›";position:absolute;left:-.875rem;top:50%;transform:translateY(-52%);color:var(--texte-2);font-weight:400}
.ap-chemin .valeur{margin-left:.625rem;padding:.1875rem .5625rem;border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);font-weight:600}
.ap-chemin a.src{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;margin-left:.375rem;border-radius:50%;color:var(--texte-2)}
.ap-chemin a.src:hover,.ap-chemin a.src:focus-visible{color:var(--accent);background:var(--fond-2);outline:none}
.ap-chemin a.src svg{width:.875rem;height:.875rem}
/* une étape d'une page Faire : ce qu'on fait, où, ce qu'on doit voir, le réglage à changer */
.ap-pas .ou{margin-top:.375rem}
.ap-pas .vu{margin-top:.375rem}
.ap-pas .vu b,.ap-pas .defaut b{font-weight:600;color:var(--texte)}
.ap-pas .defaut{margin-top:.5rem;padding:.625rem .875rem;border-radius:var(--rayon-champ);background:var(--fond-2);font-size:.9375rem;line-height:1.5}
.ap-pas .qui{margin-left:.5rem;font-size:.8125rem;font-weight:600;color:var(--texte-2)}
.ap-releve{font-size:var(--t-petit);color:var(--texte-2)}
/* un problème fréquent : le symptôme replié, puis la cause et la correction */
.ap-pb details{border-top:1px solid var(--filet)}
.ap-pb details:last-child{border-bottom:1px solid var(--filet)}
.ap-pb summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;min-height:52px;padding:.75rem 0;font-weight:600;line-height:1.4}
.ap-pb summary::-webkit-details-marker{display:none}
.ap-pb summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translate(-2px,-2px)}
.ap-pb details[open] summary::after{transform:rotate(-135deg)}
.ap-pb .cause,.ap-pb .faire{padding-bottom:.75rem;max-width:var(--mesure)}
.ap-pb .cause b,.ap-pb .faire b{display:block;font-size:.8125rem;color:var(--texte-2);font-weight:600}
/* un réglage (pages d'outil et réglages de confidentialité) : sa ligne reste visible (nom, valeur
   par défaut, choix conseillé et son état), l'explication, le chemin et la source se replient */
.ap-regl{border-top:1px solid var(--filet)}
.ap-regl details{border-bottom:1px solid var(--filet)}
.ap-regl summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 1rem;gap:.375rem 1rem;align-items:start;padding:.875rem 0}
.ap-regl summary::-webkit-details-marker{display:none}
.ap-regl summary::after{content:"";grid-column:2;grid-row:1;width:9px;height:9px;margin-top:.45rem;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg)}
.ap-regl details[open] summary::after{transform:rotate(-135deg);margin-top:.7rem}
.ap-regl .nom{grid-column:1;font-weight:600;line-height:1.35}
.ap-regl .def,.ap-regl .choix{grid-column:1;font-size:.9375rem;line-height:1.4;color:var(--texte-2)}
.ap-regl .def b,.ap-regl .choix b{font-weight:600;color:var(--texte)}
.ap-regl .etat{display:inline-block;margin-right:.5rem;padding:.0625rem .5rem;border-radius:99px;font-size:.75rem;font-weight:600;line-height:1.5;vertical-align:.1em}
.ap-regl .etat.changer{background:var(--accent);color:var(--sur-accent)}
.ap-regl .etat.verifier{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.ap-regl .etat.laisser{background:var(--fond-2);color:var(--texte-2)}
.ap-regl .corps{padding:0 0 1.125rem;max-width:var(--mesure)}
.ap-regl .corps > * + *{margin-top:.625rem}
@media (min-width:900px){
  .ap-regl summary{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.25fr) 1rem;align-items:baseline}
  .ap-regl summary::after{grid-column:4}
  .ap-regl .def{grid-column:2;grid-row:1}
  .ap-regl .choix{grid-column:3;grid-row:1}
  .ap-regl-tete{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.25fr) 1rem;gap:1rem;padding-bottom:.5rem;font-size:.8125rem;font-weight:600;color:var(--texte-2)}
  .ap-regl .def b,.ap-regl .choix b{display:none}
}
@media (max-width:899.98px){.ap-regl-tete{display:none}}
.ap-chemin .clic.var{font-style:italic;font-weight:400;background:none}
.ap-chemin .en,.ap-chemin .note{flex-basis:100%;margin-top:.25rem;font-size:.8125rem;line-height:1.4;color:var(--texte-2)}
.ap-chemin .note{margin-top:.125rem}
.ap-chemin .fin{display:inline-flex;align-items:center;max-width:100%}
.ap-chemin .fin .clic,.ap-chemin .fin .valeur{min-width:0}
.ap-chemin .fin.suite{margin-left:1.25rem;position:relative}
.ap-chemin .fin.suite::before{content:"›";position:absolute;left:-.875rem;top:50%;transform:translateY(-52%);color:var(--texte-2)}
.ap-chemin a.src{flex:none}
/* la largeur minimale des schémas (site.css) ne vaut pas pour les signes de la légende */
.schema-papier figcaption svg{min-width:0;display:inline-block;width:.95em;height:.95em}
/* un chemin cité dans une phrase coule comme le texte qui l'entoure */
.ap-chemin.court{display:inline;line-height:2.1}
.ap-chemin.court .clic,.ap-chemin.court .fin{display:inline-block}
.ap-chemin.court .fin{white-space:nowrap}
/* le tableau de synthèse (réglages de confidentialité) : une ligne par outil et par offre, une
   forme par état (plein, demi, vide), jamais la couleur seule ; les sources au bout de chaque case */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ap-conf-leg{display:flex;flex-wrap:wrap;gap:.375rem 1.25rem;font-size:.8125rem;color:var(--texte-2);margin-bottom:.75rem}
.ap-conf-defile{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ap-conf{font-size:.875rem}
.ap-conf thead th{vertical-align:bottom}
.ap-conf tbody th{text-align:left;vertical-align:top;padding:.875rem .75rem .875rem 0;border-bottom:1px solid var(--filet);font-weight:400;color:var(--texte)}
.ap-conf tbody th .o{display:block;font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:1.0625rem;line-height:1.25}
.ap-conf tbody th .of{display:block;margin-top:.125rem;font-size:.8125rem;color:var(--texte-2)}
.ap-conf td{color:var(--texte) !important}
.ap-conf td.nr{color:var(--texte-2) !important}
.ap-conf a.src{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;margin-left:.125rem;vertical-align:-.25em;border-radius:50%;color:var(--texte-2)}
.ap-conf a.src:hover,.ap-conf a.src:focus-visible{color:var(--accent);background:var(--fond-2);outline:none}
.ap-conf a.src svg{width:.75rem;height:.75rem}
.et{display:inline-block;flex:none;width:.6875rem;height:.6875rem;margin-right:.4375rem;border-radius:50%;vertical-align:-.03em}
.et.bon{background:var(--accent)}
.et.attention{background:linear-gradient(90deg,var(--texte) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--texte)}
.et.inconnu{box-shadow:inset 0 0 0 1.5px var(--texte-2)}
.ap-conf-leg > span{display:inline-flex;align-items:center}
@media (min-width:700px){.ap-conf{min-width:56rem}.ap-conf tbody th{width:13rem}}
@media (max-width:699px){
  .ap-conf tbody th{display:block;border:0;padding:0 0 .375rem}
  .ap-conf td:first-of-type::before{display:block}
}
/* des onglets nombreux passent à la ligne plutôt que de déborder (33, §8) */
.ap-onglets .segmente{flex-wrap:wrap}
.ap-conf .nw{white-space:nowrap}
.ap-conf-defile{position:relative}   /* le texte des lecteurs d'écran reste dans le cadre qui défile */
.ap-chemin a.src .mvt-sortie,.ap-conf a.src .mvt-sortie{margin:0;vertical-align:0}
/* la flèche de sortie du site (mouvement.js, G13) n'a pas sa place dans un dessin : un lien SVG
   n'a pas d'hôte, la règle le prendrait pour un lien sortant et la flèche couvrirait le schéma */
svg .mvt-sortie{display:none}
/* les choix d'un calcul passent à la ligne, et leurs libellés longs aussi (33, §8) */
.calc .segmente{flex-wrap:wrap}
.calc .segmente button{white-space:normal;text-wrap:balance;line-height:1.25;padding-block:.5rem}

/* une mesure par barre (33, §6, « une grandeur, plusieurs objets ») : le nom à gauche, la barre,
   la valeur au bout ; une seule teinte, les valeurs écrites, sans légende. Sur téléphone, la barre
   passe sous le nom. --max porte le haut de l'échelle, --v la valeur de la ligne */
.ap-barh{margin:0}
.ap-barh ol{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ap-barh li{display:grid;grid-template-columns:minmax(10rem,15rem) minmax(0,1fr) var(--val,3.75rem);align-items:center;column-gap:1rem}
.ap-barh .nom{font-size:.9375rem;line-height:1.3}
.ap-barh .nom small{display:block;font-size:.8125rem;color:var(--texte-2)}
.ap-barh .piste{position:relative;height:.875rem}
.ap-barh .barre{position:absolute;inset:0 auto 0 0;width:calc(var(--v) / var(--max) * 100%);min-width:2px;border-radius:0 4px 4px 0;background:var(--accent)}
.ap-barh .val{font-variant-numeric:tabular-nums;text-align:right;font-size:.9375rem}
.ap-barh .groupe{margin:1.5rem 0 .625rem;font-size:.875rem;font-weight:600;color:var(--texte-2)}
.ap-barh .groupe:first-of-type{margin-top:0}
.ap-barh figcaption{margin-top:1rem;max-width:var(--mesure);font-size:.8125rem;line-height:1.5;color:var(--texte-2)}
@media (max-width:599px){
  .ap-barh li{grid-template-columns:minmax(0,1fr) var(--val,3.75rem);row-gap:.25rem}
  .ap-barh .piste{grid-column:1 / -1;grid-row:2}
}

/* la fiche d'une page Retenir (33, §5.2, « imprimable sur une page ») : quatre cases datées dans un
   cadre ; à l'impression, seul le cadre sort, sans fond ni bouton */
.ap-memo{border:1px solid var(--filet);border-radius:var(--rayon-m);padding:clamp(1.25rem,1rem + 1vw,2rem);background:var(--eleve)}
.ap-memo-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem}
.ap-memo-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem 1.75rem;margin-top:1.25rem}
@media (min-width:700px){.ap-memo-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ap-memo-case{padding-top:.875rem;border-top:1px solid var(--filet)}
.ap-memo-case h3{margin-top:.25rem}
.ap-memo-case p{margin-top:.5rem;font-size:.9375rem;line-height:1.5}
.ap-memo-pied{margin-top:1.25rem;max-width:var(--mesure);font-size:.8125rem;line-height:1.5;color:var(--texte-2)}
@media print{
  body *:not(:has(.ap-memo)):not(.ap-memo):not(.ap-memo *){display:none !important}
  .ap-memo{border:0;background:none;padding:0}
  .ap-memo .b,.ap-memo .src{display:none}
  html,body{background:#fff !important}
  .ap-memo h3{margin-top:.5rem !important;font-size:11pt}
  .ap-memo .ap-tab,.ap-memo .liste{font-size:7.5pt;line-height:1.3}
  .ap-memo .ap-tab th,.ap-memo .ap-tab td{padding:.15rem .4rem}
  .ap-memo .ap-tab td:first-child{font-size:9pt;width:auto;white-space:nowrap}
  .ap-memo-case p{font-size:9pt}
}

/* la page de dossier (30-apprendre-structures.md, §7) : le point de départ, les parcours en cartes,
   les questions, une seule liste de pages filtrable (les écrites d'abord, les prévues repliées),
   la preuve, les autres dossiers. Écrite par apprendre-liens.js depuis le plan. */
.dp-intro{max-width:var(--mesure);margin:-.25rem 0 1.25rem}
.dp-pilier{display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem var(--duo);padding:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);border-radius:var(--rayon);background:var(--fond-2)}
@media (min-width:900px){.dp-pilier:has(.dp-essentiel:not([hidden])){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.dp-pilier-texte{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.dp-pilier .titre-3 a{color:var(--texte);text-decoration:none}
.dp-pilier .titre-3 a:hover{color:var(--accent)}
.dp-phrase{color:var(--texte-2);max-width:var(--mesure)}
.dp-note{font-size:var(--t-petit)}
.dp-pilier .b{margin-top:.5rem}
.dp-essentiel .legende{display:block;margin-bottom:.875rem}
.dp-essentiel ol{list-style:none;counter-reset:e;display:flex;flex-direction:column;gap:.625rem}
.dp-essentiel li{counter-increment:e;display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.5rem;line-height:1.45}
.dp-essentiel li::before{content:counter(e);font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;color:var(--accent)}
.dp-parcours{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem}
.dp-parc{height:100%;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:.375rem .875rem;padding:1.25rem;border:1px solid var(--filet);border-radius:var(--rayon-m);background:var(--eleve);color:var(--texte);text-decoration:none;transition:border-color .2s}
.dp-parc .ix-num{grid-row:1 / span 3}
.dp-parc-t{font-weight:600;line-height:1.3}
.dp-parc-m{font-size:.8125rem;color:var(--texte-2)}
.dp-parc-s{margin-top:.25rem;font-size:.9375rem;line-height:1.45;color:var(--texte-2)}
.dp-parc:hover,.dp-parc:focus-visible{border-color:var(--accent)}
.dp-parc:hover .dp-parc-t{color:var(--accent)}
.dp-questions{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--duo);border-top:1px solid var(--filet)}
@media (min-width:900px){.dp-questions{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dp-questions li{display:flex;flex-direction:column;gap:.375rem;padding:1rem 0;border-bottom:1px solid var(--filet)}
.dp-q{font-family:var(--serif);font-variation-settings:'opsz' 144,'SOFT' 100;font-size:var(--t-4);line-height:1.3}
.dp-questions a{font-size:.9375rem;font-weight:500}
.dp-questions a .m{display:block;margin-top:.125rem;font-size:.8125rem;font-weight:400;color:var(--texte-2)}
.dp-filtres{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.dp-filtres button{padding:.4rem .875rem;border:1px solid var(--filet);border-radius:999px;background:transparent;color:var(--texte);font:inherit;font-size:.875rem;cursor:pointer}
.dp-filtres button span{margin-left:.25rem;color:var(--texte-2)}
.dp-filtres button[aria-pressed="true"]{background:var(--texte);border-color:var(--texte);color:var(--fond)}
.dp-filtres button[aria-pressed="true"] span{color:inherit;opacity:.7}
.dp-filtres button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dp-liste{list-style:none;border-top:1px solid var(--filet)}
/* une ligne filtrée disparaît : l'attribut hidden l'emporte sur le display de la ligne et du repli */
.dp [hidden]{display:none !important}
.dp-ligne{display:grid;grid-template-columns:minmax(0,1fr);gap:.25rem;padding:1rem 0;border-bottom:1px solid var(--filet)}
@media (min-width:760px){.dp-ligne{grid-template-columns:8.5rem minmax(0,1fr) auto;gap:1.5rem;align-items:baseline}}
.dp-genre{font-size:.8125rem;font-weight:600;color:var(--accent)}
.dp-corps a{font-weight:600;color:var(--texte);text-decoration:none}
.dp-corps a:hover{color:var(--accent)}
.dp-corps p{margin-top:.25rem;max-width:var(--mesure);font-size:.9375rem;line-height:1.45;color:var(--texte-2)}
.dp-meta{font-size:.8125rem;color:var(--texte-2);white-space:nowrap}
.dp-prevues{margin-top:1.75rem}
.dp-prevues summary{display:flex;align-items:center;gap:.5rem;padding:.75rem 0;cursor:pointer;font-weight:600;list-style:none}
.dp-prevues summary::-webkit-details-marker{display:none}
.dp-prevues summary span{color:var(--texte-2);font-weight:400}
.dp-prevues summary::after{content:"";width:8px;height:8px;margin-left:.25rem;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translate(-2px,-2px)}
.dp-prevues[open] summary::after{transform:rotate(-135deg)}
.dp-prevues .dp-genre{color:var(--texte-2)}
.dp-prevues .dp-corps a{font-weight:500}
.dp-preuves{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1rem}
.dp-preuves a{display:block;height:100%;padding:1.125rem 1.25rem;border-radius:var(--rayon-m);background:var(--fond-2);color:var(--texte);font-weight:600;line-height:1.35;text-decoration:none}
.dp-preuves a:hover{color:var(--accent)}
.dp-dossiers ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.dp-dossiers a{display:inline-block;padding:.45rem .875rem;border:1px solid var(--filet);border-radius:var(--rayon-champ);color:var(--texte);font-size:.875rem;text-decoration:none}
.dp-dossiers a:hover{border-color:var(--accent);color:var(--accent)}
.dp-dossiers a[aria-current]{background:var(--fond-2);border-color:transparent;font-weight:600}