/* cours-pdf.fr: feuille unique. Brief docs/brief.md, corrections UI-UX du 2026-11-02.
   Aucun transform au survol (Design Guidelines 14.1). Aucun noir pur: les foncés viennent de l'encre. */

:root{
  --encre:#1F3B73;          /* liens, boutons, tuile du logo: 10,2:1 sur ivoire */
  --encre-f:#16203A;        /* texte: 15,1:1 sur ivoire */
  --encre-2:#3D4D70;        /* texte secondaire, mélange encre et papier */
  --papier:#FAF7EF;
  --papier-2:#F1ECDF;       /* surface secondaire */
  --blanc:#FFFDF8;          /* carte sur papier */
  --marge:#C8423B;          /* accent seul: marge, trait, focus. Jamais du texte (4,56:1) */
  --seyes:#B9C8E6;          /* réglure décorative seulement (1,57:1) */
  --seyes-f:#8FA3CF;        /* ligne forte de la réglure (passe design du 2026-11-02) */
  --bord:#7D8AA8;           /* bord porteur de sens: 3,3:1 sur ivoire */
  --bord-l:#D9D2C1;         /* séparateur décoratif */
  --ok:#2E6B3F;
  --rad:10px;
  --f-txt:'Atkinson Hyperlegible Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-tit:'Fraunces',Georgia,'Times New Roman',serif;
  --f-cur:'Playwrite FR Trad',var(--f-txt);
  --w:1240px;
  --col:760px;              /* colonne de lecture unique (UI-UX GP-1 m2) */
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--encre-f);font:400 18px/1.6 var(--f-txt);overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:var(--encre);text-decoration-thickness:1px;text-underline-offset:3px}
@media (hover:hover){a:hover{text-decoration-thickness:2px}}
:focus-visible{outline:3px solid var(--marge);outline-offset:2px}
h1,h2,h3{font-family:var(--f-tit);font-weight:600;line-height:1.2;color:var(--encre-f);margin:0 0 .5em}
h1{font-size:clamp(30px,4.6vw,46px);letter-spacing:-.01em}
h2{font-size:clamp(24px,3vw,30px)}
h3{font-size:21px}
p{margin:0 0 1em}
.skip{position:absolute;left:8px;top:-60px;background:var(--encre);color:var(--papier);padding:10px 14px;border-radius:6px;z-index:10}
.skip:focus{top:8px}
main{display:block;min-height:50vh}
main:focus{outline:none}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.ic{width:1.1em;height:1.1em;vertical-align:-.18em;fill:currentColor;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cur{font-family:'Playwrite Surtitre',var(--f-cur);font-weight:400;font-size:24px;line-height:1.9;color:var(--encre)}
.muted{color:var(--encre-2)}
.small{font-size:16px}

/* En-tête: logo + 4 entrées en clair, jamais de burger. Sous 480 px, la nav passe en 2e ligne. */
.hd{background:var(--papier);border-bottom:1px solid var(--bord-l)}
.hd-in{max-width:var(--w);margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--encre-f);min-height:44px}
.logo-mark{width:36px;height:36px;flex:none}
.logo-type{display:inline-flex;align-items:baseline;gap:7px;font-size:24px;line-height:1}
.logo-a{font-family:var(--f-tit);font-weight:600;letter-spacing:-.01em}
.logo-m{width:2px;height:24px;background:var(--marge);display:inline-block;align-self:center}
.logo-b{font-family:var(--f-txt);font-weight:700;font-size:.72em;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--encre)}
.logo-sm .logo-mark{width:28px;height:28px}
.logo-sm .logo-type{font-size:20px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;text-decoration:none;color:var(--encre);font-weight:700;font-size:17px;white-space:nowrap}
@media (hover:hover){.nav a:hover{background:var(--papier-2)}}
.nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--marge)}
.nl-short{display:none}
@media (max-width:480px){
  .hd-in{padding:6px 12px}
  .nav{width:100%}
  .nav ul{flex-wrap:nowrap;justify-content:space-between;gap:0}
  .nav a{padding:0 6px;font-size:15px}
  .nl-long{display:none}.nl-short{display:inline}
}
@media (max-width:360px){.hd-in{padding:6px 8px}.nav a{padding:0 4px}}

/* Boutons */
.btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:6px 22px;border-radius:999px;border:2px solid var(--encre);background:var(--encre);color:var(--papier);font:700 17px/1.2 var(--f-txt);text-decoration:none;cursor:pointer}
@media (hover:hover){.btn:hover{background:var(--encre-f);border-color:var(--encre-f)}}
.btn:active{transform:translateY(1px)}
.btn-2{background:transparent;color:var(--encre)}
@media (hover:hover){.btn-2:hover{background:var(--papier-2);color:var(--encre-f)}}
.btn[disabled]{opacity:.6;cursor:progress}
.linklike{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;min-height:44px;font:inherit;color:var(--encre);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Ouverture de l'accueil: la réglure Seyès (texture unique du site) et la marge rouge.
   Pas en px entiers (anti-moiré); aucun texte posé sur les lignes: le contenu est sur un aplat. */
.ouv{position:relative;background:var(--papier);border-bottom:1px solid var(--bord-l)}
.ouv::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background-image:
    linear-gradient(to right,transparent 0,transparent 47px,var(--marge) 47px,var(--marge) 49px,transparent 49px),
    linear-gradient(to bottom,transparent 31px,var(--seyes-f) 31px,var(--seyes-f) 32px,transparent 32px),
    linear-gradient(to bottom,transparent 7px,var(--seyes) 7px,var(--seyes) 8px,transparent 8px);
  background-size:100% 100%,100% 32px,100% 8px}
