/* ════════════════════════════════════════════════════════════════
   Portail SIO — thème « ardoise moyenne »
   Chargé en premier dans chaque page : les variables --sio-* remplacent
   les couleurs autrefois codées en dur pour un fond sombre.

   Deux contextes :
   - posé sur le fond ardoise  → textes clairs (valeurs de :root)
   - posé sur une carte blanche → textes foncés (valeurs --sio-ink-*)
   Les cartes se « basculent » elles-mêmes en encre foncée (règles des pages
   ou marqueur --surf:1 dans un style en ligne, voir plus bas).
   ════════════════════════════════════════════════════════════════ */
:root{
  --sio-page:#475569;

  /* Sur le fond ardoise */
  --sio-tx1:#FFFFFF;   --sio-tx2:#E2E8F0;   --sio-tx3:#CBD5E1;   --sio-tx4:#B4C0D0;
  --sio-line:rgba(255,255,255,.22);
  --sio-blue:#BFDBFE;  --sio-blue-l:#DBEAFE;
  --sio-green:#A7F3D0; --sio-green-l:#D1FAE5;
  --sio-yellow:#FDE68A;--sio-yellow-l:#FEF3C7;
  --sio-violet:#DDD6FE;
  --sio-red:#FECACA;   --sio-red-l:#FEE2E2;
  --sio-teal:#99F6E4;  --sio-pink:#FBCFE8;
  --sio-orange:#FED7AA;--sio-orange-l:#FFEDD5;
  --sio-cyan:#A5F3FC;  --sio-indigo:#C7D2FE;

  /* Sur une carte blanche (« encre ») */
  --sio-ink-tx1:#0F172A; --sio-ink-tx2:#334155; --sio-ink-tx3:#475569; --sio-ink-tx4:#64748B;
  --sio-ink-line:#E2E8F0;
  --sio-ink-blue:#2563EB;  --sio-ink-blue-l:#1D4ED8;
  --sio-ink-green:#059669; --sio-ink-green-l:#047857;
  --sio-ink-yellow:#B45309;--sio-ink-yellow-l:#92400E;
  --sio-ink-violet:#7C3AED;
  --sio-ink-red:#DC2626;   --sio-ink-red-l:#B91C1C;
  --sio-ink-teal:#0F766E;  --sio-ink-pink:#DB2777;
  --sio-ink-orange:#EA580C;--sio-ink-orange-l:#C2410C;
  --sio-ink-cyan:#0E7490;  --sio-ink-indigo:#4F46E5;

  --sio-shadow:0 2px 4px rgba(10,18,40,.12), 0 12px 28px -12px rgba(10,18,40,.40);
}
html{background:var(--sio-page);}

/* Éléments rendus blancs dans un style en ligne : encre foncée.
   :where() = spécificité nulle, les règles des pages gardent la main. */
:where([style*="--surf:1"]){
  --sio-tx1:var(--sio-ink-tx1); --sio-tx2:var(--sio-ink-tx2); --sio-tx3:var(--sio-ink-tx3); --sio-tx4:var(--sio-ink-tx4);
  --sio-line:var(--sio-ink-line);
  --sio-blue:var(--sio-ink-blue); --sio-blue-l:var(--sio-ink-blue-l);
  --sio-green:var(--sio-ink-green); --sio-green-l:var(--sio-ink-green-l);
  --sio-yellow:var(--sio-ink-yellow); --sio-yellow-l:var(--sio-ink-yellow-l);
  --sio-violet:var(--sio-ink-violet);
  --sio-red:var(--sio-ink-red); --sio-red-l:var(--sio-ink-red-l);
  --sio-teal:var(--sio-ink-teal); --sio-pink:var(--sio-ink-pink);
  --sio-orange:var(--sio-ink-orange); --sio-orange-l:var(--sio-ink-orange-l);
  --sio-cyan:var(--sio-ink-cyan); --sio-indigo:var(--sio-ink-indigo);
  color:var(--sio-tx1);
}

