/* Thème partagé d'Amariva (ex-Reloj) — « Noche de Chapingo » (refonte d'octobre 2026, d'après la maquette de synthèse validée par Raphaël),
   aux couleurs de la marque AMARIVA depuis le 26/10/2026 (marque/README.md) : fond nuit #031437, cartes #0A1E4A, jade du casque #23B685 pour la marque
   et les boutons (texte nuit dessus), jade clair #2EE6A6 pour un texte jade sur la nuit, ambre des yeux #E8A83C pour les points.
   Une couleur vive par matière, des couleurs qui portent du sens et jamais de décor :
     écoute et podcasts = dégradé lavande → talavera · échéances = cempasúchil · passages = rosa mexicano · réussite = jade (avec retenue)
     · points = ambre · erreur = NEUTRE (#AAB1CB), jamais rouge, jamais le vert d'une réussite.
   Contrastes WCAG vérifiés par script (texte ≥ 4,5:1 sur le fond, les cartes et leurs surfaces ; grands textes et icônes ≥ 3:1).
   Chaque page le charge après les polices, avant son propre <style> :
     <link rel="stylesheet" href="polices/polices.css"> <link rel="stylesheet" href="theme.css"> <style>…ce qui est propre à la page…</style>
   Le <style> de la page vient APRÈS : il garde le dernier mot à spécificité égale. Les composants ci-dessous portent des noms simples
   (.carte, .btn, .chip, .toast, .vide, .champ, .barre-bas…) pour qu'une page puisse supprimer sa copie locale et reprendre celle-ci ;
   ils ne posent presque aucune règle de mise en page (pas de display:flex sur .carte), pour ne pas déranger une page qui les garde.
   Couleur d'une matière : app/matiere-style.js (MatiereStyle.couleur / .icone) ; un composant « à la couleur de la matière »
   lit la variable --m (posée par la page : el.style.setProperty("--m", MatiereStyle.couleur(m))).
   Mouvements doux, tous coupés sous prefers-reduced-motion. Aucune ressource extérieure : marche hors ligne (service worker). */

