/* 20 octobre 2026 : sous-page « Agents IA en action », version de production (docs/97-agents-en-action.md).
   Un cas égale un écran exact du pager (ecrans.js). Fermé, l'écran présente le cas : famille, problème, phrase, un seul
   bouton « Voir l’agent en action », et à côté son fonctionnement (public, explication, étapes du flux). Ouvert, la
   démonstration (racine fantôme stylée par agents-en-action-scene.css) occupe l'écran : texte du cas et commandes d'un
   côté, scène du parcours de l'autre ; au téléphone, tout empilé, la barre d'action toujours dans l'écran.
   Proxima sur la grille d'Isabelle (80, 56, 40, 28, 24, 18, 16, 14). Contrastes : crème sur nuit 13,48:1, encre sur
   crème 10,13:1, encre sur glace 9,08:1 ; le cyan ne porte jamais de texte sur fond clair.
   Couche echoes-regard, comme ecrans.css : une déclaration importante de cette couche, la première déclarée, l'emporte
   sur celles des autres couches et hors couche ; dans la couche, les :not(#_) répétés décident. */
@layer echoes-regard{
html{--aea-nuit:#102d41;--aea-encre:#1f415a;--aea-cyan:#48b9ce;--aea-glace:#d8f1f5;--aea-creme:#fff8ea}

/* Un dialogue d'un parcours (racine fantôme) est ouvert : la page derrière ne défile pas. */
html[data-dialogue-ouvert]:not(#_):not(#_){overflow:hidden!important}
/* Le récit d'un parcours change la mise en page de son écran : le pager décide seul de la position. */
html:has(main.aea-page){overflow-anchor:none!important}
/* La pastille flottante « Parlez-nous » recouvrait la barre d'action des cas : la sous-page porte son appel au dernier
   écran et dans le pied de page. */
html:has(main.aea-page) .echoes-float-cta:not(#_):not(#_):not(#_){display:none!important}

/* --- Écrans des cas : hauteur exacte d'un écran, jamais de défilement intérieur ----------------------------------- */
html.ecrans main.aea-page>.aea-cas:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){height:var(--ecran-h,100svh)!important;min-height:0!important;max-height:var(--ecran-h,100svh)!important;padding:clamp(24px,5svh,56px) 5.5vw!important;display:flex!important;flex-direction:column!important;justify-content:center!important;overflow:clip!important;background:var(--aea-creme)!important;color:var(--aea-encre)!important;border:0!important;box-sizing:border-box!important}
html.ecrans main.aea-page>.aea-cas:nth-of-type(odd):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){background:var(--aea-glace)!important}
html.ecrans main.aea-page>.aea-cas>.aea-inner:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){display:grid!important;grid-template-columns:minmax(0,6fr) minmax(0,5fr)!important;gap:clamp(40px,6vw,112px)!important;align-items:center!important;flex:none!important;height:auto!important;min-height:0!important;max-width:1320px!important;width:100%!important;margin:0 auto!important;padding:0!important;transform:none!important;filter:none!important}
/* Ouvert : la démonstration prend tout l'écran. */
html.ecrans main.aea-page>.aea-cas.aea-ouvert:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){justify-content:stretch!important;padding:clamp(16px,3svh,32px) 5.5vw!important}
html.ecrans main.aea-page>.aea-cas.aea-ouvert>.aea-inner:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){display:block!important;flex:1 1 auto!important;height:100%!important;max-width:1440px!important}
.aea-atelier{display:block;height:100%;min-height:0;color:var(--aea-encre);font-family:Proxima,Archivo,sans-serif}
.aea-cas :is(.aea-atelier,.aea-resume,.aea-flux,.aea-retour)[hidden]:not(#_):not(#_):not(#_):not(#_):not(#_){display:none!important}

/* Texte du cas (dans la présentation, puis glissé dans la démonstration). */
.aea-cas .aea-famille:not(#_):not(#_):not(#_):not(#_){display:flex!important;align-items:center!important;gap:12px!important;margin:0 0 16px!important;font:600 14px/1.3 Proxima,Archivo,sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--aea-encre)!important}
.aea-ico{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:12px;border:1px solid color-mix(in srgb,var(--aea-encre) 18%,transparent);background:var(--aea-creme);color:var(--aea-encre)}
.aea-ico svg{width:24px;height:24px;display:block}
.aea-cas .aea-probleme:not(#_):not(#_):not(#_):not(#_){margin:0!important;font:600 40px/1.1 Proxima,Archivo,sans-serif!important;letter-spacing:-.02em!important;max-width:18ch!important;color:var(--aea-encre)!important;text-wrap:balance!important}
.aea-cas .aea-phrase:not(#_):not(#_):not(#_):not(#_){margin:18px 0 0!important;font:400 18px/1.5 Proxima,Archivo,sans-serif!important;max-width:40ch!important;color:var(--aea-encre)!important}

/* Le seul bouton de l'écran fermé. Encre sur crème ou glace, texte crème : 10,13:1. */
.aea-cas .aea-voir:not(#_):not(#_):not(#_):not(#_){display:inline-flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important;width:min(100%,420px)!important;min-height:64px!important;margin:32px 0 0!important;padding:10px 12px 10px 24px!important;border:1px solid var(--aea-encre)!important;border-radius:3px!important;background:var(--aea-encre)!important;color:var(--aea-creme)!important;font:600 18px/1.3 Proxima,Archivo,sans-serif!important;text-align:left!important;cursor:pointer!important;transition:background .2s,transform .2s!important}
.aea-cas .aea-voir>span:not(#_):not(#_):not(#_):not(#_){display:grid!important;place-items:center!important;flex:0 0 44px!important;width:44px!important;height:44px!important;border-radius:2px!important;background:var(--aea-creme)!important;color:var(--aea-encre)!important;font-size:24px!important}
.aea-cas .aea-voir:hover:not(#_):not(#_):not(#_):not(#_){background:var(--aea-nuit)!important}
.aea-cas .aea-voir[aria-busy]:not(#_):not(#_):not(#_):not(#_){cursor:progress!important;opacity:.86}
.aea-cas .aea-voir:focus-visible,.aea-cas .aea-retour:focus-visible{outline:3px solid var(--aea-encre)!important;outline-offset:3px!important}

/* Retour au cas : en tête de la démonstration. */
.aea-cas .aea-retour:not(#_):not(#_):not(#_):not(#_){display:inline-flex!important;align-items:center!important;gap:10px!important;min-height:44px!important;margin:0 0 16px!important;padding:0 4px 0 0!important;border:0!important;background:none!important;color:var(--aea-encre)!important;font:600 16px/1.3 Proxima,Archivo,sans-serif!important;cursor:pointer!important;text-decoration:underline!important;text-underline-offset:4px!important}

/* Fonctionnement du cas, à côté de sa présentation. */
.aea-cas .aea-flux:not(#_):not(#_):not(#_){padding:clamp(24px,3vw,40px)!important;border-radius:14px!important;background:var(--aea-glace)!important;color:var(--aea-encre)!important;box-sizing:border-box!important}
.aea-cas:nth-of-type(odd) .aea-flux:not(#_):not(#_):not(#_){background:var(--aea-creme)!important}
.aea-cas .aea-flux>p:not(#_):not(#_):not(#_):not(#_){margin:16px 0 0!important;font:400 18px/1.5 Proxima,Archivo,sans-serif!important;max-width:46ch!important;color:var(--aea-encre)!important}
.aea-cas .aea-flux>.aea-flux-titre:not(#_):not(#_):not(#_):not(#_){margin:0!important;font:600 14px/1.3 Proxima,Archivo,sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase!important}
.aea-cas .aea-flux>.aea-public:not(#_):not(#_):not(#_):not(#_){font-weight:600!important}
/* Étapes du flux : une ligne de temps verticale, un point par étape, reliés par un filet. */
.aea-cas .aea-etapes:not(#_):not(#_):not(#_){display:grid!important;gap:0!important;margin:28px 0 0!important;padding:0!important;list-style:none!important}
.aea-cas .aea-etapes li:not(#_):not(#_):not(#_){position:relative!important;display:block!important;margin:0!important;padding:0 0 22px 30px!important;font:600 14px/18px Proxima,Archivo,sans-serif!important;letter-spacing:.08em!important;color:var(--aea-encre)!important}
.aea-cas .aea-etapes li:last-child:not(#_):not(#_):not(#_){padding-bottom:0!important}
.aea-cas .aea-etapes li:not(#_):not(#_):not(#_)::before{content:"";position:absolute;left:0;top:3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--aea-encre);background:var(--aea-creme);box-sizing:border-box}
.aea-cas:nth-of-type(even) .aea-etapes li:not(#_):not(#_):not(#_)::before{background:var(--aea-glace)}
.aea-cas .aea-etapes li:last-child:not(#_):not(#_):not(#_)::before{background:var(--aea-encre)}
.aea-cas .aea-etapes li:not(:last-child):not(#_):not(#_):not(#_)::after{content:"";position:absolute;left:5px;top:17px;bottom:-1px;width:2px;background:color-mix(in srgb,var(--aea-encre) 35%,transparent)}

/* --- Écran d'ouverture : nuit, sommaire des sept cas en tuiles glace --------------------------------------------- */
html.ecrans main.aea-page>.aea-ouverture:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){min-height:calc(var(--ecran-h,100svh) - var(--ecran-entete,0px))!important;height:calc(var(--ecran-h,100svh) - var(--ecran-entete,0px))!important;padding:clamp(20px,4svh,56px) 5.5vw!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background:var(--aea-nuit)!important;color:var(--aea-creme)!important;overflow:clip!important;border:0!important;box-sizing:border-box!important}
html.ecrans main.aea-page>.aea-ouverture>.aea-inner:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important;gap:clamp(24px,5vw,88px)!important;align-items:center!important;flex:none!important;height:auto!important;min-height:0!important;max-width:1440px!important;width:100%!important;margin:0 auto!important;padding:0!important;transform:none!important;filter:none!important}
.aea-ouverture .v3-label:not(#_):not(#_):not(#_):not(#_){color:var(--aea-creme)!important;font:600 14px/1.3 Proxima,Archivo,sans-serif!important;letter-spacing:.1em!important;margin:0 0 18px!important}
.aea-ouverture .v3-label:not(#_):not(#_):not(#_):not(#_)::before{background:var(--aea-cyan)!important}
.aea-ouverture .aea-titre:not(#_):not(#_):not(#_):not(#_){margin:0!important;font:600 56px/1.05 Proxima,Archivo,sans-serif!important;letter-spacing:-.025em!important;color:var(--aea-creme)!important;max-width:none!important}
.aea-ouverture .aea-appui:not(#_):not(#_):not(#_):not(#_){margin:24px 0 0!important;font:400 24px/1.4 Proxima,Archivo,sans-serif!important;max-width:30ch!important;color:var(--aea-creme)!important}
.aea-ouverture .aea-note:not(#_):not(#_):not(#_):not(#_){margin:24px 0 0!important;padding-top:16px!important;border-top:1px solid color-mix(in srgb,var(--aea-creme) 30%,transparent)!important;font:400 16px/1.5 Proxima,Archivo,sans-serif!important;max-width:44ch!important;color:var(--aea-creme)!important}
.aea-sommaire ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6svh,16px)}
.aea-sommaire li{margin:0;padding:0}
.aea-sommaire li:first-child{grid-column:1/-1}
.aea-ouverture .aea-tuile:not(#_):not(#_):not(#_):not(#_){display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;column-gap:14px!important;row-gap:4px!important;align-items:center!important;min-height:44px!important;height:100%!important;padding:clamp(14px,2.2svh,22px) 18px!important;border-radius:14px!important;background:var(--aea-glace)!important;color:var(--aea-encre)!important;text-decoration:none!important;box-sizing:border-box!important;transition:background .2s!important}
.aea-tuile .aea-ico{grid-row:1/3;background:var(--aea-creme)}
.aea-ouverture .aea-tuile-famille:not(#_):not(#_):not(#_):not(#_){font:600 14px/1.3 Proxima,Archivo,sans-serif!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--aea-encre)!important}
.aea-ouverture .aea-tuile-pb:not(#_):not(#_):not(#_):not(#_){font:400 18px/1.35 Proxima,Archivo,sans-serif!important;color:var(--aea-encre)!important}
.aea-ouverture .aea-tuile:hover:not(#_):not(#_):not(#_):not(#_){background:#fff!important}
.aea-tuile:focus-visible{outline:3px solid var(--aea-cyan);outline-offset:3px}

/* --- Téléphone et tablette étroite : tout empilé ------------------------------------------------------------------ */
@media (max-width:860px){
 html.ecrans main.aea-page>.aea-cas:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){padding:16px 20px!important}
 html.ecrans main.aea-page>.aea-cas.aea-ouvert:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){padding:8px 20px 14px!important}
 html.ecrans main.aea-page>.aea-cas>.aea-inner:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){grid-template-columns:minmax(0,1fr)!important;gap:20px!important;align-items:stretch!important}
 .aea-cas .aea-probleme:not(#_):not(#_):not(#_):not(#_){font-size:28px!important;line-height:1.15!important;max-width:none!important}
 .aea-cas .aea-phrase:not(#_):not(#_):not(#_):not(#_){font-size:16px!important;margin-top:10px!important}
 .aea-cas .aea-famille:not(#_):not(#_):not(#_):not(#_){margin-bottom:10px!important;gap:10px!important}
 .aea-famille .aea-ico{flex-basis:36px;width:36px;height:36px;border-radius:10px}
 .aea-famille .aea-ico svg{width:22px;height:22px}
 .aea-cas .aea-voir:not(#_):not(#_):not(#_):not(#_){width:100%!important;min-height:56px!important;margin-top:20px!important}
 .aea-cas .aea-flux:not(#_):not(#_):not(#_){padding:20px!important}
 .aea-cas .aea-flux>p:not(#_):not(#_):not(#_):not(#_){font-size:16px!important;margin-top:10px!important;max-width:none!important}
 .aea-cas .aea-etapes:not(#_):not(#_):not(#_){margin-top:14px!important;gap:10px 12px!important}
 .aea-cas .aea-etapes li:not(#_):not(#_):not(#_){padding:0 0 0 22px!important}
 /* Étapes en deux colonnes, sans liaison : un trait ne finit jamais une ligne. */
 .aea-cas .aea-etapes:not(#_):not(#_):not(#_){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .aea-cas .aea-etapes li:not(:last-child):not(#_):not(#_):not(#_)::after{display:none!important}
 /* Ouvert : le titre se resserre, la phrase cède sa place à la scène. */
 .aea-cas.aea-ouvert .aea-retour:not(#_):not(#_):not(#_):not(#_){margin-bottom:4px!important}
 .aea-cas.aea-ouvert .aea-probleme:not(#_):not(#_):not(#_):not(#_){font-size:24px!important}
 .aea-cas.aea-ouvert .aea-phrase:not(#_):not(#_):not(#_):not(#_){display:none!important}
 .aea-cas.aea-ouvert .aea-famille:not(#_):not(#_):not(#_):not(#_){margin-bottom:6px!important}

 html.ecrans main.aea-page>.aea-ouverture>.aea-inner:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){grid-template-columns:1fr!important;gap:20px!important;align-content:center!important}
 html.ecrans main.aea-page>.aea-ouverture:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){padding:16px 20px!important}
 .aea-ouverture .aea-titre:not(#_):not(#_):not(#_):not(#_){font-size:40px!important}
 .aea-ouverture .aea-appui:not(#_):not(#_):not(#_):not(#_){font-size:18px!important;margin-top:14px!important}
 .aea-ouverture .aea-note:not(#_):not(#_):not(#_):not(#_){font-size:14px!important;margin-top:0!important;padding-top:12px!important;order:3!important}
 .aea-ouverture .v3-label:not(#_):not(#_):not(#_):not(#_){margin-bottom:12px!important}
 .aea-copie{display:contents}
 .aea-copie>*{grid-column:1}
 .aea-sommaire{order:2}
 .aea-sommaire ul{gap:8px}
 .aea-ouverture .aea-tuile:not(#_):not(#_):not(#_):not(#_){grid-template-columns:32px minmax(0,1fr)!important;column-gap:8px!important;padding:8px!important;min-height:56px!important}
 .aea-tuile .aea-ico{grid-row:auto;width:32px;height:32px;flex-basis:32px;border-radius:9px}
 .aea-tuile .aea-ico svg{width:22px;height:22px}
 .aea-ouverture .aea-tuile-pb:not(#_):not(#_):not(#_):not(#_){display:none!important}
 .aea-ouverture .aea-sommaire li:first-child .aea-tuile-pb:not(#_):not(#_):not(#_):not(#_){display:block!important;font-size:16px!important;grid-column:2!important}
 /* La famille se lit en deux temps : le verbe, puis le domaine. Le séparateur reste lu par les lecteurs d'écran. */
 .aea-tuile-famille .aea-verbe{display:block}
 .aea-tuile-famille .aea-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Tablette en portrait : même empilement, à l'échelle de l'ordinateur (titre 40, textes 18, étapes en ligne de temps). */
@media (min-width:621px) and (max-width:860px) and (min-height:900px){
 html.ecrans main.aea-page>.aea-cas:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){padding:40px 48px!important}
 html.ecrans main.aea-page>.aea-cas.aea-ouvert:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){padding:24px 40px 24px!important}
 html.ecrans main.aea-page>.aea-cas>.aea-inner:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){gap:40px!important}
 .aea-cas .aea-probleme:not(#_):not(#_):not(#_):not(#_){font-size:40px!important;line-height:1.1!important;max-width:18ch!important}
 .aea-cas .aea-phrase:not(#_):not(#_):not(#_):not(#_){font-size:18px!important;margin-top:18px!important}
 .aea-cas .aea-voir:not(#_):not(#_):not(#_):not(#_){width:min(100%,420px)!important;min-height:64px!important;margin-top:32px!important}
 .aea-cas .aea-flux:not(#_):not(#_):not(#_){padding:32px!important}
 .aea-cas .aea-flux>p:not(#_):not(#_):not(#_):not(#_){font-size:18px!important;margin-top:16px!important}
 .aea-cas .aea-etapes:not(#_):not(#_):not(#_){display:grid!important;grid-template-columns:1fr!important;gap:0!important;margin-top:24px!important}
 .aea-cas .aea-etapes li:not(#_):not(#_):not(#_){padding:0 0 22px 30px!important}
 .aea-cas .aea-etapes li:last-child:not(#_):not(#_):not(#_):not(#_){padding-bottom:0!important}
 .aea-cas .aea-etapes li:not(:last-child):not(#_):not(#_):not(#_):not(#_)::after{display:block!important}
 .aea-cas.aea-ouvert .aea-probleme:not(#_):not(#_):not(#_):not(#_){font-size:28px!important}
}
/* Écran court (téléphone, tablette en paysage) : l'explication du fonctionnement se retire, ses étapes restent. */
@media (max-width:860px) and (max-height:760px){
 .aea-cas .aea-flux>p:not(.aea-flux-titre):not(.aea-public):not(#_):not(#_):not(#_):not(#_){display:none!important}
 .aea-cas .aea-phrase:not(#_):not(#_):not(#_):not(#_){display:none!important}
}
@media (min-width:861px) and (max-height:700px){
 .aea-cas .aea-flux>p:not(.aea-flux-titre):not(.aea-public):not(#_):not(#_):not(#_):not(#_){display:none!important}
}

/* Bandeau cookies au téléphone et à la tablette : tant qu'aucun choix n'est fait, il couvre le bas de l'écran. Sa
   hauteur (posée par agents-en-action.js) est réservée sous le bouton des cas, sous la barre d'action et sous le
   sommaire ; l'explication du fonctionnement et la mention de l'ouverture lui cèdent la place. */
html.aea-bandeau.ecrans main.aea-page>.aea-cas:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_),
html.aea-bandeau.ecrans main.aea-page>.aea-ouverture:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){padding-bottom:calc(12px + var(--aea-bandeau,0px))!important}
@media (max-width:860px){
 html.aea-bandeau .aea-cas .aea-flux>p:not(.aea-flux-titre):not(.aea-public):not(#_):not(#_):not(#_):not(#_){display:none!important}
 html.aea-bandeau .aea-note:not(#_):not(#_):not(#_):not(#_){display:none!important}
 html.aea-bandeau .aea-sommaire li:first-child .aea-tuile-pb:not(#_):not(#_):not(#_):not(#_):not(#_){display:none!important}
 html.aea-bandeau .aea-sommaire ul{gap:6px}
 html.aea-bandeau.ecrans main.aea-page>.aea-ouverture>.aea-inner:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){gap:8px!important}
 html.aea-bandeau .aea-ouverture .aea-appui:not(#_):not(#_):not(#_):not(#_){margin-top:8px!important}
 html.aea-bandeau.ecrans main.aea-page>.aea-ouverture:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_){padding-top:8px!important;padding-bottom:calc(4px + var(--aea-bandeau,0px))!important}
}
@media (prefers-reduced-motion:reduce){.aea-tuile,.aea-cas .aea-voir:not(#_):not(#_):not(#_):not(#_){transition:none!important}}
}