/* p1 · Système : la WEB APP REMC comme une app livrée avec l'iPhone, l'iPad et le Mac (refonte du 22/10/2026).
   Chargée après app.css ; chaque règle sous :root[data-skin="systeme"]. Police du système (SF Pro sur Apple), Inter intégrée en repli (OFL).
   Paliers : téléphone sous 620 px (ou iPhone couché ; téléphone étroit sous 360 px), tablette étroite 620 à 959 px, large 960 px et plus,
   très large 1180 px et plus.
   Ordre : polices, jetons, base, coquille, commandes, surfaces, accueil, compétences, compétence, inspecteur, recherche, icônes, rayons,
   fiche (en-tête, téléphone, téléphone étroit, contenu, Pédagogie, très large), Évaluer, évaluation, barre de séance, bilans, suivi, quiz,
   cartes mémoire, Code de la route, ressources, index, modale, survol et flèche (Mac), Montrer, mouvement, mouvement réduit, verre opaque
   (repli et contraste renforcé), impression. */

/* ── polices : Inter 4 (SIL Open Font License 1.1, assets/fonts/LICENCE-inter.txt), plage latine ── */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/inter-latin-wght-normal.woff2) format("woff2");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:"Inter";font-style:italic;font-weight:100 900;font-display:swap;src:url(../assets/fonts/inter-latin-wght-italic.woff2) format("woff2");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}

/* ── jetons, thème clair ── */
:root[data-skin="systeme"]{
  --font:"Inter",system-ui,sans-serif;--display:var(--font);
  --bg:#F2F2F7;--surface:#FFFFFF;--elev:#FFFFFF;--soft:#EFEFF4;--fill2:#E4E4EA;--side:#F2F2F7;--side-bg:#F2F2F7;
  --ink:#000000;--txt:#000000;--txt2:#3C3C43;--muted:#6C6C70;--muted2:#5E5E63;--ter:#AEAEB2;--line:#C6C6C8;--line2:#B4B4B8;
  --accent:#0A64D8;--accent-fill:#0A64D8;--fill:#0A64D8;--on:#FFFFFF;--accent-h:#0850AE;--accent-bg:#E5EFFC;--accent-t:#0A64D8;--focus:#0A64D8;
  --c1:#3E66B3;--c1bg:#E4EFFF;--c2:#9E4573;--c2bg:#FFE7F1;--c3:#A34D16;--c3bg:#FFE9DE;--c4:#3B7A2C;--c4bg:#E4F4E1;
  --c1fill:#3E66B3;--c2fill:#9E4573;--c3fill:#A34D16;--c4fill:#3B7A2C;
  --good:#0B6E50;--good-bg:#E3F4EC;--warn:#7A5200;--warn-bg:#FFF1D6;--bad:#B3261E;--bad-bg:#FDE8E6;--on-state:#FFFFFF;--none:#6C6C70;--none-bg:#EFEFF4;
  --mark:#FFD166;--mark-bg:#FFF1D6;--coral:#B3261E;--coral-bg:#FDE8E6;
  --glass:rgba(249,249,251,.92);--glass-solid:#F9F9FB;--verre:blur(30px) saturate(180%);--seg-ring:rgb(134,134,139);--es-ring:rgb(134,134,139);--glass-line:rgba(0,0,0,.08);--glass-hi:inset 0 1px 0 rgba(255,255,255,.6);
  --glass-ink:#3C3C43;--glass-btn:rgba(118,118,128,.12);--seg-on:#FFFFFF;--scrim:rgba(0,0,0,.34);--logo-bg:#0B1F3A;
  --r:22px;--rs:12px;--bw:0px;--tab:0px;--shadow:none;--glow:none;--glow2:none;--hw:700;--hcase:none;--hls:-.01em;
  --side-w:260px;--row:44px;--tabbar:62px;--gut:max(16px,env(safe-area-inset-left,0px));--gutr:max(16px,env(safe-area-inset-right,0px));
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-sheet:cubic-bezier(.32,.72,0,1);--ease-spring:var(--ease-sheet);
  --t-press:100ms;--t-state:120ms;--t-pane:160ms;--t-screen:180ms;--t-show:220ms;--t-cursor:280ms;--t-sheet:380ms;--t-exit:160ms;--t-tab:220ms;
  color-scheme:light;
}
/* police : SF Pro sur les appareils Apple (WebKit seul reconnaît font:-apple-system-body), Inter intégrée partout ailleurs (PC du vidéoprojecteur) */
@supports (font:-apple-system-body){:root[data-skin="systeme"]{--font:-apple-system,BlinkMacSystemFont,system-ui,sans-serif}}
@supports (transition-timing-function:linear(0,1)){:root[data-skin="systeme"]{--ease-spring:linear(0,.039,.128,.238,.351,.458,.554,.637,.708,.767,.815,.854,.885,.91,.93,.946,.958,.968,.975,.981,.985,.989,.991,.993,1)}}
/* ── jetons, thème sombre ── */
:root[data-skin="systeme"][data-theme="dark"]{
  --bg:#000000;--surface:#1C1C1E;--elev:#2C2C2E;--soft:#2C2C2E;--fill2:#3A3A3C;--side:#1C1C1E;--side-bg:#1C1C1E;
  --ink:#FFFFFF;--txt:#FFFFFF;--txt2:#D1D1D6;--muted:#A1A1A6;--muted2:#A1A1A6;--ter:#636366;--line:#38383A;--line2:#48484A;
  --accent:#3D95FF;--accent-fill:#0A64D8;--fill:#0A64D8;--on:#FFFFFF;--accent-h:#0857BD;--accent-bg:#10284A;--accent-t:#3D95FF;--focus:#3D95FF;
  --c1:#97BEFF;--c1bg:#1E2D49;--c2:#F4A0C8;--c2bg:#422232;--c3:#F8A87E;--c3bg:#442514;--c4:#98CF8B;--c4bg:#1E3419;
  --good:#5BD6A6;--good-bg:#0F3326;--warn:#F2C25B;--warn-bg:#3A2C0C;--bad:#FF8F86;--bad-bg:#3D1714;--on-state:#000000;--none:#A1A1A6;--none-bg:#2C2C2E;
  --mark-bg:#3A2C0C;--coral:#FF8F86;--coral-bg:#3D1714;
  --glass:rgba(28,28,30,.92);--glass-solid:#1C1C1E;--seg-ring:transparent;--es-ring:rgb(118,118,123);--glass-line:rgba(255,255,255,.12);--glass-hi:inset 0 1px 0 rgba(255,255,255,.08);
  --glass-ink:#D1D1D6;--glass-btn:rgba(118,118,128,.24);--seg-on:#76767C;--scrim:rgba(0,0,0,.5);--logo-bg:#0B1F3A;
  --road:#3A3A3C;--curb:#636366;color-scheme:dark;
}
/* aplat de chaque compétence (pastilles de code, barre latérale) : le même en clair et en sombre, texte blanc */
:root[data-skin="systeme"] .C1{--cf:var(--c1fill)}:root[data-skin="systeme"] .C2{--cf:var(--c2fill)}:root[data-skin="systeme"] .C3{--cf:var(--c3fill)}:root[data-skin="systeme"] .C4{--cf:var(--c4fill)}

