/* formation-agile.com · Piste A « Le mur de l'équipe »
   Tableau blanc mélaminé, feutres, une seule carte jaune par écran : l'action.
   Animations : transform, opacity, clip-path uniquement. */

@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque-var.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../fonts/public-sans-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../fonts/public-sans-italic-var.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Shantell Sans";src:url("../fonts/shantell-sans-var.woff2") format("woff2");font-weight:300 800;font-display:swap}

:root{
  /* Couleurs : le mur */
  --mur:#F3F5F4;          /* fond, blanc mélaminé légèrement froid */
  --mur-2:#E7ECEA;        /* quadrillage, zones */
  --carte:#FFFFFF;        /* carte, surface */
  --encre:#1C2230;        /* texte, feutre noir bleuté */
  --encre-2:#4A5361;      /* texte secondaire */
  --trait:#CDD3D0;        /* bordures */
  --feutre:#1F4BA0;       /* liens, accent principal */
  --feutre-fort:#163A80;  /* survol */
  --limite:#B5302A;       /* limite atteinte, erreur */
  --fait:#2A7552;         /* fait, succès */
  --postit:#F5DC4A;       /* une seule carte jaune : l'action */
  --postit-encre:#2B2400;
  --ombre:rgba(28,34,48,.16);
  --focus:#1F4BA0;

  /* Typographie */
  --f-titre:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --f-texte:"Public Sans","Segoe UI",Roboto,Arial,sans-serif;
  --f-main:"Shantell Sans","Comic Sans MS","Segoe Print",cursive;
  --t-xs:clamp(.8rem,.78rem + .1vw,.85rem);
  --t-s:clamp(.9rem,.88rem + .1vw,.95rem);
  --t-m:clamp(1rem,.97rem + .15vw,1.0625rem);
  --t-l:clamp(1.15rem,1.08rem + .35vw,1.35rem);
  --t-xl:clamp(1.45rem,1.25rem + 1vw,1.95rem);
  --t-2xl:clamp(1.85rem,1.45rem + 2vw,2.85rem);
  --t-3xl:clamp(2.2rem,1.6rem + 3vw,3.6rem);

  /* Espacements (base 8) */
  --e-1:.25rem;--e-2:.5rem;--e-3:.75rem;--e-4:1rem;--e-5:1.5rem;--e-6:2rem;--e-7:3rem;--e-8:4.5rem;--e-9:6rem;
  --largeur:72rem;--lecture:42rem;
  --rayon:3px;
  --gouttiere:max(16px,env(safe-area-inset-left,0px));
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --mur:#161A20;--mur-2:#20262E;--carte:#1D232B;--encre:#E8EBEF;--encre-2:#AEB6C1;--trait:#36404B;
  --feutre:#93B4F4;--feutre-fort:#B7CDF8;--limite:#FF8F84;--fait:#73D1A2;--postit:#E7CD45;--postit-encre:#231D00;
  --ombre:rgba(0,0,0,.45);--focus:#93B4F4;color-scheme:dark}}
:root[data-theme="dark"]{
  --mur:#161A20;--mur-2:#20262E;--carte:#1D232B;--encre:#E8EBEF;--encre-2:#AEB6C1;--trait:#36404B;
  --feutre:#93B4F4;--feutre-fort:#B7CDF8;--limite:#FF8F84;--fait:#73D1A2;--postit:#E7CD45;--postit-encre:#231D00;
  --ombre:rgba(0,0,0,.45);--focus:#93B4F4;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--mur);color:var(--encre);font:400 var(--t-m)/1.65 var(--f-texte);text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto}
a{color:var(--feutre);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--feutre-fort);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--f-titre);line-height:1.12;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:var(--t-3xl);font-weight:800}
h2{font-size:var(--t-2xl);font-weight:800}
h3{font-size:var(--t-xl);font-weight:700}
h4{font-size:var(--t-l);font-weight:700}
p,ul,ol{margin:0}
.wrap{max-width:var(--largeur);margin-inline:auto;padding-left:var(--gouttiere);padding-right:max(16px,env(safe-area-inset-right,0px))}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--encre);color:var(--mur);padding:.6rem 1rem;z-index:100}
.skip:focus{top:1rem}