:root{
  color-scheme:dark;
  /* fond, surfaces, traits */
  --fond:#031437; --fond2:#061A45;                 /* Noche (marque Amariva) ; --fond2 : le bas du dégradé de la page */
  --surface:#0A1E4A; --surface2:#10265A; --surface3:#183168;   /* Noche claire : les cartes, puis leurs surfaces posées dessus */
  --trait:rgba(255,255,255,.07); --trait2:rgba(255,255,255,.13);
  --verre:rgba(3,20,55,.92);                        /* barre du bas, en-têtes collants, feuilles : avec un flou d'arrière-plan */
  /* encres (contraste AA sur --surface, petits libellés compris) */
  --encre:#F4F3FA; --encre2:#BCC1D9; --encre3:#9CA3C2;
  /* la palette vive de la nuit mexicaine */
  --talavera:#5B8CFF; --cempa:#FF9F1C; --jade:#23B685; --rosa:#FF4FA3; --maiz:#FFD23F; --lavande:#B57BFF; --cielo:#3FD0FF; --corail:#FF7A59;
  --ambre:#E8A83C;                                  /* l'ambre des yeux du xolo : les points (XP, Mi dominio, récompenses) */
  /* les mêmes, éclaircies : texte coloré sur fond sombre (jade clair = le jade du texte sur la nuit, fiche de marque) */
  --talavera-clair:#A9C3FF; --cempa-clair:#FFC680; --jade-clair:#2EE6A6; --rosa-clair:#FFA8D2; --maiz-clair:#FFE27F; --lavande-clair:#D9C8FF; --cielo-clair:#A5E9FF;
  --ambre-clair:#F2C46E;
  /* le sens */
  --neutre:#AAB1CB;                                 /* erreur, refus, « mauvaise réponse » : neutre */
  --accent:var(--jade); --encre-accent:#031437; --accent-clair:var(--jade-clair);   /* l'accent remplit (boutons, interrupteurs, pastilles) ; un texte ou une icône à sa couleur prend --accent-clair */
  --points:var(--ambre); --points-clair:var(--ambre-clair);
  --ecoute:linear-gradient(135deg, #B57BFF 0%, #5B8CFF 100%);
  --echeance:var(--cempa); --passage:var(--rosa); --reussite:var(--jade);
  /* typographie : Bricolage Grotesque pour les titres et les chiffres, Atkinson Hyperlegible pour lire */
  --titre:"Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --texte:"Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* formes */
  --r-carte:24px; --r-btn:18px; --r-champ:16px; --r-puce:10px;
  --ombre:0 18px 40px -26px rgba(0,0,0,.95);
  --tap:44px;
  --barre-bas-h:62px;                               /* hauteur de la barre du bas, sans la zone du geste d'accueil */
  --halo:#5B8CFF; --halo2:#B57BFF;                  /* le halo du haut d'écran : la page peut y mettre la couleur de la matière */
  --h1:34px;                                        /* LE titre d'une page (.tete h1 de chaque page) : une seule taille partout (Live : 28 px, en-tête compact) */
  /* anciens noms, gardés le temps que chaque page passe au thème (une page ne garde que ceux qu'elle redéfinit) */
  --papel:var(--fond); --carte:var(--surface); --ligne:rgba(255,255,255,.1); --accent-ink:var(--encre-accent);
  --fd:var(--titre); --fb:var(--texte);
}

/* ---------- base ---------- */
*, *::before, *::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html, body{max-width:100%; overflow-x:clip}
img, svg, video, canvas, audio, iframe{max-width:100%}
/* iOS 26, app installée (écran d'accueil) : tant que la page est plus courte que l'écran, WebKit raccourcit la fenêtre de la hauteur de la barre d'état
   (bug WebKit 301108) : le fond et la barre du bas s'arrêtent avant le bas, une bande noire dessous (l'accueil, une page courte). Une page au moins aussi
   haute que l'écran reçoit la fenêtre entière : on la lui donne. Le min() évite un défilement d'une barre d'état si elle était opaque (bug WebKit 316008) ;
   ailleurs (Android, onglet de navigateur, encoche absente) la règle ne change rien. Contournement repris de frappe-ui (PR #1289, vérifié sur iOS 26.2). */
@media (display-mode: standalone){
  html{min-height:min(100lvh, calc(100% + env(safe-area-inset-top, 0px)))}
}
body{background-color:var(--fond); color:var(--encre); font-family:var(--texte); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
/* le fond de nuit avec son halo coloré en haut (comme une aurore) : <body class="fond-nuit">, couleurs par --halo / --halo2 */
.fond-nuit{
  background:
    radial-gradient(620px 420px at 12% -90px, color-mix(in srgb, var(--halo) 30%, transparent), transparent 70%) no-repeat,
    radial-gradient(520px 360px at 104% -60px, color-mix(in srgb, var(--halo2) 20%, transparent), transparent 70%) no-repeat,
    linear-gradient(180deg, var(--fond) 0, var(--fond2) 900px) no-repeat,
    var(--fond2);
}
h1, h2, h3{font-family:var(--titre); letter-spacing:-.02em}
button, input, select, textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ---------- texte ---------- */
.surtitre{font:700 13px/1.3 var(--texte); letter-spacing:.09em; text-transform:uppercase; color:var(--encre2)}
.titre-page{font:800 var(--h1)/1.04 var(--titre); letter-spacing:-.035em; text-wrap:balance; margin:0}
@media (max-width:374px){ :root{--h1:30px} }
@media (min-width:960px){ :root{--h1:40px} }
.doux{color:var(--encre2)}
.petit{font-size:13px; color:var(--encre3); line-height:1.45}
.texte-m{color:color-mix(in srgb, var(--m, var(--accent)) 64%, #fff)}   /* un texte à la couleur de la matière, éclaircie */
/* le NOM de l'app en logo (marque Amariva, marque/README.md) : AMARIVA en capitales, Unbounded 700, interlettrage +0,06 em.
   Écrire « Amariva » dans le HTML (les capitales viennent d'ici : un lecteur d'écran lit un mot, pas des lettres). Jamais sur l'écran horloge discrète. */
.marque{font-family:"Unbounded", var(--titre); font-weight:700; font-style:normal; text-transform:uppercase; letter-spacing:.06em; line-height:1; white-space:nowrap}
/* en tête d'une page qui portait le nom (accord, textes, données) : la petite icône (la mascotte) et AMARIVA */
.marque-ligne{display:flex; align-items:center; gap:10px; margin:0; color:var(--encre); font-size:15px; letter-spacing:0; text-transform:none}
.marque-ligne .marque{font-size:15px; color:var(--encre)}   /* blanc brume : le nom ne prend pas la couleur du surtitre */
.marque-ico{flex:none; width:30px; height:30px; border-radius:9px; display:block; box-shadow:inset 0 0 0 1px var(--trait2)}

/* ---------- cartes ---------- */
.carte{
  position:relative; border-radius:var(--r-carte); padding:18px; color:var(--encre);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)), var(--surface);
  box-shadow:inset 0 0 0 1px var(--trait), var(--ombre);
}
/* le héros d'une matière : sa couleur en lueur, du coin vers le fond (riche mais contenu) */
.heros{
  position:relative; overflow:hidden; border-radius:var(--r-carte); padding:20px; color:var(--encre);
  background:
    radial-gradient(130% 85% at 0% 0%, color-mix(in srgb, var(--m, var(--accent)) 40%, transparent), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--m, var(--accent)) 20%, var(--surface)) 0%, var(--surface) 72%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--m, var(--accent)) 32%, transparent), 0 28px 56px -30px color-mix(in srgb, var(--m, var(--accent)) 75%, transparent);
}
/* la carte « écoute » (podcasts, À écouter) : dégradé lavande → talavera */
.carte-ecoute{
  position:relative; overflow:hidden; border-radius:var(--r-carte); padding:18px; color:#fff;
  background:radial-gradient(90% 120% at 100% 0%, rgba(91,140,255,.42), transparent 62%), linear-gradient(140deg, #3A2672 0%, #24306C 58%, #1A2350 100%);
  box-shadow:inset 0 0 0 1px rgba(181,123,255,.34), 0 26px 50px -28px rgba(120,100,255,.85);
}
/* l'encart d'une échéance (devoir, interro) */
.encart-echeance{
  border-radius:22px; padding:16px;
  background:linear-gradient(150deg, color-mix(in srgb, var(--cempa) 22%, var(--surface)), color-mix(in srgb, var(--cempa) 7%, var(--surface)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cempa) 42%, transparent), var(--ombre);
}
/* une citation (la dernière phrase traduite, un mot du prof) : liseré à la couleur de la matière */
.citation{margin:0; padding:14px 16px 13px 18px; border-radius:18px; background:rgba(3,6,18,.42); box-shadow:inset 3px 0 0 var(--m, var(--accent)); color:#fff}

/* ---------- boutons ---------- */
.btn{
  min-height:52px; border-radius:var(--r-btn); border:0; padding:0 20px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--accent); color:var(--encre-accent); font:750 17px/1.1 var(--titre); letter-spacing:-.01em;
  box-shadow:0 12px 26px -14px color-mix(in srgb, var(--accent) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s ease, filter .15s ease, background-color .15s ease;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline-color:#fff}
.btn:disabled, .btn[aria-disabled="true"]{opacity:.45; cursor:default; transform:none; filter:none}
.btn.second{background:rgba(255,255,255,.07); color:var(--encre); box-shadow:inset 0 0 0 1px var(--trait2)}
.btn.second:hover{background:rgba(255,255,255,.11); filter:none}
.btn.second:focus-visible{outline-color:var(--accent)}
.btn.ecoute{background:var(--ecoute); color:#0A0D22; box-shadow:0 12px 28px -12px rgba(140,110,255,.8), inset 0 1px 0 rgba(255,255,255,.35)}
.btn.blanc{background:#fff; color:var(--fond); box-shadow:0 12px 26px -14px rgba(0,0,0,.9)}
.btn.m{background:var(--m, var(--accent)); color:var(--encre-accent)}
.btn.large{width:100%}
.btn-rond{
  width:48px; height:48px; flex:none; border-radius:50%; border:0; padding:0; cursor:pointer; text-decoration:none;
  display:grid; place-items:center; background:rgba(255,255,255,.07); color:var(--encre); box-shadow:inset 0 0 0 1px var(--trait2);
  transition:transform .12s ease, background-color .15s ease;
}
.btn-rond:hover{background:rgba(255,255,255,.12)}
.btn-rond:active{transform:scale(.94)}
.btn-rond:disabled{opacity:.3; cursor:default; transform:none}
.btn-rond.nu{width:44px; height:44px; background:transparent; box-shadow:none; color:var(--encre2)}
.btn-rond.ecoute{background:var(--ecoute); color:#0A0D22; box-shadow:0 8px 20px -8px rgba(140,110,255,.9)}
.lien-doux{display:inline-flex; align-items:center; gap:4px; min-height:var(--tap); padding:0 4px; font-weight:700; font-size:15px; color:var(--accent-clair); text-decoration:none}
.lien-retour{
  align-self:flex-start; min-height:var(--tap); display:inline-flex; align-items:center; gap:6px; padding:0 15px 0 9px; border-radius:14px;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--trait); color:var(--encre); font-weight:700; font-size:16px; text-decoration:none; white-space:nowrap;
}
.lien-retour:hover{background:rgba(255,255,255,.1)}

/* ---------- puces, étiquettes, matières ---------- */
.chip{display:inline-flex; align-items:center; gap:5px; min-height:24px; padding:2px 9px; border-radius:8px; font:700 12px/1.2 var(--texte); letter-spacing:.01em; white-space:nowrap; background:rgba(255,255,255,.08); color:var(--encre2)}
.chip.cempa{background:color-mix(in srgb, var(--cempa) 16%, transparent); color:var(--cempa-clair)}
.chip.jade{background:color-mix(in srgb, var(--jade) 15%, transparent); color:var(--jade-clair)}
.chip.rosa{background:color-mix(in srgb, var(--rosa) 18%, transparent); color:var(--rosa-clair)}
.chip.maiz{background:color-mix(in srgb, var(--maiz) 15%, transparent); color:var(--maiz-clair)}
.chip.lav{background:color-mix(in srgb, var(--lavande) 17%, transparent); color:var(--lavande-clair)}
.chip.m{background:color-mix(in srgb, var(--m, var(--accent)) 18%, transparent); color:color-mix(in srgb, var(--m, var(--accent)) 64%, #fff)}
.chip.neutre{background:rgba(170,177,203,.14); color:var(--encre)}
.etiq-direct{display:inline-flex; align-items:center; gap:8px; min-height:30px; padding:4px 12px 4px 10px; border-radius:10px; background:rgba(3,6,18,.38); font:700 13px/1 var(--texte); letter-spacing:.09em; text-transform:uppercase; color:#fff}
.point{display:inline-block; width:9px; height:9px; border-radius:50%; background:currentColor; flex:none}
.pulse{animation:pouls 1.8s cubic-bezier(.3,.6,.4,1) infinite}
/* l'icône d'une matière dans un carré arrondi teinté (MatiereStyle.icone dedans) */
.badge-mat{width:52px; height:52px; border-radius:17px; display:grid; place-items:center; flex:none; color:var(--m, var(--accent));
  background:color-mix(in srgb, var(--m, var(--accent)) 20%, rgba(0,0,0,.25)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--m, var(--accent)) 42%, transparent)}
.badge-mat.petit{width:32px; height:32px; border-radius:10px}
.puce-mat{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none; color:var(--m, var(--accent)); background:color-mix(in srgb, var(--m, var(--accent)) 17%, transparent)}

/* ---------- interrupteur (role="switch" + aria-checked) ---------- */
.interrupteur{position:relative; flex:none; width:58px; height:44px; padding:0; border:0; border-radius:18px; background:transparent; cursor:pointer}
.interrupteur::before{content:""; position:absolute; left:2px; top:6px; width:54px; height:32px; border-radius:16px; background:rgba(255,255,255,.15); transition:background-color .2s ease}
.interrupteur::after{content:""; position:absolute; top:10px; left:6px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.45); transition:left .2s cubic-bezier(.3,.7,.3,1)}
.interrupteur[aria-checked="true"]::before{background:var(--accent)}
.interrupteur[aria-checked="true"]::after{left:28px}

/* ---------- onglets segmentés (role="tablist" ; l'onglet actif porte aria-selected ou aria-pressed) ---------- */
.onglets-seg{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; padding:4px; border-radius:18px; background:rgba(3,6,18,.32); box-shadow:inset 0 0 0 1px var(--trait)}
.onglets-seg > button{min-height:var(--tap); min-width:0; padding:0 6px; border:0; border-radius:14px; background:transparent; color:var(--encre2); font:700 15px/1.15 var(--texte); cursor:pointer; transition:background-color .15s ease, color .15s ease}
.onglets-seg > button:hover{color:var(--encre)}
.onglets-seg > button[aria-selected="true"], .onglets-seg > button[aria-pressed="true"]{background:var(--surface3); color:var(--encre); box-shadow:inset 0 0 0 1px var(--trait2), inset 0 -2px 0 var(--accent), 0 6px 14px -8px #000}

/* ---------- champs ---------- */
.champ{
  width:100%; min-height:52px; padding:0 16px; border:0; border-radius:var(--r-champ); font-size:17px; color:var(--encre);
  background:rgba(3,6,18,.4); box-shadow:inset 0 0 0 1.5px var(--trait2); transition:box-shadow .15s ease;
}
textarea.champ{padding:12px 16px; line-height:1.45}
.champ::placeholder{color:#8F96B4}
.champ:focus, .champ:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent)}
select.champ{-webkit-appearance:none; appearance:none; padding-right:38px; cursor:pointer;
  background:rgba(3,6,18,.4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23BCC1D9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center}
select.champ option{background:#0A1E4A; color:#F4F3FA}

/* ---------- état vide ---------- */
.vide{padding:28px 20px 26px; border-radius:var(--r-carte); box-shadow:inset 0 0 0 1.5px var(--trait2); color:var(--encre2); text-align:center; line-height:1.55}
.vide strong{display:block; margin:10px 0 6px; font:800 20px/1.2 var(--titre); letter-spacing:-.02em; color:var(--encre)}

/* ---------- toast (une ligne claire, en bas, au-dessus de la barre) : .toast + .visible ---------- */
.toast{
  position:fixed; z-index:60; left:50%; bottom:calc(var(--barre-bas-h) + env(safe-area-inset-bottom, 0px) + 18px); transform:translate(-50%, 8px);
  width:max-content; max-width:calc(100vw - 32px); display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:14px;
  background:rgba(244,243,250,.97); color:var(--fond); font:700 14px/1.35 var(--texte); box-shadow:0 16px 30px -12px rgba(0,0,0,.9);
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s cubic-bezier(.2,.75,.3,1);
}
.toast.visible{opacity:1; transform:translate(-50%, 0)}

/* ---------- feuille du bas (+ voile) : .feuille-bas, poignée dessinée ---------- */
.voile{position:fixed; inset:0; z-index:8; background:rgba(3,5,14,.55)}
.feuille-bas{
  position:fixed; left:0; right:0; bottom:0; z-index:9; max-height:86%; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:8px max(18px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 22px) max(18px, env(safe-area-inset-left, 0px));
  border-radius:28px 28px 0 0; color:var(--encre);
  background:linear-gradient(180deg, #14306A 0%, #0D2456 46%, #0A1E4A 100%);   /* la nuit d'Amariva, un ton au-dessus des cartes */
  box-shadow:inset 0 1px 0 rgba(46,230,166,.35), 0 -12px 28px -18px rgba(0,0,0,.85);
  animation:feuilleBas .28s cubic-bezier(.2,.75,.3,1) both;
}
.feuille-bas::before{content:""; display:block; width:44px; height:5px; margin:2px auto 12px; border-radius:3px; background:rgba(255,255,255,.28)}

/* ---------- barre du bas, commune à toutes les pages (verre, pastille sous l'onglet actif) ----------
   Deux balisages existent et sont couverts : a > span.bb-ico > svg (+ .bb-point) + span.bb-lab (Reloj, micro.html),
   et a > svg.ico + span (+ .pastille) (les autres pages). Le nombre de colonnes : --n ou --bb-n, posé par la page. */
.barre-bas{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; align-items:center;
  grid-template-columns:repeat(var(--n, var(--bb-n, 5)), minmax(0, 1fr));
  height:calc(var(--barre-bas-h) + env(safe-area-inset-bottom, 0px));
  padding:3px max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px));
  background:var(--verre); -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.09);
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
.barre-bas a{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:0; min-height:54px; height:auto; padding:0 1px; border-radius:14px; overflow:visible;
  color:var(--encre2); text-decoration:none; font:700 12px/1.15 var(--texte); letter-spacing:-.015em; white-space:nowrap;   /* lot 6 (cahiers-ux, G10 revue) : 12 px partout, même à 360 px avec six onglets */
}
@media (max-width:375px){
  .barre-bas a{letter-spacing:-.035em; padding:0}
  .barre-bas .bb-ico{width:46px; max-width:100%}
  .barre-bas a > svg{width:46px; height:32px; padding:4px 11px; max-width:100%}
}
.barre-bas a[hidden]{display:none}
.barre-bas a > span:last-child, .barre-bas .bb-lab{max-width:100%; overflow:hidden; text-overflow:ellipsis}
.barre-bas a:hover{color:var(--encre)}
.barre-bas a:active{opacity:.8}
.barre-bas a:focus-visible{outline:3px solid var(--accent); outline-offset:-3px}
/* l'icône dans sa pastille : 56 × 32, teintée de l'accent sous l'onglet actif */
.barre-bas .bb-ico{position:relative; display:grid; place-items:center; width:56px; height:32px; border-radius:12px; transition:background-color .2s ease, color .2s ease}
.barre-bas .bb-ico svg{width:24px; height:24px; display:block}
.barre-bas a > svg{box-sizing:content-box; display:block; flex:none; width:24px; height:24px; padding:4px 16px; border-radius:12px; transition:background-color .2s ease, color .2s ease}
.barre-bas a:hover .bb-ico, .barre-bas a:hover > svg{background:rgba(255,255,255,.06)}
.barre-bas a[aria-current="page"]{color:var(--encre)}
.barre-bas a[aria-current="page"] .bb-ico, .barre-bas a[aria-current="page"] > svg{background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent-clair)}
/* le petit point « du nouveau » (Live, Podcasts) : vert, à la couleur de l'accent (le mode d'emploi parle d'un « petit point vert ») */
.barre-bas .bb-point{position:absolute; top:2px; right:11px; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--fond)}
.barre-bas .pastille{position:absolute; top:4px; left:calc(50% + 10px); width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--fond)}

/* ---------- mouvement : apparitions douces, point en direct qui pulse ; tout coupé sous prefers-reduced-motion ---------- */
.apparait{animation:monte .24s cubic-bezier(.2,.75,.3,1) both}
@keyframes monte{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes pouls{0%{box-shadow:0 0 0 0 color-mix(in srgb, currentColor 65%, transparent)} 70%, 100%{box-shadow:0 0 0 10px color-mix(in srgb, currentColor 0%, transparent)}}
@keyframes clignote{0%, 100%{opacity:.35} 50%{opacity:1}}
@keyframes saute{0%, 70%, 100%{transform:translateY(0); opacity:.45} 35%{transform:translateY(-4px); opacity:1}}
@keyframes onde{0%, 100%{transform:scaleY(.35)} 50%{transform:scaleY(1)}}
@keyframes feuilleBas{from{transform:translateY(40px); opacity:0} to{transform:none; opacity:1}}
/* ---------- ORDINATEUR (≥ 1024 px de large) : barre latérale à gauche, fine barre du haut, contenu large ----------
   (demande de Raphaël du 24/10 : « comme la maquette OYERA, la barre latérale à gauche et tout le reste »)
   La barre du bas de chaque page DEVIENT la barre latérale (mêmes liens, mêmes réglages « reloj-barre », mêmes points « du nouveau ») ;
   app/bureau.js y ajoute la tête (Reloj et l'espace du compte), pour l'élève Semaine · Interros · Réviser, et la barre du haut
   (le fil et le compte). Sous 1024 px rien de ceci ne s'applique : téléphone et tablette en portrait inchangés. */
.bureau-tete, .bureau-haut, .barre-bas .bureau-lien, .barre-bas.bureau-seule{display:none}
@media (min-width:1024px){
  :root{--cote:256px; --barre-bas-h:0px; --bureau-max:1180px}
  /* la barre latérale */
  .barre-bas, .barre-bas.bureau-seule{
    top:0; bottom:0; left:0; right:auto; width:var(--cote); height:auto; z-index:30;
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:3px;
    padding:22px 16px 22px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
    background:linear-gradient(180deg, rgba(8,28,70,.98) 0%, rgba(3,20,55,.98) 100%);
    -webkit-backdrop-filter:none; backdrop-filter:none; border-top:0; border-right:1px solid rgba(255,255,255,.08);
  }
  .barre-bas a, .barre-bas .bureau-lien{display:flex; flex:none; flex-direction:row; align-items:center; justify-content:flex-start; gap:13px;
    min-height:48px; height:auto; padding:0 14px; border-radius:15px; font:700 15px/1.2 var(--texte); letter-spacing:0; color:var(--encre2)}
  .barre-bas a[hidden]{display:none}
  .barre-bas a > span:last-child, .barre-bas .bb-lab{flex:1; min-width:0; max-width:none; overflow:hidden; text-overflow:ellipsis; text-align:left}
  .barre-bas .bb-ico{width:24px; height:24px; border-radius:0; background:none!important; flex:none}
  .barre-bas .bb-ico svg{width:22px; height:22px}
  .barre-bas a > svg{flex:none; width:22px; height:22px; padding:0; border-radius:0; background:none!important}
  .barre-bas a:hover{background:rgba(255,255,255,.06); color:var(--encre)}
  .barre-bas a:focus-visible{outline-offset:-2px}
  .barre-bas a[aria-current="page"]{color:var(--encre); background:color-mix(in srgb, var(--accent) 15%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent)}
  .barre-bas a[aria-current="page"] .bb-ico, .barre-bas a[aria-current="page"] > svg{color:var(--accent-clair)}
  /* sur Semaine ou Interros, la pastille va à l'entrée du bureau (la barre du téléphone y désigne « Cahiers ») */
  .barre-bas:has(.bureau-actif) a[aria-current="page"]:not(.bureau-actif){background:none; box-shadow:none; color:var(--encre2)}
  .barre-bas:has(.bureau-actif) a[aria-current="page"]:not(.bureau-actif) > svg, .barre-bas:has(.bureau-actif) a[aria-current="page"]:not(.bureau-actif) .bb-ico{color:inherit}
  /* le point « du nouveau » (Live, Podcasts) : au bout de la ligne */
  .barre-bas .bb-point{top:-3px; right:-4px}
  .barre-bas .pastille{top:50%; left:auto; right:16px; transform:translateY(-50%)}
  /* l'ordre de lecture : Accueil, Live, Cahiers, Podcasts, Semaine, Interros, Réviser, Jeux… et Réglages en bas */
  .barre-bas .bureau-tete{order:-10}
  .barre-bas a[href="/"]{order:1} .barre-bas a[href="/live.html"]{order:2} .barre-bas a[href="/cahiers.html"]{order:3} .barre-bas a[href="/podcasts.html"]{order:4}
  .barre-bas a[href="/semaine.html"]{order:5} .barre-bas a[href="/interros.html"]{order:6} .barre-bas a[href="/cahiers.html#repasar"]{order:7} .barre-bas a[href="/jeux.html"]{order:8}
  .barre-bas a[href="/reglages.html"]{order:20; margin-top:auto}
  /* la tête : la mascotte et AMARIVA (le nom en logo), puis l'espace du compte */
  .bureau-tete{display:grid; gap:16px; margin:0 0 18px}
  .bureau-marque{display:flex; align-items:center; gap:11px; min-width:0; padding:0 4px; color:#fff}
  .bureau-marque .marque{font-size:19px; line-height:1}
  .bureau-logo{width:40px; height:40px; flex:none; border-radius:12px; display:block; object-fit:cover; box-shadow:inset 0 0 0 1px var(--trait2), 0 10px 22px -12px rgba(35,182,133,.7)}
  .bureau-espace{display:grid; gap:2px; padding:12px 14px 13px; border-radius:18px; background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 1px var(--trait2)}
  .bureau-espace small{font:700 11.5px/1.3 var(--texte); letter-spacing:.1em; text-transform:uppercase; color:var(--encre3)}
  .bureau-espace b{font:750 17px/1.2 var(--titre); letter-spacing:-.01em; color:var(--encre)}
  .bureau-espace span{font-size:14px; color:var(--encre2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .bureau-espace span:empty{display:none}
  .bureau-espace .bureau-ecole{display:flex; align-items:center; gap:7px; margin-top:4px; font-size:13px; color:var(--encre2)}   /* v16 : son école (nom, logo) */
  .bureau-espace .bureau-ecole[hidden]{display:none}
  /* le contenu passe à droite de la barre latérale */
  html body:has(> nav.barre-bas){padding-left:calc(var(--cote) + 40px); padding-right:40px}
  /* la barre du haut : le fil (rôle / page), le compte */
  .bureau-haut{display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:var(--bureau-max); min-height:58px; margin:0 auto 22px; padding:0 2px 14px; border-bottom:1px solid var(--trait)}
  .bureau-fil{margin:0; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px; font:700 15px/1.3 var(--texte); color:var(--encre3)}
  .bureau-fil > span{max-width:42ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .bureau-fil .bureau-sep{opacity:.6}
  .bureau-fil .bureau-ici{color:var(--encre)}
  .bureau-compte{display:flex; align-items:center; gap:11px; flex:none}
  .bureau-initiales{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--accent-clair); font:800 15px/1 var(--titre); letter-spacing:.02em;
    background:color-mix(in srgb, var(--accent) 18%, var(--surface)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent)}
  .bureau-qui{display:grid; line-height:1.25}
  .bureau-qui b{font:750 15px/1.25 var(--titre); color:var(--encre)}
  .bureau-qui small{font-size:12.5px; color:var(--encre2)}
  .bureau-qui small:empty{display:none}
  /* ce qui flotte en bas se centre sur le contenu, pas sur l'écran entier ; les feuilles s'ouvrent à droite de la barre latérale */
  html .toast, html .maj{left:calc(50% + var(--cote) / 2)}
  .feuille-bas{left:var(--cote); padding-left:max(28px, calc((100vw - var(--cote) - 760px) / 2)); padding-right:max(28px, calc((100vw - var(--cote) - 760px) / 2))}
}
@media (min-width:1024px) and (max-width:1279px){ :root{--cote:232px} html body:has(> nav.barre-bas){padding-left:calc(var(--cote) + 28px); padding-right:28px} }

/* ---------- sans color-mix() (iOS < 16.2, vieilles WebView Android) : ces navigateurs sautent chaque déclaration qui l'emploie.
   On donne ici des couleurs simples aux pièces les plus visibles, pour que l'app reste une nuit cohérente et lisible
   (fonds, héros, boutons, puces, champs, barre du bas, couvertures). Le reste perd seulement une lueur. ---------- */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .fond-nuit{background:radial-gradient(620px 420px at 12% -90px, rgba(91,140,255,.3), transparent 70%) no-repeat, linear-gradient(180deg, var(--fond) 0, var(--fond2) 900px) no-repeat, var(--fond2)}
  .texte-m{color:var(--encre)}
  .carte, .heros, .encart-echeance, .cahier-carte, .bloc, .clase, .carte.recent{background-color:var(--surface)}
  /* une couleur à 20 % sans color-mix : un voile de surface à 80 % posé sur la couleur de la matière */
  .heros{background:linear-gradient(165deg, rgba(10,30,74,.78) 0%, var(--surface) 72%), var(--m, var(--accent)); box-shadow:inset 0 0 0 1px var(--trait2), var(--ombre)}
  .encart-echeance{background:#2A2433; box-shadow:inset 0 0 0 1px rgba(255,159,28,.42), var(--ombre)}
  .btn{box-shadow:0 12px 26px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.35)}
  .btn.m{background:var(--m, var(--accent))}
  .chip.cempa{background:rgba(255,159,28,.16)} .chip.jade{background:rgba(35,182,133,.18)} .chip.rosa{background:rgba(255,79,163,.18)}
  .chip.maiz{background:rgba(255,210,63,.15)} .chip.lav{background:rgba(181,123,255,.17)} .chip.m{background:rgba(255,255,255,.1); color:var(--encre)}
  .badge-mat, .puce-mat{background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px var(--trait2)}
  .champ:focus, .champ:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
  .barre-bas a[aria-current="page"] .bb-ico, .barre-bas a[aria-current="page"] > svg{background:rgba(35,182,133,.24)}
  /* l'état choisi d'une puce, d'un segment, d'un onglet : il doit rester visible */
  .chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-checked="true"], .seg[aria-checked="true"], .seg[aria-pressed="true"], .onglet[aria-selected="true"], .filtre-bouton.actif{
    background:rgba(35,182,133,.2); box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--encre)}
  /* les cartes propres aux pages, dont le fond est un mélange de couleur : une surface de nuit et un filet */
  .interro-carte, .question, .tipo, .tuile, .bienvenue, .primera, #clase, .chiffre, .recompense.atteinte, .devoirs, .devoirs-ligne, .cahier-titre, .bandeau{
    background-color:var(--surface)}
  .interro-carte, .question, .tipo, .tuile, .bienvenue, .primera, #clase, .chiffre, .cahier-titre{box-shadow:inset 0 0 0 1px var(--trait2), var(--ombre)}
  .devoirs, .devoirs-ligne, .tampon, .devoirs-liste li{box-shadow:inset 0 0 0 1px rgba(255,159,28,.42)}
  .ic, .t-dot, .wg-mat, .puce-mat{background:rgba(255,255,255,.08)}
  .wg-mat, .wg-mat.wg-mat-heros, .chiffre b, .texte-m{color:var(--encre)}
  .wg-rec[aria-pressed="true"]{background:rgba(35,182,133,.22); box-shadow:inset 0 0 0 2px var(--accent)}
  .feedback{background-color:var(--surface); box-shadow:inset 0 0 0 1px rgba(35,182,133,.5)}
  @keyframes pouls{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)} 70%, 100%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
}

/* ---------- v15 : les fonctions éteintes par l'école (app/fonctions.js pose <html data-sans="…">) : ce qui en dépend disparaît proprement ---------- */
html[data-sans~="jeux"] [data-fonction~="jeux"], html[data-sans~="podcasts"] [data-fonction~="podcasts"], html[data-sans~="live"] [data-fonction~="live"],
html[data-sans~="parent"] [data-fonction~="parent"], html[data-sans~="traduction"] [data-fonction~="traduction"],
html[data-sans~="telephone"] [data-fonction~="telephone"]{display:none!important}
html[data-sans~="ecoute"] [data-fonction~="ecoute"]{display:none!important}
html[data-sans~="noentendi"] [data-fonction~="noentendi"]{display:none!important}
/* ---------- v15 : une annonce de l'école sur l'accueil (le texte de l'administrateur ; « Fermer » ne la montre plus) — sobre, couleur ciel, jamais d'alarme ---------- */
.annonces{display:grid; gap:10px; min-width:0}
.annonces[hidden]{display:none}
.annonce{position:relative; min-width:0; padding:14px 14px 14px 16px; border-radius:20px; color:var(--encre);
  background:linear-gradient(150deg, color-mix(in srgb, var(--cielo) 16%, var(--surface)), var(--surface) 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cielo) 34%, transparent), var(--ombre)}
.annonce-tete{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:start; gap:10px}
.annonce-ico{box-sizing:border-box; width:36px; height:36px; padding:8px; border-radius:12px; color:var(--cielo-clair); background:color-mix(in srgb, var(--cielo) 16%, transparent)}
.annonce-titres{display:grid; gap:2px; min-width:0; padding-top:2px}
.annonce-sur{margin:0; font:700 12px/1.3 var(--texte); letter-spacing:.08em; text-transform:uppercase; color:var(--cielo-clair)}
.annonce-titre{margin:0; font:800 18px/1.25 var(--titre); letter-spacing:-.015em; overflow-wrap:anywhere}
.annonce-fermer{display:grid; place-items:center; width:44px; height:44px; margin:-6px -6px 0 0; padding:0; border:0; border-radius:14px; background:transparent; color:var(--encre2); cursor:pointer}
.annonce-fermer:hover{background:rgba(255,255,255,.08); color:var(--encre)}
.annonce-fermer:focus-visible{outline:3px solid var(--accent); outline-offset:-3px}
.annonce-texte{margin:8px 0 0; font-size:16px; line-height:1.55; white-space:pre-line; overflow-wrap:anywhere}
.annonce-fin{margin:6px 0 0; font-size:13px; color:var(--encre2)}

/* v16 (lot 7, plusieurs écoles : app/ecoles.js) : le choix de l'école regardée par le super administrateur, le nom et le logo d'une école dans un en-tête.
   Les logos sont des images servies par le service (/session/logo/…), jamais du HTML. */
.ecoles-choix{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; min-width:0; padding:10px 14px; border-radius:18px; background:rgba(3,6,18,.32); box-shadow:inset 0 0 0 1px var(--trait)}
.ecoles-choix-lib{font:700 13px/1.3 var(--texte); letter-spacing:.06em; text-transform:uppercase; color:var(--encre3)}
.ecoles-choix .segs{display:flex; flex-wrap:wrap; gap:6px}
.ecoles-choix .seg{display:inline-flex; align-items:center; gap:7px; min-height:var(--tap); padding:0 13px; border:0; border-radius:12px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--trait2); color:var(--encre2); font:700 14px/1.2 var(--texte); cursor:pointer}
.ecoles-choix .seg[aria-checked="true"]{color:var(--encre); background:color-mix(in srgb, var(--cielo) 16%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--cielo) 55%, transparent)}
.ecoles-choix select{min-height:var(--tap); max-width:100%; padding:0 12px; border:0; border-radius:12px; background:rgba(3,6,18,.5); box-shadow:inset 0 0 0 1.5px var(--trait2); color:var(--encre); font:600 15px/1.3 var(--texte); color-scheme:dark}
.ecole-marque{display:inline-flex; align-items:center; gap:8px; min-width:0; overflow-wrap:anywhere}
.ecole-logo-mini{flex:none; width:22px; height:22px; object-fit:contain; border-radius:6px; background:rgba(255,255,255,.9)}
.seg .ecole-logo-mini{width:20px; height:20px}