/* Champs de saisie et listes déroulantes : toujours lisibles */
:where(input, select, textarea){ color-scheme:light; }
:where(select option){ background:#FFFFFF; color:#0F172A; }
:where(::placeholder){ color:#94A3B8; opacity:1; }

/* Barres de défilement */
:where(html){ scrollbar-color:#94A3B8 var(--sio-page); }

/* Titres de section posés sur le fond ardoise (couleur de filière en ligne pensée pour le fond noir) */
:is(.main, .main > div, .main > section, .main > form) > .dh-section-t { color:var(--sio-tx2) !important; }
.main .dh-section-t:not(:is(.dh-card, .card, .dh-hero, [style*="--surf:1"]) *) { color:var(--sio-tx2) !important; }

/* ════════════════════════════════════════════════════════════════
   v5 — Rappel de la couleur de catégorie + finitions « modernes »
   --sio-cat : couleur du groupe de menu de la page en cours
   (définie par includes/sidebar.php, bleu par défaut)
   ════════════════════════════════════════════════════════════════ */
:root{ --sio-cat:#2563EB; }

/* ---------- Menu latéral : trame de la couleur du groupe ---------- */
html body nav.sb2 .sb-group{ transition:background .2s, box-shadow .2s; }
html body nav.sb2 .sb-group.open{
  background:color-mix(in srgb, var(--gc) 7%, #fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gc) 22%, #fff);
}
html body nav.sb2 .sb-group-btn:hover{ background:color-mix(in srgb, var(--gc) 12%, #fff); }
html body nav.sb2 .sb-group.open .sb-gtitle{ color:color-mix(in srgb, var(--gc) 65%, #0F172A); }
html body nav.sb2 .sb-group.open .sb-gico{ background:var(--gc); color:#fff; border-color:transparent;
  box-shadow:0 4px 10px -3px color-mix(in srgb, var(--gc) 60%, transparent); }
html body nav.sb2 .sb-gico{ transition:background .2s, color .2s, box-shadow .2s; }
/* liens d'un groupe */
html body nav.sb2 .sb-group .sb-link:hover{ background:color-mix(in srgb, var(--gc) 15%, #fff); color:#0F172A; }
html body nav.sb2 .sb-group .sb-link:hover i.ti{ color:var(--gc); }
html body nav.sb2 .sb-group .sb-link.active{
  background:color-mix(in srgb, var(--gc) 22%, #fff);
  color:color-mix(in srgb, var(--gc) 55%, #0F172A); font-weight:700;
  box-shadow:0 1px 2px color-mix(in srgb, var(--gc) 25%, transparent);
}
/* liens du haut (Portail, Tableau de bord…) */
html body nav.sb2 .sb-nav > .sb-link:hover{ background:#EEF2F7; }
html body nav.sb2 .sb-nav > .sb-link.active{
  background:color-mix(in srgb, #2563EB 14%, #fff); color:#1E3A8A; font-weight:700;
}
html body nav.sb2 .sb-nav > .sb-link.active::before{ background:#2563EB; }
html body nav.sb2 .sb-nav > .sb-link.active i.ti{ color:#2563EB; }
html body nav.sb2::-webkit-scrollbar-thumb{ background:#CBD5E1; }

/* ---------- Page : rappel discret de la catégorie ---------- */
body:has(> nav.sb2){
  background-image:linear-gradient(180deg, color-mix(in srgb, var(--sio-cat) 30%, transparent) 0, transparent 360px);
  background-repeat:no-repeat;
}
body:has(nav.sb2) .dh-hero{
  background:
    radial-gradient(1200px 300px at 0% 0%, color-mix(in srgb, var(--sio-cat) 13%, #fff), transparent 60%),
    radial-gradient(800px 260px at 100% 0%, color-mix(in srgb, var(--sio-cat) 6%, #fff), transparent 60%), #fff;
  box-shadow:inset 0 4px 0 var(--sio-cat), var(--sio-shadow);
}
body:has(nav.sb2) .main > .page-title{ box-shadow:inset 0 4px 0 var(--sio-cat); }

/* ---------- Profondeur des cartes posées sur l'ardoise ---------- */
body .dh-card{ box-shadow:var(--sio-shadow); }
body .dh-hero{ box-shadow:var(--sio-shadow); }
body .dh-btn.primary{ background:linear-gradient(135deg, #2563EB, #7C3AED); }

/* Barres d'outils posées sur l'ardoise (ex. « Trier : ») */
body .ae-tri a{ background:rgba(255,255,255,.10); transition:background .15s, transform .15s; }
body .ae-tri a:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px); }

/* Lignes de tableaux dans les cartes : survol */
:where(.dh-card, .card) :where(table) :where(tbody tr){ transition:background .12s; }
:where(.dh-card, .card) :where(table) :where(tbody tr:hover){ background:#F8FAFC; }

/* ---------- Apparition douce du contenu ---------- */
@keyframes sio-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.main > :nth-child(-n+8){ animation:sio-in .38s cubic-bezier(.2,.7,.2,1) both; }
.main > :nth-child(2){ animation-delay:.04s; } .main > :nth-child(3){ animation-delay:.08s; }
.main > :nth-child(4){ animation-delay:.12s; } .main > :nth-child(5){ animation-delay:.16s; }
.main > :nth-child(6){ animation-delay:.20s; } .main > :nth-child(7){ animation-delay:.24s; }
.main > :nth-child(8){ animation-delay:.28s; }

/* ---------- Accessibilité / confort ---------- */
html{ scroll-behavior:smooth; }
::selection{ background:#BFDBFE; color:#0F172A; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid #2563EB; outline-offset:2px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .main > *{ animation:none !important; }
}

/* Accueil : espace sélectionné bien repérable */
body .pt-tab.active{ transform:translateY(-3px);
  box-shadow:0 0 0 2px var(--c), 0 12px 28px color-mix(in srgb, var(--c) 32%, transparent); }
body .pt-tab.active .ic{ background:var(--c); color:#fff; }

/* ════════════════════════════════════════════════════════════════
   v6 — Zones mieux délimitées (lignes, cases, blocs imbriqués)
   ════════════════════════════════════════════════════════════════ */
:root{ --sio-ink-line:#D5DDE8; }

/* Tableaux : une bande par ligne (un élève = une zone) */
body .dh-table td{ border-bottom-color:#D5DDE8; }
body .dh-table tbody tr:nth-child(even) > td{ background:#F0F4F9; }
body .dh-table tbody tr:hover > td{ background:#E7EEF9; }
body .dh-table thead th{ background:#EEF2F7; border-bottom:1px solid #D5DDE8; }
body .dh-table thead th:first-child{ border-radius:10px 0 0 0; }
body .dh-table thead th:last-child{ border-radius:0 10px 0 0; }

/* Heatmaps de l'espace élève : cases plus marquées (comme l'assiduité admin) */
body .hm-c, body .year .mc i{ background:#C3CDDB; }
body .hm-c.fut, body .year .mc i.fut{ background:#E2E8F0; }
body .hm-c.l1, body .year .mc i.l1{ background:color-mix(in srgb, var(--c) 45%, #fff); }
body .hm-c.l2, body .year .mc i.l2{ background:color-mix(in srgb, var(--c) 68%, #fff); }
body .hm-c.l3, body .year .mc i.l3{ background:color-mix(in srgb, var(--c) 86%, #fff); }
body .hm-c.l4, body .year .mc i.l4{ background:var(--c); }
body .hm-c.today, body .year .mc i.today{ outline-color:#D97706; }

/* Barres de progression : une bande teintée par type */
body .dh-bars > div{ padding:10px 12px; border-radius:12px;
  background:color-mix(in srgb, var(--c, #2563EB) 6%, #F8FAFC);
  border:1px solid color-mix(in srgb, var(--c, #2563EB) 18%, #E2E8F0); }
body .dh-bars .track, body .year .meter{ background:#DCE3EC; }

/* Accès Proxmox (vue enseignant) : cartes élèves posées sur un fond gris */
body .st-sec{ background:#EEF2F7; border-color:#D5DDE8; }
body .st-sec > summary:hover{ background:#E5EBF3; }
body .st-card{ background:#fff; border-color:#CBD5E1; box-shadow:0 1px 2px rgba(15,23,42,.06), 0 4px 12px -6px rgba(15,23,42,.18); }
body .st-card:hover{ background:#fff; border-color:color-mix(in srgb, var(--sio-cat) 55%, #fff);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--sio-cat) 35%, transparent), 0 10px 22px -10px rgba(15,23,42,.35); }
body .st-card.vide{ background:#FFFBEB; border-color:#FCD34D; }

/* Accès Proxmox (vue élève) : lignes d'information en bandes */
body .acces-card{ box-shadow:var(--sio-shadow); }
body .acces-card .row{ border-top:none; padding:8px 10px; border-radius:8px; align-items:baseline; }
body .acces-card .row:nth-child(odd of .row){ background:#F1F5F9; }
body .acces-card .row .label{ color:var(--sio-ink-tx3); font-weight:600; }
body .acces-card .login-tip{ background:#EFF6FF; border-color:#BFDBFE; }
body .acces-card .ssh-box{ background:#E9EEF5; border-color:#CBD5E1; }

/* Assiduité : chaque élève dans sa propre zone (lignes séparées en cartes) */
body .dh-table:has(.mh){ border-collapse:separate; border-spacing:0 8px; margin-top:-8px; }
body .dh-table:has(.mh) thead th{ background:none; border-bottom:none; }
body .dh-table:has(.mh) tbody tr > td,
body .dh-table:has(.mh) tbody tr:nth-child(even) > td{ background:#F4F7FB; border-top:1px solid #D5DDE8; border-bottom:1px solid #D5DDE8; }
body .dh-table:has(.mh) tbody tr > td:first-child{ border-left:1px solid #D5DDE8; border-radius:12px 0 0 12px; }
body .dh-table:has(.mh) tbody tr > td:last-child{ border-right:1px solid #D5DDE8; border-radius:0 12px 12px 0; }
body .dh-table:has(.mh) tbody tr:hover > td{ background:#EAF1FB; border-color:#BFD0E6; }
body .dh-table:has(.mh) .mh i.fut{ background:#DDE4ED; }

/* Parcours / fiches : cases de modules mieux délimitées */
body .pc-it{ border-color:#CBD5E1; box-shadow:0 1px 2px rgba(15,23,42,.06); }
body .pc-it.termine{ border-color:#6EE7B7; background:#F0FDF7; }
body .pc-it.absent{ opacity:.72; background:#F1F5F9; border-color:#B6C2D2; box-shadow:none; }
body .pc-bar{ background:#DCE3EC; }
body .pc-fil{ border-color:color-mix(in srgb, var(--c) 28%, #D5DDE8); box-shadow:var(--sio-shadow); }

/* ════════════════════════════════════════════════════════════════
   v7 — Finitions modernes (avec js/sio-ui.js)
   ════════════════════════════════════════════════════════════════ */

/* ---------- Cartes de chiffres : icône nette, liseré de couleur ---------- */
body .dh-kpi::after{ display:none; }
body .dh-kpi{ box-shadow:inset 0 3px 0 var(--c), var(--sio-shadow); }
body .dh-kpi .ico{ background:linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 65%, #fff)); color:#fff;
  box-shadow:0 6px 14px -6px color-mix(in srgb, var(--c) 75%, transparent); }
body .dh-kpi .v, body .dh-todo-card .n, body .kpi .v{ font-variant-numeric:tabular-nums; }
body .dh-kpi .bar{ background:#DCE3EC; }
body .dh-kpi .bar i, body .dh-bars .track i, body .pc-bar i{ animation:sio-grow .9s cubic-bezier(.2,.7,.2,1) both; transform-origin:left; }
@keyframes sio-grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
body .kpi{ box-shadow:var(--sio-shadow); }

/* ---------- Pages vides ---------- */
body :is(.dh-empty, .pg-empty, .empty-state, .sio-empty){
  text-align:center; padding:28px 20px; color:var(--sio-ink-tx3); font-size:.92rem; line-height:1.5;
  background:#F8FAFC; border:1px dashed #C3CDDB; border-radius:16px;
}
body :is(.dh-empty, .empty-state, .sio-empty, .pg-empty:not(:has(> .ti)))::before{
  content:""; display:block; width:58px; height:58px; margin:0 auto 12px; border-radius:18px;
  background:color-mix(in srgb, var(--c, var(--sio-cat)) 13%, #fff) center/28px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h3l2 3h6l2-3h3'/%3E%3Cpath d='M5.5 5h13L21 13v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5z'/%3E%3C/svg%3E");
  border:1px solid color-mix(in srgb, var(--c, var(--sio-cat)) 25%, #fff);
}
body .pg-empty > .ti{ width:58px; height:58px; margin:0 auto 12px !important; border-radius:18px; display:grid !important; place-items:center;
  font-size:1.7rem !important; color:var(--sio-cat) !important; background:color-mix(in srgb, var(--sio-cat) 12%, #fff); }
body :is(.dh-empty, .pg-empty, .empty-state, .sio-empty) :is(a, button){ margin-top:12px; }

/* ---------- Chargement (squelettes animés) ---------- */
.sio-skel-list{ display:flex; flex-direction:column; gap:10px; }
.sio-skel-item{ display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:12px; background:#F4F7FB; border:1px solid #E2E8F0; }
.sio-skel-item::before{ content:""; width:4px; align-self:stretch; border-radius:3px; background:#DCE3EC; }
.sio-skel-item > div{ flex:1; display:flex; flex-direction:column; gap:8px; }
.sio-skel{ display:block; height:11px; border-radius:6px;
  background:linear-gradient(90deg, #E2E8F0 0%, #F1F5F9 40%, #E2E8F0 80%) 0 0/300% 100%; animation:sio-shim 1.3s linear infinite; }
.sio-skel.l1{ width:78%; height:13px; } .sio-skel.l2{ width:42%; }
@keyframes sio-shim{ from{ background-position:100% 0; } to{ background-position:-50% 0; } }
body .preview-new{ background:#DBEAFE !important; color:#1E40AF !important; border-color:#93C5FD !important; }

/* ---------- Infobulles des grilles ---------- */
.sio-tip{ position:fixed; z-index:3000; pointer-events:none; max-width:260px; padding:7px 11px; border-radius:9px;
  background:#0F172A; color:#F8FAFC; font:600 .76rem/1.35 "Inter", system-ui, sans-serif; box-shadow:0 10px 24px -8px rgba(2,6,23,.55);
  opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s; white-space:pre-line; }
.sio-tip.on{ opacity:1; transform:none; }
.sio-tip::after{ content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; margin-left:-5px; background:#0F172A; transform:rotate(45deg); border-radius:2px; }
.sio-tip.bas::after{ bottom:auto; top:-5px; }
body .mh i, body .hm-c, body .year .mc i{ cursor:pointer; }

/* ---------- Pastilles à initiales ---------- */
.sio-av, body .us-av, body .pf-av{ border-radius:50% !important; }
.sio-av{ --av:#2563EB; width:36px; height:36px; flex-shrink:0; display:inline-grid; place-items:center; font:800 .78rem/1 "Inter", sans-serif; letter-spacing:.02em;
  color:#fff; background:linear-gradient(135deg, var(--av), color-mix(in srgb, var(--av) 60%, #fff));
  box-shadow:0 0 0 2px #fff, 0 4px 10px -4px color-mix(in srgb, var(--av) 80%, transparent); }
td.sio-av-td > .sio-av{ float:left; margin:2px 12px 0 0; }
.sio-av-row{ display:grid !important; grid-template-columns:auto minmax(0, 1fr); column-gap:12px; align-items:center; }
.sio-av-row > .sio-av{ grid-row:1 / span 3; }
.sio-av-row > :not(.sio-av){ grid-column:2; }

/* ---------- Badges façon médailles ---------- */
body .bd .ic{ position:relative; overflow:hidden; }
body .bd.unlocked{ background:linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, #fff), #fff); border-color:color-mix(in srgb, var(--c) 40%, #fff); box-shadow:var(--sio-shadow); }
body .bd.unlocked .ic{
  background:radial-gradient(circle at 32% 28%, #fff 0, color-mix(in srgb, var(--c) 22%, #fff) 38%, color-mix(in srgb, var(--c) 48%, #fff) 100%);
  border:3px solid #fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 70%, #FBBF24), 0 10px 22px -8px color-mix(in srgb, var(--c) 70%, transparent);
}
body .bd.unlocked .ic::after{ content:""; position:absolute; inset:-30%; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%);
  transform:translateX(-80%); transition:transform .8s ease; }
body .bd.unlocked:hover .ic::after{ transform:translateX(80%); }
body .bd.unlocked:hover .ic{ animation:sio-medal .6s ease; }
@keyframes sio-medal{ 0%{ transform:rotate(0); } 30%{ transform:rotate(-8deg) scale(1.06); } 60%{ transform:rotate(6deg) scale(1.06); } 100%{ transform:rotate(0); } }
body .bd.locked{ background:#F1F5F9; border:1px dashed #B6C2D2; box-shadow:none; }
body .bd.locked .ic{ filter:grayscale(1) contrast(.85); opacity:.45; background:#E2E8F0; border:2px dashed #94A3B8; }
body .bd.locked .lk{ background:#fff; color:#475569; border-color:#CBD5E1; }
body .bd .pb{ background:#DCE3EC; }

/* ---------- Bandeau d'accueil élève : anneau + série + badges ---------- */
.sio-hx{ display:flex; align-items:center; gap:16px; padding:10px 18px 10px 10px; border-radius:18px; background:#fff;
  border:1px solid #D5DDE8; box-shadow:0 1px 2px rgba(15,23,42,.06); }
.sio-hx-ring{ position:relative; width:72px; height:72px; flex-shrink:0; }
.sio-hx-ring svg{ width:72px; height:72px; transform:rotate(-90deg); }
.sio-hx-ring circle{ fill:none; stroke-width:8; }
.sio-hx-ring .tr{ stroke:#E2E8F0; }
.sio-hx-ring .pg{ stroke:var(--sio-cat); stroke-linecap:round; animation:sio-ring 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sio-ring{ from{ stroke-dashoffset:var(--c0); } }
.sio-hx-ring b{ position:absolute; inset:0; display:grid; place-items:center; font:800 1rem "Inter", sans-serif; color:#0F172A; }
.sio-hx-stats{ display:flex; flex-direction:column; gap:6px; font-size:.84rem; color:#334155; }
.sio-hx-stats span{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.sio-hx-stats em{ font-style:normal; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:#FFF7ED; font-size:.9rem; }
.sio-hx-stats span + span em{ background:#EEF2FF; }
.sio-hx-stats b{ color:#0F172A; font-size:.95rem; }
.sio-hx-stats a{ color:#2563EB; font-weight:600; text-decoration:none; }
.sio-hx-l{ font-size:.7rem; color:#64748B; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
@media (max-width:760px){ .sio-hx{ width:100%; } }

/* ---------- Connexion : présentation en deux parties sur grand écran ---------- */
@media (min-width:1100px){
  body.au .au-wrap{ display:grid; grid-template-columns:minmax(420px, 46%) 1fr; }
  body.au .au-side{ display:flex !important; border-right:none;
    background:radial-gradient(700px 420px at 0% 0%, #DBEAFE, transparent 60%), radial-gradient(600px 400px at 100% 100%, #EDE9FE, transparent 60%), #fff; }
  body.au .au-brand-m{ display:none; }
  body.au .au-side::after{ content:""; position:absolute; right:-120px; bottom:-120px; width:320px; height:320px; border-radius:50%;
    background:linear-gradient(135deg, #2563EB, #7C3AED); opacity:.12; }
  body.au .au-pitch li{ box-shadow:0 1px 2px rgba(15,23,42,.06); border-color:#D5DDE8; transition:transform .15s; }
  body.au .au-pitch li:hover{ transform:translateX(4px); }
}
body.au .au-card{ animation:sio-in .45s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- Barre de navigation mobile (élèves) ---------- */
.sio-tabbar{ display:none; }
@media (max-width:768px){
  .sio-tabbar{ display:flex; position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); z-index:900;
    background:#fff; border:1px solid #D5DDE8; border-radius:20px; padding:6px; gap:4px;
    box-shadow:0 12px 30px -10px rgba(2,6,23,.55); }
  .sio-tabbar a{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 2px; border-radius:14px;
    color:#475569; text-decoration:none; font:600 .64rem/1.1 "Inter", sans-serif; transition:background .15s, color .15s; }
  .sio-tabbar a .ti{ font-size:1.3rem; }
  .sio-tabbar a span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sio-tabbar a.on{ color:color-mix(in srgb, var(--sio-cat) 75%, #0F172A); background:color-mix(in srgb, var(--sio-cat) 14%, #fff); }
  body:has(.sio-tabbar){ padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- Messages de confirmation (toasts) ---------- */
.sio-toasts{ position:fixed; right:18px; bottom:18px; z-index:4000; display:flex; flex-direction:column; gap:10px; width:min(380px, calc(100vw - 36px)); pointer-events:none; }
@media (max-width:768px){ .sio-toasts{ right:12px; left:12px; width:auto; bottom:calc(96px + env(safe-area-inset-bottom, 0px)); } }
.sio-toast{ pointer-events:auto; display:flex; align-items:flex-start; gap:12px; padding:13px 12px 13px 14px; border-radius:14px; background:#fff; color:#0F172A;
  border:1px solid #D5DDE8; border-left:4px solid var(--t, #2563EB); box-shadow:0 18px 40px -14px rgba(2,6,23,.5);
  font:500 .88rem/1.45 "Inter", system-ui, sans-serif; opacity:0; transform:translateY(12px) scale(.98); transition:opacity .22s, transform .22s; }
.sio-toast.in{ opacity:1; transform:none; }
.sio-toast.out{ opacity:0; transform:translateX(24px); }
.sio-toast.success{ --t:#059669; } .sio-toast.error{ --t:#DC2626; } .sio-toast.info{ --t:#2563EB; }
.sio-toast-ic{ width:24px; height:24px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--t); font:800 .8rem/1 "Inter", sans-serif; margin-top:1px; }
.sio-toast-tx{ flex:1; min-width:0; white-space:pre-line; overflow-wrap:anywhere; }
.sio-toast-x{ border:none; background:none; color:#64748B; font-size:1.2rem; line-height:1; cursor:pointer; padding:0 4px; border-radius:6px; }
.sio-toast-x:hover{ color:#0F172A; background:#F1F5F9; }
@media (prefers-reduced-motion: reduce){
  .sio-toast, .sio-tip{ transition:none; }
  body .dh-kpi .bar i, body .dh-bars .track i, body .pc-bar i, .sio-hx-ring .pg, .sio-skel{ animation:none !important; }
}
/* Bandeau élève : série et badges déjà dans l'encart « Ma progression » */
.dh-hero:has(.sio-hx) .dh-pills > .dh-pill:has(.ti-medal), .dh-hero:has(.sio-hx) .dh-pills > .dh-pill:has(.flame){ display:none; }

/* ════════════════════════════════════════════════════════════════
   v8 — Menu du haut coloré, repère ▲ des bilans
   ════════════════════════════════════════════════════════════════ */
body .pt-nav a{ --nc:#2563EB; transition:background .15s, color .15s, box-shadow .15s; }
body .pt-nav a[href*="cloud."]{ --nc:#0E7490; }
body .pt-nav a[href*="ecoledirecte"]{ --nc:#7C3AED; }
body .pt-nav a[href*="joliciel"]{ --nc:#EA580C; }
body .pt-nav a[href*="hommet"]{ --nc:#059669; }
body .pt-nav a[href*="guide"]{ --nc:#DB2777; }
body .pt-nav a .ti{ color:var(--nc); }
body .pt-nav a:hover, body .pt-nav a:focus-visible{
  background:color-mix(in srgb, var(--nc) 13%, #fff); color:color-mix(in srgb, var(--nc) 70%, #0F172A);
  box-shadow:inset 0 -2px 0 var(--nc);
}
body .pt-nav a:hover .ti{ color:var(--nc); }

/* Bilans de compétences : pastille « en progrès » lisible sur toutes les couleurs */
body .niv{ position:relative; }
body .niv .up{ top:-7px; right:-7px; width:15px; height:15px; border-radius:50%; display:grid; place-items:center;
  background:#047857; color:#fff; font-size:.48rem; line-height:1; text-shadow:none; box-shadow:0 0 0 2px #fff; }

/* ════════════════════════════════════════════════════════════════
   v9 — Accueil visiteur, invitation, fil d'Ariane, zones tactiles
   ════════════════════════════════════════════════════════════════ */
/* Tuiles verrouillées : claires, avec leur contenu, cadenas discret */
body .pt-tabs .pt-tab.locked-all{ opacity:1 !important; filter:none !important; cursor:pointer;
  background:linear-gradient(160deg, color-mix(in srgb, var(--c) 7%, #fff), #fff) !important; border-color:color-mix(in srgb, var(--c) 22%, #D5DDE8) !important; }
body .pt-tabs .pt-tab.locked-all .ic{ color:var(--c) !important; background:color-mix(in srgb, var(--c) 12%, #fff) !important; opacity:.85; }
body .pt-tabs .pt-tab.locked-all .tab-text{ color:#0F172A !important; }
body .pt-tabs .pt-tab.locked-all .ds{ color:#475569 !important; font-weight:600; }
body .pt-tabs .pt-tab.locked-all:hover{ transform:translateY(-3px) !important; box-shadow:0 10px 26px color-mix(in srgb, var(--c) 22%, transparent) !important; }
body .pt-tabs .pt-tab.locked-all .pt-lock{ width:22px; height:22px; border-radius:50%; font-size:.72rem; background:#fff; color:#64748B; border:1px solid #D5DDE8; box-shadow:0 1px 2px rgba(15,23,42,.08); }

/* Fenêtre d'invitation */
.pt-invite{ position:fixed; inset:0; z-index:3500; display:grid; place-items:center; padding:16px; background:rgba(15,23,42,.55); backdrop-filter:blur(6px); }
.pt-invite[hidden]{ display:none; }
.pt-invite-box{ position:relative; width:100%; max-width:420px; background:#fff; color:#0F172A; border-radius:22px; padding:30px 26px 24px; text-align:center;
  box-shadow:0 30px 70px -20px rgba(2,6,23,.6); animation:sio-in .3s cubic-bezier(.2,.7,.2,1) both; }
.pt-invite-ic{ width:60px; height:60px; margin:0 auto 14px; border-radius:18px; display:grid; place-items:center; font-size:1.7rem; color:#fff;
  background:linear-gradient(135deg, #2563EB, #7C3AED); box-shadow:0 10px 24px -8px rgba(79,70,229,.7); }
.pt-invite-box h3{ font-size:1.2rem; font-weight:800; letter-spacing:-.01em; }
.pt-invite-box p{ margin-top:8px; color:#475569; font-size:.92rem; line-height:1.55; }
.pt-invite-act{ margin-top:20px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.pt-invite-x{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:10px; border:1px solid #D5DDE8; background:#F4F7FB; color:#475569; font-size:1.2rem; cursor:pointer; }
.pt-invite-x:hover{ background:#FEE2E2; color:#B91C1C; border-color:#FCA5A5; }

/* Fil d'Ariane des ressources */
.rp-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 14px; padding:8px 14px; border-radius:12px; width:fit-content; max-width:100%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); font-size:.82rem; font-weight:600; color:#E2E8F0; }
.rp-crumbs a{ color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:5px; border-radius:6px; padding:1px 4px; }
.rp-crumbs a:hover{ background:rgba(255,255,255,.18); text-decoration:underline; }
.rp-crumbs .sep{ color:#CBD5E1; }
.rp-crumbs .cur{ color:#fff; font-weight:700; max-width:42ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media print{ .rp-crumbs{ display:none !important; } }

/* Zones tactiles d'au moins 44 px sur téléphone */
@media (max-width:768px) and (pointer:coarse){
  body :is(.dh-btn, .dh-tab, .ae-tri a, .btn-copier-lien, .dh-btn.sm, .filter-btn, .pc-it, .us-filters button, .tab-btn.pt-tab){ min-height:44px; }
  body :is(.dh-btn.sm, .ae-tri a){ padding-top:10px; padding-bottom:10px; }
  body nav.sb2 .sb-link, body nav.sb2 .sb-group-btn{ min-height:44px; }
  .sio-tabbar a{ min-height:52px; }
}