/* ===== En-tête ===== */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--mur)}
.entete{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--mur) 94%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--trait)}
.entete .wrap{display:flex;align-items:center;gap:var(--e-4);min-height:4rem}
.logo{display:flex;flex-direction:column;line-height:1.05;text-decoration:none;color:var(--encre);margin-right:auto}
.logo b{font:800 1.15rem var(--f-titre)}
.logo span{font-size:var(--t-xs);color:var(--encre-2)}
.menu-bouton{display:none}
.nav{display:flex;align-items:center;gap:var(--e-1)}
.nav a,.nav button.sous{white-space:nowrap;font:600 var(--t-s) var(--f-texte);color:var(--encre);text-decoration:none;padding:.5rem .6rem;border-radius:var(--rayon);background:none;border:0;cursor:pointer;position:relative}
.nav a::after,.nav button.sous::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.25rem;height:2px;background:var(--feutre);clip-path:inset(0 100% 0 0);transition:clip-path .25s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after,.nav button.sous:hover::after,.nav button.sous[aria-expanded="true"]::after{clip-path:inset(0 0 0 0)}
.nav .groupe{position:relative}
.nav .panneau{position:absolute;top:100%;left:0;min-width:17rem;background:var(--carte);border:1px solid var(--trait);box-shadow:0 8px 24px var(--ombre);padding:var(--e-2);display:grid;gap:2px}
.nav .panneau a{display:block;padding:.45rem .6rem}
.nav .panneau a::after{display:none}
.nav .panneau a:hover{background:var(--mur-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:700 var(--t-s)/1.2 var(--f-texte);text-decoration:none;padding:.8rem 1.15rem;border-radius:var(--rayon);border:2px solid var(--encre);background:var(--encre);color:var(--mur);cursor:pointer;transition:transform .15s ease,background-color .15s ease,color .15s ease;min-height:44px}
.btn:hover{transform:translateY(-2px);color:var(--mur);background:var(--feutre-fort);border-color:var(--feutre-fort)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn.secondaire{background:transparent;color:var(--encre)}
.btn.secondaire:hover{background:var(--carte);color:var(--encre);border-color:var(--feutre)}
.btn.postit{background:var(--postit);border-color:var(--postit);color:var(--postit-encre)}
.btn.postit:hover{background:var(--postit);color:var(--postit-encre);border-color:var(--encre)}
.entete .btn{padding:.6rem .9rem}

/* Barre d'action mobile : toujours là, ne masque rien (le body réserve sa hauteur) */
.barre-action{display:none}
@media (max-width:1100px){
  .menu-bouton{display:inline-flex;align-items:center;gap:.4rem;font:700 var(--t-s) var(--f-texte);background:none;border:2px solid var(--encre);color:var(--encre);padding:.5rem .8rem;border-radius:var(--rayon);min-height:44px;cursor:pointer}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--carte);border-bottom:1px solid var(--trait);padding:var(--e-3) var(--gouttiere) var(--e-5);gap:0;box-shadow:0 12px 24px var(--ombre)}
  .nav[hidden]{display:none!important}
  .nav a,.nav button.sous{padding:.75rem .25rem;text-align:left;width:100%;font-size:var(--t-m)}
  .nav .panneau{position:static;box-shadow:none;border:0;padding:0 0 0 var(--e-4);min-width:0}
  .entete .btn.cta-entete{display:none}
  .barre-action{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:var(--e-2);padding:var(--e-2) max(12px,env(safe-area-inset-right,0px)) calc(var(--e-2) + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:var(--carte);border-top:1px solid var(--trait)}
  .barre-action .btn{flex:1;padding:.7rem .5rem}
  body{padding-bottom:calc(4.25rem + env(safe-area-inset-bottom,0px))}
}

/* ===== Fil d'Ariane ===== */
.ariane{font-size:var(--t-xs);color:var(--encre-2);padding-top:var(--e-5)}
.ariane ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .5rem}
.ariane li+li::before{content:"/";margin-right:.5rem;color:var(--trait)}
.ariane a{color:var(--encre-2)}