@media (prefers-reduced-motion: reduce){
  .apparait, .pulse, .feuille-bas{animation:none}
  .btn, .btn-rond, .toast, .interrupteur::before, .interrupteur::after, .onglets-seg > button, .barre-bas .bb-ico, .barre-bas a > svg, .champ{transition:none}
}

/* Mode Jour / Clair optionnel (réglages Écran : reloj-theme="clair") */
html[data-theme="clair"]{
  color-scheme:light;
  --fond:#F6F4EC; --fond2:#EFECE1;
  --surface:#FFFFFF; --surface2:#F2EFE6; --surface3:#E6E2D6;
  --trait:rgba(11,23,42,.09); --trait2:rgba(11,23,42,.16);
  --verre:rgba(246,244,236,.92);
  --encre:#0B172A; --encre2:#334155; --encre3:#64748B;
  --jade:#0D8A63; --jade-clair:#0A7B56;
  --cempa:#D96B00; --cempa-clair:#B45309;
  --talavera:#2563EB; --talavera-clair:#1D4ED8;
  --ambre:#C87D12; --ambre-clair:#A16207;
  --neutre:#64748B;
  --encre-accent:#FFFFFF;
  --ombre:0 12px 28px -18px rgba(11,23,42,.18);
}

/* ---------- les modes de l'élève (modes.js, refonte de la navigation du 03/11/2026, programme/ergonomie/MODES-ELEVE.md) ----------
   La barre du bas de la page prend la couleur du mode (--bm-c, posée par modes.js) : son premier bouton « Modes » ouvre la feuille « Changer de mode »,
   puis viennent les 3 ou 4 boutons du mode (lot 6 : toute la barre vient de modes.js, plus d'anciens onglets dans les pages ni de menu ☰).
   Sur ordinateur, la barre latérale liste les modes, et sous le mode courant ses boutons. */
