/* Charte « Livret » (choisie par Mohamed le 22/10/2026, refonte A) : couche graphique chargée après app.css ; tout est sous :root[data-skin="livret"].
   Le guide ECF devenu livret de travail : pages blanches sur un bureau bleu gris, intercalaires de couleur qui portent
   les codes, voix du guide en Source Serif 4, tout ce que l'app ajoute en Public Sans. Aucune ombre, angles de 2 px.
   La charte Manuel reste dans app.css (data-skin="manuel") : poser cette valeur dans js/theme.js pour y revenir. */

/* 1. Polices : Source Serif 4 (OFL 1.1), auto-hébergée ; Public Sans est déjà déclarée par app.css */
@font-face{font-family:"Source Serif 4";src:url(../assets/fonts/source-serif-4-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";src:url(../assets/fonts/source-serif-4-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";src:url(../assets/fonts/source-serif-4-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 2. Jetons, thème clair : bureau #DEE4EB, pages blanches, encre marine */
:root[data-skin="livret"]{
  --bg:#DEE4EB;--surface:#FFFFFF;--soft:#EEF2F6;--line:#A8B3C1;--line2:#687689;--ctl:#687689;
  --ink:#0B1F3A;--txt:#22324A;--muted:#4E5D73;
  --accent:#173B75;--accent-h:#0E2954;--accent-bg:#E2E9F5;--accent-t:#173B75;--on:#FFFFFF;
  --fill:#173B75;--fill-h:#0E2954;--on-fill:#FFFFFF;--focus:#6B2FA8;--focus-halo:#FFFFFF;
  --mark:#FFD84D;--mark-bg:#FFF4C2;--mark-on:#0B1F3A;
  --good:#0B6E50;--good-bg:#DFF0EA;--warn:#7A5200;--warn-bg:#FFF0C7;--bad:#B3261E;--bad-bg:#FAE6E4;--coral:#B3261E;--coral-bg:#FAE6E4;
  --ok:#0B6E50;--ok-on:#FFFFFF;--mid:#F2C230;--mid-on:#0B1F3A;--mid-line:#7A5200;--ko:#B3261E;--ko-on:#FFFFFF;
  --c1:#2E5BD8;--c1bg:#E5ECFC;--c2:#A8296A;--c2bg:#F7E4EE;--c3:#A14700;--c3bg:#FCE9DA;--c4:#3A6B1C;--c4bg:#E7F0E0;--on-cc:#FFFFFF;
  --side:#F7F9FB;--road:#D3D9E1;--curb:#A9B3C1;--logo-bg:#0B1F3A;--logo-ink:#0B1F3A;
  --show-bg:#DEE4EB;--show-card:#FFFFFF;--show-ink:#0B1F3A;--show-txt:#22324A;--show-muted:#4E5D73;--show-top:#0B1F3A;--show-ctl:#687689;
  --veil:rgba(11,31,58,.5);
  --font:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --hw:600;--hcase:none;--hls:-.01em;--r:2px;--rs:2px;--bw:1px;--tab:4px;--shadow:none;--glow:none;--glow2:none;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);--ease-sheet:cubic-bezier(.32,.72,0,1);
  /* signes des trois niveaux (coche, demi-disque, croix), peints par currentColor au travers d'un masque */
  --i-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
  --i-mid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.25' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3Cpath d='M12 3.75a8.25 8.25 0 0 1 0 16.5z'/%3E%3C/svg%3E");
  --i-ko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
  font-synthesis:none;color-scheme:light}

/* 3. Jetons, thème sombre : bureau de nuit, pages #1A2641, aucun filet blanc */
:root[data-skin="livret"][data-theme="dark"]{
  --bg:#0A1220;--surface:#1A2641;--soft:#22304D;--line:#33456A;--line2:#7587A7;--ctl:#7587A7;
  --ink:#F1F4F9;--txt:#D0D8E5;--muted:#9DABC1;
  --accent:#C3D2EF;--accent-h:#DDE6F7;--accent-bg:#22314F;--accent-t:#C3D2EF;--on:#0B1F3A;
  --fill:#2C4F8F;--fill-h:#24457F;--on-fill:#FFFFFF;--focus:#C9A9F5;--focus-halo:#0A1220;
  --mark:#FFD84D;--mark-bg:#3A3212;--mark-on:#0B1322;
  --good:#5FD0A8;--good-bg:#0F2F27;--warn:#F4C861;--warn-bg:#352B10;--bad:#FF8A80;--bad-bg:#3A1B1B;--coral:#FF8A80;--coral-bg:#3A1B1B;
  --ok:#4DBA94;--ok-on:#061811;--mid:#E8BB3A;--mid-on:#0B1322;--mid-line:#E8BB3A;--ko:#F2766B;--ko-on:#1C0A08;
  --c1:#7F9CF2;--c1bg:#1A2550;--c2:#EC8DBA;--c2bg:#3A1A2E;--c3:#F3A464;--c3bg:#38230F;--c4:#A3CC7A;--c4bg:#1E2E14;--on-cc:#0B1322;
  --side:#111B2E;--road:#2A3852;--curb:#4A5B7A;--logo-bg:#2C4F8F;--logo-ink:#0B1F3A;
  --show-bg:#0A1220;--show-card:#FFFFFF;--show-ink:#0B1F3A;--show-txt:#22324A;--show-muted:#4E5D73;--show-top:#F1F4F9;--show-ctl:#7587A7;
  --veil:rgba(2,6,14,.66);
  color-scheme:dark}

/* 4. Base : bureau, encre, voix du guide pour les titres, liens soulignés, focus violet des cahiers d'école */
:root[data-skin="livret"] body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:16px;line-height:1.55}
:root[data-skin="livret"] :is(h1,h2,h3){font-family:var(--display);font-weight:600;text-transform:none}
:root[data-skin="livret"] :is(h2,h3){letter-spacing:0}
:root[data-skin="livret"] a{color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:3px}
:root[data-skin="livret"] :is(button,[role=radio],.esb){-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
:root[data-skin="livret"] :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--rs);box-shadow:0 0 0 8px var(--focus-halo)}
:root[data-skin="livret"] :is(h1,main,.sh-card)[tabindex="-1"]:focus,:root[data-skin="livret"] [tabindex="-1"]:focus:not(:focus-visible){outline:none;box-shadow:none}
/* dans les rangées qui défilent, l'anneau passe à l'intérieur : il ne serait pas visible autrement */
:root[data-skin="livret"] :is(.ftw .ptabs,.pcw .ptabs,.sh-parts,.fiches-tabs,.toc) :is(button,a):focus-visible{outline-offset:-3px;box-shadow:none}
:root[data-skin="livret"] ::selection{background:var(--mark);color:var(--mark-on)}
:root[data-skin="livret"] mark{background:var(--mark-bg);color:inherit;border-radius:0;box-shadow:inset 0 -2px 0 var(--mark)}