/* ===== Tête de page ===== */
.tete{padding-block:var(--e-6) var(--e-7)}
.tete .surtitre{font:600 var(--t-l)/1.2 var(--f-main);color:var(--feutre);margin-bottom:var(--e-3);display:inline-block;transform:rotate(-1deg)}
.tete h1{max-width:20ch}
.tete .chapo{font-size:var(--t-l);line-height:1.55;max-width:var(--lecture);margin-top:var(--e-4);color:var(--encre)}
.tete .faits{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-top:var(--e-5);list-style:none;padding:0}
.tete .faits li{font:600 var(--t-s) var(--f-texte);background:var(--carte);border:1px solid var(--trait);padding:.35rem .7rem;border-radius:var(--rayon)}
.tete .actions{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-5)}

/* ===== Accueil : le mur animé ===== */
.accueil-tete{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--e-7);align-items:center;padding-block:var(--e-7) var(--e-8)}
.accueil-tete h1{font-size:clamp(2.1rem,1.4rem + 3.2vw,3.7rem);max-width:16ch}
@media (max-width:860px){.accueil-tete{grid-template-columns:1fr;gap:var(--e-6);padding-block:var(--e-5) var(--e-7)}}
.mur{position:relative;background:var(--carte);border:1px solid var(--trait);padding:var(--e-4);box-shadow:0 1px 0 var(--ombre);
  background-image:linear-gradient(var(--mur-2) 1px,transparent 1px),linear-gradient(90deg,var(--mur-2) 1px,transparent 1px);background-size:22px 22px}
.mur .colonnes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-3)}
.mur .col{border-top:3px solid var(--encre);padding-top:var(--e-2);min-height:15rem}
.mur .col h2{font:600 1rem/1.2 var(--f-main);letter-spacing:0;margin-bottom:var(--e-3);display:flex;justify-content:space-between;gap:.3rem}
.mur .col h2 .wip{font:700 .8rem var(--f-texte);color:var(--encre-2)}
.mur .col h2 .wip.plein{color:var(--limite)}
.carte-mur{background:var(--carte);border:1px solid var(--trait);box-shadow:0 2px 0 var(--ombre);padding:.5rem .55rem;font-size:.8rem;line-height:1.3;margin-bottom:.5rem;transform:rotate(-.7deg)}
.carte-mur:nth-child(odd){transform:rotate(.6deg)}
.carte-mur.jaune{background:var(--postit);color:var(--postit-encre);border-color:transparent;font-weight:700}
.mur .voyageuse{position:absolute;z-index:2;width:calc((100% - 2rem - 1.5rem)/3);left:1rem;top:4.4rem;animation:voyage 7s cubic-bezier(.6,.05,.3,1) .6s 1 both}
.mur .wip-anim{animation:clignote 7s steps(1) .6s 1 both}
@keyframes voyage{
  0%{transform:translate(0,0) rotate(-1deg)}
  14%{transform:translate(0,-6px) rotate(-3deg)}
  32%,58%{transform:translate(calc(100% + .75rem),4.6rem) rotate(1deg)}
  72%{transform:translate(calc(100% + .75rem),4.4rem) rotate(2deg)}
  100%{transform:translate(calc(200% + 1.5rem),7.6rem) rotate(-.8deg)}}