.barre-bas.barre-mode{--accent:var(--bm-c); --accent-clair:var(--bm-cc); grid-template-columns:64px repeat(var(--bm-n, 3), minmax(0, 1fr))}
.barre-mode .bm-mode{display:none}
.barre-mode .bm-modes{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:54px; margin:0 2px 0 0; padding:0;
  border:0; border-right:1px solid var(--trait2); border-radius:14px 0 0 14px; background:none; color:var(--encre); font:700 12px/1.15 var(--texte); letter-spacing:-.015em; cursor:pointer; -webkit-tap-highlight-color:transparent}
.barre-mode .bm-modes:focus-visible{outline:3px solid var(--bm-cc); outline-offset:-3px}
.bm-carre{position:relative; display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:10px; background:var(--bm-c, var(--accent)); color:#031437; box-shadow:0 0 14px -3px var(--bm-c, var(--accent))}
.bm-carre svg{width:19px; height:19px; display:block}
.bm-point{position:absolute; top:-4px; right:-4px; width:11px; height:11px; border-radius:50%; background:var(--lavande); box-shadow:0 0 0 2px var(--fond); animation:clignote 1.6s ease-in-out infinite}
.bm-point[hidden]{display:none}
.barre-mode .bm-onglet .pastille[hidden]{display:none}
@media (min-width:1024px){
  .barre-mode .bm-modes, .barre-mode .bm-tel{display:none!important}
  .barre-mode a.bm-mode{display:flex; color:var(--encre2)}
  .barre-mode a.bm-mode .bm-carre{width:28px; height:28px; border-radius:9px; background:color-mix(in srgb, var(--bm-c) 26%, transparent); color:var(--bm-cc); box-shadow:none}
  .barre-mode a.bm-mode .bm-carre svg{width:17px; height:17px}
  .barre-mode a.bm-mode.bm-ici{color:var(--encre); background:color-mix(in srgb, var(--bm-c) 12%, transparent)}
  .barre-mode a.bm-mode.bm-ici .bm-carre{background:var(--bm-c); color:#031437}
  .barre-mode a.bm-onglet{min-height:42px; margin-left:20px; font-size:14.5px}
}
/* la visite des modes (lot 6, visite.js) : trois écrans au centre, une seule fois */
dialog.visite{width:min(440px, calc(100% - 32px)); max-height:min(90vh, 90dvh); margin:auto; padding:0; border:0; border-radius:26px; background:var(--fond2); color:var(--encre);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.85), inset 0 1px 0 var(--trait2); overflow:auto; overscroll-behavior:contain}
dialog.visite[open]{animation:feuilleBas .25s cubic-bezier(.2,.75,.3,1) both}
dialog.visite::backdrop{background:rgba(1,6,20,.7)}
.visite-corps{display:grid; gap:12px; justify-items:start; padding:22px 20px 18px}
.visite-etape{margin:0; color:var(--encre2); font:700 12.5px/1.2 var(--titre); letter-spacing:.08em; text-transform:uppercase}
.visite-carre{display:grid; place-items:center; width:56px; height:56px; border-radius:16px; background:color-mix(in srgb, var(--v-c) 26%, var(--surface)); color:var(--encre); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--v-c) 50%, transparent)}
.visite-corps h2{margin:0; font:800 24px/1.15 var(--titre); letter-spacing:-.01em}
.visite-texte{margin:0; color:var(--encre2); font-size:16px; line-height:1.45}
.visite-texte b{color:var(--encre)}
.visite-points{display:flex; gap:6px; margin-top:4px}
.visite-points span{width:8px; height:8px; border-radius:50%; background:var(--trait2)}
.visite-points span.ici{width:22px; border-radius:999px; background:var(--v-c)}
.visite-actions{display:flex; gap:10px; justify-content:flex-end; width:100%; margin-top:4px}
.visite-actions .b[hidden]{display:none}
/* la feuille « Changer de mode » : un panneau qui monte du bas (centré sur ordinateur) */
dialog.bm-feuille{position:fixed; inset:auto 0 0 0; width:100%; max-width:560px; max-height:min(88vh, 88dvh); margin:0 auto; padding:0; border:0; border-radius:26px 26px 0 0;
  background:var(--fond2); color:var(--encre); box-shadow:0 -24px 60px -20px rgba(0,0,0,.85), inset 0 1px 0 var(--trait2); overflow:auto; overscroll-behavior:contain}