/* 5. Cadre : barre du haut opaque, barre du bas, barre latérale */
:root[data-skin="livret"] .top{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line)}
:root[data-skin="livret"] .brand b{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.02em}
:root[data-skin="livret"] .brand small{font-size:12px;color:var(--muted)}
:root[data-skin="livret"] .logo{border-radius:var(--rs);background:var(--logo-bg);box-shadow:none}
:root[data-skin="livret"] .side .logo,:root[data-skin="livret"] .brand img{border-radius:var(--rs)}
:root[data-skin="livret"] .ptitle{display:block;line-height:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font);font-weight:600;font-size:15px;color:var(--ink)}
:root[data-skin="livret"] .find svg,:root[data-skin="livret"] .icon-btn{border:2px solid var(--ctl);border-radius:var(--rs);background:var(--surface);color:var(--ink)}
:root[data-skin="livret"] .find svg{padding:10px}
@media (min-width:620px){
  :root[data-skin="livret"] .find{border:2px solid var(--ctl);border-radius:var(--rs);background:var(--surface);color:var(--muted)}
  :root[data-skin="livret"] .find svg{border:0;padding:0;background:none;color:var(--muted)}
}
:root[data-skin="livret"] .rprog{height:3px;bottom:-1px}
:root[data-skin="livret"] .bottom{background:var(--surface);border-top:1px solid var(--line)}
:root[data-skin="livret"] .bottom a{position:relative;font-size:12px;font-weight:600;color:var(--muted);border-radius:var(--rs)}
:root[data-skin="livret"] .bottom a svg{padding:3px 0;border-radius:0;background:none}
:root[data-skin="livret"] .bottom a.on{color:var(--accent)}
:root[data-skin="livret"] .bottom a.on svg{background:none}
:root[data-skin="livret"] .bottom a.on::before{content:"";position:absolute;top:0;left:50%;width:40px;height:3px;margin-left:-20px;background:var(--accent)}
@media (min-width:960px){
  :root[data-skin="livret"] .side{background:var(--side);border-right:1px solid var(--line)}
  :root[data-skin="livret"] .side .brand{border-bottom:1px solid var(--line)}
  :root[data-skin="livret"] .snav a{border-radius:var(--rs);color:var(--txt);font-weight:600}
  :root[data-skin="livret"] .snav a.on{background:var(--accent-bg);color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
  :root[data-skin="livret"] .sgrp{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
  :root[data-skin="livret"] .scomp a{border-radius:var(--rs)}
  :root[data-skin="livret"] .scomp a.on{background:var(--cb);box-shadow:inset 3px 0 0 var(--cc)}
  :root[data-skin="livret"] .scomp .badge{grid-row:auto;height:28px;min-width:40px;font-size:15px}
  :root[data-skin="livret"] .scomp b{font-weight:600}
  :root[data-skin="livret"] .stree{border-left-color:var(--line)}
  :root[data-skin="livret"] .stree a span{font-family:var(--display);font-weight:600}
  :root[data-skin="livret"] .stree a.on{background:var(--cb);color:var(--ink);font-weight:600}
  :root[data-skin="livret"] .sfoot{font-family:var(--display);font-style:italic;font-size:13px;line-height:1.45}
}
@media (hover:hover) and (pointer:fine){
  :root[data-skin="livret"] .snav a:hover,:root[data-skin="livret"] .scomp a:hover:not(.on),:root[data-skin="livret"] .stree a:hover:not(.on){background:var(--soft)}
}

/* 6. Typographie : six pas (13, 15, 16, 19, 23, 30), capitales supprimées, provenance lue à la police */
:root[data-skin="livret"] .h1{font-size:30px;line-height:1.15;letter-spacing:-.01em;margin:2px 0 10px}
:root[data-skin="livret"] .sec-t{font-size:23px;margin:34px 0 14px;letter-spacing:0}
:root[data-skin="livret"] .sec-t small{font-family:var(--font);font-size:15px;font-weight:400;color:var(--muted)}
:root[data-skin="livret"] .lead{font-size:16px;color:var(--txt);line-height:1.55}
:root[data-skin="livret"] :is(.kicker,.lbl,.gsig,.gsig.g,.gsig.a,.stp .lb,.stp-h small,.sfe b,.exi b,.rva,.who,.sub,.fnav small,.nexttab small,.sl-k,.phors,.trt .lb,.tra .lb,.st small,.gk,.sbn,.sub .sbn,.tra .sbn,.vd b,.face small,.col){text-transform:none;letter-spacing:0}
:root[data-skin="livret"] :is(.kicker,.lbl,.gsig,.rva,.sub,.fnav small,.phors,.trt .lb,.tra .lb,.st small){font-family:var(--font);font-size:13px;font-weight:600;color:var(--muted)}
:root[data-skin="livret"] .kicker::first-letter{text-transform:uppercase}
:root[data-skin="livret"] .lbl .opt-l{font-weight:400}
:root[data-skin="livret"] .gsig.g,:root[data-skin="livret"] .gsig.a{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px}
:root[data-skin="livret"] .sub .sbn,:root[data-skin="livret"] .tra .sbn,:root[data-skin="livret"] .sub .sbn.g{font-size:13px;font-weight:400;color:var(--muted)}
:root[data-skin="livret"] .who{font-size:13px;font-weight:600;background:var(--soft);color:var(--muted);border-radius:var(--rs);padding:1px 8px}
:root[data-skin="livret"] .gk{font-size:12px;font-weight:600;background:var(--soft);color:var(--muted);border-radius:var(--rs)}
:root[data-skin="livret"] .official{font-family:var(--display);font-style:italic;font-size:13px;line-height:1.5;color:var(--muted);max-width:72ch;margin-top:28px;padding-top:12px;border-top:1px solid var(--line)}
:root[data-skin="livret"] .crumbs{font-size:14px;margin:0 0 4px}
:root[data-skin="livret"] .crumbs a{color:var(--accent);font-weight:600}
:root[data-skin="livret"] .lnk{color:var(--accent);font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:3px}
:root[data-skin="livret"] .small{font-size:15px}
:root[data-skin="livret"] .note{font-size:13px}

/* 7. Badges : codes de compétence sur aplat, en serif, comme les onglets du guide */
:root[data-skin="livret"] .badge{border-radius:var(--rs);background:var(--cc);color:var(--on-cc);font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:0;height:30px;font-variant-numeric:tabular-nums}
:root[data-skin="livret"] .badge.lg{height:36px;min-width:48px;font-size:19px}

/* 8. Boutons, liens d'action, étiquettes */
:root[data-skin="livret"] .btn{border-radius:var(--rs);border:2px solid var(--fill);background:var(--fill);color:var(--on-fill);font-weight:600;font-size:16px}
:root[data-skin="livret"] .btn.alt{background:var(--surface);color:var(--ink);border-color:var(--ctl)}
:root[data-skin="livret"] .btn.soft{background:var(--accent-bg);color:var(--accent-t);border-color:var(--accent-bg)}
:root[data-skin="livret"] .btn.danger{background:var(--bad);border-color:var(--bad);color:var(--on-fill)}
:root[data-skin="livret"] .btn.alt.danger{background:var(--surface);color:var(--bad);border-color:var(--bad)}
:root[data-skin="livret"][data-theme="dark"] .btn.danger:not(.alt){background:var(--bad);border-color:var(--bad);color:var(--bg)}
@media (hover:hover) and (pointer:fine){
  :root[data-skin="livret"] .btn:hover{background:var(--fill-h);border-color:var(--fill-h)}
  :root[data-skin="livret"][data-theme="dark"] .btn:not(.alt):not(.soft):hover{background:var(--fill-h);border-color:var(--fill-h)}
  :root[data-skin="livret"] .btn.alt:hover{background:var(--soft);border-color:var(--ink);color:var(--ink)}
  :root[data-skin="livret"] .btn.soft:hover{background:var(--accent-bg);border-color:var(--accent)}
  :root[data-skin="livret"] .btn.alt.danger:hover{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
}
:root[data-skin="livret"] .lk{border-radius:var(--rs);background:var(--accent-bg);color:var(--accent-t);font-weight:600}
:root[data-skin="livret"] .tag{font-family:var(--font);letter-spacing:0;font-size:13px;font-weight:600;border-radius:var(--rs);padding:2px 8px}
:root[data-skin="livret"] .tag.ap-a,:root[data-skin="livret"] .tag.ap-c,:root[data-skin="livret"] .tag.ap-n{gap:6px}
:root[data-skin="livret"] .tag.ap-a::before,:root[data-skin="livret"] .tag.ap-c::before,:root[data-skin="livret"] .tag.ap-n::before{content:"";box-sizing:border-box;flex:none;width:12px;height:12px;border:1.5px solid currentColor}
:root[data-skin="livret"] .tag.ap-a::before{background:currentColor}
:root[data-skin="livret"] .tag.ap-c::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
:root[data-skin="livret"] .tag.ap-n::before{background:linear-gradient(45deg,transparent calc(50% - .9px),currentColor calc(50% - .9px) calc(50% + .9px),transparent calc(50% + .9px))}

/* 9. Pages : surfaces blanches à filet de 1 px, posées sur le bureau */
:root[data-skin="livret"] :is(.panel,.card,.qcard,.score,.art,.cr-livre,.entry,.aei,.psum,.sub-i,.act,.cr-hit,.gd){border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
:root[data-skin="livret"] .ix>li{border:1px solid var(--line);border-radius:var(--r)}
:root[data-skin="livret"] .card{padding:14px 18px}
:root[data-skin="livret"] .panel.todo{border-color:var(--warn)}
:root[data-skin="livret"] .h{gap:10px;font-family:var(--font);font-size:16px;font-weight:600;margin-bottom:8px}
:root[data-skin="livret"] .h .tx{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.25;color:var(--ink)}
:root[data-skin="livret"] .h .col{font-family:var(--font);font-size:13px;font-weight:400}
:root[data-skin="livret"] .h .r,:root[data-skin="livret"] .cnt{font-family:var(--font);font-size:13px;font-variant-numeric:tabular-nums}
:root[data-skin="livret"] .ic{width:22px;height:22px;background:none;color:var(--ink);border-radius:0;align-self:flex-start;margin-top:2px}
:root[data-skin="livret"] .ic svg{width:20px;height:20px}
:root[data-skin="livret"] .rk .ic{background:none;color:var(--bad)}
:root[data-skin="livret"] .ok .ic{background:none;color:var(--good)}
:root[data-skin="livret"] .card.pgf .ic{background:none;color:var(--warn)}
:root[data-skin="livret"] .h{align-items:baseline}
:root[data-skin="livret"] summary.h{flex-wrap:wrap;align-content:center}
:root[data-skin="livret"] .h .ic{align-self:auto;margin-top:0;position:relative;top:4px}
:root[data-skin="livret"] .cv{color:var(--ink)}
:root[data-skin="livret"] section.card>h2.h{margin-top:2px}
:root[data-skin="livret"] .card>.sub{font-family:var(--font);font-size:15px;font-weight:600;color:var(--ink)}
:root[data-skin="livret"] .card li::marker{color:var(--line2)}
:root[data-skin="livret"] :is(.ess,.card) ol>li::before{background:var(--cb,var(--accent-bg));color:var(--cc,var(--accent-t));font-family:var(--display);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
:root[data-skin="livret"] .card.pro{border-left:4px solid var(--accent);padding-left:15px}
:root[data-skin="livret"] .kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--rs)}
:root[data-skin="livret"] .kpi b{font-family:var(--display);font-weight:600;font-size:23px;color:var(--cc,var(--ink));font-variant-numeric:tabular-nums}
:root[data-skin="livret"] .kpi span{display:block;line-height:1.45}
:root[data-skin="livret"] .tr2{background:var(--soft);border-radius:var(--rs)}
:root[data-skin="livret"] .tr2 b{font-weight:600;color:var(--ink)}
:root[data-skin="livret"] .dot{font-family:var(--display);font-weight:600;font-size:15px}
:root[data-skin="livret"] .st small{font-size:13px;color:var(--muted)}
:root[data-skin="livret"] .st em{color:var(--ink);font-weight:600}
:root[data-skin="livret"] .vd{background:var(--soft);border-radius:var(--rs)}
:root[data-skin="livret"] .vd b{font-size:13px;font-weight:600}
:root[data-skin="livret"] .tr{border-radius:var(--rs)}
:root[data-skin="livret"] .cap{font-size:14px;color:var(--muted)}
:root[data-skin="livret"] .bar,:root[data-skin="livret"] .aid{background:var(--line);border-radius:0}
:root[data-skin="livret"] .bar i,:root[data-skin="livret"] .aid i{border-radius:0}

/* 10. Accueil : la première page du livret, sommaire en chiffres, quatre intercalaires */
:root[data-skin="livret"] :is(.fhero,.chero,.tile,.resume){position:relative;overflow:visible;margin-top:30px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
:root[data-skin="livret"] :is(.fhero,.chero,.tile,.resume)::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;bottom:auto;width:auto;height:5px;background:var(--cc,var(--accent));border-radius:0}
:root[data-skin="livret"] :is(.fhero .badge.lg,.tile .th .badge,.chero .th .badge,.resume .kicker .badge){position:absolute;top:-26px;left:14px;float:none;height:26px;min-width:0;margin:0;padding:0 11px;border-radius:3px 3px 0 0;font:600 15px/26px var(--display);letter-spacing:0}
/* la première page du livret : son badge devient l'onglet ; sans badge (premier lancement), le filet haut suffit */
:root[data-skin="livret"] .resume:not(:has(.badge)){margin-top:12px}
:root[data-skin="livret"] .resume{padding:20px 20px 18px;gap:10px}
:root[data-skin="livret"] .resume h2{font-size:23px;line-height:1.25}
:root[data-skin="livret"] .resume p{color:var(--txt)}
:root[data-skin="livret"] .resume .row{align-items:center;gap:6px 18px}
:root[data-skin="livret"] .kpis{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:flex-start;align-items:baseline}
:root[data-skin="livret"] .kpi2{display:flex;flex-direction:row;justify-content:flex-start;align-items:baseline;gap:8px;padding:0;background:none;border:0;border-radius:0}
:root[data-skin="livret"] .kpi2 b{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
:root[data-skin="livret"] .kpi2 span{font-size:15px;color:var(--muted)}
@media (max-width:819px){:root[data-skin="livret"] .homep .kpis{margin-top:22px;padding-top:12px;border-top:1px solid var(--line)}}
@media (min-width:820px){
  :root[data-skin="livret"] .dtop{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;align-items:start}
  :root[data-skin="livret"] .dtop .kpis{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;margin-top:12px;border-top:1px solid var(--line)}
  :root[data-skin="livret"] .dtop:has(.resume .badge) .kpis{margin-top:30px}
  :root[data-skin="livret"] .dtop .kpi2{padding:12px 2px;border-bottom:1px solid var(--line)}
  :root[data-skin="livret"] .dtop .kpi2 b{min-width:2.2em}
}
:root[data-skin="livret"] .tiles{gap:4px 16px}
:root[data-skin="livret"] .tile{padding:18px 18px 16px;gap:8px;min-height:0}
:root[data-skin="livret"] .tile .th{min-height:0}
:root[data-skin="livret"] .tile .th small{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
:root[data-skin="livret"] .tile h3{font-size:19px;line-height:1.3}
:root[data-skin="livret"] .tile .vb{display:block;color:var(--cc)}
:root[data-skin="livret"] .tile p{font-size:14px;color:var(--muted)}
@media (max-width:619px){
  :root[data-skin="livret"] .tiles .tile:nth-child(2) .th .badge{left:calc(14px + (100% - 70px) / 3)}
  :root[data-skin="livret"] .tiles .tile:nth-child(3) .th .badge{left:calc(14px + (100% - 70px) * 2 / 3)}
  :root[data-skin="livret"] .tiles .tile:nth-child(4) .th .badge{left:calc(100% - 56px)}
}
:root[data-skin="livret"] .act{gap:4px;font-weight:600;color:var(--ink);min-height:96px}
:root[data-skin="livret"] .act .ai{width:auto;height:auto;background:none;color:var(--accent);margin-bottom:6px;border-radius:0;justify-content:start}
:root[data-skin="livret"] .act .ai svg{width:22px;height:22px}
:root[data-skin="livret"] .act small{font-weight:400;font-size:14px;color:var(--muted)}
:root[data-skin="livret"] .act.hot{border-color:var(--fill);box-shadow:inset 0 0 0 1px var(--fill)}
:root[data-skin="livret"][data-theme="dark"] .act.hot{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
@media (hover:hover) and (pointer:fine){
  :root[data-skin="livret"] :is(.tile,.act,.sub-i,.fnav a):hover{box-shadow:none}
  :root[data-skin="livret"] .act:hover{border-color:var(--accent)}
}
:root[data-skin="livret"] .miss{border-radius:var(--rs);border-left:3px solid var(--warn)}

/* 11. Compétences : rangées de sommaire, codes en serif */
:root[data-skin="livret"] .cchips button{border:2px solid var(--ctl);border-radius:var(--rs);font-size:14px;font-weight:600}
:root[data-skin="livret"] .cchips button.on{border-color:var(--cc);background:var(--cb);box-shadow:inset 0 -3px 0 var(--cc)}
:root[data-skin="livret"] .chead{border-bottom:3px solid var(--cc);box-shadow:none}
:root[data-skin="livret"] .chead h2{font-size:23px;line-height:1.25}
:root[data-skin="livret"] .chead small{font-size:14px;font-weight:400}
:root[data-skin="livret"] .chero{padding:20px}
:root[data-skin="livret"] .chero .th small{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
:root[data-skin="livret"] .chero h1{font-size:30px;letter-spacing:-.01em;margin:4px 0 8px}
:root[data-skin="livret"] .sub-i{min-height:64px;padding:10px 14px}
:root[data-skin="livret"] .sub-i .code,:root[data-skin="livret"] .aeh .code{border-radius:var(--rs);background:var(--cb);color:var(--cc);font-family:var(--display);font-weight:600;font-size:16px}
:root[data-skin="livret"] .sub-i b{font-weight:600}
:root[data-skin="livret"] .sub-i .chev{color:var(--ink)}
:root[data-skin="livret"] .sub-i.bil{border-style:dashed;border-color:var(--line2)}
:root[data-skin="livret"] .sheet .sub-i.cur{border-color:var(--cc);box-shadow:inset 0 0 0 1px var(--cc)}
@media (hover:hover) and (pointer:fine){:root[data-skin="livret"] .sub-i:hover{border-color:var(--cc)}}

/* 12. Fiche : en-tête de page à intercalaire, compact ; vues et boîte en segments pleins, parties en onglets soulignés */
:root[data-skin="livret"] .pick{border:2px solid var(--ctl);border-radius:var(--rs);font-weight:600}
:root[data-skin="livret"] .pick svg{color:var(--ink)}
:root[data-skin="livret"] .fhero{container-type:inline-size;padding:14px 18px 14px;margin-bottom:12px}
:root[data-skin="livret"] .ttl{display:block}
:root[data-skin="livret"] .ttl h1{font-size:22px;line-height:1.2;letter-spacing:0;margin:0}
@media (min-width:960px){:root[data-skin="livret"] .ttl h1{font-size:30px;line-height:1.15;letter-spacing:-.01em}}
:root[data-skin="livret"] .fmeta{font-size:14px;margin-top:4px}
:root[data-skin="livret"] .fmeta .cvb{font-weight:600}
:root[data-skin="livret"] .lvn{font-size:13px}
:root[data-skin="livret"] .fhero .s{font-size:15px;line-height:1.4;margin:8px 0 0;color:var(--txt)}
:root[data-skin="livret"] .seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;gap:0;padding:0;background:var(--surface);border:2px solid var(--ctl);border-radius:var(--rs)}
:root[data-skin="livret"] .seg button{min-height:44px;padding:2px 10px;border-radius:0;font-size:15px;font-weight:600;color:var(--txt);background:transparent;line-height:1.15;text-wrap:balance}
:root[data-skin="livret"] .seg button+button{border-left:1px solid var(--line)}
:root[data-skin="livret"] .seg button.on{background:var(--fill);color:var(--on-fill);box-shadow:none}
:root[data-skin="livret"] .seg.box button.on{color:var(--on-fill)}
:root[data-skin="livret"] .seg button.on+button{border-left-color:var(--fill)}
:root[data-skin="livret"] .fhero .seg.box{display:grid;grid-auto-flow:column;grid-auto-columns:auto;max-width:none;margin:0;padding:0;gap:0;background:var(--surface);border:2px solid var(--ctl);border-radius:var(--rs)}
:root[data-skin="livret"] .fhero .seg.box button{min-height:44px;padding:2px 12px;font-size:14px;color:var(--txt)}
:root[data-skin="livret"] .fhero .seg.box button+button{border-left:1px solid var(--line)}
:root[data-skin="livret"] .fhero .seg.box button.on{background:var(--fill);color:var(--on-fill);box-shadow:none;font-weight:600}
/* sombre : la case choisie passe en aplat clair à encre marine (environ 11:1), nettement détachée de la page
   et distincte du bouton principal bleu comme du focus violet */
:root[data-skin="livret"][data-theme="dark"] :is(.seg:not(.pseg) button.on,.fhero .seg.box button.on){background:var(--accent);color:var(--on);box-shadow:none}
:root[data-skin="livret"][data-theme="dark"] :is(.seg:not(.pseg) button.on+button,.fhero .seg.box button.on+button){border-left-color:var(--accent)}
:root[data-skin="livret"] .fbar{margin-top:12px;gap:8px}
:root[data-skin="livret"] .fbar .seg{margin:0}
:root[data-skin="livret"] .boxw{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin-top:10px}
:root[data-skin="livret"] .boxw .kicker{flex:none;margin:0}
:root[data-skin="livret"] .boxw .seg.box{flex:0 1 auto;min-width:0}
:root[data-skin="livret"] .ftw{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;margin:12px -18px -14px;padding:2px 18px 0;border-top:1px solid var(--line)}
:root[data-skin="livret"] .ftw .kicker{flex:none;margin:0;padding:5px 0;line-height:20px}
:root[data-skin="livret"] .ftw .ptabs{flex:1 0 auto;max-width:calc(100% + 20px);flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -10px}
:root[data-skin="livret"] .ftw .ptabs button{scroll-snap-align:start;font-size:15px}
:root[data-skin="livret"] .ftw .ptabs button.on{font-weight:600}
:root[data-skin="livret"] .ftw .pts{flex-basis:100%;margin:4px 0 12px;font-size:14px;line-height:1.4}
:root[data-skin="livret"] .ftw .phors{flex-basis:100%;margin:6px 0 0}
:root[data-skin="livret"] .ftw .fiches-tabs:not(.ptabs){flex:1 1 auto;max-width:calc(100% + 20px)}
:root[data-skin="livret"] .fiches-tabs a{border:2px solid var(--ctl);border-radius:var(--rs);font-weight:600}
:root[data-skin="livret"] .fiches-tabs a.on{background:var(--cc);border-color:var(--cc);color:var(--on-cc)}
:root[data-skin="livret"] .ftw .fiches-tabs a{border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--muted)}
:root[data-skin="livret"] .ftw .fiches-tabs a.on{background:transparent;border-bottom-color:var(--cc);color:var(--ink)}
:root[data-skin="livret"] :is(.ftw,.pcw) .ptabs button{color:var(--muted);border-bottom-width:3px}
:root[data-skin="livret"] :is(.ftw,.pcw) .ptabs button.on{color:var(--ink);border-bottom-color:var(--cc)}
@media (hover:hover) and (pointer:fine){:root[data-skin="livret"] :is(.ftw,.pcw) .ptabs button:hover{color:var(--ink)}}
@media (max-width:619px){
  :root[data-skin="livret"] .fhero{padding:12px 14px 12px}
  :root[data-skin="livret"] .ttl .badge.lg{float:none;margin:0;height:26px}
  :root[data-skin="livret"] .ttl h1{font-size:22px;line-height:1.2}
  :root[data-skin="livret"] .fmeta{font-size:14px}
  :root[data-skin="livret"] .fhero .s{margin-top:6px}
  /* Montrer et Évaluer gardent leur libellé sous le pictogramme (12 px, comme la barre du bas) sur la même rangée de 48 px ;
     Montrer plein, Évaluer en contour : sur téléphone seulement, comme validé le 21/10 (V23) */
  :root[data-skin="livret"] .fbar{grid-auto-columns:58px;margin-top:10px}
  :root[data-skin="livret"] .fact .btn{width:58px;height:48px;min-height:48px;padding:0;gap:2px;flex-direction:column;font-size:12px;line-height:1.1}
  :root[data-skin="livret"] .fact .btn svg{width:20px;height:20px}
  :root[data-skin="livret"] .fact .btn[data-show],:root[data-skin="livret"] .fact .btn[data-show]:hover,:root[data-skin="livret"][data-theme="dark"] .fact .btn[data-show],:root[data-skin="livret"][data-theme="dark"] .fact .btn[data-show]:hover{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
  :root[data-skin="livret"] .fact a.btn,:root[data-skin="livret"] .fact a.btn:hover,:root[data-skin="livret"][data-theme="dark"] .fact a.btn:not(.alt),:root[data-skin="livret"][data-theme="dark"] .fact a.btn:not(.alt):hover{background:var(--surface);border-color:var(--ctl);color:var(--ink)}
  :root[data-skin="livret"] .boxw{margin-top:8px}
  :root[data-skin="livret"] .ftw{margin:10px -14px -12px;padding:2px 14px 0}
  :root[data-skin="livret"] .ftw .pts{margin-bottom:10px}
}
/* sous 300 px de page (téléphone de 320 px) : segment sur toute la largeur, Montrer et Évaluer dessous avec leur libellé */
@container (max-width:300px){
  :root[data-skin="livret"] .fbar{grid-template-columns:1fr 1fr;grid-auto-flow:row;grid-auto-columns:auto}
  :root[data-skin="livret"] .fbar .seg{grid-column:1/-1}
  :root[data-skin="livret"] .fact .btn{width:auto;flex-direction:row;gap:8px;padding:0 12px;font-size:15px;line-height:1.2}
  :root[data-skin="livret"] .boxw{flex-wrap:wrap}
  :root[data-skin="livret"] .boxw .seg.box{flex:1 1 100%}
  :root[data-skin="livret"] .ftw .ptabs button{padding:4px 7px;font-size:14px}
  :root[data-skin="livret"] .ftw .ptabs{margin:0 -7px;max-width:calc(100% + 14px)}
}
/* onglets de la Leçon : soulignés de 3 px, collants, sur le bureau opaque */
:root[data-skin="livret"] .ftabs{gap:0;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:0;padding-bottom:0;border-bottom:1px solid var(--line)}
:root[data-skin="livret"] .ftabs button{min-height:48px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-size:14px;font-weight:600;box-shadow:none;margin-bottom:-1px}
:root[data-skin="livret"] .ftabs button.on{background:transparent;border-bottom-color:var(--cc,var(--accent));color:var(--ink);box-shadow:none}
:root[data-skin="livret"][data-theme="dark"] .ftabs button.on{background:transparent;border-color:transparent;border-bottom-color:var(--cc,var(--accent))}
@media (hover:hover) and (pointer:fine){:root[data-skin="livret"] .ftabs button:not(.on):hover{color:var(--ink);border-bottom-color:var(--line)}}
:root[data-skin="livret"] .ftabs.three button{font-size:14px;line-height:1.2}
:root[data-skin="livret"] .ftabs+.tpane{margin-top:12px}
/* COMMENT : parties reprises en onglets soulignés */
:root[data-skin="livret"] .pcw{border-bottom:1px solid var(--line)}
:root[data-skin="livret"] .pcw .ptabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
:root[data-skin="livret"] .pcw .ptabs button{scroll-snap-align:start;font-size:15px}
@media (max-width:359px){:root[data-skin="livret"] .pcw .ptabs{margin:0 -7px}:root[data-skin="livret"] .pcw .ptabs button{padding:4px 7px;font-size:14px}}
/* Ensuite, navigation de fiche */
:root[data-skin="livret"] .nexttab{border-radius:var(--rs);border:2px solid var(--fill);background:var(--fill);color:var(--on-fill);font-weight:600}
:root[data-skin="livret"] .nexttab small{font-size:13px;font-weight:600;opacity:1}
:root[data-skin="livret"] .nexttab b{font-family:var(--display);font-weight:600;font-size:19px}
@media (hover:hover) and (pointer:fine){:root[data-skin="livret"] .nexttab:hover{background:var(--fill-h);border-color:var(--fill-h)}}
:root[data-skin="livret"] .fnav{border-top:1px solid var(--line)}
:root[data-skin="livret"] .fnav a,:root[data-skin="livret"] .fnav span{border:2px solid var(--ctl);border-radius:var(--rs);background:var(--surface);font-weight:600}
:root[data-skin="livret"] .fnav small{font-size:13px}
@media (hover:hover) and (pointer:fine){:root[data-skin="livret"] .fnav a:hover{border-color:var(--ink)}}
/* le texte du guide : citations en serif italique, libellé droit dessus ; volets repliés en serif */
:root[data-skin="livret"] :is(.sfe,.exi){display:block;margin:8px 0 2px;padding:0 0 0 12px;border-left:2px solid var(--line2);font-family:var(--display);font-style:italic;font-weight:400;font-size:17px;line-height:1.45;color:var(--ink)}
:root[data-skin="livret"] :is(.sfe,.exi) b{display:block;margin:0 0 1px;font-family:var(--font);font-style:normal;font-size:13px;font-weight:600;color:var(--muted)}
:root[data-skin="livret"] .gd>summary{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
:root[data-skin="livret"] .gd>summary::before{color:var(--ink)}
:root[data-skin="livret"] .gd.gv>summary small{font-family:var(--font);font-weight:400}
:root[data-skin="livret"] .card .gd.gv{border:1px solid var(--line);border-radius:var(--rs)}
:root[data-skin="livret"] .md{line-height:1.6}
:root[data-skin="livret"] .md i{font-family:var(--display);font-style:italic;font-size:1.06em;color:var(--txt)}
:root[data-skin="livret"] .md blockquote{background:var(--soft);border-left:2px solid var(--line2);border-radius:0}
:root[data-skin="livret"] .mdh{font-family:var(--display);font-weight:600;font-size:16px}
:root[data-skin="livret"] .mdt th,:root[data-skin="livret"] .mdt td{border-color:var(--line)}
:root[data-skin="livret"] .card.guide .md{border-left:2px solid var(--line2);background:var(--soft)}
:root[data-skin="livret"] .gtx{background:var(--soft);border-left:2px solid var(--line2);border-radius:0}
:root[data-skin="livret"] .trt{font-weight:600}
:root[data-skin="livret"] .trt .lb,:root[data-skin="livret"] .tra .lb{display:block;margin:0 0 2px;font:600 13px/1.3 var(--font)}
:root[data-skin="livret"] .rv blockquote{background:var(--soft);border-left:2px solid var(--line2);border-radius:0;font-family:var(--display);font-style:italic;font-size:17px}
:root[data-skin="livret"] .lk.rvapp{line-height:1.25}
:root[data-skin="livret"] .rva{font-size:13px;font-weight:600;color:var(--muted)}
:root[data-skin="livret"] .lk.rvapp .rva{color:var(--muted)}
:root[data-skin="livret"] .evp{border-radius:var(--rs);background:var(--soft);color:var(--muted);font-size:12px;letter-spacing:0}
:root[data-skin="livret"] .alist a{border-radius:var(--rs);background:var(--accent-bg);color:var(--accent-t);font-weight:600}
:root[data-skin="livret"] .ci{border-bottom-color:var(--line)}
:root[data-skin="livret"] .bx{border:2px solid var(--ctl);border-radius:var(--rs)}
:root[data-skin="livret"] .ci.on .bx{background:var(--good-bg);border-color:var(--good);color:var(--ink)}
:root[data-skin="livret"] .done{color:var(--good)}
:root[data-skin="livret"] .svg .lb{fill:var(--muted)}

/* 13. Pédagogie : P E D A R C en onglets posés sur la carte d'étape, aide en jauge à cinq crans */
:root[data-skin="livret"] .ftabs.steps{margin-bottom:0}
:root[data-skin="livret"] .ftabs.steps button{gap:1px;padding:4px 2px;color:var(--muted);background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0}
:root[data-skin="livret"] .ftabs.steps button:first-child{border-style:solid;border-color:transparent;margin-right:6px;box-shadow:inset -1px 0 0 var(--line)}
:root[data-skin="livret"] .ftabs.steps span{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.1}
:root[data-skin="livret"] .ftabs.steps button:first-child span{font-style:italic;font-weight:400}
:root[data-skin="livret"] .ftabs.steps em{font-family:var(--font);font-size:12px;font-weight:600}
:root[data-skin="livret"] .ftabs.steps button.past,:root[data-skin="livret"] .ftabs.steps button:has(~ button.on){background:transparent;border-color:transparent;color:var(--ink)}
:root[data-skin="livret"] .ftabs.steps button.past:first-child{border-color:transparent}
:root[data-skin="livret"] .ftabs.steps button.on,:root[data-skin="livret"][data-theme="dark"] .ftabs.steps button.on{background:transparent;color:var(--ink);border-color:transparent;border-bottom-color:var(--cc,var(--accent))}
:root[data-skin="livret"] .ftabs.steps button .ck{color:var(--ink)}
@media (min-width:620px){:root[data-skin="livret"] .ftabs.steps button .ck{right:auto;left:calc(50% + 12px)}}
/* mini jauge : les cinq crans de la grande jauge d'aide, jamais confondus avec le soulignement plein de l'étape choisie */
:root[data-skin="livret"] .lvl{height:4px;background:var(--line);-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(20% - 2px),transparent 0 20%);mask-image:repeating-linear-gradient(90deg,#000 0 calc(20% - 2px),transparent 0 20%)}
:root[data-skin="livret"] .lvl i,:root[data-skin="livret"] .ftabs.steps button.on .lvl i{background:var(--ink)}
:root[data-skin="livret"] .ftabs.steps button.on .lvl{background:var(--line)}
:root[data-skin="livret"] .ftabs.steps+.tpane{margin-top:0}
:root[data-skin="livret"] .stp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
:root[data-skin="livret"] .stp-h{gap:12px}
:root[data-skin="livret"] .dot.step,:root[data-skin="livret"][data-theme="dark"] .dot.step{background:var(--fill);color:var(--on-fill)}
:root[data-skin="livret"] .stp-h .dot.step{width:40px;height:40px;font-family:var(--display);font-weight:600;font-size:19px}
:root[data-skin="livret"] .stp-h small{font-size:13px;font-weight:600;color:var(--muted)}
:root[data-skin="livret"] .stp h2{font-size:23px;letter-spacing:0}
:root[data-skin="livret"] .stp .lb{display:block;margin:0 0 2px;font:600 13px/1.3 var(--font);font-style:normal;color:var(--muted);vertical-align:baseline}
:root[data-skin="livret"] .stp .do{font-family:var(--font);font-size:17px;font-weight:600;color:var(--ink);margin:14px 0 0}
:root[data-skin="livret"] .stp .say{margin:12px 0 0;padding-left:12px;border-left:2px solid var(--line2);font-family:var(--display);font-style:italic;font-weight:400;font-size:18px;line-height:1.45;color:var(--ink)}
:root[data-skin="livret"] .stp .avoid{margin:12px 0 0;padding:8px 12px;background:var(--warn-bg);border-left:3px solid var(--warn);color:var(--txt)}
:root[data-skin="livret"] .stp .avoid .lb{color:var(--warn)}
:root[data-skin="livret"] .gauge{margin:14px 0 2px}
:root[data-skin="livret"] .gx{font-size:13px;color:var(--muted)}
:root[data-skin="livret"] .gtr{height:6px;background:var(--line);-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(20% - 2px),transparent 0 20%);mask-image:repeating-linear-gradient(90deg,#000 0 calc(20% - 2px),transparent 0 20%)}
:root[data-skin="livret"] .gtr i{background:var(--ink)}
:root[data-skin="livret"] .gtr::after{display:none}
:root[data-skin="livret"] .gv{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
:root[data-skin="livret"] .stp .aid{background:var(--line)}
:root[data-skin="livret"] .stl{border-radius:0}
:root[data-skin="livret"] .stl::after{color:var(--ink)}
:root[data-skin="livret"] .h:has(.who){flex-wrap:wrap;row-gap:2px}
:root[data-skin="livret"] .h .tt{flex:1 1 0;min-width:0}
@media (max-width:419px){
  :root[data-skin="livret"] .h:has(.who) :is(.who,.cnt,.r){order:3}
  :root[data-skin="livret"] .h:has(.who)::after{content:"";order:2;flex-basis:100%;height:0}
  :root[data-skin="livret"] .h:has(.ic):has(.who) .who{margin-left:32px}
  :root[data-skin="livret"] .h:has(.who) .cv{order:1}
}

/* 14. Évaluer : lignes de formulaire officiel, trois cases attenantes, numéro qui se remplit, tampon d'enregistrement */
:root[data-skin="livret"] .entry{grid-template-columns:44px minmax(0,1fr)}
:root[data-skin="livret"] .entry .en{border-radius:50%;background:transparent;border:2px solid var(--ink);color:var(--ink);font-family:var(--display);font-weight:600;font-size:21px}
:root[data-skin="livret"] .entry h2{font-size:19px}
:root[data-skin="livret"] .entry p{color:var(--txt)}
:root[data-skin="livret"] .scp .lbl{margin:0 0 6px}
:root[data-skin="livret"] .seg.pseg{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
:root[data-skin="livret"] .seg.pseg button{border:0;border-bottom:3px solid transparent;margin-bottom:-1px;color:var(--muted);font-size:15px;padding:2px 6px}
:root[data-skin="livret"] .seg.pseg button+button{border-left:0}
:root[data-skin="livret"] .seg.pseg button.on,:root[data-skin="livret"][data-theme="dark"] .seg.pseg button.on{background:transparent;color:var(--ink);border-bottom-color:var(--cc,var(--accent))}
:root[data-skin="livret"] .fhero>.seg.box{margin-top:12px;max-width:440px}
:root[data-skin="livret"] .fopen{margin-top:12px}
:root[data-skin="livret"] .card .scl>li.scr,:root[data-skin="livret"] .card ol.crits>li{container-type:inline-size;border-top-color:var(--line)}
/* le numéro : contour pointillé tant que la ligne reste à apprécier, puis rempli de la couleur du niveau */
:root[data-skin="livret"] .card .scl>li.scr::before,:root[data-skin="livret"] .card ol.crits>li::before{box-sizing:border-box;width:28px;height:28px;font-family:var(--display);font-weight:600;font-size:15px;transition:background-color 140ms ease,color 140ms ease,border-color 140ms ease,box-shadow 140ms ease}
:root[data-skin="livret"] .card ol.crits>li::before{font-size:17px;width:30px;height:30px;top:-3px}
/* bilans : un filet et du blanc entre deux critères, comme entre deux lignes d'une sous-compétence */
:root[data-skin="livret"] .card ol.crits>li+li{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
:root[data-skin="livret"] .card ol.crits>li+li::before{top:13px}
:root[data-skin="livret"] :is(li.scr,.crits>li):not(:has([aria-checked=true]))::before{background:transparent;border:2px dashed var(--ctl);color:var(--ink)}
:root[data-skin="livret"] .crits>li:not(:has([aria-checked=true]))::before{color:var(--cc)}
:root[data-skin="livret"] :is(li.scr,.crits>li):has(.ap-a.on)::before{background:var(--ok);color:var(--ok-on);border:0}
:root[data-skin="livret"] :is(li.scr,.crits>li):has(.ap-c.on)::before{background:var(--mid);color:var(--mid-on);border:0;box-shadow:inset 0 0 0 2px var(--mid-line)}
:root[data-skin="livret"] :is(li.scr,.crits>li):has(.ap-n.on)::before{background:var(--ko);color:var(--ko-on);border:0}
:root[data-skin="livret"] .sct{font-size:16px;color:var(--ink)}
:root[data-skin="livret"] .crit p{color:var(--ink)}
/* les trois cases : une ligne de formulaire sur toute la largeur, sous le numéro */
:root[data-skin="livret"] .ap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);gap:0;max-width:none;margin:10px 0 0;background:var(--surface);border:2px solid var(--ctl);border-radius:var(--rs)}
:root[data-skin="livret"] .card ol>li>.ap{margin-left:-38px}
:root[data-skin="livret"] .ap button{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-height:56px;padding:4px 8px;border:0;border-radius:0;background:transparent;color:var(--ink);font-family:var(--font);font-size:15px;font-weight:600;line-height:1.2;letter-spacing:0;text-align:center;text-wrap:balance;box-shadow:none;transition:background-color 140ms ease,color 140ms ease,box-shadow 140ms ease,transform 100ms var(--ease-out)}
:root[data-skin="livret"] .ap button+button{border-left:1px solid var(--line)}
:root[data-skin="livret"] .ap button::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--i-ok) center/contain no-repeat;mask:var(--i-ok) center/contain no-repeat}
:root[data-skin="livret"] .ap .ap-a::before{background:var(--good)}
:root[data-skin="livret"] .ap .ap-c::before{background:var(--warn);-webkit-mask-image:var(--i-mid);mask-image:var(--i-mid)}
:root[data-skin="livret"] .ap .ap-n::before{background:var(--bad);-webkit-mask-image:var(--i-ko);mask-image:var(--i-ko)}
:root[data-skin="livret"] .ap:has(.on) button:not(.on){color:var(--muted)}
:root[data-skin="livret"] .ap:has(.on) button:not(.on)::before{background:var(--muted)}
:root[data-skin="livret"] .ap button.on::before{background:currentColor}
:root[data-skin="livret"] .ap .ap-a.on{background:var(--ok);color:var(--ok-on);box-shadow:none}
:root[data-skin="livret"] .ap .ap-c.on{background:var(--mid);color:var(--mid-on);box-shadow:inset 0 0 0 2px var(--mid-line)}
:root[data-skin="livret"] .ap .ap-n.on{background:var(--ko);color:var(--ko-on);box-shadow:none}
:root[data-skin="livret"] .ap button.on+button{border-left-color:transparent}
:root[data-skin="livret"] .ap button:focus-visible{z-index:1;outline-offset:2px;box-shadow:0 0 0 6px var(--focus-halo)}
:root[data-skin="livret"] .ap .ap-c.on:focus-visible{box-shadow:inset 0 0 0 2px var(--mid-line),0 0 0 6px var(--focus-halo)}
@media (max-width:419px){:root[data-skin="livret"] .ap button{font-size:14px;letter-spacing:0;padding:4px 6px;gap:6px}}
@media (hover:hover) and (pointer:fine){:root[data-skin="livret"] .ap button:not(.on):hover{background:var(--soft);color:var(--ink)}}
/* ligne étroite (téléphone de 320 px) : trois cases empilées de 48 px */
@container (max-width:260px){
  :root[data-skin="livret"] .ap{grid-template-columns:minmax(0,1fr)}
  :root[data-skin="livret"] .ap button{min-height:48px;justify-content:flex-start;padding:4px 12px;text-align:left}
  :root[data-skin="livret"] .ap button+button{border-left:0;border-top:1px solid var(--line)}
  :root[data-skin="livret"] .ap button.on+button{border-top-color:transparent}
}
/* cases Essai : cases de formulaire, coche tracée à l'encre */
:root[data-skin="livret"] .esc small{font-size:12px;font-weight:400;color:var(--muted)}
:root[data-skin="livret"] .esb{border:2px solid var(--ctl);border-radius:var(--rs);background:var(--surface);color:var(--ink)}
:root[data-skin="livret"] .esb svg{width:20px;height:20px}
:root[data-skin="livret"] .esb svg path{stroke-dasharray:21;stroke-dashoffset:21;transition:stroke-dashoffset 160ms var(--ease-out)}
/* case cochée : aplat vert plein à coche claire, aussi franc d'un coup d'oeil que la case Acquis */
:root[data-skin="livret"] .esb.on{background:var(--ok);border-color:var(--ok);color:var(--ok-on)}
:root[data-skin="livret"] .esb.on svg path{stroke-dashoffset:0}
:root[data-skin="livret"] .esgl{font-size:14px;font-weight:600}
:root[data-skin="livret"] .gt{font-variant-numeric:tabular-nums;color:var(--muted);border-radius:var(--rs)}
:root[data-skin="livret"] .gt.ok{color:var(--good);background:var(--good-bg);font-weight:600}
@container (max-width:250px){
  :root[data-skin="livret"] .esg{flex-wrap:wrap}
  :root[data-skin="livret"] .esgl{flex-basis:100%;min-height:24px}
}
/* appréciation calculée : case de résultat pleine largeur */
:root[data-skin="livret"] .apv .tag{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:6px 12px;border-radius:var(--rs);font-family:var(--display);font-weight:600;font-size:19px;background:transparent;color:var(--muted);border:2px dashed var(--ctl)}
:root[data-skin="livret"] .apv .tag.ap-a{background:var(--ok);color:var(--ok-on);border:0}
:root[data-skin="livret"] .apv .tag.ap-c{background:var(--mid);color:var(--mid-on);border:0;box-shadow:inset 0 0 0 2px var(--mid-line)}
:root[data-skin="livret"] .apv .tag.ap-n{background:var(--ko);color:var(--ko-on);border:0}
:root[data-skin="livret"] .apv .tag.ap-a::before,:root[data-skin="livret"] .apv .tag.ap-c::before,:root[data-skin="livret"] .apv .tag.ap-n::before{width:18px;height:18px;border:0;background:currentColor;-webkit-mask:var(--i-ok) center/contain no-repeat;mask:var(--i-ok) center/contain no-repeat}
:root[data-skin="livret"] .apv .tag.ap-c::before{-webkit-mask-image:var(--i-mid);mask-image:var(--i-mid)}
:root[data-skin="livret"] .apv .tag.ap-n::before{-webkit-mask-image:var(--i-ko);mask-image:var(--i-ko)}
:root[data-skin="livret"] .apw{font-weight:600;color:var(--ink)}
/* bloc d'enregistrement sur fond doux ; bouton enregistré lisible ; message en tampon */
:root[data-skin="livret"] .scs{margin:14px 0 2px;padding:12px 14px 14px;background:var(--soft);border-radius:var(--rs)}
:root[data-skin="livret"] .evsel,:root[data-skin="livret"] #evs,:root[data-skin="livret"] .ta{border:2px solid var(--ctl);border-radius:var(--rs);background:var(--surface);color:var(--ink)}
:root[data-skin="livret"] .evsel::placeholder,:root[data-skin="livret"] .ta::placeholder{color:var(--muted);opacity:1}
:root[data-skin="livret"] .evsel:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* bouton enregistré : neutre, en pointillé ; seul le message dessous porte le tampon vert */
:root[data-skin="livret"] .btn:is([data-scsave],#bgo,[data-aesave]):disabled{opacity:1;cursor:default;background:transparent;border:2px dashed var(--line2);color:var(--muted)}
:root[data-skin="livret"] .btn:is([data-scsave],#bgo,[data-aesave]):disabled::before{content:none}
:root[data-skin="livret"] :is(.scm,.aem,#bmsg):not(:empty){display:flex;align-items:flex-start;gap:10px;margin:10px 0 0;padding:10px 14px;border:2px solid var(--warn);border-radius:var(--rs);background:var(--warn-bg);color:var(--ink);font-size:16px;font-weight:600;line-height:1.4}
:root[data-skin="livret"] :disabled+:is(.scm,.aem,#bmsg):not(:empty){border-color:var(--good);background:var(--good-bg);color:var(--good)}
:root[data-skin="livret"] :disabled+:is(.scm,.aem,#bmsg):not(:empty)::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;background:currentColor;-webkit-mask:var(--i-ok) center/contain no-repeat;mask:var(--i-ok) center/contain no-repeat}
:root[data-skin="livret"] :is(.scm,.aem){transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
@starting-style{:root[data-skin="livret"] :is(.scm,.aem):not(:empty){opacity:0;transform:scale(1.03)}}
:root[data-skin="livret"] #bmsg:not(:empty){animation:ra-stamp 200ms var(--ease-out) backwards}
/* bilans : renvois en liens texte, numéros des critères en serif */
:root[data-skin="livret"] .crf .lk,:root[data-skin="livret"] .cr-with .lk{min-height:44px;padding:0 4px;background:none;color:var(--accent);font-size:14px;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
:root[data-skin="livret"] .crf .rva{font-size:13px;color:var(--muted)}
:root[data-skin="livret"] .gtext .bt{font-size:23px}
:root[data-skin="livret"] .gtext .bh{font-size:19px}
:root[data-skin="livret"] .bid .bn{border-radius:var(--rs);font-family:var(--display);font-weight:600}
:root[data-skin="livret"] .scrl>li{border-top-color:var(--line)}
:root[data-skin="livret"] .aev .aeg{background:var(--soft);border-left:2px solid var(--line2)}
:root[data-skin="livret"] .aev .aeg p{font-family:var(--display);font-style:italic;font-size:17px;color:var(--ink)}

/* 15. Suivi de l'élève : un relevé à filets */
:root[data-skin="livret"] .pchips a{border:2px solid var(--ctl);border-radius:var(--rs);background:var(--surface)}
/* puces d'élève : grille régulière, alignée sur le relevé ; initiales en Public Sans (donnée saisie, pas la voix du guide) */
:root[data-skin="livret"] .pchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:8px;max-width:880px}
:root[data-skin="livret"] .pchips a{min-width:0;padding:4px 12px}
:root[data-skin="livret"] .pchips a b{font-family:var(--font);font-weight:600;font-size:16px;letter-spacing:0;overflow-wrap:anywhere}
:root[data-skin="livret"] .pchips a.on{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
:root[data-skin="livret"][data-theme="dark"] .pchips a.on{background:var(--accent);border-color:var(--accent);color:var(--on)}
:root[data-skin="livret"][data-theme="dark"] .pchips a.on small{color:var(--on)}
:root[data-skin="livret"] .pchips a.on small{color:var(--on-fill)}
:root[data-skin="livret"] .psum h2{font-size:30px;letter-spacing:-.01em}
:root[data-skin="livret"] .psum p b{font-family:var(--display);font-weight:600;font-size:19px;font-variant-numeric:tabular-nums}
:root[data-skin="livret"] .bnote{background:var(--soft);border:1px solid var(--line);border-radius:var(--rs)}
:root[data-skin="livret"] .pgrp h3{font-size:19px}
:root[data-skin="livret"] .pgrp h3 small{font-family:var(--display);font-size:15px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
:root[data-skin="livret"] .pl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
:root[data-skin="livret"] .pl li{border-bottom:1px solid var(--line)}
:root[data-skin="livret"] .pl li+li{border-top:0}
:root[data-skin="livret"] .pl li:last-child{border-bottom:0}
:root[data-skin="livret"] .pl a{min-height:52px}
:root[data-skin="livret"] .pl .code{font-family:var(--display);font-weight:600;font-size:18px;color:var(--cc)}
:root[data-skin="livret"] .pl .t{font-size:15px}
:root[data-skin="livret"] .pl .tag{font-size:14px;background:none;padding:0}
:root[data-skin="livret"] .pl .tag.ap-a{color:var(--good)}
:root[data-skin="livret"] .pl .tag.ap-c{color:var(--warn)}
:root[data-skin="livret"] .pl .tag.ap-n{color:var(--bad)}
:root[data-skin="livret"] .pl li:has(.nt) :is(.code,.t){color:var(--muted)}
:root[data-skin="livret"] .pl .nt{font-size:14px;font-style:normal}
@media (hover:hover) and (pointer:fine){:root[data-skin="livret"] .pl a:hover{background:var(--soft)}}
:root[data-skin="livret"] .aeh .code{height:44px}

/* 16. Code de la route, index, recherche */
:root[data-skin="livret"] .search{border:2px solid var(--ctl);border-radius:var(--rs);background:var(--surface);color:var(--ink)}
:root[data-skin="livret"] .search::placeholder{color:var(--muted);opacity:1}
:root[data-skin="livret"] .cr-part h3{font-size:19px}
:root[data-skin="livret"] .cr-livre summary b{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
:root[data-skin="livret"] .cr-livre li,:root[data-skin="livret"] .cr-list li{border-top-color:var(--line)}
:root[data-skin="livret"] .cr-list li{border:1px solid var(--line);border-radius:var(--rs)}
:root[data-skin="livret"] .cr-hit b{font-family:var(--display);font-weight:600}
:root[data-skin="livret"] .cr-id{font-size:23px}
:root[data-skin="livret"] .ixt b{font-family:var(--display);font-weight:600;font-size:17px}
:root[data-skin="livret"] .ixl a{border-radius:var(--rs);background:var(--soft)}
:root[data-skin="livret"] .ixl .code{font-family:var(--display);font-weight:600}

/* 17. Quiz, cartes mémoire */
:root[data-skin="livret"] .timer{border-radius:var(--rs);font-weight:600}
:root[data-skin="livret"] .qcard h2{font-family:var(--font);font-weight:600}
:root[data-skin="livret"] .opt{border:2px solid var(--ctl);border-radius:var(--rs)}
:root[data-skin="livret"] .opt .l{border-radius:var(--rs);font-weight:600}
:root[data-skin="livret"] .opt.sel{background:var(--accent-bg);border-color:var(--fill);box-shadow:inset 0 0 0 1px var(--fill)}
:root[data-skin="livret"][data-theme="dark"] .opt.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
:root[data-skin="livret"] .opt.sel .l{background:var(--fill);color:var(--on-fill)}
:root[data-skin="livret"] .opt.good .l{background:var(--good);color:var(--on-fill)}
:root[data-skin="livret"] .opt.bad .l{background:var(--bad);color:var(--on-fill)}
:root[data-skin="livret"][data-theme="dark"] :is(.opt.sel,.opt.good,.opt.bad) .l{color:var(--bg)}
:root[data-skin="livret"][data-theme="dark"] .opt.sel .l{color:var(--on-fill)}
@media (hover:hover) and (pointer:fine){:root[data-skin="livret"] .opt:hover:not(:disabled){border-color:var(--ink)}}
:root[data-skin="livret"] .expl{border-radius:var(--rs)}
:root[data-skin="livret"] .score .big{font-weight:600}
:root[data-skin="livret"] .corr .it{border-radius:var(--rs)}
:root[data-skin="livret"] .persub span{font-family:var(--display);font-weight:600}
:root[data-skin="livret"] .flash-in{transition:none;border-radius:var(--r)}
:root[data-skin="livret"] .face{border:1px solid var(--line);border-radius:var(--r);box-shadow:none;align-items:center;text-align:center}
:root[data-skin="livret"] .face b{max-width:34ch;text-wrap:balance}
:root[data-skin="livret"] .face b{font-family:var(--display);font-weight:600}
:root[data-skin="livret"] .face small{font-size:13px;font-weight:600}
:root[data-skin="livret"] .boxes div{border-radius:var(--rs)}
:root[data-skin="livret"] .boxes b{font-family:var(--display);font-weight:600}
:root[data-skin="livret"] main:has(>.flash)>:is(.qtop,.btn,.row,div:not(.flash):not(.boxes)){max-width:760px}

/* 18. Fenêtres et bandeaux */
:root[data-skin="livret"] .modal{background:var(--veil)}
:root[data-skin="livret"] .sheet{background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
:root[data-skin="livret"] .sheet h2{font-size:23px}
:root[data-skin="livret"] .banner{border-radius:var(--rs);background:var(--ink);color:var(--bg)}

/* 19. Montrer : une page du livret projetée, toujours en papier blanc, intercalaire vertical de la compétence */
:root[data-skin="livret"] .show{--bg:var(--show-bg);--ctl:var(--show-ctl);background:var(--show-bg)}
:root[data-skin="livret"] .show .sh-where{font-family:var(--display);font-weight:600;font-size:max(16px,2.6vh);color:var(--show-top)}
:root[data-skin="livret"] .show .sh-top .icon-btn{border-color:var(--show-ctl)}
:root[data-skin="livret"] .show .sh-card{
  --surface:#FFFFFF;--soft:#EEF2F6;--line:#A8B3C1;--line2:#687689;--ctl:#687689;--ink:#0B1F3A;--txt:#22324A;--muted:#4E5D73;
  --accent:#173B75;--accent-h:#0E2954;--accent-bg:#E2E9F5;--accent-t:#173B75;--on:#FFFFFF;--fill:#173B75;--fill-h:#0E2954;--on-fill:#FFFFFF;
  --good:#0B6E50;--good-bg:#DFF0EA;--warn:#7A5200;--warn-bg:#FFF0C7;--bad:#B3261E;--bad-bg:#FAE6E4;--mark:#FFD84D;--mark-bg:#FFF4C2;
  --c1:#2E5BD8;--c1bg:#E5ECFC;--c2:#A8296A;--c2bg:#F7E4EE;--c3:#A14700;--c3bg:#FCE9DA;--c4:#3A6B1C;--c4bg:#E7F0E0;--on-cc:#FFFFFF;
  --road:#D3D9E1;--curb:#A9B3C1;--focus:#6B2FA8;--focus-halo:#FFFFFF;
  color-scheme:light;color:var(--txt);
  align-self:stretch;justify-self:center;width:min(94vw,1680px);max-width:none;max-height:100%;
  background:var(--show-card);border:1px solid var(--line);border-left:clamp(14px,4.4vw,56px) solid var(--cc);border-radius:var(--r);box-shadow:none;
  padding:clamp(20px,3vw,56px);display:grid;grid-template-columns:minmax(0,1fr);align-content:safe center;container-type:size}
:root[data-skin="livret"] .show.C1 .sh-card{--cc:var(--c1);--cb:var(--c1bg)}
:root[data-skin="livret"] .show.C2 .sh-card{--cc:var(--c2);--cb:var(--c2bg)}
:root[data-skin="livret"] .show.C3 .sh-card{--cc:var(--c3);--cb:var(--c3bg)}
:root[data-skin="livret"] .show.C4 .sh-card{--cc:var(--c4);--cb:var(--c4bg)}
:root[data-skin="livret"] .sh-card .sl-k{font-family:var(--font);font-weight:600;font-size:clamp(16px,3.2cqh,34px);letter-spacing:0;text-transform:none;color:var(--cc);margin-bottom:.25em}
:root[data-skin="livret"] .sh-card .sl-k.rk{color:var(--bad)}
:root[data-skin="livret"] .sh-card .sl-col{font-size:clamp(14px,2.2cqh,24px);color:var(--txt);margin:0 0 .9em}
:root[data-skin="livret"] .sh-card ul{font-family:var(--font);font-weight:600;font-size:clamp(19px,min(5cqh,6.2cqw),56px);line-height:1.3;color:var(--ink)}
:root[data-skin="livret"] .sh-card li{margin:.35em 0}
:root[data-skin="livret"] .sh-card li::marker{color:var(--cc)}
:root[data-skin="livret"] .sl-t h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,min(9cqh,10cqw),96px);line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
:root[data-skin="livret"] .sl-t p{font-size:clamp(17px,min(3cqh,4.6cqw),32px);color:var(--muted)}
:root[data-skin="livret"] .sl-num{font-family:var(--display);font-weight:600;font-size:min(30cqh,21cqw);overflow-wrap:break-word;line-height:1;color:var(--cc);margin:0 0 .1em;font-variant-numeric:tabular-nums}
:root[data-skin="livret"] .sl-big{font-family:var(--font);font-weight:600;font-size:clamp(24px,min(6cqh,7.4cqw),64px);line-height:1.25;color:var(--ink)}
:root[data-skin="livret"] .sl-nb{background:var(--cb);color:var(--cc);font-family:var(--display);font-weight:600}
/* schéma : la rangée du dessin se contente de la hauteur que lui laissent le titre et la légende ;
   tant que tout tient, la page reste centrée, sinon seul le dessin rapetisse (jamais de défilement) */
:root[data-skin="livret"] .sh-card:has(>.svg){grid-template-rows:auto minmax(0,auto) auto}
:root[data-skin="livret"] .sh-card>.svg{overflow:visible;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0}
:root[data-skin="livret"] .sh-card>.svg>div{flex:none;max-width:100%}
:root[data-skin="livret"] .sh-card .svg>svg,:root[data-skin="livret"] .sh-card .svg:has(>div)>svg{flex:0 1 auto;min-height:0;max-width:none;width:100%;max-height:100%}
/* panneaux officiels au-dessus d'un schéma : seulement agrandis à l'écran projeté, jamais recolorés */
@media (min-width:960px) and (min-height:600px){:root[data-skin="livret"] .sh-card>.svg>div{zoom:1.5}}
@media (min-width:1600px) and (min-height:900px){:root[data-skin="livret"] .sh-card>.svg>div{zoom:1.9}}
:root[data-skin="livret"] .sh-card .lb{fill:var(--ink);font-weight:600}
:root[data-skin="livret"] .sh-card .cap{font-size:clamp(14px,2.4cqh,26px);color:var(--ink)}
:root[data-skin="livret"] .sh-card .kp .kpi b{font-size:clamp(22px,5cqh,56px)}
:root[data-skin="livret"] .sh-card .kp .kpi span{font-size:clamp(14px,2.4cqh,24px)}
:root[data-skin="livret"] .sh-card .btn{border-radius:var(--rs)}
:root[data-skin="livret"] .sh-parts button{border:2px solid var(--ctl);border-radius:var(--rs);background:var(--surface);color:var(--txt);font-weight:600}
:root[data-skin="livret"] .sh-parts button.on{background:var(--cb);color:var(--ink);border-color:var(--cc)}
:root[data-skin="livret"] .sh-nav .btn.alt{background:var(--surface)}
:root[data-skin="livret"] .show .tag.sh-box{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
@media (min-width:960px){
  :root[data-skin="livret"] .sh-parts{gap:4px;margin:14px 0 12px}
  :root[data-skin="livret"] .sh-parts button{border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--show-top);opacity:1}
  :root[data-skin="livret"] .show .sh-parts button:not(.on){color:color-mix(in srgb,var(--show-top) 72%,var(--show-bg))}
  :root[data-skin="livret"] .sh-parts button.on{background:transparent;color:var(--show-top);border-bottom-color:var(--cc)}
  :root[data-skin="livret"] .sh-nav{max-width:min(94vw,1680px)}
  :root[data-skin="livret"] .sh-nav .btn,:root[data-skin="livret"] .sh-nav .btn.alt,:root[data-skin="livret"][data-theme="dark"] .sh-nav .btn:not(.alt):not(.soft){background:transparent;border:2px solid var(--show-ctl);color:var(--show-top)}
  /* Suivant reste la seule action pleine ; la page blanche reste l'aplat dominant */
  :root[data-skin="livret"] .sh-nav .btn:not(.alt):not(:disabled),:root[data-skin="livret"][data-theme="dark"] .sh-nav .btn:not(.alt):not(.soft):not(:disabled){background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
  @media (hover:hover) and (pointer:fine){
    :root[data-skin="livret"] .sh-nav .btn:hover,:root[data-skin="livret"][data-theme="dark"] .sh-nav .btn:not(.alt):not(.soft):hover{background:color-mix(in srgb,var(--show-top) 8%,transparent);border-color:var(--show-top)}
    :root[data-skin="livret"] .sh-nav .btn:not(.alt):not(:disabled):hover,:root[data-skin="livret"][data-theme="dark"] .sh-nav .btn:not(.alt):not(.soft):not(:disabled):hover{background:var(--fill-h);border-color:var(--fill-h);color:var(--on-fill)}
  }
  /* au vidéoprojecteur : tailles bornées par la fenêtre, plus par la boîte de contenu de la carte, aussi grandes que la version 17 */
  :root[data-skin="livret"] .sh-card .sl-big{font-size:clamp(30px,min(3.8vw,5.6vh),60px)}
  :root[data-skin="livret"] .sh-card .sl-k{font-size:clamp(19px,min(1.8vw,2.9vh),34px)}
  :root[data-skin="livret"] .sh-card .sl-col{font-size:clamp(17px,min(1.5vw,2.5vh),26px)}
  :root[data-skin="livret"] .sh-card .cap{font-size:clamp(18px,min(1.7vw,2.8vh),30px)}
}
/* téléphone tourné en paysage : la page reste dans la colonne centrale, entre Précédent et Suivant */
@media (max-height:500px) and (orientation:landscape){
  :root[data-skin="livret"] .show .sh-card{width:auto;min-width:0;justify-self:stretch;padding:14px 20px;border-left-width:12px}
  :root[data-skin="livret"] .sh-nav .btn{font-size:24px}
  :root[data-skin="livret"] .sh-card ul{font-size:17px;line-height:1.35}
  :root[data-skin="livret"] .sh-card li{margin:5px 0}
}

/* 20. Écran d'ouverture : le livre qui s'ouvre est gardé, seules ses couleurs changent */
:root[data-skin="livret"].splash-on #splash{background:var(--bg);color:var(--ink)}
:root[data-skin="livret"] #splash .op-blob{display:none}
:root[data-skin="livret"] #splash .op-lt path{fill:#FFFFFF;stroke:var(--logo-ink)}
:root[data-skin="livret"] #splash .op-l2 path{fill:var(--mark)}
:root[data-skin="livret"] #splash .op-pg .op-pl{fill:var(--surface);stroke:var(--line2);stroke-width:1.5px}
:root[data-skin="livret"] #splash .op-pg .op-pr{fill:var(--soft);stroke:var(--line2);stroke-width:1.5px}
:root[data-skin="livret"] #splash .op-tr .op-pl{fill:var(--fill);stroke:var(--fill)}
:root[data-skin="livret"] #splash .op-tr .op-pr{fill:var(--fill-h);stroke:var(--fill-h)}
:root[data-skin="livret"] #splash .op-sp path{stroke:var(--mark)}
:root[data-skin="livret"] #splash .op-t1{font-family:var(--display);font-weight:600;letter-spacing:.02em;color:var(--ink)}
:root[data-skin="livret"] #splash .op-t2{color:var(--muted)}
:root[data-skin="livret"] #splash .op-bar{border-radius:0;background:var(--line)}
:root[data-skin="livret"] #splash .op-bar b{border-radius:0;background:var(--accent);transform-origin:0 50%}
:root[data-skin="livret"] #splash.op-go .op-bar b{animation:ra-fill 1s 1.45s linear both}

/* 21. Mouvement : une fois, puis figé ; rien ne boucle */
@keyframes ra-enter{from{opacity:.2}}
@keyframes ra-pane{from{opacity:0;transform:translateY(4px)}}
@keyframes ra-open{from{opacity:0}}
@keyframes ra-flip{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
@keyframes ra-stamp{from{opacity:0;transform:scale(1.03)}}
@keyframes ra-fill{from{transform:scaleX(0)}}
:root[data-skin="livret"] main.enter{animation:ra-enter 140ms var(--ease-out) backwards}
:root[data-skin="livret"] #fiche>.tpane{animation:ra-pane 160ms var(--ease-out) backwards}
:root[data-skin="livret"] details[open]>summary~*{animation:ra-open 160ms var(--ease-out) backwards}
:root[data-skin="livret"] .flash-in.flip{animation:ra-flip 320ms var(--ease-io) backwards}
/* commandes : pression douce, aucun mouvement au survol */
:root[data-skin="livret"] :is(.esb,.btn,.seg button,.ftabs button,.sh-parts button,.pick,.icon-btn,.nexttab){transition:transform 100ms var(--ease-out),background-color 140ms ease,color 140ms ease,border-color 140ms ease}
@media (prefers-reduced-motion:no-preference){
  :root[data-skin="livret"] :is(.ap button,.esb,.btn,.seg button,.ftabs button,.sh-parts button,.pick,.icon-btn,.nexttab):active{transform:scale(.98)}
}
/* Montrer : fondu à l'ouverture, page qui se pose ; entre deux diapositives, seule l'écriture glisse */
:root[data-skin="livret"] .show{transition:opacity 200ms var(--ease-out)}
@starting-style{:root[data-skin="livret"] .show{opacity:0}}
:root[data-skin="livret"] .show .sh-card{transform-origin:50% 50%;transition:transform 200ms var(--ease-out)}
@starting-style{:root[data-skin="livret"] .show .sh-card{transform:scale(.98)}}
:root[data-skin="livret"] .show .sh-card.fwd,:root[data-skin="livret"] .show .sh-card.bwd,:root[data-skin="livret"] .show .sh-card.in{opacity:1;transform:none}
:root[data-skin="livret"] .show .sh-card.fwd:not(.in)>*{opacity:0;transform:translateX(16px)}
:root[data-skin="livret"] .show .sh-card.bwd:not(.in)>*{opacity:0;transform:translateX(-16px)}
@media (min-width:960px){
  :root[data-skin="livret"] .show .sh-card.fwd:not(.in)>*{transform:translateX(24px)}
  :root[data-skin="livret"] .show .sh-card.bwd:not(.in)>*{transform:translateX(-24px)}
}
:root[data-skin="livret"] .show .sh-card.in>*{opacity:1;transform:none;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
/* feuilles : du bas au téléphone, au centre au delà de 620 px ; fermeture immédiate */
:root[data-skin="livret"] .modal{transition:opacity 200ms var(--ease-out)}
@starting-style{:root[data-skin="livret"] .modal{opacity:0}}
:root[data-skin="livret"] .sheet{transition:transform 260ms var(--ease-sheet),opacity 260ms var(--ease-sheet)}
@starting-style{:root[data-skin="livret"] .sheet{opacity:0;transform:translateY(24px)}}
@media (min-width:620px){@starting-style{:root[data-skin="livret"] .sheet{opacity:0;transform:scale(.96)}}}
/* mouvement réduit : app.css coupe transitions et animations des éléments, mais pas des pseudo-éléments ;
   ici, même sélecteurs que les règles d'origine, placés après (aucun !important), et plus aucune pression qui réduit l'échelle */
@media (prefers-reduced-motion:reduce){
  :root[data-skin="livret"] :is(.tile,.sub-i,.act,.fnav a,.btn,.opt,.cr-hit,.ap button,.esb):active{transform:none}
  :root[data-skin="livret"] .card .scl>li.scr::before,:root[data-skin="livret"] .card ol.crits>li::before{transition:none}
  :root[data-skin="livret"] .gd>summary::before{transition:none}
}
@media print{:root[data-skin="livret"] body{background:#fff}:root[data-skin="livret"] :is(.fhero,.tile,.resume,.chero){margin-top:30px}}