@media (max-width:900px){.ouv::before{background-image:
    linear-gradient(to right,transparent 0,transparent 9px,var(--marge) 9px,var(--marge) 11px,transparent 11px),
    linear-gradient(to bottom,transparent 31px,var(--seyes-f) 31px,var(--seyes-f) 32px,transparent 32px),
    linear-gradient(to bottom,transparent 7px,var(--seyes) 7px,var(--seyes) 8px,transparent 8px)}}
.ouv-in{position:relative;max-width:var(--w);margin:0 auto;padding:40px 20px 48px 80px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-areas:"cur drop" "h1 drop" "pitch drop" ". drop";grid-template-rows:auto auto auto 1fr;column-gap:40px;align-items:start}
/* Aucun texte posé sur la réglure: chaque bloc de texte porte l'aplat ivoire. */
.ouv-cur,.ouv-h1,.ouv-pitch{justify-self:start}
.ouv-cur{grid-area:cur;margin:0;font-family:'Playwrite Surtitre',var(--f-cur);height:1.9em;overflow:hidden}
.ouv-h1{grid-area:h1;margin-bottom:.35em}
.ouv-pitch{grid-area:pitch}
.ouv-in > .ouv-act{grid-area:drop}
.ouv-pitch{font-size:19px;color:var(--encre-f);max-width:34em}
@media (max-width:900px){.ouv-in{display:flex;flex-direction:column;align-items:stretch;padding:24px 20px 32px 28px;gap:14px}.ouv-in > *{margin-top:0;margin-bottom:0}}
@media (max-width:480px){.ouv-in{padding:14px 14px 24px 22px}.ouv-pitch{font-size:17px}}

/* Zone de dépôt: double filet (extérieur porteur à 3:1, intérieur plus clair). */
.drop{position:relative;background:var(--blanc);border:2px solid var(--bord);border-radius:14px;padding:22px}
.drop::after{content:"";position:absolute;inset:6px;border:1px solid var(--seyes);border-radius:14px;pointer-events:none}
.drop.is-over{border-color:var(--encre);background:#F6F2E6}
.drop h2{font-size:24px;margin-bottom:.3em}
.drop-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:14px 0 6px}
.drop-hint{display:none;color:var(--encre-2)}
@media (pointer:fine){.drop-hint{display:inline}}
.drop-file{font-weight:700;word-break:break-all}
.drop-file:empty{margin:0}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop .field{margin-top:12px}
.drop-legal{font-size:14px;color:var(--encre-2);margin:12px 0 0}
.prog{height:8px;border-radius:99px;background:var(--papier-2);overflow:hidden;margin-top:12px}
.prog > span{display:block;height:100%;width:0;background:var(--encre)}