/* ── base ── */
:root[data-skin="systeme"]{font-size:17px;overflow-x:hidden;overflow-x:clip;background:var(--bg);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@supports (font:-apple-system-body){@media (pointer:coarse){:root[data-skin="systeme"]{font:-apple-system-body;font-family:var(--font)}}}
:root[data-skin="systeme"] body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:1rem;line-height:1.41;padding-bottom:0;overflow-x:visible;min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:root[data-skin="systeme"] :is(h1,h2,h3){font-family:var(--font);font-weight:700;color:var(--ink);letter-spacing:0}
:root[data-skin="systeme"] :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* titres et #app reçoivent le focus par programme (view() d'app.js) : pas d'anneau, ce ne sont pas des commandes */
:root[data-skin="systeme"] [tabindex="-1"]:focus{outline:none}
:root[data-skin="systeme"] :is(button,[role=tab],.bottom a,.snav a,.scomp a,.stree a,.cchips button){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:root[data-skin="systeme"] a{color:var(--accent)}
:root[data-skin="systeme"] main{max-width:none;margin:0 auto;padding:8px var(--gutr) calc(var(--tabbar) + max(12px,env(safe-area-inset-bottom,0px)) + 24px) var(--gut)}
:root[data-skin="systeme"] main.enter{animation:none}
:root[data-skin="systeme"] .kicker{font-family:var(--font);font-size:13px;line-height:18px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
:root[data-skin="systeme"] .h1{font-size:34px;line-height:41px;font-weight:700;letter-spacing:-.4px;margin:0 0 8px;border:0;padding:0}
:root[data-skin="systeme"] .lead{font-size:15px;line-height:20px;color:var(--muted);margin:0 0 16px;max-width:68ch}
:root[data-skin="systeme"] .sec-t{font-size:20px;line-height:25px;font-weight:700;margin:24px 0 8px;gap:2px 10px}
:root[data-skin="systeme"] .sec-t small{font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
:root[data-skin="systeme"] .small{font-size:13px;line-height:18px}
:root[data-skin="systeme"] .official{font-size:13px;line-height:18px;color:var(--muted)}
:root[data-skin="systeme"] :is(.kpi2 b,.qtop b,.gt,.sh-n,.timer,.score .big,.gv,.ixt span,.ixl .pg){font-variant-numeric:tabular-nums}

/* ── coquille commune : barre du haut (barre de navigation sur iPhone, barre d'outils au-delà), barre latérale, barre d'onglets ── */
:root[data-skin="systeme"] .top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;min-height:calc(var(--row) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) var(--gutr) 0 var(--gut);background:var(--glass);-webkit-backdrop-filter:var(--verre);backdrop-filter:var(--verre);
  border-bottom:.5px solid var(--glass-line);box-shadow:none;transition:background-color var(--t-state) var(--ease-out),border-color var(--t-state) var(--ease-out)}
/* haut de page : la barre n'a pas de matière tant que rien ne défile dessous (apparence « bord de défilement » d'iOS) ; js/systeme.js pose html.p1-defile */
:root[data-skin="systeme"]:not(.p1-defile) .top{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
:root[data-skin="systeme"] .top .brand{display:none}
:root[data-skin="systeme"] body.eleve .top .brand{display:flex;pointer-events:none}
:root[data-skin="systeme"] .top .shw{display:none!important}
:root[data-skin="systeme"] .icon-btn{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:default;flex:none;padding:0}
:root[data-skin="systeme"] .icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:root[data-skin="systeme"] #theme{margin-left:auto;background:var(--glass-btn);border-radius:50%}
:root[data-skin="systeme"] #sidebtn{border-radius:50%}
:root[data-skin="systeme"] #sidebtn{display:none;color:var(--accent)}
:root[data-skin="systeme"] .ptitle{position:absolute;left:68px;right:68px;top:env(safe-area-inset-top,0px);height:var(--row);display:block;line-height:var(--row);text-align:center;
  font:600 17px/var(--row) var(--font);letter-spacing:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none;
  opacity:0;transform:translateY(6px);transition:opacity var(--t-screen) var(--ease-out),transform var(--t-screen) var(--ease-out);pointer-events:none}
:root[data-skin="systeme"] .top.titled .ptitle{opacity:1;transform:none}
/* barre de lecture d'une fiche : filet de 2 px d'accent au bas de la barre */
:root[data-skin="systeme"] .rprog{height:2px;bottom:-.5px}
:root[data-skin="systeme"] body.is-fiche .rprog{background:var(--accent)!important}
/* champ de recherche (barre d'outils, 620 px et plus) */
:root[data-skin="systeme"] .find{display:none}
:root[data-skin="systeme"] .find svg{width:18px;height:18px;padding:0;border:0;border-radius:0;background:none;color:var(--muted);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* barre latérale : contenu (affichée à partir de 620 px) */
:root[data-skin="systeme"] .side{display:none}
:root[data-skin="systeme"] .side .brand{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 8px 14px;margin:0 0 6px;border:0;color:var(--ink);text-decoration:none}
:root[data-skin="systeme"] .logo{width:28px;height:28px;border-radius:7px;background:var(--logo-bg);box-shadow:none}
:root[data-skin="systeme"] .logo svg{width:20px;height:20px}
:root[data-skin="systeme"] .side .brand b{display:block;font:700 17px/22px var(--font);letter-spacing:0}
:root[data-skin="systeme"] .side .brand small{display:block;font-size:12px;line-height:16px;color:var(--muted)}
:root[data-skin="systeme"] .snav{display:grid;gap:2px}
:root[data-skin="systeme"] .snav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;text-decoration:none;color:var(--ink);font:500 15px/20px var(--font)}
:root[data-skin="systeme"] .snav svg{width:20px;height:20px;flex:none;color:var(--accent);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:root[data-skin="systeme"] .snav a.on{background:var(--accent-bg);color:var(--accent-t);font-weight:600}
:root[data-skin="systeme"] .sgrp{margin:22px 12px 6px;font:600 11px/13px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
:root[data-skin="systeme"] .scomp{display:grid;gap:2px}
:root[data-skin="systeme"] .scomp>a{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 12px;border-radius:12px;text-decoration:none;color:var(--ink)}
:root[data-skin="systeme"] .scomp>a .badge{width:28px;min-width:28px;height:28px;padding:0;border-radius:8px;font:700 13px/1 var(--font);letter-spacing:0}
:root[data-skin="systeme"] .scomp>a b{font:500 15px/20px var(--font)}
:root[data-skin="systeme"] .scomp>a.on{background:var(--accent-bg)}
:root[data-skin="systeme"] .scomp>a.on b{color:var(--accent-t);font-weight:600}
:root[data-skin="systeme"] .stree{display:grid;gap:0;margin:2px 0 8px 25px;padding-left:10px;border-left:1px solid var(--line)}
:root[data-skin="systeme"] .stree a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center;min-height:44px;padding:4px 8px;border-radius:10px;text-decoration:none;color:var(--ink);font:400 14px/19px var(--font)}
:root[data-skin="systeme"] .stree a span{display:inline-grid;place-items:center;height:20px;border-radius:6px;background:var(--cf);color:#fff;font:700 12px/1 var(--font);letter-spacing:0}
:root[data-skin="systeme"] .stree a.on{background:var(--accent-bg);color:var(--accent-t);font-weight:600}
:root[data-skin="systeme"] .stree em{font-style:normal;display:block;overflow-wrap:anywhere}
:root[data-skin="systeme"] .sfoot{margin-top:auto;padding:18px 12px 0;font-size:12px;line-height:16px;color:var(--muted)}
/* barre d'onglets (téléphone) : masquée par défaut, montrée sous 620 px */
:root[data-skin="systeme"] .bottom{display:none}
:root[data-skin="systeme"] .p1-voile,:root[data-skin="systeme"] .p1-poignee{display:none}
/* « Aller au contenu » (U20) : premier arrêt de Tab, hors de l'écran tant qu'il n'a pas le focus */
:root[data-skin="systeme"] .p1-saut{position:fixed;z-index:100;left:max(12px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 4px);min-height:44px;margin:0;padding:0 18px;border:0;border-radius:22px;
  background:var(--accent-fill);color:#fff;font:600 15px/20px var(--font);transform:translateY(calc(-100% - 80px))}
:root[data-skin="systeme"] .p1-saut:focus{transform:none}
/* marque sur le Tableau de bord (D21) : logo de 20 px et « REMC » devant la date */
:root[data-skin="systeme"] .p1-marque{display:inline-flex;align-items:center;gap:6px;margin-right:6px;vertical-align:middle}
:root[data-skin="systeme"] .p1-marque .logo{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px}
:root[data-skin="systeme"] .p1-marque .logo svg{width:14px;height:14px}
/* mode élève : barres et menus masqués */
:root[data-skin="systeme"] body.eleve :is(.side,.bottom,#sidebtn,.find,#theme,.p1-poignee){display:none!important}

/* ── téléphone (moins de 620 px, ou iPhone couché) ── */
@media (max-width:619px),(max-width:959px) and (max-height:500px) and (pointer:coarse){
  :root[data-skin="systeme"]{scroll-padding-bottom:calc(var(--tabbar) + max(12px,env(safe-area-inset-bottom,0px)) + 40px)}
  :root[data-skin="systeme"] body{display:block}
  :root[data-skin="systeme"] .side{display:none!important}
  :root[data-skin="systeme"] .bottom{display:grid;position:fixed;z-index:20;left:var(--gut);right:var(--gutr);bottom:max(12px,env(safe-area-inset-bottom,0px));top:auto;height:var(--tabbar);
    grid-template-columns:repeat(4,auto) 62px;column-gap:6px;padding:0 0 0 6px;background:none;border:0;transition:transform var(--t-tab) var(--ease-out),visibility 0s}
  :root[data-skin="systeme"] .bottom::before{content:"";position:absolute;inset:0 68px 0 0;border-radius:31px;background:var(--glass);
    -webkit-backdrop-filter:var(--verre);backdrop-filter:var(--verre);border:.5px solid var(--glass-line);box-shadow:0 6px 20px rgba(0,0,0,.10),var(--glass-hi)}
  :root[data-skin="systeme"] .bottom a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:54px;min-height:54px;margin:4px 0;padding:0 8px;
    border-radius:27px;color:var(--glass-ink);font:600 10px/12px var(--font);letter-spacing:0;text-decoration:none;white-space:nowrap;
    transition:background-color var(--t-state) var(--ease-out),color var(--t-state) var(--ease-out),transform var(--t-press) var(--ease-out)}
  :root[data-skin="systeme"] .bottom a:nth-child(4){margin-right:6px}
  :root[data-skin="systeme"] .bottom a svg{width:24px;height:24px;padding:0;border-radius:0;background:none;box-sizing:border-box;stroke-width:1.9}
  :root[data-skin="systeme"] .bottom a.on{background:var(--accent-bg);color:var(--accent-t)}
  :root[data-skin="systeme"] .bottom a.on svg{background:none;stroke-width:2.1}
  :root[data-skin="systeme"] .bottom a.tab-find{grid-column:5;justify-self:end;width:var(--tabbar);height:var(--tabbar);min-height:var(--tabbar);margin:0;border-radius:50%;color:var(--ink);
    background:var(--glass);-webkit-backdrop-filter:var(--verre);backdrop-filter:var(--verre);border:.5px solid var(--glass-line);box-shadow:0 6px 20px rgba(0,0,0,.10),var(--glass-hi)}
  :root[data-skin="systeme"] .bottom a.tab-find.on{background:var(--accent-bg);color:var(--accent-t)}
  :root[data-skin="systeme"] .bottom a:active{transform:scale(.94)}
  :root[data-skin="systeme"].p1-cache .bottom{transform:translateY(calc(100% + 24px + max(12px,env(safe-area-inset-bottom,0px))))}
  :root[data-skin="systeme"].clavier .bottom{visibility:hidden}
  /* effet de bord au-dessus de la barre d'onglets : le contenu s'efface vers le bas au lieu d'un filet */
  :root[data-skin="systeme"] body::after{content:"";position:fixed;z-index:19;left:0;right:0;bottom:0;height:calc(var(--tabbar) + max(12px,env(safe-area-inset-bottom,0px)) + 20px);pointer-events:none;
    background:linear-gradient(to top,var(--bg) 0,var(--bg) calc(100% - 40px),transparent);transition:opacity var(--t-tab) var(--ease-out)}
  :root[data-skin="systeme"].p1-defile body:not([data-p1e="competences"])::before{content:"";position:fixed;z-index:19;left:0;right:0;top:0;height:calc(var(--row) + env(safe-area-inset-top,0px) + 20px);pointer-events:none;
    background:linear-gradient(to bottom,var(--bg) 0,var(--bg) calc(100% - 20px),transparent)}
  :root[data-skin="systeme"].p1-cache body::after,:root[data-skin="systeme"].clavier body::after,:root[data-skin="systeme"] body.eleve::after,:root[data-skin="systeme"] body.showing::after,:root[data-skin="systeme"] body.showing::before{opacity:0}
  :root[data-skin="systeme"] body.eleve main{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  /* fil d'Ariane et retour : dans la rangée de la barre de navigation, à gauche ; le titre rangé se met au centre */
  :root[data-skin="systeme"] #app .crumbs{position:fixed;z-index:21;top:env(safe-area-inset-top,0px);left:max(4px,env(safe-area-inset-left,0px));right:calc(var(--gutr) + 52px);height:var(--row);margin:0;padding:0 4px;
    display:flex;flex-wrap:nowrap;align-items:center;gap:0 4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;font:400 15px/20px var(--font);color:var(--ink);white-space:nowrap;
    -webkit-mask:linear-gradient(to right,#000 calc(100% - 16px),transparent);mask:linear-gradient(to right,#000 calc(100% - 16px),transparent)}
  :root[data-skin="systeme"] #app .crumbs::-webkit-scrollbar{display:none}
  :root[data-skin="systeme"] #app .crumbs>*{flex:none;transition:opacity var(--t-screen) var(--ease-out)}
  :root[data-skin="systeme"] #app .crumbs a{min-height:44px;min-width:44px;font-weight:400;color:var(--accent);justify-content:flex-start}
  :root[data-skin="systeme"] #app .crumbs>span:not(.sep){font-weight:600;color:var(--ink)}
  :root[data-skin="systeme"] .top.titled~#app .crumbs:not(.p1-long)>:not(:first-child):not(.pick){opacity:0;pointer-events:none}
  :root[data-skin="systeme"] .top.titled~#app .crumbs:not(.p1-long)>a:first-child{max-width:44px;overflow:hidden;color:transparent}
  :root[data-skin="systeme"] .top.titled~#app .crumbs:not(.p1-long){-webkit-mask:none;mask:none;overflow:hidden}
  /* fil trop long pour la rangée (js/systeme.js pose .p1-long) : il reste en tête du contenu, sur deux lignes s'il le faut, jamais coupé */
  :root[data-skin="systeme"] #app .crumbs.p1-long{position:static;height:auto;min-height:44px;margin:0 0 6px -4px;padding:0;flex-wrap:wrap;white-space:normal;overflow:visible;-webkit-mask:none;mask:none}
}
/* chevron de retour devant le premier lien du fil (toutes tailles) */
:root[data-skin="systeme"] .crumbs>a:first-child::before{content:"";flex:none;width:12px;height:20px;margin:0 6px 0 2px;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M10 2 2 10l8 8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M10 2 2 10l8 8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
:root[data-skin="systeme"] .crumbs{font-size:15px;line-height:20px;color:var(--muted);gap:0 6px;margin:0 0 8px}
:root[data-skin="systeme"] .crumbs a{font-weight:400;color:var(--accent)}
:root[data-skin="systeme"] .crumbs .sep{color:var(--muted)}

/* ── tablette étroite (620 à 959 px) : barre d'outils, barre latérale en surimpression ── */
@media (min-width:620px){
  :root[data-skin="systeme"]{--row:52px;--gut:24px;--gutr:24px}
  :root[data-skin="systeme"] main{max-width:728px;padding:16px 24px 56px}
  :root[data-skin="systeme"] .top{padding:env(safe-area-inset-top,0px) 16px 0;gap:8px}
  :root[data-skin="systeme"] .ptitle{position:static;flex:1 1 auto;min-width:0;height:var(--row);line-height:var(--row);text-align:left;max-width:none;order:0}
  :root[data-skin="systeme"] .find{display:flex;flex:0 0 280px;max-width:280px;min-width:0;height:44px;min-height:44px;margin-left:auto;padding:0 14px;gap:8px;align-items:center;justify-content:flex-start;
    border:0;border-radius:22px;background:var(--glass-btn);color:var(--muted);font:400 15px/20px var(--font);text-decoration:none;white-space:nowrap;overflow:hidden}
  :root[data-skin="systeme"] .find span{display:inline;overflow:hidden;text-overflow:ellipsis;color:var(--muted2)}   /* sur le fond --glass-btn, --muted ne donne que 4,09:1 */
  :root[data-skin="systeme"] #theme{margin-left:0;background:transparent}
  :root[data-skin="systeme"] .side{flex-direction:column;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(16px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));overscroll-behavior:contain}
}
@media (min-width:620px) and (max-width:959px) and (min-height:501px),(min-width:620px) and (max-width:959px) and (pointer:fine){
  :root[data-skin="systeme"] #sidebtn{display:grid}
  :root[data-skin="systeme"] .side{display:flex;position:fixed;z-index:31;top:0;bottom:0;left:0;width:300px;max-width:85vw;height:100vh;height:100dvh;overflow-y:auto;
    background:var(--elev);box-shadow:0 0 40px rgba(0,0,0,.18);border-radius:0 18px 18px 0;transform:translateX(-100%);visibility:hidden;
    transition:transform 160ms var(--ease-out),visibility 0s linear 160ms}
  :root[data-skin="systeme"].p1-side .side{transform:none;visibility:visible;transition:transform var(--t-sheet) var(--ease-sheet),visibility 0s}
  :root[data-skin="systeme"] .p1-voile{display:block;position:fixed;inset:0;z-index:30;background:var(--scrim);opacity:0;visibility:hidden;transition:opacity 160ms var(--ease-out),visibility 0s linear 160ms}
  :root[data-skin="systeme"].p1-side .p1-voile{opacity:1;visibility:visible;transition:opacity 240ms var(--ease-out),visibility 0s}
}
/* ── large (960 px et plus) : barre latérale fixe, barre d'outils au-dessus du contenu ── */
@media (min-width:960px){
  :root[data-skin="systeme"]{--gut:32px;--gutr:32px}
  :root[data-skin="systeme"] body{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr)}
  :root[data-skin="systeme"] body.eleve{display:block}
  :root[data-skin="systeme"] .side{display:flex;position:sticky;top:0;z-index:2;height:100vh;height:100dvh;overflow-y:auto;background:var(--side-bg);border-right:.5px solid var(--line);box-shadow:none;transform:none;visibility:visible}
  :root[data-skin="systeme"] .top{padding:env(safe-area-inset-top,0px) 24px 0 32px}
  :root[data-skin="systeme"] .find{flex-basis:300px;max-width:300px}
  :root[data-skin="systeme"] main{max-width:744px;padding:24px 32px 64px}
  :root[data-skin="systeme"] body:is([data-p1e="accueil"],[data-p1e="competences"],[data-p1e="competence"],[data-p1e="progres"],[data-p1e="evaluer"],[data-p1e="ressources"],[data-p1e="index"],[data-p1e="eval-choix"]) main{max-width:1104px}
}
@media (min-width:960px) and (hover:hover) and (pointer:fine){
  :root[data-skin="systeme"] .p1-poignee{display:block;position:fixed;top:0;bottom:0;left:calc(var(--side-w) - 4px);width:8px;z-index:25;cursor:col-resize}
  :root[data-skin="systeme"].p1-redim,:root[data-skin="systeme"].p1-redim *{cursor:col-resize!important;-webkit-user-select:none;user-select:none}
}

/* ── iPhone couché (largeur de 620 à 959 px, hauteur de 500 px au plus, tactile) : disposition du téléphone, pas celle de la tablette ── */
@media (min-width:620px) and (max-width:959px) and (max-height:500px) and (pointer:coarse){
  :root[data-skin="systeme"]{--row:44px;--gut:max(16px,env(safe-area-inset-left,0px));--gutr:max(16px,env(safe-area-inset-right,0px))}
  :root[data-skin="systeme"] main{max-width:none;padding:8px var(--gutr) calc(var(--tabbar) + max(12px,env(safe-area-inset-bottom,0px)) + 24px) var(--gut)}
  :root[data-skin="systeme"] .top{padding:env(safe-area-inset-top,0px) var(--gutr) 0 var(--gut)}
  :root[data-skin="systeme"] .ptitle{position:absolute;left:68px;right:68px;flex:none;text-align:center}
  :root[data-skin="systeme"] .find{display:none}
  :root[data-skin="systeme"] #theme{margin-left:auto;background:var(--glass-btn)}
}

/* Rayons : app.css pose « :root[data-skin] :is(.tile,.act,.sub-i,…,#evs){border-radius:var(--r)} », dont la force est celle d'un id (#evs dans :is).
   Les rayons propres à p1 de ces éléments passent donc aussi par --r posé sur l'élément lui-même (« --r:0;border-radius:0 »). */
/* ── commandes : boutons pleins et teintés, liens, segments ── */
:root[data-skin="systeme"] .btn{min-height:50px;padding:0 22px;border:0;border-radius:25px;background:var(--accent-fill);color:var(--on);font:600 17px/22px var(--font);gap:8px;cursor:default;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-state) var(--ease-out)}
:root[data-skin="systeme"] .btn:hover,:root[data-skin="systeme"][data-theme="dark"] .btn:not(.alt):not(.soft):hover{background:var(--accent-fill);border-color:transparent}
:root[data-skin="systeme"][data-theme="dark"] .btn:not(.alt):not(.soft){background:var(--accent-fill);color:#fff}
:root[data-skin="systeme"] .btn.alt,:root[data-skin="systeme"] .btn.soft,:root[data-skin="systeme"] .btn.alt:hover,:root[data-skin="systeme"] .btn.soft:hover{background:var(--accent-bg);color:var(--accent-t);border:0}
:root[data-skin="systeme"] .btn.danger,:root[data-skin="systeme"] .btn.danger:hover{background:var(--bad);color:#fff}
:root[data-skin="systeme"][data-theme="dark"] .btn.danger:not(.alt),:root[data-skin="systeme"][data-theme="dark"] .btn.danger:not(.alt):hover{background:var(--bad);color:var(--bg)}
:root[data-skin="systeme"] .btn.alt.danger,:root[data-skin="systeme"] .btn.alt.danger:hover{background:var(--bad-bg);color:var(--bad)}
:root[data-skin="systeme"] .btn:active:not(:disabled){transform:scale(.97)}
:root[data-skin="systeme"] .btn svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){
  :root[data-skin="systeme"] .btn:not(.alt):not(.soft):not(.danger):hover{background:var(--accent-h)}
  :root[data-skin="systeme"] :is(.btn.alt,.btn.soft):not(.danger):hover{background:color-mix(in srgb,var(--accent-bg) 82%,var(--accent) 18%)}
}
:root[data-skin="systeme"] .lnk{min-height:44px;color:var(--accent);font-weight:500;font-size:15px;text-decoration:none}
:root[data-skin="systeme"] .row{gap:8px}
/* segment iOS : piste grise, curseur blanc qui glisse (posé par js/systeme.js en --x et --w) */
:root[data-skin="systeme"] .seg{position:relative;isolation:isolate;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;gap:0;padding:3px;margin:0 0 8px;border:0;border-radius:12px;background:var(--soft)}
:root[data-skin="systeme"] .seg button{position:relative;min-height:44px;padding:2px 8px;border:0;border-radius:9px;background:transparent;color:var(--txt2);font:400 15px/19px var(--font);box-shadow:none;cursor:default;transition:color var(--t-state) var(--ease-out)}
:root[data-skin="systeme"] .seg button.on,:root[data-skin="systeme"][data-theme="dark"] .seg button.on,:root[data-skin="systeme"] .seg.box button.on{background:var(--seg-on);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--seg-ring),0 2px 6px rgba(0,0,0,.12)}
:root[data-skin="systeme"] .seg.p1-cur button.on{background:transparent;box-shadow:none}
:root[data-skin="systeme"] .seg::after{content:"";position:absolute;z-index:-1;left:0;top:0;width:var(--w,0);height:var(--h,0);transform:translate(var(--x,0),var(--y,3px));transform-origin:0 0;border-radius:9px;background:var(--seg-on);box-shadow:0 0 0 1px var(--seg-ring),0 2px 6px rgba(0,0,0,.12);opacity:0}
:root[data-skin="systeme"] .seg.p1-cur::after{opacity:1}
:root[data-skin="systeme"] .seg.p1-pret::after{transition:transform var(--tc,var(--t-cursor)) var(--ease-spring),width var(--tc,var(--t-cursor)) var(--ease-spring),height var(--tc,var(--t-cursor)) var(--ease-spring)}
:root[data-skin="systeme"] .seg.box{max-width:440px}

/* ── surfaces : cartes et groupes opaques, sans bordure ni ombre ── */
:root[data-skin="systeme"] :is(.card,.panel,.score,.art,.entry,.psum,.ix>li,.aei,.corr .it){border:0;box-shadow:none;background:var(--surface);border-radius:var(--r)}
:root[data-skin="systeme"] .card{padding:16px 20px 18px}
:root[data-skin="systeme"] .badge{min-width:30px;height:22px;padding:0 6px;border-radius:7px;background:var(--cf,var(--cc));color:#fff;font:700 13px/1 var(--font);letter-spacing:0}
:root[data-skin="systeme"][data-theme="dark"] .badge{color:#fff}
:root[data-skin="systeme"] .badge.lg{min-width:44px;height:32px;padding:0 8px;border-radius:9px;font-size:16px}
:root[data-skin="systeme"] .tag{font-family:var(--font);letter-spacing:0;font-weight:600}
:root[data-skin="systeme"] .miss{background:var(--warn-bg);color:var(--warn);border-radius:14px;padding:12px 16px;font-weight:600}
:root[data-skin="systeme"] :is(.tile,.act,.sub-i,.fnav a):hover{box-shadow:none}
/* lignes de liste : pastille de code en aplat, titre, note, chevron ; groupées sur fond blanc (rayon 26), filet de 0,5 px en retrait */
:root[data-skin="systeme"] .subs{display:grid;gap:0;margin:0;padding:0;list-style:none;background:var(--surface);border-radius:26px;overflow:hidden}
:root[data-skin="systeme"] .subs>*{position:relative;min-width:0}
:root[data-skin="systeme"] .subs>*+*::before{content:"";position:absolute;z-index:1;left:58px;right:0;top:0;border-top:.5px solid var(--line);pointer-events:none}
:root[data-skin="systeme"] .sub-i{display:grid;grid-template-columns:30px minmax(0,1fr) 12px;gap:12px;align-items:center;min-height:66px;height:100%;padding:11px 16px;border:0;--r:16px;border-radius:16px;
  background:var(--surface);color:var(--txt);text-decoration:none;transition:background-color var(--t-state) var(--ease-out)}
:root[data-skin="systeme"] .subs .sub-i{--r:0;border-radius:0;background:transparent}
:root[data-skin="systeme"] .sub-i .code{display:grid;place-items:center;width:30px;height:22px;border-radius:7px;background:var(--cf,var(--cc));color:#fff;font:700 13px/1 var(--font);letter-spacing:0}
:root[data-skin="systeme"] .sub-i.bil{border-style:none}
:root[data-skin="systeme"] .sub-i.bil .code{background:var(--accent-bg);color:var(--accent-t)}
:root[data-skin="systeme"] .sub-i.bil .code svg{width:16px;height:16px;stroke-width:2.2}
:root[data-skin="systeme"] .sub-i b{display:block;font:600 17px/22px var(--font);color:var(--ink)}
:root[data-skin="systeme"] .sub-i small{margin-top:2px;font-size:13px;line-height:18px;color:var(--muted);gap:4px 8px}
:root[data-skin="systeme"] .sub-i .chev{display:block;width:12px;text-align:right;font:400 22px/1 var(--font);color:var(--muted)}
:root[data-skin="systeme"] .sub-i:active{transform:none;background:var(--soft)}
@media (hover:hover) and (pointer:fine){:root[data-skin="systeme"] .sub-i:hover{background:var(--soft)}}

/* ── accueil : grand titre, Reprendre, widgets, listes groupées, introduction en pied ── */
:root[data-skin="systeme"] .homep{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"miss" "kick" "h1" "top" "st1" "til" "st2" "act" "lead" "off";align-items:start}
:root[data-skin="systeme"] .homep .dhead,:root[data-skin="systeme"] .homep .dhead>div,:root[data-skin="systeme"] .homep .kpis{display:contents}
:root[data-skin="systeme"] .homep .miss{grid-area:miss;margin:0 0 12px}
:root[data-skin="systeme"] .homep .dhead .kicker{grid-area:kick;order:0;margin:4px 0 0}
:root[data-skin="systeme"] .homep .dhead .h1{grid-area:h1;order:0;margin:0 0 12px}
:root[data-skin="systeme"] .homep .dtop{grid-area:top;order:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
:root[data-skin="systeme"] .homep .resume{grid-column:1/-1;order:0}
:root[data-skin="systeme"] .homep>.sec-t:nth-of-type(1){grid-area:st1;order:0}
:root[data-skin="systeme"] .homep>.sec-t:nth-of-type(2){grid-area:st2;order:0}
:root[data-skin="systeme"] .homep .tiles{grid-area:til;order:0}
:root[data-skin="systeme"] .homep .acts{grid-area:act;order:0}
:root[data-skin="systeme"] .homep .dhead .lead{grid-area:lead;order:0;margin:24px 0 0;padding:14px 16px;max-width:none;border-radius:22px;background:var(--soft);color:var(--txt2);font-size:15px;line-height:20px}
:root[data-skin="systeme"] .homep .official{grid-area:off;order:0;margin:16px 4px 0}
/* carte Reprendre */
:root[data-skin="systeme"] .resume{gap:6px;padding:16px;border:0;--r:26px;border-radius:26px;background:var(--surface);box-shadow:none;overflow:visible}
:root[data-skin="systeme"] .resume::before{display:none}
:root[data-skin="systeme"] .resume .kicker{display:flex;align-items:center;gap:8px;color:var(--muted)}
:root[data-skin="systeme"] .resume .kicker .badge{min-width:30px;height:22px}
:root[data-skin="systeme"] .resume h2{margin:2px 0 0;font-size:22px;line-height:28px;font-weight:700;letter-spacing:0}
:root[data-skin="systeme"] .resume p{margin:0;font-size:15px;line-height:20px;color:var(--muted)}
:root[data-skin="systeme"] .resume .row{margin-top:10px;display:flex;flex-direction:column;align-items:stretch;gap:0}
:root[data-skin="systeme"] .resume .row>*{flex:none}
:root[data-skin="systeme"] .resume .btn{width:100%}
:root[data-skin="systeme"] .resume .lnk{justify-content:center;margin-top:4px}
/* widgets compteurs */
:root[data-skin="systeme"] .kpi2{min-height:96px;padding:14px 16px;border:0;--r:22px;border-radius:22px;background:var(--surface);display:flex;flex-direction:column;justify-content:flex-start;gap:2px}
:root[data-skin="systeme"] .kpi2 b{font:700 30px/36px var(--font);color:var(--ink);letter-spacing:-.3px}
:root[data-skin="systeme"] .kpi2 span{font-size:13px;line-height:18px;color:var(--muted)}
/* « Les 4 compétences » : lignes de groupe (pastille, titre sur deux lignes, phrase, chevron) */
:root[data-skin="systeme"] .tiles{display:block;margin:0;background:var(--surface);border-radius:26px;overflow:hidden}
:root[data-skin="systeme"] .tile{position:relative;display:block;min-height:66px;padding:12px 36px 12px 58px;border:0;--r:0;border-radius:0;background:transparent;box-shadow:none;color:var(--txt);text-decoration:none;overflow:visible;
  transition:background-color var(--t-state) var(--ease-out)}
:root[data-skin="systeme"] .tile::before{content:none}
:root[data-skin="systeme"] .tile+.tile::before{content:"";position:absolute;left:58px;right:0;top:0;width:auto;bottom:auto;border-top:.5px solid var(--line);background:none}
:root[data-skin="systeme"] .tile::after,:root[data-skin="systeme"] .act::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:14px;margin-top:-7px;background:var(--ter);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='m1.5 1.5 5 5.5-5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='m1.5 1.5 5 5.5-5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
:root[data-skin="systeme"] .tile .th{display:block}
:root[data-skin="systeme"] .tile .th .badge{position:absolute;left:16px;top:14px;min-width:30px}
:root[data-skin="systeme"] .tile .th small{display:block;font:600 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
:root[data-skin="systeme"] .tile h3{margin:1px 0 2px;font:600 17px/22px var(--font);letter-spacing:0;color:var(--ink)}
:root[data-skin="systeme"] .tile p{margin:0;font-size:13px;line-height:18px;color:var(--muted)}
:root[data-skin="systeme"] .tile:active{transform:none;background:var(--soft)}
/* Outils : lignes de 52 px, icône dans un carré teinté */
:root[data-skin="systeme"] .acts{display:block;margin:0;background:var(--surface);border-radius:26px;overflow:hidden}
:root[data-skin="systeme"] .act{position:relative;display:flex;flex-direction:column;justify-content:center;gap:0;min-height:52px;padding:9px 36px 9px 58px;border:0;--r:0;border-radius:0;background:transparent;
  color:var(--ink);font:500 17px/22px var(--font);text-decoration:none;text-align:left;transition:background-color var(--t-state) var(--ease-out)}
:root[data-skin="systeme"] .act+.act::before{content:"";position:absolute;left:58px;right:0;top:0;border-top:.5px solid var(--line)}
:root[data-skin="systeme"] .act .ai{position:absolute;left:14px;top:50%;width:30px;height:30px;margin:-15px 0 0;border-radius:8px;background:var(--accent-bg);color:var(--accent-t);display:grid;place-items:center}
:root[data-skin="systeme"] .act .ai svg{width:18px;height:18px;stroke-width:2}
:root[data-skin="systeme"] .act small{display:block;font:400 13px/18px var(--font);color:var(--muted)}
:root[data-skin="systeme"] .act:active{transform:none;background:var(--soft)}
:root[data-skin="systeme"] .act.hot{box-shadow:inset 3px 0 0 var(--accent)}
@media (hover:hover) and (pointer:fine){:root[data-skin="systeme"] :is(.tile,.act):hover{background:var(--soft)}}
/* tablette et large : Reprendre à gauche, widgets 2 x 2 à droite ; compétences et outils côte à côte */
@media (min-width:620px){
  :root[data-skin="systeme"] .homep{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;grid-template-areas:"miss miss" "kick kick" "h1 h1" "top top" "st1 st2" "til act" "lead lead" "off off"}
  :root[data-skin="systeme"] .homep .dtop{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
  /* Reprendre sur toute la largeur, puis les quatre widgets sur une rangée, à leur hauteur (D7) */
  :root[data-skin="systeme"] .homep .dtop{align-items:start}
  :root[data-skin="systeme"] .homep .resume{grid-column:1/-1;grid-row:auto}
  :root[data-skin="systeme"] .homep .resume .row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:12px}
  :root[data-skin="systeme"] .homep .resume .btn{width:auto}
  :root[data-skin="systeme"] .homep .resume .lnk{margin-top:0}
  :root[data-skin="systeme"] .kpi2{max-height:120px}
  :root[data-skin="systeme"] .tiles,:root[data-skin="systeme"] .acts{border-radius:22px}
}
@media (min-width:960px){
  :root[data-skin="systeme"] .h1{font-size:34px;line-height:41px}
  :root[data-skin="systeme"] .tiles,:root[data-skin="systeme"] .acts,:root[data-skin="systeme"] .subs,:root[data-skin="systeme"] .resume,:root[data-skin="systeme"] .kpi2{--r:18px;border-radius:18px}
  :root[data-skin="systeme"] .kpi2 b{font-size:34px;line-height:40px}
  :root[data-skin="systeme"] .lead{font-size:17px;line-height:24px}
}
/* très large : widgets sur 4 colonnes, les 4 compétences en cartes, outils sur 2 colonnes */
@media (min-width:1180px){
  :root[data-skin="systeme"] .homep{grid-template-columns:minmax(0,1fr);grid-template-areas:"miss" "kick" "h1" "top" "st1" "til" "st2" "act" "lead" "off"}
  :root[data-skin="systeme"] .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;background:none;border-radius:0;overflow:visible}
  :root[data-skin="systeme"] .tile{display:flex;flex-direction:column;gap:2px;min-height:150px;padding:16px 16px 18px;--r:18px;border-radius:18px;background:var(--surface)}
  :root[data-skin="systeme"] .tile+.tile::before,:root[data-skin="systeme"] .tile::after{content:none}
  :root[data-skin="systeme"] .tile .th{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  :root[data-skin="systeme"] .tile .th .badge{position:static}
  :root[data-skin="systeme"] .tile h3{font-size:17px;line-height:22px}
  :root[data-skin="systeme"] .tile p{margin-top:auto;padding-top:8px}
  :root[data-skin="systeme"] .acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  :root[data-skin="systeme"] .act:nth-child(2)::before{content:none}
  :root[data-skin="systeme"] .act:nth-child(even){box-shadow:inset .5px 0 0 var(--line)}
  :root[data-skin="systeme"] .act:nth-child(even)::before{left:58px}
}

/* ── compétences : segment C1 à C4 collant sous la barre, groupes par compétence ── */
:root[data-skin="systeme"] .cchips{position:sticky;top:var(--top-h,103px);z-index:5;isolation:isolate;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin:4px calc(-1 * var(--gutr)) 0 calc(-1 * var(--gut));padding:11px calc(var(--gutr) + 3px) 15px calc(var(--gut) + 3px);
  background:linear-gradient(to bottom,var(--bg),var(--bg) calc(100% - 12px),color-mix(in srgb,var(--bg) 0%,transparent))}
:root[data-skin="systeme"] .cchips::before{content:"";position:absolute;z-index:-2;left:var(--gut);right:var(--gutr);top:8px;bottom:12px;border-radius:14px;background:var(--soft)}
:root[data-skin="systeme"] .cchips::after{content:"";position:absolute;z-index:-1;left:0;top:0;width:var(--w,0);height:var(--h,0);transform:translate(var(--x,0),var(--y,11px));transform-origin:0 0;border-radius:11px;background:var(--seg-on);box-shadow:0 2px 6px rgba(0,0,0,.12);opacity:0}
:root[data-skin="systeme"] .cchips.p1-cur::after{opacity:1}
:root[data-skin="systeme"] .cchips.p1-pret::after{transition:transform var(--tc,var(--t-cursor)) var(--ease-spring),width var(--tc,var(--t-cursor)) var(--ease-spring),height var(--tc,var(--t-cursor)) var(--ease-spring)}
:root[data-skin="systeme"] .cchips button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:4px 0;border:0;--r:11px;border-radius:11px;background:transparent;
  color:var(--ink);font:500 13px/16px var(--font);text-align:center;cursor:default;white-space:nowrap;transition:color var(--t-state) var(--ease-out)}
:root[data-skin="systeme"] .cchips button.on{border:0;background:var(--seg-on);color:var(--ink);font-weight:600}
:root[data-skin="systeme"] .cchips.p1-cur button.on{background:transparent}
:root[data-skin="systeme"] .cchips button .badge{min-width:30px;height:20px;font-size:12px;border-radius:6px}
/* libellé du segment : 13 px, réduit jusqu'à 11 px dans une fenêtre étroite (écran partagé, fenêtre du Mac) pour ne jamais être coupé */
:root[data-skin="systeme"] .cchips button span:not(.badge){max-width:100%;font-size:clamp(11px,3.4vw,13px);letter-spacing:-.1px}
:root[data-skin="systeme"] .cgroup{margin:20px 0 0}
:root[data-skin="systeme"] .chead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start;padding:0;margin:0 4px 10px;border:0}
:root[data-skin="systeme"] .chead .badge.lg{min-width:36px;height:26px;font-size:14px;border-radius:8px;margin-top:0}
:root[data-skin="systeme"] .chead h2{margin:0;font-size:20px;line-height:25px;font-weight:700;flex:none}
:root[data-skin="systeme"] .chead small{margin-top:3px;font-size:13px;line-height:18px;font-weight:400;color:var(--muted)}
:root[data-skin="systeme"] .chead .btn{grid-column:2;justify-self:start;min-height:44px;padding:0 16px;font-size:15px;border-radius:22px;margin-top:4px}
@media (min-width:760px){
  :root[data-skin="systeme"] .cgroup .subs,:root[data-skin="systeme"] .chero~.subs{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root[data-skin="systeme"] .cgroup .subs>:nth-child(2)::before,:root[data-skin="systeme"] .chero~.subs>:nth-child(2)::before{content:none}
  :root[data-skin="systeme"] .cgroup .subs>:nth-child(even),:root[data-skin="systeme"] .chero~.subs>:nth-child(even){box-shadow:inset .5px 0 0 var(--line)}
}
/* large : les 4 compétences en colonnes, dans l'ordre officiel (2 colonnes jusqu'à 1359 px, 4 au-delà) */
@media (min-width:960px){
  :root[data-skin="systeme"] body[data-p1e="competences"] #app{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-items:start}
  :root[data-skin="systeme"] body[data-p1e="competences"] #app>:not(.cgroup){grid-column:1/-1}
  :root[data-skin="systeme"] body[data-p1e="competences"] .cgroup{margin-top:16px}
  /* en-têtes et listes alignés d'une colonne à l'autre (sous-grille : Safari 16 et plus ; sinon chaque colonne garde sa hauteur) */
  @supports (grid-template-rows:subgrid){:root[data-skin="systeme"] body[data-p1e="competences"] .cgroup{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;align-content:start}}
  :root[data-skin="systeme"] body[data-p1e="competences"] .cgroup .subs{align-self:start;align-content:start}
  :root[data-skin="systeme"] body[data-p1e="competences"] .cgroup .subs{grid-template-columns:minmax(0,1fr)}
  :root[data-skin="systeme"] body[data-p1e="competences"] .cgroup .subs>:nth-child(2)::before{content:"";display:block}
  :root[data-skin="systeme"] body[data-p1e="competences"] .cgroup .subs>:nth-child(even){box-shadow:none}
  :root[data-skin="systeme"] body[data-p1e="competences"] .sub-i{min-height:52px;padding:9px 14px}
  :root[data-skin="systeme"] body[data-p1e="competences"] .sub-i b{font-size:15px;line-height:20px}
  /* en-tête de colonne : le bouton « Voir la compétence » au même niveau dans chaque colonne */
  :root[data-skin="systeme"] body[data-p1e="competences"] .chead{min-height:96px;grid-template-rows:minmax(0,1fr) auto;align-content:stretch}
  :root[data-skin="systeme"] body[data-p1e="competences"] .chead .btn{align-self:end}
  :root[data-skin="systeme"] .sub-i.p1-sel{background:var(--accent-bg)}
  /* les 4 compétences sont toutes affichées (app.css) : pas de segment C1 à C4, comme dans la v18 */
  :root[data-skin="systeme"] .cchips{display:none}
}
/* compétence avec inspecteur, colonne de lecture de moins de 600 px : sous-compétences sur une colonne */
@media (min-width:1180px) and (max-width:1439px){
  :root[data-skin="systeme"] .p1-col .chero~.subs{grid-template-columns:minmax(0,1fr)}
  :root[data-skin="systeme"] .p1-col .chero~.subs>:nth-child(2)::before{content:""}
  :root[data-skin="systeme"] .p1-col .chero~.subs>:nth-child(even){box-shadow:none}
}
@media (min-width:1360px){
  :root[data-skin="systeme"] body[data-p1e="competences"] #app{grid-template-columns:repeat(4,minmax(0,1fr))}
  :root[data-skin="systeme"] body[data-p1e="competences"] .chead{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;min-height:150px}
  :root[data-skin="systeme"] body[data-p1e="competences"] .chead .btn{grid-column:1}
  :root[data-skin="systeme"] body[data-p1e="competences"] .chead h2{font-size:17px;line-height:22px}
  :root[data-skin="systeme"] body[data-p1e="competences"] .chead .badge{justify-self:start}
  /* tableau en 4 colonnes : toute la largeur de la fenêtre, code au-dessus du titre pour laisser la ligne au texte */
  :root[data-skin="systeme"] body[data-p1e="competences"] main{max-width:none}
  :root[data-skin="systeme"] body[data-p1e="competences"] .sub-i{grid-template-columns:minmax(0,1fr) 12px;grid-template-areas:"code chev" "txt chev";gap:4px 10px;padding:10px 12px 10px 14px}
  :root[data-skin="systeme"] body[data-p1e="competences"] .sub-i .code{grid-area:code;justify-self:start}
  :root[data-skin="systeme"] body[data-p1e="competences"] .sub-i>span:not(.code):not(.chev){grid-area:txt}
  :root[data-skin="systeme"] body[data-p1e="competences"] .sub-i .chev{grid-area:chev}
  :root[data-skin="systeme"] body[data-p1e="competences"] .cgroup .subs>*+*::before{left:14px}
}

/* ── page de compétence : pastille, grand titre au verbe coloré, ouverture du guide en groupe, actions ── */
:root[data-skin="systeme"] .chero{position:static;padding:0;margin:0 0 24px;border:0;--r:0;border-radius:0;background:transparent;overflow:visible}
:root[data-skin="systeme"] .chero::before{content:none}
:root[data-skin="systeme"] .chero .th{display:flex;align-items:center;gap:10px;margin:4px 0 8px}
:root[data-skin="systeme"] .chero .th small{font:600 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
:root[data-skin="systeme"] .chero h1{margin:0 0 14px;font-size:34px;line-height:41px;font-weight:700;letter-spacing:-.4px}
:root[data-skin="systeme"] .cintro{max-width:none;margin:0 0 12px;padding:14px 16px;border-radius:26px;background:var(--surface)}
:root[data-skin="systeme"] .chero .cintro p:not(.gsig){margin:0;font-size:15px;line-height:20px;color:var(--txt)}
:root[data-skin="systeme"] .cintro .gsig{margin:0 0 4px}
:root[data-skin="systeme"] .gsig.g,:root[data-skin="systeme"] .gsig.a{font:600 13px/18px var(--font);letter-spacing:0;text-transform:none}
:root[data-skin="systeme"] .gsig.g{color:var(--muted)}
:root[data-skin="systeme"] .gsig.a{color:var(--muted)}
:root[data-skin="systeme"] .chero .cmeta{margin:4px 0 14px;font-size:13px;line-height:18px;color:var(--muted)}
:root[data-skin="systeme"] .chero .row{display:flex;flex-direction:column;align-items:stretch;gap:8px}
:root[data-skin="systeme"] .chero .row>*{flex:none}
@media (min-width:620px){
  :root[data-skin="systeme"] .chero .row{flex-direction:row;flex-wrap:wrap}
  :root[data-skin="systeme"] .chero .row>*{flex:0 1 auto}
  :root[data-skin="systeme"] .cintro{border-radius:22px}
}
@media (min-width:960px){:root[data-skin="systeme"] .cintro{border-radius:18px}}

/* ── inspecteur (1180 px et plus) : volet de 320 px dans #app, collant, défilement propre ── */
:root[data-skin="systeme"] .p1-grid{display:grid;grid-template-columns:minmax(0,680px) 320px;column-gap:32px;align-items:start;justify-content:center}
:root[data-skin="systeme"] .p1-col{min-width:0}
:root[data-skin="systeme"] .p1-insp{position:sticky;top:calc(var(--top-h,52px) + 16px);max-height:calc(100vh - var(--top-h,52px) - 32px);max-height:calc(100dvh - var(--top-h,52px) - 32px);overflow-y:auto;
  overscroll-behavior:contain;padding:6px 18px 8px;border-radius:18px;background:var(--surface)}
:root[data-skin="systeme"] .p1-insp .cintro{margin:0;padding:12px 0;border-radius:0;background:transparent}
:root[data-skin="systeme"] .p1-insp .cintro+.cintro{border-top:.5px solid var(--line)}
:root[data-skin="systeme"] .p1-insp .cintro p:not(.gsig){font-size:15px;line-height:21px;color:var(--txt)}

/* ── recherche : champ capsule, résultats en groupe ── */
:root[data-skin="systeme"] input.search{max-width:560px;min-height:44px;height:44px;padding:0 16px 0 40px;border:0;border-radius:22px;background-color:var(--soft);color:var(--ink);font:400 17px/22px var(--font);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C6C70' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:14px center;background-size:18px 18px;-webkit-appearance:none;appearance:none}
:root[data-skin="systeme"][data-theme="dark"] input.search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1A6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E")}
:root[data-skin="systeme"] input.search::placeholder{color:var(--muted)}
:root[data-skin="systeme"] #res.subs:empty{display:none}
:root[data-skin="systeme"] #res.subs{margin-top:8px}
:root[data-skin="systeme"] #cnt{margin:10px 4px 0;color:var(--muted)}

/* ── icônes des états (Lucide circle-check, circle-x, check, x ; Phosphor circle-half), en masques ou en fonds ── */
:root[data-skin="systeme"]{
  --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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16 9-5.5 5.5L8 12'/%3E%3C/svg%3E");
  --i-mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm8,16.37a86.4,86.4,0,0,1,16,3V212.67a86.4,86.4,0,0,1-16,3Zm32,9.26a87.81,87.81,0,0,1,16,10.54V195.83a87.81,87.81,0,0,1-16,10.54ZM40,128a88.11,88.11,0,0,1,80-87.63V215.63A88.11,88.11,0,0,1,40,128Zm160,50.54V77.46a87.82,87.82,0,0,1,0,101.08Z'/%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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
  --i-ck: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='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-x: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='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --i-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='m1.5 1.5 5 5.5-5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── rayons des commandes : la règle d'app.css « :is(.btn,.seg,.ftabs button,.lk,…){border-radius:var(--rs)} » (force 0,4,0)
   l'emporte sur un border-radius simple ; chaque commande porte donc son propre --rs ── */
:root[data-skin="systeme"] .btn{--rs:25px}
:root[data-skin="systeme"] :is(.lk,.find){--rs:22px}
:root[data-skin="systeme"] .tag{--rs:999px}
:root[data-skin="systeme"] :is(.badge,.sub-i .code){--rs:7px}
:root[data-skin="systeme"] .badge.lg{--rs:9px}
:root[data-skin="systeme"] .kpi{--rs:18px}
:root[data-skin="systeme"] .icon-btn{--rs:50%}
:root[data-skin="systeme"] .ic{--rs:0}
:root[data-skin="systeme"] .seg{--rs:12px}
:root[data-skin="systeme"] .ftabs button{--rs:9px}
:root[data-skin="systeme"] .opt{--rs:0}
/* étiquettes et libellés de formulaire : 13 px, sans capitales */
:root[data-skin="systeme"] .lbl{font:600 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
:root[data-skin="systeme"] .lbl .opt-l{font-weight:400;color:var(--muted)}
:root[data-skin="systeme"] :is(.evsel,#evs,.ta){min-height:50px;padding:0 14px;border:0;--r:12px;border-radius:12px;background:var(--soft);color:var(--ink);font:400 17px/22px var(--font)}
:root[data-skin="systeme"] .ta{padding:12px 14px;min-height:120px}
:root[data-skin="systeme"] .tag{font-size:13px;line-height:18px;padding:2px 9px;gap:4px}
:root[data-skin="systeme"] .tag:is(.ap-a,.ap-c,.ap-n)::before{content:"";flex:none;width:13px;height:13px;background:currentColor;-webkit-mask:var(--ap-ic) center/contain no-repeat;mask:var(--ap-ic) center/contain no-repeat}
:root[data-skin="systeme"] :is(.ap-a,.p1-va){--ap-ic:var(--i-ok)}
:root[data-skin="systeme"] :is(.ap-c,.p1-vc){--ap-ic:var(--i-mi)}
:root[data-skin="systeme"] :is(.ap-n,.p1-vn){--ap-ic:var(--i-ko)}

/* ── fiche, en-tête : grand titre sur toute la largeur, rangée de méta (pastille, verbe, livret ; partie à droite) ── */
:root[data-skin="systeme"] .fhero{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center;max-width:none;margin:4px 0 12px;padding:0;
  border:0;--r:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
:root[data-skin="systeme"] .fhero::before{content:none}
:root[data-skin="systeme"] .fhero .ttl,:root[data-skin="systeme"] .fhero .ttl>div{display:contents}
:root[data-skin="systeme"] :where(.fhero>*,.fhero .ttl>div>*){grid-column:1/-1;min-width:0}
:root[data-skin="systeme"] .fhero h1{grid-row:1;margin:0 0 6px;font:700 28px/34px var(--font);letter-spacing:-.2px;color:var(--ink);text-transform:none}
:root[data-skin="systeme"] .fhero .badge.lg{grid-column:1;grid-row:2;float:none;justify-self:start;min-width:30px;height:22px;margin:0;padding:0 6px;font-size:13px;border-radius:7px}
:root[data-skin="systeme"] .fhero .fmeta{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0;padding-right:var(--kick-w,0px);font-size:13px;line-height:18px;color:var(--muted)}
:root[data-skin="systeme"] .fhero .fmeta .cvb{font-weight:600;color:var(--cc,var(--ink))}
:root[data-skin="systeme"] .fhero .fmeta .lvr::before{content:"·";margin-right:6px;color:var(--muted)}
:root[data-skin="systeme"] .fhero .lvn{margin:6px 0 0;font-size:13px;line-height:18px;color:var(--muted);max-width:68ch}
:root[data-skin="systeme"] .fhero .off{margin:6px 0 0;font-size:13px;line-height:18px}
:root[data-skin="systeme"] .fhero .s{margin:6px 0 0;max-width:68ch;font-size:15px;line-height:20px;color:var(--txt2)}
/* partie en cours (« C1d · partie 1 sur 3 ») : dans la barre de lecture, posée à droite de la rangée de méta (--meta-y mesuré par js/systeme.js) */
:root[data-skin="systeme"] .fhero .ftw{position:static;margin:0;padding:0;border:0}
:root[data-skin="systeme"] .fhero .ftw>.kicker{position:absolute;right:0;top:var(--meta-y,auto);margin:0;font:600 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--muted);white-space:nowrap}
:root[data-skin="systeme"] .fhero .ftw-notes{margin:4px 0 0}
/* D14 : « C1d · partie 1 sur 3 » devient « Partie 1 sur 3 » ; le code reste dans la pastille et dans « C1d · 4 sur 9 » ; le séparateur est enveloppé par js/systeme.js */
:root[data-skin="systeme"] .fhero .ftw>.kicker .cd{display:none}
:root[data-skin="systeme"] .fhero .ftw>.kicker .p1-sep{position:absolute;opacity:0;pointer-events:none}
:root[data-skin="systeme"] .fhero .ftw>.kicker::first-letter{text-transform:uppercase}
:root[data-skin="systeme"] .fhero .phors{margin:0;font:600 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
:root[data-skin="systeme"] .fhero .pts{margin:2px 0 0;max-width:68ch;font-size:13px;line-height:18px;color:var(--muted)}
/* barre de lecture : onglets de la vue, parties, boîte (évaluation : partie travaillée, boîte, Ouvrir la fiche) */
:root[data-skin="systeme"] .fhero .freg{position:static;display:flex;align-items:center;min-width:0;margin:8px 0 0}
:root[data-skin="systeme"] .fhero .freg>*{flex:none;margin:0}
:root[data-skin="systeme"] .fhero .boxw{display:flex;align-items:center;gap:0;margin:0}
:root[data-skin="systeme"] .fhero .boxw>.kicker{display:none}
:root[data-skin="systeme"] .fhero .scp{margin:0;max-width:none}
:root[data-skin="systeme"] .fhero #scp-l{margin:8px 0 0;font:400 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
:root[data-skin="systeme"] .fhero #scp-l+.freg{margin-top:6px}
:root[data-skin="systeme"] .fhero .fopen{display:flex;flex-wrap:nowrap;margin:0}
:root[data-skin="systeme"] .fhero .fopen .btn{min-height:44px;padding:0 16px;--rs:22px;border-radius:22px;font-size:15px;line-height:20px;white-space:nowrap}
:root[data-skin="systeme"] .fhero .phors+*{margin-top:2px}
:root[data-skin="systeme"] .fhero>.phors{margin-top:6px}
/* segments de la barre : piste --soft, cases de 44, curseur blanc */
:root[data-skin="systeme"] .fhero .seg.box,:root[data-skin="systeme"] .fhero .seg.pseg{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-columns:none;max-width:none;margin:0;padding:3px;gap:0;border:0;border-radius:12px;background:var(--soft)}
:root[data-skin="systeme"] .fhero .seg.box button,:root[data-skin="systeme"] .fhero .seg.pseg button{min-height:44px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--txt2);font:400 15px/19px var(--font);white-space:nowrap;box-shadow:none}
:root[data-skin="systeme"] .fhero .seg.box button+button{border-left:0}
:root[data-skin="systeme"] .fhero .seg.box button.on,:root[data-skin="systeme"] .fhero .seg.pseg button.on{background:var(--seg-on);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--seg-ring),0 2px 6px rgba(0,0,0,.12)}
:root[data-skin="systeme"] .fhero .seg.box.p1-cur button.on,:root[data-skin="systeme"] .fhero .seg.pseg.p1-cur button.on{background:transparent;box-shadow:none}
/* onglets de la vue (.ftabs) en segment iOS : la barre n'est plus collante, le curseur glisse (--x, --y, --w, --h posés par js/systeme.js) */
:root[data-skin="systeme"] .ftabs{position:relative;top:auto;z-index:auto;isolation:isolate;display:grid;gap:0;margin:0;padding:3px;max-width:none;border-radius:12px;background:var(--soft);-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-skin="systeme"] .ftabs::after{content:"";position:absolute;z-index:-1;left:0;top:0;width:var(--w,0);height:var(--h,0);transform:translate(var(--x,0),var(--y,3px));transform-origin:0 0;border-radius:9px;background:var(--seg-on);box-shadow:0 0 0 1px var(--seg-ring),0 2px 6px rgba(0,0,0,.12);opacity:0}
:root[data-skin="systeme"] .ftabs.p1-cur::after{opacity:1}
:root[data-skin="systeme"] .ftabs.p1-pret::after{transition:transform var(--tc,var(--t-cursor)) var(--ease-spring),width var(--tc,var(--t-cursor)) var(--ease-spring),height var(--tc,var(--t-cursor)) var(--ease-spring)}
:root[data-skin="systeme"] .ftabs button{position:relative;min-height:44px;margin:0;padding:0 8px;border:0;border-radius:9px;background:transparent;color:var(--txt2);font:400 13px/15px var(--font);box-shadow:none;cursor:default;transition:color var(--t-state) var(--ease-out)}
:root[data-skin="systeme"] .ftabs button.on,:root[data-skin="systeme"][data-theme="dark"] .ftabs button.on{background:var(--seg-on);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--seg-ring),0 2px 6px rgba(0,0,0,.12)}
:root[data-skin="systeme"] .ftabs.steps button:not(.on) span{font-weight:500}
:root[data-skin="systeme"] .ftabs.p1-cur button.on,:root[data-skin="systeme"][data-theme="dark"] .ftabs.p1-cur button.on{background:transparent;box-shadow:none}
:root[data-skin="systeme"] .ftabs.three{grid-template-columns:96px 112px 108px}
:root[data-skin="systeme"] .ftabs.three button{padding:0 6px;text-wrap:balance}
/* étapes P E D A R C : lettre, nom de l'étape choisie, jauge en filet, coche des étapes faites */
:root[data-skin="systeme"] .ftabs.steps{display:flex;grid-template-columns:none}
:root[data-skin="systeme"] .ftabs.steps button{flex:none;width:52px;min-width:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 4px}
:root[data-skin="systeme"] .ftabs.steps button:first-child{border:0;margin-right:0}
:root[data-skin="systeme"] .ftabs.steps button.past,:root[data-skin="systeme"] .ftabs.steps button.past:first-child{background:transparent;border:0;color:var(--txt2)}
:root[data-skin="systeme"] .ftabs.steps button.on{flex:none}
:root[data-skin="systeme"] .ftabs.steps span{font:800 17px/20px var(--font);letter-spacing:0}
:root[data-skin="systeme"] .ftabs.steps em{font:600 13px/15px var(--font);font-style:normal;letter-spacing:0;white-space:nowrap}
:root[data-skin="systeme"] .ftabs.steps .lvl{width:22px;max-width:70%;height:3px;margin-top:2px;border-radius:2px;background:var(--fill2)}
:root[data-skin="systeme"] .ftabs.steps button.on .lvl{background:var(--fill2)}
:root[data-skin="systeme"] .ftabs.steps .lvl i,:root[data-skin="systeme"] .ftabs.steps button.on .lvl i{background:var(--accent)}
:root[data-skin="systeme"] .ftabs.steps button .ck{top:4px;right:4px;color:var(--accent-t)}
/* parties de la fiche (en-tête et COMMENT) : capsules de 44, partie choisie en aplat d'accent */
:root[data-skin="systeme"] :is(.ftw,.pcw) .ptabs{display:flex;flex-wrap:nowrap;gap:8px;margin:0;padding:0;overflow:visible;border:0}
:root[data-skin="systeme"] :is(.ftw,.pcw) .ptabs button{position:relative;flex:none;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;min-width:44px;min-height:44px;height:44px;margin:0;padding:0 16px;
  border:0;border-radius:22px;background:var(--surface);color:var(--ink);font:600 15px/20px var(--font);white-space:nowrap;transition:background-color var(--t-state) var(--ease-out),color var(--t-state) var(--ease-out)}
:root[data-skin="systeme"] :is(.ftw,.pcw) .ptabs button.on,:root[data-skin="systeme"] :is(.ftw,.pcw) .ptabs button.on:hover{background:var(--accent-bg);color:var(--accent-t);border:0}
:root[data-skin="systeme"] .pcw{margin:0 0 12px;border:0}
:root[data-skin="systeme"] .pcw .ptabs{flex-wrap:wrap}
:root[data-skin="systeme"] .pcw .ptabs button{background:var(--soft)}
:root[data-skin="systeme"] .pcw .phors{margin:8px 0 0;font:600 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
@media (hover:hover) and (pointer:fine){:root[data-skin="systeme"] :is(.ftw,.pcw) .ptabs button:not(.on):hover{background:var(--fill2);color:var(--ink)}}

/* capsule « C1d · 4 sur 9 » : ouvre la feuille des sous-compétences */
:root[data-skin="systeme"] .pick{min-height:44px;padding:0 12px 0 14px;gap:4px;border:0;border-radius:22px;background:var(--surface);color:var(--ink);font:600 15px/20px var(--font);cursor:default}
:root[data-skin="systeme"] .pick svg{width:16px;height:16px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){:root[data-skin="systeme"] .pick:hover{background:var(--fill2)}}

/* ── fiche, téléphone : barre de lecture sur deux rangées (onglets de la vue, puis parties et boîte qui défilent de côté), accessoire flottant, fil dans la barre ── */
@media (max-width:619px),(max-width:959px) and (max-height:500px) and (pointer:coarse){
  /* une seule rangée qui défile (évaluation : partie travaillée, boîte, Ouvrir la fiche) */
  :root[data-skin="systeme"] .fhero .freg{height:50px;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gutr));padding:0 0 0 var(--gut);overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding:0 var(--gutr) 0 var(--gut)}
  :root[data-skin="systeme"] .fhero .freg::-webkit-scrollbar{display:none}
  :root[data-skin="systeme"] .fhero .freg>*{scroll-snap-align:start}
  /* fondu de 16 px au bord droit (pseudo collant : un masque couperait la partie en cours, posée hors de la rangée) */
  :root[data-skin="systeme"] .fhero .freg::after{content:"";position:sticky;right:0;z-index:1;flex:none;align-self:stretch;width:var(--gutr);pointer-events:none;
    background:linear-gradient(to right,color-mix(in srgb,var(--bg) 0%,transparent),var(--bg))}
  /* filets verticaux de 24 px entre les groupes */
  :root[data-skin="systeme"] .fhero .freg>:not(.seg):not(.ftabs):not(:first-child){margin-left:12px;padding-left:13px;background:linear-gradient(var(--line),var(--line)) 0 50%/1px 24px no-repeat}
  :root[data-skin="systeme"] .fhero .freg>.seg:not(:first-child){margin-left:25px;overflow:visible}
  :root[data-skin="systeme"] .fhero .freg>.seg:not(:first-child)::before{content:"";position:absolute;left:-13px;top:50%;width:1px;height:24px;margin-top:-12px;background:var(--line)}
  /* fiche : la rangée des onglets de la vue reste entière et immobile (collante à gauche), les parties et la boîte passent dessous et défilent de côté (U5) */
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs){display:grid;grid-template-columns:max-content max-content;grid-auto-rows:auto;align-items:center;column-gap:0;row-gap:8px;height:auto;padding-bottom:0}
  :root[data-skin="systeme"] .fhero .freg>.ftabs{grid-column:1/-1;grid-row:1;position:sticky;left:var(--gut);width:min(calc(100vw - var(--gut) - var(--gutr)),520px);scroll-snap-align:none}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.ftw{grid-row:2;grid-column:1}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.boxw{grid-row:2;grid-column:2}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.ftw:not(:first-child){margin-left:0;padding-left:0;background:none}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)::after{display:none}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>:last-child{margin-right:var(--gutr)}
  /* évaluation (D3) : « Partie travaillée » en tête de la rangée qui défile (js/systeme.js l'y place) : une ligne de moins au-dessus de la première appréciation */
  :root[data-skin="systeme"] body.p1-eval .fhero h1{font-size:24px;line-height:30px;margin-bottom:4px}
  :root[data-skin="systeme"] .fhero .freg>#scp-l+*{margin-left:0;padding-left:0;background:none}
  :root[data-skin="systeme"] .fhero .freg>#scp-l{flex:none;align-self:center;max-width:76px;margin:0 12px 0 0;white-space:normal;font:400 13px/16px var(--font);scroll-snap-align:none}
  :root[data-skin="systeme"] .fhero .ftabs.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  :root[data-skin="systeme"] .fhero .freg .ptabs button{padding:0 12px}
  :root[data-skin="systeme"] .fhero .ftabs.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
  :root[data-skin="systeme"] .fhero .ftabs.steps button{width:auto;min-width:0}
  :root[data-skin="systeme"] .fhero .ftabs.steps button em{display:none}
  :root[data-skin="systeme"] .fhero .ftabs.steps:not(:has(>:nth-child(7))) button.on{padding:0 4px}
  /* accessoire : Leçon et Pédagogie, Montrer, Évaluer, 8 px au-dessus de la barre d'onglets */
  :root[data-skin="systeme"] .fhero .fbar{position:fixed;z-index:20;left:var(--gut);right:var(--gutr);bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + var(--tabbar) + 8px);
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-auto-flow:row;grid-auto-columns:auto;gap:3px;align-items:center;height:56px;margin:0;padding:2px 3px;border-radius:28px;
    background:var(--glass);-webkit-backdrop-filter:var(--verre);backdrop-filter:var(--verre);border:.5px solid var(--glass-line);box-shadow:0 6px 20px rgba(0,0,0,.10),var(--glass-hi);
    transition:transform var(--t-tab) var(--ease-out),visibility 0s}
  :root[data-skin="systeme"] .fhero .fbar .seg{--rs:25px;height:50px;margin:0;max-width:none;padding:3px;border-radius:25px;background:var(--glass-btn)}
  :root[data-skin="systeme"] .fhero .fbar .seg button{min-height:44px;border-radius:22px}
  :root[data-skin="systeme"] .fhero .fbar .seg::after{border-radius:22px}
  :root[data-skin="systeme"] .fhero .fact{display:flex;gap:3px}
  :root[data-skin="systeme"] .fhero .fact .btn{flex-direction:column;justify-content:center;gap:1px;width:60px;min-width:60px;height:50px;min-height:50px;padding:0;border:0;border-radius:25px;font:600 13px/15px var(--font)}
  :root[data-skin="systeme"] .fhero .fact .btn svg{width:20px;height:20px}
  :root[data-skin="systeme"].p1-cache .fhero .fbar{transform:translateY(calc(var(--tabbar) + 8px))}
  :root[data-skin="systeme"].clavier .fhero .fbar{visibility:hidden}
  :root[data-skin="systeme"] body.p1-fiche main{padding-bottom:calc(var(--tabbar) + max(12px,env(safe-area-inset-bottom,0px)) + 88px)}
  :root[data-skin="systeme"] body.p1-fiche::after{height:calc(var(--tabbar) + max(12px,env(safe-area-inset-bottom,0px)) + 84px)}
  /* fil de la fiche (D5) : « ‹ Compétences › » à gauche, comme le bouton retour d'iOS ; la capsule « C1d · 4 sur 9 » à droite, hors du fil, jamais dessus.
     Le lien vers la compétence est masqué ici : son nom (« C1 · Maîtriser ») reste écrit sous le titre, et la capsule ouvre la liste de ses sous-compétences. */
  :root[data-skin="systeme"] #app .crumbs:has(.pick){right:calc(var(--gutr) + 52px + var(--pick-w,136px) + 8px);-webkit-mask:none;mask:none;padding-right:0}
  :root[data-skin="systeme"] #app .crumbs:has(.pick)>a:nth-of-type(2),:root[data-skin="systeme"] #app .crumbs:has(.pick)>span:nth-of-type(2){display:none}
  :root[data-skin="systeme"] #app .crumbs .pick{position:fixed;z-index:21;top:env(safe-area-inset-top,0px);right:calc(var(--gutr) + 52px);margin:0;flex:none;height:44px;min-height:44px;padding:0 12px 0 14px;gap:4px;border:0;border-radius:22px;
    background:var(--fill2);color:var(--ink);font:600 15px/20px var(--font)}
  :root[data-skin="systeme"] body.p1-fiche .ptitle{left:52px;right:calc(var(--gutr) + 52px + var(--pick-w,136px) + 8px)}
}
/* ── iPhone couché, fiche (U4, M16) : l'accessoire se range à droite, dans la rangée de la barre d'onglets ; une seule rangée de réglages qui défile ── */
@media (min-width:560px) and (max-width:959px) and (max-height:500px) and (pointer:coarse){
  :root[data-skin="systeme"] body.p1-fiche .bottom{right:auto}
  :root[data-skin="systeme"] body.p1-fiche .fhero .fbar{left:auto;right:var(--gutr);bottom:max(12px,env(safe-area-inset-bottom,0px));width:300px;height:var(--tabbar);padding:3px;border-radius:calc(var(--tabbar) / 2)}
  :root[data-skin="systeme"].p1-cache body.p1-fiche .fhero .fbar{transform:none}
  :root[data-skin="systeme"] body.p1-fiche main{padding-bottom:calc(var(--tabbar) + max(12px,env(safe-area-inset-bottom,0px)) + 24px)}
  :root[data-skin="systeme"] body.p1-fiche::after{height:calc(var(--tabbar) + max(12px,env(safe-area-inset-bottom,0px)) + 20px)}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs){display:flex;height:50px;row-gap:0}
  :root[data-skin="systeme"] .fhero .freg>.ftabs{position:static;width:auto;flex:none}
  :root[data-skin="systeme"] .fhero .ftabs.three{grid-template-columns:96px 112px 108px}
  :root[data-skin="systeme"] .fhero .ftabs.steps{display:flex}
  :root[data-skin="systeme"] .fhero .ftabs.steps button{flex:none;width:52px}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.ftw{margin-left:12px;padding-left:13px;background:linear-gradient(var(--line),var(--line)) 0 50%/1px 24px no-repeat}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)::after{display:block}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>:last-child{margin-right:0}
}
/* ── téléphone étroit (moins de 360 px : iPhone SE de première génération, écran partagé 1/3, fenêtre étroite sur Mac) ──
   Libellés toujours en 11 px : la barre d'onglets et l'accessoire s'approchent à 8 px des bords, le cercle Recherche passe à 56,
   les colonnes prennent la largeur de leur libellé (« Compétences » ne tient pas dans un quart de la barre). */
@media (max-width:359px){
  :root[data-skin="systeme"] .bottom{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));grid-template-columns:repeat(4,auto) 60px}
  :root[data-skin="systeme"] .bottom::before{inset:0 60px 0 0}
  :root[data-skin="systeme"] .bottom a{min-width:44px;padding:0 2px}
  :root[data-skin="systeme"] .bottom a.tab-find{align-self:center;width:56px;height:56px;min-height:56px}
  :root[data-skin="systeme"] .fhero .fbar{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px))}
  :root[data-skin="systeme"] .fhero .fact .btn{width:50px;min-width:50px;font-size:11px}
}
/* fiche, à partir de 620 px : la barre Leçon et Pédagogie, Montrer et Évaluer reste dans l'en-tête ; barre de lecture sur deux rangées */
@media (min-width:960px),(min-width:620px) and (min-height:501px),(min-width:620px) and (pointer:fine){
  :root[data-skin="systeme"] .fhero h1{font-size:32px;line-height:38px;margin-bottom:8px}
  :root[data-skin="systeme"] .fhero .fmeta,:root[data-skin="systeme"] .fhero .ftw>.kicker{font-size:15px;line-height:20px}
  :root[data-skin="systeme"] .fhero .s{font-size:17px;line-height:24px}
  :root[data-skin="systeme"] .fhero .fbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0}
  :root[data-skin="systeme"] .fhero .fbar .seg{flex:0 1 320px;max-width:320px;margin:0}
  :root[data-skin="systeme"] .fhero .fact{display:flex;gap:8px}
  :root[data-skin="systeme"] .fhero .fact .btn{flex-direction:row;width:auto;min-height:44px;height:44px;padding:0 18px 0 14px;gap:6px;border:0;--rs:22px;border-radius:22px;font:600 15px/20px var(--font)}
  :root[data-skin="systeme"] .fhero .fact .btn svg{width:18px;height:18px}
  :root[data-skin="systeme"] .fhero .freg{flex-wrap:wrap;column-gap:12px;row-gap:8px;margin-top:12px}
  :root[data-skin="systeme"] .fhero .freg>.ftabs{flex:1 0 100%}
  :root[data-skin="systeme"] .fhero .ftabs.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  :root[data-skin="systeme"] .fhero .ftabs.three button{font-size:15px;line-height:19px}
  :root[data-skin="systeme"] .fhero .ftabs.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
  :root[data-skin="systeme"] .fhero .ftabs.steps button{width:auto;min-width:0;min-height:52px}
  :root[data-skin="systeme"] .fhero .ftabs.steps em{display:block;font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  :root[data-skin="systeme"] .fhero .ftw .ptabs{flex-wrap:wrap}
}
/* ── fiche, tablette (620 à 959 px) : accessoire flottant de 560 px au pouce, centré en bas (spec 3.2, D2) ; parties et boîte sur une seule rangée ──
   La page n'a pas de barre d'onglets à cette taille : l'accessoire prend sa place, comme sur le téléphone. Les parties défilent de côté, la boîte reste entière à droite. */
@media (min-width:620px) and (max-width:959px) and (min-height:501px),(min-width:620px) and (max-width:959px) and (pointer:fine){
  :root[data-skin="systeme"] .fhero .fbar{position:fixed;z-index:20;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom,0px));width:min(560px,calc(100% - 48px));height:56px;margin:0 auto;padding:3px;
    flex-wrap:nowrap;gap:3px;border-radius:28px;background:var(--glass);-webkit-backdrop-filter:var(--verre);backdrop-filter:var(--verre);border:.5px solid var(--glass-line);box-shadow:0 6px 20px rgba(0,0,0,.10),var(--glass-hi)}
  :root[data-skin="systeme"] .fhero .fbar .seg{flex:1 1 auto;max-width:none;height:50px;--rs:25px;border-radius:25px;background:var(--glass-btn)}
  :root[data-skin="systeme"] .fhero .fbar .seg button{min-height:44px;border-radius:22px}
  :root[data-skin="systeme"] .fhero .fbar .seg::after{border-radius:22px}
  :root[data-skin="systeme"] .fhero .fact{gap:3px}
  :root[data-skin="systeme"] .fhero .fact .btn{height:50px;min-height:50px;--rs:25px;border-radius:25px}
  :root[data-skin="systeme"].clavier .fhero .fbar{visibility:hidden}
  :root[data-skin="systeme"] body.p1-fiche main{padding-bottom:104px}
  :root[data-skin="systeme"] .fhero .freg>.ftw{flex:1 1 0;min-width:0}
  :root[data-skin="systeme"] .fhero .freg>.boxw{flex:none}
  :root[data-skin="systeme"] .fhero .ftw .ptabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;margin:-4px 0;padding:4px 16px 4px 2px;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    -webkit-mask:linear-gradient(to right,#000 calc(100% - 16px),transparent);mask:linear-gradient(to right,#000 calc(100% - 16px),transparent)}
  :root[data-skin="systeme"] .fhero .ftw .ptabs::-webkit-scrollbar{display:none}
  :root[data-skin="systeme"] .fhero .ftw .ptabs button{padding:0 12px;scroll-snap-align:start}
}
/* ── fiche, 960 px et plus : barre de lecture en une seule rangée qui défile de côté (spec 4.4, D1) ── */
@media (min-width:960px){
  :root[data-skin="systeme"] .fhero .freg{flex-wrap:nowrap;margin:8px -2px 0;padding:4px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
  :root[data-skin="systeme"] .fhero .freg::-webkit-scrollbar{display:none}
  :root[data-skin="systeme"] .fhero .freg>*{scroll-snap-align:start}
  :root[data-skin="systeme"] .fhero .freg>.ftabs{flex:none}
  :root[data-skin="systeme"] .fhero .ftabs.three{grid-template-columns:96px 112px 108px}
  :root[data-skin="systeme"] .fhero .ftabs.steps{display:flex}
  :root[data-skin="systeme"] .fhero .ftabs.steps button{flex:none;width:56px;min-height:52px}
  :root[data-skin="systeme"] .fhero .ftabs.steps button.on{width:auto;min-width:56px;padding:0 10px}
  :root[data-skin="systeme"] .fhero .ftabs.steps button:not(.on) em{display:none}
  :root[data-skin="systeme"] .fhero .ftw .ptabs{flex-wrap:nowrap}
  /* fondu de 16 px au bord droit (pseudo collant : un masque couperait la partie en cours, posée hors de la rangée) */
  :root[data-skin="systeme"] .fhero .freg::after{content:"";position:sticky;right:-2px;z-index:1;flex:none;align-self:stretch;width:16px;margin-left:-16px;pointer-events:none;
    background:linear-gradient(to right,color-mix(in srgb,var(--bg) 0%,transparent),var(--bg))}
}
/* ── fiche, 1180 px et plus : Leçon et Pédagogie, Montrer et Évaluer dans la barre d'outils, comme sur la planche (D1) ──
   La barre reste dans .fhero (le test compte .fhero [data-show]) ; elle est posée dans la rangée de la barre, à gauche de la recherche,
   qui devient un cercle de 44 sur la fiche (son libellé reste lu). --fbar-w (js/systeme.js) borne le titre rangé. */
@media (min-width:1180px){
  :root[data-skin="systeme"] body.p1-fiche .fhero .fbar{position:fixed;z-index:21;top:env(safe-area-inset-top,0px);right:128px;height:var(--row);margin:0;flex-wrap:nowrap;gap:8px}
  :root[data-skin="systeme"] body.p1-fiche .fhero .fbar .seg{flex:0 0 240px;max-width:240px}
  :root[data-skin="systeme"] body.p1-fiche .top .find{flex:0 0 44px;width:44px;max-width:44px;padding:0;justify-content:center;border-radius:50%}
  :root[data-skin="systeme"] body.p1-fiche .top .find span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  :root[data-skin="systeme"] body.p1-fiche .top .ptitle{margin-right:calc(var(--fbar-w,500px) + 8px)}
}
/* Montrer en aplat d'accent, Évaluer teinté (sélecteurs plus forts que ceux d'app.css en sombre) */
:root[data-skin="systeme"] .fhero .fact .btn[data-show],:root[data-skin="systeme"] .fhero .fact .btn[data-show]:hover{background:var(--accent-fill);color:#fff;border:0}
:root[data-skin="systeme"] .fhero .fact a.btn[href],:root[data-skin="systeme"] .fhero .fact a.btn[href]:hover{background:var(--accent-bg);color:var(--accent-t);border:0}

/* ── fiche, contenu : groupes blancs, titres de ligne, icône seule à l'accent ── */
:root[data-skin="systeme"] .card{--r:26px;border-radius:26px;padding:16px 20px 20px;margin:0 0 16px;border:0;font-size:17px;line-height:24px}
:root[data-skin="systeme"] .card.pro{border-left:0;padding-left:20px}
:root[data-skin="systeme"] .tpane>.card:first-child,:root[data-skin="systeme"] .tpane>:first-child{margin-top:0}
:root[data-skin="systeme"] .h,:root[data-skin="systeme"] section.card>h2.h{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 17px/22px var(--font);letter-spacing:0;text-transform:none;color:var(--ink)}
:root[data-skin="systeme"] .h .tt{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1 1 auto;min-width:0}
:root[data-skin="systeme"] .h .col{display:block;margin:2px 0 0;max-width:none;padding:0;background:none;font:400 13px/18px var(--font);letter-spacing:0;text-transform:none;white-space:normal;color:var(--muted)}
:root[data-skin="systeme"] .h .r{font-size:13px;line-height:18px;color:var(--muted)}
:root[data-skin="systeme"] .h .r.all{color:var(--good)}
:root[data-skin="systeme"] .ic{width:22px;height:22px;flex:none;border-radius:0;background:none;color:var(--accent)}
:root[data-skin="systeme"] .ic svg{width:20px;height:20px}
:root[data-skin="systeme"] .card.pgf .ic{background:none;color:var(--warn)}
:root[data-skin="systeme"] .card :is(ul,ol){margin:0}
:root[data-skin="systeme"] .card ul{padding-left:20px}
:root[data-skin="systeme"] .card li{margin:6px 0}
:root[data-skin="systeme"] .card li::marker{color:var(--cc,var(--accent))}
/* listes numérotées : pastille de 24, chiffre de 13 tabulaire à la couleur de la compétence */
:root[data-skin="systeme"] .card ol>li{min-height:24px;padding-left:36px;margin:8px 0;line-height:24px}
:root[data-skin="systeme"] .card ol>li::before{top:0;width:24px;height:24px;border-radius:50%;background:var(--cb,var(--accent-bg));color:var(--cc,var(--accent-t));font:600 13px/24px var(--font);font-variant-numeric:tabular-nums}
:root[data-skin="systeme"] .card ol.scrl>li{padding-left:36px}
:root[data-skin="systeme"] .card ol.scrl>li::before{top:8px}
:root[data-skin="systeme"] .card ol.scrl>li:first-child::before{top:0}
:root[data-skin="systeme"] .card>p,:root[data-skin="systeme"] .card>div>p{margin:8px 0}
:root[data-skin="systeme"] .card>.sub{margin:16px 0 6px;padding-top:12px;border-top:.5px solid var(--line);font:600 15px/20px var(--font);letter-spacing:0;text-transform:none;color:var(--ink)}
:root[data-skin="systeme"] .sub .sbn,:root[data-skin="systeme"] .tra .sbn{margin-left:6px;font:600 13px/18px var(--font);letter-spacing:0;text-transform:none;vertical-align:0}
:root[data-skin="systeme"] .note{margin:12px 0 0;font-size:13px;line-height:18px;color:var(--muted)}
:root[data-skin="systeme"] .cap{margin:8px 0 0;font-size:13px;line-height:18px;color:var(--muted)}
:root[data-skin="systeme"] .gsig.g,:root[data-skin="systeme"] .gsig.a{margin:0 0 6px}
/* chiffres clés : mini-widgets --soft, chiffre de 30 / 36 */
:root[data-skin="systeme"] .kp{gap:8px}
:root[data-skin="systeme"] .kpi,:root[data-skin="systeme"] .card.com .kpi,:root[data-skin="systeme"] .ess .kpi{padding:12px 14px;border:0;border-radius:18px;background:var(--soft)}
:root[data-skin="systeme"] .kpi b{font:700 30px/36px var(--font);letter-spacing:-.3px;font-variant-numeric:tabular-nums;color:var(--cc,var(--ink))}
:root[data-skin="systeme"] .kpi span{font-size:15px;line-height:20px;color:var(--txt2)}
:root[data-skin="systeme"] .card.com .kp{margin-top:14px}
/* tableaux à deux colonnes, étapes, verdicts */
:root[data-skin="systeme"] .tr2{border-radius:14px;background:var(--soft);padding:10px 14px;font-size:15px;line-height:20px}
:root[data-skin="systeme"] .tr2 b{font-weight:600;color:var(--ink)}
:root[data-skin="systeme"] .st{gap:12px}
:root[data-skin="systeme"] .st small{font:600 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--accent-t)}
:root[data-skin="systeme"] .dot{font-family:var(--font);font-weight:700}
:root[data-skin="systeme"] .dot.step,:root[data-skin="systeme"][data-theme="dark"] .dot.step{background:var(--accent-fill);color:#fff}
:root[data-skin="systeme"] .dot.ltr{--rs:10px;border-radius:10px}
:root[data-skin="systeme"] .vd{border-radius:14px;background:var(--soft);padding:10px 14px}
:root[data-skin="systeme"] .vd b{font:600 13px/18px var(--font);letter-spacing:0;text-transform:none}
:root[data-skin="systeme"] .gk{font:600 13px/18px var(--font);letter-spacing:0;text-transform:none;border-radius:6px}
:root[data-skin="systeme"] .exi b,:root[data-skin="systeme"] .evp{font:600 13px/18px var(--font);letter-spacing:0;text-transform:none}
:root[data-skin="systeme"] .evp{padding:1px 7px;border-radius:7px}
:root[data-skin="systeme"] .gx{font-size:13px;line-height:18px}
/* schéma : visuel officiel sur fond blanc, même en sombre (jetons clairs redéclarés dans le cadre) */
:root[data-skin="systeme"] :is(#fiche,.p1-insp) .svg{padding:12px;border-radius:18px;background:#FFFFFF;color:#000000;
  --ink:#000000;--txt:#000000;--txt2:#3C3C43;--muted:#6C6C70;--road:#D9DBE6;--curb:#B7BBD0;--accent:#0A64D8;--accent-t:#0A64D8;--accent-bg:#E5EFFC;--line:#C6C6C8;--line2:#B4B4B8;
  --surface:#FFFFFF;--soft:#EFEFF4;--bg:#F2F2F7;--good:#0B6E50;--warn:#7A5200;--bad:#B3261E;--good-bg:#E3F4EC;--warn-bg:#FFF1D6;--bad-bg:#FDE8E6}
:root[data-skin="systeme"] :is(#fiche,.p1-insp) .svg svg{margin:0 auto}
/* articles du Code, renvois */
:root[data-skin="systeme"] .alist{gap:8px}
:root[data-skin="systeme"] .alist a{min-height:44px;padding:0 16px;border-radius:22px;background:var(--accent-bg);color:var(--accent-t);font:600 15px/20px var(--font)}
:root[data-skin="systeme"] .lk{min-height:44px;padding:0 16px;border:0;border-radius:22px;background:var(--accent-bg);color:var(--accent-t);font:600 15px/20px var(--font)}
:root[data-skin="systeme"] .lk.rvapp{padding:5px 16px;border-radius:22px;line-height:20px}
:root[data-skin="systeme"] .rva{font:600 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--accent-t)}
:root[data-skin="systeme"] .rv+.rv{border-top:.5px solid var(--line)}
:root[data-skin="systeme"] .rv blockquote{margin:0 0 6px;padding:0 0 0 12px;border:0;border-left:2px solid var(--line2);border-radius:0;background:none;color:var(--txt2);font-style:italic;font-size:15px;line-height:22px}
:root[data-skin="systeme"] .rvl{display:grid;gap:0;margin-top:8px;background:var(--soft);border-radius:18px;overflow:hidden}
:root[data-skin="systeme"] .rvl .sub-i{--r:0;border-radius:0;background:transparent;min-height:56px;padding:8px 14px;grid-template-columns:30px minmax(0,1fr) 12px}
:root[data-skin="systeme"] .rvl .sub-i+.sub-i{box-shadow:inset 0 .5px 0 var(--line)}
:root[data-skin="systeme"] .rvl .sub-i .code{height:22px;font-size:13px}
:root[data-skin="systeme"] .rvl .sub-i b{font-size:15px;line-height:20px}
/* « Ensuite » : ligne de 56 sur fond blanc, chevron */
:root[data-skin="systeme"] .nexttab,:root[data-skin="systeme"][data-theme="dark"] .nexttab{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;width:100%;min-height:56px;margin:0 0 16px;padding:8px 16px 8px 20px;
  border:0;border-radius:26px;background:var(--surface);color:var(--ink);text-align:left;box-shadow:none;transition:background-color var(--t-state) var(--ease-out)}
:root[data-skin="systeme"] .nexttab small{font:400 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--muted);opacity:1}
:root[data-skin="systeme"] .nexttab b{font:600 17px/22px var(--font);color:var(--accent-t)}
:root[data-skin="systeme"] .nexttab span{font:400 22px/1 var(--font);color:var(--muted)}
:root[data-skin="systeme"] .nexttab:active{background:var(--soft)}
@media (hover:hover) and (pointer:fine){:root[data-skin="systeme"] .nexttab:hover,:root[data-skin="systeme"][data-theme="dark"] .nexttab:hover{background:var(--soft);border:0}}
/* fiche du guide : groupe repliable, rubriques à filet, texte du guide sur --soft */
:root[data-skin="systeme"] .card>summary.h{min-height:44px;margin:-6px 0 -6px;cursor:default}
:root[data-skin="systeme"] .card[open]>summary.h{margin-bottom:6px}
:root[data-skin="systeme"] .who{padding:2px 8px;border-radius:8px;background:var(--accent-bg);color:var(--accent-t);font:600 13px/18px var(--font);letter-spacing:0;text-transform:none}
:root[data-skin="systeme"] .cnt{font-size:13px;color:var(--muted)}
:root[data-skin="systeme"] .cv{color:var(--muted)}
:root[data-skin="systeme"] .tpane+details.card.guide,:root[data-skin="systeme"] .tpane+.card.guide{margin-top:16px}
:root[data-skin="systeme"] .card.guide .gd{--r:0;margin:0;padding:0;border:0;border-top:.5px solid var(--line);border-radius:0;background:transparent}
:root[data-skin="systeme"] .card.guide .gd:first-of-type{border-top:0}
:root[data-skin="systeme"] .gd>summary{min-height:48px;font:600 15px/20px var(--font);color:var(--ink)}
:root[data-skin="systeme"] .card.guide .md{margin:0 0 12px;padding:10px 14px;border:0;border-radius:12px;background:var(--soft);font-size:15px;line-height:22px}
:root[data-skin="systeme"] .md blockquote{border-left:2px solid var(--line2);border-radius:0 8px 8px 0}
:root[data-skin="systeme"] .gd{--r:18px;border:0;border-radius:18px}
:root[data-skin="systeme"] .card .gd.gv{--r:14px;margin:12px 0 2px;padding:0 14px;border:0;border-radius:14px;background:var(--soft)}
:root[data-skin="systeme"] .card .gd.gv[open]>summary{border-bottom:.5px solid var(--line)}
:root[data-skin="systeme"] .gtx{margin:0 0 12px;padding:10px 14px 4px;border:0;border-radius:16px;background:var(--soft)}
:root[data-skin="systeme"] .gtx .gst{font-size:13px;line-height:18px}
/* fiche précédente et suivante : deux lignes de 56 en un groupe */
:root[data-skin="systeme"] .fnav{display:block;margin:24px 0 0;padding:0;border:0;border-radius:26px;background:var(--surface);overflow:hidden}
:root[data-skin="systeme"] .fnav a,:root[data-skin="systeme"] .fnav span{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;min-height:56px;padding:8px 40px 8px 20px;
  border:0;--r:0;border-radius:0;background:transparent;color:var(--ink);font:600 17px/22px var(--font);text-align:left;text-decoration:none}
:root[data-skin="systeme"] .fnav span:empty{display:none}
:root[data-skin="systeme"] .fnav>*+*::before{content:"";position:absolute;left:20px;right:0;top:0;border-top:.5px solid var(--line)}
:root[data-skin="systeme"] .fnav a::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:14px;margin-top:-7px;background:var(--ter);-webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat}
:root[data-skin="systeme"] .fnav small{font:400 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
:root[data-skin="systeme"] .fnav .nx{text-align:left}
:root[data-skin="systeme"] .fnav a:active{transform:none;background:var(--soft)}
@media (hover:hover) and (pointer:fine){:root[data-skin="systeme"] .fnav a:hover{background:var(--soft)}}

/* ── fiche, vue Pédagogie : carte d'étape à bord d'accent, consignes en lecture 20 / 28 ── */
:root[data-skin="systeme"] .stp{--r:26px;position:relative;margin:0 0 16px;padding:16px 20px 20px 32px;border:0;border-radius:26px;background:var(--surface)}
:root[data-skin="systeme"] .stp::before{content:"";position:absolute;left:14px;top:18px;bottom:18px;width:4px;border-radius:2px;background:var(--cc,var(--line2))}
:root[data-skin="systeme"] .stp-h{gap:12px}
:root[data-skin="systeme"] .stp-h .dot.step{width:40px;height:40px;font:800 18px/1 var(--font)}
:root[data-skin="systeme"] .stp-h small{font:600 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
:root[data-skin="systeme"] .stp h2{margin:0;font:700 22px/28px var(--font)}
:root[data-skin="systeme"] .stp .boxt{margin-top:4px}
:root[data-skin="systeme"] .stp .do,:root[data-skin="systeme"] .stp .say{margin:14px 0 0;font:600 20px/28px var(--font);color:var(--ink)}
:root[data-skin="systeme"] :is(.stp,.trt,.tra) .lb{display:block;margin:0 0 2px;font:600 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
:root[data-skin="systeme"] .stp .avoid{margin:14px 0 0;padding:12px 14px;border-radius:16px;background:var(--warn-bg);font-size:15px;line-height:20px;color:var(--txt)}
:root[data-skin="systeme"] .stp .avoid .lb{color:var(--warn)}
:root[data-skin="systeme"] .trt{margin:14px 0 4px;font:600 17px/24px var(--font)}
:root[data-skin="systeme"] .tra{margin:10px 0 0;font-size:15px;line-height:20px}
:root[data-skin="systeme"] .gtr{height:6px;border-radius:3px;background:var(--fill2)}
:root[data-skin="systeme"] .gv{font:600 15px/20px var(--font);color:var(--accent-t)}
:root[data-skin="systeme"] .stl{min-height:56px;border-radius:0}
:root[data-skin="systeme"] .stl:not(:last-child){border-bottom:.5px solid var(--line)}
:root[data-skin="systeme"] .stl::after{color:var(--muted)}
:root[data-skin="systeme"] .stl:active{background:var(--soft)}
:root[data-skin="systeme"] .tpane{animation:p1-pane var(--t-pane) var(--ease-out) backwards}

/* ── groupes de rayon 18 au grand écran ── */
@media (min-width:620px){
  :root[data-skin="systeme"] .kp{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  :root[data-skin="systeme"] .kpi{display:flex;flex-direction:column;gap:2px}
  :root[data-skin="systeme"] .kpi.long{grid-column:1/-1}
  :root[data-skin="systeme"] .tr2{grid-template-columns:minmax(120px,26%) minmax(0,1fr)}
}
@media (min-width:960px){
  :root[data-skin="systeme"] :is(.card,.stp,.nexttab,.fnav,.entry,.psum,.pl,.art,.ix>li,.panel,.p1-mat,.cr-list,.corr .it){--r:18px;border-radius:18px}
  :root[data-skin="systeme"] .h,:root[data-skin="systeme"] section.card>h2.h{font-size:17px}
}

/* ── fiche au très large : inspecteur (schéma, articles, voir aussi) ; frise des étapes en Pédagogie ── */
@media (min-width:1180px){
  :root[data-skin="systeme"] body.p1-insp-on main{max-width:1104px}
  :root[data-skin="systeme"] .p1-insp.p1-cartes{padding:0;border-radius:0;background:transparent;overflow-y:auto}
  :root[data-skin="systeme"] .p1-insp.p1-cartes>.card,:root[data-skin="systeme"] .p1-insp.p1-cartes>section,:root[data-skin="systeme"] .p1-insp.p1-cartes>.panel{--r:14px;margin:0 0 12px;padding:14px 16px 16px;border-radius:14px}
  :root[data-skin="systeme"] .p1-insp[hidden]{display:none}
  /* frise verticale (js/systeme.js déplace .ftabs.steps en tête de #fiche) */
  :root[data-skin="systeme"] body.p1-frise main{max-width:968px}
  :root[data-skin="systeme"] #fiche.p1-frise{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:24px;align-items:start}
  :root[data-skin="systeme"] #fiche.p1-frise>*{grid-column:2;min-width:0}
  :root[data-skin="systeme"] #fiche.p1-frise>.ftabs.steps{grid-column:1;grid-row:1/span 4;position:sticky;top:calc(var(--top-h,52px) + 16px);display:flex;flex-direction:column;width:auto;padding:4px;border-radius:14px;background:var(--surface)}
  :root[data-skin="systeme"] #fiche.p1-frise>.ftabs::after{background:var(--accent-bg);box-shadow:none;border-radius:10px}
  :root[data-skin="systeme"] #fiche.p1-frise .ftabs.steps button{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:10px;row-gap:3px;
    width:auto;min-width:0;min-height:52px;padding:6px 10px;text-align:left;border-radius:10px}
  :root[data-skin="systeme"] #fiche.p1-frise .ftabs.steps button.on{background:var(--accent-bg);box-shadow:none}
  :root[data-skin="systeme"] #fiche.p1-frise .ftabs.steps.p1-cur button.on{background:transparent}
  :root[data-skin="systeme"] #fiche.p1-frise .ftabs.steps span{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--soft);font:800 15px/1 var(--font)}
  :root[data-skin="systeme"] #fiche.p1-frise .ftabs.steps button.on span{background:var(--accent-fill);color:#fff}
  :root[data-skin="systeme"] #fiche.p1-frise .ftabs.steps em{display:block;grid-column:2;align-self:end;font:600 15px/20px var(--font);overflow:visible}
  :root[data-skin="systeme"] #fiche.p1-frise .ftabs.steps button.on em{color:var(--accent-t)}
  :root[data-skin="systeme"] #fiche.p1-frise .ftabs.steps .lvl{grid-column:2;align-self:start;width:56px;margin:0}
  :root[data-skin="systeme"] #fiche.p1-frise .ftabs.steps button .ck{top:8px;right:8px}
}

/* ── Évaluer : entrées en groupes, pastille numérotée, boutons capsule ── */
:root[data-skin="systeme"] .entries{display:grid;gap:12px;max-width:none;margin:8px 0 16px}
:root[data-skin="systeme"] .entry{--r:26px;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:16px;border:0;border-radius:26px;background:var(--surface)}
:root[data-skin="systeme"] .entry .en{width:28px;height:28px;--rs:14px;border-radius:14px;background:var(--accent-bg);color:var(--accent-t);font:700 15px/1 var(--font)}
:root[data-skin="systeme"] .entry h2{margin:3px 0 4px;font:600 17px/22px var(--font);letter-spacing:0}
:root[data-skin="systeme"] .entry p{margin:0 0 12px;font-size:15px;line-height:20px;color:var(--muted)}
:root[data-skin="systeme"] .entry .row{display:flex;flex-direction:column;align-items:stretch;gap:8px}
:root[data-skin="systeme"] .entry .btn{min-height:44px;padding:0 16px;--rs:22px;border-radius:22px;font-size:15px;line-height:20px}
@media (min-width:960px),(min-width:620px) and (min-height:501px),(min-width:620px) and (pointer:fine){
  :root[data-skin="systeme"] .entry .row{flex-direction:row;flex-wrap:wrap;align-items:center}
}
@media (min-width:960px){
  :root[data-skin="systeme"] .entries{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  :root[data-skin="systeme"] .entry{grid-template-columns:minmax(0,1fr);align-content:start}
  :root[data-skin="systeme"] .entry .row{flex-direction:column;align-items:stretch}
}

/* ── évaluation d'une sous-compétence : rubriques en titres de section, lignes en cartes, appréciation en segment ── */
:root[data-skin="systeme"] .sce{max-width:none}
:root[data-skin="systeme"] .sce>section.card{--r:0;margin:24px 0 0;padding:0;border-radius:0;background:transparent}
:root[data-skin="systeme"] .sce>section.card:first-child{margin-top:8px}
:root[data-skin="systeme"] .sce>section.card>.h{margin:0 0 8px;font:700 20px/25px var(--font)}
:root[data-skin="systeme"] .sce>section.card>.gsig{margin:0 0 8px}
:root[data-skin="systeme"] .sce>section.card:last-child,:root[data-skin="systeme"] .sce>section.card:has(.apr){--r:26px;margin-top:24px;padding:16px 20px 20px;border-radius:26px;background:var(--surface)}
:root[data-skin="systeme"] .sce>section.card:has(.apr)>.h{font:600 17px/22px var(--font)}
:root[data-skin="systeme"] .card .scl,:root[data-skin="systeme"] .crits{display:grid;gap:10px;margin:8px 0 0;padding:0;list-style:none;counter-reset:e}
:root[data-skin="systeme"] .card .scl>li.scr,:root[data-skin="systeme"] .card .scl>li.scr:first-child,:root[data-skin="systeme"] .crits>li.crit{counter-increment:e;position:relative;min-height:56px;margin:0;padding:16px 16px 16px 52px;border:0;border-radius:22px;background:var(--surface);line-height:24px}
:root[data-skin="systeme"] details.card .scl>li.scr,:root[data-skin="systeme"] .tpane .card .scl>li.scr,:root[data-skin="systeme"] .sce>section.card:has(.apr) .scl>li.scr{background:var(--soft)}
/* symbole d'état de la ligne : cercle pointillé et numéro, puis Acquis, En cours, Non acquis */
:root[data-skin="systeme"] .card .scl>li.scr::before,:root[data-skin="systeme"] .card .scl>li.scr:first-child::before,:root[data-skin="systeme"] .crits>li.crit::before{content:counter(e);position:absolute;left:16px;top:16px;display:block;box-sizing:border-box;width:24px;height:24px;
  border:1.5px dashed var(--none);border-radius:50%;background:transparent no-repeat center/14px 14px;color:var(--muted);font:600 12px/21px var(--font);text-align:center;font-variant-numeric:tabular-nums}
:root[data-skin="systeme"] :is(.card .scl>li.scr,.crits>li.crit):has(>.ap [data-ap="a"][aria-checked="true"])::before{content:"";border:0;background-color:var(--good);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
:root[data-skin="systeme"] :is(.card .scl>li.scr,.crits>li.crit):has(>.ap [data-ap="c"][aria-checked="true"])::before{content:"";border:1.5px solid var(--warn);background:linear-gradient(90deg,var(--warn) 50%,transparent 50%)}
:root[data-skin="systeme"] :is(.card .scl>li.scr,.crits>li.crit):has(>.ap [data-ap="n"][aria-checked="true"])::before{content:"";border:0;background-color:var(--bad);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")}
:root[data-skin="systeme"][data-theme="dark"] :is(.card .scl>li.scr,.crits>li.crit):has(>.ap [data-ap="a"][aria-checked="true"])::before{
  background-image: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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
:root[data-skin="systeme"][data-theme="dark"] :is(.card .scl>li.scr,.crits>li.crit):has(>.ap [data-ap="n"][aria-checked="true"])::before{
  background-image: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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")}
:root[data-skin="systeme"] .sct{font-size:17px;line-height:24px;color:var(--ink)}
:root[data-skin="systeme"] .sfe{margin:8px 0 0;font-size:15px;line-height:21px;font-style:italic;color:var(--txt2)}
:root[data-skin="systeme"] .sfe b{display:block;margin:0 0 2px;font:600 13px/18px var(--font);font-style:normal;letter-spacing:0;text-transform:none;color:var(--muted)}
:root[data-skin="systeme"] .nosf{border-radius:14px}
/* essais (D3, U17) : une rangée de 44 par terrain, le terrain à gauche, le numéro de l'essai écrit dans sa case (13 px) ;
   la coche le remplace quand l'essai est réussi ; le compte des essais sous les rangées, à droite */
:root[data-skin="systeme"] .esl{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:none;margin:12px 0 0}
:root[data-skin="systeme"] .esls{flex-direction:column;align-items:stretch;gap:8px}
:root[data-skin="systeme"] .esg{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* trois cases ou moins : une seule rangée (sinon Chromium réserve une deuxième ligne vide de 52 px sous chaque terrain) */
:root[data-skin="systeme"] .esg:not(:has(>.esc~.esc~.esc~.esc)){flex-wrap:nowrap}
:root[data-skin="systeme"] .esgl{flex:1 1 88px;min-width:0;min-height:0;font:400 13px/16px var(--font);color:var(--muted)}
:root[data-skin="systeme"] .esc{position:relative;display:grid;flex:none;width:56px;min-width:56px;max-width:none;gap:0}
:root[data-skin="systeme"] .esc>*{grid-area:1/1}
:root[data-skin="systeme"] .esc small{z-index:1;place-self:center;font:600 13px/16px var(--font);letter-spacing:0;color:var(--txt2);white-space:nowrap;pointer-events:none;transition:opacity var(--t-state) var(--ease-out)}
:root[data-skin="systeme"] .esc:has(.esb.on) small{opacity:0}
:root[data-skin="systeme"] .esb{width:56px;height:44px;padding:0;border:0;--rs:12px;border-radius:12px;background:var(--fill2);box-shadow:inset 0 0 0 1.5px var(--es-ring);color:transparent;transition:background-color var(--t-state) var(--ease-out)}
:root[data-skin="systeme"] .esb svg{width:20px;height:20px}
:root[data-skin="systeme"] .esb.on{background:var(--accent-fill);box-shadow:none;color:#fff}
:root[data-skin="systeme"] .esb.on svg{animation:p1-coche var(--t-state) var(--ease-out) backwards}
:root[data-skin="systeme"] .esl .gt{min-width:44px;height:44px;padding:0 4px;border-radius:12px;font-size:15px;color:var(--muted)}
:root[data-skin="systeme"] .esls>.gt{position:static;align-self:flex-end;height:18px;min-width:0;padding:0;background:transparent;font:600 13px/18px var(--font)}
:root[data-skin="systeme"] .gt.ok{color:var(--good)}
/* appréciation : segment de 60 à trois cases (Acquis, En cours, Non acquis), symbole au-dessus du libellé */
:root[data-skin="systeme"] .ap{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:0;max-width:none;margin:14px 0 0;padding:3px;border-radius:14px;background:var(--soft)}
:root[data-skin="systeme"] :is(.scr,.crit)>.ap{margin-left:-36px}
:root[data-skin="systeme"] :is(details.card,.tpane .card,.sce>section.card:has(.apr)) .ap{background:var(--fill2)}
:root[data-skin="systeme"] .ap button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;padding:4px 6px;border:0;border-radius:11px;
  background:transparent;color:var(--ink);font:600 14px/17px var(--font);letter-spacing:0;text-align:center;box-shadow:none;cursor:default;transition:color var(--t-state) var(--ease-out),background-color 0s}
:root[data-skin="systeme"] .ap button::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--ap-ic) center/contain no-repeat;mask:var(--ap-ic) center/contain no-repeat}
:root[data-skin="systeme"] .ap button.on{box-shadow:none;border:0}
:root[data-skin="systeme"] .ap .ap-a.on{background:var(--good);color:var(--on-state)}
:root[data-skin="systeme"] .ap .ap-c.on{background:var(--warn);color:var(--on-state)}
:root[data-skin="systeme"] .ap .ap-n.on{background:var(--bad);color:var(--on-state)}
/* curseur : la couleur de l'état glisse jusqu'au choix, puis la case reprend son aplat (la case garde sa couleur au repos, lue par les outils de contraste) */
:root[data-skin="systeme"] .ap::after{content:"";position:absolute;z-index:-1;left:0;top:0;width:var(--w,0);height:var(--h,0);transform:translate(var(--x,0),var(--y,3px));transform-origin:0 0;border-radius:11px;background:var(--seg-on);opacity:0}
:root[data-skin="systeme"] .ap:has(.ap-a.on)::after{background:var(--good)}
:root[data-skin="systeme"] .ap:has(.ap-c.on)::after{background:var(--warn)}
:root[data-skin="systeme"] .ap:has(.ap-n.on)::after{background:var(--bad)}
:root[data-skin="systeme"] .ap.p1-cur::after{opacity:1}
:root[data-skin="systeme"] .ap.p1-pret::after{transition:transform var(--tc,var(--t-cursor)) var(--ease-spring),width var(--tc,var(--t-cursor)) var(--ease-spring),height var(--tc,var(--t-cursor)) var(--ease-spring),background-color var(--tc,var(--t-state)) var(--ease-out)}
:root[data-skin="systeme"] .ap.p1-pret button.on{transition:color var(--t-state) var(--ease-out),background-color 0s linear var(--t-cursor)}
/* appréciation de la sous-compétence, initiales, enregistrement */
:root[data-skin="systeme"] .apr{margin:0 0 8px}
:root[data-skin="systeme"] .apv .tag{font-size:17px;line-height:22px;padding:5px 14px;gap:6px}
:root[data-skin="systeme"] .apv .tag::before{width:17px;height:17px}
:root[data-skin="systeme"] .apw{margin:8px 0 2px;font:600 17px/22px var(--font);color:var(--ink)}
:root[data-skin="systeme"] .evset{gap:8px}
:root[data-skin="systeme"] .evset .lbl{margin-top:8px}
:root[data-skin="systeme"] .scs .btn,:root[data-skin="systeme"] .evset .btn.block{margin-top:8px;min-height:50px}
:root[data-skin="systeme"] .scm{font-size:15px;line-height:20px}
@media (min-width:1180px){
  :root[data-skin="systeme"] body[data-p1e="eval-sc"] main{max-width:1104px}
  :root[data-skin="systeme"] body[data-p1e="eval-sc"] .sce{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:repeat(4,auto) 1fr;column-gap:32px;align-items:start}
  :root[data-skin="systeme"] body[data-p1e="eval-sc"] .sce>*{grid-column:1;min-width:0}
  :root[data-skin="systeme"] body[data-p1e="eval-sc"] .sce>section.card:has(.apr){grid-column:2;grid-row:1/-1;position:sticky;top:calc(var(--top-h,52px) + 16px);--r:14px;margin-top:8px;border-radius:14px}
  :root[data-skin="systeme"] body[data-p1e="eval-sc"] .p1-col,:root[data-skin="systeme"] body[data-p1e="eval-sc"] .fhero{max-width:none}
}
/* ligne active au clavier (Mac) : anneau de focus sur la carte */
:root[data-skin="systeme"] :is(li.scr,li.crit).p1-actif{box-shadow:0 0 0 3px var(--focus)}

/* ── barre de séance (évaluation et bilan, sous 1180 px) : une rangée de 60 (D4, U2) ──
   filet des lignes appréciées en haut ; compte puis verdict, entiers (M7, U12) ; initiales de l'élève, touchées : le champ (U1) ; Enregistrer */
:root[data-skin="systeme"] .p1-seance{display:none}
@media (max-width:1179px){
  :root[data-skin="systeme"] .p1-seance{position:fixed;z-index:20;left:var(--gut);right:var(--gutr);bottom:max(12px,env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:6px;min-height:60px;box-sizing:border-box;padding:10px 8px 8px 20px;
    border-radius:30px;background:var(--glass);-webkit-backdrop-filter:var(--verre);backdrop-filter:var(--verre);border:.5px solid var(--glass-line);box-shadow:0 6px 20px rgba(0,0,0,.12),var(--glass-hi)}
  :root[data-skin="systeme"] body.p1-seance-on main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  :root[data-skin="systeme"].clavier .p1-seance{visibility:hidden}
}
:root[data-skin="systeme"] .p1-sc{position:absolute;left:28px;right:28px;top:6px;display:flex;gap:2px;height:3px;pointer-events:none}
:root[data-skin="systeme"] .p1-sc i{flex:1 1 0;min-width:0;border-radius:2px;background:var(--fill2)}
:root[data-skin="systeme"] .p1-sc i.a{background:var(--good)}:root[data-skin="systeme"] .p1-sc i.c{background:var(--warn)}:root[data-skin="systeme"] .p1-sc i.n{background:var(--bad)}
:root[data-skin="systeme"] .p1-s1{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-width:0}
:root[data-skin="systeme"] .p1-seance.p1-msg .p1-s1{min-width:0}
:root[data-skin="systeme"] .p1-sn{font:600 13px/16px var(--font);font-variant-numeric:tabular-nums;color:var(--muted)}
:root[data-skin="systeme"] .p1-sv{display:block;min-width:0;font:600 15px/19px var(--font);color:var(--ink);white-space:normal}
/* le verdict reste entier : il passe sur deux lignes plutôt que de pousser Enregistrer hors de la barre ; le message d'enregistrement, lui, se coupe */
:root[data-skin="systeme"] .p1-seance.p1-msg .p1-sv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-skin="systeme"] .p1-sv:is(.p1-va,.p1-vc,.p1-vn)::before{content:"";display:inline-block;vertical-align:-3px;margin-right:5px;width:16px;height:16px;background:var(--p1-svc,currentColor);-webkit-mask:var(--ap-ic) center/contain no-repeat;mask:var(--ap-ic) center/contain no-repeat}
:root[data-skin="systeme"] .p1-sv.p1-va{--p1-svc:var(--good)}:root[data-skin="systeme"] .p1-sv.p1-vc{--p1-svc:var(--warn)}:root[data-skin="systeme"] .p1-sv.p1-vn{--p1-svc:var(--bad)}
:root[data-skin="systeme"] .p1-si{flex:0 1 auto;display:flex;align-items:center;justify-content:center;min-width:44px;max-width:72px;height:44px;margin:0;padding:0 10px;border:0;border-radius:22px;background:var(--glass-btn);color:var(--ink);
  font:600 13px/16px var(--font);letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
:root[data-skin="systeme"] .p1-si svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
:root[data-skin="systeme"] .p1-sb{flex:none;width:auto;min-height:44px;height:44px;margin:0;padding:0 16px;--rs:22px;border-radius:22px;font:600 15px/20px var(--font)}
:root[data-skin="systeme"] .p1-sb:disabled{opacity:1;background:var(--good-bg);color:var(--good)}
@media (hover:hover) and (pointer:fine){:root[data-skin="systeme"] .p1-si:hover{background:var(--fill2)}}
@media (max-width:619px),(max-width:959px) and (max-height:500px) and (pointer:coarse){
  :root[data-skin="systeme"] body.p1-eval .bottom,:root[data-skin="systeme"] body.p1-eval::after{display:none}
}
/* iPhone couché : la barre flotte à droite, sur la moitié de la largeur (U2) */
@media (max-width:959px) and (max-height:500px) and (pointer:coarse){
  :root[data-skin="systeme"] .p1-seance{left:calc(50% - 40px)}
  :root[data-skin="systeme"] body.p1-seance-on main{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
/* moins de 360 px : deux rangées, Enregistrer sur toute la largeur */
@media (max-width:359px){
  :root[data-skin="systeme"] .p1-seance{flex-wrap:wrap;height:auto;padding:14px 6px 6px 14px;border-radius:26px;row-gap:6px}
  :root[data-skin="systeme"] .p1-sb{flex:1 0 100%;height:48px}
  :root[data-skin="systeme"] body.p1-seance-on main{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:620px) and (max-width:1179px) and (min-height:501px),(min-width:620px) and (max-width:1179px) and (pointer:fine){
  :root[data-skin="systeme"] .p1-seance{left:0;right:0;width:min(560px,calc(100% - 48px));margin:0 auto;bottom:max(16px,env(safe-area-inset-bottom,0px))}
  :root[data-skin="systeme"] body.p1-seance-on main{padding-bottom:110px}
}
@media (min-width:960px) and (max-width:1179px){:root[data-skin="systeme"] .p1-seance{left:var(--side-w)}}

/* ── bilans : critères en cartes comme les lignes d'évaluation ── */
:root[data-skin="systeme"] .card.gtext{max-width:none}
:root[data-skin="systeme"] .card.gtext:has(.crits){padding:0;background:transparent;--r:0;border-radius:0}
:root[data-skin="systeme"] .card.gtext .bt{margin:6px 0 4px;font:700 20px/25px var(--font)}
:root[data-skin="systeme"] .card.gtext .bh,:root[data-skin="systeme"] #bae .bh{margin:14px 0 6px;font:600 17px/22px var(--font)}
:root[data-skin="systeme"] .crits{margin-top:12px}
:root[data-skin="systeme"] .crit p{margin:0;font-size:17px;line-height:24px}
:root[data-skin="systeme"] .crf{gap:8px;margin:10px 0 0}
:root[data-skin="systeme"] .crf .rva{font:600 13px/18px var(--font);color:var(--muted)}
:root[data-skin="systeme"] .crf .lk,:root[data-skin="systeme"] .cr-with .lk{min-height:44px;padding:0 14px;font-size:15px}
:root[data-skin="systeme"] .panel{--r:26px;padding:16px 20px 20px;border-radius:26px}
:root[data-skin="systeme"] .panel h2{font:700 20px/25px var(--font);letter-spacing:0}
:root[data-skin="systeme"] .crumbs~.panel.evset,:root[data-skin="systeme"] .gtext{max-width:none}
:root[data-skin="systeme"] .bid .bn{--rs:8px;border-radius:8px;font-family:var(--font);font-weight:700}

/* ── suivi : élèves en capsules, résumé, matrice, sous-compétences en groupes ── */
:root[data-skin="systeme"] .pchips{display:flex;flex-wrap:nowrap;gap:8px;margin:4px calc(-1 * var(--gutr)) 16px calc(-1 * var(--gut));padding:0 var(--gutr) 0 var(--gut);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
:root[data-skin="systeme"] .pchips::-webkit-scrollbar{display:none}
:root[data-skin="systeme"] .pchips a{flex:none;flex-direction:row;align-items:center;gap:8px;min-height:44px;min-width:0;padding:0 16px;border:0;--r:22px;border-radius:22px;background:var(--surface);color:var(--ink)}
:root[data-skin="systeme"] .pchips a b{font:600 17px/22px var(--font);letter-spacing:0}
:root[data-skin="systeme"] .pchips a small{font-size:13px;line-height:18px;color:var(--muted)}
:root[data-skin="systeme"] .pchips a.on{background:var(--accent-fill);color:#fff}
:root[data-skin="systeme"] .pchips a.on small{color:#fff}
:root[data-skin="systeme"] .psum{--r:26px;max-width:none;padding:16px 20px;border:0;border-radius:26px}
:root[data-skin="systeme"] .psum h2{margin:0;font:700 28px/34px var(--font);overflow-wrap:anywhere;min-width:0}
:root[data-skin="systeme"] .pchips b{overflow-wrap:anywhere;min-width:0}
:root[data-skin="systeme"] .psum p{font-size:13px;line-height:18px;gap:4px 14px}
:root[data-skin="systeme"] .psum p b{font:600 17px/22px var(--font)}
:root[data-skin="systeme"] .bnote{max-width:none;border-radius:22px;padding:14px 16px}
:root[data-skin="systeme"] .bnote p{font-size:15px;line-height:20px}
:root[data-skin="systeme"] .pgrp{max-width:none;margin:0 0 20px}
:root[data-skin="systeme"] .pgrp h3{margin:0 4px 8px;font:700 17px/22px var(--font);gap:4px 10px}
:root[data-skin="systeme"] .pgrp h3 small{font-size:13px;line-height:18px}
:root[data-skin="systeme"] .pl{--r:26px;border:0;border-radius:26px;background:var(--surface)}
:root[data-skin="systeme"] .pl li{position:relative}
:root[data-skin="systeme"] .pl li+li{border-top:0}
:root[data-skin="systeme"] .pl li+li::before{content:"";position:absolute;left:58px;right:0;top:0;border-top:.5px solid var(--line)}
:root[data-skin="systeme"] .pl a{grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 12px;min-height:60px;padding:10px 16px;align-items:center}
:root[data-skin="systeme"] .pl .code{grid-row:1/3;display:grid;place-items:center;width:30px;height:22px;border-radius:7px;background:var(--cf,var(--cc));color:#fff;font:700 13px/1 var(--font)}
:root[data-skin="systeme"] .pl .t{font-size:15px;line-height:20px;color:var(--ink)}
:root[data-skin="systeme"] .pl .v{grid-column:2;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:4px 8px;text-align:left}
:root[data-skin="systeme"] .pl .v small,:root[data-skin="systeme"] .pl .nt{font-size:13px;line-height:18px;color:var(--muted)}
:root[data-skin="systeme"] .pl a:active{background:var(--soft)}
:root[data-skin="systeme"] .aei{--r:22px;border:0;border-radius:22px}
:root[data-skin="systeme"] .aeh .code{--rs:8px;height:30px;border-radius:8px;font-family:var(--font);font-weight:700}
/* matrice (js/systeme.js) : une rangée par compétence, une case par sous-compétence à l'aplat de son état */
:root[data-skin="systeme"] .p1-mat{display:grid;gap:10px;margin:16px 0 8px;padding:16px;border-radius:26px;background:var(--surface)}
:root[data-skin="systeme"] .p1-mat-t{margin:0;font:600 17px/22px var(--font);color:var(--ink)}
:root[data-skin="systeme"] .p1-mat-r{display:grid;grid-template-columns:32px repeat(9,minmax(0,1fr));align-items:center;gap:3px}
:root[data-skin="systeme"] .p1-mat-r>*{justify-self:start}
:root[data-skin="systeme"] .p1-mat-r>.badge{min-width:28px;margin-right:0;padding:0 4px}
:root[data-skin="systeme"] .p1-mat-c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;max-width:30px;height:auto;aspect-ratio:1;border-radius:8px;background:var(--fill2);color:var(--muted2);font:600 11px/13px var(--font);text-decoration:none;letter-spacing:-.1px}
:root[data-skin="systeme"][data-theme="dark"] .p1-mat-c{color:var(--txt2)}
:root[data-skin="systeme"] .p1-mat-c.a,:root[data-skin="systeme"][data-theme="dark"] .p1-mat-c.a{background:var(--good);color:var(--on-state)}
:root[data-skin="systeme"] .p1-mat-c.c,:root[data-skin="systeme"][data-theme="dark"] .p1-mat-c.c{background:var(--warn);color:var(--on-state)}
:root[data-skin="systeme"] .p1-mat-c.n,:root[data-skin="systeme"][data-theme="dark"] .p1-mat-c.n{background:var(--bad);color:var(--on-state)}
:root[data-skin="systeme"] .p1-mat-l{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 0;font-size:13px;line-height:18px;color:var(--muted)}
:root[data-skin="systeme"] .p1-mat-l i{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px;background:var(--fill2);vertical-align:0}
:root[data-skin="systeme"] .p1-mat-c:is(.a,.c,.n)::before{content:"";flex:none;width:9px;height:9px;background:currentColor;-webkit-mask:var(--ap-ic) center/contain no-repeat;mask:var(--ap-ic) center/contain no-repeat}
:root[data-skin="systeme"] .p1-mat-c.a{--ap-ic:var(--i-ok)}:root[data-skin="systeme"] .p1-mat-c.c{--ap-ic:var(--i-mi)}:root[data-skin="systeme"] .p1-mat-c.n{--ap-ic:var(--i-ko)}
:root[data-skin="systeme"] .p1-mat-l i.a{background:var(--good)}:root[data-skin="systeme"] .p1-mat-l i.c{background:var(--warn)}:root[data-skin="systeme"] .p1-mat-l i.n{background:var(--bad)}
@media (min-width:960px),(min-width:620px) and (min-height:501px),(min-width:620px) and (pointer:fine){
  :root[data-skin="systeme"] .pchips{flex-wrap:wrap;margin:4px 0 16px;padding:0;overflow:visible}
  :root[data-skin="systeme"] a.p1-mat-c{width:100%;max-width:44px;height:auto;border-radius:12px;font-size:13px;line-height:16px}
  :root[data-skin="systeme"] .pl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  :root[data-skin="systeme"] .pl li:nth-child(2)::before{content:none}
  :root[data-skin="systeme"] .pl li:nth-child(even){box-shadow:inset .5px 0 0 var(--line)}
  :root[data-skin="systeme"] .pl a{height:100%;align-content:center}
}
@media (min-width:1180px){
  :root[data-skin="systeme"] .p1-insp .p1-mat{margin:0;padding:6px 0 4px;border-radius:0;background:transparent}
  :root[data-skin="systeme"] .p1-insp .p1-mat-c,:root[data-skin="systeme"] .p1-insp a.p1-mat-c{width:100%;max-width:32px;height:auto;border-radius:8px;font-size:10px;line-height:12px}
  :root[data-skin="systeme"] .p1-insp .p1-mat-r{gap:3px;grid-template-columns:30px repeat(9,minmax(0,1fr))}
}

/* ── quiz, examen, correction ── */
:root[data-skin="systeme"] .back{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--accent);font:400 17px/22px var(--font);text-decoration:none}
:root[data-skin="systeme"] .back svg{width:22px;height:22px;flex:none}
:root[data-skin="systeme"] .qtop{gap:12px;margin:4px 0 16px}
:root[data-skin="systeme"] .qtop .bar,:root[data-skin="systeme"] .bar{height:6px;border-radius:3px;background:var(--fill2)}
:root[data-skin="systeme"] .qtop b{font:400 15px/20px var(--font);color:var(--muted)}
:root[data-skin="systeme"] .qcard{--r:0;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:transparent}
:root[data-skin="systeme"] .qcard .tag{margin:0 0 10px}
:root[data-skin="systeme"] .qcard h2{margin:0 0 18px;font:700 22px/28px var(--font);letter-spacing:0}
:root[data-skin="systeme"] .opts{display:grid;gap:0;border-radius:26px;background:var(--surface);overflow:hidden}
:root[data-skin="systeme"] .opt{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) 20px;gap:12px;align-items:center;min-height:56px;padding:12px 16px;border:0;border-radius:0;
  background:transparent;color:var(--ink);font:400 17px/22px var(--font);text-align:left;box-shadow:none}
:root[data-skin="systeme"] .opt:focus-visible{outline-offset:-3px}
:root[data-skin="systeme"] .opt+.opt::before{content:"";position:absolute;left:56px;right:0;top:0;border-top:.5px solid var(--line)}
:root[data-skin="systeme"] .opt .l{width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--ink);font:600 15px/1 var(--font)}
:root[data-skin="systeme"] .opt.sel{background:var(--accent-bg);border:0;box-shadow:none}
:root[data-skin="systeme"] .opt.sel .l{background:var(--accent-fill);color:#fff}
:root[data-skin="systeme"] .opt.good{background:var(--good-bg);border:0}
:root[data-skin="systeme"] .opt.good .l{background:var(--good);color:var(--on-state)}
:root[data-skin="systeme"] .opt.bad{background:var(--bad-bg);border:0}
:root[data-skin="systeme"] .opt.bad .l{background:var(--bad);color:var(--on-state)}
:root[data-skin="systeme"][data-theme="dark"] :is(.opt.good,.opt.bad) .l{color:var(--on-state)}
:root[data-skin="systeme"][data-theme="dark"] .opt.sel .l{color:#fff}
:root[data-skin="systeme"] :is(.opt.good,.opt.bad)::after{content:"";grid-column:3;width:20px;height:20px;background:var(--good);-webkit-mask:var(--i-ok) center/contain no-repeat;mask:var(--i-ok) center/contain no-repeat}
:root[data-skin="systeme"] .opt.bad::after{background:var(--bad);-webkit-mask-image:var(--i-ko);mask-image:var(--i-ko)}
:root[data-skin="systeme"] .opt:hover:not(:disabled){border:0}
:root[data-skin="systeme"] .opt:active:not(:disabled){transform:none;background:var(--soft)}
:root[data-skin="systeme"] body.eleve .opt{min-height:64px}
:root[data-skin="systeme"] .expl{margin:16px 0 0;padding:14px 16px;border-radius:22px;background:var(--surface);font-size:15px;line-height:21px}
:root[data-skin="systeme"] .expl b{font:600 17px/22px var(--font);margin:0 0 4px}
:root[data-skin="systeme"] .expl small{font-size:13px;line-height:18px}
:root[data-skin="systeme"] .expl .lnk{display:inline-flex;align-items:center;margin-top:4px}
:root[data-skin="systeme"] .qnext{max-width:none;margin:16px 0 0}
:root[data-skin="systeme"] .score{--r:26px;max-width:none;padding:24px 16px;border:0;border-radius:26px}
:root[data-skin="systeme"] .score .big{font:700 64px/72px var(--font);letter-spacing:-1px;font-variant-numeric:tabular-nums}
:root[data-skin="systeme"] .score p{font-size:15px;line-height:20px}
:root[data-skin="systeme"] .corr{gap:10px}
:root[data-skin="systeme"] .corr .it{--r:22px;position:relative;padding:12px 16px 12px 46px;border:0;border-radius:22px}
:root[data-skin="systeme"] .corr .it::before{content:"";position:absolute;left:16px;top:14px;width:20px;height:20px;background:var(--good);-webkit-mask:var(--i-ok) center/contain no-repeat;mask:var(--i-ok) center/contain no-repeat}
:root[data-skin="systeme"] .corr .it.ko::before{background:var(--bad);-webkit-mask-image:var(--i-ko);mask-image:var(--i-ko)}
:root[data-skin="systeme"] .corr .it p{font-size:15px;line-height:20px}
:root[data-skin="systeme"] .persub span{font-family:var(--font);font-weight:700}
:root[data-skin="systeme"] .timer{--rs:10px;border-radius:10px;font-family:var(--font);font-weight:600}
@media (max-width:619px),(max-width:959px) and (max-height:500px) and (pointer:coarse){
  /* « Quitter » dans la rangée de la barre de navigation, chevron seul quand le titre s'y range */
  :root[data-skin="systeme"] #app>.back{position:fixed;z-index:21;top:env(safe-area-inset-top,0px);left:max(4px,env(safe-area-inset-left,0px));height:var(--row);margin:0;padding:0 8px 0 4px;white-space:nowrap;overflow:hidden}
  :root[data-skin="systeme"] .top.titled~#app>.back{max-width:44px;padding-right:0}
  :root[data-skin="systeme"] #app>.back+.kicker{margin-top:0}
  :root[data-skin="systeme"] .qtop .timer{position:fixed;z-index:21;top:calc(env(safe-area-inset-top,0px) + 8px);right:calc(var(--gutr) + 52px);height:28px;display:inline-flex;align-items:center;padding:0 10px;font-size:15px}
  /* explication : feuille fixe à mi-hauteur, Question suivante au bas de la feuille */
  :root[data-skin="systeme"] .qcard .expl{position:fixed;z-index:22;left:0;right:0;bottom:0;max-height:56vh;max-height:56dvh;overflow:auto;overscroll-behavior:contain;margin:0;
    padding:24px 20px calc(50px + 28px + max(12px,env(safe-area-inset-bottom,0px)));border-radius:38px 38px 0 0;background:var(--elev);box-shadow:0 -10px 30px rgba(0,0,0,.14);
    animation:p1-feuille var(--t-sheet) var(--ease-sheet) backwards}
  :root[data-skin="systeme"] .qcard .expl::before{content:"";position:absolute;left:50%;top:6px;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--ter)}
  :root[data-skin="systeme"] .qcard:has(.expl)~.qnext{position:fixed;z-index:23;left:calc(var(--gut) + 4px);right:calc(var(--gutr) + 4px);bottom:max(12px,env(safe-area-inset-bottom,0px));margin:0;animation:p1-feuille var(--t-sheet) var(--ease-sheet) backwards}
  :root[data-skin="systeme"] body:has(.qcard .expl) main{padding-bottom:60vh;padding-bottom:60dvh}
  :root[data-skin="systeme"] body:has(.qcard .expl)::after{opacity:0}
}
@media (min-width:960px),(min-width:620px) and (min-height:501px),(min-width:620px) and (pointer:fine){
  :root[data-skin="systeme"] :is(.qcard,.qnext,.qtop,.score,.corr,.flash,.boxes){max-width:640px;margin-left:auto;margin-right:auto}
  :root[data-skin="systeme"] body[data-p1e="quiz"] :is(.kicker,#app>.back){display:flex;max-width:640px;margin-left:auto;margin-right:auto}
  :root[data-skin="systeme"] .opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;background:transparent;border-radius:0;overflow:visible}
  :root[data-skin="systeme"] .opt{min-height:72px;--r:18px;--rs:18px;border-radius:18px;background:var(--surface)}
  :root[data-skin="systeme"] .opt+.opt::before{content:none}
  :root[data-skin="systeme"] .opt:focus-visible{outline-offset:2px}
  :root[data-skin="systeme"] .expl{border-radius:18px}
}

/* ── cartes mémoire ── */
:root[data-skin="systeme"] .flash{max-width:560px;margin:8px auto 16px}
:root[data-skin="systeme"] .flash-in{min-height:360px;border-radius:26px}
:root[data-skin="systeme"] .face{align-items:center;justify-content:center;text-align:center;padding:24px;border:0;border-radius:26px;background:var(--surface)}
:root[data-skin="systeme"] .face.back{background:var(--surface)}
:root[data-skin="systeme"] .face b{font:700 22px/28px var(--font)}
:root[data-skin="systeme"] .face.back b{font:400 17px/24px var(--font)}
:root[data-skin="systeme"] .face small{font:600 13px/18px var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
:root[data-skin="systeme"] .boxes{gap:8px}
:root[data-skin="systeme"] .boxes div{border:0;border-radius:14px;background:var(--surface);font-size:13px;line-height:18px}
:root[data-skin="systeme"] .boxes b{font:700 20px/24px var(--font)}
:root[data-skin="systeme"] .row:has(>#ok){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:560px;margin-left:auto;margin-right:auto}
:root[data-skin="systeme"] #fb{display:flex;width:100%;max-width:560px;margin-left:auto;margin-right:auto}

/* ── Code de la route : livres et chapitres en groupes de lignes de 52, articles en lecture ── */
:root[data-skin="systeme"] .cr-part h3{margin:24px 4px 8px;font:700 20px/25px var(--font)}
:root[data-skin="systeme"] :is(.cr-part h3,.cr-livre summary,.cr-list) small{font-size:13px;line-height:18px}
:root[data-skin="systeme"] .cr-livre{--r:0;margin:0;padding:0 16px;border:0;border-radius:0;box-shadow:none;background:var(--surface)}
:root[data-skin="systeme"] .cr-part h3+.cr-livre{border-top-left-radius:26px;border-top-right-radius:26px}
:root[data-skin="systeme"] .cr-livre:last-child{margin-bottom:12px;border-bottom-left-radius:26px;border-bottom-right-radius:26px}
:root[data-skin="systeme"] .cr-livre+.cr-livre>summary{border-top:.5px solid var(--line)}
@media (min-width:960px){:root[data-skin="systeme"] .cr-part h3+.cr-livre{border-top-left-radius:18px;border-top-right-radius:18px}:root[data-skin="systeme"] .cr-livre:last-child{border-bottom-left-radius:18px;border-bottom-right-radius:18px}}
:root[data-skin="systeme"] .cr-livre summary{min-height:52px;font:600 17px/22px var(--font);cursor:default}
:root[data-skin="systeme"] .cr-livre li,:root[data-skin="systeme"] .cr-list li{border-top:.5px solid var(--line)}
:root[data-skin="systeme"] .cr-livre a,:root[data-skin="systeme"] .cr-list a{min-height:52px;font-size:17px;line-height:22px}
:root[data-skin="systeme"] .cr-list{max-width:none;margin:0 0 12px;padding:0;border-radius:26px;background:var(--surface);overflow:hidden}
:root[data-skin="systeme"] .cr-list li{margin:0;padding:0 16px;border:0;border-radius:0;background:transparent}
:root[data-skin="systeme"] .cr-list li+li{border-top:.5px solid var(--line)}
:root[data-skin="systeme"] #res .arts{display:grid;gap:0;border-radius:26px;background:var(--surface);overflow:hidden}
:root[data-skin="systeme"] .cr-hit{--r:0;border:0;border-radius:0;background:transparent;padding:12px 16px}
:root[data-skin="systeme"] #res .arts>.cr-hit+.cr-hit{border-top:.5px solid var(--line)}
:root[data-skin="systeme"] .cr-hit small{font-size:13px;line-height:18px}
:root[data-skin="systeme"] .cr-hit span{font-size:15px;line-height:20px}
:root[data-skin="systeme"] .art{--r:26px;max-width:none;padding:16px 20px 20px;border:0;border-radius:26px}
:root[data-skin="systeme"] .art .body{font-size:17px;line-height:26px}
:root[data-skin="systeme"] .rnav .btn{min-height:44px;padding:0 16px;--rs:22px;border-radius:22px;font-size:15px}
:root[data-skin="systeme"] .cr-crumbs{font-size:15px}

/* ── ressources : trois cartes d'outil au-delà du téléphone ── */
@media (min-width:960px),(min-width:620px) and (min-height:501px),(min-width:620px) and (pointer:fine){
  :root[data-skin="systeme"] body[data-p1e="ressources"] .acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;background:transparent;border-radius:0;overflow:visible}
  :root[data-skin="systeme"] body[data-p1e="ressources"] .act{--r:18px;min-height:112px;justify-content:flex-end;padding:52px 16px 14px;border-radius:18px;background:var(--surface)}
  :root[data-skin="systeme"] body[data-p1e="ressources"] .act .ai{top:14px;left:16px;margin:0}
  :root[data-skin="systeme"] body[data-p1e="ressources"] .act+.act::before,:root[data-skin="systeme"] body[data-p1e="ressources"] .act::after{content:none}
  :root[data-skin="systeme"] body[data-p1e="ressources"] .act:nth-child(even){box-shadow:none}
}

/* ── index du guide : termes en groupes, fiches en capsules ── */
:root[data-skin="systeme"] .ix{display:block;max-width:none}
:root[data-skin="systeme"] .ix>li{--r:26px;margin:0 0 12px;padding:14px 16px;border:0;border-radius:26px;break-inside:avoid}
:root[data-skin="systeme"] .ixt b{font:600 17px/22px var(--font)}
:root[data-skin="systeme"] .ixt span{font-size:13px;line-height:18px;font-variant-numeric:tabular-nums}
:root[data-skin="systeme"] .ixl{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
:root[data-skin="systeme"] .ixl a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;--rs:22px;border-radius:22px;background:var(--soft);color:var(--ink);text-decoration:none}
:root[data-skin="systeme"] .ixl .pg{font-size:13px;color:var(--muted)}
:root[data-skin="systeme"] .ixl .code{font-family:var(--font);font-weight:700;color:var(--cc)}
:root[data-skin="systeme"] .ixl .nm{font-size:15px;line-height:20px}
:root[data-skin="systeme"] .ixl .chev{color:var(--muted)}
@media (hover:hover) and (pointer:fine){:root[data-skin="systeme"] .ixl a:hover{background:var(--fill2)}}
@media (min-width:960px),(min-width:620px) and (min-height:501px),(min-width:620px) and (pointer:fine){
  :root[data-skin="systeme"] .ix{column-count:2;column-gap:16px}
  :root[data-skin="systeme"] .ix>li{display:inline-block;width:100%}
}

/* ── modale en feuille : fixée en bas sur le téléphone, feuille de formulaire centrée au-delà ── */
:root[data-skin="systeme"] .modal{padding:0;place-items:end stretch;background:var(--scrim);animation:p1-voile 240ms var(--ease-out) backwards}
:root[data-skin="systeme"] .sheet{position:relative;width:100%;max-width:none;max-height:90vh;max-height:90dvh;margin:0;padding:28px 20px calc(20px + env(safe-area-inset-bottom,0px));
  border-radius:38px 38px 0 0;background:var(--bg);box-shadow:0 -10px 30px rgba(0,0,0,.14);overscroll-behavior:contain;animation:p1-feuille var(--t-sheet) var(--ease-sheet) backwards}
/* poignée collante : elle reste en haut de la feuille quand la liste défile (feuille ouverte sur la fiche choisie, plus bas dans la liste) */
:root[data-skin="systeme"] .sheet::before{content:"";position:sticky;z-index:2;display:block;top:-22px;width:36px;height:5px;margin:-22px auto 17px;border-radius:3px;background:var(--ter)}
:root[data-skin="systeme"][data-theme="dark"] .sheet{background:var(--surface)}
:root[data-skin="systeme"][data-theme="dark"] .sheet .subs{background:var(--elev)}
:root[data-skin="systeme"] .sheet h2{margin:0 0 6px;font:700 20px/25px var(--font);letter-spacing:0}
:root[data-skin="systeme"] .sheet .subs{gap:0}
:root[data-skin="systeme"] .sheet .sub-i{min-height:60px;padding:9px 16px}
:root[data-skin="systeme"] .sheet .sub-i.cur{background:var(--accent-bg);box-shadow:none}
:root[data-skin="systeme"] .sheet .row{margin-top:16px}
@media (min-width:960px),(min-width:620px) and (min-height:501px),(min-width:620px) and (pointer:fine){
  :root[data-skin="systeme"] .modal{place-items:center;padding:24px}
  :root[data-skin="systeme"] .sheet{max-width:540px;max-height:85vh;max-height:85dvh;padding:22px 22px 22px;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);animation-name:p1-forme;animation-duration:var(--t-show)}
  :root[data-skin="systeme"] .sheet::before{content:none}
}

/* ── Mac et iPad avec trackpad : survol et flèche (spec 3, Mac) ──
   Le survol ne s'allume qu'à la souris ou au trackpad : au doigt, une ligne touchée ne reste pas grisée (app.css a des survols sans garde, ou gardés par la seule largeur).
   Flèche par défaut sur les commandes et les rangées, comme dans une app ; la main reste sur les liens du texte (.lk, .lnk, liens des fiches). */
:root[data-skin="systeme"] :is(.stl,.pl a,.snav a:not(.on),.scomp a:not(.on),.stree a:not(.on)):hover{background:transparent}
@media (hover:hover) and (pointer:fine){:root[data-skin="systeme"] :is(.stl,.pl a,.snav a:not(.on),.scomp a:not(.on),.stree a:not(.on)):hover{background:var(--soft)}}
:root[data-skin="systeme"] :is(.act,.toc button,.ci,.opt,.flash-in,.gd>summary,.nexttab,.stl,.ptabs button,.esb,.tile,.sub-i,.snav a,.stree a,.scomp a,.fnav a,.pchips a,.pl a,.ixl a,.bottom a,.p1-mat-c,[data-show],[data-sh-go]){cursor:default}

/* ── Montrer (spec 5) : scène plein cadre sans carte, repère en haut, capsule de commandes en verre qui s'efface ──
   Grille de #show : rangée 1 le repère, rangée 2 la scène, rangée 3 la capsule (Précédent, parties, Suivant ; #show::after porte le verre).
   Tailles liées à la hauteur et à la largeur : titre 64 et puces 34 en 1280 x 720, 96 et 51 en 1920 x 1080. La règle vaut aussi pour la copie
   qui s'efface à la fermeture (.p1-sortie, posée par js/systeme.js), d'où le sélecteur de classe .show plutôt que #show. */
:root[data-skin="systeme"]{--bg-show:#FFFFFF}
:root[data-skin="systeme"][data-theme="dark"]{--bg-show:#000000}
:root[data-skin="systeme"] .show{
  --sh-t:clamp(34px,min(8.9vh,7.5vw),96px);--sh-b:clamp(20px,min(4.7vh,5.6vw),52px);--sh-k:clamp(17px,min(3.06vh,2.9vw),33px);--sh-min:15px;
  --sh-r:clamp(15px,min(2.64vh,2.2vw),28px);--sh-l:clamp(15px,calc(15px + (100vh - 720px) / 90),19px);--sh-c:clamp(52px,6vh,72px);
  --sh-mx:clamp(20px,7.5vw,144px);--sh-x:max(16px,env(safe-area-inset-left,0px));--sh-xr:max(16px,env(safe-area-inset-right,0px));
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,auto) auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:0;
  padding:0 var(--sh-xr) max(24px,calc(env(safe-area-inset-bottom,0px) + 8px)) var(--sh-x);
  background:var(--bg-show);color:var(--ink);overscroll-behavior:none;touch-action:pan-y;
  animation:p1-voile var(--t-screen) var(--ease-out) backwards}
/* repère : pastille du code, partie, position ; boîte ; fermer (cercle de verre) */
:root[data-skin="systeme"] .show .sh-top{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:12px;min-width:0;min-height:56px;
  margin:max(20px,calc(env(safe-area-inset-top,0px) + 8px)) clamp(0px,calc(32px - var(--sh-x)),16px) 0}
:root[data-skin="systeme"] .show .sh-where{flex:1;display:flex;align-items:baseline;min-width:0;font:600 var(--sh-r)/1.25 var(--font);letter-spacing:0;color:var(--muted)}
:root[data-skin="systeme"] .show .sh-p{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
:root[data-skin="systeme"] .show .sh-n{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
:root[data-skin="systeme"] .show .sh-n::before{content:"·";margin:0 .4em}
:root[data-skin="systeme"] .show .p1-code{display:inline-block;vertical-align:.06em;min-width:2.2em;padding:.2em .45em;border-radius:8px;background:var(--cf,var(--cc));color:#FFFFFF;
  font-size:1em;font-weight:700;line-height:1.1;text-align:center}
/* le séparateur « · » de la v18 reste dans le texte (lu par VoiceOver) ; à l'écran, la pastille le remplace */
:root[data-skin="systeme"] .show .p1-sep{opacity:0}
:root[data-skin="systeme"] .show .sh-box{flex:none;margin:0;padding:.3em .8em;border:0;--rs:999px;border-radius:999px;background:var(--soft);color:var(--txt2);font:600 var(--sh-r)/1.2 var(--font);letter-spacing:0}
:root[data-skin="systeme"] .show [data-sh="x"]{flex:none;width:56px;height:56px;margin-left:auto;border:.5px solid var(--glass-line);border-radius:50%;background:var(--glass);
  -webkit-backdrop-filter:var(--verre);backdrop-filter:var(--verre);box-shadow:0 6px 20px rgba(0,0,0,.10),var(--glass-hi);color:var(--ink);
  transition:opacity 120ms var(--ease-io),transform var(--t-press) var(--ease-out)}
:root[data-skin="systeme"] .show [data-sh="x"] svg{width:24px;height:24px;stroke-width:2.2}
:root[data-skin="systeme"] .show [data-sh="x"]:active{transform:scale(.94)}
/* scène : pas de carte, marges de 96 en 1280 ; une diapositive plus haute que la scène commence en haut et défile (marges automatiques, « safe center ») */
:root[data-skin="systeme"] .show .sh-card{grid-column:1/-1;grid-row:2;align-self:stretch;justify-self:stretch;width:auto;max-width:none;max-height:none;min-width:0;min-height:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  margin:0 calc(-1 * var(--sh-xr)) 0 calc(-1 * var(--sh-x));
  padding:16px max(var(--sh-mx),calc(env(safe-area-inset-right,0px) + 16px)) 24px max(var(--sh-mx),calc(env(safe-area-inset-left,0px) + 16px));
  --r:0;border-radius:0;background:transparent;box-shadow:none;outline:0;color:var(--ink);-webkit-user-select:none;user-select:none;cursor:default}
/* au projecteur (960 x 600 et plus), rien sous 19 px, même quand la diapositive se resserre ; 15 px au plus petit sur iPhone */
@media (min-width:960px) and (min-height:600px){:root[data-skin="systeme"] .show{--sh-min:19px}}
/* diapositive trop haute : js/systeme.js réduit le texte juste assez (--fit, de 1 à 0,55, puces jamais sous 18 px, ni sous 19 px au projecteur), puis le chiffre clé seul (--fitn, jusqu'à 0,5), et resserre les espaces ;
   la ligne garde sa largeur en pixels (30 em de la taille pleine, 40 em au plus) ; la scène défile au-delà */
:root[data-skin="systeme"] .show .sh-card.p1-serre li+li{margin-top:.3em}
:root[data-skin="systeme"] .show .sh-card.p1-2col ul{columns:2;column-gap:1.5em;max-width:none}
:root[data-skin="systeme"] .show .sh-card.p1-2col li{break-inside:avoid}
:root[data-skin="systeme"] .show .sh-card.p1-2col li+li{margin-top:0;padding-top:.3em}
:root[data-skin="systeme"] .show.p1-suite .sh-card{-webkit-mask:linear-gradient(to bottom,#000 calc(100% - 64px),transparent calc(100% - 8px));mask:linear-gradient(to bottom,#000 calc(100% - 64px),transparent calc(100% - 8px))}
:root[data-skin="systeme"] .show.p1-suite::before{content:"";grid-column:1/-1;grid-row:2;align-self:end;justify-self:center;z-index:1;width:16px;height:26px;margin-bottom:4px;background:var(--muted);transform:rotate(90deg);pointer-events:none;
  -webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat}
:root[data-skin="systeme"] .show .sh-card.p1-serre .sl-col{margin-bottom:.4em}
:root[data-skin="systeme"] .show .sh-card.fwd{opacity:0;transform:translateX(32px)}
:root[data-skin="systeme"] .show .sh-card.bwd{opacity:0;transform:translateX(-32px)}
:root[data-skin="systeme"] .show .sh-card.in{opacity:1;transform:none;transition:opacity var(--t-show) var(--ease-out),transform var(--t-show) var(--ease-out)}
/* partie en petit titre, à la couleur de la compétence (Comment, Schéma, Chiffre clé) */
:root[data-skin="systeme"] .show .sl-k{display:flex;align-items:center;gap:.5em;margin:0 0 .25em;font:600 max(var(--sh-min),calc(var(--sh-k) * var(--fit,1)))/1.27 var(--font);letter-spacing:0;text-transform:none;color:var(--cc)}
:root[data-skin="systeme"] .show .sl-k.rk{color:var(--bad)}
:root[data-skin="systeme"] .show .sl-nb{display:inline-grid;place-items:center;flex:none;width:1.6em;height:1.6em;margin:0;border-radius:50%;background:var(--cb);color:var(--cc);font-weight:700;font-variant-numeric:tabular-nums}
/* partie qui porte une liste ou les boutons de fin (Pourquoi, Risques, À ton tour) : elle devient le titre de la diapositive */
:root[data-skin="systeme"] .show .sh-card:is(:has(>ul),:has(>.sl-go))>.sl-k{display:block;margin:0 0 .12em;font:700 calc(var(--sh-t) * var(--fit,1))/1.125 var(--font);letter-spacing:-.01em;color:var(--ink)}
:root[data-skin="systeme"] .show .sh-card:has(>ul)>.sl-k.rk{color:var(--bad)}
:root[data-skin="systeme"] .show .sl-col{margin:0 0 .7em;font:400 max(var(--sh-min),calc(var(--sh-k) * var(--fit,1)))/1.27 var(--font);color:var(--muted)}
/* puces de 34 en 600, ligne de 40 signes au plus, marqueur rond de 12 à la couleur de la compétence */
:root[data-skin="systeme"] .show .sh-card ul{margin:0;padding:0;list-style:none;max-width:min(40em,calc(30em / var(--fit,1)));font:600 calc(var(--sh-b) * var(--fit,1))/1.3 var(--font);letter-spacing:0;color:var(--ink);text-wrap:pretty}
:root[data-skin="systeme"] .show .sh-card li{position:relative;margin:0;padding-left:1em}
:root[data-skin="systeme"] .show .sh-card li+li{margin-top:.5em}
:root[data-skin="systeme"] .show .sh-card li::before{content:"";position:absolute;left:.1em;top:.47em;width:.35em;height:.35em;border-radius:50%;background:var(--cc)}
:root[data-skin="systeme"] .show .sh-card:has(>.sl-k.rk) li::before{background:var(--bad)}
:root[data-skin="systeme"] .show .sl-big{max-width:min(40em,calc(30em / var(--fit,1)));margin:0;font:600 calc(var(--sh-b) * var(--fit,1))/1.3 var(--font);letter-spacing:0;color:var(--ink);text-wrap:pretty}
:root[data-skin="systeme"] .show .sl-num{margin:0 0 .08em;font:700 calc(clamp(64px,20vh,216px) * var(--fitn,var(--fit,1)))/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--cc)}
/* diapositive de titre : pastille du code, titre de 64, sous-titre */
:root[data-skin="systeme"] .show .sl-t{display:grid;gap:.3em;justify-items:start;max-width:100%}
:root[data-skin="systeme"] .show .sl-t .badge.lg{min-width:2.3em;height:1.6em;margin:0;padding:0 .45em;--rs:.4em;border-radius:.4em;background:var(--cf,var(--cc));color:#FFFFFF;font:700 var(--sh-k)/1 var(--font)}
:root[data-skin="systeme"] .show .sl-t h2{margin:0;max-width:16em;font:700 calc(var(--sh-t) * var(--fit,1))/1.125 var(--font);letter-spacing:-.01em;text-transform:none;color:var(--ink);text-wrap:balance}
:root[data-skin="systeme"] .show .sl-t p{margin:0;max-width:30em;font:400 max(var(--sh-min),calc(var(--sh-k) * var(--fit,1)))/1.3 var(--font);color:var(--muted)}
/* schéma : visuel officiel sur fond blanc (rayon 18), 70 % de la hauteur de la scène, même en sombre */
:root[data-skin="systeme"][data-theme="dark"] .show .sh-card .svg{background:#D1D1D6}
:root[data-skin="systeme"] .show .sh-card .svg{align-self:center;max-width:100%;margin:.2em 0 0;padding:clamp(8px,1.6vh,20px);border-radius:18px;background:#FFFFFF;color:#000000;
  --ink:#000000;--txt:#000000;--txt2:#3C3C43;--muted:#6C6C70;--road:#D9DBE6;--curb:#B7BBD0;--accent:#0A64D8;--accent-t:#0A64D8;--accent-bg:#E5EFFC;--line:#C6C6C8;--line2:#B4B4B8;
  --surface:#FFFFFF;--soft:#EFEFF4;--bg:#F2F2F7;--good:#0B6E50;--warn:#7A5200;--bad:#B3261E;--good-bg:#E3F4EC;--warn-bg:#FFF1D6;--bad-bg:#FDE8E6}
:root[data-skin="systeme"] .show .sh-card .svg svg{display:block;width:auto;max-width:100%;height:calc((100dvh - 140px - var(--sh-c)) * .7);max-height:none;margin:0 auto}
:root[data-skin="systeme"] .show .sh-card .svg:has(>div)>svg{height:calc((100dvh - 140px - var(--sh-c)) * .5)}
/* écran en hauteur (iPhone, iPad portrait) : le schéma prend la largeur, sa hauteur suit (bornée à 70 % de la scène) */
@media (max-aspect-ratio:1/1){
  :root[data-skin="systeme"] .show .sh-card .svg{align-self:stretch}
  :root[data-skin="systeme"] .show .sh-card .svg svg{width:100%;height:auto;max-height:calc((100dvh - 140px - var(--sh-c)) * .7)}
  :root[data-skin="systeme"] .show .sh-card .svg:has(>div)>svg{height:auto;max-height:calc((100dvh - 140px - var(--sh-c)) * .5)}
}
:root[data-skin="systeme"] .show .sh-card .cap{align-self:center;max-width:40em;margin:.6em 0 0;font:400 var(--sh-k)/1.3 var(--font);text-align:center;color:var(--muted)}
:root[data-skin="systeme"] .show .sl-go{display:flex;flex-wrap:wrap;gap:12px;margin:.9em 0 0}
:root[data-skin="systeme"] .show .sl-go .btn{min-height:56px;margin:0;padding:0 28px;--rs:28px;border-radius:28px;font:600 max(var(--sh-min),clamp(17px,2.6vh,24px))/1.2 var(--font)}
/* centrage vertical sûr : marges automatiques sur la première et la dernière pièce (après leurs marges propres) */
:root[data-skin="systeme"] .show .sh-card>:first-child:first-child{margin-top:auto}
:root[data-skin="systeme"] .show .sh-card>:last-child:last-child{margin-bottom:auto}
/* capsule de commandes : verre centré en bas, 52 px en 720 (7 %), 64 en 1080 */
:root[data-skin="systeme"] .show::after{content:"";grid-column:2/5;grid-row:3;align-self:center;z-index:0;height:var(--sh-c);border-radius:calc(var(--sh-c) / 2);
  background:var(--glass);-webkit-backdrop-filter:var(--verre);backdrop-filter:var(--verre);border:.5px solid var(--glass-line);box-shadow:0 6px 20px rgba(0,0,0,.10),var(--glass-hi);
  transition:opacity 120ms var(--ease-io)}
:root[data-skin="systeme"] .show .sh-nav{display:contents}
:root[data-skin="systeme"] .show .sh-nav .btn{grid-row:3;align-self:center;position:relative;z-index:1;width:auto;min-height:0;height:calc(var(--sh-c) - 8px);margin:0;padding:0 calc(var(--sh-l) * 1.05);
  --rs:999px;border:0;border-radius:999px;font:600 var(--sh-l)/1.2 var(--font);letter-spacing:0;gap:.35em;white-space:nowrap;box-shadow:none;
  transition:opacity 120ms var(--ease-io),transform var(--t-press) var(--ease-out),background-color var(--t-state) var(--ease-out)}
:root[data-skin="systeme"] .show .sh-nav .btn:first-child{grid-column:2;margin-left:4px;background:transparent;color:var(--ink)}
:root[data-skin="systeme"] .show .sh-nav .btn:last-child{grid-column:4;margin-right:4px;background:transparent;color:var(--ink)}
:root[data-skin="systeme"] .show.p1-fleches :focus-visible{outline:none;box-shadow:none}
:root[data-skin="systeme"] .show .sh-nav .tx{display:inline}
:root[data-skin="systeme"] .show .sh-nav .chv{display:none}
:root[data-skin="systeme"] .show .sh-nav .btn:first-child::before,:root[data-skin="systeme"] .show .sh-nav .btn:last-child::after{content:"";flex:none;width:.6em;height:1em;background:currentColor;
  -webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat}
:root[data-skin="systeme"] .show .sh-nav .btn:first-child::before{transform:scaleX(-1)}
:root[data-skin="systeme"] .show .sh-nav .btn[data-sh="x"]::after{display:none}
@media (hover:hover) and (pointer:fine){
  :root[data-skin="systeme"] .show .sh-nav .btn:first-child:not(:disabled):hover{background:var(--glass-btn)}
  :root[data-skin="systeme"] .show .sh-nav .btn:last-child:not(:disabled):hover{background:var(--glass-btn)}
  :root[data-skin="systeme"] .show .sh-parts button:not(.on):hover{background:var(--glass-btn)}
}
/* parties : libellés de 15 en 600, la partie en cours sur une capsule opaque (curseur qui glisse, js/systeme.js) ; filets de 24 px de part et d'autre */
:root[data-skin="systeme"] .show .sh-parts{grid-column:3;grid-row:3;align-self:center;position:relative;z-index:1;isolation:isolate;display:flex;justify-content:flex-start;gap:0;min-width:0;max-width:100%;
  margin:0 6px;padding:0 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:smooth;touch-action:pan-x;
  background:linear-gradient(var(--line),var(--line)) 0 50%/1px 24px no-repeat,linear-gradient(var(--line),var(--line)) 100% 50%/1px 24px no-repeat;
  transition:opacity 120ms var(--ease-io)}
:root[data-skin="systeme"] .show .sh-parts::-webkit-scrollbar{display:none}
/* parties qui ne tiennent pas (iPhone, iPad étroit) : les libellés coupés au bord s'estompent sur 12 px, les filets restent nets (js/systeme.js pose .p1-deb) */
:root[data-skin="systeme"] .show .sh-parts.p1-deb{
  -webkit-mask:linear-gradient(90deg,#000 1px,transparent 1px,#000 12px,#000 calc(100% - 12px),transparent calc(100% - 1px),#000 calc(100% - 1px));
  mask:linear-gradient(90deg,#000 1px,transparent 1px,#000 12px,#000 calc(100% - 12px),transparent calc(100% - 1px),#000 calc(100% - 1px))}
:root[data-skin="systeme"] .show .sh-parts button{flex:none;min-width:44px;min-height:0;height:calc(var(--sh-c) - 8px);margin:0;padding:0 calc(var(--sh-l) * .75);border:0;--rs:999px;border-radius:999px;
  background:transparent;color:var(--ink);font:600 var(--sh-l)/1.2 var(--font);letter-spacing:0;white-space:nowrap;cursor:default;transition:color var(--t-state) var(--ease-out),background-color var(--t-state) var(--ease-out)}
:root[data-skin="systeme"] .show .sh-parts button.on{border:0;background:var(--accent-bg);color:var(--accent-t)}
:root[data-skin="systeme"] .show .sh-parts::before{content:"";position:absolute;z-index:-1;left:0;top:0;width:var(--w,0);height:var(--h,0);transform:translate(var(--x,0),var(--y,0));
  transform-origin:0 0;border-radius:999px;background:var(--accent-bg);opacity:0}
:root[data-skin="systeme"] .show .sh-parts.p1-cur::before{opacity:1}
:root[data-skin="systeme"] .show .sh-parts.p1-pret::before{transition:transform var(--tc,var(--t-cursor)) var(--ease-spring),width var(--tc,var(--t-cursor)) var(--ease-spring),height var(--tc,var(--t-cursor)) var(--ease-spring)}
:root[data-skin="systeme"] .show .sh-parts.p1-cur button.on{background:transparent}
/* effacement : après 3 s sans pointeur ni touche (js/systeme.js pose .calme) ; l'opacité seule, jamais visibility ni display */
:root[data-skin="systeme"] .show.calme :is(.sh-parts,.sh-nav .btn,[data-sh="x"]),:root[data-skin="systeme"] .show.calme::after{opacity:0;pointer-events:none;transition-duration:300ms}
:root[data-skin="systeme"] .show.calme,:root[data-skin="systeme"] .show.calme *{cursor:none}
/* fermeture : copie inerte qui s'efface en 160 ms (la vraie couche est déjà retirée par app.js) */
@keyframes p1-voile-r{from{opacity:1}}
:root[data-skin="systeme"] .show.p1-sortie{z-index:59;opacity:0;pointer-events:none;animation:p1-voile-r var(--t-exit) var(--ease-out) backwards}
/* tablette étroite (iPad portrait, écran partagé) : la capsule ne dépasse pas 760 px, les parties défilent de côté au-delà */
@media (min-width:620px) and (max-width:959px){
  :root[data-skin="systeme"] .show{grid-template-columns:minmax(max(0px,calc((100% - 760px) / 2)),1fr) auto minmax(0,auto) auto minmax(max(0px,calc((100% - 760px) / 2)),1fr)}
}
/* téléphone : capsule pleine largeur, Précédent et Suivant en symbole au-dessus du libellé, parties au milieu qui défilent de côté */
@media (max-width:619px){
  :root[data-skin="systeme"] .show{grid-template-columns:0 auto minmax(0,1fr) auto 0;--sh-l:15px}
  :root[data-skin="systeme"] .show .sh-top{min-height:44px;margin-inline:0;gap:8px}
  :root[data-skin="systeme"] .show [data-sh="x"]{width:44px;height:44px}
  :root[data-skin="systeme"] .show [data-sh="x"] svg{width:20px;height:20px}
  :root[data-skin="systeme"] .show .sh-nav .btn{flex-direction:column;gap:2px;padding:0 10px;font-size:13px;line-height:16px}
  :root[data-skin="systeme"] .show .sh-nav .btn:first-child::before,:root[data-skin="systeme"] .show .sh-nav .btn:last-child::after{width:10px;height:16px}
  :root[data-skin="systeme"] .show .sh-nav .btn:last-child::after{order:-1}
  :root[data-skin="systeme"] .show .sh-parts{margin:0 2px;padding:0 4px}
  :root[data-skin="systeme"] .show .sh-parts button{padding:0 11px}
}
/* hauteur de 500 px au plus (iPhone couché, fenêtre basse) : repère et capsule plus serrés */
@media (max-height:500px){
  :root[data-skin="systeme"] .show .sh-top{min-height:44px;margin-top:max(8px,calc(env(safe-area-inset-top,0px) + 4px))}
  :root[data-skin="systeme"] .show [data-sh="x"]{width:44px;height:44px}
  :root[data-skin="systeme"] .show{padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
  :root[data-skin="systeme"] .show .sh-card{padding-top:8px;padding-bottom:12px}
  :root[data-skin="systeme"] .show .sh-card .svg svg{height:calc((100dvh - 80px - var(--sh-c)) * .7)}
  :root[data-skin="systeme"] .show .sh-card .svg:has(>div)>svg{height:calc((100dvh - 80px - var(--sh-c)) * .5)}
}
/* ── mouvement : appui, transitions d'écran (View Transitions, js/systeme.js), rafale, mouvement réduit ── */
:root[data-skin="systeme"] :is(.tile,.sub-i,.act,.fnav a,.cr-hit,.opt){transition:background-color var(--t-state) var(--ease-out),transform var(--t-press) var(--ease-out)}
@keyframes p1-entree{0%,30%{opacity:0;transform:translateX(24px)}100%{opacity:1;transform:none}}
@keyframes p1-sortie{0%{opacity:1;transform:none}50%{opacity:0}100%{opacity:0;transform:translateX(-8px)}}
@keyframes p1-entree-r{0%,30%{opacity:0;transform:translateX(-24px)}100%{opacity:1;transform:none}}
@keyframes p1-sortie-r{0%{opacity:1;transform:none}50%{opacity:0}100%{opacity:0;transform:translateX(24px)}}
/* fermeture d'une feuille (M5) : le voile s'efface, la feuille redescend depuis là où le doigt l'a laissée (--dy), en 160 ms */
@keyframes p1-voile-fin{to{background-color:transparent}}
@keyframes p1-feuille-r{from{transform:translateY(var(--dy,0px))}to{transform:translateY(100%)}}
@keyframes p1-forme-r{to{opacity:0;transform:scale(.96)}}
@keyframes p1-pane{from{opacity:0;transform:translateY(6px)}}
@keyframes p1-feuille{from{transform:translateY(100%)}}
@keyframes p1-voile{from{opacity:0}}
@keyframes p1-forme{from{opacity:0;transform:scale(.96)}}
@keyframes p1-coche{from{transform:scale(.6);opacity:0}}
:root[data-skin="systeme"]:is(.vt-ecran,.vt-retour) .top{view-transition-name:p1-nav}
:root[data-skin="systeme"]:is(.vt-ecran,.vt-retour) .bottom{view-transition-name:p1-tabs}
:root[data-skin="systeme"]:is(.vt-ecran,.vt-retour) .side{view-transition-name:p1-side}
:root[data-skin="systeme"]::view-transition-group(p1-nav),:root[data-skin="systeme"]::view-transition-group(p1-tabs),:root[data-skin="systeme"]::view-transition-group(p1-side){animation:none}
:root[data-skin="systeme"]::view-transition-old(p1-nav),:root[data-skin="systeme"]::view-transition-old(p1-tabs),:root[data-skin="systeme"]::view-transition-old(p1-side){display:none}
:root[data-skin="systeme"]::view-transition-new(p1-nav),:root[data-skin="systeme"]::view-transition-new(p1-tabs),:root[data-skin="systeme"]::view-transition-new(p1-side){animation:none}
/* M1 : le groupe racine ne garde pas l'animation du navigateur (250 ms de plus pendant lesquels les touchers tombent sur les pseudo-éléments) */
:root[data-skin="systeme"]::view-transition-group(root){animation:none}
/* M9 : l'accessoire et la barre de séance, fixes, ne glissent pas avec la page (noms posés là où ils sont fixes) */
:root[data-skin="systeme"]::view-transition-group(p1-acc),:root[data-skin="systeme"]::view-transition-group(p1-seance),:root[data-skin="systeme"]::view-transition-new(p1-acc),:root[data-skin="systeme"]::view-transition-new(p1-seance){animation:none}
:root[data-skin="systeme"]::view-transition-old(p1-acc),:root[data-skin="systeme"]::view-transition-old(p1-seance){display:none}
@media (max-width:1179px){:root[data-skin="systeme"]:is(.vt-ecran,.vt-retour) .p1-seance{view-transition-name:p1-seance}}
@media (max-width:959px),(min-width:1180px){:root[data-skin="systeme"]:is(.vt-ecran,.vt-retour) body.p1-fiche .fhero .fbar{view-transition-name:p1-acc}}
/* M8 : à l'ouverture d'une fiche, seule la transition d'écran joue ; le volet ne monte qu'au changement d'onglet, d'étape ou de partie */
:root[data-skin="systeme"] body.p1-neuf .tpane{animation:none}
/* M5 */
:root[data-skin="systeme"] .modal.p1-ferme{pointer-events:none;animation:p1-voile-fin 160ms var(--ease-out) both}
:root[data-skin="systeme"] .modal.p1-ferme .sheet{animation:p1-feuille-r 160ms var(--ease-out) both}
@media (min-width:960px),(min-width:620px) and (min-height:501px),(min-width:620px) and (pointer:fine){:root[data-skin="systeme"] .modal.p1-ferme .sheet{animation-name:p1-forme-r}}
/* M13 : sous Montrer, pas de verre composé pour rien */
:root[data-skin="systeme"] body.showing :is(.bottom,.p1-seance){visibility:hidden}
:root[data-skin="systeme"] body.showing .fhero .fbar{-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-skin="systeme"]::view-transition-old(root),:root[data-skin="systeme"]::view-transition-new(root){mix-blend-mode:normal;animation-timing-function:var(--ease-out);animation-fill-mode:both}
:root[data-skin="systeme"].vt-ecran::view-transition-old(root){animation-name:p1-sortie;animation-duration:var(--t-screen)}
:root[data-skin="systeme"].vt-ecran::view-transition-new(root){animation-name:p1-entree;animation-duration:var(--t-screen)}
:root[data-skin="systeme"].vt-retour::view-transition-old(root){animation-name:p1-sortie-r;animation-duration:var(--t-exit)}
:root[data-skin="systeme"].vt-retour::view-transition-new(root){animation-name:p1-entree-r;animation-duration:var(--t-exit)}
:root[data-skin="systeme"].rafale *,:root[data-skin="systeme"].rafale *::before,:root[data-skin="systeme"].rafale *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  :root[data-skin="systeme"] *::before,:root[data-skin="systeme"] *::after{transition:none!important;animation:none!important}
  :root[data-skin="systeme"]::view-transition-group(*),:root[data-skin="systeme"]::view-transition-old(*),:root[data-skin="systeme"]::view-transition-new(*){animation:none!important}
}
/* ── étape 4 : corrections d'après les trois relectures du 23 octobre (critique/corrections.md) ──
   Placé après le mouvement et avant le verre opaque : ces règles priment sur les blocs plus haut, à force égale. */

/* fiche, barre de lecture (D1, D2, D3, D10, U5) : les onglets de la vue sur leur rangée, puis les parties, puis la boîte ;
   plus rien n'est caché au bord. Sur iPad paysage et Mac, la boîte passe en tête de l'inspecteur (js/systeme.js). */
@media (max-width:619px) and (min-height:501px),(max-width:619px) and (pointer:fine){
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs){display:flex;flex-wrap:wrap;height:auto;margin:10px 0 0;padding:0;overflow:visible;row-gap:8px;column-gap:0;scroll-snap-type:none}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)::after{display:none}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>*{scroll-snap-align:none}
  :root[data-skin="systeme"] .fhero .freg>.ftabs{position:static;left:auto;flex:1 1 100%;width:auto;min-width:0}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.ftw,:root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.ftw:not(:first-child){flex:1 1 100%;min-width:0;margin:0 calc(-1 * var(--gutr)) 0 calc(-1 * var(--gut));padding:0;background:none}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.ftw .ptabs{overflow-x:auto;overflow-y:hidden;padding:0 var(--gutr) 0 var(--gut);scroll-padding:0 var(--gutr) 0 var(--gut);
    scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.ftw .ptabs::-webkit-scrollbar{display:none}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.ftw .ptabs button{scroll-snap-align:start}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.boxw,:root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.boxw:not(:first-child){flex:1 1 100%;min-width:0;margin:0;padding:0;background:none}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>:last-child{margin-right:0}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.ftw:last-child{margin-right:calc(-1 * var(--gutr))}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.boxw .seg.box{display:flex;width:100%;box-sizing:border-box}
  :root[data-skin="systeme"] .fhero .freg:has(>.ftabs)>.boxw .seg.box button{flex:1 1 auto;padding:0 10px}
  :root[data-skin="systeme"] .fhero .ftw-notes{margin-top:6px}
}
/* tablette : les parties prennent la largeur de leur contenu ; la boîte passe à la ligne si elle ne tient pas à côté (D10) */
@media (min-width:620px) and (max-width:959px) and (min-height:501px),(min-width:620px) and (max-width:959px) and (pointer:fine){
  :root[data-skin="systeme"] .fhero .freg>.ftw{flex:1 1 auto;min-width:0;max-width:100%}
  :root[data-skin="systeme"] .fhero .ftw .ptabs{-webkit-mask:none;mask:none;padding-right:2px}
}
/* 960 px et plus : plus de rangée unique qui défile ; onglets de la vue sur une ligne (libellés entiers), parties dessous (D1) */
@media (min-width:960px){
  :root[data-skin="systeme"] .fhero .freg{flex-wrap:wrap;margin:12px 0 0;padding:0;overflow:visible;row-gap:8px;column-gap:12px;scroll-snap-type:none}
  :root[data-skin="systeme"] .fhero .freg::after{display:none}
  :root[data-skin="systeme"] .fhero .freg>.ftabs{flex:0 0 auto}
  :root[data-skin="systeme"] .fhero .ftabs.three{grid-template-columns:repeat(3,auto)}
  :root[data-skin="systeme"] .fhero .ftabs.three button{padding:0 14px;font-size:15px;line-height:19px;white-space:nowrap}
  :root[data-skin="systeme"] .fhero .freg>.ftw{flex:1 1 auto;min-width:0;max-width:100%}
  :root[data-skin="systeme"] .fhero .freg>.ftw .ptabs{flex-wrap:wrap}
}
/* la boîte dans l'inspecteur : un réglage en groupe, titre « Boîte », segment de deux cases sur toute la largeur */
:root[data-skin="systeme"] .p1-insp>.boxw{display:grid;gap:10px;margin:0 0 12px;padding:14px 16px 16px;border-radius:18px;background:var(--surface)}
:root[data-skin="systeme"] .p1-insp>.boxw>.kicker{display:block;margin:0;font:600 17px/22px var(--font);letter-spacing:0;text-transform:none;color:var(--ink)}
:root[data-skin="systeme"] .p1-insp>.boxw .seg.box{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:3px;gap:0;border:0;border-radius:12px;background:var(--soft);max-width:none}
:root[data-skin="systeme"] .p1-insp>.boxw .seg.box button{min-height:44px;padding:4px 8px;border:0;border-radius:9px;background:transparent;color:var(--txt2);font:400 15px/19px var(--font);white-space:normal;text-wrap:balance;box-shadow:none}
:root[data-skin="systeme"] .p1-insp>.boxw .seg.box button.on{background:var(--seg-on);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px var(--seg-ring)}
:root[data-skin="systeme"] .p1-insp>.boxw .seg.box.p1-cur button.on{background:transparent;box-shadow:none}

/* méta de la fiche (D11) : le point de tête de « partie 1 sur 3 » ne se voit plus (il reste lu) */
:root[data-skin="systeme"] .fhero .ftw>.kicker .p1-sep{position:absolute;opacity:0;pointer-events:none}

/* fiche sur téléphone (D4, U4) : comme un écran poussé d'iOS, la barre d'onglets se retire ; l'accessoire prend sa place au bas de l'écran.
   Le chevron de retour, le balayage depuis le bord (app installée) et Évaluer dans l'accessoire mènent ailleurs. */
@media (max-width:619px),(max-width:959px) and (max-height:500px) and (pointer:coarse){
  :root[data-skin="systeme"] body.p1-fiche .bottom{display:none}
  :root[data-skin="systeme"] body.p1-fiche .fhero .fbar{bottom:max(12px,env(safe-area-inset-bottom,0px))}
  :root[data-skin="systeme"].p1-cache body.p1-fiche .fhero .fbar{transform:none}
  :root[data-skin="systeme"] body.p1-fiche main{padding-bottom:calc(56px + max(12px,env(safe-area-inset-bottom,0px)) + 24px)}
  :root[data-skin="systeme"] body.p1-fiche::after{height:calc(56px + max(12px,env(safe-area-inset-bottom,0px)) + 20px)}
  /* Montrer et Évaluer : 72 px, le libellé a de l'air (D4) */
  :root[data-skin="systeme"] .fhero .fact .btn{width:72px;min-width:72px}
}
@media (max-width:359px){:root[data-skin="systeme"] .fhero .fact .btn{width:60px;min-width:60px}}
/* iPhone couché : l'accessoire à droite garde sa largeur utile ; « Pédagogie » tient dans son segment (M12) ; le titre rangé s'écarte des marges de sécurité (M7) */
@media (min-width:560px) and (max-width:959px) and (max-height:500px) and (pointer:coarse){
  :root[data-skin="systeme"] body.p1-fiche .fhero .fbar{width:auto;min-width:360px;bottom:max(8px,env(safe-area-inset-bottom,0px))}
  :root[data-skin="systeme"] body.p1-fiche .fhero .fbar .seg button{padding:0 12px}
  :root[data-skin="systeme"] body.p1-fiche main{padding-bottom:calc(var(--tabbar) + max(8px,env(safe-area-inset-bottom,0px)) + 16px)}
}
@media (max-width:619px),(max-width:959px) and (max-height:500px) and (pointer:coarse){
  :root[data-skin="systeme"] body.p1-fiche .ptitle{left:calc(52px + env(safe-area-inset-left,0px))}
}
/* retour par le bord : la page qui suit le doigt porte une ombre à gauche */
:root[data-skin="systeme"] #app.p1-suit{position:relative;z-index:1;background:var(--bg);box-shadow:-12px 0 24px rgba(0,0,0,.12);will-change:transform}

/* segments (D7, U8) : pastille blanche sans contour de champ, ombre douce ; choisi en 600 noir, les autres en 400 gris.
   Une seule famille de sélection pour les parties : la capsule bleu pâle, sur la fiche comme dans l'évaluation. */
:root[data-skin="systeme"]{--seg-ring:rgba(0,0,0,.06)}
:root[data-skin="systeme"][data-theme="dark"]{--seg-ring:transparent}
:root[data-skin="systeme"] .seg>button:not(.on){font-weight:400;color:var(--txt2)}
:root[data-skin="systeme"] .seg>button.on{font-weight:600;color:var(--ink)}
:root[data-skin="systeme"] .fhero .seg.box button.on,:root[data-skin="systeme"] .ftabs button.on,:root[data-skin="systeme"][data-theme="dark"] .ftabs button.on{box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 .5px var(--seg-ring)}
:root[data-skin="systeme"] .ftabs::after{box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 .5px var(--seg-ring)}
:root[data-skin="systeme"] .fhero .seg.pseg{gap:8px;padding:0;background:transparent}
:root[data-skin="systeme"] .fhero .seg.pseg button{min-height:44px;padding:0 16px;border-radius:22px;background:var(--surface);color:var(--ink);font:600 15px/20px var(--font)}
:root[data-skin="systeme"] .fhero .seg.pseg button.on,:root[data-skin="systeme"] .fhero .seg.pseg button.on:hover{background:var(--accent-bg);color:var(--accent-t);box-shadow:none}
:root[data-skin="systeme"] .fhero .seg.pseg.p1-cur button.on{background:transparent}
:root[data-skin="systeme"] .fhero .seg.pseg::after{border-radius:22px;background:var(--accent-bg);box-shadow:none}
/* Ressources et réglages : les deux boîtes sur une ligne chacune (D13) */
:root[data-skin="systeme"] .seg.box button{white-space:nowrap}

/* évaluation (M2) : sous 360 px, le libellé de la rangée d'essais passe au-dessus des cases ; plus de défilement de côté */
@media (max-width:359px){
  :root[data-skin="systeme"] .esg,:root[data-skin="systeme"] .esg:not(:has(>.esc~.esc~.esc~.esc)){flex-wrap:wrap}
  :root[data-skin="systeme"] .esgl{flex:1 1 100%}
}
/* essais (D14, U7, U17) : case à faire en gris plein sans anneau, « Essai n » lisible ; case faite en bleu, coche et « Essai n » en blanc */
:root[data-skin="systeme"] .esb{box-shadow:none}
:root[data-skin="systeme"] .esb.on{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:5px}
:root[data-skin="systeme"] .esb.on svg{width:18px;height:18px}
:root[data-skin="systeme"] .esc:has(.esb.on) small{opacity:1;place-self:end center;margin-bottom:5px;font-size:11px;line-height:13px;color:#FFFFFF}
/* barre de séance : verdict sur une ligne, la barre revient à 60 px (D5, U2, U12) */
:root[data-skin="systeme"] .p1-sv{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Montrer (D6, U16) : la rangée des parties s'arrête avant Suivant, avec un fondu ; la partie en cours est ramenée au milieu par app.js */
@media (max-width:619px){
  :root[data-skin="systeme"] .show .sh-parts{margin-right:8px}
}
:root[data-skin="systeme"] .show .sh-parts.p1-deb{-webkit-mask:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 24px),transparent);mask:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 24px),transparent)}
:root[data-skin="systeme"] .show .sh-card:focus{outline:none}
/* diapositive qui défile encore (U3) : fondu de 48 px et chevron au bas de la scène, tant que la fin n'est pas lue */
:root[data-skin="systeme"] .show.p1-suite .sh-card{-webkit-mask:linear-gradient(#000 calc(100% - 48px),transparent);mask:linear-gradient(#000 calc(100% - 48px),transparent)}
:root[data-skin="systeme"] .show .p1-suite-ind{display:none}
:root[data-skin="systeme"] .show.p1-suite .p1-suite-ind{display:block;grid-column:1/-1;grid-row:2;align-self:end;justify-self:center;z-index:2;width:28px;height:16px;margin-bottom:6px;pointer-events:none;
  background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M3 3l11 10L25 3' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M3 3l11 10L25 3' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
:root[data-skin="systeme"] .show.calme .p1-suite-ind{opacity:.6}
/* Montrer en sombre (U15) : le schéma officiel garde ses couleurs, mais sa plaque n'éblouit plus la salle obscurcie */
:root[data-skin="systeme"][data-theme="dark"] .show .sh-card .svg{filter:brightness(.82)}

/* Pédagogie (D9) : le rond de l'étape, la jauge et son pourcentage à la couleur de la compétence ; le bleu reste à ce qui se touche */
:root[data-skin="systeme"] .stp-h .dot.step,:root[data-skin="systeme"][data-theme="dark"] .stp-h .dot.step{background:var(--cb,var(--soft));color:var(--cc,var(--ink))}
:root[data-skin="systeme"] .stp .gv{color:var(--cc,var(--ink))}
:root[data-skin="systeme"] .stp .gtr i{background:var(--cc,var(--ink))}
/* Suivi (D9) : l'encadré du bilan est une information, pas une commande : groupe blanc, pas de fond bleu */
:root[data-skin="systeme"] .bnote{background:var(--surface);color:var(--txt)}
/* Suivi (D15) : pastille alignée sur la première ligne du titre */
:root[data-skin="systeme"] .pl a{align-items:flex-start}
:root[data-skin="systeme"] .pl a>.code{margin-top:2px}

/* Accueil (D8) : les quatre chiffres dans un seul groupe, séparés par des filets ; sur grand écran, à droite de la carte du haut */
:root[data-skin="systeme"] .homep .kpis{display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-radius:22px;background:var(--surface);overflow:hidden}
:root[data-skin="systeme"] .homep .kpis .kpi2{min-height:0;max-height:none;padding:12px 16px 14px;--r:0px;border-radius:0;background:transparent;box-shadow:inset 0 -.5px 0 var(--line)}
:root[data-skin="systeme"] .homep .kpis .kpi2:nth-child(odd){box-shadow:inset 0 -.5px 0 var(--line),inset -.5px 0 0 var(--line)}
:root[data-skin="systeme"] .homep .kpis .kpi2:nth-child(n+3){box-shadow:none}
:root[data-skin="systeme"] .homep .kpis .kpi2:nth-child(3){box-shadow:inset -.5px 0 0 var(--line)}
@media (min-width:620px){
  :root[data-skin="systeme"] .homep .kpis{grid-template-columns:repeat(4,minmax(0,1fr));border-radius:18px}
  :root[data-skin="systeme"] .homep .kpis .kpi2,:root[data-skin="systeme"] .homep .kpis .kpi2:nth-child(odd),:root[data-skin="systeme"] .homep .kpis .kpi2:nth-child(3){box-shadow:inset -.5px 0 0 var(--line)}
  :root[data-skin="systeme"] .homep .kpis .kpi2:last-child{box-shadow:none}
}
@media (min-width:1180px){
  :root[data-skin="systeme"] .homep .dtop{grid-template-columns:minmax(0,1fr) minmax(300px,380px);align-items:stretch}
  :root[data-skin="systeme"] .homep .resume{grid-column:1;grid-row:1}
  :root[data-skin="systeme"] .homep .kpis{grid-column:2;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
  :root[data-skin="systeme"] .homep .kpis .kpi2{display:flex;flex-direction:column;justify-content:center;padding:14px 18px}
  :root[data-skin="systeme"] .homep .kpis .kpi2,:root[data-skin="systeme"] .homep .kpis .kpi2:nth-child(odd){box-shadow:inset 0 -.5px 0 var(--line),inset -.5px 0 0 var(--line)}
  :root[data-skin="systeme"] .homep .kpis .kpi2:nth-child(2){box-shadow:inset 0 -.5px 0 var(--line)}
  :root[data-skin="systeme"] .homep .kpis .kpi2:nth-child(3){box-shadow:inset -.5px 0 0 var(--line)}
  :root[data-skin="systeme"] .homep .kpis .kpi2:last-child{box-shadow:none}
}
/* Accueil (D12) : la marque sur le surtitre du Tableau de bord, là où la barre latérale ne la montre pas */
@media (max-width:959px){
  :root[data-skin="systeme"] .homep .dhead .kicker::before{content:"REMC · ";color:var(--ink);font-weight:700}
}

/* aller au contenu (U20) : premier arrêt de Tab, visible seulement au focus */
:root[data-skin="systeme"] .p1-saut{position:fixed;z-index:90;left:max(12px,env(safe-area-inset-left,0px));top:-120px;min-height:44px;padding:0 18px;border:0;border-radius:22px;background:var(--accent-fill);color:#FFFFFF;font:600 15px/20px var(--font)}
:root[data-skin="systeme"] .p1-saut:focus{top:max(8px,env(safe-area-inset-top,0px))}

/* verre (M13) : flou de 18 px, celui de la spécification (sous un verre à 92 %, 30 px ne se voyaient pas et coûtaient plus) */
:root[data-skin="systeme"]{--verre:blur(18px) saturate(180%)}

/* fermeture d'une feuille (M5) : la copie inerte de js/systeme.js ; le voile s'efface en opacité (propriété composée), la feuille redescend */
@keyframes p1-voile-r2{to{opacity:0}}
:root[data-skin="systeme"] .modal.p1-ferme{position:fixed;z-index:80;background:transparent;pointer-events:none;animation:none}
:root[data-skin="systeme"] .modal.p1-ferme::before{content:"";position:absolute;inset:0;background:var(--scrim);animation:p1-voile-r2 160ms var(--ease-out) both}
:root[data-skin="systeme"] .modal.p1-ferme .sheet{position:relative;z-index:1;animation:p1-feuille-r 160ms var(--ease-out) both}
@media (min-width:960px),(min-width:620px) and (min-height:501px),(min-width:620px) and (pointer:fine){:root[data-skin="systeme"] .modal.p1-ferme .sheet{animation-name:p1-forme-r}}
@media (prefers-reduced-motion:reduce){:root[data-skin="systeme"] .modal.p1-ferme{display:none}}

/* verre : repli opaque sans flou, ou quand la transparence réduite ou le contraste renforcé est demandé (Réglages, Accessibilité) */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root[data-skin="systeme"],:root[data-skin="systeme"][data-theme]{--glass:var(--glass-solid)}   /* accessoire et barre de séance compris */
  :root[data-skin="systeme"] .top,:root[data-skin="systeme"] .bottom::before,:root[data-skin="systeme"] .bottom a.tab-find:not(.on),:root[data-skin="systeme"] .show::after,:root[data-skin="systeme"] .show [data-sh="x"]{background:var(--glass-solid)}
}
@media (prefers-reduced-transparency:reduce){
  :root[data-skin="systeme"],:root[data-skin="systeme"][data-theme]{--glass:var(--glass-solid)}   /* accessoire et barre de séance compris */
  :root[data-skin="systeme"] .top,:root[data-skin="systeme"] .bottom::before,:root[data-skin="systeme"] .bottom a.tab-find:not(.on),:root[data-skin="systeme"] .show::after,:root[data-skin="systeme"] .show [data-sh="x"]{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root[data-skin="systeme"],:root[data-skin="systeme"][data-theme]{--glass:var(--glass-solid)}   /* accessoire et barre de séance compris */
  :root[data-skin="systeme"] .top,:root[data-skin="systeme"] .bottom::before,:root[data-skin="systeme"] .bottom a.tab-find:not(.on),:root[data-skin="systeme"] .show::after,:root[data-skin="systeme"] .show [data-sh="x"]{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  :root[data-skin="systeme"]{--muted:#3C3C43;--line:#8E8E93}
  :root[data-skin="systeme"][data-theme="dark"]{--muted:#D1D1D6;--line:#8E8E93}
}
@media print{
  :root[data-skin="systeme"] :is(.side,.top,.bottom,.p1-voile,.p1-poignee,.cchips,.p1-seance,.fhero .fbar,.fhero .freg){display:none!important}
  :root[data-skin="systeme"] .qcard .expl{position:static}
  :root[data-skin="systeme"] body{display:block;background:#fff}
  :root[data-skin="systeme"] body::after{content:none}
  :root[data-skin="systeme"] #app .crumbs{position:static}
}

/* ── écran d'ouverture « Système » (23/10/2026) : la nouvelle icône apparaît, son dessin se met en place, puis le nom.
   Joué une fois (~1,2 s), figé sur l'image finale, puis fondu (splash.js). Fond = fond de l'appli, clair ou sombre. ── */
html.splash-on #splash.ouv{background:var(--bg,#F2F2F7);color:var(--ouv-ink,#000)}
#splash.ouv .ouv-mid{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px}
#splash.ouv .ouv-ic{position:relative;width:min(34vmin,148px);aspect-ratio:1;border-radius:22.37%;overflow:hidden;background:linear-gradient(var(--ouv-bg1),var(--ouv-bg2));
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 14px 34px -10px rgba(0,0,0,.35)}
#splash.ouv .ouv-ic::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 0,rgba(255,255,255,.28),rgba(255,255,255,0) 60%);pointer-events:none}
#splash.ouv .ouv-ic svg{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22))}
#splash.ouv .ouv-s1{stop-color:var(--ouv-g1)}#splash.ouv .ouv-s2{stop-color:var(--ouv-g2)}
#splash.ouv .ouv-t1{font:700 clamp(30px,8vmin,40px)/1.1 var(--font,system-ui),system-ui,sans-serif;letter-spacing:.03em;margin:22px 0 4px;color:var(--ouv-ink,#000)}
#splash.ouv .ouv-t2{margin:0;font:500 15px/1.3 var(--font,system-ui),system-ui,sans-serif;color:var(--muted,#6C6C70)}
#splash.ouv:not(.op-go) .ouv-mid{visibility:hidden}
#splash.ouv.op-go .ouv-ic{animation:ouv-ic .55s cubic-bezier(.2,.9,.25,1.12) both}
#splash.ouv.op-go .ouv-t1{animation:ouv-up .45s .62s cubic-bezier(.2,.8,.2,1) both}
#splash.ouv.op-go .ouv-t2{animation:ouv-up .45s .72s cubic-bezier(.2,.8,.2,1) both}
@keyframes ouv-ic{from{opacity:0;transform:scale(.8)}}
@keyframes ouv-up{from{opacity:0;transform:translateY(10px)}}
@keyframes ouv-f{from{opacity:0}}
@keyframes ouv-sx{from{transform:scaleX(0)}}
@keyframes ouv-sy{from{opacity:0;transform:scaleY(0)}}
@keyframes ouv-pop{from{opacity:0;transform:scale(0)}}
@keyframes ouv-rot{from{opacity:0;transform:rotate(-100deg) scale(.9)}}
#splash.ouv{--ouv-ink:var(--ink,#000);--ouv-bg1:#1B3A66;--ouv-bg2:#0B1F3A;--ouv-g1:#FFFFFF;--ouv-g2:#E3EAF5;--ouv-tr:#0B1F3A}
:root[data-theme="dark"] #splash.ouv{--ouv-bg1:#232326;--ouv-bg2:#0A0A0B;--ouv-g1:#F3F6FB;--ouv-g2:#AEB9CC;--ouv-tr:#141416}
#splash.ouv .ouv-j{fill:#FFC93C}#splash.ouv .ouv-tr{fill:var(--ouv-tr)}
#splash.ouv.op-go .ouv-vol{transform-box:view-box;transform-origin:512px 518px;animation:ouv-rot .7s .12s cubic-bezier(.2,.85,.25,1.05) both}
#splash.ouv.op-go .ouv-moy{transform-box:view-box;transform-origin:512px 518px;animation:ouv-pop .35s .6s cubic-bezier(.2,.9,.3,1.4) both}
/* « réduire les animations » : mêmes étapes en simples fondus (les !important passent devant la règle générale d'app.css) */
@media (prefers-reduced-motion:reduce){#splash.ouv.op-go .ouv-ic{animation:ouv-f .4s both!important}#splash.ouv.op-go .ouv-vol,#splash.ouv.op-go .ouv-moy{animation:ouv-f .4s .2s both!important}
#splash.ouv.op-go .ouv-t1{animation:ouv-f .4s .5s both!important}#splash.ouv.op-go .ouv-t2{animation:ouv-f .4s .6s both!important}}