.mur .legende{font:600 .95rem/1.3 var(--f-main);color:var(--feutre);margin-top:var(--e-3)}
@media (prefers-reduced-motion:reduce){.mur .voyageuse{animation:none;transform:translate(calc(200% + 1.5rem),7.6rem) rotate(-.8deg)}}

/* ===== Sections ===== */
.section{padding-block:var(--e-8)}
.section.serree{padding-block:var(--e-7)}
.section.bande{background:var(--carte);border-block:1px solid var(--trait)}
.section-tete{max-width:var(--lecture);margin-bottom:var(--e-6)}
.section-tete .main{font:600 var(--t-l) var(--f-main);color:var(--feutre);display:block;margin-bottom:var(--e-2)}
.section-tete p{margin-top:var(--e-3);color:var(--encre-2);font-size:var(--t-l);line-height:1.5}

/* ===== Prose (pages de contenu) ===== */
.page-grille{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:var(--e-7);align-items:start;padding-bottom:var(--e-8)}
@media (max-width:960px){.page-grille{grid-template-columns:1fr;gap:var(--e-6)}}
.prose{max-width:var(--lecture);min-width:0}
.prose>*+*{margin-top:var(--e-4)}
.prose h2{font-size:var(--t-xl);margin-top:var(--e-7);scroll-margin-top:5.5rem}
.prose h3{font-size:var(--t-l);margin-top:var(--e-6)}
.prose h2+*,.prose h3+*{margin-top:var(--e-3)}
.prose .chapeau{font-size:var(--t-l);line-height:1.55}
.prose ul,.prose ol{padding-left:1.25rem;display:grid;gap:var(--e-2)}
.prose li::marker{color:var(--feutre)}
.prose blockquote{margin:0;border-left:3px solid var(--feutre);padding:.25rem 0 .25rem var(--e-4);color:var(--encre-2)}
.prose strong{font-weight:700}
.prose .exemple{background:var(--carte);border:1px solid var(--trait);padding:var(--e-4) var(--e-5);position:relative}
.prose .exemple::before{content:"Situation type";display:block;font:600 .95rem var(--f-main);color:var(--feutre);margin-bottom:var(--e-2)}
.prose .definition{background:var(--postit);color:var(--postit-encre);padding:var(--e-5);font-size:var(--t-l);line-height:1.5;transform:rotate(-.4deg);box-shadow:0 3px 0 var(--ombre)}
.prose .definition a{color:inherit}
.prose .note{font-size:var(--t-s);color:var(--encre-2);border-left:3px solid var(--trait);padding-left:var(--e-3)}
.prose .limites{border:2px dashed var(--trait);padding:var(--e-4) var(--e-5)}
.fournir{background:var(--postit);color:var(--postit-encre);font-weight:700;padding:.05em .35em;border-radius:2px;font-size:.92em}
.tw{overflow-x:auto;border:1px solid var(--trait);background:var(--carte);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:var(--t-s);line-height:1.45}
th,td{text-align:left;vertical-align:top;padding:.65rem .8rem;border-bottom:1px solid var(--trait)}
thead th{font:700 var(--t-xs)/1.3 var(--f-texte);text-transform:uppercase;letter-spacing:.05em;color:var(--encre-2);background:var(--mur)}
tbody th{font-weight:700}
.tw table{min-width:36rem}
.sommaire{position:sticky;top:5.5rem;font-size:var(--t-s);border-top:3px solid var(--encre);padding-top:var(--e-3)}
.sommaire b{font:600 1rem var(--f-main);display:block;margin-bottom:var(--e-2)}
.sommaire ol{list-style:none;padding:0;display:grid;gap:.35rem}
.sommaire a{color:var(--encre-2);text-decoration:none}
.sommaire a:hover{color:var(--feutre);text-decoration:underline}
.sommaire .carte-cta{margin-top:var(--e-5)}
@media (max-width:960px){.sommaire{position:static}}
.sources{list-style:none;padding:0!important;display:grid;gap:var(--e-3)!important;font-size:var(--t-s)}
.sources li{border-left:3px solid var(--trait);padding-left:var(--e-3)}