/* Champs */
.field{display:block;margin:0 0 16px}
.field > span{display:block;font-weight:700;margin-bottom:6px}
.field small{display:block;color:var(--encre-2);font-size:15px;margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{appearance:none;-webkit-appearance:none;width:100%;min-height:48px;padding:10px 12px;border:2px solid var(--bord);border-radius:8px;background:var(--blanc);color:var(--encre-f);font:400 18px/1.4 var(--f-txt)}
textarea{min-height:140px;resize:vertical}
select{background-image:linear-gradient(45deg,transparent 50%,var(--encre) 50%),linear-gradient(135deg,var(--encre) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
input:focus,select:focus,textarea:focus{border-color:var(--encre)}
.check{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;min-height:44px}
.check input{width:22px;height:22px;margin:3px 0 0;flex:none;accent-color:var(--encre)}
.radios{border:0;padding:0;margin:0 0 16px}
.radios legend{font-weight:700;margin-bottom:6px;padding:0}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Messages: texte en encre foncée, rouge en filet seulement (UI-UX). */
.msg{border:1px solid var(--bord);border-left:6px solid var(--encre);background:var(--blanc);border-radius:8px;padding:12px 16px;margin:0 0 18px}
.msg-err{border-left-color:var(--marge)}
.msg-ok{border-left-color:var(--ok)}
.msg:focus{outline:3px solid var(--marge)}

/* Sections et pages */
.sec{max-width:var(--w);margin:0 auto;padding:40px 20px}
.narrow{max-width:var(--col);margin:0 auto;padding:32px 20px 48px}
.prose h2{margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.4em}
.crumbs{font-size:16px;color:var(--encre-2);margin:0 0 12px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 6px}
.crumbs li{white-space:nowrap}

/* Étapes de l'accueil */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.steps li{min-width:0}
.st-vis{height:168px;margin:0 0 20px;border-radius:calc(var(--rad) - 4px);background:var(--papier-2);border:1px solid var(--bord-l);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.st-page{display:block;width:118px;height:140px;overflow:hidden;background:#fff;border:1px solid var(--bord-l);border-radius:3px;box-shadow:0 2px 0 var(--bord-l),4px 6px 0 -2px #fff,4px 6px 0 -1px var(--bord-l)}
.st-page img{display:block;width:100%;height:auto}
.st-badge{position:absolute;left:calc(50% + 40px);top:calc(50% + 34px);display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:99px;background:var(--encre);color:var(--papier)}
.st-badge svg{width:20px;height:20px}
.st-opts{display:flex;flex-direction:column;gap:8px;width:min(190px,80%)}
.st-opts{gap:4px}
.st-opt{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 0 0 24px;font-size:15px;font-weight:400;color:var(--encre-2)}
.st-opt.st-on{padding-left:0;font-weight:700;color:var(--encre)}
.st-opt.st-on::before{content:"\2713";width:16px;text-align:center;flex:none}
.st-share{display:flex;flex-direction:column;align-items:center;gap:8px}
.st-qr{display:block;width:112px;height:112px;image-rendering:pixelated;background:#fff;padding:5px;border:1px solid var(--bord-l)}
.st-link{font-size:15px;font-weight:700;color:var(--encre);letter-spacing:.01em}
@media (max-width:800px){.steps{grid-template-columns:minmax(0,1fr)}}

/* Liste de documents (archives, voisins, mes fichiers) */
.docs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.doc{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;background:var(--blanc);border:1px solid var(--bord-l);border-radius:var(--rad);padding:10px 14px 10px 10px}
@media (hover:hover){.doc:hover{border-color:var(--bord)}}
.doc-th{width:64px;height:84px;border-radius:4px;background:var(--papier-2);border-left:3px solid var(--marge);object-fit:cover;object-position:top}
.doc a{font-weight:700;text-decoration:none}
@media (hover:hover){.doc a:hover{text-decoration:underline}}
/* Toute la carte est cliquable (lien étiré, UI-UX GP-1 M5); les actions passent au-dessus. */
.doc > div > a:first-child::after{content:"";position:absolute;inset:0;border-radius:var(--rad)}
.doc-acts{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.btn-s{min-height:44px;padding:0 16px;font-size:16px}
.btn-s.is-done{border-color:var(--ok);color:var(--ok)}
/* Pictogramme « pile de pages » quand une période n'a pas d'aperçu (UI-UX GP-1 M3). */
.doc-th-pile{position:relative;background:var(--blanc);border:1px solid var(--bord);border-left:3px solid var(--marge);box-shadow:3px 3px 0 var(--papier-2),3px 3px 0 1px var(--bord-l)}
.vis{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--encre)}
.mf-hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:12px}
.mf-hd h1,.mf-hd p{margin:0}
.empty{text-align:center;background:var(--blanc);border:1px dashed var(--bord);border-radius:14px;padding:32px 20px}
.empty-pic{display:inline-flex;width:64px;height:64px;align-items:center;justify-content:center;border-radius:50%;background:var(--papier-2);color:var(--encre);font-size:30px;margin-bottom:8px}
.empty-t{font-family:var(--f-tit);font-weight:600;font-size:24px;margin-bottom:.3em}
.sec-find{padding-top:28px;padding-bottom:8px}
.sec-find .search{max-width:var(--col)}
.h-sm{font-size:21px;margin-top:1.2em}
.dp-given{font-size:16px;color:var(--encre-2)}
.doc-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:15px;color:var(--encre-2)}
.doc-meta span{white-space:nowrap}
.pills{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pills a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--bord);border-radius:999px;text-decoration:none;font-weight:700}
.pills a[aria-current="page"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}

/* Page document */
.dp{max-width:var(--w);margin:0 auto;padding:24px 20px 48px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px}
.dp-main{min-width:0}
.dp h1{font-size:clamp(26px,3.6vw,38px);overflow-wrap:anywhere}
.dp-meta{display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--encre-2);font-size:16px;margin:0 0 18px}
.dp-meta span{white-space:nowrap}
.dp-acts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.apercu{position:relative;background:var(--papier-2);border:1px solid var(--bord-l);border-radius:12px;padding:18px 18px 18px 30px}
.apercu::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:2px;background:var(--marge);opacity:.8}
.apercu ol{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.apercu img{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--bord-l);border-radius:4px}
.apercu-wait{padding:30px 10px;text-align:center;color:var(--encre-2)}
.dp-side{min-width:0}
.box{background:var(--blanc);border:1px solid var(--bord-l);border-radius:var(--rad);padding:16px 18px;margin:0 0 18px}
.box h2{font-size:20px}
.kv{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:16px}
.kv dt{color:var(--encre-2)}
.kv dd{margin:0;overflow-wrap:anywhere}
.share{display:flex;flex-wrap:wrap;gap:12px}
.share input{flex:1 1 100%;min-width:0;font-size:17px;font-weight:700;letter-spacing:.01em}
.qr-bloc{display:flex;flex-direction:column;align-items:center;gap:18px;margin:8px 0 4px}
.qr-bloc a:first-child{display:block;line-height:0}
.qr{display:block;width:160px;height:160px;image-rendering:pixelated;background:#fff;padding:8px;border:1px solid var(--bord-l)}
.linklike.is-done{color:var(--ok);text-decoration:none}
.linklike.is-done::before{content:"\2713\00a0"}
@media (max-width:1100px){.dp{grid-template-columns:minmax(0,1fr)}.dp-side{order:2}}

/* Pub: bande propre au site, marges fixes, libellé, hauteur réservée (UI/UX: une annonce ne
   touche jamais un CTA). Le script de la régie ne pose que son div. */
.pub{margin:56px 0;padding:10px 0 14px;border-top:1px solid var(--bord-l);border-bottom:1px solid var(--bord-l);text-align:center}
.pub-l{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);margin-bottom:8px}
.pub-s{display:flex;justify-content:center;min-height:280px}
.pub-s > div{flex:none;min-width:100%}
.pub[hidden]{display:none}
/* P100 suite (2026-10-30): sans annonce, la bande se VIDE (contenu, padding, filets) au lieu de se
   masquer; ses marges s'effondrent en une seule et gardent la distance avec les boutons voisins. */
.pub.is-empty{padding:0;border:0;min-height:0}
.pub.is-empty > *{display:none}

/* Tableau (mes fichiers) */
.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl th,.tbl td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--bord-l);vertical-align:top}
.tbl th{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-2)}
@media (max-width:640px){.tbl thead{display:none}.tbl tr{display:block;border-bottom:1px solid var(--bord-l);padding:8px 0}.tbl td{display:block;border:0;padding:2px 0}}