dialog.bm-feuille[open]{animation:feuilleBas .25s cubic-bezier(.2,.75,.3,1) both}
dialog.bm-feuille::backdrop{background:rgba(1,6,20,.62)}
@media (min-width:1024px){ dialog.bm-feuille{inset:0; margin:auto; height:max-content; border-radius:26px} }
.bm-feuille .bm-corps{display:grid; gap:12px; padding:16px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.bm-feuille .bm-tete{display:flex; align-items:center; justify-content:space-between; gap:12px}
.bm-feuille h2{margin:0; font:800 22px/1.2 var(--titre); letter-spacing:-.01em}
.bm-feuille .bm-fermer{width:var(--tap); height:var(--tap); flex:none; border-radius:50%; border:0; background:var(--surface); color:var(--encre2); font:700 17px/1 var(--texte); cursor:pointer}
.bm-feuille .bm-sous{margin:-4px 0 2px; color:var(--encre2); font-size:15px; line-height:1.4}
.bm-grille{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
.bm-tuile{position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; min-height:126px; padding:14px; border-radius:20px; text-decoration:none; color:var(--encre);
  background:linear-gradient(150deg, color-mix(in srgb, var(--bm-c) 30%, var(--surface)) 0%, var(--surface) 80%); border:1px solid color-mix(in srgb, var(--bm-c) 42%, transparent)}
.bm-tuile .bm-carre{width:40px; height:40px; border-radius:12px; margin-bottom:2px}
.bm-tuile .bm-carre svg{width:22px; height:22px}
.bm-tuile b{font:800 17px/1.15 var(--titre); overflow-wrap:anywhere}
.bm-tuile .bm-phrase{font-size:13.5px; line-height:1.3; color:var(--encre2)}
.bm-tuile[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--bm-c)}
.bm-tuile:focus-visible, .bm-reglages:focus-visible{outline:3px solid var(--bm-cc, var(--accent-clair)); outline-offset:2px}
.bm-etiquette{position:absolute; top:12px; right:10px; max-width:calc(100% - 64px); padding:3px 8px; border-radius:999px; font:700 12px/1.25 var(--titre); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bm-ici-lib{background:rgba(35,182,133,.2); color:var(--jade-clair)}
.bm-maint{background:rgba(232,168,60,.2); color:var(--ambre-clair)}
.bm-reglages{display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 14px; border-radius:16px; background:var(--surface); border:1px solid var(--trait); color:var(--encre); text-decoration:none}
.bm-reglages .bm-carre{background:var(--surface3); color:var(--encre2); box-shadow:none}
.bm-reglages[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--encre3)}
.bm-reg-corps{display:grid; gap:2px; min-width:0}
.bm-reg-corps b{font:700 15.5px/1.2 var(--titre)}
.bm-reg-corps span{font-size:13.5px; color:var(--encre2)}
/* Cahiers, par matière ou par semaine (modes, lot 2 du 03/11) : le même sélecteur en tête de Mes cahiers et de Semaine (deux pages, une seule place) */
.seg-cahiers{display:flex; gap:6px; padding:4px; border-radius:16px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--trait)}
.seg-cahiers a{flex:1; display:flex; align-items:center; justify-content:center; min-width:0; min-height:var(--tap); padding:0 10px; border-radius:12px; color:var(--encre2); font:700 15px/1.2 var(--titre); text-decoration:none; text-align:center}
.seg-cahiers a:hover{color:var(--encre)}
.seg-cahiers a[aria-current="page"]{background:var(--surface3); color:var(--encre); box-shadow:inset 0 0 0 1px var(--trait2)}
.seg-cahiers a:focus-visible{outline:3px solid var(--accent-clair); outline-offset:-3px}
/* une page de l'app dans le cadre d'En classe (modes, lot 4 du 03/11 : Direct = live.html, Mots = espagnol.html, ouverts dans micro.html) :
   la barre du mode est autour ; pas de place réservée en bas, pas de lien « Retour » (la barre le donne) */
html.dans-cadre{--barre-bas-h:0px}
html.dans-cadre .retour{display:none!important}
/* un sous-titre espagnol vide (décision du 03/11 : tout dans la langue de l'élève ; il ne reste qu'en espagnol) ne prend pas de place */
.sous.es:empty{display:none}