/* ===== Cartes et comparateur ===== */
.carte-cta{background:var(--postit);color:var(--postit-encre);padding:var(--e-4);box-shadow:0 3px 0 var(--ombre);transform:rotate(-.6deg)}
.carte-cta p{font-size:var(--t-s);margin-bottom:var(--e-3)}
.carte-cta a:not(.btn){color:inherit;font-weight:700}
.comparateur{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-4)}
@media (max-width:1000px){.comparateur{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.comparateur{grid-template-columns:1fr}}
.parcours{display:flex;flex-direction:column;background:var(--carte);border:1px solid var(--trait);border-top:4px solid var(--encre);padding:var(--e-4) var(--e-4) var(--e-5);transition:transform .2s ease,box-shadow .2s ease;position:relative;min-width:0}
.parcours:hover,.parcours:focus-within{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 8px 0 var(--ombre)}
.parcours h3{font-size:var(--t-l)}
.parcours h3 a{color:var(--encre);text-decoration:none}
.parcours h3 a::after{content:"";position:absolute;inset:0}
.parcours .pour{color:var(--encre-2);font-size:var(--t-s);margin-top:var(--e-2)}
.parcours dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;margin:var(--e-4) 0 0;font-size:var(--t-s)}
.parcours dt{color:var(--encre-2)}
.parcours dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.parcours .etat{margin-top:auto;padding-top:var(--e-4);font:600 .95rem var(--f-main);color:var(--feutre)}
.grille-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-6)}
.grille-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-5)}
@media (max-width:860px){.grille-2,.grille-3{grid-template-columns:1fr}}
.symptome{background:var(--carte);border:1px solid var(--trait);padding:var(--e-5);box-shadow:0 2px 0 var(--ombre)}
.symptome .dit{font:600 var(--t-l)/1.35 var(--f-main);color:var(--feutre)}
.symptome p+p{margin-top:var(--e-3)}

/* ===== Fiche Qualiopi ===== */
.fiche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--trait);background:var(--carte)}
@media (max-width:700px){.fiche{grid-template-columns:1fr}}
.fiche>div{padding:var(--e-4) var(--e-5);border-bottom:1px solid var(--trait)}
.fiche>div:nth-child(odd){border-right:1px solid var(--trait)}
@media (max-width:700px){.fiche>div:nth-child(odd){border-right:0}}
.fiche h3{font:700 var(--t-xs)/1.3 var(--f-texte);text-transform:uppercase;letter-spacing:.06em;color:var(--encre-2);margin-bottom:var(--e-2)}
.fiche p,.fiche li{font-size:var(--t-s)}
.fiche ul{padding-left:1.1rem;display:grid;gap:.25rem}
.programme{counter-reset:seq;list-style:none;padding:0!important;display:grid;gap:var(--e-3)!important}
.programme>li{background:var(--carte);border:1px solid var(--trait);padding:var(--e-4) var(--e-5);display:grid;grid-template-columns:auto 1fr auto;gap:.2rem var(--e-4);align-items:baseline}
.programme>li::before{counter-increment:seq;content:counter(seq);font:800 1.4rem var(--f-titre);color:var(--feutre);grid-row:span 2}
.programme b{font-family:var(--f-titre);font-size:var(--t-m)}
.programme .duree{font:600 var(--t-xs) var(--f-texte);color:var(--encre-2);white-space:nowrap}
.programme p{grid-column:2/4;font-size:var(--t-s);color:var(--encre-2)}