/* Pied */
.ft{border-top:1px solid var(--bord-l);background:var(--papier-2);margin-top:40px}
.ft-in{max-width:var(--w);margin:0 auto;padding:28px 20px 36px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px}
.ft-brand p{color:var(--encre-2);font-size:16px;margin-top:8px;max-width:30em}
.ft-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.ft-nav ul{list-style:none;margin:0;padding:0}
.ft-legal{grid-column:1/-1;margin:8px 0 0;padding-top:16px;border-top:1px solid var(--bord-l);font-size:15px;color:var(--encre-2)}
.ft-nav a,.ft-nav .linklike{display:inline-flex;align-items:center;min-height:44px;font-size:16px;text-decoration:none}
.ft-nav a:focus-visible,.ft-nav .linklike:focus-visible{text-decoration:underline}
@media (hover:hover){.ft-nav a:hover,.ft-nav .linklike:hover{text-decoration:underline}}
@media (max-width:700px){.ft-in{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.hd,.ft,.pub,.dp-acts,.skip,.dp-side{display:none}body{background:#fff}.dp{display:block}}

/* Un seul emplacement par vue sur la page document (UI-UX): colonne au-delà de 1100 px, sinon sous l'aperçu. */
.dp-pub-col{display:none;margin-top:56px}
@media (min-width:1101px){.dp-pub-col{display:block}.dp-pub-bas{display:none}}
.masked{-webkit-text-security:disc}
[hidden]{display:none!important}
.enc-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.drop input[type=file]:focus-visible + .btn{outline:3px solid var(--marge);outline-offset:2px}
@media (pointer:coarse){.crumbs a{display:inline-flex;align-items:center;min-height:44px}}
/* Brisure signée (.brk, Design Guidelines §16.1): encoche de 26 x 9 px dans l'angle bas droit du
   filet INTÉRIEUR, le filet extérieur (porteur, 3:1) reste entier et sert de témoin. Candidate à
   juger sur capture (UI-UX). Le filet intérieur garde l'encoche dans tous les états. */
.drop.brk::after{clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 26px) calc(100% - 9px),calc(100% - 26px) 100%,0 100%)}

/* Visionneuse (RUNBOOK lightbox): une seule déclaration de curseur, sur le voile (P-T); commandes
   en position fixe; html.lb-lock bloque le défilement de fond sans perdre la position. */
.lbz{display:block;border-radius:4px}
@media (hover:hover){.lbz:hover img{filter:brightness(.97)}}
.lb{position:fixed;inset:0;z-index:200;background:rgba(22,32,58,.94);display:flex;align-items:flex-start;justify-content:center;padding:32px 72px;overflow:auto;overscroll-behavior:contain;cursor:pointer}
.lb[hidden]{display:none}
html.lb-lock{overflow:hidden;touch-action:none}
.lb-img{max-width:min(1000px,100%);height:auto;margin:auto;background:#fff;border-radius:6px;cursor:inherit}
.lb-x,.lb-nav{appearance:none;-webkit-appearance:none;position:fixed;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid rgba(250,247,239,.35);background:rgba(22,32,58,.55);color:var(--papier);display:flex;align-items:center;justify-content:center;cursor:pointer;font:inherit}
@media (hover:hover){.lb-x:hover,.lb-nav:hover{background:rgba(250,247,239,.18)}}
.lb-x{top:16px;right:16px}
.lb-nav{top:50%;margin-top:-24px}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-nav[hidden]{display:none}
.lb-count{position:fixed;bottom:12px;left:0;right:0;text-align:center;color:var(--papier);font-size:15px;margin:0;pointer-events:none}
@media (max-width:640px){.lb{padding:64px 8px 48px}.lb-nav{top:auto;bottom:6px;margin-top:0}}

/* Mode classe: tout l'écran pour le QR code et le lien court. */
body.classe .hd,body.classe .ft{display:none}
.cl{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 24px 24px;text-align:center;background:var(--papier)}
.cl-t{font-family:var(--f-tit);font-weight:600;font-size:clamp(24px,4vw,44px);margin:0;max-width:22em}
.cl-qr{width:min(52vh,80vw);width:min(52svh,80vw);height:auto;image-rendering:pixelated;background:#fff;padding:12px;border:1px solid var(--bord-l)}
.cl-u{font-family:var(--f-txt);font-weight:700;font-size:clamp(28px,5vw,60px);letter-spacing:.02em;color:var(--encre);margin:0}
.short{white-space:nowrap}
.search{display:flex;gap:12px;margin:0 0 20px}
.search input{flex:1;min-width:0}
@media (max-width:480px){.search{flex-direction:column}}

.field > .share{display:flex;gap:8px;margin-bottom:0;font-weight:400}
::selection{background:var(--seyes);color:var(--encre-f);text-shadow:none}
.lb:focus{outline:none}
.lbz.no-ring:focus-visible{outline:none}
@media (max-width:360px){.nav a{font-size:14px}}
.tool{padding-top:24px;margin-top:24px;border-top:1px solid var(--bord-l)}
.tool h3{margin-bottom:8px}
.box > p.small + .tool{border-top:0;margin-top:8px;padding-top:0}
.crumbs li + li::before{content:"\203A";margin-right:6px;color:var(--bord)}
.msg-top{padding-top:16px}.msg-top .msg{margin:0}
.cmp-fail{display:block;font-size:15px;color:var(--encre-f);max-width:26em;margin:4px 0 8px}
/* Erreurs de formulaire (UI-UX GP-2 M8): bord marge, message en encre foncée sous le champ. */
[aria-invalid="true"]{border-color:var(--marge)!important;border-width:2px}
input[type=checkbox][aria-invalid="true"]{outline:2px solid var(--marge);outline-offset:2px}
.field-err{display:block;color:var(--encre-f);font-size:16px;font-weight:700;margin-top:6px;padding-left:10px;border-left:3px solid var(--marge)}
.radios.is-err{padding-left:12px;border-left:3px solid var(--marge)}
.check + .field-err,.field-err + .check{margin-top:4px}
#form-err ul{margin:6px 0 0;padding-left:1.2em}
#form-err p{margin:0}
#drop-more{display:none}
.drop.is-open #drop-more{display:block}
/* Chapeau de la page document: la description rédigée et relue (UI-UX GP-3 M11). */
.dp-lede{font-size:19px;color:var(--encre-f);max-width:38em;margin:-.2em 0 .8em}
/* GP-3 m10: actions côte à côte. m11: fil d'Ariane symétrique. m12: sections alignées sur la marge. */
.doc-acts .btn{flex:0 0 auto;white-space:nowrap}
.crumbs li + li::before{margin:0 6px 0 0}
@media (min-width:901px){.ouv ~ .sec{padding-left:80px}}
.doc-mf .doc-acts{grid-column:2;margin-top:0}
@media (max-width:480px){.doc-mf .doc-acts{grid-column:1 / -1}}

/* ==== Passe design du 2026-11-02 (owner: « effet cahier peu mis en valeur »; UI-UX: « on écrit
   SUR le cahier »). Ouverture calée sur la réglure Seyès: lignes fines tous les 8 px, forte tous
   les 32 px; le texte (encre foncée seulement) est posé sur les lignes, sans aplat. ==== */
.ouv-in{padding-top:32px;padding-bottom:32px}
.ouv-cur{line-height:64px;height:64px}
.ouv-h1{line-height:64px;margin:0 0 32px}
.ouv-pitch{line-height:32px;margin:0 0 32px;font-size:19px}
.ouv-find{margin:16px 0 0}
.ouv-find input{background:var(--blanc)}
@media (max-width:900px){.ouv-h1{line-height:40px;margin-bottom:16px}.ouv-cur{line-height:48px;height:48px}.ouv-in{gap:16px}}
@media (max-width:480px){.ouv-pitch{font-size:17px}}
/* Surtitre manuscrit: un seul par section, voix décorative (UI-UX). */
.sec-cur{margin:0;font-size:22px;line-height:1.9;color:var(--encre)}
.sec-more{margin-top:24px}
.find-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 40px}
@media (min-width:760px){.find-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.find-cols h3{font-size:19px;margin:8px 0 10px}
.pill-n{font-weight:400;color:var(--encre-2);margin-left:8px}
.pill-n::before{content:"·";margin-right:8px}
.pills a[aria-current="page"] .pill-n{color:inherit}
/* Grille de feuilles: vraie page 1 en 3:4, papier blanc, ombre de pile (pas de décalage ni de
   rotation). Toute la carte est cliquable. */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
@media (min-width:700px){.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;min-width:0}
.card-p{display:block;width:100%;height:auto;aspect-ratio:240/339;object-fit:contain;object-position:center;background:#fff;border:1px solid var(--bord-l);border-radius:3px;
  box-shadow:3px 3px 0 -1px var(--blanc),3px 3px 0 0 var(--bord-l),6px 6px 0 -1px var(--blanc),6px 6px 0 0 #E6E0D0}
.card-p-0{background:var(--blanc) repeating-linear-gradient(to bottom,transparent 0,transparent 15px,var(--seyes) 15px,var(--seyes) 16px)}
.card-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:14px;font-weight:700;line-height:1.35;text-decoration:none;color:var(--encre-f)}
.card-t::after{content:"";position:absolute;inset:0}
.card-t:focus-visible{outline:none}
.card:focus-within .card-p{outline:3px solid var(--marge);outline-offset:3px}
@media (hover:hover){.card:hover .card-p{border-color:var(--bord)}.card:hover .card-t{text-decoration:underline}}
.card-m{display:flex;flex-wrap:wrap;gap:4px 10px;margin:4px 0 0;font-size:15px;color:var(--encre-2)}
/* Étiquette de cahier d'écolier: en-tête des pages niveau et matière, une seule par page. */
.etiq{display:inline-block;min-width:min(100%,380px);margin:8px 0 12px;padding:16px 32px 14px;text-align:center;background:var(--blanc);
  border:2px solid var(--encre);border-radius:18px;box-shadow:inset 0 0 0 5px var(--blanc),inset 0 0 0 6px var(--encre)}
.etiq-t{margin:0;font-size:clamp(28px,4.4vw,42px)}
.etiq-n{margin:6px 0 0;font-weight:700;color:var(--encre-2)}
.lede{font-size:19px;color:var(--encre-f);max-width:38em}
/* Aperçu posé sur une page réglée: la réglure se voit entre les pages, marge rouge à gauche. */
.apercu{background-color:var(--papier);
  background-image:linear-gradient(to bottom,transparent 31px,var(--seyes-f) 31px,var(--seyes-f) 32px,transparent 32px),
    linear-gradient(to bottom,transparent 7px,var(--seyes) 7px,var(--seyes) 8px,transparent 8px);
  background-size:100% 32px,100% 8px}
.apercu img{box-shadow:0 1px 0 var(--bord-l),0 6px 18px rgba(22,32,58,.08)}
/* Cahier de la classe (site/cahier.php). */
.cards-ol{counter-reset:none}
.cahier .etiq{margin-top:0}
.cahier-share{max-width:420px;margin-top:40px}
.kl{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:8px}
.kl-i{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px 12px;align-items:center;background:var(--blanc);border:1px solid var(--bord-l);border-radius:var(--rad);padding:8px 10px}
.kl-n{font-family:var(--f-tit);font-weight:600;font-size:20px;color:var(--encre-2);text-align:center}
.kl-t a{font-weight:700;text-decoration:none}
@media (hover:hover){.kl-t a:hover{text-decoration:underline}}
.kl-w{display:block;font-size:15px;color:var(--encre-2)}
.kl-a{display:flex;gap:12px}
.kl-a .btn-s{min-width:44px;padding:0 10px}
@media (max-width:480px){.kl-i{grid-template-columns:28px minmax(0,1fr)}.kl-a{grid-column:1 / -1;justify-content:flex-end}}
/* UI-UX D2: la ligne fine passe sous la ligne de base (réglure descendue de 3 px), ligne forte
   plus marquée (c'est elle qui fait le Seyès). */
.ouv::before{background-position:0 0,0 3px,0 3px}
@media (max-width:900px){.ouv::before{background-position:0 0,0 3px,0 3px}}
/* d3: « Chercher » sur la ligne du champ, même à 320. */
.ouv-find{flex-direction:row}
.ouv-find .btn{flex:0 0 auto;padding:0 16px}
.h-more{font-size:19px;margin:28px 0 10px}
/* K-1: flèches verticales (chevron tourné, statique), boutons désactivés gardés en place,
   pastille sous le titre, titre en cible de 44 px, adresse du mode classe sans débordement. */
.kl-up .ic,.kl-down .ic{transform:rotate(90deg)}
.btn[disabled].btn-s{opacity:.35;cursor:default}
.kl-t a{display:inline-flex;align-items:center;min-height:44px}
.kl-v{display:flex;margin:-6px 0 4px;font-size:15px}
.cl-u{overflow-wrap:anywhere;font-size:clamp(20px,5vw,60px);max-width:100%}
@media (min-width:768px){.cahier-share{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t q" "s q" "s b";gap:8px 32px;align-items:start}
  .cahier-share h2{grid-area:t}.cahier-share .share{grid-area:s;align-self:start}.cahier-share p:first-of-type{grid-area:q;margin:0}.cahier-share p:last-of-type{grid-area:b;margin:0}}
/* n2: surtitre sur une ligne à 390. */
.sec-cur{text-wrap:balance}
@media (max-width:420px){.sec-cur{font-size:19px}}
.h-more{font-family:var(--f-tit);font-weight:600}
h2.h-more{font-size:21px}
/* R3: bouton Partager en haut de la page document, sous 1100 px seulement. */
.dp-share{display:none}
@media (max-width:1100px){.dp-share{display:inline-flex}}
/* r5: chaque segment de méta reste entier, séparateur rattaché au suivant. */
.card-m span,.doc-meta span{white-space:nowrap}

/* ==== Passe « respiration » (owner: « aérer un peu »; valeurs UI-UX du 2026-11-02). Échelle en
   multiples de 8, sections en multiples de 32 (pas Seyès). Polices, en-tête, ouverture et cibles
   de 44 px inchangées. ==== */
body{line-height:1.7}
p{margin:0 0 1.2em}
.prose li{margin-bottom:.6em}
.prose h2{margin-top:2em}
.prose > p,.prose li{max-width:38em}
.dp-lede,.ouv-pitch{max-width:34em}
/* Marges latérales du conteneur */
.wrap,.sec,.narrow,.dp,.hd-in,.ft-in{padding-left:24px;padding-right:24px}
@media (max-width:359px){.wrap,.sec,.narrow,.dp,.hd-in,.ft-in{padding-left:20px;padding-right:20px}}
@media (min-width:768px){.wrap,.sec,.narrow,.dp,.hd-in,.ft-in{padding-left:32px;padding-right:32px}}
/* Bloc d'ouverture: le bord droit suit les conteneurs; le gauche reste calé sur la marge rouge. */
.ouv-in{padding-right:24px}
@media (max-width:359px){.ouv-in{padding-right:20px}}
@media (min-width:768px){.ouv-in{padding-right:32px}}
/* Rythme des sections */
.sec,.narrow,.dp{padding-top:64px;padding-bottom:64px}
.ouv-in{padding-top:64px;padding-bottom:64px}
@media (min-width:768px){.sec,.narrow,.dp{padding-top:96px;padding-bottom:96px}.ouv-in{padding-top:96px;padding-bottom:96px}}
@media (min-width:901px){.ouv ~ .sec{padding-left:80px}}
.sec > h2,.sec h2{margin-bottom:24px}
@media (min-width:768px){.sec > h2,.sec h2{margin-bottom:32px}}
.sec-cur{margin-bottom:8px}
.sec-more{margin-top:32px}
/* Pied */
.ft-in{padding-top:48px;padding-bottom:64px;gap:32px}
/* Grilles: moins d'éléments par écran */
.cards{gap:40px 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:359px){.cards{grid-template-columns:minmax(0,1fr)}}
@media (min-width:700px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.cards{gap:56px 32px}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1440px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card-t{margin-top:12px}
.card-m{margin-top:4px}
.docs{gap:32px}
.doc{padding:24px}
/* Boîtes et actions */
.box,.drop,.msg{padding:24px}
@media (min-width:768px){.box,.drop,.msg{padding:32px}}
.box{margin-bottom:32px}
.dp-acts{gap:12px;margin-bottom:32px}
.doc-acts,.cl-a{gap:12px}
.cl-a{display:flex;flex-wrap:wrap;justify-content:center}
.dp-lede{margin-bottom:16px}

/* Recherche: extrait du texte du PDF, mots surlignés au feutre (2026-11-02). */
.docs-x .doc{align-items:start}
.doc-x{grid-column:2;margin:0;font-size:16px;line-height:1.6;color:var(--encre-2);max-width:var(--col);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
@media (max-width:699px){.doc-x{grid-column:1 / -1}}
mark{background:linear-gradient(transparent 12%,#F6E27A 12%,#F6E27A 88%,transparent 88%);color:var(--encre-f);padding:0 2px;border-radius:2px}
@media (forced-colors:active){mark{background:Mark;color:MarkText}}

/* Réglages: niveau et matière côte à côte dès 560 px, empilés en dessous (2026-11-02). */
.f-pair{display:grid;gap:0 24px}
@media (min-width:560px){.f-pair{grid-template-columns:1fr 1fr}}

/* Page cours: texte brut extrait du PDF, replié (Strategie-Globale + Ally, 2026-11-02). */
.dp-texte{margin:32px 0 0;border:1px solid var(--bord-l);border-radius:var(--rad);background:var(--blanc)}
.dp-texte summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:8px 24px;font-weight:700;cursor:pointer;color:var(--encre);list-style:none;border-radius:var(--rad)}
.dp-texte summary::-webkit-details-marker{display:none}
/* Chevron d'état (UI-UX t1): pivote à l'ouverture. Indicateur d'état, pas d'effet de survol. */
.dp-texte summary::after{content:"";flex:0 0 auto;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.dp-texte[open] summary::after{transform:rotate(45deg)}
@media (hover:hover){.dp-texte summary:hover{background:var(--papier-2)}}
.dp-texte[open] summary{border-radius:var(--rad) var(--rad) 0 0}
.dp-texte-f{margin:0;padding:0 24px 24px}
.dp-texte[open] summary{border-bottom:1px solid var(--bord-l)}
.dp-texte-b{padding:24px;white-space:pre-line;font-size:16px;line-height:1.7;max-width:var(--col);overflow-wrap:anywhere}
.dp-texte > p{margin:0;padding:0 24px 24px}
.dp-texte > p.muted + .dp-texte-f{margin-top:-8px}

/* Mes fichiers: « Niveau à indiquer » cliquable au-dessus du lien étendu de la carte. */
.mf-todo{margin:4px 0 0;font-size:15px}
.mf-lvl{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:underline}
@media (pointer:coarse){.mf-lvl{min-height:44px}}

/* Projeter en classe: consigne visible seulement à l'impression; feuille A4 à coller ou afficher
   (titre, QR de 11 cm, lien court lisible de loin). */
.cl-p{display:none}
@media print{
  body.classe .hd,body.classe .ft,body.classe .skip,.cl-a{display:none!important}
  .cl{min-height:auto;padding:0;background:#fff;gap:6mm}
  .cl-t{font-size:24pt;max-width:none}
  .cl-qr{width:110mm;height:110mm;padding:0;border:0}
  .cl-u{font-size:26pt;color:#000}
  .cl-p{display:block;font-size:13pt;color:#000;margin:0}
  @page{size:A4;margin:18mm}
}

/* Projeter en classe: page de projection, pas de lecture. La respiration ne s'y applique pas:
   tout doit tenir sans défiler à 1280x720 (vidéoprojecteur) et 320x568 (UI-UX c1). */
.cl{gap:8px;padding:12px 16px 16px}
.cl > p{margin:0}
.cl-t{line-height:1.2}
.cl-qr{width:min(46vh,80vw);width:min(46svh,80vw);padding:8px}
.cl-u{line-height:1.2}
@media (max-width:399px){.cl [data-fullscreen]{display:none!important}}

/* Recherche: filtres niveau et matière. Libellé visible; sous 700 px, une ligne défilante par
   rangée, fondu à droite pour montrer la suite (UI-UX, 2026-11-02). Ordinateur: retour à la ligne. */
.facet-l{margin:16px 0 8px;font-size:15px;color:var(--encre-2)}
@media (max-width:699px){
  .pills-x{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px 2px;
    -webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent)}
  .pills-x::-webkit-scrollbar{display:none}
  .pills-x li{flex:none;scroll-snap-align:start}
}
/* Un .sr absolu dans un conteneur à overflow non positionné échappe au rognage et élargit la page
   (UI-UX, 2026-11-02): les pilules et leurs rangées défilantes sont positionnées. */
.pills-x,.pills a{position:relative}

/* En-tête: loupe vers la recherche (UI-UX, 2026-11-02). Au-dessus de 480 px, après la dernière
   entrée de la nav; sous 480 px, à droite sur la ligne du logo. Aucun transform. */
.hd-in{justify-content:flex-start}
.hd-in .nav{margin-left:auto}
.hd-search{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:8px;color:var(--encre)}
.hd-search .ic{width:22px;height:22px}
@media (hover:hover){.hd-search:hover{background:var(--papier-2)}}
.hd-search[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--marge)}
/* Deux lignes (logo + loupe, puis nav pleine largeur) jusqu'à 759 px; une seule ligne au-delà.
   La bascule « S'inscrire » reste à 480 px (UI-UX, banc du 2026-11-02). */
@media (max-width:759px){
  .hd-search{order:1;margin-left:auto}
  .hd-in .nav{order:2;margin-left:0;width:100%}
  .nav ul{flex-wrap:nowrap;justify-content:space-between;gap:0}
}
@media (min-width:481px) and (max-width:759px){.nav a{padding:0 8px}}

/* Titre de groupe après une liste de cours (plan du site, archives): de l'air avant (owner, 2026-11-03). */
.docs + h2,.docs + .h-sm,.plan-l + h2,.cards + h2,.cards + h3,.cards + .h-sm{margin-top:1.6em}

.nw{white-space:nowrap}
@media (min-width:901px){.steps li{padding:32px}}
.doc-go{grid-template-columns:64px minmax(0,1fr) auto}
.doc-go > .ic{width:22px;height:22px;color:var(--encre)}
/* La méta suit la largeur de la CARTE, pas celle de l'écran (UI-UX): sous 260 px de carte, la matière
   se masque quand niveau et pages sont déjà là. */
.card{container-type:inline-size}
@container (max-width:260px){.card-m .card-s{display:none}}

/* Tranches d'aperçus (cp_apercu_pager): pastilles en haut, « Suite » ou fin de lecture en bas. */
.dp-h1-pg{font-weight:400;font-size:.6em;color:var(--encre-2);white-space:nowrap}
.pgr-haut{margin:0 0 16px}
.pgr-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0}
.apercu .pgr-l{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pgr-l a,.pgr-on{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--bord-l);background:var(--papier);color:var(--encre);font-weight:600;text-decoration:none}
.pgr-on{background:var(--encre);border-color:var(--encre);color:var(--papier)}
.pgr-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600}
@media (hover:hover){.pgr-l a:hover{border-color:var(--encre)}}
@media (max-width:520px){.pgr-bas .btn{width:100%}}
/* Un aperçu portrait ne dépasse pas l'écran (UI-UX: 951 px de haut à 1280 de large). */
.apercu img{width:100%;max-width:800px;height:auto;margin:0 auto}
/* Sous 400 px, un bouton d'envoi de formulaire prend la largeur de la colonne (UI-UX, 2026-11-03):
   « Envoyer le signalement » tient alors sur une ligne. Hors barre de recherche et formulaires en ligne. */
@media (max-width:400px){form:not(.search):not(.inline) button.btn[type=submit]{width:100%}}
/* Accueil: quatre derniers cours, 2 x 2 jusqu'à 1199 px puis une rangée de 4, jamais 3 + 1 (UI-UX). */
@media (min-width:1000px){.cards.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Numéros d'étape: grand chiffre léger (variante A, UI-UX 2026-11-03), aria-hidden: l'ordre est porté
   par le <ol>. #647AB2: 3,95:1 sur le papier, seuil du gros texte (3:1) tenu avec marge. */
.steps .st-h{display:flex;align-items:baseline;gap:14px}
.steps .st-h b{display:block;width:auto;height:auto;margin:0;border-radius:0;background:none;color:#647AB2;font-family:var(--f-tit);font-weight:400;font-size:56px;line-height:.9;font-variant-numeric:lining-nums}
.steps .st-h h3{margin:0 0 .5em}
@media (max-width:800px){@media (min-width:700px){.cards.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.cards.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}}