/* ===== Formulaires ===== */
.formulaire{background:var(--carte);border:1px solid var(--trait);padding:var(--e-5);display:grid;gap:var(--e-4);max-width:34rem}
.champ{display:grid;gap:.35rem}
.champ label,.champ legend{font-weight:700;font-size:var(--t-s)}
.champ .aide{font-size:var(--t-xs);color:var(--encre-2)}
.champ input,.champ select,.champ textarea{font:inherit;font-size:16px;color:var(--encre);background:var(--mur);border:2px solid var(--trait);border-radius:var(--rayon);padding:.65rem .75rem;min-height:44px;width:100%}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:var(--encre-2)}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--feutre);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--feutre) 30%,transparent)}
.champ [aria-invalid="true"]{border-color:var(--limite)}
.champ .erreur{color:var(--limite);font-size:var(--t-xs);font-weight:700}
.champ .erreur:empty{display:none}
.formulaire .confirmation{background:var(--mur-2);border-left:4px solid var(--fait);padding:var(--e-3) var(--e-4);font-size:var(--t-s)}
.formulaire .rgpd{font-size:var(--t-xs);color:var(--encre-2)}

/* ===== Coordonnées copiables ===== */
.coord{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);font-size:var(--t-m)}
.coord .val{font-weight:700;user-select:all;font-variant-numeric:tabular-nums}
.copier{font:600 var(--t-xs) var(--f-texte);border:1px solid var(--trait);background:var(--carte);color:var(--encre);padding:.35rem .6rem;border-radius:var(--rayon);cursor:pointer;min-height:32px}
.copier:hover{border-color:var(--feutre)}
.copier.ok{border-color:var(--fait);color:var(--fait)}

/* ===== FAQ ===== */
.faq{display:grid;gap:var(--e-2);max-width:var(--lecture)}
.faq details{background:var(--carte);border:1px solid var(--trait)}
.faq summary{cursor:pointer;padding:var(--e-4) var(--e-5);font:700 var(--t-m)/1.35 var(--f-titre);list-style:none;display:flex;justify-content:space-between;gap:var(--e-3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:700 1.3rem/1 var(--f-texte);color:var(--feutre);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .rep{padding:0 var(--e-5) var(--e-5);font-size:var(--t-s)}
.faq .rep>*+*{margin-top:var(--e-2)}

/* ===== Test agilité de façade ===== */
.test{display:grid;gap:var(--e-5);max-width:46rem}
.test fieldset{border:1px solid var(--trait);background:var(--carte);padding:var(--e-4) var(--e-5) var(--e-5);margin:0}
.test legend{font:700 var(--t-l) var(--f-titre);padding:0 .4rem}
.test .item{padding-block:var(--e-3);border-bottom:1px solid var(--mur-2)}
.test .item:last-child{border-bottom:0}
.test .item>p{font-weight:600;margin-bottom:var(--e-2)}
.echelle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
@media (max-width:520px){.echelle{grid-template-columns:repeat(2,minmax(0,1fr))}}
.echelle label{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:.4rem;border:2px solid var(--trait);border-radius:var(--rayon);font-size:var(--t-xs);font-weight:600;cursor:pointer;background:var(--mur);transition:transform .12s ease,border-color .12s ease}
.echelle label:hover{border-color:var(--encre-2);transform:translateY(-1px)}
.echelle input{position:absolute;opacity:0;pointer-events:none}
.echelle input:checked+label{background:var(--encre);color:var(--mur);border-color:var(--encre)}
.echelle input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
.test .progression{font:600 var(--t-s) var(--f-texte);color:var(--encre-2)}
.resultat{border:2px solid var(--encre);background:var(--carte);padding:var(--e-5);display:grid;gap:var(--e-4)}
.resultat .zones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-3)}
@media (max-width:620px){.resultat .zones{grid-template-columns:repeat(2,minmax(0,1fr))}}
.zone{border-top:4px solid var(--fait);padding-top:var(--e-2)}
.zone.vide{border-top-color:var(--limite)}
.zone b{display:block;font-family:var(--f-titre)}
.zone .score{font-variant-numeric:tabular-nums;font-size:var(--t-s);color:var(--encre-2)}
.zone .etat{font:600 .95rem var(--f-main)}
.zone.vide .etat{color:var(--limite)}
.zone:not(.vide) .etat{color:var(--fait)}
.jauge{height:.5rem;background:var(--mur-2);margin-top:.3rem;overflow:hidden}
.jauge i{display:block;height:100%;background:currentColor;transform-origin:left;transition:transform .5s ease}

/* ===== Pied de page ===== */
.pied{background:var(--encre);color:var(--mur);padding-block:var(--e-8) var(--e-6);margin-top:var(--e-8)}
.pied a{color:var(--mur)}
.pied .colonnes{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--e-6)}
@media (max-width:860px){.pied .colonnes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pied .colonnes{grid-template-columns:1fr}}
.pied h2{font:600 1.05rem var(--f-main);margin-bottom:var(--e-3);color:var(--postit)}
.pied ul{list-style:none;padding:0;display:grid;gap:.4rem;font-size:var(--t-s)}
.pied .legal{margin-top:var(--e-7);padding-top:var(--e-5);border-top:1px solid color-mix(in srgb,var(--mur) 25%,transparent);font-size:var(--t-xs);line-height:1.6;display:grid;gap:var(--e-2);opacity:.9}
.pied .copier{background:transparent;color:var(--mur);border-color:color-mix(in srgb,var(--mur) 40%,transparent)}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pied{background:#0E1115;color:var(--encre)}:root:not([data-theme="light"]) .pied a,:root:not([data-theme="light"]) .pied .copier{color:var(--encre)}}
:root[data-theme="dark"] .pied{background:#0E1115;color:var(--encre)}
:root[data-theme="dark"] .pied a,:root[data-theme="dark"] .pied .copier{color:var(--encre)}

/* ===== Divers ===== */
.alerte-session{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e-6);align-items:start}
@media (max-width:860px){.alerte-session{grid-template-columns:1fr}}
.etat-sessions{font:600 var(--t-l)/1.35 var(--f-main);color:var(--limite)}
.souligne{background:linear-gradient(var(--postit),var(--postit)) 0 88%/100% .35em no-repeat}
.lien-fleche{font-weight:700;text-decoration:none}
.lien-fleche::after{content:" →";display:inline-block;transition:transform .15s ease}
.lien-fleche:hover::after{transform:translateX(3px)}
.suite{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--e-4)}
.suite a{display:block;background:var(--carte);border:1px solid var(--trait);padding:var(--e-4);text-decoration:none;color:var(--encre);transition:transform .15s ease,border-color .15s ease}
.suite a:hover{transform:translateY(-2px);border-color:var(--feutre)}
.suite a b{display:block;font-family:var(--f-titre);font-size:var(--t-m)}
.suite a span{font-size:var(--t-s);color:var(--encre-2)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{.entete,.barre-action,.pied{display:none}}

/* Compteur de travail en cours, synchronisé avec la carte voyageuse */
.mur .wip{display:inline-grid}
.mur .wip>span{grid-area:1/1}
.mur .wip-b{color:var(--limite);opacity:0;animation:wip-plein 7s steps(1) .6s 1 both}
.mur .wip-a{animation:wip-libre 7s steps(1) .6s 1 both}
@keyframes wip-plein{0%{opacity:0}30%{opacity:1}72%{opacity:0}100%{opacity:0}}
@keyframes wip-libre{0%{opacity:1}30%{opacity:0}72%{opacity:1}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.mur .wip-b{opacity:0;animation:none}.mur .wip-a{opacity:1;animation:none}}
.sommaire .btn,.sommaire .btn:hover{color:var(--mur);text-decoration:none}
.grille-2>.section-tete{margin-bottom:0}
.parcours dl{grid-template-columns:auto minmax(0,1fr)}
.parcours dd{min-width:0;overflow-wrap:anywhere}
.prose .comparateur{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.prose .comparateur{grid-template-columns:1fr}}