/* ═══════════ Vulpi — app (DA : sable, terracotta, pétrole, encre · Fraunces + Instrument Sans) ═══════════ */
:root {
  --terracotta: #BC5A38;
  --terracotta-fonce: #A94E30;
  --terracotta-tint: #F3DFD3;
  --encre: #211E2B;
  --petrole: #1F4E4C;
  --petrole-fonce: #142F2D;
  --sable: #F3EDE3;
  --creme: #FBF7EF;
  --bordure: #DED8CF;
  --grege: #9A9086;
  --font-titre: "Fraunces", Georgia, serif;
  --font-corps: "Instrument Sans", -apple-system, system-ui, sans-serif;
  --sur: env(safe-area-inset-top, 0px);
  --sous: env(safe-area-inset-bottom, 0px);
}
/* Polices exigées par les Lottie à texte natif (noms de famille EXACTS) */
@font-face { font-family: "Fredoka SemiBold"; src: url("assets/Fredoka-SemiBold.ttf"); font-display: swap; }
@font-face { font-family: "Fraunces 72pt Medium"; src: url("assets/Fraunces-SemiBold.ttf"); font-display: swap; }

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-corps);
  background: var(--sable);
  color: var(--encre);
  min-height: 100dvh;
}
.ecran { max-width: 640px; margin-inline: auto; min-height: 100dvh; display: flex; flex-direction: column; }

/* ─────────── boutons communs ─────────── */
.btn-rond {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 999px;
  cursor: pointer; color: var(--encre);
}
.btn-rond svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-rond.fantome { visibility: hidden; }

/* press-state physique (façon Duolingo) : ombre dure + enfoncement */
.btn-jalon, .btn-etape {
  min-height: 56px; width: 100%; border: none; border-radius: 999px; cursor: pointer;
  font: 600 17px var(--font-corps); color: #fff;
  transition: transform .06s ease, box-shadow .06s ease;
}
.btn-jalon { background: var(--terracotta); box-shadow: 0 4px 0 var(--terracotta-fonce); }
.btn-etape { background: var(--petrole); box-shadow: 0 4px 0 var(--petrole-fonce); }
.btn-jalon:active, .btn-etape:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.btn-jalon:disabled, .btn-etape:disabled { opacity: .45; box-shadow: none; cursor: default; }
.lien {
  background: none; border: none; cursor: pointer;
  font: 500 15px var(--font-corps); color: var(--grege);
  text-decoration: underline; text-underline-offset: 3px;
}
.erreur {
  font-size: 14px; color: #B4432A; background: rgba(188, 90, 56, .09);
  border-radius: 11px; padding: 10px 13px; margin-top: 10px;
}
.trait { width: 110px; height: 9px; }
.trait path { fill: none; stroke: var(--terracotta); stroke-width: 3.5; stroke-linecap: round; }
.trait.petit { width: 54px; height: 5px; display: block; }
.bientot {
  font: 600 10px var(--font-corps); letter-spacing: .04em; color: var(--terracotta-fonce);
  background: var(--terracotta-tint); border-radius: 999px; padding: 2px 7px; vertical-align: 1px;
}

/* ─────────── Écran login ─────────── */
.ecran-login { padding-top: var(--sur); }
.login-anim { flex: 1; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.login-anim > svg, .login-anim > div { max-width: 300px; }
.login-sheet {
  background: var(--creme); border-radius: 28px 28px 0 0;
  padding: 14px 24px calc(18px + var(--sous));
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.sheet-grabber { width: 40px; height: 5px; border-radius: 3px; background: var(--bordure); }
.sheet-titre { font-family: var(--font-titre); font-weight: 560; font-size: 29px; letter-spacing: -0.01em; text-align: center; }
.sheet-sous { font-size: 16px; line-height: 1.5; color: var(--grege); text-align: center; max-width: 42ch; }
.sheet-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.btn-auth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; border-radius: 999px; cursor: pointer;
  font: 600 17px var(--font-corps);
  transition: transform .06s ease, box-shadow .06s ease;
}
.btn-auth svg { width: 22px; height: 22px; }
.btn-apple { background: var(--encre); color: #fff; border: none; box-shadow: 0 4px 0 #100E17; }
.btn-google { background: #fff; color: var(--encre); border: 1.5px solid var(--bordure); box-shadow: 0 4px 0 var(--bordure); }
.btn-auth:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.sheet-note { font-size: 13px; line-height: 1.4; color: var(--grege); text-align: center; }

/* ─────────── Onboarding ─────────── */
.ecran-onb { padding: calc(6px + var(--sur)) 0 calc(14px + var(--sous)); }
.onb-head { display: flex; align-items: center; gap: 8px; padding: 6px 16px; }
.onb-chemin { flex: 1; height: 80px; }
.onb-etape { flex: 1; display: flex; flex-direction: column; }
.onb-corps { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 24px 24px 0; }
.onb-corps.centre { justify-content: center; align-items: center; text-align: center; }
.onb-cta { padding: 12px 24px 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }

.hello-anim { width: min(320px, 82vw); }
.promesse {
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 20px;
  padding: 18px 20px; max-width: 40ch;
  font-family: var(--font-titre); font-style: italic; font-size: 19px; line-height: 1.45;
}

.dialogue { display: flex; gap: 10px; align-items: flex-start; }
.dialogue img { flex: none; margin-top: 4px; }
.question {
  font-family: var(--font-titre); font-weight: 560; font-size: 29px;
  letter-spacing: -0.01em; line-height: 1.2;
}
.sous-question { font: 600 15px var(--font-corps); }
.sous-texte { font-size: 15px; line-height: 1.45; color: var(--grege); }
.centre-txt { text-align: center; }
.remarque { font-family: var(--font-titre); font-style: italic; font-size: 14.5px; color: var(--grege); margin-top: 10px; }

.champ-prenom {
  font: 500 22px var(--font-corps); color: var(--encre);
  background: var(--creme); border: 2px solid var(--terracotta);
  border-radius: 16px; padding: 15px 20px; width: 100%;
}
.champ-prenom:focus { outline: none; box-shadow: 0 0 0 3px rgba(188, 90, 56, .14); }
.champ-prenom::placeholder { color: var(--grege); font-weight: 400; }
.reaction { display: flex; align-items: center; gap: 7px; }
.reaction svg { width: 15px; height: 15px; fill: var(--terracotta); flex: none; }
.reaction em { font-family: var(--font-titre); font-size: 15px; }

.options { display: flex; flex-direction: column; gap: 12px; }
.option {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--creme); border: 1.5px solid var(--bordure); border-radius: 16px;
  padding: 16px 18px; cursor: pointer; font-family: var(--font-corps);
  transition: border-color .12s ease, background .12s ease;
}
.option.actif { border-color: var(--terracotta); border-width: 2px; padding: 15.5px 17.5px; }
.option::after {
  content: ""; width: 20px; height: 20px; flex: none; margin-left: auto;
  border: 2px solid var(--bordure); border-radius: 50%;
}
.option.actif::after { border-color: var(--terracotta); background: radial-gradient(circle, var(--terracotta) 42%, transparent 46%); }
.option-ico {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  background: var(--terracotta-tint); border-radius: 50%;
}
.option-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--terracotta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.option-textes { display: flex; flex-direction: column; gap: 3px; }
.option-titre { font-size: 17px; font-weight: 600; color: var(--encre); }
.option-sous { font-size: 14px; line-height: 1.4; color: var(--grege); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips button {
  font: 500 15px var(--font-corps); color: var(--encre);
  background: var(--creme); border: 1.5px solid var(--bordure);
  border-radius: 999px; padding: 12px 18px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.chips button.actif { background: var(--terracotta-tint); border-color: var(--terracotta); font-weight: 600; }

.pret-mark { width: 120px; height: 120px; border-radius: 50%; background: #EDE2D2; display: grid; place-items: center; }
.pret-titre { font-family: var(--font-titre); font-weight: 560; font-size: 32px; letter-spacing: -0.01em; }
.recap {
  width: 100%; background: var(--creme); border: 1px solid var(--bordure); border-radius: 20px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 13px; text-align: left;
}
.recap-ligne { display: flex; align-items: center; gap: 12px; font: 500 15px var(--font-corps); }
.recap-ligne .pastille {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  background: var(--terracotta-tint); border-radius: 50%;
}
.recap-ligne svg { width: 16px; height: 16px; fill: none; stroke: var(--terracotta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cta-final { position: relative; width: 100%; }
.cta-renard { position: absolute; width: 40px; top: -15px; right: 64px; transform: rotate(-9deg); z-index: 1; pointer-events: none; }

/* ─────────── Accueil composeur ─────────── */
.ecran-home { padding: calc(6px + var(--sur)) 0 calc(16px + var(--sous)); }
.home-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--terracotta);
  color: var(--creme); font: 600 15px var(--font-corps);
  display: grid; place-items: center; text-transform: uppercase;
}
.home-centre { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 0 20px; }
.salutation { display: flex; align-items: center; justify-content: center; gap: 12px; }
.salutation h1 { font-family: var(--font-titre); font-weight: 560; font-size: 30px; letter-spacing: -0.01em; }

.preprompts { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
.preprompts::-webkit-scrollbar { display: none; }
.preprompt {
  flex: none; width: 196px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 16px;
  padding: 14px; cursor: pointer; text-align: left; font-family: var(--font-corps);
}
.preprompt:disabled { cursor: default; opacity: .8; }
.pp-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.pp-ico svg { width: 17px; height: 17px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-terra { background: var(--terracotta-tint); } .pp-terra svg { stroke: var(--terracotta); }
.pp-petrole { background: #DFE9E7; } .pp-petrole svg { stroke: var(--petrole); }
.pp-ambre { background: #F4E7CF; } .pp-ambre svg { stroke: #A2701F; }
.pp-titre { font-size: 15px; font-weight: 600; color: var(--encre); }
.pp-sous { font-size: 12.5px; line-height: 1.35; color: var(--grege); }

.composeur-home {
  background: var(--creme); border: 1.5px solid var(--bordure); border-radius: 24px;
  padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 14px;
}
#home-enonce {
  border: none; background: none; resize: none; width: 100%;
  font: 400 16px/1.4 var(--font-corps); color: var(--encre);
}
#home-enonce:focus { outline: none; }
#home-enonce::placeholder { color: var(--grege); }
.ch-actions { display: flex; align-items: center; justify-content: space-between; }
.ch-gauche { display: flex; align-items: center; gap: 8px; }
.chip-photo {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--terracotta-tint); color: var(--terracotta-fonce);
  font: 600 14px var(--font-corps); border-radius: 999px; padding: 8px 13px;
}
.chip-photo svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.btn-trombone {
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  background: var(--sable); border-radius: 50%; color: var(--encre);
}
.btn-trombone svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nom-photo { font-size: 12.5px; color: var(--petrole); }
.btn-envoi-rond {
  width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--terracotta); color: #fff; display: grid; place-items: center;
  box-shadow: 0 3px 0 var(--terracotta-fonce);
  transition: transform .06s ease, box-shadow .06s ease;
}
.btn-envoi-rond:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }
.btn-envoi-rond svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* tiroir menu */
.tiroir-voile { position: fixed; inset: 0; z-index: 40; background: rgba(33, 30, 43, .5); }
.tiroir {
  width: min(300px, 82vw); height: 100%; background: var(--creme);
  border-radius: 0 24px 24px 0; padding: calc(56px + var(--sur)) 16px calc(20px + var(--sous));
  display: flex; flex-direction: column; gap: 6px;
}
.tiroir-logo { display: flex; align-items: center; gap: 10px; padding: 0 10px 18px; }
.logo-mot { font-family: "Fredoka SemiBold", var(--font-corps); font-size: 20px; }
.tiroir-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; border-radius: 12px; padding: 13px 12px;
  font: 500 16px var(--font-corps); color: var(--encre); cursor: pointer; text-align: left;
}
.tiroir-item.actif { background: var(--terracotta-tint); color: var(--terracotta-fonce); font-weight: 600; }
.tiroir-item:disabled { color: var(--grege); cursor: default; }
.tiroir-pied {
  margin-top: auto; border-top: 1px solid var(--bordure);
  padding: 14px 10px 0; display: flex; align-items: center; gap: 12px;
}
.tiroir-pied .avatar { width: 40px; height: 40px; }
.tiroir-pied small { display: block; color: var(--grege); font-size: 13px; }

/* ─────────── Suivi ─────────── */
.ecran-suivi { padding: calc(6px + var(--sur)) 0 calc(16px + var(--sous)); }
.ecran-suivi .onb-head { justify-content: space-between; }
.titre-ecran { font: 600 17px var(--font-corps); }
.matieres { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 16px 2px; }
.matieres::-webkit-scrollbar { display: none; }
.matieres button {
  flex: none; display: flex; align-items: center; gap: 8px;
  font: 500 14px var(--font-corps); color: var(--encre);
  background: var(--creme); border: 1px solid var(--bordure);
  border-radius: 999px; padding: 9px 14px; cursor: pointer;
}
.matieres button.actif { background: var(--terracotta-tint); border-color: var(--terracotta-tint); font-weight: 600; }
.matieres .pastille-matiere { width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); }
.onglets { display: flex; gap: 24px; padding: 10px 16px 0; }
.onglets button {
  background: none; border: none; cursor: pointer; padding: 0 0 8px;
  font: 500 15px var(--font-corps); color: var(--grege);
  border-bottom: 2.5px solid transparent;
}
.onglets button.actif { color: var(--encre); font-weight: 600; border-bottom-color: var(--terracotta); }
.hairline { height: 1px; background: var(--bordure); }
.suivi-corps { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px; overflow-y: auto; }
.suivi-vide { font-size: 15px; line-height: 1.5; color: var(--grege); padding: 8px 2px; }
.synthese { font-size: 15px; line-height: 1.45; }
.synthese b { color: var(--terracotta); }
/* ta semaine : des victoires, pas des notes */
.semaine { display: flex; gap: 10px; }
.semaine-tuile {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 14px;
  padding: 12px 13px;
}
.semaine-tuile svg { width: 17px; height: 17px; fill: none; stroke: var(--terracotta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.semaine-tuile b { font: 600 26px var(--font-titre); color: var(--terracotta); line-height: 1.1; }
.semaine-tuile span { font-size: 12px; line-height: 1.3; color: var(--grege); }

/* une mini-piste par notion : le renard avance de jalon en jalon */
.notion-carte {
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 16px;
  padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 4px;
}
.notion-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notion-nom { font: 600 15px var(--font-corps); }
.mini-piste { width: 100%; height: auto; margin-top: 2px; }
.mp-fond { fill: none; stroke: #E9E0D2; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 7; }
.mp-faite { fill: none; stroke: var(--terracotta); stroke-width: 3.5; stroke-linecap: round; }
.mp-jalon-off { fill: var(--creme); stroke: var(--bordure); stroke-width: 2; }
.mp-jalon-on { fill: var(--terracotta); }
.notion-meta { font-size: 12.5px; color: var(--grege); }
.btn-avancer {
  align-self: flex-start; display: flex; align-items: center; gap: 7px; margin-top: 6px;
  background: var(--terracotta-tint); color: var(--terracotta-fonce);
  border: none; border-radius: 999px; padding: 9px 14px; cursor: pointer;
  font: 600 13.5px var(--font-corps);
}
.btn-avancer svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.notion-meta .en-progres { color: var(--petrole); font-weight: 600; }
.badge { font: 600 12px var(--font-corps); border-radius: 10px; padding: 4px 10px; }
.badge.solide { color: var(--petrole); background: #DFE9E7; }
.badge.voie { color: var(--petrole); background: #E7EEEC; }
.badge.travailler { color: #A2701F; background: #F4E7CF; }
.badge.attaquer { color: var(--terracotta); background: var(--terracotta-tint); }
.piste-notion { height: 6px; border-radius: 3px; background: #E9E0D2; overflow: hidden; }
.piste-notion > i { display: block; height: 100%; border-radius: 3px; background: var(--terracotta); }
.cta-notion {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--terracotta-tint); border: none; border-radius: 14px;
  padding: 14px 16px; cursor: pointer;
  font: 600 15px var(--font-corps); color: var(--terracotta); line-height: 1.4;
}
.cta-notion svg { width: 19px; height: 19px; flex: none; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.liste-carte { background: var(--creme); border: 1px solid var(--bordure); border-radius: 16px; overflow: hidden; }
.seance-ligne {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid #EFE9DF;
  padding: 14px 16px; cursor: pointer; font-family: var(--font-corps);
}
.seance-ligne:last-child { border-bottom: none; }
.seance-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.seance-titre { font: 500 15px var(--font-corps); color: var(--encre); }
.seance-sous { font-size: 13px; color: var(--grege); }
.seance-ligne svg, .declic-carte svg.fleche { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--grege); stroke-width: 2; stroke-linecap: round; }
.declic-carte {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 16px;
  padding: 15px 16px; cursor: pointer; font-family: var(--font-corps);
}
.etincelle {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  background: var(--terracotta-tint); border-radius: 50%;
}
.etincelle svg { width: 18px; height: 18px; fill: var(--terracotta); }
.declic-carte .dc-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-titre { font-family: var(--font-titre); font-weight: 560; font-size: 17px; color: var(--encre); }
.dc-sous { font-size: 13px; line-height: 1.35; color: var(--grege); }

/* écran déclic ouvert */
.declic-corps { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 12px 16px calc(14px + var(--sous)); }
.declic-hero { display: flex; align-items: center; gap: 14px; }
.declic-hero .etincelle { width: 48px; height: 48px; }
.declic-hero .etincelle svg { width: 23px; height: 23px; }
.declic-hero h1 { font-family: var(--font-titre); font-weight: 560; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; }
.declic-hero p { font-size: 13px; color: var(--grege); margin-top: 3px; }
.declic-extrait {
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 16px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.declic-extrait .bulle { font-size: 14px; padding: 9px 12px; border-radius: 14px; }
.declic-extrait .bulle-eleve.moment {
  background: var(--terracotta-tint); color: var(--encre); font-weight: 600;
  border: 1.5px solid var(--terracotta);
}
.declic-point { background: #EFE7DA; border-radius: 16px; padding: 16px; font-size: 15px; line-height: 1.5; }

/* bannière déclic dans le chat (opt-in) */
.bandeau-declic {
  margin: 0 14px 4px; display: flex; align-items: center; gap: 10px;
  background: var(--terracotta-tint); border: 1.5px solid var(--terracotta);
  border-radius: 14px; padding: 10px 12px;
}
.bandeau-declic svg { width: 17px; height: 17px; flex: none; fill: var(--terracotta); }
.bandeau-declic span { flex: 1; font: 500 13.5px/1.35 var(--font-corps); color: var(--encre); }
.bandeau-declic button {
  flex: none; background: var(--terracotta); color: #fff; border: none; cursor: pointer;
  font: 600 13px var(--font-corps); border-radius: 999px; padding: 8px 13px;
}
.bandeau-declic.garde { border-color: var(--petrole); background: #DFE9E7; }
.bandeau-declic.garde svg { fill: var(--petrole); }

/* chip reprendre (accueil) */
.reprendre { display: flex; justify-content: center; }
.reprendre button {
  display: flex; align-items: center; gap: 7px;
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 999px;
  padding: 9px 14px; cursor: pointer;
  font: 500 13.5px var(--font-corps); color: var(--encre);
}
.reprendre svg { width: 15px; height: 15px; fill: none; stroke: var(--grege); stroke-width: 2; stroke-linecap: round; }

/* mes fiches */
.fiche-teaser {
  background: var(--creme); border: 1.5px dashed var(--bordure); border-radius: 16px;
  padding: 15px 16px; display: flex; flex-direction: column; gap: 8px;
}
.ft-tete { display: flex; align-items: center; gap: 9px; }
.ft-tete svg { width: 17px; height: 17px; fill: none; stroke: var(--grege); stroke-width: 2; }
.ft-tete b { font-family: var(--font-titre); font-weight: 560; font-size: 17px; color: var(--grege); }
.fiche-teaser p { font-size: 14px; line-height: 1.45; color: var(--encre); }
.fiche-teaser p b { color: var(--terracotta); }
.fiche-formules { display: flex; flex-direction: column; }
.fiche-formule { padding: 13px 16px; border-bottom: 1px solid #EFE9DF; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.fiche-formule:last-child { border-bottom: none; }
.fiche-formule b { font-size: 14px; }
.piege-carte {
  display: flex; align-items: flex-start; gap: 10px;
  background: #F4E7CF; border-radius: 14px; padding: 13px 15px;
  font-size: 14px; line-height: 1.45;
}
.piege-carte svg { width: 17px; height: 17px; flex: none; margin-top: 1px; fill: none; stroke: #A2701F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fiche-cta { margin-top: 8px; }

/* impression d'une fiche : la fiche seule, sur fond blanc */
@media print {
  body > *:not(#ecran-fiche), .coach-head button, .voile, .tiroir-voile { display: none !important; }
  #ecran-fiche { display: flex !important; }
  body, #ecran-fiche { background: #fff; }
}

/* ─────────── Écran coach ─────────── */
/* L'écran coach est STABLE (100dvh) : il NE se comprime PAS sous le clavier (façon
   ChatGPT/Claude). Seule la barre de saisie (.board-dock) remonte au-dessus du clavier,
   pilotée par --kb (visualViewport, app.js) via translateY. L'en-tête et l'énoncé
   épinglé restent en place, le board scrolle indépendamment dessous. */
#ecran-coach {
  padding: 0;
  position: fixed; left: 0; right: 0; top: 0;
  height: 100dvh;
  min-height: 0;                        /* neutralise le min-height:100dvh de .ecran */
  max-width: 640px; margin-inline: auto;
  overflow: hidden;
}
.coach-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: calc(12px + var(--sur)) 16px 12px;
  background: color-mix(in srgb, var(--sable) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(33, 30, 43, .07);
}
.btn-retour {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 999px;
  cursor: pointer; color: var(--encre);
}
.btn-retour svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.coach-head-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.badge-chapitre {
  font: 600 14px var(--font-corps); color: var(--encre);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge-profondeur { font-size: 12px; color: var(--grege); }

/* énoncé épinglé (toujours visible, réécrit en LaTeX) */
.enonce-epingle {
  position: sticky; top: calc(64px + var(--sur)); z-index: 4;
  margin: 10px 16px 0;
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 16px;
  padding: 11px 14px;
  box-shadow: 0 8px 18px -14px rgba(33, 30, 43, .35);
}
.ee-thumb {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: #E9DFD2; border-radius: 10px;
}
.ee-thumb svg { width: 16px; height: 16px; fill: none; stroke: var(--encre); stroke-width: 1.8; stroke-linecap: round; }
.ee-col { flex: 1; min-width: 0; }
.ee-label {
  display: block; font: 600 11px var(--font-corps); letter-spacing: .06em;
  text-transform: uppercase; color: var(--grege); margin-bottom: 2px;
}
.enonce-epingle { cursor: pointer; }
.enonce-epingle .enonce-texte { padding: 0; max-height: 88px; overflow: hidden; font-size: 14.5px; }
.enonce-epingle.ouverte .enonce-texte { max-height: 56dvh; overflow-y: auto; }
.ee-col { position: relative; }
.enonce-epingle.depasse:not(.ouverte) .ee-col::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  background: linear-gradient(transparent, var(--creme)); pointer-events: none;
}
.ee-chevron {
  width: 18px; height: 18px; flex: none; margin-top: 2px;
  fill: none; stroke: var(--grege); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s ease; visibility: hidden;
}
.enonce-epingle.depasse .ee-chevron { visibility: visible; }
.enonce-epingle.ouverte .ee-chevron { transform: rotate(180deg); }
.btn-panneau { color: var(--terracotta); }

/* barre de symboles maths (au-dessus du composeur) */
.symboles {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 6px 14px;
}
.symboles::-webkit-scrollbar { display: none; }
.symboles button {
  flex: none; min-width: 44px; height: 38px; padding: 0 13px;
  font: 500 16px "STIX Two Text", var(--font-titre); color: var(--encre);
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 12px;
  cursor: pointer;
}
.symboles button:active { background: var(--terracotta-tint); border-color: var(--terracotta); }

/* barre d'actions rapides (indice / plus simple), persistante au-dessus du composeur */
.barre-actions { display: flex; gap: 8px; padding: 8px 14px 2px; }
.chip-action {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: 600 13.5px var(--font-corps); color: var(--petrole);
  background: var(--creme); border: 1.5px solid var(--bordure);
}
.chip-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.chip-action:active { transform: translateY(1px); background: var(--terracotta-tint); border-color: var(--terracotta); color: var(--terracotta); }
.chip-action:disabled { opacity: .45; }

/* rappel discret quand on tente de coller dans la réponse (anti-triche) */
.anti-colle { padding: 2px 16px 0; font: 500 12.5px var(--font-corps); color: var(--terracotta); }

/* panneau latéral « Où tu en es » */
.panneau-voile { position: fixed; inset: 0; z-index: 45; background: rgba(33, 30, 43, .5); }
.panneau {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(320px, 84vw); background: var(--creme);
  border-radius: 24px 0 0 24px;
  padding: calc(56px + var(--sur)) 20px calc(24px + var(--sous));
  display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
}
.panneau-tete { display: flex; align-items: center; justify-content: space-between; }
.panneau-tete h2 { font: 600 18px var(--font-corps); }
.panneau-chapitre { font-family: var(--font-titre); font-weight: 560; font-size: 20px; line-height: 1.25; }
.panneau-label {
  font: 600 11px var(--font-corps); letter-spacing: .06em;
  text-transform: uppercase; color: var(--grege); margin-top: 6px;
}
.panneau-prerequis { display: flex; flex-direction: column; gap: 12px; }
.prerequis-ligne { display: flex; align-items: center; gap: 12px; font: 500 15px var(--font-corps); }
.prerequis-ligne .etat {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 2px solid var(--bordure); background: var(--creme);
}
.prerequis-ligne.acquis .etat { border-color: var(--petrole); background: radial-gradient(circle, var(--petrole) 42%, var(--creme) 46%); }
.prerequis-ligne.fragile .etat { border-color: var(--terracotta); background: radial-gradient(circle, var(--terracotta) 42%, var(--creme) 46%); }
.prerequis-ligne.fragile { color: var(--terracotta-fonce); font-weight: 600; }
.panneau-etapes { display: flex; flex-direction: column; gap: 10px; }
.etape-ligne {
  display: flex; align-items: center; gap: 12px;
  font: 500 15px var(--font-corps); line-height: 1.3;
  padding: 10px 12px; border-radius: 12px;
}
.etape-ligne.en-cours { background: var(--terracotta-tint); font-weight: 600; }
.etape-ligne.a-venir { color: var(--grege); }
.etape-rond { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--bordure); background: var(--creme); }
.etape-rond.courante { border-color: var(--terracotta); background: radial-gradient(circle, var(--terracotta) 42%, var(--creme) 46%); }
.etape-rond.faite { border: none; background: var(--petrole); display: grid; place-items: center; }
.etape-rond.faite svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
.etape-ligne .cadenas { width: 13px; height: 13px; vertical-align: -1px; fill: none; stroke: var(--grege); stroke-width: 2; }
.btn-rappel {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--creme); border: 1.5px dashed var(--bordure); border-radius: 14px;
  padding: 13px 15px; cursor: pointer;
  font: 600 14px var(--font-corps); color: var(--grege); text-align: left;
}
.btn-rappel svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--grege); stroke-width: 2; }
.rappel-carte {
  background: #EFE7DA; border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5;
}
.rappel-carte b { font-size: 15px; }
.panneau-note { font-size: 13.5px; line-height: 1.45; color: var(--grege); margin-top: auto; }

.enonce-carte {
  margin: 12px 16px 0;
  background: var(--creme); border: 1px solid rgba(33, 30, 43, .08); border-radius: 16px;
  padding: 12px 15px;
}
.enonce-carte summary {
  cursor: pointer; list-style: none;
  font: 600 13px var(--font-corps); color: color-mix(in srgb, var(--encre) 62%, transparent);
}
.enonce-carte summary::-webkit-details-marker { display: none; }
.enonce-carte summary::after { content: " ▾"; color: var(--grege); }
.enonce-carte[open] summary::after { content: " ▴"; }
.enonce-texte { padding-top: 8px; font-size: 15px; line-height: 1.6; overflow-x: auto; }

.fil { flex: 1; padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.bulle { max-width: 86%; padding: 12px 15px; border-radius: 18px; font-size: 15.5px; line-height: 1.55; overflow-wrap: break-word; }
.bulle .katex-display { margin: .5em 0; overflow-x: auto; }
.bulle-eleve { align-self: flex-end; background: var(--encre); color: var(--sable); border-bottom-right-radius: 6px; }
.bulle-coach {
  align-self: flex-start; background: var(--creme); color: var(--encre);
  border: 1px solid rgba(33, 30, 43, .08); border-bottom-left-radius: 6px;
}
.bulle-coach.reflechit { color: var(--grege); font-style: italic; }
.avatar-ligne { display: flex; align-items: flex-end; gap: 8px; align-self: flex-start; max-width: 92%; }
.avatar-ligne img { width: 26px; height: 26px; flex: none; margin-bottom: 2px; }
.avatar-ligne .bulle { max-width: 100%; }

.bandeau-tuteur {
  margin: 0 16px 10px;
  background: rgba(31, 78, 76, .1); border: 1px solid rgba(31, 78, 76, .25);
  color: var(--petrole); border-radius: 14px; padding: 12px 14px;
  font-size: 14px; line-height: 1.45;
}

.composeur {
  position: sticky; bottom: 0;
  display: flex; align-items: flex-end; gap: 9px;
  padding: 10px 14px calc(12px + var(--sous));
  background: color-mix(in srgb, var(--sable) 94%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(33, 30, 43, .07);
}
.btn-joindre {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 999px;
  cursor: pointer; color: color-mix(in srgb, var(--encre) 66%, transparent);
}
.btn-joindre.a-photo { border-color: var(--terracotta); color: var(--terracotta); }
.btn-joindre svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#saisie {
  flex: 1; min-height: 22px; max-height: 120px; overflow-y: auto;
  font: 500 15.5px/1.45 var(--font-corps); color: var(--encre);
  background: var(--creme); border: 1.5px solid var(--bordure);
  border-radius: 22px; padding: 11px 16px;
  white-space: pre-wrap; overflow-wrap: anywhere;
  -webkit-user-select: text; user-select: text;
}
#saisie:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(188, 90, 56, .13); }
/* placeholder du contenteditable (le champ est vraiment vide → :empty tient) */
#saisie:empty::before { content: attr(data-placeholder); color: var(--grege); pointer-events: none; }
#saisie.desactive { opacity: .55; }
.btn-envoyer {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: var(--terracotta); border: none; border-radius: 50%; cursor: pointer; color: #fff;
  box-shadow: 0 3px 0 var(--terracotta-fonce);
}
.btn-envoyer:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }
.btn-envoyer:disabled { opacity: .5; }
.btn-envoyer svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ─────────── Voile de chargement ─────────── */
.voile {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: color-mix(in srgb, var(--sable) 93%, transparent);
  backdrop-filter: blur(6px);
}
.voile-fox { animation: respire 1.6s ease-in-out infinite; }
@keyframes respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
#voile-texte { font: 500 15.5px var(--font-corps); color: color-mix(in srgb, var(--encre) 76%, transparent); }

/* ─────────── « Génère-moi un exercice » — dialogue guidé ─────────── */
.ecran-generer { display: flex; flex-direction: column; min-height: 100dvh; }
.gen-chat {
  flex: 1; display: flex; flex-direction: column; gap: 14px;
  padding: 18px 16px 32px; max-width: 640px; width: 100%; margin-inline: auto;
}
.gen-bulle { display: flex; align-items: flex-end; gap: 8px; align-self: flex-start; max-width: 92%; }
.gen-bulle img { flex: none; margin-bottom: 2px; }
.gen-bulle p {
  background: var(--creme); border: 1px solid rgba(33, 30, 43, .08);
  border-radius: 18px; border-bottom-left-radius: 6px;
  padding: 11px 15px; font: 500 15.5px/1.5 var(--font-corps); color: var(--encre);
}
.gen-reponse {
  align-self: flex-end; max-width: 86%;
  background: var(--petrole); color: #fff;
  border-radius: 18px; border-bottom-right-radius: 6px;
  padding: 11px 15px; font: 500 15px/1.45 var(--font-corps);
}
.gen-choix { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 34px; }
.gen-domaine {
  flex-basis: 100%; margin: 8px 0 2px;
  font: 600 12px/1.2 var(--font-corps); letter-spacing: .06em; text-transform: uppercase;
  color: var(--grege);
}
.gen-pill {
  background: var(--creme); border: 1.5px solid var(--bordure); border-radius: 999px;
  padding: 9px 15px; font: 500 14.5px/1.35 var(--font-corps); color: var(--encre);
  text-align: left; cursor: pointer; max-width: 100%;
  box-shadow: 0 2px 0 var(--bordure);
}
.gen-pill:active { transform: translateY(2px); box-shadow: 0 0 0 transparent; }
.gen-pill-accent { border-color: var(--terracotta); color: var(--terracotta); }

/* ─────────── Choix de classe (collège + lycée) ─────────── */
.groupe-classes {
  margin: 14px 0 6px;
  font: 600 12px/1.2 var(--font-corps); letter-spacing: .06em; text-transform: uppercase;
  color: var(--grege);
}
.groupe-classes:first-child { margin-top: 0; }
.classes-rangee { display: flex; gap: 8px; }
.classes-rangee .option-compacte {
  flex: 1; justify-content: center; padding: 13px 6px; text-align: center;
}

/* — le tableau vierge se présente (machine à écrire, curseur terracotta) — */
.board-vide {
  margin: 30px auto 0; max-width: 440px; text-align: center;
  font: italic 500 14px/1.5 var(--font-corps); color: var(--grege);
  min-height: 22px;
}
.bv-curseur {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  background: var(--terracotta); vertical-align: text-bottom;
  animation: bv-cligne 1.1s steps(1) infinite;
}
@keyframes bv-cligne { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bv-curseur { animation: none; } }

/* ─────────── L'ardoise ─────────── */
.ardoise-voile {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(33, 30, 43, .35);
  display: flex; align-items: flex-end;
}
.ardoise {
  width: 100%; height: 68dvh; max-width: 700px; margin-inline: auto;
  display: flex; flex-direction: column;
  background: var(--sable); border-radius: 22px 22px 0 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(33, 30, 43, .18);
}
.ardoise-tete { display: flex; align-items: center; gap: 10px; }
/* rappel de l'énoncé pendant qu'on dessine (cloné du fil, déjà rendu en LaTeX) */
.ardoise-enonce {
  margin-top: 8px; padding: 8px 12px; max-height: 18dvh; overflow-y: auto;
  font: 500 13.5px/1.45 var(--font-corps); color: var(--encre);
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 12px;
}
.ardoise-enonce:empty { display: none; }
.ardoise-titre { font: 600 17px var(--font-titre); color: var(--encre); }
.ardoise-outils { display: flex; gap: 6px; margin-left: auto; }
.btn-outil {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--creme); border: 1.5px solid var(--bordure); border-radius: 999px;
  cursor: pointer; color: color-mix(in srgb, var(--encre) 66%, transparent);
}
.btn-outil svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-outil.actif { border-color: var(--terracotta); color: var(--terracotta); background: var(--terracotta-tint); }
#ardoise-canvas {
  flex: 1; width: 100%; min-height: 0; margin: 10px 0;
  background: var(--creme); border: 1.5px solid var(--bordure); border-radius: 16px;
  touch-action: none;                      /* le doigt dessine, il ne scrolle pas */
  cursor: crosshair;
}
.ardoise-pied { display: flex; align-items: center; gap: 12px; }
.ardoise-note { flex: 1; font: 500 13px/1.4 var(--font-corps); color: var(--grege); }
.ardoise-pied .btn-etape { width: auto; flex: none; padding: 13px 26px; }

/* l'ardoise envoyée, dans le fil */
.bulle-ardoise { padding: 6px; }
.bulle-ardoise img {
  display: block; max-width: 100%; border-radius: 13px;
  background: var(--creme);
}
.bulle-ardoise p { padding: 8px 10px 4px; }

@media (prefers-reduced-motion: reduce) {
  .voile-fox { animation: none; }
  .btn-jalon, .btn-etape, .btn-auth, .btn-envoi-rond, .btn-envoyer { transition: none; }
}
@media (min-width: 700px) {
  #ecran-coach { border-inline: 1px solid rgba(33, 30, 43, .07); }
}

/* ─────────── Barre de navigation (bas) — capsule premium ─────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: calc(10px + var(--sous));
  z-index: 30; margin-inline: auto; width: min(360px, calc(100vw - 32px));
  display: flex; align-items: center; padding: 6px 8px;
  background: color-mix(in srgb, var(--creme) 90%, transparent);
  border: 1px solid var(--bordure); border-radius: 999px;
  box-shadow: 0 10px 26px -8px rgba(33, 30, 43, .28);
  backdrop-filter: blur(12px);
}
.tabbar .tab { flex: 1; display: flex; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; }
.tchip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 6px; border-radius: 15px; color: var(--grege);
  transition: background .15s ease, color .15s ease;
}
.tchip svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tlab { font: 600 10px var(--font-corps); letter-spacing: .01em; }
.tab.actif .tchip { color: var(--terracotta); background: var(--terracotta-tint); }
.tab:active .tchip { transform: translateY(1px); }

/* dégagement pour la barre sur les écrans à onglet (Récompenses et le détail de séance
   affichent aussi la capsule : sans ce dégagement leur contenu passe dessous) */
#ecran-home, #ecran-suivi, #ecran-fiches, #ecran-profil, #ecran-jeux,
#ecran-recompenses, #ecran-seance { padding-bottom: calc(92px + var(--sous)); }

.home-logo { font: 600 20px var(--font-titre); color: var(--encre); }

/* ─────────── Écran vide (Jeux à venir) ─────────── */
.ecran-vide { padding: calc(6px + var(--sur)) 0 calc(16px + var(--sous)); }
.vide-corps { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 0 32px; }
.vide-corps h2 { font: 560 22px var(--font-titre); color: var(--encre); }
.vide-corps p { font-size: 15px; line-height: 1.5; color: var(--grege); max-width: 300px; }

/* ─────────── Mon profil ─────────── */
.ecran-profil { padding: calc(6px + var(--sur)) 0 calc(16px + var(--sous)); }
.profil-corps { display: flex; flex-direction: column; gap: 20px; padding: 8px 20px 0; }
.profil-tete { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.profil-avatar { width: 96px; height: 96px; border-radius: 50%; background: #EDE2D2; display: grid; place-items: center; box-shadow: 0 8px 18px -10px rgba(33, 30, 43, .4); }
.profil-avatar img { display: block; }
.profil-nom { font: 600 26px var(--font-titre); color: var(--encre); letter-spacing: -.3px; }
.profil-classe { font: 500 14px var(--font-corps); color: var(--grege); }
.profil-objectif { font: 600 12.5px var(--font-corps); color: var(--terracotta-fonce); background: var(--terracotta-tint); padding: 6px 12px; border-radius: 999px; }
.profil-stats { display: flex; align-items: center; background: var(--creme); border: 1px solid var(--bordure); border-radius: 16px; padding: 14px 6px; }
.profil-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.profil-stat b { font: 600 22px var(--font-titre); color: var(--encre); }
.profil-stat span { font: 500 11.5px var(--font-corps); color: var(--grege); text-align: center; line-height: 1.25; }
.profil-stat + .profil-stat { border-left: 1px solid var(--bordure); }
.profil-label { margin: 0 0 -8px; }
.profil-reglages { background: var(--creme); border: 1px solid var(--bordure); border-radius: 16px; overflow: hidden; }
.reglage-item { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; cursor: pointer; padding: 14px 16px; font: 500 15px var(--font-corps); color: var(--encre); text-align: left; }
.reglage-item + .reglage-item { border-top: 1px solid var(--bordure); }
.reglage-item .ri-ico { font-size: 17px; width: 22px; text-align: center; flex: none; }
.reglage-item .ri-lbl { flex: 1; }
.reglage-item:disabled { cursor: default; color: color-mix(in srgb, var(--encre) 55%, transparent); }
.reglage-item.danger { color: var(--terracotta); font-weight: 600; }
.reglage-item.danger:active { background: var(--terracotta-tint); }
.ri-chev { color: var(--grege); font-size: 20px; line-height: 1; }

/* ─────────── Espace parent (côté enfant : inviter) ─────────── */
.ecran-espace-parent { padding: calc(6px + var(--sur)) 0 calc(16px + var(--sous)); }
.ep-corps { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 12px 24px 0; text-align: center; }
.ep-renard { position: relative; display: inline-block; margin-top: 4px; }
.ep-renard img { display: block; position: relative; z-index: 1; }
.ep-renard::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); width: 50px; height: 10px; border-radius: 50%; background: rgba(33,30,43,.16); filter: blur(3px); }
.ep-titre { font: 600 27px var(--font-titre); color: var(--encre); letter-spacing: -.3px; }
.ep-sous { font: 500 14.5px/1.45 var(--font-corps); color: var(--grege); max-width: 320px; }
.ep-carte-code { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--creme); border: 1px solid var(--bordure); border-radius: 18px; padding: 20px 16px; box-shadow: 0 8px 20px -14px rgba(33,30,43,.35); }
.ep-cc-label { font: 600 11.5px var(--font-corps); letter-spacing: .1em; color: var(--grege); }
.ep-code { font: 600 34px var(--font-titre); color: var(--terracotta); letter-spacing: .18em; }
.ep-expire { font: 500 12.5px var(--font-corps); color: var(--grege); }
.ep-corps .btn-etape { width: 100%; }
.ep-partager { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--creme); border: 1.5px solid var(--bordure); border-radius: 28px; padding: 15px; cursor: pointer; font: 600 16px var(--font-corps); color: var(--encre); }
.ep-partager svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ep-recompenses { width: 100%; text-align: left; margin-top: 4px; }
.ep-recomp-liste { display: flex; flex-direction: column; gap: 8px; }
.ep-recomp-item { display: flex; align-items: center; gap: 12px; background: var(--creme); border: 1px solid var(--bordure); border-radius: 14px; padding: 12px 14px; }
.ep-recomp-item .rc-pieces { flex: none; background: var(--terracotta-tint); color: var(--terracotta-fonce); font: 600 13px var(--font-corps); border-radius: 999px; padding: 5px 11px; }
.ep-recomp-item .rc-label { flex: 1; font: 500 14.5px var(--font-corps); color: var(--encre); }

/* ─────────── Choix du profil (entrée) ─────────── */
.ecran-choix { padding: 0; }
.choix-hero { flex: none; min-height: 32dvh; display: grid; place-items: center; padding-top: calc(20px + var(--sur)); background: radial-gradient(62% 52% at 50% 46%, #FBF3E8 0%, var(--sable) 100%); }
.choix-sheet { flex: 1; background: var(--creme); border-radius: 28px 28px 0 0; padding: 14px 20px calc(20px + var(--sous)); display: flex; flex-direction: column; gap: 16px; box-shadow: 0 -8px 24px rgba(33,30,43,.08); }
.choix-grabber { width: 40px; height: 5px; border-radius: 3px; background: var(--bordure); align-self: center; }
.eyebrow-ep { font: 600 11.5px var(--font-corps); letter-spacing: .1em; color: var(--grege); }
.choix-titre { font: 600 30px var(--font-titre); letter-spacing: -.4px; color: var(--encre); }
.choix-cartes { display: flex; flex-direction: column; gap: 12px; }
.choix-carte, .parent-carte { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: #fff; border: 1.5px solid var(--bordure); border-radius: 20px; padding: 16px; cursor: pointer; }
.choix-carte:active, .parent-carte:active { transform: translateY(1px); background: #fffdf9; }
.cc-ava { width: 60px; height: 60px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.cc-eleve { background: var(--terracotta-tint); } .cc-parent { background: #DFE9E7; }
.cc-tx, .pca-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-monde { font: 600 10.5px var(--font-corps); letter-spacing: .06em; }
.cc-t-eleve { color: var(--terracotta); } .cc-t-parent { color: var(--petrole); }
.cc-titre { font: 600 16.5px var(--font-corps); color: var(--encre); }
.cc-desc { font: 500 13px var(--font-corps); color: var(--grege); }
.cc-chev { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--grege); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ─────────── Parent — écrans (entrée / code / récompenses) ─────────── */
.ecran-parent { padding: calc(6px + var(--sur)) 0 calc(16px + var(--sous)); }
.parent-corps { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px 24px 0; text-align: center; }
.parent-titre { font: 600 28px var(--font-titre); letter-spacing: -.3px; color: var(--encre); }
.parent-sous { font: 500 14.5px/1.45 var(--font-corps); color: var(--grege); max-width: 330px; }
.parent-carte { text-align: left; }
.pca-ic { width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--terracotta-tint); display: grid; place-items: center; font-size: 22px; }
.pca-tx b { font: 600 16.5px var(--font-corps); color: var(--encre); }
.pca-tx span { font: 500 13px var(--font-corps); color: var(--grege); }
.pc-input { width: 100%; background: var(--creme); border: 1.5px solid var(--bordure); border-radius: 16px; padding: 16px 18px; font: 600 26px var(--font-titre); letter-spacing: .14em; text-align: center; color: var(--encre); text-transform: uppercase; }
.pc-input:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(188,90,56,.13); }
.pc-input::placeholder { color: var(--grege); letter-spacing: .06em; text-transform: none; font-weight: 500; }
.parent-corps .btn-etape { width: 100%; }
.pc-aide { font: 500 13px/1.45 var(--font-corps); color: var(--grege); background: #EFE7DA; border-radius: 12px; padding: 12px 14px; }

/* Parent — tableau de bord */
.ecran-parent-dash { padding-bottom: calc(16px + var(--sous)); }
.pd-enfant { display: flex; align-items: center; gap: 10px; }
.pd-ava { width: 40px; height: 40px; border-radius: 50%; background: #EDE2D2; display: grid; place-items: center; }
.pd-enfant strong { display: block; font: 600 19px var(--font-titre); color: var(--encre); }
.pd-enfant small { font: 500 12.5px var(--font-corps); color: var(--grege); }
.pd-lien { background: none; border: none; cursor: pointer; color: var(--grege); font: 600 13.5px var(--font-corps); text-decoration: underline; }
.pd-corps { display: flex; flex-direction: column; gap: 6px; padding: 4px 20px 0; }
.pd-corps .panneau-label { margin: 12px 0 4px; }
.pd-semaine { display: flex; gap: 10px; }
.pd-tuile { flex: 1; background: var(--creme); border: 1px solid var(--bordure); border-radius: 16px; padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.pd-tuile b { font: 600 22px var(--font-titre); color: var(--encre); }
.pd-tuile span { font-size: 11px; color: var(--grege); }
.pd-progression { background: var(--creme); border: 1px solid var(--bordure); border-radius: 16px; overflow: hidden; }
.pd-notion { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; }
.pd-notion + .pd-notion { border-top: 1px solid var(--bordure); }
.pd-notion .n-nom { font: 500 15px var(--font-corps); color: var(--encre); }
.pd-badge { font: 600 12px var(--font-corps); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.pd-badge.solide { background: #DFE9E7; color: var(--petrole); }
.pd-badge.voie { background: var(--terracotta-tint); color: var(--terracotta-fonce); }
.pd-badge.travailler, .pd-badge.attaquer { background: #ECE6DB; color: var(--grege); }
.pd-vide { font: 500 14px var(--font-corps); color: var(--grege); padding: 14px 15px; }

/* ═══════════ Espace parent — Accueil (dashboard, design « Espace parent Vulpi ») ═══════════ */
/* flex-direction:row EXPLICITE : sans ça, .ecran (base) impose column → le rail se
   retrouve empilé en haut et la feuille poussée dessous (au lieu de côte à côte) */
.ecran-pdash { max-width: none; margin: 0; padding: 0; display: flex; flex-direction: row; min-height: 100dvh; background: var(--sable); }
.pdash-rail { display: none; }                         /* rail = desktop only */
.pdash-feuille {
  flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
  background-color: var(--creme);
  background-image: linear-gradient(rgba(33, 30, 43, .04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(33, 30, 43, .04) 1px, transparent 1px);
  background-size: 26px 26px;
}
.pdash-topbar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + var(--sur)) 20px 12px;
  background: color-mix(in srgb, var(--creme) 92%, transparent);
  backdrop-filter: blur(6px); border-bottom: 1px solid rgba(154, 144, 134, .18);
}
.pdash-logo-m { display: inline-flex; align-items: center; gap: 8px; font: 600 20px var(--font-titre); color: var(--encre); }
.pdash-logo-m img { display: block; }
.pdash-ava {
  width: 38px; height: 38px; flex: none; border-radius: 50%; border: none; cursor: pointer;
  background: var(--petrole); color: #F7F2E8; display: grid; place-items: center; font: 600 15px var(--font-corps);
}
.pdash-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 20px calc(40px + var(--sous)); max-width: 1080px; width: 100%; margin: 0 auto; }
.pdash-h1 { font: 600 30px/1 var(--font-titre); color: var(--encre); margin: 0; letter-spacing: -.3px; }

/* cette semaine + streak */
.pdash-semaine {
  margin-top: 20px; border: 1px solid rgba(154, 144, 134, .26); border-radius: 22px;
  background: #FBF8F2; box-shadow: 0 10px 24px -18px rgba(33, 30, 43, .28); padding: 20px;
}
.pds-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pds-flamme {
  width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(150deg, #F0C38C, #E48B4B); box-shadow: 0 6px 14px -6px rgba(188, 90, 56, .6);
}
.pds-flamme svg { width: 23px; height: 23px; fill: #FCF4E9; }
.pds-titres { display: flex; flex-direction: column; min-width: 0; }
.pds-eyebrow { font: 600 11px var(--font-corps); letter-spacing: 1.4px; text-transform: uppercase; color: #a79b8b; }
.pds-titre { font: 600 20px var(--font-titre); color: var(--encre); margin-top: 2px; }
.pds-streak { display: flex; gap: 6px; flex-basis: 100%; justify-content: space-between; margin-top: 16px; }
.pds-jour {
  width: 33px; height: 33px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font: 600 13px var(--font-corps); background: #EDE6D8; color: #b3a998;
}
.pds-jour.fait { background: var(--terracotta); color: #F7F2E8; }
.pds-jour.auj { background: rgba(188, 90, 56, .08); border: 2px dashed var(--terracotta); color: var(--terracotta); }
.pds-stats { display: flex; gap: 10px; margin-top: 18px; }
.pds-stat { flex: 1; min-width: 0; border: 1px solid rgba(154, 144, 134, .24); border-radius: 16px; background: #fff; padding: 13px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pds-stat-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.pds-stat-ic svg { width: 21px; height: 21px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pds-stat-ic.exo { background: #F3E1D4; } .pds-stat-ic.exo svg { stroke: var(--terracotta); }
.pds-stat-ic.sea { background: #D9E4E0; } .pds-stat-ic.sea svg { stroke: var(--petrole); }
.pds-stat-ic.dec { background: #F0E4C8; } .pds-stat-ic.dec svg { stroke: #C89A3A; }
.pds-stat b { display: block; font: 600 24px var(--font-titre); color: var(--encre); line-height: 1; }
.pds-stat span { display: block; font: 400 12.5px var(--font-corps); color: #6b625a; margin-top: 3px; }

/* bannière premium */
.pdash-premium {
  margin-top: 16px; border: 1px solid rgba(188, 90, 56, .28); border-radius: 22px;
  background: linear-gradient(102deg, #F6E6D2, #EFD2B4); box-shadow: 0 12px 26px -18px rgba(188, 90, 56, .5);
  padding: 22px 20px;
}
.pdash-premium h2 { font: 600 21px var(--font-titre); color: var(--encre); margin: 0; }
.pdash-premium p { font: 400 14.5px/1.45 var(--font-corps); color: #8a6a4e; margin: 8px 0 16px; }
.btn-premium {
  width: 100%; height: 52px; border: none; border-radius: 15px; cursor: pointer;
  background: var(--terracotta); color: #F7F2E8; font: 600 14.5px var(--font-corps); letter-spacing: .5px;
  box-shadow: 0 5px 0 0 #8f3f24; transition: transform .06s, box-shadow .06s;
}
.btn-premium:active { transform: translateY(4px); box-shadow: 0 1px 0 0 #8f3f24; }

.pdash-label { font: 600 11px var(--font-corps); letter-spacing: 1.5px; color: #a79b8b; margin: 26px 0 12px; }

/* ta famille — mobile : carte horizontale ; desktop : carte HAUTE verticale (cf. maquette) */
.pdash-famille { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pdf-carte { display: flex; align-items: center; gap: 16px; border: 1px solid rgba(154, 144, 134, .26); border-radius: 20px; background: #FBF8F2; padding: 16px 18px; }
.pdf-ava { width: 56px; height: 56px; flex: none; border-radius: 50%; background: #EEDCCF; color: #8a4d33; display: grid; place-items: center; font: 600 20px var(--font-titre); }
.pdf-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.pdf-nom { font: 600 19px var(--font-titre); color: var(--encre); }
.pdf-classe { font: 400 13px var(--font-corps); color: var(--grege); margin-top: 1px; }
.pdf-pastille { margin-top: 8px; font: 600 12px var(--font-corps); color: #5f574d; background: #EDE6D8; padding: 5px 11px; border-radius: 999px; }
.pdf-premium { flex: none; background: none; border: none; cursor: pointer; color: var(--terracotta); font: 600 20px var(--font-corps); }
.pdf-premium-tx { display: none; }                 /* mobile : juste la flèche */
.pdf-ajouter { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1.5px dashed rgba(154, 144, 134, .55); border-radius: 20px; background: transparent; cursor: pointer; padding: 16px; }
.pdf-ajouter-ic { display: grid; place-items: center; }
.pdf-ajouter-ic svg { width: 20px; height: 20px; fill: none; stroke: #8a8175; stroke-width: 1.8; stroke-linecap: round; }
.pdf-ajouter-tx { font: 500 15px var(--font-corps); color: #6b625a; }

/* séances récentes */
.pdash-recent { display: flex; flex-direction: column; gap: 10px; }
.pdr-ligne { display: flex; align-items: center; gap: 13px; border: 1px solid rgba(154, 144, 134, .26); border-radius: 16px; background: #FBF8F2; padding: 14px 16px; }
.pdr-ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; }
.pdr-ic svg { width: 20px; height: 20px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pdr-ic.exo, .pdr-ic.seance { background: #F3E1D4; } .pdr-ic.exo svg, .pdr-ic.seance svg { stroke: var(--terracotta); }
.pdr-ic.declic { background: #F0E4C8; } .pdr-ic.declic svg { stroke: #C89A3A; }
.pdr-tx { flex: 1; min-width: 0; }
.pdr-titre { display: block; font: 600 15px var(--font-corps); color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdr-sous { display: block; font: 400 12.5px var(--font-corps); color: #6b625a; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdr-quand { font: 400 12px var(--font-corps); color: var(--grege); flex: none; }
.pdr-vide { font: 400 14px var(--font-corps); color: var(--grege); text-align: center; padding: 24px; }

/* bottom nav (mobile) */
.pdash-botnav {
  flex: none; display: flex; justify-content: space-around; padding: 10px 20px calc(14px + var(--sous));
  background: color-mix(in srgb, var(--creme) 94%, transparent); backdrop-filter: blur(6px);
  border-top: 1px solid rgba(154, 144, 134, .2);
}
.pdash-botnav button { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; color: var(--grege); font: 500 11px var(--font-corps); }
.pdash-botnav button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pdash-botnav button.actif { color: var(--terracotta); font-weight: 600; }

/* ── vues de l'espace parent (Accueil / Mes élèves / Facturation) ── */
.pdash-vue[hidden] { display: none; }

/* Facturation — carte du plan actuel */
.fact-plan {
  margin-top: 20px; display: flex; flex-direction: column; gap: 16px;
  border: 1px solid rgba(154, 144, 134, .26); border-radius: 22px; background: #FBF8F2;
  box-shadow: 0 10px 24px -18px rgba(33, 30, 43, .28); padding: 20px;
}
.fact-plan-haut { display: flex; align-items: center; gap: 14px; }
.fact-plan-ic { width: 48px; height: 48px; flex: none; border-radius: 14px; background: #EEDCCF; display: grid; place-items: center; }
.fact-plan-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fact-plan-tx { flex: 1; min-width: 0; }
.fact-plan-tete { display: flex; align-items: center; gap: 9px; }
.fact-plan-tete h2 { font: 600 22px var(--font-titre); color: var(--encre); margin: 0; }
.fact-badge { font: 600 10.5px var(--font-corps); color: #5f574d; background: #EDE6D8; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.fact-plan-tx p { font: 400 13.5px var(--font-corps); color: #6b625a; margin: 5px 0 0; }

/* Facturation — offre premium (carte dégradée) */
.fact-offre {
  border: 1px solid rgba(188, 90, 56, .28); border-radius: 22px;
  background: linear-gradient(102deg, #F6E6D2, #EFD2B4); box-shadow: 0 12px 26px -18px rgba(188, 90, 56, .5);
  padding: 22px 20px;
}
.fact-prix { display: flex; align-items: baseline; gap: 7px; }
.fact-prix-montant { font: 600 28px var(--font-titre); color: var(--encre); }
.fact-prix-periode { font: 400 14px var(--font-corps); color: #8a6a4e; }
.fact-avantages { list-style: none; margin: 16px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fact-avantages li { display: inline-flex; align-items: center; gap: 8px; font: 500 14px var(--font-corps); color: #5f4a38; }
.fact-avantages svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--terracotta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Facturation — historique (état vide) */
.fact-histo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 1px dashed rgba(154, 144, 134, .5); border-radius: 20px; padding: 34px 20px; text-align: center;
}
.fact-histo-ic { width: 46px; height: 46px; flex: none; border-radius: 13px; background: #F3EDE1; display: grid; place-items: center; }
.fact-histo-ic svg { width: 22px; height: 22px; fill: none; stroke: #a79b8b; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fact-histo p { font: 400 14px/1.5 var(--font-corps); color: #6b625a; margin: 0; max-width: 420px; }

/* desktop : rail latéral + feuille flottante */
@media (min-width: 900px) {
  .pdash-topbar, .pdash-botnav { display: none; }
  /* rail : padding-right 0 + overflow visible + z-index → l'onglet actif DÉBORDE sur la
     feuille (le même geste Aristotle que l'espace élève) */
  .pdash-rail { display: flex; flex-direction: column; width: 258px; flex: none; padding: 30px 0 22px 20px; position: relative; z-index: 2; overflow: visible; }
  .pdash-logo { display: flex; align-items: center; gap: 10px; padding: 0 10px 32px; font: 600 24px var(--font-titre); color: var(--encre); }
  .pdash-logo img { display: block; }
  .pdash-nav { display: flex; flex-direction: column; gap: 6px; }
  .pdash-navitem { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 15px; background: none; border: none; cursor: pointer; text-align: left; font: 500 15.5px var(--font-corps); color: #5f574d; transition: background .18s; }
  .pdash-navitem svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .pdash-navitem:hover { background: rgba(33, 30, 43, .05); }
  .pdash-navitem.actif { background: #FCFAF6; box-shadow: 0 5px 16px -8px rgba(33, 30, 43, .28); color: var(--encre); margin-right: -26px; padding-right: 40px; position: relative; z-index: 2; }
  .pdash-navitem.actif svg { stroke: var(--terracotta); }
  .pdash-flex { flex: 1; }
  /* la carte compte reste DANS le rail (ne déborde pas) : marge droite conservée */
  .pdash-compte { display: flex; align-items: center; gap: 12px; margin-right: 20px; padding: 11px 12px; border-radius: 16px; background: #FCFAF6; border: none; cursor: pointer; text-align: left; box-shadow: 0 6px 18px -10px rgba(33, 30, 43, .3); }
  .pdash-compte-tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .pdash-compte-tx b { font: 600 15px var(--font-corps); color: var(--encre); }
  .pdash-compte-tx small { font: 400 12.5px var(--font-corps); color: var(--grege); }
  .pdash-feuille { margin: 14px 14px 14px 0; border-radius: 26px; min-height: 0; height: calc(100dvh - 28px); box-shadow: 0 10px 30px -18px rgba(33, 30, 43, .25); overflow: hidden; position: relative; z-index: 1; }
  .pdash-corps { padding: 42px 48px 52px; }
  .pdash-h1 { font-size: 40px; }
  .pdash-semaine, .pdash-premium { margin-top: 26px; }
  .pds-titre { font-size: 24px; }
  .pds-jour { width: 34px; height: 34px; }
  .pds-tete { flex-wrap: nowrap; }
  .pds-streak { flex-basis: auto; justify-content: flex-start; margin-top: 0; margin-left: auto; }
  .pds-stats { gap: 16px; }
  .pds-stat { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 18px 20px; }
  .pds-stat-ic { display: grid; width: 46px; height: 46px; border-radius: 13px; }
  .pds-stat-ic svg { width: 23px; height: 23px; }
  .pds-stat b { font-size: 32px; }
  .pds-stat span { font-size: 14.5px; margin-top: 2px; }
  .pdash-premium { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; }
  .pdash-premium h2 { font-size: 26px; } .pdash-premium p { margin: 10px 0 0; font-size: 16px; }
  .btn-premium { width: auto; flex: none; height: 54px; padding: 0 26px; font-size: 15px; }

  /* Ta famille — cartes HAUTES verticales (avatar centré + nom + classe + pastille + premium) */
  .pdash-famille { grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
  .pdf-carte { flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 28px 20px 24px; }
  .pdf-ava { width: 78px; height: 78px; font-size: 26px; }
  .pdf-info { flex: none; align-items: center; }
  .pdf-nom { font-size: 22px; margin-top: 16px; }
  .pdf-classe { font-size: 14px; margin-top: 3px; }
  .pdf-pastille { margin-top: 16px; font-size: 13.5px; padding: 7px 15px; }
  .pdf-premium { margin-top: 16px; font-size: 15px; }
  .pdf-premium-tx { display: inline; }
  .pdf-ajouter { flex-direction: column; justify-content: center; gap: 12px; border-radius: 22px; padding: 28px 20px; }
  .pdf-ajouter-ic { width: 52px; height: 52px; border-radius: 50%; background: #FBF8F2; border: 1px solid rgba(154, 144, 134, .3); }
  .pdf-ajouter-ic svg { width: 24px; height: 24px; }
  .pdf-ajouter-tx { font-size: 16px; }

  /* Facturation — desktop : carte plan en rangée, offre en rangée, historique large */
  .fact-plan { flex-direction: row; align-items: center; gap: 26px; margin-top: 30px; padding: 30px 34px; border-radius: 24px; }
  .fact-plan-haut { flex: 1; gap: 26px; }
  .fact-plan-ic { width: 64px; height: 64px; border-radius: 18px; }
  .fact-plan-ic svg { width: 30px; height: 30px; }
  .fact-plan-tete h2 { font-size: 28px; }
  .fact-badge { font-size: 12px; padding: 5px 12px; letter-spacing: .5px; }
  .fact-plan-tx p { font-size: 16px; margin-top: 8px; }
  .fact-plan-cta { padding: 0 30px; }
  .fact-offre { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 34px; border-radius: 24px; }
  .fact-prix-montant { font-size: 34px; }
  .fact-prix-periode { font-size: 15px; }
  .fact-avantages { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; margin: 16px 0 0; }
  .fact-avantages li { font-size: 15px; }
  .fact-avantages svg { width: 18px; height: 18px; }
  .fact-histo { padding: 52px 24px; gap: 14px; border-radius: 22px; }
  .fact-histo-ic { width: 52px; height: 52px; border-radius: 14px; }
  .fact-histo-ic svg { width: 24px; height: 24px; }
  .fact-histo p { font-size: 16px; }
}

/* ══ Parent — vue Récompenses (base mobile) ══ */
.prc-tete { display: flex; flex-direction: column; gap: 0; }
.prc-intro { font: 400 14px/1.5 var(--font-corps); color: #6b625a; margin: 10px 0 0; }
.prc-eleve { display: none; }                          /* sélecteur élève : desktop only */

/* la pièce dorée « V » (Fredoka, cohérente avec le wordmark) */
.prc-coin { width: 20px; height: 20px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 30%, #F6C560, #D89A2C); color: #7a4e12; font: 600 10px "Fredoka SemiBold", var(--font-corps); }
.prc-coin-xl { width: 56px; height: 56px; font-size: 24px; box-shadow: 0 8px 18px -6px rgba(180, 120, 20, .6), inset 0 2px 3px rgba(255, 255, 255, .5); }

/* cagnotte */
.prc-cagnotte { margin-top: 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 1px solid rgba(188, 90, 56, .28); border-radius: 22px; background: linear-gradient(102deg, #F6E6D2, #EFD2B4);
  box-shadow: 0 12px 26px -18px rgba(188, 90, 56, .5); padding: 18px 20px; }
.prc-cagnotte-tx { flex: 1; min-width: 0; }
.prc-cagnotte-eyebrow { display: block; font: 600 11px var(--font-corps); letter-spacing: 1.3px; text-transform: uppercase; color: #a1794a; }
.prc-cagnotte-total { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; font: 500 14px var(--font-corps); color: #8a6a4e; }
.prc-cagnotte-total b { font: 600 30px var(--font-titre); color: var(--encre); line-height: 1; }
.prc-cagnotte-droite { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex-basis: 100%; }
.prc-cagnotte-prochaine { font: 600 13.5px var(--font-corps); color: var(--encre); }
.prc-politique { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 0;
  font: 600 12.5px var(--font-corps); color: var(--terracotta); }
.prc-politique svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* grille des récompenses (mobile : colonne ; desktop : 2 colonnes) */
.prc-grille { display: flex; flex-direction: column; gap: 12px; }

/* carte récompense */
.prc-carte { text-align: left; width: 100%; border: 1px solid rgba(188, 90, 56, .3); border-radius: 20px; background: #FBF8F2;
  box-shadow: 0 10px 24px -18px rgba(33, 30, 43, .3); padding: 18px; cursor: pointer; font-family: inherit; transition: transform .1s; }
.prc-carte:active { transform: scale(.99); }
.prc-carte.obtenue { border-color: rgba(31, 78, 76, .3); background: rgba(31, 78, 76, .06); cursor: default; }
.prc-carte.obtenue:active { transform: none; }
.prc-carte-haut { display: flex; align-items: center; gap: 13px; }
.prc-ic { width: 46px; height: 46px; flex: none; border-radius: 13px; background: #F3E1D4; display: grid; place-items: center; }
.prc-ic svg { width: 23px; height: 23px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.prc-carte.obtenue .prc-ic { background: #CFE0DB; }
.prc-carte.obtenue .prc-ic svg { stroke: var(--petrole); }
.prc-carte-tx { flex: 1; min-width: 0; }
.prc-nom { display: block; font: 600 17px var(--font-titre); color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prc-carte .prc-cout { display: inline-flex; align-items: center; gap: 5px; flex: none; font: 600 14px var(--font-corps); color: #a1794a; }
.prc-badge { flex: none; font: 600 11.5px var(--font-corps); color: var(--petrole); background: rgba(31, 78, 76, .14); padding: 4px 10px; border-radius: 999px; }
.prc-barre { margin-top: 14px; height: 9px; border-radius: 999px; background: #EDE6D8; overflow: hidden; }
.prc-carte.obtenue .prc-barre { background: #CFE0DB; }
.prc-barre i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #E48B4B, #BC5A38); transition: width .5s ease; }
.prc-carte.obtenue .prc-barre i { background: var(--petrole); }
.prc-pied { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 10px; }
.prc-pied-g { font: 400 12px var(--font-corps); color: #8a6a4e; }
.prc-pied-d { font: 600 12px var(--font-corps); color: var(--terracotta); }
.prc-pied-d.loin { font-weight: 400; color: var(--grege); }

/* carte pointillée « nouvelle récompense » */
.prc-nouvelle { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  border: 1.5px dashed rgba(154, 144, 134, .55); border-radius: 20px; background: transparent; cursor: pointer; padding: 18px; font-family: inherit; }
.prc-nouvelle:hover { background: rgba(33, 30, 43, .03); }
.prc-nouvelle-ic { display: inline-grid; place-items: center; }
.prc-nouvelle-ic svg { width: 20px; height: 20px; fill: none; stroke: #8a8175; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prc-nouvelle-tx { font: 500 15px var(--font-corps); color: #6b625a; }

/* ══ modale « Nouvelle récompense » : bottom-sheet (mobile) / modale centrée (desktop) ══ */
.prm-overlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(33, 30, 43, .5); }
.prm-overlay[hidden] { display: none; }
.prm-carte { position: relative; background: #FCFAF6; border-radius: 26px 26px 0 0; padding: 20px 20px calc(26px + var(--sous));
  box-shadow: 0 -20px 50px -20px rgba(33, 30, 43, .4); animation: prmMonte .32s ease both; max-height: 92dvh; overflow-y: auto; }
@keyframes prmMonte { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.prm-poignee { display: block; width: 44px; height: 5px; border-radius: 3px; background: #DAD2C6; margin: 0 auto 16px; }
.prm-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prm-tete h2 { font: 600 23px var(--font-titre); color: var(--encre); margin: 0; }
.prm-sous { font: 400 13.5px var(--font-corps); color: #6b625a; margin: 6px 0 0; }
.prm-fermer { width: 36px; height: 36px; flex: none; border: none; border-radius: 12px; background: #F1EADD; color: #6b625a; cursor: pointer; display: grid; place-items: center; }
.prm-fermer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.prm-lab { display: block; font: 600 12.5px var(--font-corps); color: #5f574d; margin: 18px 0 7px; }
.prm-input { width: 100%; height: 50px; border: 1px solid rgba(154, 144, 134, .4); border-radius: 13px; background: #fff; padding: 0 15px; font: 400 15px var(--font-corps); color: var(--encre); }
.prm-input:focus { outline: none; border-color: var(--terracotta); }
.prm-icones { display: flex; flex-wrap: wrap; gap: 9px; }
.prm-ic { width: 46px; height: 46px; flex: none; border-radius: 12px; background: #F1EADD; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; }
.prm-ic svg { width: 22px; height: 22px; fill: none; stroke: #8a8175; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.prm-ic.actif { background: #F3E1D4; border-color: var(--terracotta); }
.prm-ic.actif svg { stroke: var(--terracotta); }
.prm-cout { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prm-cout-champ { display: flex; align-items: center; gap: 8px; height: 50px; border: 1px solid rgba(154, 144, 134, .4); border-radius: 13px; background: #fff; padding: 0 14px; flex: none; }
.prm-cout-champ:focus-within { border-color: var(--terracotta); }
.prm-cout-champ .prc-coin { width: 22px; height: 22px; font-size: 10px; }
.prm-cout-input { width: 70px; border: none; background: none; font: 600 17px var(--font-corps); color: var(--encre); }
.prm-cout-input:focus { outline: none; }
.prm-presets { display: flex; gap: 6px; }
.prm-presets button { font: 500 12.5px var(--font-corps); color: #8a6a4e; background: #F1EADD; border: none; padding: 8px 11px; border-radius: 999px; cursor: pointer; }
.prm-presets button.actif { color: #F7F2E8; background: var(--terracotta); }
.prm-note { font: 400 12px/1.45 var(--font-corps); color: #9a9086; margin: 9px 0 0; }
.prm-actions { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.prm-suppr { flex: none; padding: 0 16px; height: 52px; border: 1.5px solid rgba(188, 90, 56, .4); border-radius: 15px; background: transparent; color: var(--terracotta); font: 600 14px var(--font-corps); cursor: pointer; margin-right: auto; }
.prm-annuler { flex: none; padding: 0 20px; height: 52px; border: 1.5px solid rgba(154, 144, 134, .5); border-radius: 15px; background: transparent; color: #5f574d; font: 600 14px var(--font-corps); cursor: pointer; }
.prm-creer { flex: 1; height: 52px; border: none; border-radius: 15px; background: var(--terracotta); color: #F7F2E8; font: 600 15px var(--font-corps); letter-spacing: .5px; cursor: pointer; box-shadow: 0 5px 0 0 #8f3f24; transition: transform .06s, box-shadow .06s; }
.prm-creer:active { transform: translateY(4px); box-shadow: 0 1px 0 0 #8f3f24; }
@media (prefers-reduced-motion: reduce) { .prm-carte { animation: none; } .prc-barre i { transition: none; } }

/* ══ Parent — vue Mes élèves (base mobile) ══ */
.pel-banniere { margin-top: 18px; border: 1px solid rgba(188, 90, 56, .28); border-radius: 22px; background: linear-gradient(102deg, #F6E6D2, #EFD2B4); box-shadow: 0 12px 26px -18px rgba(188, 90, 56, .5); padding: 20px; }
.pel-ban-tx { display: flex; align-items: center; gap: 12px; }
.pel-ban-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: #FCF4E9; display: grid; place-items: center; box-shadow: 0 4px 12px -6px rgba(188, 90, 56, .5); }
.pel-ban-ic svg { width: 22px; height: 22px; fill: var(--terracotta); }
.pel-ban-titres h2 { font: 600 18px var(--font-titre); color: var(--encre); margin: 0; }
.pel-ban-long { display: none; }                        /* titre long : desktop only */
.pel-ban-titres p { display: none; font: 400 15px var(--font-corps); color: #8a6a4e; margin: 6px 0 0; }
.pel-ban-cta { margin-top: 16px; }

/* cartes élèves */
.pel-eleves { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
.pel-carte { position: relative; border: 1px solid rgba(154, 144, 134, .26); border-radius: 20px; background: #FBF8F2; box-shadow: 0 10px 24px -18px rgba(33, 30, 43, .3); padding: 20px; }
.pel-edit { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: none; border-radius: 10px; background: #F1EADD; color: #8a8175; display: grid; place-items: center; cursor: pointer; }
.pel-edit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pel-carte-haut { display: flex; align-items: center; gap: 14px; }
.pel-ava { width: 54px; height: 54px; flex: none; border-radius: 50%; background: #EEDCCF; color: #8a4d33; display: grid; place-items: center; font: 600 20px var(--font-titre); }
.pel-nom { font: 600 20px var(--font-titre); color: var(--encre); }
.pel-niveau { font: 400 13px var(--font-corps); color: var(--grege); margin-top: 1px; }
.pel-tuiles { display: flex; gap: 10px; margin-top: 16px; }
.pel-tuile { flex: 1; display: flex; flex-direction: column; gap: 2px; border: 1px solid rgba(154, 144, 134, .24); border-radius: 13px; background: #fff; padding: 11px 13px; }
.pel-tuile-lab { font: 400 11.5px var(--font-corps); color: var(--grege); }
.pel-tuile-val { display: inline-flex; align-items: center; gap: 5px; font: 600 18px var(--font-titre); color: var(--encre); }
.pel-tuile-val .prc-coin { width: 16px; height: 16px; font-size: 8px; }
.pel-ajouter { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: 1.5px dashed rgba(154, 144, 134, .55); border-radius: 20px; background: transparent; cursor: pointer; padding: 16px; font-family: inherit; }
.pel-ajouter:hover { background: rgba(33, 30, 43, .03); }
.pel-ajouter-ic { display: inline-grid; place-items: center; }
.pel-ajouter-ic svg { width: 20px; height: 20px; fill: none; stroke: #8a8175; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pel-ajouter-tx { font: 500 15px var(--font-corps); color: #6b625a; }

/* filtres + séances récentes */
.pel-recent-de { display: none; }                       /* « DE PRÉNOM » : desktop only */
.pel-filtres { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; }
.pel-filtre { flex: none; border: 1px solid rgba(154, 144, 134, .3); border-radius: 11px; background: #FBF8F2; color: #5f574d; font: 500 13px var(--font-corps); padding: 8px 15px; cursor: pointer; }
.pel-filtre.actif { background: var(--terracotta); border-color: var(--terracotta); color: #F7F2E8; font-weight: 600; }
.pel-recent { display: flex; flex-direction: column; gap: 10px; }
.pel-seance { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; font-family: inherit; border: 1px solid rgba(154, 144, 134, .26); border-radius: 16px; background: #FBF8F2; padding: 14px 16px; cursor: pointer; transition: transform .1s; }
.pel-seance:active { transform: scale(.99); }
.pel-seance-ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; }
.pel-seance-ic svg { width: 20px; height: 20px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pel-seance-ic.seance { background: #F3E1D4; } .pel-seance-ic.seance svg { stroke: var(--terracotta); }
.pel-seance-ic.exo { background: #D9E4E0; } .pel-seance-ic.exo svg { stroke: var(--petrole); }
.pel-seance-ic.declic { background: #F0E4C8; } .pel-seance-ic.declic svg { stroke: #C89A3A; }
.pel-seance-tx { flex: 1; min-width: 0; }
.pel-seance-titre { display: block; font: 600 15px var(--font-corps); color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pel-seance-sous { display: block; font: 400 12.5px var(--font-corps); color: #6b625a; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pel-seance-quand { font: 400 12px var(--font-corps); color: var(--grege); flex: none; }

/* compte rendu d'une séance (réutilise la modale .prm-* — desktop centré / mobile sheet) */
.cr-tete-tx { display: flex; align-items: center; gap: 13px; min-width: 0; }
.cr-ic { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; }
.cr-ic svg { width: 23px; height: 23px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cr-ic.seance { background: #F3E1D4; } .cr-ic.seance svg { stroke: var(--terracotta); }
.cr-ic.exo { background: #D9E4E0; } .cr-ic.exo svg { stroke: var(--petrole); }
.cr-ic.declic { background: #F0E4C8; } .cr-ic.declic svg { stroke: #C89A3A; }
.cr-tete-titres { min-width: 0; }
.cr-bilan { margin: 18px 0 0; font: 400 15px/1.6 var(--font-corps); color: #3f3a44; }
.cr-bilan[hidden] { display: none; }
.cr-bilan .bilan-attente { color: var(--grege); font-style: italic; }
.cr-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.cr-tuile { display: flex; flex-direction: column; gap: 3px; border: 1px solid rgba(154, 144, 134, .24); border-radius: 13px; background: #fff; padding: 12px 14px; }
.cr-tuile-lab { font: 400 11.5px var(--font-corps); color: var(--grege); }
.cr-tuile-val { font: 600 16px var(--font-corps); color: var(--encre); }
.cr-tuile-val.ok { color: var(--petrole); }
.cr-tuile-val.encours { color: var(--grege); }
.cr-tuile-val.petrole { color: var(--petrole); }
.cr-note { display: flex; align-items: flex-start; gap: 7px; margin: 18px 0 0; font: 400 12.5px/1.45 var(--font-corps); color: #9a9086; }
.cr-note::before { content: "🔒"; flex: none; }

/* ══ Récompenses (élève) — base mobile ══ */
@keyframes coinFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
.rec-corps { flex: 1; display: flex; flex-direction: column; padding: 20px 20px calc(24px + var(--sous)); overflow-y: auto; }
.rec-titre { display: none; }                          /* titre : desktop only (mobile = home-head) */

/* héro cagnotte (fond encre + pièce flottante) */
.rec-hero { position: relative; overflow: hidden; border-radius: 24px; background: linear-gradient(120deg, #2A2636, #211E2B); box-shadow: 0 18px 40px -22px rgba(33, 30, 43, .7); padding: 24px 22px; }
.rec-hero-glow { position: absolute; right: -30px; top: -30px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(214, 154, 44, .28), transparent 70%); }
.rec-hero-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rec-coin-xl { width: 78px; height: 78px; flex: none; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #F6C560, #D89A2C); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px -8px rgba(180, 120, 20, .8), inset 0 3px 4px rgba(255, 255, 255, .55); font: 600 34px "Fredoka SemiBold", var(--font-corps); color: #7a4e12; animation: coinFloat 4s ease-in-out infinite; }
.rec-hero-tx { display: flex; flex-direction: column; align-items: center; }
.rec-hero-eyebrow { font: 600 11px var(--font-corps); letter-spacing: 1.5px; text-transform: uppercase; color: #C9A76A; margin-top: 14px; }
.rec-hero-total { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font: 500 16px var(--font-corps); color: #C9A76A; }
.rec-hero-total b { font: 600 40px var(--font-titre); color: #F7F2E8; line-height: 1; }
.rec-hero-proch { width: 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; }
.rec-hero-proch[hidden] { display: none; }
.rec-proch-lab { font: 400 13px var(--font-corps); color: #9a9086; }
.rec-proch-nom { font: 600 15px var(--font-titre); color: #F7F2E8; text-align: right; }
.rec-proch-barre { grid-column: 1 / -1; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; margin-top: 9px; }
.rec-proch-barre i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F6C560, #E48B4B); transition: width .5s ease; }
.rec-proch-reste { grid-column: 1 / -1; font: 600 12.5px var(--font-corps); color: #F6C560; text-align: right; margin-top: 7px; }

.rec-intro { font: 400 14px/1.5 var(--font-corps); color: #6b625a; margin: 16px 0 0; }
.rec-label { font: 600 11px var(--font-corps); letter-spacing: 1.5px; color: #a79b8b; margin: 24px 0 12px; }
.rec-vide { font: 400 14px var(--font-corps); color: var(--grege); text-align: center; padding: 20px; }

/* boutique : mobile = liste en lignes (grille d'aires ic|nom+dist|cout puis barre) */
.rec-boutique { display: flex; flex-direction: column; gap: 12px; }
.rec-carte { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic nom cout" "ic dist cout" "bar bar bar"; align-items: center; column-gap: 13px; border: 1px solid rgba(154, 144, 134, .26); border-radius: 20px; background: #FBF8F2; box-shadow: 0 10px 24px -18px rgba(33, 30, 43, .3); padding: 16px; }
.rec-carte-ic { grid-area: ic; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; }
.rec-carte-ic svg { width: 23px; height: 23px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rec-carte-ic.tint0 { background: #F3E1D4; } .rec-carte-ic.tint0 svg { stroke: var(--terracotta); }
.rec-carte-ic.tint1 { background: #D9E4E0; } .rec-carte-ic.tint1 svg { stroke: var(--petrole); }
.rec-carte-ic.tint2 { background: #F0E4C8; } .rec-carte-ic.tint2 svg { stroke: #C89A3A; }
.rec-carte-nom { grid-area: nom; font: 600 17px var(--font-titre); color: var(--encre); align-self: end; }
.rec-carte-dist { grid-area: dist; font: 400 12.5px var(--font-corps); color: var(--grege); margin-top: 1px; align-self: start; }
.rec-carte-dist.proche { font-weight: 600; color: var(--terracotta); }
.rec-carte-cout { grid-area: cout; display: inline-flex; align-items: center; gap: 5px; font: 600 14px var(--font-corps); color: #a1794a; }
.rec-carte-cout .prc-coin { width: 18px; height: 18px; font-size: 9px; }
.rec-carte-barre { grid-area: bar; height: 8px; border-radius: 999px; background: #EDE6D8; overflow: hidden; margin-top: 13px; }
.rec-carte-barre i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #E48B4B, #BC5A38); transition: width .5s ease; }

/* déjà gagnées (pétrole) */
.rec-gagnees { display: flex; flex-direction: column; gap: 12px; }
.rec-gagnee { display: flex; align-items: center; gap: 13px; border: 1px solid rgba(31, 78, 76, .3); border-radius: 18px; background: rgba(31, 78, 76, .06); padding: 14px 16px; }
.rec-gagnee-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: #CFE0DB; display: grid; place-items: center; }
.rec-gagnee-ic svg { width: 21px; height: 21px; fill: none; stroke: var(--petrole); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rec-gagnee-nom { font: 600 16px var(--font-titre); color: var(--encre); }
.rec-gagnee-quand { font: 400 12.5px var(--font-corps); color: #6b625a; margin-top: 1px; }
@media (prefers-reduced-motion: reduce) { .rec-coin-xl { animation: none; } .rec-carte-barre i, .rec-proch-barre i { transition: none; } }

/* ══ Récompenses (élève) — desktop (APRÈS la base pour la cascade) ══ */
@media (min-width: 900px) {
  .rec-corps { padding: 42px 48px 52px; }
  .rec-titre { display: block; font: 600 40px/1 var(--font-titre); color: var(--encre); margin: 0; letter-spacing: -.3px; }
  .rec-hero { margin-top: 28px; border-radius: 26px; padding: 36px 40px; box-shadow: 0 20px 44px -22px rgba(33, 30, 43, .7); }
  .rec-hero-glow { right: -40px; top: -40px; width: 220px; height: 220px; }
  .rec-hero-in { flex-direction: row; align-items: center; text-align: left; gap: 28px; }
  .rec-coin-xl { width: 96px; height: 96px; font-size: 44px; }
  .rec-hero-tx { flex: 1; align-items: flex-start; }
  .rec-hero-eyebrow { margin-top: 0; font-size: 12px; letter-spacing: 1.6px; }
  .rec-hero-total { margin-top: 6px; gap: 12px; font-size: 20px; }
  .rec-hero-total b { font-size: 52px; }
  .rec-hero-proch { width: auto; margin-top: 0; padding-top: 0; padding-left: 28px; border-top: none; border-left: 1px solid rgba(255, 255, 255, .12); align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
  .rec-proch-lab { font-size: 14px; }
  .rec-proch-nom { font-size: 20px; text-align: left; }
  .rec-proch-barre { width: 220px; margin-top: 4px; }
  .rec-proch-reste { font-size: 13px; text-align: left; margin-top: 0; }
  .rec-intro { font-size: 15px; margin-top: 20px; }
  .rec-label { font-size: 12px; letter-spacing: 1.6px; margin: 36px 0 16px; }
  .rec-boutique { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
  .rec-carte { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; border-radius: 22px; box-shadow: 0 12px 26px -18px rgba(33, 30, 43, .3); }
  .rec-carte-nom, .rec-carte-dist { align-self: center; }
  .rec-carte-ic { width: 72px; height: 72px; border-radius: 20px; }
  .rec-carte-ic svg { width: 34px; height: 34px; }
  .rec-carte-nom { font-size: 20px; margin-top: 16px; }
  .rec-carte-cout { margin-top: 8px; font-size: 16px; }
  .rec-carte-cout .prc-coin { width: 20px; height: 20px; font-size: 10px; }
  .rec-carte-barre { width: 100%; margin-top: 16px; height: 9px; }
  .rec-carte-dist { margin-top: 8px; font-size: 12.5px; }
  .rec-gagnees { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .rec-gagnee { padding: 16px 20px; }
  .rec-gagnee-ic { width: 44px; height: 44px; }
}

/* Récompenses — desktop (placé APRÈS le bloc de base pour gagner la cascade) */
@media (min-width: 900px) {
  .prc-tete { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 20px; }
  .prc-intro { font-size: 16px; max-width: 560px; margin-top: 14px; }
  .prc-eleve { display: flex; align-items: center; gap: 8px; flex: none; padding: 10px 8px 10px 14px; border: 1px solid rgba(154, 144, 134, .28); border-radius: 14px; background: #FBF8F2; }
  .prc-eleve-lab { font: 400 13px var(--font-corps); color: var(--grege); }
  .prc-eleve-nom { font: 600 14px var(--font-corps); color: var(--encre); background: #EEDCCF; padding: 5px 12px; border-radius: 10px; }
  .prc-cagnotte { margin-top: 28px; gap: 26px; padding: 26px 32px; border-radius: 24px; flex-wrap: nowrap; }
  .prc-coin-xl { width: 70px; height: 70px; font-size: 30px; }
  .prc-cagnotte-eyebrow { font-size: 12px; }
  .prc-cagnotte-total { font-size: 17px; }
  .prc-cagnotte-total b { font-size: 40px; }
  .prc-cagnotte-droite { flex-basis: auto; align-items: flex-end; text-align: right; margin-left: auto; }
  .prc-cagnotte-prochaine { font-size: 17px; }
  .prc-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .prc-carte { padding: 22px 24px; border-radius: 22px; box-shadow: 0 12px 26px -18px rgba(33, 30, 43, .3); }
  .prc-ic { width: 52px; height: 52px; border-radius: 15px; }
  .prc-ic svg { width: 26px; height: 26px; }
  .prc-nom { font-size: 20px; }
  .prc-carte .prc-cout { font-size: 15px; gap: 6px; }
  .prc-barre { height: 10px; margin-top: 18px; }
  .prc-pied { margin-top: 9px; }
  .prc-pied-g, .prc-pied-d { font-size: 13px; }
  .prc-nouvelle { flex-direction: column; gap: 12px; border-radius: 22px; padding: 22px; min-height: 158px; }
  .prc-nouvelle-ic { width: 50px; height: 50px; border-radius: 50%; background: #FBF8F2; border: 1px solid rgba(154, 144, 134, .3); }
  .prc-nouvelle-ic svg { width: 24px; height: 24px; }
  .prc-nouvelle-tx { font-size: 16px; }

  /* modale centrée + fond flouté (desktop) */
  .prm-overlay { justify-content: center; align-items: center; background: rgba(33, 30, 43, .45); backdrop-filter: blur(3px); }
  .prm-carte { width: 560px; max-width: calc(100vw - 48px); border-radius: 26px; padding: 34px 36px 30px; box-shadow: 0 40px 80px -30px rgba(33, 30, 43, .6); }
  .prm-poignee { display: none; }
  .prm-tete h2 { font-size: 28px; }
  .prm-sous { font-size: 15px; margin-top: 8px; }
  .prm-lab { font-size: 13px; margin: 22px 0 8px; }
  .prm-input { height: 52px; border-radius: 14px; font-size: 16px; padding: 0 16px; }
  .prm-icones { gap: 10px; }
  .prm-ic { width: 48px; height: 48px; border-radius: 13px; }
  .prm-ic svg { width: 24px; height: 24px; }
  .prm-cout-champ { height: 52px; border-radius: 14px; gap: 10px; padding: 0 16px; }
  .prm-cout-champ .prc-coin { width: 24px; height: 24px; font-size: 11px; }
  .prm-cout-input { font-size: 18px; }
  .prm-presets button { font-size: 13px; padding: 8px 13px; }
  .prm-actions { gap: 12px; margin-top: 30px; }
  .prm-suppr, .prm-annuler { height: 54px; border-radius: 16px; font-size: 15px; }
  .prm-creer { height: 54px; border-radius: 16px; }
}

/* Mes élèves — desktop (placé APRÈS le bloc de base pour gagner la cascade) */
@media (min-width: 900px) {
  .pel-banniere { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 32px; border-radius: 24px; }
  .pel-ban-tx { gap: 18px; }
  .pel-ban-ic { width: 52px; height: 52px; border-radius: 15px; }
  .pel-ban-ic svg { width: 26px; height: 26px; }
  .pel-ban-titres h2 { font-size: 25px; }
  .pel-ban-court { display: none; }
  .pel-ban-long { display: inline; }
  .pel-ban-titres p { display: block; }
  .pel-ban-cta { margin-top: 0; }
  .pel-eleves { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
  .pel-carte { padding: 26px; border-radius: 22px; box-shadow: 0 12px 26px -18px rgba(33, 30, 43, .3); transition: transform .16s, box-shadow .16s; }
  .pel-carte:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(33, 30, 43, .4); }
  .pel-edit { top: 18px; right: 18px; width: 34px; height: 34px; }
  .pel-edit svg { width: 16px; height: 16px; }
  .pel-carte-haut { gap: 16px; }
  .pel-ava { width: 64px; height: 64px; font-size: 24px; }
  .pel-nom { font-size: 24px; }
  .pel-niveau { font-size: 14px; margin-top: 2px; }
  .pel-tuiles { gap: 10px; margin-top: 20px; }
  .pel-tuile { border-radius: 14px; padding: 12px 14px; gap: 3px; }
  .pel-tuile-lab { font-size: 12.5px; }
  .pel-tuile-val { font-size: 20px; }
  .pel-tuile-val .prc-coin { width: 18px; height: 18px; font-size: 9px; }
  .pel-ajouter { flex-direction: column; gap: 12px; border-radius: 22px; padding: 26px; min-height: 190px; }
  .pel-ajouter-ic { width: 52px; height: 52px; border-radius: 50%; background: #FBF8F2; border: 1px solid rgba(154, 144, 134, .3); }
  .pel-ajouter-ic svg { width: 24px; height: 24px; }
  .pel-ajouter-tx { font-size: 16px; }
  .pel-recent-de { display: inline; }
  .pel-filtres { gap: 10px; margin-bottom: 18px; }
  .pel-filtre { border-radius: 12px; padding: 9px 18px; font-size: 14px; }
  .pel-recent { gap: 12px; }
  .pel-seance { gap: 16px; border-radius: 18px; padding: 18px 22px; transition: transform .16s, box-shadow .16s; }
  .pel-seance:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(33, 30, 43, .4); }
  .pel-seance-ic { width: 44px; height: 44px; border-radius: 12px; }
  .pel-seance-ic svg { width: 22px; height: 22px; }
  .pel-seance-titre { font-size: 17px; }
  .pel-seance-sous { font-size: 14px; margin-top: 2px; }
  .pel-seance-quand { font-size: 14px; }
}

/* ══ Réglages / profil élève — base mobile ══ */
.set-corps { flex: 1; display: flex; flex-direction: column; padding: 20px 20px calc(24px + var(--sous)); overflow-y: auto; }
.set-titre { display: none; }                          /* titre : desktop only (mobile = home-head) */

/* carte profil (mobile : centrée verticale) */
.set-profil { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid rgba(154, 144, 134, .26); border-radius: 22px; background: #FBF8F2; box-shadow: 0 10px 24px -18px rgba(33, 30, 43, .28); padding: 24px 20px; }
.set-avatar { width: 72px; height: 72px; flex: none; border-radius: 20px; background: #EEDCCF; color: #8a4d33; display: grid; place-items: center; font: 600 26px var(--font-titre); }
.set-profil-tx { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }
.set-nom { font: 600 24px var(--font-titre); color: var(--encre); margin-top: 12px; }
.set-email { font: 400 13.5px var(--font-corps); color: #6b625a; margin-top: 3px; word-break: break-word; }
.set-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: none; font: 600 12px var(--font-corps); color: var(--petrole); background: rgba(31, 78, 76, .12); padding: 5px 11px; border-radius: 999px; cursor: default; }
.set-badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.set-badge.lier { color: var(--terracotta); background: rgba(188, 90, 56, .12); cursor: pointer; }
.set-modifier { width: 100%; height: 46px; margin-top: 16px; border: 1.5px solid rgba(154, 144, 134, .5); border-radius: 13px; background: transparent; color: #5f574d; font: 600 14px var(--font-corps); cursor: pointer; }
.set-modifier:hover { background: rgba(33, 30, 43, .04); }

/* stats (mobile : 3 tuiles nombre+label, sans icône) */
.set-stats { display: flex; gap: 10px; margin-top: 14px; }
.set-stat { flex: 1; min-width: 0; border: 1px solid rgba(154, 144, 134, .24); border-radius: 14px; background: #FBF8F2; padding: 13px 10px; text-align: center; }
.set-stat-ic { display: none; }
.set-stat b { display: block; font: 600 22px var(--font-titre); color: var(--encre); line-height: 1; }
.set-stat span:last-child { display: block; font: 400 11.5px var(--font-corps); color: #6b625a; margin-top: 4px; }

/* labels + badge Bientôt + zone désactivée */
.set-label { display: flex; align-items: center; gap: 8px; font: 600 11px var(--font-corps); letter-spacing: 1.5px; color: #a79b8b; margin: 22px 0 12px; }
.set-bientot { letter-spacing: 0; text-transform: none; font: 600 10.5px var(--font-corps); color: var(--terracotta); background: rgba(188, 90, 56, .12); padding: 3px 8px; border-radius: 999px; }
.set-off { opacity: .55; filter: grayscale(.15); pointer-events: none; }

/* personnaliser renard (désactivé) */
.set-renard { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; border: 1px solid rgba(188, 90, 56, .28); border-radius: 22px; background: linear-gradient(120deg, #FBF8F2, #F6EADB); box-shadow: 0 10px 24px -18px rgba(33, 30, 43, .3); padding: 20px; }
.set-renard-ava { width: 64px; height: 64px; flex: none; border-radius: 18px; background: #211E2B; display: grid; place-items: center; }
.set-renard-ava img { width: 50px; height: 50px; object-fit: contain; display: block; }
.set-renard-tx { min-width: 0; }
.set-renard-titre { font: 600 18px var(--font-titre); color: var(--encre); }
.set-renard-tx p { font: 400 13px/1.45 var(--font-corps); color: #6b625a; margin: 4px 0 0; }
.set-renard-cta { grid-column: 1 / -1; width: 100%; margin-top: 4px; }

/* police + voix */
.set-duo { display: flex; flex-direction: column; gap: 16px; }
.set-bloc { border: 1px solid rgba(154, 144, 134, .26); border-radius: 18px; background: #FBF8F2; padding: 18px; }
.set-bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-bloc-titre { display: inline-flex; align-items: center; gap: 8px; font: 600 11px var(--font-corps); letter-spacing: 1.4px; color: #a79b8b; }
.set-toggle { display: flex; gap: 6px; margin-top: 12px; padding: 4px; border-radius: 14px; background: #EDE6D8; }
.set-toggle button { flex: 1; border: none; background: transparent; color: #6b625a; font: 500 14px var(--font-corps); padding: 10px 0; border-radius: 11px; cursor: pointer; }
.set-toggle button.actif { background: #FCFAF6; color: var(--encre); font-weight: 600; box-shadow: 0 3px 8px -4px rgba(33, 30, 43, .3); }
.set-voix-changer { height: 34px; padding: 0 13px; border: 1.5px solid rgba(154, 144, 134, .5); border-radius: 10px; background: transparent; color: #5f574d; font: 600 12.5px var(--font-corps); cursor: pointer; }
.set-voix { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.set-voix-play { width: 38px; height: 38px; flex: none; border: none; border-radius: 50%; background: var(--terracotta); color: #F7F2E8; display: grid; place-items: center; cursor: pointer; }
.set-voix-play svg { width: 15px; height: 15px; }
.set-voix-tx { flex: 1; min-width: 0; }
.set-voix-nom { font: 500 14px var(--font-corps); color: var(--encre); margin-bottom: 7px; }
.set-voix-barre { height: 6px; border-radius: 999px; background: #EDE6D8; overflow: hidden; }
.set-voix-barre i { display: block; width: 38%; height: 100%; background: var(--terracotta); border-radius: 999px; }

/* signaler un bug + déconnexion */
.set-bug { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; border: 1px solid rgba(154, 144, 134, .26); border-radius: 18px; background: #FBF8F2; padding: 16px; cursor: pointer; font-family: inherit; transition: transform .16s, box-shadow .16s; }
.set-bug:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(33, 30, 43, .4); }
.set-bug-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: #F3E1D4; display: grid; place-items: center; }
.set-bug-ic svg { width: 21px; height: 21px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.set-bug-tx { flex: 1; min-width: 0; }
.set-bug-tx b { display: block; font: 600 16px var(--font-titre); color: var(--encre); }
.set-bug-tx small { display: block; font: 400 12.5px var(--font-corps); color: #6b625a; margin-top: 1px; }
.set-bug-chev { width: 20px; height: 20px; flex: none; fill: none; stroke: #9a9086; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.set-deco { align-self: center; margin: 24px auto 8px; border: none; background: none; color: var(--grege); font: 600 14px var(--font-corps); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ══ Modale Modifier le profil ══ */
.mp-avatar-row { margin-top: 6px; }
.mp-avatar { width: 60px; height: 60px; border-radius: 17px; font-size: 22px; }
.mp-lecture { display: flex; align-items: center; height: 50px; border: 1px solid rgba(154, 144, 134, .35); border-radius: 13px; background: #F3EDE3; padding: 0 15px; font: 400 15px var(--font-corps); color: #6b625a; }
.mp-select-wrap { position: relative; }
.mp-select { width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; }
.mp-select-chev { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: #8a8175; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mp-erreur, .mb-erreur { font: 500 13px var(--font-corps); color: #c0442b; margin: 12px 0 0; }
.mp-erreur[hidden], .mb-erreur[hidden] { display: none; }

/* ══ Modale Signaler un bug ══ */
.mb-vue[hidden] { display: none; }
.mb-tete-tx { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mb-tete-ic { width: 46px; height: 46px; flex: none; border-radius: 13px; background: #F3E1D4; display: grid; place-items: center; }
.mb-tete-ic svg { width: 23px; height: 23px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mb-zones { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-zones button { border: none; background: #F1EADD; color: #5f574d; font: 500 13.5px var(--font-corps); padding: 9px 15px; border-radius: 11px; cursor: pointer; }
.mb-zones button.actif { background: var(--terracotta); color: #F7F2E8; font-weight: 600; }
.mb-desc { width: 100%; min-height: 110px; resize: vertical; border: 1px solid rgba(154, 144, 134, .4); border-radius: 14px; background: #fff; padding: 13px 15px; font: 400 15px/1.5 var(--font-corps); color: var(--encre); }
.mb-desc:focus { outline: none; border-color: var(--terracotta); }
.mb-capture { display: flex; align-items: center; gap: 11px; margin-top: 12px; border: 1.5px dashed rgba(154, 144, 134, .5); border-radius: 13px; padding: 13px 15px; cursor: pointer; }
.mb-capture svg { width: 20px; height: 20px; flex: none; fill: none; stroke: #8a8175; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mb-capture-tx { font: 500 13.5px var(--font-corps); color: #6b625a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-opt { color: #9a9086; }
.mb-capture.rempli { border-style: solid; border-color: rgba(31, 78, 76, .4); }
.mb-capture.rempli svg { stroke: var(--petrole); }
.prm-creer[aria-busy="true"] { opacity: .7; cursor: default; }
.mb-succes { text-align: center; padding: 10px 0 4px; }
.mb-succes-ic { width: 60px; height: 60px; border-radius: 50%; background: rgba(31, 78, 76, .12); display: inline-grid; place-items: center; }
.mb-succes-ic svg { width: 30px; height: 30px; fill: none; stroke: var(--petrole); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mb-succes h2 { font: 600 24px var(--font-titre); color: var(--encre); margin: 16px 0 0; }
.mb-succes p { font: 400 15px var(--font-corps); color: #6b625a; margin: 8px 0 20px; }
.mb-ok { width: 100%; }

/* Police du tableau — mode dyslexie : plus d'air (interlettrage/interligne) sur le tableau */
:root.police-dyslexie .board-mode,
:root.police-dyslexie .seance-board { letter-spacing: .045em; word-spacing: .08em; line-height: 1.75; }

/* ══ Réglages / profil élève — desktop ══ */
@media (min-width: 900px) {
  .set-corps { padding: 42px 48px 52px; }
  .set-titre { display: block; font: 600 40px/1 var(--font-titre); color: var(--encre); margin: 0; letter-spacing: -.3px; }
  .set-profil { flex-direction: row; align-items: center; text-align: left; gap: 26px; margin-top: 28px; border-radius: 24px; padding: 28px 32px; }
  .set-avatar { width: 82px; height: 82px; border-radius: 22px; font-size: 30px; }
  .set-profil-tx { flex: 1; align-items: flex-start; }
  .set-nom { font-size: 32px; margin-top: 0; line-height: 1.05; }
  .set-email { font-size: 15px; margin-top: 5px; }
  .set-modifier { width: auto; flex: none; height: 48px; padding: 0 22px; margin-top: 0; border-radius: 14px; font-size: 14.5px; }
  .set-stats { gap: 16px; margin-top: 18px; }
  .set-stat { display: flex; align-items: center; gap: 14px; text-align: left; border-radius: 18px; padding: 18px 20px; }
  .set-stat-ic { display: grid; width: 44px; height: 44px; flex: none; border-radius: 12px; place-items: center; }
  .set-stat-ic svg { width: 22px; height: 22px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .set-stat-ic.sea { background: #D9E4E0; } .set-stat-ic.sea svg { stroke: var(--petrole); }
  .set-stat-ic.dec { background: #F0E4C8; } .set-stat-ic.dec svg { stroke: #C89A3A; }
  .set-stat-ic.pie { background: radial-gradient(circle at 34% 30%, #F6C560, #D89A2C); box-shadow: inset 0 2px 3px rgba(255, 255, 255, .5); }
  .set-stat-ic.pie .prc-coin { width: 100%; height: 100%; box-shadow: none; font-size: 18px; }
  .set-stat b { font-size: 26px; }
  .set-stat span:last-child { font-size: 13.5px; margin-top: 3px; }
  .set-label { font-size: 12px; letter-spacing: 1.6px; margin: 34px 0 16px; }
  .set-renard { gap: 26px; border-radius: 24px; padding: 26px 30px; grid-template-columns: auto 1fr auto; }
  .set-renard-ava { width: 96px; height: 96px; border-radius: 24px; }
  .set-renard-ava img { width: 74px; height: 74px; }
  .set-renard-titre { font-size: 22px; }
  .set-renard-tx p { font-size: 14.5px; margin-top: 6px; }
  .set-renard-cta { grid-column: auto; width: auto; flex: none; height: 52px; padding: 0 26px; margin-top: 0; }
  .set-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
  .set-bloc { border-radius: 22px; padding: 24px 26px; }
  .set-bloc-titre { font-size: 12px; }
  .set-toggle { width: fit-content; }
  .set-toggle button { flex: none; padding: 9px 20px; }
  .set-bug { gap: 16px; border-radius: 20px; padding: 20px 24px; }
  .set-bug-ic { width: 46px; height: 46px; border-radius: 13px; }
  .set-bug-ic svg { width: 23px; height: 23px; }
  .set-bug-tx b { font-size: 18px; }
  .set-bug-tx small { font-size: 14px; margin-top: 2px; }
  .set-bug-chev { width: 22px; height: 22px; }
}

/* ══ Réglages parent (#pv-reglages) — base mobile ══ */
.set-avatar.petrole { background: var(--petrole); color: #F7F2E8; }
.preg-profil { display: flex; align-items: center; gap: 16px; margin-top: 20px; border: 1px solid rgba(154, 144, 134, .26); border-radius: 22px; background: #FBF8F2; box-shadow: 0 10px 24px -18px rgba(33, 30, 43, .28); padding: 18px 20px; }
.preg-profil .set-avatar { width: 58px; height: 58px; border-radius: 17px; font-size: 22px; }
.preg-profil-tx { flex: 1; min-width: 0; }
.preg-nom { font: 600 22px var(--font-titre); color: var(--encre); }
.preg-email { font: 400 13px var(--font-corps); color: #6b625a; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preg-modifier { flex: none; height: 40px; padding: 0 16px; border: 1.5px solid rgba(154, 144, 134, .5); border-radius: 12px; background: transparent; color: #5f574d; font: 600 13px var(--font-corps); cursor: pointer; }
.preg-modifier:hover { background: rgba(33, 30, 43, .05); }
.preg-liste { border: 1px solid rgba(154, 144, 134, .26); border-radius: 18px; background: #FBF8F2; overflow: hidden; }
.preg-ligne { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.preg-ligne-tx { flex: 1; min-width: 0; }
.preg-ligne-tx b { display: block; font: 600 14.5px var(--font-corps); color: var(--encre); }
.preg-ligne-tx small { display: block; font: 400 12px var(--font-corps); color: #6b625a; margin-top: 1px; }
.preg-sep { height: 1px; background: rgba(154, 144, 134, .2); margin: 0 18px; }
.preg-switch { width: 46px; height: 27px; flex: none; border: none; border-radius: 999px; background: #DBD3C6; position: relative; cursor: pointer; padding: 0; transition: background .18s; }
.preg-switch i { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #FCFAF6; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: left .18s; }
.preg-switch[aria-checked="true"] { background: var(--terracotta); }
.preg-switch[aria-checked="true"] i { left: 22px; }
.preg-compte-ligne { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; border: none; background: none; padding: 15px 18px; cursor: pointer; font-family: inherit; }
.preg-compte-ligne:hover { background: rgba(33, 30, 43, .02); }
.preg-compte-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; background: #F3E1D4; display: grid; place-items: center; }
.preg-compte-ic svg { width: 19px; height: 19px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.preg-compte-lab { flex: 1; font: 600 14.5px var(--font-corps); color: var(--encre); }
.preg-compte-chev { width: 18px; height: 18px; flex: none; fill: none; stroke: #9a9086; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.preg-deco { width: 100%; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 9px; height: 50px; border: 1.5px solid rgba(188, 90, 56, .4); border-radius: 15px; background: transparent; color: var(--terracotta); font: 600 14.5px var(--font-corps); cursor: pointer; }
.preg-deco:hover { background: rgba(188, 90, 56, .07); }
.preg-deco svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* modale « Modifier le profil » : prénom en lecture seule (mode élève) + niveau masquable (mode parent) */
.prm-input[readonly] { background: #F3EDE3; color: #6b625a; cursor: default; }
#mp-niveau-row[hidden] { display: none; }

@media (min-width: 900px) {
  .preg-profil { gap: 22px; padding: 26px 30px; margin-top: 28px; border-radius: 24px; }
  .preg-profil .set-avatar { width: 72px; height: 72px; border-radius: 20px; font-size: 26px; }
  .preg-nom { font-size: 28px; line-height: 1.05; }
  .preg-email { font-size: 15px; margin-top: 4px; }
  .preg-modifier { height: 46px; padding: 0 22px; border-radius: 14px; font-size: 14px; }
  .preg-liste { border-radius: 20px; }
  .preg-ligne { gap: 16px; padding: 20px 24px; }
  .preg-ligne-tx b { font-size: 16px; }
  .preg-ligne-tx small { font-size: 13.5px; margin-top: 2px; }
  .preg-sep { margin: 0 24px; }
  .preg-switch { width: 50px; height: 29px; }
  .preg-switch i { width: 23px; height: 23px; }
  .preg-switch[aria-checked="true"] i { left: 24px; }
  .preg-compte-ligne { gap: 16px; padding: 18px 24px; }
  .preg-compte-ic { width: 40px; height: 40px; }
  .preg-compte-ic svg { width: 20px; height: 20px; }
  .preg-compte-lab { font-size: 16px; }
  .preg-deco { width: fit-content; height: 52px; padding: 0 24px; border-radius: 16px; font-size: 15px; margin-top: 24px; }
}

/* ══ CoinCounter — compteur de pièces persistant (pilule 1b terracotta), écrans ÉLÈVE ══ */
.coin-counter { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 17px 0 6px; border-radius: 999px; background: var(--terracotta); box-shadow: 0 4px 0 0 #8f3f24; perspective: 220px; user-select: none; }
.coin-counter[data-size="compact"] { height: 38px; gap: 7px; padding: 0 14px 0 5px; box-shadow: 0 3px 0 0 #8f3f24; }
.cc-coin { position: relative; width: 33px; height: 33px; flex: none; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #F8CF6E, #E3A733 62%, #C4881F); box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, .7), inset 0 -2px 3px rgba(120, 74, 10, .45), 0 0 0 2px rgba(252, 250, 246, .35); display: grid; place-items: center; }
.coin-counter[data-size="compact"] .cc-coin { width: 28px; height: 28px; }
.cc-v { font: 600 16px "Fredoka SemiBold", var(--font-corps); color: #7a4e12; line-height: 1; }
.coin-counter[data-size="compact"] .cc-v { font-size: 14px; }
.cc-nb { font: 600 18px "Fredoka SemiBold", var(--font-corps); color: #F7F2E8; letter-spacing: .3px; }
.coin-counter[data-size="compact"] .cc-nb { font-size: 16px; }
.cc-gain { position: absolute; top: -4px; left: 10px; z-index: 3; pointer-events: none; font: 600 22px "Fredoka SemiBold", var(--font-corps); color: #F6C560; text-shadow: 0 2px 8px rgba(246, 197, 96, .55); opacity: 0; }
.cc-gain.actif { animation: ccGain 1s ease-out both; }
.cc-coin.tourne { animation: ccSpin .7s ease-in-out; }
.coin-counter.pop { animation: ccPill .55s ease-out; }
.cc-spark { position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none; opacity: 0; }
.cc-spark.actif { animation: ccSpark .7s ease-out both; }
@keyframes ccGain { 0%, 10% { opacity: 0; transform: translateY(4px) scale(.6); } 25% { opacity: 1; transform: translateY(-8px) scale(1.1); } 55% { opacity: 1; transform: translateY(-24px); } 100% { opacity: 0; transform: translateY(-46px); } }
@keyframes ccSpin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes ccPill { 0% { transform: scale(1); } 30% { transform: scale(1.1); } 60% { transform: scale(.98); } 100% { transform: scale(1); } }
@keyframes ccSpark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 30% { opacity: 1; transform: translate(calc(-50% + var(--tx) * .55), calc(-50% + var(--ty) * .55)) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.4); } }
@media (prefers-reduced-motion: reduce) {
  .cc-gain.actif, .cc-coin.tourne, .coin-counter.pop, .cc-spark.actif { animation: none; }
  .cc-gain.actif { opacity: 0; }
}
/* sur mobile (top-bars), le compteur passe automatiquement en compact */
@media (max-width: 899px) {
  .coin-counter { height: 38px; gap: 7px; padding: 0 14px 0 5px; box-shadow: 0 3px 0 0 #8f3f24; }
  .coin-counter .cc-coin { width: 28px; height: 28px; }
  .coin-counter .cc-v { font-size: 14px; }
  .coin-counter .cc-nb { font-size: 16px; }
  .coin-counter .cc-gain { font-size: 19px; }
}
/* ancrage coin haut-droite du contenu ; les écrans porteurs deviennent le repère */
#ecran-home, #ecran-lecon, #ecran-seance, #ecran-profil, #ecran-suivi { position: relative; }
.cc-ancre { position: absolute; top: 16px; right: 18px; z-index: 6; }
/* bureau : le compteur se cale sur le COIN DU CONTENU (padding de la feuille : 56px / 48px),
   donc son haut s'aligne sur celui du titre d'écran (Suivi, Réglages, chapitre…) */
@media (min-width: 900px) { .cc-ancre { top: 56px; right: 48px; } }
.cc-desktop-only { display: inline-flex; }
@media (max-width: 899px) { .cc-desktop-only { display: none; } }

/* ══════════ Suivi — progression EN MATHS, chapitre par chapitre (écran élève) ══════════
   base = mobile ; les overrides bureau suivent juste après (cascade : même spécificité,
   la source la plus tardive gagne). Data-driven : une carte par chapitre du curriculum. */
.suivi-page { padding: 20px 16px 20px; display: flex; flex-direction: column; }
.suivi-titre { font: 600 30px/1 var(--font-titre); color: var(--encre); margin: 8px 0 0; letter-spacing: -.4px; }
.suivi-chapo { font: 400 14.5px/1.5 var(--font-corps); color: #6b625a; margin: 8px 0 0; max-width: 52ch; }

/* bannière globale maths (pétrole) */
.suivi-global { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 20px; padding: 17px 18px; border-radius: 20px; border: 1px solid rgba(31, 78, 76, .18); background: linear-gradient(120deg, #FCFAF6, #EEECE2); }
.sg-ico { width: 44px; height: 44px; flex: none; border-radius: 13px; background: rgba(31, 78, 76, .1); display: grid; place-items: center; }
.sg-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--petrole); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sg-tx { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.sg-eyebrow { font: 600 16px var(--font-corps); color: var(--encre); }
.sg-mat { font: 400 13px var(--font-corps); color: var(--grege); }
.sg-jauge-wrap { flex: 1 1 180px; min-width: 158px; }
.sg-jauge-tete { display: flex; justify-content: space-between; font: 500 12.5px var(--font-corps); color: #6b625a; margin-bottom: 6px; }
.sg-jauge-tete span:last-child { font-weight: 600; color: var(--petrole); }
.sg-jauge { height: 9px; border-radius: 999px; background: rgba(31, 78, 76, .14); overflow: hidden; }
.sg-jauge i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #E48B4B, #BC5A38); transition: width .5s cubic-bezier(.2, .9, .3, 1); }

.suivi-label { margin: 26px 0 12px; text-transform: uppercase; font: 600 12px var(--font-corps); letter-spacing: 1.5px; color: #a79b8b; }
.suivi-grille { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* carte chapitre */
.ch-carte { text-align: left; font-family: var(--font-corps); border: 1px solid var(--bordure); border-radius: 18px; background: #FCFAF6; padding: 15px 17px; display: flex; flex-direction: column; gap: 11px; width: 100%; box-sizing: border-box; }
button.ch-carte { cursor: pointer; -webkit-appearance: none; appearance: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
button.ch-carte:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(33, 30, 43, .4); border-color: rgba(188, 90, 56, .4); }
button.ch-carte:active { transform: translateY(0); }
.ch-carte.ch-a_decouvrir { background: transparent; border-style: dashed; }

.ch-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ch-num { font: 600 15px "Fredoka SemiBold", var(--font-corps); color: var(--grege); letter-spacing: .5px; }
.ch-badge { font: 600 11px var(--font-corps); letter-spacing: .2px; padding: 3px 10px; border-radius: 999px; }
.ch-en_cours .ch-badge { color: var(--terracotta); background: rgba(188, 90, 56, .13); }
.ch-maitrise .ch-badge { color: var(--petrole); background: rgba(31, 78, 76, .13); }
.ch-a_decouvrir .ch-badge { color: var(--grege); background: rgba(154, 144, 134, .16); }

.ch-titre { font: 600 17px/1.25 var(--font-titre); color: var(--encre); }
.ch-a_decouvrir .ch-titre { color: #7d7468; }

.ch-jauge { height: 8px; border-radius: 999px; background: #EBE4D6; overflow: hidden; }
.ch-jauge i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #E48B4B, #BC5A38); transition: width .5s cubic-bezier(.2, .9, .3, 1); }
.ch-maitrise .ch-jauge i { background: var(--petrole); }
.ch-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ch-pct { font: 600 13px var(--font-corps); color: var(--encre); }
.ch-maitrise .ch-pct { color: var(--petrole); }
.ch-date, .ch-attente { font: 400 12.5px var(--font-corps); color: var(--grege); }

/* ── overrides bureau : la feuille pade déjà, grille 2 colonnes, titres plus grands ── */
@media (min-width: 900px) {
  .feuille-rail .suivi-page { padding: 0; }
  .suivi-titre { font-size: 40px; margin-top: 2px; }
  .suivi-chapo { font-size: 16px; margin-top: 12px; }
  .suivi-global { margin-top: 28px; padding: 22px 24px; border-radius: 22px; gap: 16px 26px; }
  .sg-ico { width: 50px; height: 50px; border-radius: 15px; }
  .sg-ico svg { width: 25px; height: 25px; }
  .sg-eyebrow { font-size: 18px; }
  .suivi-label { margin: 34px 0 16px; font-size: 12px; letter-spacing: 1.6px; }
  .suivi-grille { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .ch-carte { padding: 20px 22px; border-radius: 20px; gap: 13px; }
  .ch-titre { font-size: 19px; }
  .ch-num { font-size: 16px; }
}
.cc-mobile-only { display: none; }
@media (max-width: 899px) { .cc-mobile-only { display: inline-flex; } }

/* ══ Célébration — récompense débloquée (élève) : bottom-sheet mobile / modale centrée desktop ══ */
@keyframes popBounce { 0% { opacity: 0; transform: scale(.4) rotate(-8deg); } 55% { opacity: 1; transform: scale(1.12) rotate(3deg); } 75% { transform: scale(.96) rotate(-1deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ringPulse { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes confFall { 0% { transform: translateY(-20px) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(112vh) rotate(520deg); opacity: 0; } }

.cel-overlay { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(33, 30, 43, .55); overflow: hidden; }
.cel-overlay[hidden] { display: none; }
.cel-confettis { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cel-confettis i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: confFall 2.6s ease-in infinite; }

.cel-carte { position: relative; background: #FCFAF6; border-radius: 30px 30px 0 0; padding: 26px 22px calc(30px + var(--sous)); text-align: center; overflow: hidden; box-shadow: 0 -20px 50px -20px rgba(33, 30, 43, .5); animation: prmMonte .4s ease both; }
.cel-glow { position: absolute; top: -70px; left: 50%; transform: translateX(-50%); width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(246, 197, 96, .35), transparent 68%); pointer-events: none; }
.cel-in { position: relative; }
.cel-eyebrow { font: 600 11px var(--font-corps); letter-spacing: 2.2px; text-transform: uppercase; color: var(--terracotta); }
.cel-medaillon { position: relative; width: 126px; height: 126px; margin: 20px auto 0; display: grid; place-items: center; }
.cel-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(188, 90, 56, .4); animation: ringPulse 1.8s ease-out infinite; }
.cel-ring2 { border-color: rgba(246, 197, 96, .5); animation-delay: .6s; }
.cel-ic { width: 110px; height: 110px; border-radius: 28px; background: linear-gradient(150deg, #F3E1D4, #EAC9B2); display: grid; place-items: center; box-shadow: 0 14px 26px -12px rgba(188, 90, 56, .6); animation: popBounce .7s cubic-bezier(.2, .8, .3, 1.4) both; }
.cel-ic svg { width: 54px; height: 54px; fill: none; stroke: var(--terracotta); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cel-titre { font: 600 27px/1.05 var(--font-titre); color: var(--encre); margin: 20px 0 0; }
.cel-sous { font: 400 14px/1.5 var(--font-corps); color: #6b625a; margin: 10px 0 0; }
.cel-cagnotte { margin-top: 20px; display: inline-flex; align-items: center; gap: 14px; border: 1px solid rgba(154, 144, 134, .28); border-radius: 16px; background: #FBF8F2; padding: 14px 18px; }
.cel-coin { width: 38px; height: 38px; flex: none; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #F6C560, #D89A2C); display: grid; place-items: center; box-shadow: inset 0 2px 3px rgba(255, 255, 255, .5); font: 600 17px "Fredoka SemiBold", var(--font-corps); color: #7a4e12; }
.cel-cagnotte-tx { text-align: left; }
.cel-cagnotte-lab { font: 400 11.5px var(--font-corps); color: var(--grege); }
.cel-cagnotte-val { display: flex; align-items: baseline; gap: 7px; }
.cel-cagnotte-val b { font: 600 19px var(--font-titre); color: var(--encre); line-height: 1; }
.cel-cagnotte-val span { font: 600 14px var(--font-corps); color: var(--terracotta); }
.cel-cta { width: 100%; height: 54px; margin-top: 20px; border: none; border-radius: 15px; background: var(--terracotta); color: #F7F2E8; font: 600 14px var(--font-corps); letter-spacing: .6px; text-transform: uppercase; cursor: pointer; box-shadow: 0 5px 0 0 #8f3f24; transition: transform .06s, box-shadow .06s; }
.cel-cta:active { transform: translateY(4px); box-shadow: 0 1px 0 0 #8f3f24; }
.cel-lien { margin-top: 10px; border: none; background: none; color: var(--grege); font: 500 13.5px var(--font-corps); cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .cel-carte, .cel-ic { animation: none; }
  .cel-ring { animation: none; opacity: .35; }
  .cel-confettis { display: none; }
}

@media (min-width: 900px) {
  .cel-overlay { justify-content: center; align-items: center; background: rgba(33, 30, 43, .5); backdrop-filter: blur(3px); }
  .cel-carte { width: 480px; max-width: calc(100vw - 48px); border-radius: 30px; padding: 44px 40px 32px; box-shadow: 0 40px 80px -30px rgba(33, 30, 43, .6); }
  .cel-carte .prm-poignee { display: none; }
  .cel-glow { top: -90px; width: 300px; height: 300px; }
  .cel-eyebrow { font-size: 12px; letter-spacing: 2.5px; }
  .cel-medaillon { width: 150px; height: 150px; margin-top: 26px; }
  .cel-ic { width: 132px; height: 132px; border-radius: 34px; }
  .cel-ic svg { width: 66px; height: 66px; }
  .cel-titre { font-size: 34px; margin-top: 26px; }
  .cel-sous { font-size: 15.5px; margin-top: 12px; }
  .cel-cagnotte { margin-top: 26px; gap: 16px; padding: 16px 22px; border-radius: 18px; }
  .cel-coin { width: 44px; height: 44px; font-size: 20px; }
  .cel-cagnotte-lab { font-size: 12.5px; }
  .cel-cagnotte-val b { font-size: 26px; }
  .cel-cagnotte-val span { font-size: 16px; }
  .cel-cta { height: 56px; margin-top: 26px; border-radius: 16px; font-size: 15px; }
  .cel-lien { font-size: 14px; margin-top: 12px; }
}

/* ═══════════ Le cahier partagé — le prof dessine, l'élève complète ═══════════ */
.ce-formule { font-size: 13.5px; color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* — courbe : SVG cahier (quadrillage, axes, trait terracotta qui se trace) — */
.cahier-svg { display: block; width: 100%; height: auto; }
.cs-grille { stroke: #EDE5D6; stroke-width: 1; }
.cs-axe { stroke: var(--grege); stroke-width: 1.4; stroke-linecap: round; }
.cs-courbe {
  fill: none; stroke: var(--terracotta); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.cs-courbe.dessine { transition: stroke-dashoffset 1.1s ease-out; }
@media (prefers-reduced-motion: reduce) { .cs-courbe.dessine { transition: none; } }
.cs-extremum { fill: var(--creme); stroke: var(--petrole); stroke-width: 2.4; }
.cs-racine { fill: var(--encre); }

/* — tableau de variations à trous — */
.tv {
  display: grid; align-items: stretch;
  border: 1px solid var(--bordure); border-radius: 12px; overflow: hidden;
  background: #FDFBF5;
}
.tv-cell {
  display: flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 4px 6px; grid-row: 1;
  font-family: "STIX Two Text", Georgia, serif; font-size: 15px; color: var(--encre);
  border-bottom: 1px solid var(--bordure);
}
.tv-label { grid-column: 1; font-style: italic; background: #F6F0E4; border-right: 1px solid var(--bordure); }
.tv-l2 { grid-row: 2; }
.tv-l3 { grid-row: 3; border-bottom: none; }
.tv-x { color: var(--grege); font-size: 13.5px; }
.tv-gauche { justify-content: flex-start; }
.tv-droite { justify-content: flex-end; }
.tv-zero { font-size: 14px; }
.tv-rempli { font-size: 17px; }
.tv-rempli.vient-d-arriver { animation: tv-pose .45s ease; color: var(--petrole); }
@keyframes tv-pose { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.25); } to { transform: scale(1); opacity: 1; } }

.cahier-trou {
  width: 34px; height: 30px; border-radius: 8px; cursor: pointer;
  background: var(--terracotta-tint); border: 1.5px solid var(--terracotta);
  font: 700 14px var(--font-corps); color: var(--terracotta);
}
.cahier-trou.choisi { box-shadow: 0 0 0 3px var(--terracotta-tint); }
.cahier-trou.secoue { animation: tv-secoue .4s ease; }
@keyframes tv-secoue { 20% { transform: translateX(-4px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .tv-rempli.vient-d-arriver, .cahier-trou.secoue { animation: none; }
}

.picker-question { font: 600 12px var(--font-corps); color: var(--encre); }
.picker-opt {
  min-width: 44px; height: 38px; padding: 0 12px; border-radius: 12px; cursor: pointer;
  background: var(--creme); border: 1px solid var(--bordure);
  font-family: "STIX Two Text", Georgia, serif; font-size: 17px; color: var(--encre);
}
.picker-opt:active { background: var(--terracotta-tint); border-color: var(--terracotta); }

/* — la puce du fil : trace conversationnelle des mises à jour du cahier — */
/* ═══════════ Le board — la feuille est l'écran (nouvelle version, façon Aristotle) ═══════════ */
#ecran-coach.board-mode { max-width: none; display: flex; flex-direction: column; background: var(--sable); }
.board-head { position: relative; }
.btn-burger { display: none; }
.board-marque { display: flex; align-items: center; gap: 14px; min-width: 0; padding-left: 6px; }
.bm-logo { font: 600 21px "Fredoka SemiBold", Fredoka, var(--font-titre); color: var(--encre); letter-spacing: .01em; }
.bm-sep { width: 1px; height: 22px; background: var(--bordure); flex: none; }
.bm-chapitre {
  font: 500 17px var(--font-titre); color: var(--encre);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bm-droite { margin-left: auto; flex: none; font-size: 13px; color: var(--grege); }

.board-scene { flex: 1; min-height: 0; display: flex; padding: 10px 16px 16px 0; gap: 0; }

/* colonne gauche : les boards en haut, la porte de sortie en bas (façon Aristotle) */
.board-colonne { width: 58px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 4px; }
.bc-flex { flex: 1; }
.btn-fin {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; flex: none;
  display: grid; place-items: center;
  background: var(--creme); border: 1px solid var(--bordure); color: var(--grege);
}
.btn-fin:hover { color: var(--terracotta); border-color: var(--terracotta); }
.btn-fin svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* le rail des boards : une page par exercice, l'ancienne reste consultable */
.board-rail { display: flex; flex-direction: column; gap: 8px; width: 44px; align-self: flex-end; margin-right: -1px; }
.rail-page {
  width: 44px; height: 48px; border-radius: 12px 0 0 12px; cursor: pointer;
  background: color-mix(in srgb, var(--creme) 55%, var(--sable));
  border: 1px solid var(--bordure); border-right: none;
  font: 600 15px var(--font-titre); color: var(--grege);
}
.rail-page.actif { background: var(--creme); color: var(--encre); box-shadow: -4px 4px 10px -8px rgba(33,30,43,.4); }

/* la feuille : crème, quadrillée, elle défile */
.board {
  flex: 1; min-width: 0; overflow-y: auto;
  background:
    linear-gradient(rgba(222, 216, 207, .38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222, 216, 207, .38) 1px, transparent 1px),
    var(--creme);
  background-size: 26px 26px, 26px 26px, auto;
  background-attachment: local, local, scroll;   /* la grille défile AVEC le contenu */
  border: 1px solid var(--bordure); border-radius: 18px;
  box-shadow: 0 10px 30px -18px rgba(33, 30, 43, .35);
}
.board-feuille {
  max-width: 680px; margin: 0 auto;
  min-height: calc(100% + 340px);              /* il reste TOUJOURS du tableau en dessous */
  padding: 34px 22px 170px;                  /* la fin de feuille respire au-dessus du prof */
  display: flex; flex-direction: column; gap: 26px;
}
.board-bloc { text-align: center; }
.board-bloc.apparait { animation: bloc-pose .5s ease; }
@keyframes bloc-pose { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .board-bloc.apparait { animation: none; } }

.bloc-enonce { text-align: left; padding-bottom: 20px; border-bottom: 1px solid var(--bordure); }
.enonce-board { font-size: 16px; line-height: 1.7; color: var(--encre); white-space: pre-wrap; }
.enonce-board .katex { font-size: 1.05em; }

.bloc-formule { font-size: 17px; color: var(--encre); }
.bloc-formule .katex-display { margin: 0; }

.board .cahier-entete { justify-content: center; }
.board .cahier-svg { max-width: 460px; margin: 0 auto; }
.board .tv { max-width: 480px; margin: 0 auto; text-align: initial; }

/* le prof : renard en bas à gauche, une seule bulle qui se remplit */
.prof-coin {
  position: absolute; left: 74px; bottom: calc(26px + var(--sous)); z-index: 6;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  max-width: min(430px, 60vw); pointer-events: none;
}
.prof-fox { width: 78px; height: 78px; display: block; }
.prof-fox-btn { pointer-events: auto; background: none; border: none; padding: 0; margin-left: 4px; cursor: pointer; position: relative; }
.bulle-wrap { position: relative; pointer-events: auto; max-width: 100%; }
.bulle-reduire {
  position: absolute; top: -10px; right: -8px; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--creme); border: 1px solid var(--bordure); color: var(--grege);
  box-shadow: 0 3px 8px -4px rgba(33, 30, 43, .45);
}
.bulle-reduire svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* bulle réduite : il ne reste que le renard, avec une pastille « il t'a parlé » */
.prof-coin.reduite .bulle-wrap { display: none; }
.prof-coin.reduite .prof-fox-btn::after {
  content: ""; position: absolute; top: 0; right: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--terracotta); border: 2px solid var(--sable);
}
.bulle-prof {
  pointer-events: auto; position: relative;
  background: var(--encre); color: var(--sable);
  border-radius: 16px;
  padding: 15px 19px; font-size: 15.5px; line-height: 1.6;
  box-shadow: 0 14px 30px -16px rgba(33, 30, 43, .55);
  max-height: min(34dvh, calc(var(--coach-h, 100dvh) * 0.34));
  overflow-y: auto; overflow-wrap: break-word;
}
.bulle-prof::after {
  content: ""; position: absolute; left: 24px; bottom: -10px;
  width: 20px; height: 11px; background: var(--encre);
  clip-path: polygon(0 0, 100% 0, 18% 100%);
}
.bulle-prof .katex { color: var(--sable); }
.bulle-prof.reflechit { color: color-mix(in srgb, var(--sable) 70%, transparent); font-style: italic; }

/* l'élève : trace éphémère de son dernier message, côté droit */
.bulle-eleve-flot {
  position: absolute; right: 34px; bottom: calc(34px + var(--sous)); z-index: 6;
  max-width: min(340px, 56vw);
  background: var(--creme); color: var(--encre); border: 1px solid var(--bordure);
  border-radius: 18px; border-bottom-right-radius: 5px;
  padding: 10px 14px; font-size: 14.5px; line-height: 1.5;
  box-shadow: 0 8px 20px -12px rgba(33, 30, 43, .35);
}
.bulle-eleve-flot img { max-width: 200px; border-radius: 10px; display: block; }
.bulle-eleve-flot p { padding-top: 6px; }

/* toasts empilés au-dessus du dock */
.board-toasts {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + var(--sous)); z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: max-content; max-width: 92vw;
}
.board-toasts .bandeau-declic, .board-toasts .bandeau-tuteur { margin: 0; }
.toast-cahier {
  padding: 6px 14px; border-radius: 999px;
  background: var(--encre); color: var(--sable);
  font: 600 12.5px var(--font-corps);
  box-shadow: 0 8px 20px -10px rgba(33, 30, 43, .5);
}

/* le dock : minimal — actions fantômes, symboles légers, composer pill */
.board-dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 12px calc(30px + var(--sous));
  background: transparent; pointer-events: none;
  /* suit le clavier sans latence ni compression du contenu (iOS) ; --kb ≈ 0 sur Android */
  transform: translateY(calc(-1 * var(--kb, 0px)));
  will-change: transform;
}
/* clavier ouvert : la barre se colle au clavier — plus de marge de repos ni de
   home-indicator (le clavier occupe déjà cette zone) → aucun espace vide au-dessus */
#ecran-coach.clavier-ouvert .board-dock { padding-bottom: 8px; }
.board-dock > * { pointer-events: auto; }
.board-archive .board-dock { display: none; }

/* réduit (défaut) : trois boutons flottants, façon Aristotle */
.dock-replie {
  display: flex; align-items: center; gap: 4px;
  padding: 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--sable) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--bordure);
  box-shadow: 0 10px 26px -14px rgba(33, 30, 43, .45);
}
.dr-rond {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--creme); border: 1px solid var(--bordure); color: var(--encre);
}
.dr-rond svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dr-rond.actif { border-color: var(--terracotta); color: var(--terracotta); background: var(--terracotta-tint); }
.dr-ouvrir {
  min-width: 150px; height: 42px; padding: 0 20px; text-align: left; cursor: text;
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 999px;
  font: 500 14.5px var(--font-corps); color: var(--grege);
}

/* étendu : la carte de réponse */
.dock-etendu {
  width: 100%; max-width: 680px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--sable) 90%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--bordure); border-radius: 26px;
  box-shadow: 0 12px 30px -16px rgba(33, 30, 43, .5);
}
#btn-symboles.actif { border-color: var(--terracotta); color: var(--terracotta); background: var(--terracotta-tint); }
.dock-ligne { display: flex; align-items: center; gap: 8px; padding: 8px 4px 0; justify-content: center; }
.board-mode .barre-actions { padding: 0; margin: 0; border: none; background: none; display: flex; gap: 6px; }
.board-mode .chip-action {
  width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  background: transparent; border: none; border-radius: 999px; cursor: pointer; color: var(--grege);
}
.board-mode .chip-action:hover { background: color-mix(in srgb, var(--creme) 80%, transparent); color: var(--encre); }
.board-mode .chip-action svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.board-mode .symboles {
  display: flex; gap: 2px; padding: 0; margin: 0; overflow-x: auto; scrollbar-width: none;
}
.board-mode .symboles button {
  flex: none; height: 34px; padding: 0 11px; cursor: pointer;
  background: transparent; border: none; border-radius: 9px;
  font-family: "STIX Two Text", Georgia, serif; font-size: 15.5px; color: color-mix(in srgb, var(--encre) 72%, transparent);
}
.board-mode .symboles button:hover { background: color-mix(in srgb, var(--creme) 85%, transparent); color: var(--encre); }
.board-composeur {
  position: static; border-top: none; background: transparent; backdrop-filter: none;
  width: 100%; padding: 4px 2px;
}
.board-mode .cahier-picker { justify-content: center; border: none; background: transparent; padding: 6px 0 0; }

/* board archivé : lecture seule, la feuille se grise légèrement */
.board-archive .board { opacity: .82; }
.board-archive .prof-coin, .board-archive .bulle-eleve-flot { display: none; }

@media (max-width: 700px) {
  .board-scene { padding: 6px 10px 10px; }
  /* la colonne vit dans le hamburger sur mobile (boards + porte) */
  .board-colonne { display: none; }
  .btn-panneau { display: none; }
  .btn-burger { display: grid; width: 38px; height: 38px; }
  .btn-burger svg { width: 18px; height: 18px; }
  /* composer étendu compact : outils sur une rangée, champ + envoi dessous */
  .board-composeur { flex-wrap: wrap; row-gap: 6px; }
  .board-composeur .btn-joindre { order: -1; width: 36px; height: 36px; }
  .board-composeur .btn-joindre svg { width: 17px; height: 17px; }
  #saisie { flex: 1 1 200px; }
  /* à la Aristotle : pas de trace élève sur petit écran (elle chevaucherait la bulle
     du prof) — le composer vidé + la bulle « réfléchit » suffisent comme feedback */
  .bulle-eleve-flot { display: none; }
  .board-colonne { width: 44px; }
  .board-rail { width: 34px; }
  .rail-page { width: 34px; height: 40px; font-size: 13px; }
  .btn-fin { width: 36px; height: 36px; }
  .btn-fin svg { width: 16px; height: 16px; }
  .board-feuille { padding: 22px 14px 150px; }
  .bm-logo { font-size: 18px; }
  .bm-chapitre { font-size: 14.5px; }
  .bm-droite { display: none; }
  /* barre de saisie BASSE, façon ChatGPT : le pill flottant colle au bas de l'écran */
  .board-dock { padding-bottom: calc(10px + var(--sous)); }

  /* AU REPOS (dock replié) : le renard s'aligne INLINE à gauche du +, sur la MÊME rangée,
     pour libérer la place verticale (au lieu d'occuper une rangée au-dessus) */
  #ecran-coach:not(.dock-ouvert) .board-dock { align-items: flex-start; padding-left: 60px; }
  #ecran-coach:not(.dock-ouvert) .dock-replie { align-self: stretch; }
  #ecran-coach:not(.dock-ouvert) .dr-ouvrir { flex: 1; min-width: 0; }
  #ecran-coach:not(.dock-ouvert) .prof-coin { left: 12px; bottom: calc(9px + var(--sous)); }
  #ecran-coach:not(.dock-ouvert) .prof-fox { width: 42px; height: 42px; }

  /* QUAND ON ÉCRIT (dock ouvert) : le renard reprend sa place au-dessus */
  .prof-coin { left: 54px; bottom: calc(80px + var(--sous)); max-width: 74vw; gap: 9px; }
  .prof-fox { width: 54px; height: 54px; }
  .dock-ouvert .prof-coin { bottom: calc(128px + var(--sous)); }
}


/* le dock ouvert pousse bulles et toasts plus haut */
.dock-ouvert .prof-coin, .dock-ouvert .bulle-eleve-flot { bottom: calc(140px + var(--sous)); }
.dock-ouvert .board-toasts { bottom: calc(148px + var(--sous)); }
.dock-ouvert.board-mode .symboles { justify-content: center; }


/* ═══ menu de session (mobile) : boards + panneau + fin, derrière le hamburger ═══ */
.menu-coach-voile {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(33, 30, 43, .32);
}
.menu-coach {
  position: absolute; top: calc(58px + var(--sur)); left: 12px;
  min-width: 230px; padding: 12px;
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 16px;
  box-shadow: 0 18px 44px -18px rgba(33, 30, 43, .5);
  display: flex; flex-direction: column; gap: 4px;
}
.mc-label {
  font: 600 10.5px var(--font-corps); letter-spacing: .08em;
  color: var(--grege); padding: 2px 8px 4px;
}
.mc-boards { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.mc-board, .mc-item {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: none; border: none;
  font: 500 15px var(--font-corps); color: var(--encre);
}
.mc-board { font-family: var(--font-titre); }
.mc-board.actif { background: var(--terracotta-tint); color: var(--terracotta); font-weight: 600; }
.mc-item svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mc-item { border-top: 1px solid var(--bordure); border-radius: 0; }
.mc-item:last-child { border-radius: 0 0 10px 10px; }
.mc-fin { color: var(--terracotta); }

/* — la note : une idée de l'élève épinglée au board (punaise terracotta, ses mots) — */
.bloc-note { position: relative; max-width: 440px; margin: 0 auto; padding: 14px 18px 10px; }
.bloc-note::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--terracotta); box-shadow: 0 1.5px 0 var(--terracotta-fonce);
}
.note-texte {
  font: 500 16.5px/1.55 var(--font-titre); font-style: italic; color: var(--encre);
}
.note-qui { display: block; margin-top: 4px; font: 600 11.5px var(--font-corps); color: var(--grege); }


/* — l'erreur barrée : on la pose, on la barre — elle fait partie du chemin — */
.formule-barree { color: color-mix(in srgb, var(--encre) 52%, transparent); }
.formule-barree > div { position: relative; display: inline-block; padding: 0 10px; }
.formule-barree > div::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 52%;
  border-top: 3px solid #C0392B; border-radius: 2px;
  transform: rotate(-4deg); transform-origin: center;
  animation: barre-trace .45s ease-out both;
}
@keyframes barre-trace { from { scale: 0 1; } to { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) { .formule-barree > div::after { animation: none; } }
.formule-barree .note-qui, .note-qui.rouge { color: #C0392B; }

/* — le calcul juste : coup de surligneur (pétrole) qui balaie, comme un vrai prof — */
.formule-juste > div {
  display: inline-block; padding: 3px 14px; border-radius: 10px;
  background: linear-gradient(color-mix(in srgb, var(--petrole) 16%, transparent),
                              color-mix(in srgb, var(--petrole) 16%, transparent)) left center / 0% 100% no-repeat;
  animation: surligne .7s ease-out .25s forwards;
}
@keyframes surligne { to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) {
  .formule-juste > div { animation: none; background-size: 100% 100%; }
}
.formule-juste .note-qui { color: var(--petrole); }

/* — l'énoncé en cours de chargement : le board s'ouvre avant l'exercice — */
.bloc-chargement { display: flex; flex-direction: column; gap: 12px; }
.ch-label { font: 500 15px var(--font-corps); color: var(--grege); }
.ch-points i { font-style: normal; animation: ch-point 1.2s infinite; }
.ch-points i:nth-child(2) { animation-delay: .2s; }
.ch-points i:nth-child(3) { animation-delay: .4s; }
@keyframes ch-point { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.ch-ligne {
  height: 13px; border-radius: 7px; width: 82%;
  background: color-mix(in srgb, var(--bordure) 55%, transparent);
  animation: ch-pulse 1.6s ease-in-out infinite;
}
.ch-ligne.courte { width: 46%; animation-delay: .3s; }
@keyframes ch-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ch-points i, .ch-ligne { animation: none; } }

/* — exercice bouclé : la suite se choisit ici, le chat reste libre — */
.bandeau-fini {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  padding: 10px 16px; border-radius: 999px;
  background: var(--creme); border: 1px solid var(--bordure);
  box-shadow: 0 12px 28px -16px rgba(33, 30, 43, .45);
}
.bf-titre { font: 600 14px var(--font-corps); color: var(--encre); }
.bf-encore {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 16px; border: none; border-radius: 999px;
  background: var(--terracotta); color: #fff;
  font: 600 14px var(--font-corps);
  box-shadow: 0 3px 0 var(--terracotta-fonce);
}
.bf-encore:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--terracotta-fonce); }
.bf-encore svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bf-autre {
  padding: 9px 14px; cursor: pointer; border: 1px solid var(--bordure); border-radius: 999px;
  background: transparent; color: var(--grege); font: 600 13.5px var(--font-corps);
}
.bf-autre:hover { color: var(--encre); border-color: var(--grege); }

/* — le bouton 🔊 : interrupteur de la voix du prof (à gauche du ⌄ sur la bulle) — */
.bulle-ecouter { right: 24px; color: var(--grege); position: absolute; }
.bulle-ecouter.muet { opacity: .5; }
.bulle-ecouter.muet::after {
  content: ""; position: absolute; left: 18%; top: 47%;
  width: 64%; height: 2px; background: currentColor;
  transform: rotate(-38deg); border-radius: 2px;
}

/* — la bulle qui parle : chaque mot se révèle au rythme de la voix, et la
   bulle GRANDIT avec (les mots cachés n'occupent aucune place — façon Aristotle) — */
.bulle-prof .mot { display: none; }
.bulle-prof .mot.vu { display: inline; }
.bulle-prof .katex-display.mot.vu { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .bulle-prof .mot.vu { animation: mot-in .25s ease; }
  @keyframes mot-in { from { opacity: 0; } to { opacity: 1; } }
}
.bulle-prof .points-attente { color: color-mix(in srgb, var(--sable) 65%, transparent); }

/* — le bouton micro (mode vocal speech-to-speech) — */
.dr-vocal.actif {
  background: var(--terracotta); color: #fff; border-color: var(--terracotta);
  animation: micro-pulse 1.3s ease-in-out infinite;
}
@keyframes micro-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(188,90,56,.45); } 50% { box-shadow: 0 0 0 7px rgba(188,90,56,0); } }
/* le renard « écoute » : halo doux quand le vocal est actif */
.prof-coin.ecoute .prof-fox { filter: drop-shadow(0 0 10px rgba(188,90,56,.5)); }
@media (prefers-reduced-motion: reduce) { .dr-vocal.actif { animation: none; } }

/* les cartes Collège/Lycée, le hero bureau et le rail : inexistants en mobile */
.niveaux-bureau { display: none; }
.hello-bureau { display: none; }
.rail-logo, .rail-avatar, .rail-nom, .rail-sous { display: none; }
.rail-lab-mobile { display: inline; }
/* sous-titre d'accueil et label « Autres raccourcis » : bureau uniquement */
.home-sous, .pp-label { display: none; }

/* les trois points du CTA d'accueil : ils dansent pour inviter au clic */
.pts i { display: inline-block; font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
  .pts i { animation: pt-danse 1.4s ease-in-out infinite; }
  .pts i:nth-child(2) { animation-delay: .14s; }
  .pts i:nth-child(3) { animation-delay: .28s; }
}
@keyframes pt-danse { 0%, 55%, 100% { transform: none; } 25% { transform: translateY(-4px); } }

/* le grain de papier : un voile de bruit sur toute l'app (bureau) — l'atmosphère */
.grain { display: none; }
@media (min-width: 900px) {
  .grain.actif {
    display: block; position: fixed; inset: 0; z-index: 95;
    pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  }
}

/* le sting d'ouverture : plein écran au-dessus de tout, bureau uniquement */
.sting { display: none; }
@media (min-width: 900px) {
  .sting { display: block; position: fixed; inset: 0; z-index: 90; pointer-events: none; }
  .sting-anim { width: 100%; height: 100%; }
  .sting-anim svg { display: block; }
}

/* ═══════════ DESKTOP (≥ 900px) : la web app sur PAPIER, gabarit Aristotle ═══════════
   Deux familles d'écrans :
   · .feuille-bureau        → papier quadrillé plein écran (login, choix, onboarding)
   · .feuille-bureau.feuille-rail → papier flottant à droite du RAIL de navigation
   Le papier SE DESSINE à l'arrivée (balayage diagonal), un filet de lumière le
   traverse en continu, la vague passe entre les étapes. Mobile : inchangé. */
@media (min-width: 900px) {

  /* — le papier commun : quadrillage + naissance en balayage diagonal — */
  .feuille-bureau {
    max-width: none; min-height: 100dvh; height: 100dvh;
    margin: 0; overflow-y: auto;
    background: var(--creme);
  }
  /* l'arrivée d'un écran : fondu doux du papier, puis le contenu monte en
     cascade (le pattern d'entrée Apple/Linear — rien qui balaye, rien qui scanne) */
  .feuille-bureau::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40;
    background: var(--creme);
  }

  /* — login : carte centrée sur le papier — */
  .ecran-login { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px; }
  .login-anim { flex: 0 0 auto; min-height: 0; }
  .login-anim > svg, .login-anim > div { max-width: 260px; }
  .login-sheet {
    width: min(470px, 100%); border-radius: 26px;
    border: 1.5px solid var(--bordure); padding: 30px 36px 26px;
    box-shadow: 0 18px 44px -26px rgba(33, 30, 43, .4);
  }
  .sheet-grabber { display: none; }

  /* — choix élève/parent : carte centrée — */
  .ecran-choix { align-items: center; justify-content: center; padding: 40px; gap: 18px; }
  .choix-hero { flex: 0 0 auto; background: none; min-height: 0; height: auto; padding: 0; }
  .choix-sheet {
    flex: 0 0 auto; width: min(540px, 100%); border-radius: 26px;
    border: 1.5px solid var(--bordure); padding: 26px 30px 30px;
    box-shadow: 0 18px 44px -26px rgba(33, 30, 43, .4);
  }
  .choix-grabber { display: none; }

  /* — onboarding : chaque étape est un GROUPE centré verticalement — */
  .ecran-onb { padding: 18px 0 0; display: flex; flex-direction: column; }
  .onb-head { width: min(760px, 100%); margin-inline: auto; padding-top: 10px; flex: none; }
  .onb-chemin { height: 92px; }
  .onb-etape { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 5vh; }
  .onb-corps { flex: 0 0 auto; width: min(680px, 100%); margin-inline: auto; padding: 0; gap: 24px; align-items: center; }
  .onb-corps.centre { justify-content: flex-start; }
  .onb-cta { flex: 0 0 auto; width: min(680px, 100%); margin-inline: auto; padding: 34px 0 0; }
  .onb-cta .btn-jalon, .onb-cta .btn-etape { width: auto; min-width: 300px; }

  /* entrée en cascade : le contenu, puis CHAQUE carte/chip, puis le CTA */
  .onb-etape:not([hidden]) .onb-corps > *,
  .onb-etape:not([hidden]) .onb-cta > * {
    animation: hb-entre .55s cubic-bezier(.2, .8, .3, 1) both;
  }
  .onb-etape:not([hidden]) .onb-corps > :nth-child(2) { animation-delay: .08s; }
  .onb-etape:not([hidden]) .onb-corps > :nth-child(3) { animation-delay: .16s; }
  .onb-etape:not([hidden]) .onb-corps > :nth-child(4) { animation-delay: .24s; }
  .onb-etape:not([hidden]) .onb-cta > * { animation-delay: .46s; }
  .onb-etape:not([hidden]) .niveaux-bureau > .niveau-carte,
  .onb-etape:not([hidden]) .options .option,
  .onb-etape:not([hidden]) .chips > button {
    animation: carte-entre .55s cubic-bezier(.2, .9, .25, 1.15) both;
  }
  .onb-etape:not([hidden]) :is(.niveaux-bureau, .options, .classes-rangee, .chips) > :nth-child(1) { animation-delay: .14s; }
  .onb-etape:not([hidden]) :is(.niveaux-bureau, .options, .classes-rangee, .chips) > :nth-child(2) { animation-delay: .21s; }
  .onb-etape:not([hidden]) :is(.niveaux-bureau, .options, .classes-rangee, .chips) > :nth-child(3) { animation-delay: .28s; }
  .onb-etape:not([hidden]) :is(.niveaux-bureau, .options, .classes-rangee, .chips) > :nth-child(4) { animation-delay: .35s; }
  .onb-etape:not([hidden]) :is(.niveaux-bureau, .options, .classes-rangee, .chips) > :nth-child(5) { animation-delay: .42s; }
  .onb-etape:not([hidden]) :is(.niveaux-bureau, .options, .classes-rangee, .chips) > :nth-child(n+6) { animation-delay: .49s; }

  .dialogue { gap: 14px; align-items: center; justify-content: center; }
  .dialogue img { width: 42px; height: 42px; }
  .question { font-size: 36px; text-align: center; }
  .sous-question, .sous-texte, .remarque { text-align: center; }
  .reaction { justify-content: center; }
  .options { width: 100%; }
  .chips { justify-content: center; }
  .champ-prenom { width: min(460px, 100%); margin-inline: auto; text-align: center; }

  /* — étape 1 : la bulle DESSINÉE du renard, écrite à la machine — */
  .hello-anim { display: none; }
  .hello-bureau { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .hello-bureau > img { animation: hb-entre .6s cubic-bezier(.2, .8, .3, 1) both; }
  /* la bulle est DESSINÉE par le lottie vulpi-bulle.json (tracé main levée qui
     s'encre) — le conteneur CSS n'est plus qu'une boîte transparente */
  /* pas de bulle : le message nu, bien centré sous le renard */
  .hb-bulle {
    color: var(--encre); padding-top: 10px;
    display: flex; flex-direction: column; gap: 18px; align-items: center;
  }
  .hb-titre { animation: hb-entre .5s cubic-bezier(.2, .8, .3, 1) both .2s; }
  .hb-titre { font-family: var(--font-titre); font-weight: 560; font-size: 36px; letter-spacing: -0.01em; color: var(--encre); }
  .hb-nom { color: var(--terracotta); position: relative; }
  .hb-nom::after {
    content: ""; position: absolute; left: 2%; right: 2%; bottom: -7px; height: 3.5px;
    background: var(--terracotta); border-radius: 3px; transform: rotate(-0.6deg);
  }
  .hb-texte { font-size: 19px; line-height: 1.75; text-align: center; max-width: 44ch; min-height: 66px;
              color: color-mix(in srgb, var(--encre) 82%, transparent); }
  .hb-souligne { font-style: normal; color: var(--terracotta); font-weight: 600; }
  .hb-curseur { background: var(--terracotta); height: 1.05em; vertical-align: text-bottom; }

  /* — étape classe : Collège OU Lycée (pictos), puis les classes se déplient — */
  .niveaux-bureau { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
  .niveau-carte {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    background: var(--creme); border: 1.5px solid var(--bordure); border-radius: 18px;
    padding: 26px 16px 22px; cursor: pointer; font-family: var(--font-corps);
    transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
  }
  .nc-ico {
    width: 52px; height: 52px; border-radius: 50%; margin-bottom: 4px;
    background: var(--terracotta-tint); display: grid; place-items: center;
  }
  .nc-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--terracotta); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .niveau-carte .nc-titre { font: 600 19px var(--font-corps); color: var(--encre); }
  .niveau-carte .nc-sous { font: 500 13.5px var(--font-corps); color: var(--grege); }
  .niveau-carte.actif { border-color: var(--terracotta); border-width: 2px; padding: 25.5px 15.5px 21.5px; background: var(--terracotta-tint); }
  #options-classe .groupe-classes { display: none; }
  #options-classe .classes-rangee { display: none; width: 100%; }
  #options-classe.niv-college .rangee-college,
  #options-classe.niv-lycee .rangee-lycee { display: flex; }

  /* — l'objectif : 3 cartes verticales côte à côte, centrées — */
  #options-objectif { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
  #options-objectif .option {
    flex-direction: column; text-align: center; align-items: center;
    gap: 14px; padding: 28px 16px 24px; border-radius: 18px;
  }
  #options-objectif .option.actif { padding: 27.5px 15.5px 23.5px; background: var(--terracotta-tint); }
  #options-objectif .option::after { display: none; }
  #options-objectif .option-ico { width: 58px; height: 58px; }
  #options-objectif .option-ico svg { width: 28px; height: 28px; }
  #options-objectif .option-textes { display: flex; flex-direction: column; gap: 6px; align-items: center; }

  /* survols premium : les choix se soulèvent sous la souris */
  .option, .chips button { transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease; }
  .option:hover, .niveau-carte:hover, .chips button:hover, .choix-carte:hover, .preprompt:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: var(--grege);
    box-shadow: 0 12px 26px -18px rgba(33, 30, 43, .45);
  }
  .option.actif:hover, .niveau-carte.actif:hover { border-color: var(--terracotta); }
  .classes-rangee .option-compacte { padding: 16px 6px; }
  .cta-renard { display: none; }

  /* ══════ LE RAIL (la tabbar restylée en sidebar Aristotle) ══════ */
  .tabbar {
    left: 0; right: auto; top: 0; bottom: 0;
    width: 232px; margin: 0; padding: 22px 14px calc(16px + var(--sous));
    flex-direction: column; align-items: stretch; gap: 8px;
    background: var(--sable); border: none; border-radius: 0;
    box-shadow: none; backdrop-filter: none;
  }
  .rail-logo { display: block; font: 600 27px var(--font-titre); color: var(--encre); padding: 2px 12px 18px; letter-spacing: -0.01em; }
  .tabbar .tab { width: 100%; flex: none; }
  .tabbar .tchip {
    flex-direction: row; justify-content: flex-start; gap: 11px;
    padding: 12px 14px; border-radius: 14px;
    background: var(--creme); border: 1px solid var(--bordure);
    color: var(--encre);
    box-shadow: 0 3px 12px -9px rgba(33, 30, 43, .35);
  }
  .tabbar .tlab { font-size: 14.5px; }
  .tabbar .tchip svg { width: 20px; height: 20px; color: var(--grege); }
  .tab.actif .tchip { background: #EAE2D4; border-color: #DCD2C2; color: var(--encre); }
  .tab.actif .tchip svg { color: var(--terracotta); }
  .tab:hover .tchip { border-color: var(--grege); }
  /* le profil épinglé en bas, façon carte de compte Aristotle */
  .tab[data-tab="profil"] { margin-top: auto; }
  .rail-avatar {
    display: grid; place-items: center; flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--terracotta); color: #fff; font: 600 14px var(--font-corps);
  }
  .tab[data-tab="profil"] .tchip svg { display: none; }
  .rail-nom { display: inline; }
  .rail-nom:empty::before { content: "Mon profil"; }
  .rail-lab-mobile { display: none; }

  /* ══════ LES ÉCRANS À DROITE DU RAIL : le papier flottant d'Aristotle ══════ */
  .feuille-rail {
    margin: 14px 14px 14px 246px;
    height: calc(100dvh - 28px); min-height: 0;
    border-radius: 22px; border: 1px solid var(--bordure);
    box-shadow: 0 14px 40px -22px rgba(33, 30, 43, .35);
    display: block; padding: 56px 48px 48px 60px;
  }
  .feuille-rail { position: relative; overflow-x: hidden; }
  .feuille-rail::before { position: absolute; inset: 0; }
  .feuille-rail > * { max-width: 860px; }

  /* — Accueil : le dashboard Aristotle en DA Vulpi — */
  .feuille-rail .home-head { display: none; }
  .ecran-home .home-centre { justify-content: flex-start; padding: 0; gap: 24px; }
  .salutation { margin-top: 6px; }
  .salutation h1 { font-size: 36px; }
  .salutation img { width: 44px; height: 44px; }
  .preprompts { flex-direction: column; margin-inline: 0; padding-inline: 0; overflow: visible; gap: 12px; }
  .preprompt {
    width: 100%; display: grid; align-items: center;
    grid-template-columns: auto 1fr auto; column-gap: 16px; row-gap: 2px;
    grid-template-areas: "ico titre fleche" "ico sous fleche";
    padding: 18px 22px; border-radius: 16px;
    transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
  }
  .preprompt .pp-ico { grid-area: ico; }
  .preprompt .pp-titre { grid-area: titre; font-size: 17px; }
  .preprompt .pp-sous { grid-area: sous; }
  .preprompt::after { content: "→"; grid-area: fleche; font-size: 20px; color: var(--grege); }
  .preprompt:disabled::after { content: ""; }
}

/* les animations du papier (coupées si reduced-motion) */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .feuille-bureau::before { animation: fondu-papier .55s ease-out both; }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .feuille-bureau::before { display: none; }
  .onb-etape:not([hidden]) .onb-corps > *, .onb-etape:not([hidden]) .onb-cta > *,
  .onb-etape:not([hidden]) .niveaux-bureau > .niveau-carte,
  .onb-etape:not([hidden]) .options .option,
  .onb-etape:not([hidden]) .chips > button,
  .hello-bureau > img, .hb-bulle, .hb-titre { animation: none; }
}
@keyframes hb-entre { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes carte-entre { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bulle-pop { from { opacity: 0; transform: translateY(18px) scale(.92) rotate(-.5deg); } to { opacity: 1; transform: rotate(-.5deg); } }
@keyframes fondu-papier { from { opacity: 1; } to { opacity: 0; } }

/* ════════════ DESKTOP — Accueil & sidebar d'après la maquette Claude Design ════════════
   (« Accueil Vulpi.dc.html », scope ≥900px, mobile intact) ─ palette maquette :
   backdrop greige #EBE4D6, feuille crème #FCFAF6, wordmark Fredoka. */
@media (min-width: 900px) {
  body { background: #EBE4D6; }

  /* ── le rail ── */
  .tabbar { width: 266px; padding: 30px 20px 22px; gap: 6px; background: #EBE4D6; }
  .rail-logo {
    display: flex; align-items: center; gap: 10px; padding: 0 10px 34px;
    font: 600 25px 'Fredoka', var(--font-corps); color: var(--encre); letter-spacing: .2px;
  }
  .rail-logo img { width: 34px; height: 34px; object-fit: contain; }

  /* onglets : transparents par défaut, seul l'actif prend la carte crème */
  .tabbar .tchip {
    gap: 13px; padding: 12px 14px; border-radius: 15px;
    background: transparent; border: none; box-shadow: none;
    color: #5f574d; font-weight: 500;
    transition: background .18s ease;
  }
  .tabbar .tlab { font-size: 15.5px; }
  .tabbar .tchip svg { color: currentColor; }
  .tabbar .tab:not(.actif):hover .tchip { background: rgba(33, 30, 43, .05); }
  .tab.actif .tchip {
    background: #FCFAF6; border: none; color: var(--encre);
    box-shadow: 0 5px 16px -8px rgba(33, 30, 43, .28);
  }
  .tab.actif .tchip svg { color: var(--terracotta); }

  /* la carte profil épinglée en bas */
  .tab[data-tab="profil"] .tchip {
    gap: 12px; padding: 11px 12px; border-radius: 16px;
    background: #FCFAF6; box-shadow: 0 6px 18px -10px rgba(33, 30, 43, .3);
  }
  .tab[data-tab="profil"].actif .tchip { box-shadow: 0 6px 18px -10px rgba(33, 30, 43, .3); }
  .tab[data-tab="profil"]:hover .tchip { background: #FCFAF6; }
  .tab[data-tab="profil"] .rail-avatar { width: 40px; height: 40px; font-size: 17px; color: #F7F2E8; }
  .tab[data-tab="profil"] .tlab { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .tab[data-tab="profil"] .rail-nom { display: inline; font: 600 15px var(--font-corps); color: var(--encre); }
  .tab[data-tab="profil"] .rail-sous {
    display: inline; font: 400 12.5px var(--font-corps); color: var(--grege);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tab[data-tab="profil"] .rail-sous:empty::before { content: "Voir mon profil"; }

  /* ── la feuille (accueil) ── */
  .feuille-rail {
    margin: 14px 14px 14px 266px; border: none; border-radius: 26px;
    background: #FCFAF6; box-shadow: 0 10px 30px -18px rgba(33, 30, 43, .25);
    padding: 58px 48px 48px;
  }
  .ecran-home .home-centre { max-width: 860px; margin-inline: auto; gap: 0; }

  /* headline + sous-titre */
  .ecran-home .salutation { justify-content: flex-start; gap: 16px; }
  .ecran-home .salutation img { width: 52px; height: 52px; }
  .ecran-home .salutation h1 { font: 600 40px/1.05 var(--font-titre); letter-spacing: -.3px; color: var(--encre); }
  .home-sous { display: block; font: 400 17px/1.5 var(--font-corps); color: #6b625a; margin: 16px 0 0 68px; }

  /* raccourcis */
  .ecran-home .preprompts { margin-top: 34px; gap: 14px; }
  .pp-label {
    display: block; margin: 24px 0 2px; text-transform: uppercase;
    font: 600 12px var(--font-corps); letter-spacing: 1.6px; color: #a79b8b;
  }

  /* ── la bannière mise en avant : « M'aider sur un devoir » ── */
  .feuille-rail .preprompt[data-pp="devoir"] {
    column-gap: 20px; padding: 24px 26px; border-radius: 22px;
    border: 1px solid rgba(188, 90, 56, .28);
    background: linear-gradient(102deg, #F6E6D2, #EFD2B4);
    box-shadow: 0 14px 30px -16px rgba(188, 90, 56, .55);
  }
  .feuille-rail .preprompt[data-pp="devoir"]:hover {
    transform: translateY(-2px); box-shadow: 0 20px 38px -16px rgba(188, 90, 56, .6);
  }
  .preprompt[data-pp="devoir"] .pp-ico {
    width: 56px; height: 56px; border-radius: 16px; background: #FCF4E9;
    box-shadow: 0 4px 12px -6px rgba(188, 90, 56, .5);
  }
  .preprompt[data-pp="devoir"] .pp-ico svg { width: 26px; height: 26px; stroke: var(--terracotta); }
  .preprompt[data-pp="devoir"] .pp-titre { font: 600 24px var(--font-titre); }
  .preprompt[data-pp="devoir"] .pp-sous { font-size: 15px; color: #8a6a4e; }
  .preprompt[data-pp="devoir"]::after { color: var(--terracotta); font-size: 24px; }

  /* ── cartes secondaires ── */
  .feuille-rail .preprompt:not([data-pp="devoir"]) {
    padding: 18px 22px; border-radius: 20px;
    border: 1px solid rgba(154, 144, 134, .28); background: #FBF8F2;
  }
  .feuille-rail .preprompt:not([data-pp="devoir"]):hover {
    transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(33, 30, 43, .4);
  }
  .feuille-rail .preprompt:not([data-pp="devoir"]) .pp-ico { width: 48px; height: 48px; border-radius: 14px; }
  .feuille-rail .preprompt:not([data-pp="devoir"]) .pp-ico svg { width: 23px; height: 23px; }
  .feuille-rail .preprompt .pp-titre { font: 600 19px var(--font-titre); color: var(--encre); }
  .feuille-rail .preprompt .pp-sous { font-size: 14px; color: #6b625a; }
  .feuille-rail .preprompt[disabled] { opacity: .72; }
  .feuille-rail .preprompt[disabled] .pp-ico { background: #E7E1D4; }
  .feuille-rail .preprompt[disabled] .pp-ico svg { stroke: #8a8175; }
  .feuille-rail .preprompt .bientot {
    font: 600 11.5px var(--font-corps); letter-spacing: normal; color: var(--terracotta);
    background: rgba(188, 90, 56, .13); padding: 3px 10px; border-radius: 999px;
    margin-left: 8px; vertical-align: 1px;
  }

  /* ── composeur ── */
  .ecran-home .composeur-home {
    margin-top: 26px; background: #FBF8F2;
    border: 1px solid rgba(154, 144, 134, .32); border-radius: 22px;
    padding: 20px 22px 16px;
  }
}

/* ════════════ v61 — sidebar : l'onglet actif prend TOUTE la largeur ════════════
   Le fond crème de l'onglet actif remplit la sidebar bord à bord et se raccorde à
   la feuille de contenu (même crème) ; l'icône + le texte restent alignés avec les
   onglets inactifs. Le logo, les onglets et le profil partagent le même retrait. */
@media (min-width: 900px) {
  .tabbar { padding: 30px 0 22px; }
  .rail-logo { padding: 0 22px 34px; }
  /* onglets pleine largeur : le retrait vit dans le padding du chip (contenu à 22px) */
  .tabbar .tchip { padding: 12px 22px; border-radius: 0; }
  .tab.actif .tchip { background: #FCFAF6; box-shadow: none; }   /* bande crème raccordée à la feuille */
  /* le profil reste une carte flottante, en retrait */
  .tab[data-tab="profil"] { padding: 0 20px; }
  .tab[data-tab="profil"] .tchip {
    padding: 11px 12px; border-radius: 16px;
    box-shadow: 0 6px 18px -10px rgba(33, 30, 43, .3);
  }
}

/* v61b — le chip doit REMPLIR la largeur de l'onglet (sinon il se rétrécit au contenu) */
@media (min-width: 900px) {
  .tabbar .tab { display: flex; }
  .tabbar .tchip { flex: 1 1 auto; justify-content: flex-start; }
}

/* ════════════ v63 — LA LEÇON + sidebar qui déborde (maquette « Leçon Vulpi ») ════════════ */
/* base mobile : l'onglet leçon n'existe qu'au bureau (la capsule reste à 5 items) */
.tabbar .tab-lecon { display: none; }    /* ≥ la spécificité de .tabbar .tab */
/* « Mes chapitres » : rail bureau uniquement — la capsule mobile ne les montre jamais */
.rail-chapitres { display: none; }

@media (min-width: 900px) {
  /* ── sidebar : les onglets redeviennent des cartes arrondies, et l'ACTIF
        DÉBORDE sur la feuille (le geste Aristotle que Mathieu adore).
        Sa couleur se personnalise par onglet via --tab-teinte. ── */
  .tabbar { padding: 30px 0 22px 12px; overflow: visible; }
  .rail-logo { padding: 0 10px 34px; }
  .tabbar .tab { display: flex; overflow: visible; }
  .tabbar .tab-lecon { display: flex; }
  .tabbar .tchip {
    flex: 1; margin: 0; padding: 12px 14px; border-radius: 15px;
    background: transparent; box-shadow: none;
    transition: background .18s ease;
  }
  .tab.actif .tchip {
    background: var(--tab-teinte, #FCFAF6);
    box-shadow: 0 5px 16px -8px rgba(33, 30, 43, .28);
    margin-right: -26px; padding-right: 40px;   /* ça déborde sur la feuille */
    position: relative; z-index: 2;
  }
  /* la carte profil ne déborde pas : elle reste posée dans la sidebar */
  .tab[data-tab="profil"] { padding-right: 20px; }
  .tab[data-tab="profil"] .tchip,
  .tab[data-tab="profil"].actif .tchip {
    margin-right: 0; padding: 11px 12px; border-radius: 16px;
    background: #FCFAF6; box-shadow: 0 6px 18px -10px rgba(33, 30, 43, .3);
  }

  /* ── l'écran leçon ── */
  .lecon-corps { max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; }
  .lecon-tete h1 { font: 600 44px/1 var(--font-titre); color: var(--encre); margin: 0; letter-spacing: -.4px; }
  .lecon-salut { font: 400 17px/1.5 var(--font-corps); color: #6b625a; margin: 14px 0 0; }
  .section-label {
    margin: 40px 0 16px; text-transform: uppercase;
    font: 600 12px var(--font-corps); letter-spacing: 1.6px; color: #a79b8b;
  }

  /* la bannière « Avancer sur cette piste » */
  .lecon-banniere {
    display: flex; align-items: center; gap: 22px; text-align: left;
    border: 1px solid rgba(188, 90, 56, .3); border-radius: 22px;
    padding: 26px 28px; cursor: pointer; font-family: var(--font-corps);
    background: linear-gradient(102deg, #EFD4B7, #E7B98D);
    box-shadow: 0 16px 34px -18px rgba(188, 90, 56, .6);
    transition: transform .16s ease, box-shadow .16s ease;
  }
  .lecon-banniere:hover { transform: translateY(-2px); box-shadow: 0 22px 42px -18px rgba(188, 90, 56, .65); }
  .lb-ico {
    width: 58px; height: 58px; flex: none; border-radius: 16px; background: #FCF4E9;
    display: grid; place-items: center; box-shadow: 0 4px 12px -6px rgba(188, 90, 56, .5);
  }
  .lb-ico svg { width: 27px; height: 27px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .lb-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .lb-titre { font: 600 26px var(--font-titre); color: var(--encre); }
  .lb-sous { font: 400 15px/1.4 var(--font-corps); color: #8a6a4e; }
  .lb-fleche { width: 27px; height: 27px; flex: none; fill: none; stroke: var(--terracotta); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

  /* la carte de maths */
  .lecon-carte {
    border: 1px solid rgba(154, 144, 134, .26); border-radius: 22px;
    background: #FBF8F2; padding: 26px 28px 30px;
  }
  .lc-legende {
    display: flex; align-items: center; gap: 26px;
    padding-bottom: 22px; border-bottom: 1px solid rgba(154, 144, 134, .22);
  }
  .lc-legende span { display: inline-flex; align-items: center; gap: 9px; font: 500 14px var(--font-corps); color: #6b625a; }
  .lc-chapitre-titre {
    margin-top: 24px; display: flex; align-items: center; gap: 10px;
    font: 600 12px var(--font-corps); letter-spacing: 1.4px; text-transform: uppercase; color: #8a8175;
  }
  .lc-chapitre.en-cours .lc-chapitre-titre { color: var(--terracotta); }
  .lc-badge {
    font: 600 11px var(--font-corps); letter-spacing: normal; text-transform: none;
    color: var(--terracotta); background: rgba(188, 90, 56, .13);
    padding: 3px 9px; border-radius: 999px;
  }
  .lc-rangee { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
  .lc-pilule {
    width: 56px; height: 31px; flex: none; border-radius: 999px; display: inline-block;
    background: #EBE1D0; border: 1.5px solid rgba(154, 144, 134, .45);
  }
  .lc-pilule.mini { width: 26px; height: 15px; }
  .lc-pilule.faite { background: var(--terracotta); border-color: var(--terracotta); }
  .lc-pilule.encours { background: linear-gradient(90deg, #BC5A38 0 50%, #EBE1D0 50% 100%); border-color: var(--terracotta); }
  .lc-lien { width: 24px; flex: none; border-top: 2px dotted #cdc2af; }

  /* séances récentes */
  .lecon-seances { display: flex; flex-direction: column; gap: 12px; }
  .lecon-seance {
    display: flex; align-items: center; gap: 16px; text-align: left;
    border: 1px solid rgba(154, 144, 134, .26); border-radius: 18px;
    padding: 16px 20px; cursor: pointer; background: #FBF8F2; font-family: var(--font-corps);
    transition: transform .16s ease, box-shadow .16s ease;
  }
  .lecon-seance:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(33, 30, 43, .4); }
  .ls-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; background: #F3E1D4; display: grid; place-items: center; }
  .ls-ico svg { width: 21px; height: 21px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .ls-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .ls-tx b { font: 600 16px var(--font-corps); color: var(--encre); }
  .ls-sous { font: 400 13.5px var(--font-corps); color: #6b625a; }
  .ls-date { font: 400 13.5px var(--font-corps); color: var(--grege); flex: none; }
}

/* v64 — l'onglet leçon porte le chapitre en cours : les intitulés officiels sont
   longs (« Équations et fonctions polynômes du second degré ») → une ligne, ellipse */
@media (min-width: 900px) {
  .tab-lecon .tchip { min-width: 0; }
  .tab-lecon .tlab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* « MES CHAPITRES » — sous « Suivi » dans le rail : raccourcis vers la leçon de chaque
   chapitre travaillé, le courant surligné terracotta. Se peuple tout seul (majRailChapitres). */
@media (min-width: 900px) {
  .rail-chapitres { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px 2px; margin: 4px 0 8px; }
  .rail-chapitres[hidden] { display: none; }
  .rc-label { padding: 8px 12px 6px; text-transform: uppercase; font: 600 10.5px var(--font-corps); letter-spacing: 1.3px; color: #a79b8b; }
  .rc-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: transparent; border-radius: 12px; padding: 9px 12px; cursor: pointer; font-family: var(--font-corps); color: #6b625a; transition: background .16s ease, color .16s ease; }
  .rc-item:hover { background: rgba(33, 30, 43, .05); color: var(--encre); }
  .rc-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--terracotta); }
  .rc-maitrise .rc-dot { background: var(--petrole); }
  .rc-titre { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 13.5px var(--font-corps); }
  .rc-item.actif { background: var(--terracotta); color: #FCF7F0; box-shadow: 0 5px 16px -8px rgba(188, 90, 56, .6); }
  .rc-item.actif .rc-dot { background: #FCF7F0; }
  .rc-item.actif .rc-titre { font-weight: 600; }
}

/* ════════════ v65 — la carte = les NOTIONS du chapitre en cours, cliquables ════════════ */
@media (min-width: 900px) {
  /* les pilules sont maintenant des boutons : reset + cible de clic confortable */
  .lc-rangee { gap: 9px; margin-top: 8px; }
  button.lc-pilule {
    padding: 0; font: inherit; cursor: pointer; position: relative;
    box-sizing: border-box; -webkit-appearance: none; appearance: none;
    transition: transform .13s ease, box-shadow .13s ease, filter .13s ease;
  }
  button.lc-pilule:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -8px rgba(33, 30, 43, .4);
    filter: brightness(1.02);
  }
  button.lc-pilule:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
  button.lc-pilule:active { transform: translateY(0); }

  /* la bulle du nom de notion, façon Aristotle — apparaît au survol / focus.
     Nos intitulés sont longs → bulle qui s'enroule, largeur bornée. */
  .lc-pilule[data-notion]::after {
    content: attr(data-notion);
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px);
    background: #2C2622; color: #F7F1E8; text-align: left;
    font: 500 12.5px/1.35 var(--font-corps); letter-spacing: .1px;
    padding: 9px 12px; border-radius: 11px; width: max-content; max-width: 250px;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
    opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease;
    z-index: 40;
  }
  .lc-pilule[data-notion]::before {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px);
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent; border-top-color: #2C2622;
    opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; z-index: 40;
  }
  .lc-pilule[data-notion]:hover::after, .lc-pilule[data-notion]:focus-visible::after,
  .lc-pilule[data-notion]:hover::before, .lc-pilule[data-notion]:focus-visible::before {
    opacity: 1; transform: translateX(-50%) translateY(0);
  }
}

/* ════════════ v67 — carte à deux niveaux : une rangée par notion, pilules = sous-notions ════════════ */
@media (min-width: 900px) {
  .lc-notion {
    display: flex; align-items: center; gap: 16px;
    padding: 13px 0; border-bottom: 1px solid rgba(154, 144, 134, .14);
  }
  .lc-notion:last-child { border-bottom: 0; }
  .ln-tx { flex: 1; min-width: 0; }
  .ln-ti { font: 500 15px var(--font-corps); color: var(--encre); }
  .ln-sub { font: 400 12.5px var(--font-corps); color: var(--grege); margin-top: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ln-pills { display: flex; align-items: center; gap: 7px; flex: none; }
  /* dans une rangée les pilules sont un peu plus compactes que la légende */
  .ln-pills .lc-pilule { width: 46px; height: 26px; }

  .ln-badge {
    flex: none; min-width: 74px; text-align: right;
    font: 500 12.5px var(--font-corps); color: var(--grege);
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px;
  }
  .ln-badge.faite { color: var(--terracotta); }
  .ln-badge.encours { color: #8a8175; }
  .ln-badge.todo { color: #b7aca0; }
  .ln-badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
                  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
}

/* ════════════ v70 — pilules à remplissage gradué (niveau 0→4, modèle Aristotle) ════════════ */
@media (min-width: 900px) {
  /* la pilule de la carte se remplit par le bas, proportionnellement au niveau ;
     plus de classes .faite/.encours ici — c'est la hauteur de .pf qui parle */
  .ln-pills .lc-pilule {
    position: relative; background: #EBE1D0; border: 1.5px solid rgba(154, 144, 134, .45);
  }
  .ln-pills .lc-pilule.demarre { border-color: var(--terracotta); }
  /* cadre clippé (ne rogne PAS la bulle ::after, qui vit sur le bouton) */
  .lc-pilule .pf-wrap {
    position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none;
  }
  .lc-pilule .pf {
    position: absolute; left: 0; right: 0; bottom: 0; height: 0;
    background: var(--terracotta); transition: height .3s cubic-bezier(.2, .9, .3, 1);
  }
}

/* ════════════ v71 — bouton « Leçon guidée » (mode leçon : Vulpi mène) ════════════ */
.lecon-guidee { display: none; }
@media (min-width: 900px) {
  .lecon-guidee {
    display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
    margin-top: 12px; padding: 12px 20px; border-radius: 999px; cursor: pointer;
    font: 500 14.5px var(--font-corps); color: var(--petrole);
    background: transparent; border: 1.5px solid rgba(31, 78, 76, .35);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .lecon-guidee:hover {
    background: rgba(31, 78, 76, .07); transform: translateY(-1px);
    box-shadow: 0 8px 18px -12px rgba(31, 78, 76, .5);
  }
  .lecon-guidee svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
                      stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
}

/* ════════════ Leçon MOBILE (« Mathématiques ») — le desktop vit dans les blocs min-width:900px ;
   ici tout est scopé max-width:899px, donc aucun impact sur le bureau. La top-bar (Retour +
   pièces) n'existe qu'en mobile ; sur bureau le rail gère la navigation. ════════════ */
.lecon-topbar { display: none; }              /* base : masquée (le bureau utilise le rail) */

@media (max-width: 899px) {
  .lecon-topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 8;
    padding: calc(8px + var(--sur, 0px)) 16px 8px; background: var(--sable);
  }
  #ecran-lecon { padding-bottom: calc(92px + var(--sous, 0px)); }   /* dégage la capsule de nav */
  .lecon-corps { display: flex; flex-direction: column; padding: 20px 16px 20px; }
  .lecon-tete h1 { font: 600 25px/1.15 var(--font-titre); color: var(--encre); margin: 0; letter-spacing: -.3px; }
  .lecon-salut { font: 400 14.5px/1.5 var(--font-corps); color: #6b625a; margin: 6px 0 0; }
  .section-label { margin: 24px 0 12px; text-transform: uppercase; font: 600 11.5px var(--font-corps); letter-spacing: 1.4px; color: #a79b8b; }

  /* bannière « Avancer sur cette piste » */
  .lecon-banniere {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    border: none; border-radius: 20px; padding: 16px 18px; cursor: pointer; font-family: var(--font-corps);
    background: linear-gradient(102deg, #EFD4B7, #E7B98D);
    box-shadow: 0 12px 26px -16px rgba(188, 90, 56, .6);
    transition: transform .14s ease;
  }
  .lecon-banniere:active { transform: translateY(1px); }
  .lb-ico { width: 46px; height: 46px; flex: none; border-radius: 13px; background: #FCF4E9; display: grid; place-items: center; box-shadow: 0 3px 10px -6px rgba(188, 90, 56, .5); }
  .lb-ico svg { width: 23px; height: 23px; fill: none; stroke: var(--terracotta); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .lb-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .lb-titre { font: 600 18px var(--font-titre); color: var(--encre); }
  .lb-sous { font: 400 13px/1.35 var(--font-corps); color: #8a6a4e; }
  .lb-fleche { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--terracotta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* « Leçon guidée » — conservée sur mobile (ajout maison) */
  .lecon-guidee {
    display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
    margin-top: 10px; padding: 11px 16px; border-radius: 999px; cursor: pointer;
    font: 500 13.5px var(--font-corps); color: var(--petrole);
    background: transparent; border: 1.5px solid rgba(31, 78, 76, .35);
  }
  .lecon-guidee svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  /* carte de maths */
  .lecon-carte { border: 1px solid var(--bordure); border-radius: 18px; background: #FBF8F2; padding: 15px 15px 16px; }
  .lc-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 15px; padding-bottom: 13px; border-bottom: 1px solid rgba(154, 144, 134, .22); }
  .lc-legende span { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px var(--font-corps); color: #6b625a; }
  .lc-pilule.mini { width: 22px; height: 13px; flex: none; border-radius: 999px; display: inline-block; background: #EBE1D0; border: 1.5px solid rgba(154, 144, 134, .45); }
  .lc-pilule.mini.encours { background: linear-gradient(90deg, #BC5A38 0 50%, #EBE1D0 50% 100%); border-color: var(--terracotta); }
  .lc-pilule.mini.faite { background: var(--terracotta); border-color: var(--terracotta); }

  /* rangées : une notion = titre + pastilles d'étapes + badge d'état */
  .lc-notion { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(154, 144, 134, .14); }
  .lc-notion:last-child { border-bottom: 0; }
  .ln-tx { flex: 1; min-width: 0; }
  .ln-ti { font: 500 14px var(--font-corps); color: var(--encre); }
  .ln-sub { display: none; }                  /* énumération des sous-notions : trop dense en mobile */
  .ln-pills { display: flex; align-items: center; gap: 5px; flex: none; }
  .lc-lien { display: none; }                 /* connecteur pointillé : on garde juste le gap */
  button.lc-pilule {
    position: relative; width: 30px; height: 20px; flex: none; border-radius: 999px;
    padding: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; cursor: pointer;
    background: #EBE1D0; border: 1.5px solid rgba(154, 144, 134, .45);
  }
  button.lc-pilule.demarre { border-color: var(--terracotta); }
  button.lc-pilule:active { transform: translateY(1px); }
  .lc-pilule .pf-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
  .lc-pilule .pf { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--terracotta); transition: height .3s cubic-bezier(.2, .9, .3, 1); }
  .ln-badge { flex: none; min-width: 0; font: 500 11.5px var(--font-corps); color: var(--grege); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .ln-badge.faite { color: var(--terracotta); }
  .ln-badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

  /* séances récentes */
  .lecon-seances { display: flex; flex-direction: column; gap: 10px; }
  .lecon-seance { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--bordure); border-radius: 16px; padding: 13px 14px; cursor: pointer; background: #FBF8F2; font-family: var(--font-corps); transition: transform .14s ease; }
  .lecon-seance:active { transform: translateY(1px); }
  .ls-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; background: #F3E1D4; display: grid; place-items: center; }
  .ls-ico svg { width: 19px; height: 19px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .ls-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .ls-tx b { font: 600 15px var(--font-corps); color: var(--encre); }
  .ls-sous { font: 400 13px var(--font-corps); color: #6b625a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ls-date { font: 400 12.5px var(--font-corps); color: var(--grege); flex: none; }
}

/* ════════════ Accueil MOBILE (« Mon prof ») — d'après « Accueil Vulpi.dc.html ».
   Scopé max-width:899px : le bureau (bloc min-width:900px plus haut) n'est pas touché.
   Doit venir APRÈS « .home-sous, .pp-label { display:none } » pour les rétablir. ════════════ */
@media (max-width: 899px) {
  /* top-bar collante : renard + wordmark à gauche, cagnotte à droite */
  .ecran-home .home-head {
    position: sticky; top: 0; z-index: 8;
    padding: calc(8px + var(--sur, 0px)) 16px 8px; background: var(--sable);
  }
  .home-marque { display: inline-flex; align-items: center; gap: 8px; }
  .home-marque img { width: 28px; height: 28px; object-fit: contain; }
  /* le WORDMARK (accueil uniquement) : Fredoka. Ailleurs, cette place porte le TITRE de l'écran. */
  .ecran-home .home-logo { font: 600 21px 'Fredoka', var(--font-titre); color: var(--encre); letter-spacing: .2px; }
  .ecran-home .home-head .avatar { display: none; }   /* la cagnotte prend la place à droite */

  /* contenu aligné en haut et scrollable (plus de centrage vertical) */
  .ecran-home .home-centre { justify-content: flex-start; gap: 20px; padding: 20px 16px 0; }
  .ecran-home .salutation { justify-content: flex-start; gap: 12px; }
  .ecran-home .salutation img { width: 40px; height: 40px; }
  .ecran-home .salutation h1 { font: 600 26px/1.2 var(--font-titre); letter-spacing: -.2px; }
  .home-sous { display: block; font: 400 14.5px/1.5 var(--font-corps); color: #6b625a; margin: -6px 0 0; }

  /* raccourcis EMPILÉS (le mobile était en rangée à défilement horizontal) */
  .ecran-home .preprompts {
    display: flex; flex-direction: column; gap: 12px;
    overflow: visible; margin-inline: 0; padding-inline: 0; margin-top: 2px;
  }
  .pp-label {
    display: block; margin: 16px 0 2px; text-transform: uppercase;
    font: 600 11.5px var(--font-corps); letter-spacing: 1.5px; color: #a79b8b;
  }
  /* carte = icône à gauche, titre + sous-titre à droite */
  .ecran-home .preprompt {
    width: auto; flex: none; display: grid; grid-template-columns: auto 1fr;
    align-items: center; column-gap: 13px; row-gap: 3px;
    padding: 14px 15px; border-radius: 18px; text-align: left;
  }
  .ecran-home .preprompt .pp-ico { grid-row: 1 / span 2; align-self: center; }
  .ecran-home .preprompt .pp-titre { font: 600 16px var(--font-titre); color: var(--encre); }
  .ecran-home .preprompt .pp-sous { font: 400 13px/1.35 var(--font-corps); color: #6b625a; }

  /* la bannière mise en avant : « M'aider sur un devoir » */
  .ecran-home .preprompt[data-pp="devoir"] {
    padding: 17px 17px; border-radius: 20px;
    border: 1px solid rgba(188, 90, 56, .28);
    background: linear-gradient(102deg, #F6E6D2, #EFD2B4);
    box-shadow: 0 12px 26px -16px rgba(188, 90, 56, .55);
  }
  .ecran-home .preprompt[data-pp="devoir"] .pp-ico {
    width: 46px; height: 46px; border-radius: 14px; background: #FCF4E9;
    box-shadow: 0 3px 10px -6px rgba(188, 90, 56, .5);
  }
  .ecran-home .preprompt[data-pp="devoir"] .pp-ico svg { width: 23px; height: 23px; stroke: var(--terracotta); }
  .ecran-home .preprompt[data-pp="devoir"] .pp-titre { font-size: 18px; }
  .ecran-home .preprompt[data-pp="devoir"] .pp-sous { color: #8a6a4e; }

  /* cartes secondaires (active + « Bientôt ») */
  .ecran-home .preprompt:not([data-pp="devoir"]) {
    border: 1px solid rgba(154, 144, 134, .28); background: #FBF8F2;
  }
  .ecran-home .preprompt:not([data-pp="devoir"]) .pp-ico { width: 40px; height: 40px; border-radius: 12px; }
  .ecran-home .preprompt:not([data-pp="devoir"]) .pp-ico svg { width: 20px; height: 20px; }
  .ecran-home .preprompt:not([disabled]):active { transform: translateY(1px); }
  .ecran-home .preprompt[disabled] { opacity: .62; }
  .ecran-home .preprompt[disabled] .pp-ico { background: #E7E1D4; }
  .ecran-home .preprompt[disabled] .pp-ico svg { stroke: #8a8175; }

  /* composeur collé au-dessus de la capsule de nav ; Reprendre passe au-dessus de lui */
  .ecran-home .reprendre { order: 5; }
  .ecran-home #erreur-home { order: 6; }
  .ecran-home .composeur-home {
    order: 7; position: sticky; bottom: calc(96px + var(--sous, 0px)); z-index: 7;
    margin-top: 6px; padding: 13px 14px 11px; border-radius: 20px;
    box-shadow: 0 10px 26px -18px rgba(33, 30, 43, .45);
  }
}

/* ════════════ Écran JEUX (« Jeux Vulpi.dc.html ») — base = mobile, overrides bureau ensuite.
   Héro encre, défis en cartes, jeu de la semaine en pétrole. ════════════ */
.jeux-page { display: flex; flex-direction: column; padding: 20px 16px 20px; }
.jeux-titre { font: 600 26px/1.15 var(--font-titre); color: var(--encre); margin: 6px 0 0; letter-spacing: -.2px; }
.jeux-chapo { font: 400 14.5px/1.5 var(--font-corps); color: #6b625a; margin: 6px 0 0; }
.jeux-label { margin: 22px 0 10px; text-transform: uppercase; font: 600 11.5px var(--font-corps); letter-spacing: 1.5px; color: #a79b8b; }
.jeux-grille { display: flex; flex-direction: column; gap: 10px; }
.jeux-note { margin: 14px 0 0; padding: 11px 14px; border-radius: 14px; background: var(--terracotta-tint); color: var(--terracotta-fonce); font: 500 13.5px/1.4 var(--font-corps); }

/* pastille « pièces à gagner » (réutilise la pièce dorée des récompenses) */
.jx-pieces { display: inline-flex; align-items: center; gap: 6px; font: 600 13px 'Fredoka', var(--font-corps); color: #C08A2A; }
.jx-hero .jx-pieces { color: #F6C560; }

/* ── le héros : carte encre ── */
.jx-hero {
  margin-top: 16px; display: flex; flex-direction: column; gap: 14px;
  padding: 18px; border-radius: 22px;
  background: linear-gradient(150deg, #2A2534, #1A1722 70%);
  box-shadow: 0 18px 36px -22px rgba(33, 30, 43, .85);
}
.jx-hero-ic {
  width: 56px; height: 56px; flex: none; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(150deg, #C9663F, #A9482A);
  box-shadow: 0 0 26px -6px rgba(188, 90, 56, .75);
}
.jx-hero-ic svg { width: 28px; height: 28px; fill: none; stroke: #FCF4E9; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) { .jx-hero-ic { animation: jxPulse 2.4s ease-in-out infinite; } }
@keyframes jxPulse { 0%, 100% { box-shadow: 0 0 26px -6px rgba(188, 90, 56, .75); } 50% { box-shadow: 0 0 34px -2px rgba(188, 90, 56, .95); } }
.jx-hero-tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.jx-hero-sur { text-transform: uppercase; font: 600 11px var(--font-corps); letter-spacing: 1.5px; color: #E09A6E; }
.jx-hero-ti { font: 600 25px/1.1 var(--font-titre); color: #FCF7F0; }
.jx-hero-so { font: 400 13.5px/1.45 var(--font-corps); color: #B6ADA4; margin: 2px 0 0; }
.jx-metas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; }
.jx-meta { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--font-corps); color: #B6ADA4; }
.jx-meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* CTA façon Duolingo : relief pressé */
.jx-cta {
  width: 100%; border: none; cursor: pointer; border-radius: 15px; padding: 14px 22px;
  background: var(--terracotta); color: #FFF8F0;
  font: 600 15px var(--font-corps); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 4px 0 0 #8f3f24; transition: transform .06s ease, box-shadow .06s ease;
}
.jx-cta:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.jx-cta-petrole { background: var(--petrole); box-shadow: 0 4px 0 0 #14332f; }

/* ── autres défis ── */
.jx-carte {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  border: 1px solid rgba(154, 144, 134, .28); border-radius: 18px; background: #FBF8F2;
  padding: 14px 15px; cursor: pointer; font-family: var(--font-corps);
  transition: transform .14s ease, box-shadow .14s ease;
}
.jx-carte:active { transform: translateY(1px); }
.jx-carte.jx-bientot { opacity: .62; cursor: default; }
.jx-carte-ic { width: 42px; height: 42px; flex: none; border-radius: 13px; background: #DFE9E7; display: grid; place-items: center; }
.jx-carte-ic svg { width: 21px; height: 21px; fill: none; stroke: var(--petrole); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.jx-bientot .jx-carte-ic { background: var(--terracotta-tint); }
.jx-bientot .jx-carte-ic svg { stroke: var(--terracotta); }
.jx-carte-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.jx-carte-ti { font: 600 16px var(--font-titre); color: var(--encre); }
.jx-carte-so { font: 400 13px/1.35 var(--font-corps); color: #6b625a; }

/* ── le jeu de la semaine ── */
.jx-semaine {
  display: flex; flex-direction: column; gap: 13px; padding: 17px;
  border-radius: 20px; background: #DCE8E5; border: 1px solid rgba(31, 78, 76, .18);
}
.jx-semaine-ic { width: 52px; height: 52px; flex: none; border-radius: 15px; background: var(--petrole); display: grid; place-items: center; }
.jx-semaine-ic svg { width: 26px; height: 26px; fill: none; stroke: #E7F0EE; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.jx-semaine-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jx-semaine-ti { font: 600 21px/1.15 var(--font-titre); color: #14332f; }
.jx-semaine-so { font: 400 13.5px/1.45 var(--font-corps); color: #3d5f5c; margin: 2px 0 0; }

/* ══ bureau : héro et bannière en rangée, défis sur 2 colonnes ══ */
@media (min-width: 900px) {
  .feuille-rail .jeux-page { padding: 0; }
  .jeux-titre { font-size: 40px; margin-top: 2px; }
  .jeux-chapo { font-size: 16px; margin-top: 12px; }
  .jeux-label { margin: 30px 0 14px; letter-spacing: 1.6px; }
  .jeux-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .jx-hero { margin-top: 26px; flex-direction: row; align-items: center; gap: 24px; padding: 26px 28px; border-radius: 26px; }
  .jx-hero-ic { width: 84px; height: 84px; border-radius: 22px; }
  .jx-hero-ic svg { width: 40px; height: 40px; }
  .jx-hero-tx { flex: 1; }
  .jx-hero-ti { font-size: 33px; }
  .jx-hero-so { font-size: 15px; max-width: 52ch; }
  .jx-cta { width: auto; flex: none; padding: 15px 30px; border-radius: 16px; font-size: 15px; }

  .jx-carte { padding: 17px 20px; border-radius: 20px; }
  .jx-carte:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(33, 30, 43, .4); }
  .jx-carte.jx-bientot:hover { transform: none; box-shadow: none; }
  .jx-carte-ic { width: 46px; height: 46px; }
  .jx-carte-ti { font-size: 18px; }

  .jx-semaine { flex-direction: row; align-items: center; gap: 22px; padding: 24px 26px; border-radius: 24px; }
  .jx-semaine-ic { width: 74px; height: 74px; border-radius: 20px; }
  .jx-semaine-ic svg { width: 36px; height: 36px; }
  .jx-semaine-tx { flex: 1; }
  .jx-semaine-ti { font-size: 27px; }
  .jx-semaine-so { font-size: 14.5px; max-width: 56ch; }
}

/* ════════════ v75 — le geste du tableau : pose immédiate + annotation du prof ════════════ */
/* le calcul vient d'arriver (le prof n'a pas encore tranché) : présent, sans verdict */

/* l'ENTOURÉ du prof : ellipse au crayon pétrole, légèrement de travers (main levée) */
.formule-entouree > div { position: relative; display: inline-block; padding: 4px 16px; }
.formule-entouree > div::after {
  content: ""; position: absolute; inset: -4px -10px;
  border: 2.5px solid var(--petrole); border-radius: 48% 52% 50% 50% / 58% 55% 62% 52%;
  transform: rotate(-1.6deg); pointer-events: none; opacity: .85;
}
.formule-entouree .note-qui { color: var(--petrole); }

/* le geste s'anime quand le verdict tombe en direct */
.annote-vivant.formule-entouree > div::after { animation: entoure-pop .45s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes entoure-pop {
  from { opacity: 0; transform: rotate(-1.6deg) scale(1.18); }
  to   { opacity: .85; transform: rotate(-1.6deg) scale(1); }
}
.annote-vivant.formule-barree > div::after { animation-duration: .5s; }
@media (prefers-reduced-motion: reduce) {
  .annote-vivant.formule-entouree > div::after { animation: none; }
}

/* ════════════ v78 — mode leçon : l'énoncé de la marche s'écrit au tableau ════════════ */
.bloc-question {
  margin-top: 10px; padding: 14px 18px;
  background: color-mix(in srgb, var(--sable) 55%, transparent);
  border-left: 3px solid var(--petrole); border-radius: 0;
}
.q-label { display: block; font: 600 11px var(--font-corps); letter-spacing: 1.2px;
           text-transform: uppercase; color: var(--petrole); margin-bottom: 6px; }
.q-texte { font-size: 16.5px; color: var(--encre); line-height: 1.55; }

/* ════════════ v80 — vue DÉTAIL DE SÉANCE (design « Séance Vulpi », consultable parents) ════════════ */
/* LE PAPIER QUADRILLÉ — commun à TOUS les écrans élève, mobile ET bureau (1re des 3
   textures : quadrillé → carte blanche → ardoise crème, la profondeur qui aide à lire).
   Sélecteurs par id (spécificité 1,0,0) : ils passent devant `.feuille-bureau { background }`
   du bloc bureau, qui remettrait un crème uni. Le tableau (coach) et les écrans parent
   gardent leur propre fond. */
#ecran-home, #ecran-suivi, #ecran-lecon, #ecran-seance,
#ecran-recompenses, #ecran-jeux, #ecran-fiches, #ecran-profil {
  background-color: var(--creme);
  background-image:
    linear-gradient(rgba(33, 30, 43, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 30, 43, .05) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* LA RUPTURE : la barre du haut reste unie (sable) et opaque — la feuille quadrillée
   défile dessous. C'est ce contraste qui marque la coupure en haut de page. */
@media (max-width: 899px) {
  .ecran-home .home-head, .ecran-suivi .home-head, .ecran-jeux .home-head,
  .ecran-profil .home-head, .ecran-rec .home-head, .ecran-fiches .home-head, .lecon-topbar {
    position: sticky; top: 0; z-index: 8;
    padding: calc(8px + var(--sur, 0px)) 16px 8px;
    background: var(--sable); border-bottom: 1px solid rgba(154, 144, 134, .22);
  }
  /* C'EST LA BARRE qui absorbe l'encoche (var(--sur)) — l'écran ne doit donc PLUS
     ajouter de padding-top : sinon le fond quadrillé, peint sous ce padding, apparaît
     en bande au-dessus de la barre. On ne touche qu'au haut : le bas (dégagement de la
     capsule de nav) reste celui défini par chaque écran. */
  .ecran-home, .ecran-suivi, .ecran-jeux, .ecran-profil, .ecran-rec, .ecran-lecon, .ecran-fiches {
    padding-top: 0;
  }
  /* la flèche de retour : carrée arrondie (et non ronde) */
  .lecon-topbar .btn-rond { border-radius: 13px; }

  /* hors accueil, la barre porte le TITRE de l'écran (Fraunces) — pas le wordmark */
  .ecran-suivi .home-logo, .ecran-jeux .home-logo,
  .ecran-profil .home-logo, .ecran-rec .home-logo, .ecran-fiches .home-logo {
    font: 600 20px var(--font-titre); color: var(--encre); letter-spacing: -.2px;
  }
  /* le titre est passé dans la barre : on retire le doublon dans le contenu */
  .ecran-suivi .suivi-titre, .ecran-jeux .jeux-titre, .ecran-fiches .fic-titre { display: none; }
  .ecran-suivi .suivi-chapo, .ecran-jeux .jeux-chapo, .ecran-fiches .fic-chapo { margin-top: 10px; }
}
.seance-detail { max-width: none; margin: 0; padding: 6px 20px 44px; }

/* retour, en tête de page (lien texte façon Aristotle) */
.seance-retour {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 26px;
  border: none; background: transparent; cursor: pointer; padding: 0;
  font: 500 15px var(--font-corps); color: #6b625a; transition: color .16s ease;
}
.seance-retour:hover { color: var(--terracotta); }
.seance-retour svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
                     stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.seance-h1 { font: 600 clamp(30px, 5.2vw, 44px)/1.06 var(--font-titre); color: var(--encre);
             margin: 0; letter-spacing: -.4px; }
.seance-meta { font: 400 15px var(--font-corps); color: var(--grege); margin: 16px 0 0; }

/* le bilan du prof — récit pour les parents, avec trait de surligneur */
.seance-bilan {
  font: 400 17px/1.6 var(--font-corps); color: #3f3a33; margin: 22px 0 0; max-width: 820px;
}
.seance-bilan .surligne {
  background: linear-gradient(180deg, transparent 55%, #F6D08A 55%);   /* trait de surligneur */
  color: inherit; padding: 0 1px; border-radius: 2px;
}
.bilan-attente { color: var(--grege); font-style: italic; }

/* la carte « Le tableau de Vulpi » */
.seance-board {
  margin-top: 30px; border: 1px solid rgba(154, 144, 134, .28); border-radius: 22px;
  background: #FFFFFF; box-shadow: 0 16px 34px -20px rgba(33, 30, 43, .34);
  padding: 26px 30px 30px;
}
.seance-board-head { display: flex; align-items: center; justify-content: space-between; }
.seance-board-marque { display: flex; align-items: center; gap: 10px; }
.seance-board-logo { width: 26px; height: 26px; object-fit: contain; display: block; }
.seance-board-label {
  font: 500 13px var(--font-corps); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--terracotta);
}
.seance-pdf {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid rgba(154, 144, 134, .4); border-radius: 11px; background: #FBF8F2;
  color: #5f574d; font: 600 13px var(--font-corps); padding: 8px 13px; transition: background .16s ease;
}
.seance-pdf:hover { background: rgba(33, 30, 43, .05); }
.seance-pdf svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
                  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* le tableau blanc rejoué — DÉFILABLE */
.seance-tableau {
  margin-top: 18px; border: 1px solid rgba(154, 144, 134, .3); border-radius: 16px;
  background: #FCFAF6; padding: 8px; max-height: 60vh; overflow-y: auto;
}
.seance-tableau .board-feuille { min-height: auto; padding: 22px 26px; }
.seance-tableau-vide { color: var(--grege); text-align: center; padding: 40px 20px; font-size: 15px; }

/* « reprendre la séance » — présent seulement si la séance n'était pas terminée */
.seance-cta { margin-top: 30px; max-width: 820px; }
.seance-reprendre {
  width: 100%; height: 56px; border: none; border-radius: 16px; cursor: pointer;
  background: var(--terracotta); color: #F7F2E8;
  font: 600 15px var(--font-corps); letter-spacing: .6px; text-transform: uppercase;
  box-shadow: 0 5px 0 0 #8f3f24; transition: transform .06s ease, box-shadow .06s ease;
}
.seance-reprendre:active { transform: translateY(4px); box-shadow: 0 1px 0 0 #8f3f24; }

/* toggle discret « voir la discussion » (le tableau reste la vue principale) */
.seance-toggle {
  display: inline-flex; align-items: center; gap: 9px; margin: 26px 0 0; padding: 11px 20px;
  border-radius: 999px; cursor: pointer; font: 500 14.5px var(--font-corps);
  color: var(--petrole); background: transparent; border: 1.5px solid rgba(31, 78, 76, .3);
  transition: background .15s ease;
}
.seance-toggle:hover, .seance-toggle.actif { background: rgba(31, 78, 76, .07); }
.seance-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
                     stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#seance-fil { margin-top: 18px; }

/* desktop : le contenu OCCUPE toute la feuille (pas de colonne étroite façon mobile) —
   la feuille-rail pose déjà la marge à gauche/droite, le contenu s'y aligne au cordeau */
@media (min-width: 900px) {
  #ecran-seance > .seance-detail { max-width: none; padding: 0 0 44px; }
  .seance-h1 { max-width: none; }
  /* le récit + le CTA gardent une largeur de lecture confortable */
  .seance-bilan { max-width: 900px; }
  .seance-cta { max-width: 900px; }
}

/* ── impression → PDF (sans dépendance) : on isole le détail de séance ── */
@media print {
  body.impression-seance { background: #fff; }
  body.impression-seance .rail, body.impression-seance .tabbar, body.impression-seance .grain,
  body.impression-seance .seance-retour, body.impression-seance .seance-pdf,
  body.impression-seance .seance-cta, body.impression-seance .seance-toggle {
    display: none !important;
  }
  body.impression-seance #ecran-seance {
    position: static; margin: 0; border: 0; box-shadow: none; inset: auto;
  }
  body.impression-seance .seance-board { border: 0; box-shadow: none; padding: 0; }
  body.impression-seance .seance-tableau { max-height: none; overflow: visible; }
  body.impression-seance .ecran:not(#ecran-seance) { display: none !important; }
}

/* ════════════ Ajustements v114 — placés en FIN de feuille pour passer devant les
   règles bureau/mobile écrites plus haut (même spécificité → la source la plus tardive
   gagne). ════════════ */

/* — Jeux : rien n'est jouable pour l'instant. Les CTA sont grisés et inertes, et le
     titre porte le badge « Bientôt ». Tout est piloté par `statut` côté back : le jour
     où un jeu sort, on repasse son statut à « actif » et le bouton reprend vie. — */
.jx-cta-off {
  background: #C9C2B6; color: #F6F2EA; box-shadow: 0 4px 0 0 #ABA396; cursor: default;
}
.jx-cta-off:active { transform: none; box-shadow: 0 4px 0 0 #ABA396; }
/* le badge s'accorde à son fond : ambré sur l'encre, pétrole sur la bannière */
.jx-hero-ti .bientot { background: rgba(224, 154, 110, .18); color: #E5A377; vertical-align: 6px; }
.jx-semaine-ti .bientot { background: rgba(31, 78, 76, .14); color: var(--petrole); vertical-align: 5px; }

/* — Accueil : les « autres raccourcis » adoptent le pétrole du bandeau Suivi
     (« 1 chapitre sur 11 entamé »). La bannière « devoir » garde son dégradé sable. — */
.ecran-home .preprompt:not([data-pp="devoir"]) {
  border: 1px solid rgba(31, 78, 76, .18);
  background: linear-gradient(120deg, #FCFAF6, #EEECE2);
}
.ecran-home .preprompt:not([data-pp="devoir"]) .pp-ico { background: rgba(31, 78, 76, .1); }
.ecran-home .preprompt:not([data-pp="devoir"]) .pp-ico svg { stroke: var(--petrole); }
/* les raccourcis « Bientôt » restent en retrait, dans la même famille pétrole */
.ecran-home .preprompt[disabled] .pp-ico { background: rgba(31, 78, 76, .07); }
.ecran-home .preprompt[disabled] .pp-ico svg { stroke: #7d8f8d; }

/* ════════════ MASCOTTE VULPI ANIMÉE (portage vanilla du handoff React) ════════════
   Le composant d'origine met ses animations en style inline ; ici tout passe par des
   CLASSES (CSP + conventions du repo). Géométrie et timings repris à l'identique.
   Humeurs : content · neutre · happy · grumpy · thinking — les 5 groupes de traits
   coexistent et se croisent en opacité (pas de remontage). ════════════ */
@keyframes vulpi-pop { 0% { transform: scale(0); opacity: 0; } 68% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes vulpi-drop { 0% { transform: translateY(-26px) scale(.7); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes vulpi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vulpi-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-1.6px) rotate(-1deg); } 75% { transform: translateY(-1.6px) rotate(1deg); } }
@keyframes vulpi-twitch { 0%, 86%, 100% { transform: rotate(0deg); } 90% { transform: rotate(-7deg); } 95% { transform: rotate(4deg); } }
@keyframes vulpi-think { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }

.vulpi { display: block; overflow: visible; }
.vulpi .vp-tout, .vulpi .vp-tete, .vulpi .vp-museau, .vulpi .vp-nez,
.vulpi .vp-oreille, .vulpi .vp-oreille > path, .vulpi .vp-bulle {
  transform-box: fill-box; transform-origin: center;
}
.vulpi .vp-oreille { transform-origin: bottom; }

/* les 5 jeux de traits se croisent en fondu */
.vulpi .vp-traits > g { opacity: 0; transition: opacity .35s ease; }
.vulpi[data-humeur="content"]  .vp-content,
.vulpi[data-humeur="neutre"]   .vp-neutre,
.vulpi[data-humeur="happy"]    .vp-happy,
.vulpi[data-humeur="grumpy"]   .vp-grumpy,
.vulpi[data-humeur="thinking"] .vp-thinking { opacity: 1; }

/* la bulle de pensée ne pulse QUE pendant la réflexion */
.vulpi[data-humeur="thinking"] .vp-bulle { animation: vulpi-think 1.8s ease-in-out infinite; }
.vulpi[data-humeur="thinking"] .vp-bulle2 { animation-delay: .25s; }
.vulpi[data-humeur="thinking"] .vp-bulle3 { animation-delay: .5s; }

/* respiration : balancement de tête + frémissement d'oreilles */
.vulpi-idle .vp-tout { animation: vulpi-bob 5s ease-in-out infinite; }
.vulpi-idle .vp-oreille { animation: vulpi-twitch 6s ease-in-out infinite; }
.vulpi-idle .vp-oreille-d { animation-delay: 3s; }

/* construction : la marque se monte pièce par pièce */
.vulpi-build .vp-tete   { animation: vulpi-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.vulpi-build .vp-oreille-g > path { animation: vulpi-drop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .24s; }
.vulpi-build .vp-oreille-d > path { animation: vulpi-drop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .32s; }
.vulpi-build .vp-museau { animation: vulpi-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .42s; }
.vulpi-build .vp-nez    { animation: vulpi-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .62s; }
.vulpi-build .vp-traits { animation: vulpi-fade .4s both; animation-delay: .66s; }

@media (prefers-reduced-motion: reduce) {
  .vulpi, .vulpi * { animation: none !important; }
}

/* ════════════ Titre d'accueil : reveal MOT À MOT (handoff « VulpiGreeting ») ════════════
   Chaque mot émerge d'un léger flou en montant, en cascade. Le composant d'origine pose
   ses délais en style inline ; ici le rang du mot arrive via --i et la cadence vit dans
   le CSS. La typo reste FRAUNCES (police de titre de l'app) : le handoff proposait
   Roboto Slab, qui serait une police de plus à charger. ════════════ */
@keyframes vulpiMot {
  0%   { opacity: 0; filter: blur(var(--flou, 9px)); transform: translateY(var(--monte, 9px)); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.salut-anime { text-wrap: balance; }
.salut-anime .salut-mot {
  display: inline-block;
  opacity: 0;
  animation: vulpiMot .55s ease-out both;
  animation-delay: calc(.35s + var(--i, 0) * .09s);
}
/* mobile : titre plus petit → flou et montée proportionnés, cascade un peu plus vive
   (la phrase passe sur 2-3 lignes, on ne veut pas attendre la fin) */
@media (max-width: 899px) {
  .salut-anime .salut-mot {
    --flou: 6px; --monte: 6px;
    animation-duration: .48s;
    animation-delay: calc(.28s + var(--i, 0) * .07s);
  }
}
@media (prefers-reduced-motion: reduce) {
  .salut-anime .salut-mot {
    animation: none; opacity: 1; filter: none; transform: none;
  }
}

/* ════════════ Rail bureau v117 — chaque entrée devient une CARTE ════════════
   Avant : seul l'onglet actif portait une carte, les autres étaient transparents.
   Maintenant : carte crème par défaut, BLANCHE quand on est sur la page. Les
   chapitres adoptent le même gabarit, avec l'icône des quatre opérations. Le
   débordement de l'actif sur la feuille est conservé (posé plus haut). */
@media (min-width: 900px) {
  .tabbar .tchip {
    background: #FAF6EF;
    box-shadow: 0 1px 2px rgba(33, 30, 43, .05);
  }
  .tabbar .tab:not(.actif):hover .tchip { background: #FDFBF7; color: var(--encre); }
  .tab.actif .tchip {
    background: #FFF;
    box-shadow: 0 5px 16px -8px rgba(33, 30, 43, .28);
  }
  /* la carte profil, elle, reste posée dans le rail (elle ne déborde pas) */
  .tab[data-tab="profil"] .tchip,
  .tab[data-tab="profil"].actif .tchip { background: #FFF; }

  /* ── les chapitres : même gabarit que les onglets ── */
  .rail-chapitres {
    gap: 6px; padding: 2px 0 0; margin: 6px 0 12px;
    border-bottom: 1px solid rgba(33, 30, 43, .10); padding-bottom: 14px;
  }
  .rc-label { padding: 6px 14px 8px; }
  .rc-item {
    gap: 13px; padding: 12px 14px; border-radius: 15px;
    background: #FAF6EF; box-shadow: 0 1px 2px rgba(33, 30, 43, .05);
    color: #5f574d; font-weight: 500;
  }
  .rc-item:hover { background: #FDFBF7; color: var(--encre); }
  .rc-ico { width: 20px; height: 20px; flex: none; display: block; }
  .rc-ico svg {
    width: 20px; height: 20px; display: block; fill: none;
    stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  }
  .rc-titre { font-size: 15.5px; }
  /* le chapitre sur lequel on est : terracotta plein */
  .rc-item.actif {
    background: var(--terracotta); color: #FCF7F0; font-weight: 600;
    box-shadow: 0 5px 16px -8px rgba(188, 90, 56, .6);
  }
  .rc-item.actif .rc-titre { font-weight: 600; }
}

/* ════════════ Accueil MOBILE v118 — d'après la maquette retravaillée ════════════
   En-tête centré (titre sur 2 lignes + renard dessous, sans sous-titre), deux
   raccourcis seulement — le devoir en terracotta, la génération en pétrole — chacun
   avec sa flèche. Les cartes « Bientôt » restent au bureau, pas en mobile. */
@media (max-width: 899px) {
  /* — en-tête centré — */
  .ecran-home .salutation {
    flex-direction: column; align-items: center; text-align: center; gap: 6px;
    margin-top: 8px;
  }
  .ecran-home .salutation h1 { order: 1; font: 600 30px/1.18 var(--font-titre); letter-spacing: -.3px; }
  .ecran-home .salutation img {
    order: 2; width: 46px; height: 46px;
    transform: translateX(28px);      /* le renard se glisse après la question, comme au design */
  }
  .home-sous { display: none; }        /* la maquette n'a plus de sous-titre */

  /* — deux raccourcis seulement : le label et les cartes « Bientôt » sortent — */
  .ecran-home .pp-label { display: none; }
  .ecran-home .preprompt[disabled] { display: none; }
  /* margin-bottom:auto pousse TOUT ce qui suit (Reprendre, erreur, composeur) en bas
     de l'écran quand le contenu est court — sinon le composeur flottait au milieu. */
  .ecran-home .preprompts { gap: 14px; margin-top: 10px; margin-bottom: auto; }

  /* — les cartes : icône · texte · flèche — */
  .ecran-home .preprompt {
    grid-template-columns: auto 1fr auto;
    column-gap: 15px; row-gap: 5px; padding: 17px 16px; border-radius: 20px;
  }
  .ecran-home .preprompt .pp-ico { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 15px; }
  .ecran-home .preprompt .pp-ico svg { width: 25px; height: 25px; }
  .ecran-home .preprompt .pp-titre { grid-column: 2; font: 600 19px/1.2 var(--font-titre); }
  .ecran-home .preprompt .pp-sous { grid-column: 2; font: 400 13.5px/1.4 var(--font-corps); }
  .ecran-home .preprompt::after {
    content: "→"; grid-column: 3; grid-row: 1 / span 2;
    align-self: center; font-size: 21px; line-height: 1; color: var(--terracotta);
  }

  /* le devoir : dégradé terracotta clair (inchangé), pastille crème */
  .ecran-home .preprompt[data-pp="devoir"] .pp-ico { background: #FCF4E9; }

  /* la génération : carte PÉTROLE */
  .ecran-home .preprompt[data-pp="generer"] {
    background: rgba(31, 78, 76, .07);
    border: 1px solid rgba(31, 78, 76, .32);
    box-shadow: none;
  }
  .ecran-home .preprompt[data-pp="generer"] .pp-ico { background: #D9E4E0; }
  .ecran-home .preprompt[data-pp="generer"] .pp-ico svg { stroke: var(--petrole); }
  .ecran-home .preprompt[data-pp="generer"]::after { color: var(--petrole); }
}

/* ════════════ v119 — le renard de la salutation devient la mascotte animée ════════════
   C'est un <svg class="vulpi"> et non plus un <img> : les règles de taille écrites
   plus haut (qui ciblaient img) ne mordent plus, on les repose ici. */
.ecran-home .salutation .vulpi { flex: none; width: 52px; height: 52px; }

@media (max-width: 899px) {
  /* le renard revient À GAUCHE du texte : on repasse la salutation en ligne */
  .ecran-home .salutation {
    flex-direction: row; align-items: center; justify-content: flex-start;
    text-align: left; gap: 12px;
  }
  .ecran-home .salutation h1 { order: 0; font-size: 27px; }
  .ecran-home .salutation .vulpi { order: 0; width: 46px; height: 46px; transform: none; }
}

/* ════════════ Récompenses v120 — écran étiré, pièce dans la DA, emplacement libre ════════════ */

/* — la PIÈCE reprend l'orange de la marque (elle tirait sur le jaune d'or) — */
.prc-coin { background: radial-gradient(circle at 34% 30%, #F8A44E, #DE7A28); color: #7B3D0E; }
.rec-coin-xl {
  background: radial-gradient(circle at 34% 30%, #F8A44E, #DE7A28);
  box-shadow: 0 12px 26px -8px rgba(190, 95, 25, .8), inset 0 3px 4px rgba(255, 255, 255, .5);
  color: #7B3D0E;
}
.rec-hero-glow { background: radial-gradient(circle, rgba(224, 123, 44, .32), transparent 70%); }
.rec-carte-cout { color: #B26A2A; }

/* — la note quitte la grille : elle ne vole plus une cellule, la 1re carte reste à GAUCHE — */
.rec-vide { text-align: left; padding: 0 0 14px; }

/* — la récompense maison, mise en avant — */
.rec-carte-vulpi {
  border-color: rgba(188, 90, 56, .3);
  background: linear-gradient(150deg, #FBEEE1, #F6DCC4);
  box-shadow: 0 14px 30px -20px rgba(188, 90, 56, .5);
}
.rec-carte-vulpi .rec-carte-ic { background: #FFF; box-shadow: 0 3px 10px -6px rgba(188, 90, 56, .5); }
.rec-carte-sig { font: 400 12.5px var(--font-corps); color: #8a6a4e; margin-top: 2px; }

/* — l'emplacement encore libre, EN POINTILLÉ, cliquable — */
.rec-carte-libre {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed rgba(154, 144, 134, .55); border-radius: 20px;
  background: transparent; padding: 20px 16px; text-align: center; cursor: pointer;
  font-family: var(--font-corps); transition: border-color .16s ease, background .16s ease;
}
.rec-carte-libre:hover { border-color: rgba(188, 90, 56, .5); background: rgba(188, 90, 56, .04); }
.rcl-plus {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px dashed rgba(154, 144, 134, .6); color: var(--terracotta);
}
.rcl-plus svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rcl-nom { font: 600 17px var(--font-titre); color: var(--encre); }
.rcl-tx { font: 400 13px/1.35 var(--font-corps); color: #a89d8e; max-width: 24ch; }

/* — la modale « À toi de jouer ! » — */
.rci-carte { text-align: center; align-items: center; padding: 30px 26px 24px; max-width: 380px; }
.rci-carte .prm-fermer { position: absolute; top: 14px; right: 14px; }
.rci-ic {
  width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
  background: #F6E0CE; margin: 4px auto 0;
}
.rci-ic svg { width: 30px; height: 30px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rci-titre { font: 600 26px var(--font-titre); color: var(--encre); margin: 16px 0 0; }
.rci-tx { font: 400 15px/1.5 var(--font-corps); color: #6b625a; margin: 10px 0 0; }
.rci-cta {
  width: 100%; margin-top: 22px; border: none; cursor: pointer; border-radius: 15px; padding: 14px 22px;
  background: var(--terracotta); color: #FFF8F0; font: 600 15.5px var(--font-corps);
  box-shadow: 0 4px 0 0 #8f3f24; transition: transform .06s ease, box-shadow .06s ease;
}
.rci-cta:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }

@media (min-width: 900px) {
  /* — plus ÉTIRÉ : la feuille borne ses enfants à 860px, on desserre ici — */
  .ecran-rec > .rec-corps { max-width: 1180px; }
  .rec-hero { padding: 30px 34px; border-radius: 26px; }
  .rec-hero-glow { width: 220px; height: 220px; right: -50px; top: -60px; }
  .rec-coin-xl { width: 92px; height: 92px; font-size: 40px; }
  .rec-hero-total b { font-size: 46px; }
  /* les cartes s'étalent : 2 par rangée quand il y en a peu, 3 dès qu'il y en a plus */
  .rec-boutique { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
  .rec-carte { padding: 20px; }
  .rec-carte-libre { min-height: 190px; }
}

/* ════════════ Ajustements v121 ════════════ */

/* — la modale « À toi de jouer ! » est une petite carte CENTRÉE, pas un bottom-sheet :
     .prm-overlay cale ses cartes en bas (justify-content:flex-end), on le neutralise ici — */
#modal-recomp-info { justify-content: center; align-items: center; padding: 20px; }
#modal-recomp-info .prm-carte {
  width: 100%; max-width: 380px; border-radius: 26px;
  box-shadow: 0 24px 60px -24px rgba(33, 30, 43, .55);
}

/* — l'icône « pièces » des Réglages : le dégradé de la pièce servait de fond au CARRÉ
     de 44px, avec une petite pièce ronde dedans → un bloc doré. La tuile redevient une
     pastille pâle comme ses voisines, et la vraie pièce s'affiche au centre. — */
@media (min-width: 900px) {
  .set-stat-ic.pie { background: #F7E4CE; box-shadow: none; }
  .set-stat-ic.pie .prc-coin { width: 26px; height: 26px; font-size: 13px; }
  /* le chip « Reprendre » collait au composeur : on lui donne de l'air */
  .ecran-home .reprendre { margin-top: 18px; }
}

/* — l'écran Jeux est mis de côté pour l'instant : l'onglet disparaît de la navigation
     (mobile ET bureau). L'écran, ses styles et /api/jeux restent en place — il suffira
     de retirer cette règle pour le rouvrir. — */
.tabbar .tab[data-tab="jeux"] { display: none; }

/* ════════════ v122 — barres mobiles alignées : titre à gauche, cagnotte à droite ════════════
   Récompenses et Réglages affichaient encore l'initiale du prénom là où tous les autres
   écrans portent le compteur de pièces. */
@media (max-width: 899px) {
  .ecran-rec .home-head .avatar,
  .ecran-profil .home-head .avatar { display: none; }
}

/* ════════════ v123 — Récompenses : la cagnotte de la barre s'efface derrière le héros ════════════
   On joue sur l'OPACITÉ (et non display) : la barre garde sa hauteur, rien ne saute. */
@media (max-width: 899px) {
  .ecran-rec .home-head .coin-counter { transition: opacity .22s ease, transform .22s ease; }
  .ecran-rec .home-head .coin-counter.cc-efface {
    opacity: 0; transform: translateY(-6px); pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ecran-rec .home-head .coin-counter { transition: none; }
  .ecran-rec .home-head .coin-counter.cc-efface { transform: none; }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .feuille-bureau::before { display: none; }
  .onb-etape:not([hidden]) .onb-corps > *, .onb-etape:not([hidden]) .onb-cta > *,
  .onb-etape:not([hidden]) .niveaux-bureau > .niveau-carte,
  .onb-etape:not([hidden]) .options .option,
  .onb-etape:not([hidden]) .chips > button,
  .hello-bureau > img, .hb-bulle, .hb-titre { animation: none; }
}
@keyframes hb-entre { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes carte-entre { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bulle-pop { from { opacity: 0; transform: translateY(18px) scale(.92) rotate(-.5deg); } to { opacity: 1; transform: rotate(-.5deg); } }
@keyframes fondu-papier { from { opacity: 1; } to { opacity: 0; } }

/* ════════════ DESKTOP — Accueil & sidebar d'après la maquette Claude Design ════════════
   (« Accueil Vulpi.dc.html », scope ≥900px, mobile intact) ─ palette maquette :
   backdrop greige #EBE4D6, feuille crème #FCFAF6, wordmark Fredoka. */
@media (min-width: 900px) {
  body { background: #EBE4D6; }

  /* ── le rail ── */
  .tabbar { width: 266px; padding: 30px 20px 22px; gap: 6px; background: #EBE4D6; }
  .rail-logo {
    display: flex; align-items: center; gap: 10px; padding: 0 10px 34px;
    font: 600 25px 'Fredoka', var(--font-corps); color: var(--encre); letter-spacing: .2px;
  }
  .rail-logo img { width: 34px; height: 34px; object-fit: contain; }

  /* onglets : transparents par défaut, seul l'actif prend la carte crème */
  .tabbar .tchip {
    gap: 13px; padding: 12px 14px; border-radius: 15px;
    background: transparent; border: none; box-shadow: none;
    color: #5f574d; font-weight: 500;
    transition: background .18s ease;
  }
  .tabbar .tlab { font-size: 15.5px; }
  .tabbar .tchip svg { color: currentColor; }
  .tabbar .tab:not(.actif):hover .tchip { background: rgba(33, 30, 43, .05); }
  .tab.actif .tchip {
    background: #FCFAF6; border: none; color: var(--encre);
    box-shadow: 0 5px 16px -8px rgba(33, 30, 43, .28);
  }
  .tab.actif .tchip svg { color: var(--terracotta); }

  /* la carte profil épinglée en bas */
  .tab[data-tab="profil"] .tchip {
    gap: 12px; padding: 11px 12px; border-radius: 16px;
    background: #FCFAF6; box-shadow: 0 6px 18px -10px rgba(33, 30, 43, .3);
  }
  .tab[data-tab="profil"].actif .tchip { box-shadow: 0 6px 18px -10px rgba(33, 30, 43, .3); }
  .tab[data-tab="profil"]:hover .tchip { background: #FCFAF6; }
  .tab[data-tab="profil"] .rail-avatar { width: 40px; height: 40px; font-size: 17px; color: #F7F2E8; }
  .tab[data-tab="profil"] .tlab { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .tab[data-tab="profil"] .rail-nom { display: inline; font: 600 15px var(--font-corps); color: var(--encre); }
  .tab[data-tab="profil"] .rail-sous {
    display: inline; font: 400 12.5px var(--font-corps); color: var(--grege);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tab[data-tab="profil"] .rail-sous:empty::before { content: "Voir mon profil"; }

  /* ── la feuille (accueil) ── */
  .feuille-rail {
    margin: 14px 14px 14px 266px; border: none; border-radius: 26px;
    background: #FCFAF6; box-shadow: 0 10px 30px -18px rgba(33, 30, 43, .25);
    padding: 58px 48px 48px;
  }
  .ecran-home .home-centre { max-width: 860px; margin-inline: auto; gap: 0; }

  /* headline + sous-titre */
  .ecran-home .salutation { justify-content: flex-start; gap: 16px; }
  .ecran-home .salutation img { width: 52px; height: 52px; }
  .ecran-home .salutation h1 { font: 600 40px/1.05 var(--font-titre); letter-spacing: -.3px; color: var(--encre); }
  .home-sous { display: block; font: 400 17px/1.5 var(--font-corps); color: #6b625a; margin: 16px 0 0 68px; }

  /* raccourcis */
  .ecran-home .preprompts { margin-top: 34px; gap: 14px; }
  .pp-label {
    display: block; margin: 24px 0 2px; text-transform: uppercase;
    font: 600 12px var(--font-corps); letter-spacing: 1.6px; color: #a79b8b;
  }

  /* ── la bannière mise en avant : « M'aider sur un devoir » ── */
  .feuille-rail .preprompt[data-pp="devoir"] {
    column-gap: 20px; padding: 24px 26px; border-radius: 22px;
    border: 1px solid rgba(188, 90, 56, .28);
    background: linear-gradient(102deg, #F6E6D2, #EFD2B4);
    box-shadow: 0 14px 30px -16px rgba(188, 90, 56, .55);
  }
  .feuille-rail .preprompt[data-pp="devoir"]:hover {
    transform: translateY(-2px); box-shadow: 0 20px 38px -16px rgba(188, 90, 56, .6);
  }
  .preprompt[data-pp="devoir"] .pp-ico {
    width: 56px; height: 56px; border-radius: 16px; background: #FCF4E9;
    box-shadow: 0 4px 12px -6px rgba(188, 90, 56, .5);
  }
  .preprompt[data-pp="devoir"] .pp-ico svg { width: 26px; height: 26px; stroke: var(--terracotta); }
  .preprompt[data-pp="devoir"] .pp-titre { font: 600 24px var(--font-titre); }
  .preprompt[data-pp="devoir"] .pp-sous { font-size: 15px; color: #8a6a4e; }
  .preprompt[data-pp="devoir"]::after { color: var(--terracotta); font-size: 24px; }

  /* ── cartes secondaires ── */
  .feuille-rail .preprompt:not([data-pp="devoir"]) {
    padding: 18px 22px; border-radius: 20px;
    border: 1px solid rgba(154, 144, 134, .28); background: #FBF8F2;
  }
  .feuille-rail .preprompt:not([data-pp="devoir"]):hover {
    transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(33, 30, 43, .4);
  }
  .feuille-rail .preprompt:not([data-pp="devoir"]) .pp-ico { width: 48px; height: 48px; border-radius: 14px; }
  .feuille-rail .preprompt:not([data-pp="devoir"]) .pp-ico svg { width: 23px; height: 23px; }
  .feuille-rail .preprompt .pp-titre { font: 600 19px var(--font-titre); color: var(--encre); }
  .feuille-rail .preprompt .pp-sous { font-size: 14px; color: #6b625a; }
  .feuille-rail .preprompt[disabled] { opacity: .72; }
  .feuille-rail .preprompt[disabled] .pp-ico { background: #E7E1D4; }
  .feuille-rail .preprompt[disabled] .pp-ico svg { stroke: #8a8175; }
  .feuille-rail .preprompt .bientot {
    font: 600 11.5px var(--font-corps); letter-spacing: normal; color: var(--terracotta);
    background: rgba(188, 90, 56, .13); padding: 3px 10px; border-radius: 999px;
    margin-left: 8px; vertical-align: 1px;
  }

  /* ── composeur ── */
  .ecran-home .composeur-home {
    margin-top: 26px; background: #FBF8F2;
    border: 1px solid rgba(154, 144, 134, .32); border-radius: 22px;
    padding: 20px 22px 16px;
  }
}

/* ════════════ v61 — sidebar : l'onglet actif prend TOUTE la largeur ════════════
   Le fond crème de l'onglet actif remplit la sidebar bord à bord et se raccorde à
   la feuille de contenu (même crème) ; l'icône + le texte restent alignés avec les
   onglets inactifs. Le logo, les onglets et le profil partagent le même retrait. */
@media (min-width: 900px) {
  .tabbar { padding: 30px 0 22px; }
  .rail-logo { padding: 0 22px 34px; }
  /* onglets pleine largeur : le retrait vit dans le padding du chip (contenu à 22px) */
  .tabbar .tchip { padding: 12px 22px; border-radius: 0; }
  .tab.actif .tchip { background: #FCFAF6; box-shadow: none; }   /* bande crème raccordée à la feuille */
  /* le profil reste une carte flottante, en retrait */
  .tab[data-tab="profil"] { padding: 0 20px; }
  .tab[data-tab="profil"] .tchip {
    padding: 11px 12px; border-radius: 16px;
    box-shadow: 0 6px 18px -10px rgba(33, 30, 43, .3);
  }
}

/* v61b — le chip doit REMPLIR la largeur de l'onglet (sinon il se rétrécit au contenu) */
@media (min-width: 900px) {
  .tabbar .tab { display: flex; }
  .tabbar .tchip { flex: 1 1 auto; justify-content: flex-start; }
}

/* ════════════ v63 — LA LEÇON + sidebar qui déborde (maquette « Leçon Vulpi ») ════════════ */
/* base mobile : l'onglet leçon n'existe qu'au bureau (la capsule reste à 5 items) */
.tabbar .tab-lecon { display: none; }    /* ≥ la spécificité de .tabbar .tab */
/* « Mes chapitres » : rail bureau uniquement — la capsule mobile ne les montre jamais */
.rail-chapitres { display: none; }

@media (min-width: 900px) {
  /* ── sidebar : les onglets redeviennent des cartes arrondies, et l'ACTIF
        DÉBORDE sur la feuille (le geste Aristotle que Mathieu adore).
        Sa couleur se personnalise par onglet via --tab-teinte. ── */
  .tabbar { padding: 30px 0 22px 12px; overflow: visible; }
  .rail-logo { padding: 0 10px 34px; }
  .tabbar .tab { display: flex; overflow: visible; }
  .tabbar .tab-lecon { display: flex; }
  .tabbar .tchip {
    flex: 1; margin: 0; padding: 12px 14px; border-radius: 15px;
    background: transparent; box-shadow: none;
    transition: background .18s ease;
  }
  .tab.actif .tchip {
    background: var(--tab-teinte, #FCFAF6);
    box-shadow: 0 5px 16px -8px rgba(33, 30, 43, .28);
    margin-right: -26px; padding-right: 40px;   /* ça déborde sur la feuille */
    position: relative; z-index: 2;
  }
  /* la carte profil ne déborde pas : elle reste posée dans la sidebar */
  .tab[data-tab="profil"] { padding-right: 20px; }
  .tab[data-tab="profil"] .tchip,
  .tab[data-tab="profil"].actif .tchip {
    margin-right: 0; padding: 11px 12px; border-radius: 16px;
    background: #FCFAF6; box-shadow: 0 6px 18px -10px rgba(33, 30, 43, .3);
  }

  /* ── l'écran leçon ── */
  .lecon-corps { max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; }
  .lecon-tete h1 { font: 600 44px/1 var(--font-titre); color: var(--encre); margin: 0; letter-spacing: -.4px; }
  .lecon-salut { font: 400 17px/1.5 var(--font-corps); color: #6b625a; margin: 14px 0 0; }
  .section-label {
    margin: 40px 0 16px; text-transform: uppercase;
    font: 600 12px var(--font-corps); letter-spacing: 1.6px; color: #a79b8b;
  }

  /* la bannière « Avancer sur cette piste » */
  .lecon-banniere {
    display: flex; align-items: center; gap: 22px; text-align: left;
    border: 1px solid rgba(188, 90, 56, .3); border-radius: 22px;
    padding: 26px 28px; cursor: pointer; font-family: var(--font-corps);
    background: linear-gradient(102deg, #EFD4B7, #E7B98D);
    box-shadow: 0 16px 34px -18px rgba(188, 90, 56, .6);
    transition: transform .16s ease, box-shadow .16s ease;
  }
  .lecon-banniere:hover { transform: translateY(-2px); box-shadow: 0 22px 42px -18px rgba(188, 90, 56, .65); }
  .lb-ico {
    width: 58px; height: 58px; flex: none; border-radius: 16px; background: #FCF4E9;
    display: grid; place-items: center; box-shadow: 0 4px 12px -6px rgba(188, 90, 56, .5);
  }
  .lb-ico svg { width: 27px; height: 27px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .lb-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .lb-titre { font: 600 26px var(--font-titre); color: var(--encre); }
  .lb-sous { font: 400 15px/1.4 var(--font-corps); color: #8a6a4e; }
  .lb-fleche { width: 27px; height: 27px; flex: none; fill: none; stroke: var(--terracotta); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

  /* la carte de maths */
  .lecon-carte {
    border: 1px solid rgba(154, 144, 134, .26); border-radius: 22px;
    background: #FBF8F2; padding: 26px 28px 30px;
  }
  .lc-legende {
    display: flex; align-items: center; gap: 26px;
    padding-bottom: 22px; border-bottom: 1px solid rgba(154, 144, 134, .22);
  }
  .lc-legende span { display: inline-flex; align-items: center; gap: 9px; font: 500 14px var(--font-corps); color: #6b625a; }
  .lc-chapitre-titre {
    margin-top: 24px; display: flex; align-items: center; gap: 10px;
    font: 600 12px var(--font-corps); letter-spacing: 1.4px; text-transform: uppercase; color: #8a8175;
  }
  .lc-chapitre.en-cours .lc-chapitre-titre { color: var(--terracotta); }
  .lc-badge {
    font: 600 11px var(--font-corps); letter-spacing: normal; text-transform: none;
    color: var(--terracotta); background: rgba(188, 90, 56, .13);
    padding: 3px 9px; border-radius: 999px;
  }
  .lc-rangee { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
  .lc-pilule {
    width: 56px; height: 31px; flex: none; border-radius: 999px; display: inline-block;
    background: #EBE1D0; border: 1.5px solid rgba(154, 144, 134, .45);
  }
  .lc-pilule.mini { width: 26px; height: 15px; }
  .lc-pilule.faite { background: var(--terracotta); border-color: var(--terracotta); }
  .lc-pilule.encours { background: linear-gradient(90deg, #BC5A38 0 50%, #EBE1D0 50% 100%); border-color: var(--terracotta); }
  .lc-lien { width: 24px; flex: none; border-top: 2px dotted #cdc2af; }

  /* séances récentes */
  .lecon-seances { display: flex; flex-direction: column; gap: 12px; }
  .lecon-seance {
    display: flex; align-items: center; gap: 16px; text-align: left;
    border: 1px solid rgba(154, 144, 134, .26); border-radius: 18px;
    padding: 16px 20px; cursor: pointer; background: #FBF8F2; font-family: var(--font-corps);
    transition: transform .16s ease, box-shadow .16s ease;
  }
  .lecon-seance:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(33, 30, 43, .4); }
  .ls-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; background: #F3E1D4; display: grid; place-items: center; }
  .ls-ico svg { width: 21px; height: 21px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .ls-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .ls-tx b { font: 600 16px var(--font-corps); color: var(--encre); }
  .ls-sous { font: 400 13.5px var(--font-corps); color: #6b625a; }
  .ls-date { font: 400 13.5px var(--font-corps); color: var(--grege); flex: none; }
}

/* v64 — l'onglet leçon porte le chapitre en cours : les intitulés officiels sont
   longs (« Équations et fonctions polynômes du second degré ») → une ligne, ellipse */
@media (min-width: 900px) {
  .tab-lecon .tchip { min-width: 0; }
  .tab-lecon .tlab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* « MES CHAPITRES » — sous « Suivi » dans le rail : raccourcis vers la leçon de chaque
   chapitre travaillé, le courant surligné terracotta. Se peuple tout seul (majRailChapitres). */
@media (min-width: 900px) {
  .rail-chapitres { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px 2px; margin: 4px 0 8px; }
  .rail-chapitres[hidden] { display: none; }
  .rc-label { padding: 8px 12px 6px; text-transform: uppercase; font: 600 10.5px var(--font-corps); letter-spacing: 1.3px; color: #a79b8b; }
  .rc-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: transparent; border-radius: 12px; padding: 9px 12px; cursor: pointer; font-family: var(--font-corps); color: #6b625a; transition: background .16s ease, color .16s ease; }
  .rc-item:hover { background: rgba(33, 30, 43, .05); color: var(--encre); }
  .rc-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--terracotta); }
  .rc-maitrise .rc-dot { background: var(--petrole); }
  .rc-titre { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 13.5px var(--font-corps); }
  .rc-item.actif { background: var(--terracotta); color: #FCF7F0; box-shadow: 0 5px 16px -8px rgba(188, 90, 56, .6); }
  .rc-item.actif .rc-dot { background: #FCF7F0; }
  .rc-item.actif .rc-titre { font-weight: 600; }
}

/* ════════════ v65 — la carte = les NOTIONS du chapitre en cours, cliquables ════════════ */
@media (min-width: 900px) {
  /* les pilules sont maintenant des boutons : reset + cible de clic confortable */
  .lc-rangee { gap: 9px; margin-top: 8px; }
  button.lc-pilule {
    padding: 0; font: inherit; cursor: pointer; position: relative;
    box-sizing: border-box; -webkit-appearance: none; appearance: none;
    transition: transform .13s ease, box-shadow .13s ease, filter .13s ease;
  }
  button.lc-pilule:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -8px rgba(33, 30, 43, .4);
    filter: brightness(1.02);
  }
  button.lc-pilule:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
  button.lc-pilule:active { transform: translateY(0); }

  /* la bulle du nom de notion, façon Aristotle — apparaît au survol / focus.
     Nos intitulés sont longs → bulle qui s'enroule, largeur bornée. */
  .lc-pilule[data-notion]::after {
    content: attr(data-notion);
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px);
    background: #2C2622; color: #F7F1E8; text-align: left;
    font: 500 12.5px/1.35 var(--font-corps); letter-spacing: .1px;
    padding: 9px 12px; border-radius: 11px; width: max-content; max-width: 250px;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
    opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease;
    z-index: 40;
  }
  .lc-pilule[data-notion]::before {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px);
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent; border-top-color: #2C2622;
    opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; z-index: 40;
  }
  .lc-pilule[data-notion]:hover::after, .lc-pilule[data-notion]:focus-visible::after,
  .lc-pilule[data-notion]:hover::before, .lc-pilule[data-notion]:focus-visible::before {
    opacity: 1; transform: translateX(-50%) translateY(0);
  }
}

/* ════════════ v67 — carte à deux niveaux : une rangée par notion, pilules = sous-notions ════════════ */
@media (min-width: 900px) {
  .lc-notion {
    display: flex; align-items: center; gap: 16px;
    padding: 13px 0; border-bottom: 1px solid rgba(154, 144, 134, .14);
  }
  .lc-notion:last-child { border-bottom: 0; }
  .ln-tx { flex: 1; min-width: 0; }
  .ln-ti { font: 500 15px var(--font-corps); color: var(--encre); }
  .ln-sub { font: 400 12.5px var(--font-corps); color: var(--grege); margin-top: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ln-pills { display: flex; align-items: center; gap: 7px; flex: none; }
  /* dans une rangée les pilules sont un peu plus compactes que la légende */
  .ln-pills .lc-pilule { width: 46px; height: 26px; }

  .ln-badge {
    flex: none; min-width: 74px; text-align: right;
    font: 500 12.5px var(--font-corps); color: var(--grege);
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px;
  }
  .ln-badge.faite { color: var(--terracotta); }
  .ln-badge.encours { color: #8a8175; }
  .ln-badge.todo { color: #b7aca0; }
  .ln-badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
                  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
}

/* ════════════ v70 — pilules à remplissage gradué (niveau 0→4, modèle Aristotle) ════════════ */
@media (min-width: 900px) {
  /* la pilule de la carte se remplit par le bas, proportionnellement au niveau ;
     plus de classes .faite/.encours ici — c'est la hauteur de .pf qui parle */
  .ln-pills .lc-pilule {
    position: relative; background: #EBE1D0; border: 1.5px solid rgba(154, 144, 134, .45);
  }
  .ln-pills .lc-pilule.demarre { border-color: var(--terracotta); }
  /* cadre clippé (ne rogne PAS la bulle ::after, qui vit sur le bouton) */
  .lc-pilule .pf-wrap {
    position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none;
  }
  .lc-pilule .pf {
    position: absolute; left: 0; right: 0; bottom: 0; height: 0;
    background: var(--terracotta); transition: height .3s cubic-bezier(.2, .9, .3, 1);
  }
}

/* ════════════ v71 — bouton « Leçon guidée » (mode leçon : Vulpi mène) ════════════ */
.lecon-guidee { display: none; }
@media (min-width: 900px) {
  .lecon-guidee {
    display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
    margin-top: 12px; padding: 12px 20px; border-radius: 999px; cursor: pointer;
    font: 500 14.5px var(--font-corps); color: var(--petrole);
    background: transparent; border: 1.5px solid rgba(31, 78, 76, .35);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .lecon-guidee:hover {
    background: rgba(31, 78, 76, .07); transform: translateY(-1px);
    box-shadow: 0 8px 18px -12px rgba(31, 78, 76, .5);
  }
  .lecon-guidee svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
                      stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
}

/* ════════════ Leçon MOBILE (« Mathématiques ») — le desktop vit dans les blocs min-width:900px ;
   ici tout est scopé max-width:899px, donc aucun impact sur le bureau. La top-bar (Retour +
   pièces) n'existe qu'en mobile ; sur bureau le rail gère la navigation. ════════════ */
.lecon-topbar { display: none; }              /* base : masquée (le bureau utilise le rail) */

@media (max-width: 899px) {
  .lecon-topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 8;
    padding: calc(8px + var(--sur, 0px)) 16px 8px; background: var(--sable);
  }
  #ecran-lecon { padding-bottom: calc(92px + var(--sous, 0px)); }   /* dégage la capsule de nav */
  .lecon-corps { display: flex; flex-direction: column; padding: 20px 16px 20px; }
  .lecon-tete h1 { font: 600 25px/1.15 var(--font-titre); color: var(--encre); margin: 0; letter-spacing: -.3px; }
  .lecon-salut { font: 400 14.5px/1.5 var(--font-corps); color: #6b625a; margin: 6px 0 0; }
  .section-label { margin: 24px 0 12px; text-transform: uppercase; font: 600 11.5px var(--font-corps); letter-spacing: 1.4px; color: #a79b8b; }

  /* bannière « Avancer sur cette piste » */
  .lecon-banniere {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    border: none; border-radius: 20px; padding: 16px 18px; cursor: pointer; font-family: var(--font-corps);
    background: linear-gradient(102deg, #EFD4B7, #E7B98D);
    box-shadow: 0 12px 26px -16px rgba(188, 90, 56, .6);
    transition: transform .14s ease;
  }
  .lecon-banniere:active { transform: translateY(1px); }
  .lb-ico { width: 46px; height: 46px; flex: none; border-radius: 13px; background: #FCF4E9; display: grid; place-items: center; box-shadow: 0 3px 10px -6px rgba(188, 90, 56, .5); }
  .lb-ico svg { width: 23px; height: 23px; fill: none; stroke: var(--terracotta); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .lb-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .lb-titre { font: 600 18px var(--font-titre); color: var(--encre); }
  .lb-sous { font: 400 13px/1.35 var(--font-corps); color: #8a6a4e; }
  .lb-fleche { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--terracotta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* « Leçon guidée » — conservée sur mobile (ajout maison) */
  .lecon-guidee {
    display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
    margin-top: 10px; padding: 11px 16px; border-radius: 999px; cursor: pointer;
    font: 500 13.5px var(--font-corps); color: var(--petrole);
    background: transparent; border: 1.5px solid rgba(31, 78, 76, .35);
  }
  .lecon-guidee svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  /* carte de maths */
  .lecon-carte { border: 1px solid var(--bordure); border-radius: 18px; background: #FBF8F2; padding: 15px 15px 16px; }
  .lc-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 15px; padding-bottom: 13px; border-bottom: 1px solid rgba(154, 144, 134, .22); }
  .lc-legende span { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px var(--font-corps); color: #6b625a; }
  .lc-pilule.mini { width: 22px; height: 13px; flex: none; border-radius: 999px; display: inline-block; background: #EBE1D0; border: 1.5px solid rgba(154, 144, 134, .45); }
  .lc-pilule.mini.encours { background: linear-gradient(90deg, #BC5A38 0 50%, #EBE1D0 50% 100%); border-color: var(--terracotta); }
  .lc-pilule.mini.faite { background: var(--terracotta); border-color: var(--terracotta); }

  /* rangées : une notion = titre + pastilles d'étapes + badge d'état */
  .lc-notion { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(154, 144, 134, .14); }
  .lc-notion:last-child { border-bottom: 0; }
  .ln-tx { flex: 1; min-width: 0; }
  .ln-ti { font: 500 14px var(--font-corps); color: var(--encre); }
  .ln-sub { display: none; }                  /* énumération des sous-notions : trop dense en mobile */
  .ln-pills { display: flex; align-items: center; gap: 5px; flex: none; }
  .lc-lien { display: none; }                 /* connecteur pointillé : on garde juste le gap */
  button.lc-pilule {
    position: relative; width: 30px; height: 20px; flex: none; border-radius: 999px;
    padding: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; cursor: pointer;
    background: #EBE1D0; border: 1.5px solid rgba(154, 144, 134, .45);
  }
  button.lc-pilule.demarre { border-color: var(--terracotta); }
  button.lc-pilule:active { transform: translateY(1px); }
  .lc-pilule .pf-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
  .lc-pilule .pf { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--terracotta); transition: height .3s cubic-bezier(.2, .9, .3, 1); }
  .ln-badge { flex: none; min-width: 0; font: 500 11.5px var(--font-corps); color: var(--grege); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .ln-badge.faite { color: var(--terracotta); }
  .ln-badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

  /* séances récentes */
  .lecon-seances { display: flex; flex-direction: column; gap: 10px; }
  .lecon-seance { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--bordure); border-radius: 16px; padding: 13px 14px; cursor: pointer; background: #FBF8F2; font-family: var(--font-corps); transition: transform .14s ease; }
  .lecon-seance:active { transform: translateY(1px); }
  .ls-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; background: #F3E1D4; display: grid; place-items: center; }
  .ls-ico svg { width: 19px; height: 19px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .ls-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .ls-tx b { font: 600 15px var(--font-corps); color: var(--encre); }
  .ls-sous { font: 400 13px var(--font-corps); color: #6b625a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ls-date { font: 400 12.5px var(--font-corps); color: var(--grege); flex: none; }
}

/* ════════════ Accueil MOBILE (« Mon prof ») — d'après « Accueil Vulpi.dc.html ».
   Scopé max-width:899px : le bureau (bloc min-width:900px plus haut) n'est pas touché.
   Doit venir APRÈS « .home-sous, .pp-label { display:none } » pour les rétablir. ════════════ */
@media (max-width: 899px) {
  /* top-bar collante : renard + wordmark à gauche, cagnotte à droite */
  .ecran-home .home-head {
    position: sticky; top: 0; z-index: 8;
    padding: calc(8px + var(--sur, 0px)) 16px 8px; background: var(--sable);
  }
  .home-marque { display: inline-flex; align-items: center; gap: 8px; }
  .home-marque img { width: 28px; height: 28px; object-fit: contain; }
  /* le WORDMARK (accueil uniquement) : Fredoka. Ailleurs, cette place porte le TITRE de l'écran. */
  .ecran-home .home-logo { font: 600 21px 'Fredoka', var(--font-titre); color: var(--encre); letter-spacing: .2px; }
  .ecran-home .home-head .avatar { display: none; }   /* la cagnotte prend la place à droite */

  /* contenu aligné en haut et scrollable (plus de centrage vertical) */
  .ecran-home .home-centre { justify-content: flex-start; gap: 20px; padding: 20px 16px 0; }
  .ecran-home .salutation { justify-content: flex-start; gap: 12px; }
  .ecran-home .salutation img { width: 40px; height: 40px; }
  .ecran-home .salutation h1 { font: 600 26px/1.2 var(--font-titre); letter-spacing: -.2px; }
  .home-sous { display: block; font: 400 14.5px/1.5 var(--font-corps); color: #6b625a; margin: -6px 0 0; }

  /* raccourcis EMPILÉS (le mobile était en rangée à défilement horizontal) */
  .ecran-home .preprompts {
    display: flex; flex-direction: column; gap: 12px;
    overflow: visible; margin-inline: 0; padding-inline: 0; margin-top: 2px;
  }
  .pp-label {
    display: block; margin: 16px 0 2px; text-transform: uppercase;
    font: 600 11.5px var(--font-corps); letter-spacing: 1.5px; color: #a79b8b;
  }
  /* carte = icône à gauche, titre + sous-titre à droite */
  .ecran-home .preprompt {
    width: auto; flex: none; display: grid; grid-template-columns: auto 1fr;
    align-items: center; column-gap: 13px; row-gap: 3px;
    padding: 14px 15px; border-radius: 18px; text-align: left;
  }
  .ecran-home .preprompt .pp-ico { grid-row: 1 / span 2; align-self: center; }
  .ecran-home .preprompt .pp-titre { font: 600 16px var(--font-titre); color: var(--encre); }
  .ecran-home .preprompt .pp-sous { font: 400 13px/1.35 var(--font-corps); color: #6b625a; }

  /* la bannière mise en avant : « M'aider sur un devoir » */
  .ecran-home .preprompt[data-pp="devoir"] {
    padding: 17px 17px; border-radius: 20px;
    border: 1px solid rgba(188, 90, 56, .28);
    background: linear-gradient(102deg, #F6E6D2, #EFD2B4);
    box-shadow: 0 12px 26px -16px rgba(188, 90, 56, .55);
  }
  .ecran-home .preprompt[data-pp="devoir"] .pp-ico {
    width: 46px; height: 46px; border-radius: 14px; background: #FCF4E9;
    box-shadow: 0 3px 10px -6px rgba(188, 90, 56, .5);
  }
  .ecran-home .preprompt[data-pp="devoir"] .pp-ico svg { width: 23px; height: 23px; stroke: var(--terracotta); }
  .ecran-home .preprompt[data-pp="devoir"] .pp-titre { font-size: 18px; }
  .ecran-home .preprompt[data-pp="devoir"] .pp-sous { color: #8a6a4e; }

  /* cartes secondaires (active + « Bientôt ») */
  .ecran-home .preprompt:not([data-pp="devoir"]) {
    border: 1px solid rgba(154, 144, 134, .28); background: #FBF8F2;
  }
  .ecran-home .preprompt:not([data-pp="devoir"]) .pp-ico { width: 40px; height: 40px; border-radius: 12px; }
  .ecran-home .preprompt:not([data-pp="devoir"]) .pp-ico svg { width: 20px; height: 20px; }
  .ecran-home .preprompt:not([disabled]):active { transform: translateY(1px); }
  .ecran-home .preprompt[disabled] { opacity: .62; }
  .ecran-home .preprompt[disabled] .pp-ico { background: #E7E1D4; }
  .ecran-home .preprompt[disabled] .pp-ico svg { stroke: #8a8175; }

  /* composeur collé au-dessus de la capsule de nav ; Reprendre passe au-dessus de lui */
  .ecran-home .reprendre { order: 5; }
  .ecran-home #erreur-home { order: 6; }
  .ecran-home .composeur-home {
    order: 7; position: sticky; bottom: calc(96px + var(--sous, 0px)); z-index: 7;
    margin-top: 6px; padding: 13px 14px 11px; border-radius: 20px;
    box-shadow: 0 10px 26px -18px rgba(33, 30, 43, .45);
  }
}

/* ════════════ Écran JEUX (« Jeux Vulpi.dc.html ») — base = mobile, overrides bureau ensuite.
   Héro encre, défis en cartes, jeu de la semaine en pétrole. ════════════ */
.jeux-page { display: flex; flex-direction: column; padding: 20px 16px 20px; }
.jeux-titre { font: 600 26px/1.15 var(--font-titre); color: var(--encre); margin: 6px 0 0; letter-spacing: -.2px; }
.jeux-chapo { font: 400 14.5px/1.5 var(--font-corps); color: #6b625a; margin: 6px 0 0; }
.jeux-label { margin: 22px 0 10px; text-transform: uppercase; font: 600 11.5px var(--font-corps); letter-spacing: 1.5px; color: #a79b8b; }
.jeux-grille { display: flex; flex-direction: column; gap: 10px; }
.jeux-note { margin: 14px 0 0; padding: 11px 14px; border-radius: 14px; background: var(--terracotta-tint); color: var(--terracotta-fonce); font: 500 13.5px/1.4 var(--font-corps); }

/* pastille « pièces à gagner » (réutilise la pièce dorée des récompenses) */
.jx-pieces { display: inline-flex; align-items: center; gap: 6px; font: 600 13px 'Fredoka', var(--font-corps); color: #C08A2A; }
.jx-hero .jx-pieces { color: #F6C560; }

/* ── le héros : carte encre ── */
.jx-hero {
  margin-top: 16px; display: flex; flex-direction: column; gap: 14px;
  padding: 18px; border-radius: 22px;
  background: linear-gradient(150deg, #2A2534, #1A1722 70%);
  box-shadow: 0 18px 36px -22px rgba(33, 30, 43, .85);
}
.jx-hero-ic {
  width: 56px; height: 56px; flex: none; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(150deg, #C9663F, #A9482A);
  box-shadow: 0 0 26px -6px rgba(188, 90, 56, .75);
}
.jx-hero-ic svg { width: 28px; height: 28px; fill: none; stroke: #FCF4E9; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) { .jx-hero-ic { animation: jxPulse 2.4s ease-in-out infinite; } }
@keyframes jxPulse { 0%, 100% { box-shadow: 0 0 26px -6px rgba(188, 90, 56, .75); } 50% { box-shadow: 0 0 34px -2px rgba(188, 90, 56, .95); } }
.jx-hero-tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.jx-hero-sur { text-transform: uppercase; font: 600 11px var(--font-corps); letter-spacing: 1.5px; color: #E09A6E; }
.jx-hero-ti { font: 600 25px/1.1 var(--font-titre); color: #FCF7F0; }
.jx-hero-so { font: 400 13.5px/1.45 var(--font-corps); color: #B6ADA4; margin: 2px 0 0; }
.jx-metas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; }
.jx-meta { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--font-corps); color: #B6ADA4; }
.jx-meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* CTA façon Duolingo : relief pressé */
.jx-cta {
  width: 100%; border: none; cursor: pointer; border-radius: 15px; padding: 14px 22px;
  background: var(--terracotta); color: #FFF8F0;
  font: 600 15px var(--font-corps); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 4px 0 0 #8f3f24; transition: transform .06s ease, box-shadow .06s ease;
}
.jx-cta:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.jx-cta-petrole { background: var(--petrole); box-shadow: 0 4px 0 0 #14332f; }

/* ── autres défis ── */
.jx-carte {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  border: 1px solid rgba(154, 144, 134, .28); border-radius: 18px; background: #FBF8F2;
  padding: 14px 15px; cursor: pointer; font-family: var(--font-corps);
  transition: transform .14s ease, box-shadow .14s ease;
}
.jx-carte:active { transform: translateY(1px); }
.jx-carte.jx-bientot { opacity: .62; cursor: default; }
.jx-carte-ic { width: 42px; height: 42px; flex: none; border-radius: 13px; background: #DFE9E7; display: grid; place-items: center; }
.jx-carte-ic svg { width: 21px; height: 21px; fill: none; stroke: var(--petrole); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.jx-bientot .jx-carte-ic { background: var(--terracotta-tint); }
.jx-bientot .jx-carte-ic svg { stroke: var(--terracotta); }
.jx-carte-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.jx-carte-ti { font: 600 16px var(--font-titre); color: var(--encre); }
.jx-carte-so { font: 400 13px/1.35 var(--font-corps); color: #6b625a; }

/* ── le jeu de la semaine ── */
.jx-semaine {
  display: flex; flex-direction: column; gap: 13px; padding: 17px;
  border-radius: 20px; background: #DCE8E5; border: 1px solid rgba(31, 78, 76, .18);
}
.jx-semaine-ic { width: 52px; height: 52px; flex: none; border-radius: 15px; background: var(--petrole); display: grid; place-items: center; }
.jx-semaine-ic svg { width: 26px; height: 26px; fill: none; stroke: #E7F0EE; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.jx-semaine-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jx-semaine-ti { font: 600 21px/1.15 var(--font-titre); color: #14332f; }
.jx-semaine-so { font: 400 13.5px/1.45 var(--font-corps); color: #3d5f5c; margin: 2px 0 0; }

/* ══ bureau : héro et bannière en rangée, défis sur 2 colonnes ══ */
@media (min-width: 900px) {
  .feuille-rail .jeux-page { padding: 0; }
  .jeux-titre { font-size: 40px; margin-top: 2px; }
  .jeux-chapo { font-size: 16px; margin-top: 12px; }
  .jeux-label { margin: 30px 0 14px; letter-spacing: 1.6px; }
  .jeux-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .jx-hero { margin-top: 26px; flex-direction: row; align-items: center; gap: 24px; padding: 26px 28px; border-radius: 26px; }
  .jx-hero-ic { width: 84px; height: 84px; border-radius: 22px; }
  .jx-hero-ic svg { width: 40px; height: 40px; }
  .jx-hero-tx { flex: 1; }
  .jx-hero-ti { font-size: 33px; }
  .jx-hero-so { font-size: 15px; max-width: 52ch; }
  .jx-cta { width: auto; flex: none; padding: 15px 30px; border-radius: 16px; font-size: 15px; }

  .jx-carte { padding: 17px 20px; border-radius: 20px; }
  .jx-carte:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(33, 30, 43, .4); }
  .jx-carte.jx-bientot:hover { transform: none; box-shadow: none; }
  .jx-carte-ic { width: 46px; height: 46px; }
  .jx-carte-ti { font-size: 18px; }

  .jx-semaine { flex-direction: row; align-items: center; gap: 22px; padding: 24px 26px; border-radius: 24px; }
  .jx-semaine-ic { width: 74px; height: 74px; border-radius: 20px; }
  .jx-semaine-ic svg { width: 36px; height: 36px; }
  .jx-semaine-tx { flex: 1; }
  .jx-semaine-ti { font-size: 27px; }
  .jx-semaine-so { font-size: 14.5px; max-width: 56ch; }
}

/* ════════════ v75 — le geste du tableau : pose immédiate + annotation du prof ════════════ */
/* le calcul vient d'arriver (le prof n'a pas encore tranché) : présent, sans verdict */

/* l'ENTOURÉ du prof : ellipse au crayon pétrole, légèrement de travers (main levée) */
.formule-entouree > div { position: relative; display: inline-block; padding: 4px 16px; }
.formule-entouree > div::after {
  content: ""; position: absolute; inset: -4px -10px;
  border: 2.5px solid var(--petrole); border-radius: 48% 52% 50% 50% / 58% 55% 62% 52%;
  transform: rotate(-1.6deg); pointer-events: none; opacity: .85;
}
.formule-entouree .note-qui { color: var(--petrole); }

/* le geste s'anime quand le verdict tombe en direct */
.annote-vivant.formule-entouree > div::after { animation: entoure-pop .45s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes entoure-pop {
  from { opacity: 0; transform: rotate(-1.6deg) scale(1.18); }
  to   { opacity: .85; transform: rotate(-1.6deg) scale(1); }
}
.annote-vivant.formule-barree > div::after { animation-duration: .5s; }
@media (prefers-reduced-motion: reduce) {
  .annote-vivant.formule-entouree > div::after { animation: none; }
}

/* ════════════ v78 — mode leçon : l'énoncé de la marche s'écrit au tableau ════════════ */
.bloc-question {
  margin-top: 10px; padding: 14px 18px;
  background: color-mix(in srgb, var(--sable) 55%, transparent);
  border-left: 3px solid var(--petrole); border-radius: 0;
}
.q-label { display: block; font: 600 11px var(--font-corps); letter-spacing: 1.2px;
           text-transform: uppercase; color: var(--petrole); margin-bottom: 6px; }
.q-texte { font-size: 16.5px; color: var(--encre); line-height: 1.55; }

/* ════════════ v80 — vue DÉTAIL DE SÉANCE (design « Séance Vulpi », consultable parents) ════════════ */
/* LE PAPIER QUADRILLÉ — commun à TOUS les écrans élève, mobile ET bureau (1re des 3
   textures : quadrillé → carte blanche → ardoise crème, la profondeur qui aide à lire).
   Sélecteurs par id (spécificité 1,0,0) : ils passent devant `.feuille-bureau { background }`
   du bloc bureau, qui remettrait un crème uni. Le tableau (coach) et les écrans parent
   gardent leur propre fond. */
#ecran-home, #ecran-suivi, #ecran-lecon, #ecran-seance,
#ecran-recompenses, #ecran-jeux, #ecran-fiches, #ecran-profil {
  background-color: var(--creme);
  background-image:
    linear-gradient(rgba(33, 30, 43, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 30, 43, .05) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* LA RUPTURE : la barre du haut reste unie (sable) et opaque — la feuille quadrillée
   défile dessous. C'est ce contraste qui marque la coupure en haut de page. */
@media (max-width: 899px) {
  .ecran-home .home-head, .ecran-suivi .home-head, .ecran-jeux .home-head,
  .ecran-profil .home-head, .ecran-rec .home-head, .ecran-fiches .home-head, .lecon-topbar {
    position: sticky; top: 0; z-index: 8;
    padding: calc(8px + var(--sur, 0px)) 16px 8px;
    background: var(--sable); border-bottom: 1px solid rgba(154, 144, 134, .22);
  }
  /* C'EST LA BARRE qui absorbe l'encoche (var(--sur)) — l'écran ne doit donc PLUS
     ajouter de padding-top : sinon le fond quadrillé, peint sous ce padding, apparaît
     en bande au-dessus de la barre. On ne touche qu'au haut : le bas (dégagement de la
     capsule de nav) reste celui défini par chaque écran. */
  .ecran-home, .ecran-suivi, .ecran-jeux, .ecran-profil, .ecran-rec, .ecran-lecon, .ecran-fiches {
    padding-top: 0;
  }
  /* la flèche de retour : carrée arrondie (et non ronde) */
  .lecon-topbar .btn-rond { border-radius: 13px; }

  /* hors accueil, la barre porte le TITRE de l'écran (Fraunces) — pas le wordmark */
  .ecran-suivi .home-logo, .ecran-jeux .home-logo,
  .ecran-profil .home-logo, .ecran-rec .home-logo, .ecran-fiches .home-logo {
    font: 600 20px var(--font-titre); color: var(--encre); letter-spacing: -.2px;
  }
  /* le titre est passé dans la barre : on retire le doublon dans le contenu */
  .ecran-suivi .suivi-titre, .ecran-jeux .jeux-titre, .ecran-fiches .fic-titre { display: none; }
  .ecran-suivi .suivi-chapo, .ecran-jeux .jeux-chapo, .ecran-fiches .fic-chapo { margin-top: 10px; }
}
.seance-detail { max-width: none; margin: 0; padding: 6px 20px 44px; }

/* retour, en tête de page (lien texte façon Aristotle) */
.seance-retour {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 26px;
  border: none; background: transparent; cursor: pointer; padding: 0;
  font: 500 15px var(--font-corps); color: #6b625a; transition: color .16s ease;
}
.seance-retour:hover { color: var(--terracotta); }
.seance-retour svg { width: 19px; height: 19px; fill: none; stroke: currentColor;
                     stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.seance-h1 { font: 600 clamp(30px, 5.2vw, 44px)/1.06 var(--font-titre); color: var(--encre);
             margin: 0; letter-spacing: -.4px; }
.seance-meta { font: 400 15px var(--font-corps); color: var(--grege); margin: 16px 0 0; }

/* le bilan du prof — récit pour les parents, avec trait de surligneur */
.seance-bilan {
  font: 400 17px/1.6 var(--font-corps); color: #3f3a33; margin: 22px 0 0; max-width: 820px;
}
.seance-bilan .surligne {
  background: linear-gradient(180deg, transparent 55%, #F6D08A 55%);   /* trait de surligneur */
  color: inherit; padding: 0 1px; border-radius: 2px;
}
.bilan-attente { color: var(--grege); font-style: italic; }

/* la carte « Le tableau de Vulpi » */
.seance-board {
  margin-top: 30px; border: 1px solid rgba(154, 144, 134, .28); border-radius: 22px;
  background: #FFFFFF; box-shadow: 0 16px 34px -20px rgba(33, 30, 43, .34);
  padding: 26px 30px 30px;
}
.seance-board-head { display: flex; align-items: center; justify-content: space-between; }
.seance-board-marque { display: flex; align-items: center; gap: 10px; }
.seance-board-logo { width: 26px; height: 26px; object-fit: contain; display: block; }
.seance-board-label {
  font: 500 13px var(--font-corps); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--terracotta);
}
.seance-pdf {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid rgba(154, 144, 134, .4); border-radius: 11px; background: #FBF8F2;
  color: #5f574d; font: 600 13px var(--font-corps); padding: 8px 13px; transition: background .16s ease;
}
.seance-pdf:hover { background: rgba(33, 30, 43, .05); }
.seance-pdf svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
                  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* le tableau blanc rejoué — DÉFILABLE */
.seance-tableau {
  margin-top: 18px; border: 1px solid rgba(154, 144, 134, .3); border-radius: 16px;
  background: #FCFAF6; padding: 8px; max-height: 60vh; overflow-y: auto;
}
.seance-tableau .board-feuille { min-height: auto; padding: 22px 26px; }
.seance-tableau-vide { color: var(--grege); text-align: center; padding: 40px 20px; font-size: 15px; }

/* « reprendre la séance » — présent seulement si la séance n'était pas terminée */
.seance-cta { margin-top: 30px; max-width: 820px; }
.seance-reprendre {
  width: 100%; height: 56px; border: none; border-radius: 16px; cursor: pointer;
  background: var(--terracotta); color: #F7F2E8;
  font: 600 15px var(--font-corps); letter-spacing: .6px; text-transform: uppercase;
  box-shadow: 0 5px 0 0 #8f3f24; transition: transform .06s ease, box-shadow .06s ease;
}
.seance-reprendre:active { transform: translateY(4px); box-shadow: 0 1px 0 0 #8f3f24; }

/* toggle discret « voir la discussion » (le tableau reste la vue principale) */
.seance-toggle {
  display: inline-flex; align-items: center; gap: 9px; margin: 26px 0 0; padding: 11px 20px;
  border-radius: 999px; cursor: pointer; font: 500 14.5px var(--font-corps);
  color: var(--petrole); background: transparent; border: 1.5px solid rgba(31, 78, 76, .3);
  transition: background .15s ease;
}
.seance-toggle:hover, .seance-toggle.actif { background: rgba(31, 78, 76, .07); }
.seance-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
                     stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#seance-fil { margin-top: 18px; }

/* desktop : le contenu OCCUPE toute la feuille (pas de colonne étroite façon mobile) —
   la feuille-rail pose déjà la marge à gauche/droite, le contenu s'y aligne au cordeau */
@media (min-width: 900px) {
  #ecran-seance > .seance-detail { max-width: none; padding: 0 0 44px; }
  .seance-h1 { max-width: none; }
  /* le récit + le CTA gardent une largeur de lecture confortable */
  .seance-bilan { max-width: 900px; }
  .seance-cta { max-width: 900px; }
}

/* ── impression → PDF (sans dépendance) : on isole le détail de séance ── */
@media print {
  body.impression-seance { background: #fff; }
  body.impression-seance .rail, body.impression-seance .tabbar, body.impression-seance .grain,
  body.impression-seance .seance-retour, body.impression-seance .seance-pdf,
  body.impression-seance .seance-cta, body.impression-seance .seance-toggle {
    display: none !important;
  }
  body.impression-seance #ecran-seance {
    position: static; margin: 0; border: 0; box-shadow: none; inset: auto;
  }
  body.impression-seance .seance-board { border: 0; box-shadow: none; padding: 0; }
  body.impression-seance .seance-tableau { max-height: none; overflow: visible; }
  body.impression-seance .ecran:not(#ecran-seance) { display: none !important; }
}

/* ════════════ Ajustements v114 — placés en FIN de feuille pour passer devant les
   règles bureau/mobile écrites plus haut (même spécificité → la source la plus tardive
   gagne). ════════════ */

/* — Jeux : rien n'est jouable pour l'instant. Les CTA sont grisés et inertes, et le
     titre porte le badge « Bientôt ». Tout est piloté par `statut` côté back : le jour
     où un jeu sort, on repasse son statut à « actif » et le bouton reprend vie. — */
.jx-cta-off {
  background: #C9C2B6; color: #F6F2EA; box-shadow: 0 4px 0 0 #ABA396; cursor: default;
}
.jx-cta-off:active { transform: none; box-shadow: 0 4px 0 0 #ABA396; }
/* le badge s'accorde à son fond : ambré sur l'encre, pétrole sur la bannière */
.jx-hero-ti .bientot { background: rgba(224, 154, 110, .18); color: #E5A377; vertical-align: 6px; }
.jx-semaine-ti .bientot { background: rgba(31, 78, 76, .14); color: var(--petrole); vertical-align: 5px; }

/* — Accueil : les « autres raccourcis » adoptent le pétrole du bandeau Suivi
     (« 1 chapitre sur 11 entamé »). La bannière « devoir » garde son dégradé sable. — */
.ecran-home .preprompt:not([data-pp="devoir"]) {
  border: 1px solid rgba(31, 78, 76, .18);
  background: linear-gradient(120deg, #FCFAF6, #EEECE2);
}
.ecran-home .preprompt:not([data-pp="devoir"]) .pp-ico { background: rgba(31, 78, 76, .1); }
.ecran-home .preprompt:not([data-pp="devoir"]) .pp-ico svg { stroke: var(--petrole); }
/* les raccourcis « Bientôt » restent en retrait, dans la même famille pétrole */
.ecran-home .preprompt[disabled] .pp-ico { background: rgba(31, 78, 76, .07); }
.ecran-home .preprompt[disabled] .pp-ico svg { stroke: #7d8f8d; }

/* ════════════ MASCOTTE VULPI ANIMÉE (portage vanilla du handoff React) ════════════
   Le composant d'origine met ses animations en style inline ; ici tout passe par des
   CLASSES (CSP + conventions du repo). Géométrie et timings repris à l'identique.
   Humeurs : content · neutre · happy · grumpy · thinking — les 5 groupes de traits
   coexistent et se croisent en opacité (pas de remontage). ════════════ */
@keyframes vulpi-pop { 0% { transform: scale(0); opacity: 0; } 68% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes vulpi-drop { 0% { transform: translateY(-26px) scale(.7); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes vulpi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vulpi-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-1.6px) rotate(-1deg); } 75% { transform: translateY(-1.6px) rotate(1deg); } }
@keyframes vulpi-twitch { 0%, 86%, 100% { transform: rotate(0deg); } 90% { transform: rotate(-7deg); } 95% { transform: rotate(4deg); } }
@keyframes vulpi-think { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }

.vulpi { display: block; overflow: visible; }
.vulpi .vp-tout, .vulpi .vp-tete, .vulpi .vp-museau, .vulpi .vp-nez,
.vulpi .vp-oreille, .vulpi .vp-oreille > path, .vulpi .vp-bulle {
  transform-box: fill-box; transform-origin: center;
}
.vulpi .vp-oreille { transform-origin: bottom; }

/* les 5 jeux de traits se croisent en fondu */
.vulpi .vp-traits > g { opacity: 0; transition: opacity .35s ease; }
.vulpi[data-humeur="content"]  .vp-content,
.vulpi[data-humeur="neutre"]   .vp-neutre,
.vulpi[data-humeur="happy"]    .vp-happy,
.vulpi[data-humeur="grumpy"]   .vp-grumpy,
.vulpi[data-humeur="thinking"] .vp-thinking { opacity: 1; }

/* la bulle de pensée ne pulse QUE pendant la réflexion */
.vulpi[data-humeur="thinking"] .vp-bulle { animation: vulpi-think 1.8s ease-in-out infinite; }
.vulpi[data-humeur="thinking"] .vp-bulle2 { animation-delay: .25s; }
.vulpi[data-humeur="thinking"] .vp-bulle3 { animation-delay: .5s; }

/* respiration : balancement de tête + frémissement d'oreilles */
.vulpi-idle .vp-tout { animation: vulpi-bob 5s ease-in-out infinite; }
.vulpi-idle .vp-oreille { animation: vulpi-twitch 6s ease-in-out infinite; }
.vulpi-idle .vp-oreille-d { animation-delay: 3s; }

/* construction : la marque se monte pièce par pièce */
.vulpi-build .vp-tete   { animation: vulpi-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.vulpi-build .vp-oreille-g > path { animation: vulpi-drop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .24s; }
.vulpi-build .vp-oreille-d > path { animation: vulpi-drop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .32s; }
.vulpi-build .vp-museau { animation: vulpi-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .42s; }
.vulpi-build .vp-nez    { animation: vulpi-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .62s; }
.vulpi-build .vp-traits { animation: vulpi-fade .4s both; animation-delay: .66s; }

@media (prefers-reduced-motion: reduce) {
  .vulpi, .vulpi * { animation: none !important; }
}

/* ════════════ Titre d'accueil : reveal MOT À MOT (handoff « VulpiGreeting ») ════════════
   Chaque mot émerge d'un léger flou en montant, en cascade. Le composant d'origine pose
   ses délais en style inline ; ici le rang du mot arrive via --i et la cadence vit dans
   le CSS. La typo reste FRAUNCES (police de titre de l'app) : le handoff proposait
   Roboto Slab, qui serait une police de plus à charger. ════════════ */
@keyframes vulpiMot {
  0%   { opacity: 0; filter: blur(var(--flou, 9px)); transform: translateY(var(--monte, 9px)); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.salut-anime { text-wrap: balance; }
.salut-anime .salut-mot {
  display: inline-block;
  opacity: 0;
  animation: vulpiMot .55s ease-out both;
  animation-delay: calc(.35s + var(--i, 0) * .09s);
}
/* mobile : titre plus petit → flou et montée proportionnés, cascade un peu plus vive
   (la phrase passe sur 2-3 lignes, on ne veut pas attendre la fin) */
@media (max-width: 899px) {
  .salut-anime .salut-mot {
    --flou: 6px; --monte: 6px;
    animation-duration: .48s;
    animation-delay: calc(.28s + var(--i, 0) * .07s);
  }
}
@media (prefers-reduced-motion: reduce) {
  .salut-anime .salut-mot {
    animation: none; opacity: 1; filter: none; transform: none;
  }
}

/* ════════════ Rail bureau v117 — chaque entrée devient une CARTE ════════════
   Avant : seul l'onglet actif portait une carte, les autres étaient transparents.
   Maintenant : carte crème par défaut, BLANCHE quand on est sur la page. Les
   chapitres adoptent le même gabarit, avec l'icône des quatre opérations. Le
   débordement de l'actif sur la feuille est conservé (posé plus haut). */
@media (min-width: 900px) {
  .tabbar .tchip {
    background: #FAF6EF;
    box-shadow: 0 1px 2px rgba(33, 30, 43, .05);
  }
  .tabbar .tab:not(.actif):hover .tchip { background: #FDFBF7; color: var(--encre); }
  .tab.actif .tchip {
    background: #FFF;
    box-shadow: 0 5px 16px -8px rgba(33, 30, 43, .28);
  }
  /* la carte profil, elle, reste posée dans le rail (elle ne déborde pas) */
  .tab[data-tab="profil"] .tchip,
  .tab[data-tab="profil"].actif .tchip { background: #FFF; }

  /* ── les chapitres : même gabarit que les onglets ── */
  .rail-chapitres {
    gap: 6px; padding: 2px 0 0; margin: 6px 0 12px;
    border-bottom: 1px solid rgba(33, 30, 43, .10); padding-bottom: 14px;
  }
  .rc-label { padding: 6px 14px 8px; }
  .rc-item {
    gap: 13px; padding: 12px 14px; border-radius: 15px;
    background: #FAF6EF; box-shadow: 0 1px 2px rgba(33, 30, 43, .05);
    color: #5f574d; font-weight: 500;
  }
  .rc-item:hover { background: #FDFBF7; color: var(--encre); }
  .rc-ico { width: 20px; height: 20px; flex: none; display: block; }
  .rc-ico svg {
    width: 20px; height: 20px; display: block; fill: none;
    stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  }
  .rc-titre { font-size: 15.5px; }
  /* le chapitre sur lequel on est : terracotta plein */
  .rc-item.actif {
    background: var(--terracotta); color: #FCF7F0; font-weight: 600;
    box-shadow: 0 5px 16px -8px rgba(188, 90, 56, .6);
  }
  .rc-item.actif .rc-titre { font-weight: 600; }
}

/* ════════════ Accueil MOBILE v118 — d'après la maquette retravaillée ════════════
   En-tête centré (titre sur 2 lignes + renard dessous, sans sous-titre), deux
   raccourcis seulement — le devoir en terracotta, la génération en pétrole — chacun
   avec sa flèche. Les cartes « Bientôt » restent au bureau, pas en mobile. */
@media (max-width: 899px) {
  /* — en-tête centré — */
  .ecran-home .salutation {
    flex-direction: column; align-items: center; text-align: center; gap: 6px;
    margin-top: 8px;
  }
  .ecran-home .salutation h1 { order: 1; font: 600 30px/1.18 var(--font-titre); letter-spacing: -.3px; }
  .ecran-home .salutation img {
    order: 2; width: 46px; height: 46px;
    transform: translateX(28px);      /* le renard se glisse après la question, comme au design */
  }
  .home-sous { display: none; }        /* la maquette n'a plus de sous-titre */

  /* — deux raccourcis seulement : le label et les cartes « Bientôt » sortent — */
  .ecran-home .pp-label { display: none; }
  .ecran-home .preprompt[disabled] { display: none; }
  /* margin-bottom:auto pousse TOUT ce qui suit (Reprendre, erreur, composeur) en bas
     de l'écran quand le contenu est court — sinon le composeur flottait au milieu. */
  .ecran-home .preprompts { gap: 14px; margin-top: 10px; margin-bottom: auto; }

  /* — les cartes : icône · texte · flèche — */
  .ecran-home .preprompt {
    grid-template-columns: auto 1fr auto;
    column-gap: 15px; row-gap: 5px; padding: 17px 16px; border-radius: 20px;
  }
  .ecran-home .preprompt .pp-ico { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 15px; }
  .ecran-home .preprompt .pp-ico svg { width: 25px; height: 25px; }
  .ecran-home .preprompt .pp-titre { grid-column: 2; font: 600 19px/1.2 var(--font-titre); }
  .ecran-home .preprompt .pp-sous { grid-column: 2; font: 400 13.5px/1.4 var(--font-corps); }
  .ecran-home .preprompt::after {
    content: "→"; grid-column: 3; grid-row: 1 / span 2;
    align-self: center; font-size: 21px; line-height: 1; color: var(--terracotta);
  }

  /* le devoir : dégradé terracotta clair (inchangé), pastille crème */
  .ecran-home .preprompt[data-pp="devoir"] .pp-ico { background: #FCF4E9; }

  /* la génération : carte PÉTROLE */
  .ecran-home .preprompt[data-pp="generer"] {
    background: rgba(31, 78, 76, .07);
    border: 1px solid rgba(31, 78, 76, .32);
    box-shadow: none;
  }
  .ecran-home .preprompt[data-pp="generer"] .pp-ico { background: #D9E4E0; }
  .ecran-home .preprompt[data-pp="generer"] .pp-ico svg { stroke: var(--petrole); }
  .ecran-home .preprompt[data-pp="generer"]::after { color: var(--petrole); }
}

/* ════════════ v119 — le renard de la salutation devient la mascotte animée ════════════
   C'est un <svg class="vulpi"> et non plus un <img> : les règles de taille écrites
   plus haut (qui ciblaient img) ne mordent plus, on les repose ici. */
.ecran-home .salutation .vulpi { flex: none; width: 52px; height: 52px; }

@media (max-width: 899px) {
  /* le renard revient À GAUCHE du texte : on repasse la salutation en ligne */
  .ecran-home .salutation {
    flex-direction: row; align-items: center; justify-content: flex-start;
    text-align: left; gap: 12px;
  }
  .ecran-home .salutation h1 { order: 0; font-size: 27px; }
  .ecran-home .salutation .vulpi { order: 0; width: 46px; height: 46px; transform: none; }
}

/* ════════════ Récompenses v120 — écran étiré, pièce dans la DA, emplacement libre ════════════ */

/* — la PIÈCE reprend l'orange de la marque (elle tirait sur le jaune d'or) — */
.prc-coin { background: radial-gradient(circle at 34% 30%, #F8A44E, #DE7A28); color: #7B3D0E; }
.rec-coin-xl {
  background: radial-gradient(circle at 34% 30%, #F8A44E, #DE7A28);
  box-shadow: 0 12px 26px -8px rgba(190, 95, 25, .8), inset 0 3px 4px rgba(255, 255, 255, .5);
  color: #7B3D0E;
}
.rec-hero-glow { background: radial-gradient(circle, rgba(224, 123, 44, .32), transparent 70%); }
.rec-carte-cout { color: #B26A2A; }

/* — la note quitte la grille : elle ne vole plus une cellule, la 1re carte reste à GAUCHE — */
.rec-vide { text-align: left; padding: 0 0 14px; }

/* — la récompense maison, mise en avant — */
.rec-carte-vulpi {
  border-color: rgba(188, 90, 56, .3);
  background: linear-gradient(150deg, #FBEEE1, #F6DCC4);
  box-shadow: 0 14px 30px -20px rgba(188, 90, 56, .5);
}
.rec-carte-vulpi .rec-carte-ic { background: #FFF; box-shadow: 0 3px 10px -6px rgba(188, 90, 56, .5); }
.rec-carte-sig { font: 400 12.5px var(--font-corps); color: #8a6a4e; margin-top: 2px; }

/* — l'emplacement encore libre, EN POINTILLÉ, cliquable — */
.rec-carte-libre {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed rgba(154, 144, 134, .55); border-radius: 20px;
  background: transparent; padding: 20px 16px; text-align: center; cursor: pointer;
  font-family: var(--font-corps); transition: border-color .16s ease, background .16s ease;
}
.rec-carte-libre:hover { border-color: rgba(188, 90, 56, .5); background: rgba(188, 90, 56, .04); }
.rcl-plus {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px dashed rgba(154, 144, 134, .6); color: var(--terracotta);
}
.rcl-plus svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rcl-nom { font: 600 17px var(--font-titre); color: var(--encre); }
.rcl-tx { font: 400 13px/1.35 var(--font-corps); color: #a89d8e; max-width: 24ch; }

/* — la modale « À toi de jouer ! » — */
.rci-carte { text-align: center; align-items: center; padding: 30px 26px 24px; max-width: 380px; }
.rci-carte .prm-fermer { position: absolute; top: 14px; right: 14px; }
.rci-ic {
  width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
  background: #F6E0CE; margin: 4px auto 0;
}
.rci-ic svg { width: 30px; height: 30px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rci-titre { font: 600 26px var(--font-titre); color: var(--encre); margin: 16px 0 0; }
.rci-tx { font: 400 15px/1.5 var(--font-corps); color: #6b625a; margin: 10px 0 0; }
.rci-cta {
  width: 100%; margin-top: 22px; border: none; cursor: pointer; border-radius: 15px; padding: 14px 22px;
  background: var(--terracotta); color: #FFF8F0; font: 600 15.5px var(--font-corps);
  box-shadow: 0 4px 0 0 #8f3f24; transition: transform .06s ease, box-shadow .06s ease;
}
.rci-cta:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }

@media (min-width: 900px) {
  /* — plus ÉTIRÉ : la feuille borne ses enfants à 860px, on desserre ici — */
  .ecran-rec > .rec-corps { max-width: 1180px; }
  .rec-hero { padding: 30px 34px; border-radius: 26px; }
  .rec-hero-glow { width: 220px; height: 220px; right: -50px; top: -60px; }
  .rec-coin-xl { width: 92px; height: 92px; font-size: 40px; }
  .rec-hero-total b { font-size: 46px; }
  /* les cartes s'étalent : 2 par rangée quand il y en a peu, 3 dès qu'il y en a plus */
  .rec-boutique { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
  .rec-carte { padding: 20px; }
  .rec-carte-libre { min-height: 190px; }
}

/* ════════════ Ajustements v121 ════════════ */

/* — la modale « À toi de jouer ! » est une petite carte CENTRÉE, pas un bottom-sheet :
     .prm-overlay cale ses cartes en bas (justify-content:flex-end), on le neutralise ici — */
#modal-recomp-info { justify-content: center; align-items: center; padding: 20px; }
#modal-recomp-info .prm-carte {
  width: 100%; max-width: 380px; border-radius: 26px;
  box-shadow: 0 24px 60px -24px rgba(33, 30, 43, .55);
}

/* — l'icône « pièces » des Réglages : le dégradé de la pièce servait de fond au CARRÉ
     de 44px, avec une petite pièce ronde dedans → un bloc doré. La tuile redevient une
     pastille pâle comme ses voisines, et la vraie pièce s'affiche au centre. — */
@media (min-width: 900px) {
  .set-stat-ic.pie { background: #F7E4CE; box-shadow: none; }
  .set-stat-ic.pie .prc-coin { width: 26px; height: 26px; font-size: 13px; }
  /* le chip « Reprendre » collait au composeur : on lui donne de l'air */
  .ecran-home .reprendre { margin-top: 18px; }
}

/* — l'écran Jeux est mis de côté pour l'instant : l'onglet disparaît de la navigation
     (mobile ET bureau). L'écran, ses styles et /api/jeux restent en place — il suffira
     de retirer cette règle pour le rouvrir. — */
.tabbar .tab[data-tab="jeux"] { display: none; }

/* ════════════ v122 — barres mobiles alignées : titre à gauche, cagnotte à droite ════════════
   Récompenses et Réglages affichaient encore l'initiale du prénom là où tous les autres
   écrans portent le compteur de pièces. */
@media (max-width: 899px) {
  .ecran-rec .home-head .avatar,
  .ecran-profil .home-head .avatar { display: none; }
}

/* ════════════ v123 — Récompenses : la cagnotte de la barre s'efface derrière le héros ════════════
   On joue sur l'OPACITÉ (et non display) : la barre garde sa hauteur, rien ne saute. */
@media (max-width: 899px) {
  .ecran-rec .home-head .coin-counter { transition: opacity .22s ease, transform .22s ease; }
  .ecran-rec .home-head .coin-counter.cc-efface {
    opacity: 0; transform: translateY(-6px); pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ecran-rec .home-head .coin-counter { transition: none; }
  .ecran-rec .home-head .coin-counter.cc-efface { transform: none; }
}

/* ════════════ MES FICHES — le carnet vivant (v124) ════════════
   Métaphore : un cahier qui se remplit tout seul. Base = MOBILE (page unique, reliure
   horizontale en haut) ; le bureau ouvre la double-page avec spirale centrale. */
.fic-page { display: flex; flex-direction: column; padding: 20px 16px 20px; }
.fic-titre { font: 600 26px/1.15 var(--font-titre); color: var(--encre); margin: 0; letter-spacing: -.2px; }
.fic-chapo { display: flex; align-items: baseline; gap: 8px; font: 400 14px/1.5 var(--font-corps); color: #6b625a; margin: 8px 0 0; }
.fic-puce { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--terracotta); }

/* intercalaires : chips scrollables en mobile */
.fic-onglets { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 4px; padding: 0 16px 2px; }
.fic-onglets::-webkit-scrollbar { display: none; }
.fic-onglet {
  flex: none; cursor: pointer; border-radius: 999px; padding: 9px 16px;
  border: 1px solid rgba(154, 144, 134, .3); background: #FBF8F2;
  font: 500 13.5px var(--font-corps); color: #6b625a; white-space: nowrap;
}
.fic-onglet.actif { background: var(--terracotta); border-color: var(--terracotta); color: #FCF7F0; font-weight: 600; }
.fic-vide { font: 400 14.5px/1.6 var(--font-corps); color: var(--grege); padding: 22px 2px; }

/* le cahier */
.fic-carnet[hidden], .fic-pagination[hidden], .fic-suivante[hidden] { display: none; }
.fic-carnet { position: relative; margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.fic-spirale {
  display: block; height: 20px; margin-bottom: -4px;
  background-image: radial-gradient(circle at 50% 55%, #CFC6B8 0 34%, transparent 36%);
  background-size: 34px 20px; background-repeat: repeat-x;
}
.fic-feuille {
  position: relative; border-radius: 14px; background: #FCFAF4;
  border: 1px solid rgba(154, 144, 134, .25); padding: 18px 16px 20px;
  box-shadow: 0 12px 28px -22px rgba(33, 30, 43, .5);
}
/* la page gauche : papier ligné + marge terracotta */
.fic-gauche {
  background-image: repeating-linear-gradient(rgba(33, 30, 43, .075) 0 1px, transparent 1px 30px);
  background-position: 0 44px;
}
.fic-gauche::before {
  content: ""; position: absolute; top: 12px; bottom: 12px; left: 34px;
  border-left: 1.5px solid rgba(188, 90, 56, .45);
}
.fic-gauche > * { position: relative; padding-left: 14px; }
.fic-chap { font: 600 12.5px var(--font-titre); font-style: italic; color: var(--terracotta); margin: 0; }
.fic-chap-titre { font: 600 21px/1.2 var(--font-titre); color: var(--encre); margin: 4px 0 0; }
.fic-section-lab { text-transform: uppercase; font: 600 10.5px var(--font-corps); letter-spacing: 1.4px; color: #a79b8b; margin: 4px 0 14px; }

.fic-formule { margin-top: 16px; }
.fic-formule-lab { font: 400 12.5px var(--font-corps); color: #6b625a; }
.fic-formule-val { font-family: "STIX Two Text", Georgia, serif; font-size: 17px; color: var(--encre); margin-top: 4px; }
/* la dernière formule récoltée, encadrée */
.fic-neuve {
  border: 1.5px dashed rgba(200, 154, 58, .55); border-radius: 12px;
  background: rgba(248, 207, 110, .1); padding: 12px 13px 13px; margin-left: -2px;
}
.fic-badge {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  background: #E9C46A; color: #6B4A12; padding: 3px 10px;
  font: 600 9.5px var(--font-corps); letter-spacing: 1.1px; margin-bottom: 8px;
}
.fic-badge i { width: 6px; height: 6px; border-radius: 50%; background: #8A5E14; }
@media (prefers-reduced-motion: no-preference) {
  .fic-badge i { animation: ficPulse 1.8s ease-in-out infinite; }
}
@keyframes ficPulse { 0%, 100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1); } }

/* la page droite : les déclics en Post-it */
.fic-declics-titre { display: flex; align-items: center; gap: 9px; font: 600 20px var(--font-titre); color: var(--encre); margin: 0; }
.fic-ampoule { width: 22px; height: 22px; flex: none; }
.fic-ampoule svg { width: 22px; height: 22px; fill: none; stroke: #C89A3A; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fic-declics-sous { font: 400 13px var(--font-corps); color: #6b625a; margin: 6px 0 16px; }
.fic-postits { display: flex; flex-direction: column; gap: 16px; perspective: 800px; }
.fic-postit {
  position: relative; padding: 16px 16px 13px; border-radius: 3px;
  transform: rotate(-1.2deg);
  box-shadow: 0 10px 22px -14px rgba(33, 30, 43, .55);
  transition: transform .18s ease, box-shadow .18s ease;
  transform-style: preserve-3d;
}
.fic-postit:nth-child(even) { transform: rotate(1.4deg); }
/* le ruban adhésif */
.fic-postit::before {
  content: ""; position: absolute; top: -8px; left: 50%; width: 62px; height: 17px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(255, 255, 255, .55); border-left: 1px solid rgba(255,255,255,.7); border-right: 1px solid rgba(255,255,255,.7);
}
.fic-postit.ton0 { background: linear-gradient(160deg, #F7D67E, #EFC163); }
.fic-postit.ton1 { background: linear-gradient(160deg, #F0B893, #E9A078); }
.fic-postit.ton2 { background: linear-gradient(160deg, #F6C560, #E3A733); }
.fic-postit-tx { font: 400 15px/1.5 var(--font-titre); font-style: italic; color: #3A2E18; margin: 0; }
.fic-postit-tx::before { content: "\00AB\00A0"; }
.fic-postit-tx::after { content: "\00A0\00BB"; }
.fic-postit-meta { font: 400 11.5px var(--font-corps); color: #7A6234; margin: 10px 0 0; }
.fic-rien { font: 400 13.5px/1.5 var(--font-corps); color: var(--grege); margin: 8px 0 0; }
.fic-corne { display: none; }

/* pagination */
.fic-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.fic-fleche {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(154, 144, 134, .35); background: #FBF8F2;
  font: 400 17px var(--font-corps); color: var(--encre); line-height: 1;
}
.fic-fleche:disabled { opacity: .35; cursor: default; }
.fic-compte { font: 500 13.5px var(--font-corps); color: #6b625a; min-width: 46px; text-align: center; }
.fic-points { display: inline-flex; gap: 6px; }
.fic-point { width: 7px; height: 7px; border-radius: 50%; background: rgba(154, 144, 134, .4); }
.fic-point.actif { background: var(--terracotta); }
.fic-suivante {
  align-self: center; margin-top: 12px; cursor: pointer; border-radius: 999px; padding: 10px 18px;
  border: 1px solid rgba(154, 144, 134, .35); background: #FBF8F2;
  font: 500 13.5px var(--font-corps); color: var(--encre);
}

/* l'animation de page qui se tourne */
@media (prefers-reduced-motion: no-preference) {
  .fic-tourne .fic-feuille { animation: ficTourne .34s ease-out both; }
}
@keyframes ficTourne {
  from { opacity: 0; transform: rotateY(-6deg) translateX(10px); }
  to   { opacity: 1; transform: none; }
}

/* ══════════ BUREAU : la double-page reliée par une spirale centrale ══════════ */
@media (min-width: 900px) {
  .feuille-rail .fic-page { padding: 0; }
  .fic-titre { font-size: 40px; }
  .fic-chapo { font-size: 16px; margin-top: 10px; }
  .ecran-fiches > .fic-page { max-width: none; }   /* la feuille borne à 860px : on remplit */

  /* Le carnet n'est PAS une carte : ce sont deux pages posées sur le bureau — une page
     gauche réglée à même le papier, un dos gris, une feuille blanche par-dessus à droite. */
  .fic-carnet {
    flex-direction: row; align-items: stretch; gap: 0;
    margin: 30px 66px 0 0; max-width: 820px; min-height: 470px;
    background: none; box-shadow: none; border-radius: 0;
    perspective: 1400px;
  }

  /* les intercalaires DÉBORDENT sur le bord droit du carnet, comme des onglets de classeur */
  .fic-onglets {
    flex-direction: column; gap: 7px; overflow: visible;
    position: absolute; left: auto; right: -66px; top: 54px; z-index: 4;
    margin: 0; padding: 0; width: 118px;
  }
  .fic-onglet {
    width: 100%; text-align: left; white-space: normal; line-height: 1.25;
    border-radius: 0 10px 10px 0; border-left: none;
    padding: 9px 12px 9px 13px; font-size: 12.5px;
    box-shadow: 5px 6px 14px -9px rgba(33, 30, 43, .7);
    transition: transform .15s ease;
  }
  .fic-onglet:hover { transform: translateX(4px); }

  /* page gauche : papier réglé pleine hauteur, marge terracotta d'un bord à l'autre */
  .fic-feuille { flex: 1; min-width: 0; border: none; border-radius: 0; box-shadow: none; }
  .fic-gauche {
    flex: 0 0 45%; background-color: transparent; border-radius: 0;
    background-position: 0 0; padding: 32px 56px 40px 42px;
  }
  .fic-gauche::before { top: 0; bottom: 0; left: 22px; }
  .fic-gauche > * { padding-left: 0; }

  /* la reliure : un dos gris où sont pincés les anneaux */
  .fic-spirale {
    position: absolute; left: 45%; top: 0; bottom: 0; width: 44px; height: auto;
    transform: none; margin: 0; z-index: 2; border: none; border-radius: 3px;
    background-color: #DCD5C9;
    background-image:
      radial-gradient(ellipse 13px 4.5px at 50% 50%, #ADA396 0 60%, transparent 62%),
      linear-gradient(90deg, rgba(33, 30, 43, .14), rgba(33, 30, 43, 0) 26%,
                             rgba(255, 255, 255, .55) 50%, rgba(33, 30, 43, 0) 74%,
                             rgba(33, 30, 43, .14));
    background-size: 44px 46px, 100% 100%;
    background-repeat: repeat-y, no-repeat;
  }

  /* page droite : une vraie feuille blanche posée par-dessus le bureau */
  .fic-droite {
    margin-left: 44px; z-index: 3; border-radius: 14px;
    background: #FDFBF6; padding: 28px 30px 36px;
    box-shadow: -18px 16px 44px -26px rgba(33, 30, 43, .75);
  }
  .fic-chap-titre { font-size: 26px; }
  .fic-formule-val { font-size: 19px; }

  /* le coin de page corné, en bas à droite */
  .fic-corne {
    display: block; position: absolute; right: 0; bottom: 0; width: 42px; height: 42px;
    background: linear-gradient(135deg, transparent 50%, #EAE3D4 50%);
    border-radius: 0 0 14px 0;
  }

  /* les Post-it se chevauchent en cascade, comme collés à la volée */
  .fic-postits { gap: 12px; }
  .fic-postit { padding: 14px 16px 13px; will-change: transform; }
  .fic-postit:nth-child(3n+1) { transform: rotate(-1.5deg); margin-right: 30px; }
  .fic-postit:nth-child(3n+2) { transform: rotate(1.1deg); margin-left: 34px; }
  .fic-postit:nth-child(3n+3) { transform: rotate(-.7deg); margin-right: 16px; }
  .fic-postit-tx { font-size: 14px; }
  .fic-postit-meta { font-size: 11px; margin-top: 8px; }

  /* le tilt 3D au survol : la carte se lève vers le curseur */
  .fic-postit:hover {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(14px) scale(1.03);
    box-shadow: 0 26px 44px -18px rgba(33, 30, 43, .55);
    z-index: 3;
  }
  .fic-suivante { display: none; }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  /* pas de bascule : la carte monte simplement */
  .fic-postit:hover { transform: translateY(-4px); }
}

/* ════════════ Mes fiches — corrections du rendu MOBILE (v125) ════════════
   D'après la comparaison maquette / rendu : la reliure doit être une rangée de petits
   anneaux POSÉE SUR la feuille (elle débordait en gros ronds à côté), le chapô sort,
   les déclics quittent leur carte pour vivre à même la page, et les chips se resserrent. */
@media (max-width: 899px) {
  .ecran-fiches .fic-chapo { display: none; }
  .fic-page { padding-top: 14px; }

  /* chips plus compactes */
  .fic-onglet { padding: 8px 14px; font-size: 13px; }

  /* la reliure : un bandeau aux couleurs de la feuille, anneaux ovales, collé dessus */
  .fic-carnet { gap: 0; }
  .fic-spirale {
    height: 32px; margin: 0; border-radius: 14px 14px 0 0;
    background-color: #FCFAF4;
    background-image: radial-gradient(ellipse 5px 9px at 50% 50%, #C9C0B1 0 62%, transparent 64%);
    /* neuf anneaux pile dans la largeur : jamais d'anneau coupé au bord */
    background-size: calc(100% / 9) 32px; background-repeat: repeat-x;
    border: 1px solid rgba(154, 144, 134, .25); border-bottom: none;
  }
  .fic-gauche { border-radius: 0 0 14px 14px; border-top: none; }

  /* les déclics ne sont plus une carte : ils sont posés à même la page */
  .fic-droite {
    background: none; border: none; box-shadow: none;
    padding: 26px 2px 0; border-radius: 0;
  }
  .fic-postits { margin-top: 4px; }
  /* les Post-it doivent finir au-dessus de la tabbar, pas dessous */
  .ecran-fiches .fic-page { padding-bottom: 84px; }
}

/* ════════════ Mes fiches — le carnet mobile au plus près de la maquette (v127) ════════════ */
@media (max-width: 899px) {
  /* les intercalaires collent à la barre : plus de trou entre le titre et le carnet */
  .ecran-fiches .fic-page { padding-top: 8px; }
  .fic-onglets { margin-bottom: 0; padding-bottom: 4px; }
  .fic-carnet { margin-top: 10px; }
  .fic-onglet { padding: 8px 15px; font-size: 13px; border-radius: 999px; }
  /* chaque intercalaire a sa teinte, comme les onglets colorés d'un vrai classeur */
  .fic-onglet:not(.actif):nth-child(3n+1) { background: #EAF0EE; border-color: rgba(31, 78, 76, .22); color: #35635F; }
  .fic-onglet:not(.actif):nth-child(3n+2) { background: #FAF2E2; border-color: rgba(200, 154, 58, .3); color: #7A6234; }
  .fic-onglet:not(.actif):nth-child(3n+3) { background: #F2EFEA; border-color: rgba(154, 144, 134, .3); color: #6b625a; }

  /* la feuille : du papier franc, sans liseré de carte */
  .fic-gauche {
    border: none; background-color: #FCFBF7; padding: 20px 18px 24px;
    background-image: repeating-linear-gradient(rgba(33, 30, 43, .09) 0 1px, transparent 1px 34px);
    background-position: 0 40px;
    box-shadow: 0 14px 30px -24px rgba(33, 30, 43, .5);
  }
  /* la reliure, dans le même papier : anneaux hauts et étroits, pincés en haut de page */
  .fic-spirale {
    height: 38px; background-color: #F1EDE4;
    background-image: radial-gradient(ellipse 5px 11px at 50% 50%, #BFB6A7 0 62%, transparent 64%);
    background-size: calc(100% / 9) 38px;
    border: none; box-shadow: inset 0 -1px 0 rgba(33, 30, 43, .06);
  }

  /* le badge NOUVEAU chevauche le pointillé, comme une étiquette collée sur le cadre */
  .fic-neuve { position: relative; padding-top: 18px; margin-top: 22px; }
  .fic-badge { position: absolute; top: -10px; left: 12px; margin-bottom: 0; }
}

/* ════════════ ONBOARDING — la rencontre en sept temps (v128) ════════════
   Recopie de « Onboarding Vulpi.dc.html ». Deux volets : la VITRINE (encre, un
   carrousel des écrans de l'app) et le FLUX (sable quadrillé, les sept étapes).
   Base = MOBILE (volets empilés) ; le bureau les met côte à côte. ════════════ */
.ecran-onb {
  /* l'onboarding prend tout l'écran : ni la colonne de 640 px ni le rail des autres écrans */
  display: flex; flex-direction: column; padding: 0; margin: 0;
  width: 100%; max-width: none; min-height: 100dvh; background: #FCFAF6;
}
.ecran-onb[hidden] { display: none; }

/* ── le volet vitrine ── */
.onb-vitrine {
  flex: none; height: 352px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(circle at 50% 40%, #2C2838, #211E2B 74%);
  padding-top: calc(22px + var(--sur, 0px));
}
.onb-halo {
  position: absolute; top: 40px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(188, 90, 56, .22), transparent 68%);
}
.onb-diapo {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 16px; text-align: center;
}
.onb-diapo.entre { animation: onbDiapo .5s ease both; }
@keyframes onbDiapo { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.onb-mac { display: none; }
.onb-tel {
  width: 138px; height: 150px; border-radius: 24px 24px 0 0; padding: 6px 6px 0;
  background: #050409; overflow: hidden;
  box-shadow: 0 22px 38px -16px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.tel-ecran, .mac-ecran { width: 100%; height: 100%; overflow: hidden; background: #FCFAF6; }
.tel-ecran { border-radius: 19px 19px 0 0; }
.tel-ecran img { width: 100%; display: block; }
.onb-diapo-tx { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 26px; }
.onb-diapo-t { font: 600 20px/1.2 var(--font-titre); color: #F7F2E8; max-width: 300px; }
.onb-diapo-s { font: 400 13px/1.45 var(--font-corps); color: #9a9086; max-width: 290px; }
.onb-points { display: none; }
.onb-point {
  height: 8px; width: 8px; border-radius: 999px; background: rgba(154, 144, 134, .4);
  transition: width .3s ease, background .3s ease;
}
.onb-point.actif { width: 22px; background: var(--terracotta); }

/* ── le volet flux ── */
.onb-flux {
  flex: 1; position: relative; z-index: 1; display: flex; flex-direction: column;
  margin-top: -22px; border-radius: 26px 26px 0 0; padding: 22px 22px 26px;
  background: #FCFAF6;
  background-image: linear-gradient(rgba(33, 30, 43, .045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(33, 30, 43, .045) 1px, transparent 1px);
  background-size: 26px 26px;
}
.ecran-onb .onb-head { display: contents; }
.ecran-onb #onb-retour {
  position: absolute; top: 18px; left: 20px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(154, 144, 134, .35); background: #FBF8F2; color: var(--encre);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ecran-onb #onb-retour[hidden] { display: none; }
.ecran-onb #onb-retour svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.onb-piste { display: none; }               /* la piste ne se déplie qu'en bureau */

.ecran-onb .onb-etape { flex: 1; display: flex; flex-direction: column; padding-top: 58px; }
.ecran-onb .onb-etape[hidden] { display: none; }
.ecran-onb .onb-auth, .ecran-onb .onb-intro { justify-content: center; padding-top: 0; }
.ecran-onb .onb-corps { display: flex; flex-direction: column; flex: 1; gap: 0; padding: 0; align-items: stretch; text-align: left; }
.ecran-onb .onb-auth .onb-corps, .ecran-onb .onb-intro .onb-corps { flex: none; }
.ecran-onb .onb-corps.centre { align-items: center; text-align: center; justify-content: center; }
.ecran-onb .onb-cta { display: flex; flex-direction: column; align-items: center; margin-top: auto; padding-top: 14px; }

/* les mots des titres sortent d'un flou, en cascade */
@keyframes onbMot { 0% { opacity: 0; filter: blur(9px); transform: translateY(9px); } 60% { opacity: 1; } 100% { opacity: 1; filter: blur(0); transform: none; } }
.onb-mot { display: inline-block; opacity: 0; animation: onbMot .55s ease-out both; }
.onb-titre, .onb-titre-fixe { font: 600 27px/1.12 var(--font-titre); color: var(--encre); margin: 0; letter-spacing: -.2px; }
.onb-nom { color: var(--terracotta); border-bottom: 3px solid var(--terracotta); }
.onb-sous { font: 400 14.5px/1.5 var(--font-corps); color: #6b625a; margin: 12px 0 26px; }
.onb-sous-serre { margin: 10px 0 16px; }
.onb-sous.centre-txt { text-align: center; }
.onb-phrase { font: 400 15.5px/1.5 var(--font-corps); color: #3f3a33; margin: 16px 0 0; }
.onb-phrase em { color: var(--terracotta); font-weight: 600; font-style: normal; }
.onb-logo { width: 74px; height: 74px; object-fit: contain; display: block; margin-bottom: 16px; }
.onb-intro .onb-renard { display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.onb-fin .onb-renard { display: flex; align-items: center; justify-content: center; }
.onb-trait { width: 90px; height: 4px; border-radius: 3px; background: var(--terracotta); margin: 12px 0 18px; }
.onb-cgu { font: 400 12px/1.5 var(--font-corps); color: #a79b8b; text-align: center; margin: 20px 0 0; }

/* les boutons d'auth : relief physique, ils s'enfoncent sous le doigt */
.ecran-onb .btn-auth {
  width: 100%; height: 54px; margin-top: 12px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  font: 600 15px var(--font-corps); border: 1px solid rgba(154, 144, 134, .4);
  transition: transform .06s, box-shadow .06s;
}
.ecran-onb .btn-auth svg { width: 17px; height: 17px; }
.ecran-onb .btn-apple { margin-top: 0; border: none; background: var(--encre); color: #F7F2E8; box-shadow: 0 5px 0 0 #0e0c14; }
.ecran-onb .btn-apple:active { transform: translateY(4px); box-shadow: 0 1px 0 0 #0e0c14; }
.ecran-onb .btn-google { background: #FBF8F2; color: var(--encre); box-shadow: 0 5px 0 0 #d8cfc0; }
.ecran-onb .btn-google:active { transform: translateY(4px); box-shadow: 0 1px 0 0 #d8cfc0; }
.ecran-onb .btn-mail { background: transparent; color: var(--encre); }
.ecran-onb .btn-mail svg { fill: none; stroke: var(--terracotta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ecran-onb .btn-mail:hover { background: rgba(33, 30, 43, .04); }

/* le bouton d'étape : terracotta, majuscules, relief */
.ecran-onb .onb-cta .btn-jalon {
  width: 100%; height: 54px; border: none; border-radius: 16px;
  background: var(--terracotta); color: #F7F2E8;
  font: 600 15px var(--font-corps); text-transform: uppercase; letter-spacing: .6px;
  cursor: pointer; box-shadow: 0 5px 0 0 #8f3f24; transition: transform .06s, box-shadow .06s;
}
.ecran-onb .onb-cta .btn-jalon:active { transform: translateY(4px); box-shadow: 0 1px 0 0 #8f3f24; }
.ecran-onb .onb-cta .btn-jalon:disabled { opacity: .45; box-shadow: 0 5px 0 0 #8f3f24; cursor: default; }
.ecran-onb .onb-cta .lien {
  margin: 14px auto 0; border: none; background: transparent; color: #8a8175;
  font: 500 15px var(--font-corps); text-decoration: underline; cursor: pointer;
}

/* le prénom */
.ecran-onb .dialogue { display: flex; align-items: center; gap: 12px; }
.ecran-onb .dialogue img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.ecran-onb .champ-prenom {
  margin-top: 22px; width: 100%; height: 58px; border: 2px solid var(--terracotta);
  border-radius: 16px; background: #FBF8F2; padding: 0 18px;
  font: 500 18px var(--font-corps); color: var(--encre); outline: none;
}
.ecran-onb .reaction {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font: italic 500 14.5px var(--font-titre); color: #5f574d;
}
.ecran-onb .reaction[hidden] { display: none; }
.ecran-onb .reaction svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--terracotta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* la classe : deux cartes, un anneau terracotta sur le niveau choisi */
.ecran-onb #options-classe { display: flex; flex-direction: column; gap: 14px; }
.cl-carte { border: 1px solid rgba(154, 144, 134, .26); border-radius: 20px; background: #FBF8F2; padding: 16px 16px 18px; box-shadow: 0 12px 26px -20px rgba(33, 30, 43, .26); }
.cl-lycee { border-color: rgba(188, 90, 56, .28); }
.cl-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.cl-ico { width: 28px; height: 28px; border-radius: 9px; background: #D9E4E0; display: flex; align-items: center; justify-content: center; flex: none; }
.cl-lycee .cl-ico { background: #F3E1D4; }
.cl-ico svg { width: 16px; height: 16px; fill: none; stroke: var(--petrole); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cl-lycee .cl-ico svg { stroke: var(--terracotta); }
.cl-lab { font: 600 11.5px var(--font-corps); letter-spacing: 1.3px; color: var(--petrole); text-transform: uppercase; }
.cl-lycee .cl-lab { color: var(--terracotta); }
.cl-grille { display: grid; gap: 9px; }
.cl-quatre { grid-template-columns: repeat(4, 1fr); }
.cl-trois { grid-template-columns: repeat(3, 1fr); }
.ecran-onb .option-compacte {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 14px 4px; border: 1px solid rgba(154, 144, 134, .3); border-radius: 13px;
  background: #FBF8F2; cursor: pointer;
}
.ecran-onb .option-compacte .option-titre { font: 600 18px var(--font-titre); color: var(--encre); }
.ecran-onb .option-compacte .option-puce { display: none; }
.ecran-onb .option-compacte.actif::after {
  content: ""; position: absolute; inset: -1px; border: 2px solid var(--terracotta);
  border-radius: 13px; background: rgba(188, 90, 56, .08); pointer-events: none;
}

/* l'objectif : trois lignes à radio */
.ecran-onb #options-objectif { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ecran-onb #options-objectif .option {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid rgba(154, 144, 134, .28); border-radius: 16px; background: #FBF8F2;
  cursor: pointer; text-align: left;
}
.ecran-onb .option-ico { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #F3E1D4; display: flex; align-items: center; justify-content: center; }
.ecran-onb .option-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--terracotta); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ecran-onb .option-textes { flex: 1; display: flex; flex-direction: column; }
.ecran-onb #options-objectif .option-titre { font: 600 16px var(--font-titre); color: var(--encre); }
.ecran-onb #options-objectif .option-sous { display: none; }
.ecran-onb .option-puce { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid rgba(154, 144, 134, .6); }
.ecran-onb .option.actif .option-puce { border: none; background: var(--terracotta); }
.ecran-onb #options-objectif .option.actif::after {
  content: ""; position: absolute; inset: -1px; border: 2px solid var(--terracotta);
  border-radius: 16px; pointer-events: none;
}

/* les passions : une grille de deux */
.ecran-onb #chips-passions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ecran-onb #chips-passions button {
  position: relative; display: flex; align-items: center; gap: 9px; padding: 12px 14px;
  border: 1px solid rgba(154, 144, 134, .3); border-radius: 14px; background: #FBF8F2;
  cursor: pointer; font: 500 14.5px var(--font-corps); color: var(--encre); text-align: left;
}
.ecran-onb #chips-passions button.actif::after {
  content: ""; position: absolute; inset: -1px; border: 2px solid var(--terracotta);
  border-radius: 14px; background: rgba(188, 90, 56, .1); pointer-events: none;
}

/* le récap */
.ecran-onb .recap {
  width: 100%; background: #FBF8F2; border: 1px solid rgba(154, 144, 134, .28);
  border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 13px;
}

/* ══════════ BUREAU : les deux volets côte à côte ══════════ */
@media (min-width: 900px) {
  .ecran-onb { flex-direction: row; height: 100dvh; min-height: 0; overflow: hidden; margin: 0; }
  .onb-flux { overflow: auto; }
  .onb-vitrine { width: 720px; height: auto; flex: none; justify-content: center; gap: 34px; padding-top: 0; }
  .onb-halo { width: 460px; height: 460px; top: 90px; }
  .onb-diapo { gap: 36px; }
  .onb-tel { display: none; }
  .onb-mac {
    display: block; width: 600px; border-radius: 14px; background: var(--encre); overflow: hidden;
    box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .07);
  }
  .mac-barre {
    height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 16px;
    background: #EDE7DC; border-bottom: 1px solid rgba(33, 30, 43, .1);
  }
  .mac-pastille { width: 12px; height: 12px; border-radius: 50%; }
  .mac-rouge { background: #EC6A5E; } .mac-jaune { background: #F4BE4F; } .mac-verte { background: #61C554; }
  .mac-url {
    margin-left: 14px; flex: 1; max-width: 280px; height: 22px; border-radius: 7px;
    background: rgba(33, 30, 43, .08); display: flex; align-items: center; justify-content: center; gap: 6px;
    font: 500 11px var(--font-corps); color: #8a8175;
  }
  .mac-url svg { width: 11px; height: 11px; fill: none; stroke: #8a8175; stroke-width: 2; }
  .mac-ecran { height: 378px; }
  /* les clichés sont déjà rognés du rail à la capture : ils remplissent la fenêtre */
  .mac-ecran img { width: 100%; display: block; }
  .onb-diapo-t { font-size: 30px; max-width: 520px; }
  .onb-diapo-s { font-size: 16.5px; max-width: 440px; }
  .onb-points { display: flex; gap: 7px; margin-top: 34px; position: relative; z-index: 1; }

  .onb-flux { margin-top: 0; border-radius: 0; padding: 34px 52px 40px; background-size: 30px 30px; }
  .ecran-onb .onb-head { display: flex; align-items: center; gap: 20px; min-height: 64px; flex: none; }
  .ecran-onb #onb-retour { position: static; width: 48px; height: 48px; box-shadow: 0 6px 16px -10px rgba(33, 30, 43, .4); }
  .ecran-onb #onb-retour svg { width: 20px; height: 20px; }
  .onb-piste { display: flex; flex: 1; justify-content: center; }
  .piste-faite { transition: stroke-dashoffset .4s ease; }

  .ecran-onb .onb-etape { max-width: 560px; margin: 0 auto; width: 100%; padding-top: 24px; animation: onbEtape .4s ease both; }
  .ecran-onb .onb-auth { max-width: 460px; }
  .ecran-onb .onb-intro { max-width: 460px; }
  .ecran-onb .onb-fin { max-width: 500px; }
  .onb-logo { width: 96px; height: 96px; margin-bottom: 22px; }
  .onb-titre, .onb-titre-fixe { font-size: 34px; }
  .ecran-onb .onb-auth .onb-titre { font-size: 44px; line-height: 1.05; }
  .ecran-onb .onb-intro .onb-titre-fixe { font-size: 38px; }
  .ecran-onb .onb-fin .onb-titre { font-size: 40px; }
  .onb-sous { font-size: 16px; }
  .ecran-onb .onb-auth .onb-sous { font-size: 17.5px; margin: 16px 0 34px; }
  .onb-phrase { font-size: 20px; margin-top: 26px; }
  .onb-trait { width: 120px; margin: 16px 0 28px; }
  .ecran-onb .dialogue img { width: 46px; height: 46px; }
  .ecran-onb .btn-auth { height: 60px; border-radius: 18px; font-size: 16px; margin-top: 14px; gap: 11px; }
  .ecran-onb .btn-auth svg { width: 19px; height: 19px; }
  .ecran-onb .champ-prenom { height: 66px; border-radius: 18px; font-size: 20px; padding: 0 22px; margin-top: 28px; }
  .ecran-onb .reaction { font-size: 16px; margin-top: 16px; }
  .ecran-onb .reaction svg { width: 17px; height: 17px; }
  .ecran-onb .onb-cta .btn-jalon { height: 60px; border-radius: 18px; font-size: 16px; }
  .ecran-onb #options-classe { gap: 16px; }
  .cl-carte { border-radius: 22px; padding: 20px 22px 22px; }
  .cl-tete { margin-bottom: 16px; }
  .cl-ico { width: 30px; height: 30px; }
  .cl-grille { gap: 12px; }
  /* en bureau la carte de classe se déploie : le chiffre puis sa pastille */
  .ecran-onb .option-compacte { flex-direction: column; gap: 9px; padding: 18px 8px; border-radius: 16px; transition: transform .14s; }
  .ecran-onb .option-compacte:hover { transform: translateY(-2px); }
  .ecran-onb .option-compacte .option-titre { font-size: 22px; }
  .ecran-onb .option-compacte .option-puce { display: block; }
  .ecran-onb .option-compacte.actif::after { border-radius: 16px; }
  .ecran-onb #options-objectif { gap: 14px; margin-top: 26px; }
  .ecran-onb #options-objectif .option { gap: 16px; padding: 18px 20px; border-radius: 20px; }
  .ecran-onb .option-ico { width: 52px; height: 52px; }
  .ecran-onb .option-ico svg { width: 24px; height: 24px; }
  .ecran-onb #options-objectif .option-titre { font-size: 20px; }
  .ecran-onb #options-objectif .option-sous { display: block; font: 400 14.5px/1.4 var(--font-corps); color: #6b625a; margin-top: 2px; }
  .ecran-onb .option-puce { width: 24px; height: 24px; }
  .ecran-onb #options-objectif .option.actif::after { border-radius: 20px; }
  .ecran-onb #chips-passions { gap: 12px; }
  .ecran-onb #chips-passions button { padding: 15px 18px; border-radius: 18px; font-size: 16.5px; gap: 11px; }
  .ecran-onb .recap { border-radius: 22px; padding: 22px 24px; gap: 18px; box-shadow: 0 12px 28px -20px rgba(33, 30, 43, .3); }
}
@keyframes onbEtape { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .onb-mot, .onb-diapo.entre, .ecran-onb .onb-etape { animation: none; opacity: 1; filter: none; transform: none; }
}

/* ── Onboarding : neutraliser l'ancien marqueur radio et le CTA grisé (v128) ── */
/* l'ancienne feuille dessine un ::after sur toute .option : il doublait la pastille */
.ecran-onb .options .option:not(.actif)::after { content: none; }
.ecran-onb .onb-etape .onb-cta .btn-jalon:disabled { opacity: .42; }
/* l'anneau de sélection doit ceinturer la carte : on écrase la géométrie de l'ancien pastillage */
.ecran-onb .options .option.actif::after {
  content: ""; position: absolute; inset: -1px; width: auto; height: auto;
  border: 2px solid var(--terracotta); border-radius: 16px; background: rgba(188, 90, 56, .08);
  transform: none; pointer-events: none;
}
.ecran-onb .options #options-objectif .option.actif::after,
.ecran-onb #options-objectif .option.actif::after { border-radius: 20px; background: none; }
/* l'objectif se lit en ligne : pastille, texte, radio — l'ancienne feuille l'empilait */
.ecran-onb #options-objectif .option { flex-direction: row; text-align: left; justify-content: flex-start; }
.ecran-onb #options-objectif .option-textes { align-items: flex-start; text-align: left; }
.ecran-onb #options-objectif .option.actif::after {
  content: ""; position: absolute; inset: -1px; width: auto; height: auto;
  border: 2px solid var(--terracotta); border-radius: 20px; background: none;
  transform: none; pointer-events: none;
}
/* la filière, quand l'élève est en Terminale */
.ecran-onb #bloc-filiere { margin-top: 16px; }
.ecran-onb #bloc-filiere[hidden] { display: none; }
.ecran-onb .sous-question { font: 600 15px var(--font-titre); color: var(--encre); margin: 0 0 10px; }
.ecran-onb #chips-filiere { display: flex; flex-wrap: wrap; gap: 8px; }
.ecran-onb #chips-filiere button {
  border: 1px solid rgba(154, 144, 134, .3); border-radius: 999px; background: #FBF8F2;
  padding: 9px 15px; font: 500 13.5px var(--font-corps); color: #6b625a; cursor: pointer;
}
.ecran-onb #chips-filiere button.actif { background: var(--terracotta); border-color: var(--terracotta); color: #FCF7F0; font-weight: 600; }
.ecran-onb .remarque { font: italic 400 13px var(--font-corps); color: #a79b8b; margin: 10px 0 0; }

/* ════════════ WORDMARK VULPI — le logo officiel (v129) ════════════
   Le mot « Vulpi » où le point du « i » est la tête de renard en silhouette.
   Le « i » est un i SANS point (ı, U+0131) : la tête est posée en absolu au-dessus
   du fût. Tout est en em → une seule prop de taille (font-size) et le logo scale.
   Une seule prop de couleur (color) : le texte ET le renard la partagent, le SVG
   étant en currentColor. Ne code JAMAIS la couleur du renard ailleurs. ════════════ */
.wm {
  display: inline-flex; align-items: baseline; white-space: nowrap;
  font: 600 26px "Fredoka SemiBold", Fredoka, var(--font-corps);
  color: var(--encre); letter-spacing: .2px;
}
.wm-i { position: relative; display: inline-block; width: .32em; }
.wm-dot { position: absolute; left: 40%; bottom: .72em; transform: translateX(-50%); width: .46em; height: .42em; }
.wm-dot svg { display: block; width: 100%; height: 100%; fill: currentColor; }
/* les variantes de couleur — rien d'autre ne change */
.wm-terracotta { color: var(--terracotta); }
.wm-creme { color: #EFE7D8; }        /* sur fond encre */
.wm-taupe { color: #9A8264; }        /* crème sur crème */

/* les emplacements de marque : seule la taille change */
.rail-logo .wm { font-size: 25px; }
.ecran-home .home-marque .wm { font-size: 21px; }
.pdash-logo .wm { font-size: 22px; }
.pdash-logo-m .wm { font-size: 19px; }
.bm-logo.wm { font-size: 21px; }
.onb-marque { display: block; margin-bottom: 18px; }
.onb-marque .wm { font-size: 30px; }
@media (max-width: 899px) {
  .ecran-home .home-marque .wm { font-size: 23px; }
  .onb-marque { margin-bottom: 14px; }
  .onb-marque .wm { font-size: 26px; }
}

/* ════════════ ESPACE PARENT — le mot du soir & le temps rendu (v130) ════════════ */
.pdash-mot {
  margin: 18px 0 0; padding: 20px 22px; border-radius: 20px;
  background: #EFF3F1; border: 1px solid rgba(31, 78, 76, .16);
}
.pdash-mot[hidden], .pdash-temps[hidden] { display: none; }
.pdm-tete { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.pdm-ico { width: 22px; height: 22px; flex: none; }
.pdm-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--petrole); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pdm-eyebrow { font: 600 11.5px var(--font-corps); letter-spacing: 1.2px; text-transform: uppercase; color: var(--petrole); }
.pdm-texte { font: 400 17px/1.55 var(--font-titre); font-style: italic; color: var(--encre); margin: 0; }

.pdash-temps { display: flex; gap: 14px; margin: 14px 0 0; }
.pdt-bloc {
  flex: 1; padding: 18px 20px; border-radius: 18px; background: #FBF8F2;
  border: 1px solid rgba(154, 144, 134, .26); display: flex; flex-direction: column; gap: 4px;
}
.pdt-seul { background: #F6EFE6; border-color: rgba(188, 90, 56, .22); }
.pdt-chiffre { font: 600 27px var(--font-titre); color: var(--encre); }
.pdt-seul .pdt-chiffre { color: var(--terracotta); }
.pdt-lab { font: 400 13.5px/1.4 var(--font-corps); color: #6b625a; }
@media (max-width: 899px) {
  .pdash-temps { flex-direction: column; gap: 10px; }
  .pdm-texte { font-size: 15.5px; }
}

/* ════════════ Onboarding — compte & connexion (v131) ════════════ */
.onb-note {
  margin: 0 0 14px; padding: 11px 14px; border-radius: 12px;
  background: #EFF3F1; border: 1px solid rgba(31, 78, 76, .18);
  font: 500 13.5px/1.45 var(--font-corps); color: var(--petrole);
}
.onb-note[hidden] { display: none; }
.onb-label { display: block; font: 600 13px var(--font-corps); color: #5f574d; margin: 16px 0 6px; }
.ecran-onb .onb-label + .champ-prenom { margin-top: 0; }
.onb-dispo { font: 500 13px var(--font-corps); color: var(--terracotta); margin: 8px 0 0; }
.onb-dispo.libre { color: var(--petrole); }
.onb-dispo[hidden] { display: none; }
.onb-astuce { font: italic 400 12.5px/1.45 var(--font-corps); color: #a79b8b; margin: 8px 0 0; }
.onb-erreur {
  margin: 12px 0 0; padding: 10px 13px; border-radius: 12px;
  background: rgba(188, 90, 56, .09); border: 1px solid rgba(188, 90, 56, .3);
  font: 500 13.5px/1.45 var(--font-corps); color: #8f3f24;
}
.onb-erreur[hidden] { display: none; }

/* ════════════ LE TERRIER — tableau de bord fondateur (#admin, v132) ════════════ */
.ecran-admin { display: block; padding: 0; margin: 0; width: 100%; max-width: none; min-height: 100dvh; background: #F3EDE3; }
.ecran-admin[hidden] { display: none; }
.adm-page { max-width: 880px; margin: 0 auto; padding: 46px 22px 60px; }
.adm-titre { font: 600 34px var(--font-titre); color: var(--encre); margin: 0; }
.adm-sous { font: 400 14.5px var(--font-corps); color: #6b625a; margin: 8px 0 26px; }
.adm-porte { max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
.adm-porte[hidden], #adm-tableau[hidden] { display: none; }
.adm-entrer { height: 52px; border: none; border-radius: 14px; background: var(--terracotta); color: #F7F2E8; font: 600 15px var(--font-corps); cursor: pointer; box-shadow: 0 5px 0 0 #8f3f24; }
.adm-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.adm-tuile { background: #FBF8F2; border: 1px solid rgba(154, 144, 134, .26); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.adm-val { font: 600 24px var(--font-titre); color: var(--encre); }
.adm-nom { font: 600 11px var(--font-corps); letter-spacing: 1px; text-transform: uppercase; color: #8a8175; }
.adm-detail { font: 400 12.5px var(--font-corps); color: #a79b8b; margin: 0; }
.adm-label { font: 600 11.5px var(--font-corps); letter-spacing: 1.3px; color: #8a8175; margin: 28px 0 10px; }
.adm-barres { display: flex; align-items: flex-end; gap: 8px; background: #FBF8F2; border: 1px solid rgba(154, 144, 134, .26); border-radius: 16px; padding: 16px 16px 10px; min-height: 120px; }
.adm-barre-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; justify-content: flex-end; }
.adm-barre { width: 100%; max-width: 34px; border-radius: 6px 6px 2px 2px; background: var(--terracotta); display: block; }
.adm-barre-nb { font: 600 11px var(--font-corps); color: #6b625a; min-height: 13px; }
.adm-barre-jour { font: 400 10.5px var(--font-corps); color: #a79b8b; }
.adm-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.adm-ligne { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font: 500 13.5px var(--font-corps); color: var(--encre); }
.adm-ligne span { width: 92px; flex: none; }
.adm-ligne i { display: block; height: 12px; border-radius: 999px; background: rgba(31, 78, 76, .55); min-width: 3px; }
.adm-ligne b { font-weight: 600; }
@media (max-width: 700px) { .adm-colonnes { grid-template-columns: 1fr; } .adm-barre-nb { display: none; } }

/* ════════════ PRÉPARATION DE SÉANCE (v137) ════════════
   Le pipeline froid dure 8-10 s, et la 1re réponse du prof 5-7 s de plus. Avant,
   on posait l'énoncé au tableau tout de suite : l'élève croyait la séance prête
   alors que le prof n'était pas encore là. Maintenant on assume l'attente. */
.ecran-prep {
  display: flex; align-items: center; justify-content: center;
  padding: 24px; margin: 0; width: 100%; max-width: none; min-height: 100dvh;
  background: var(--creme);
}
.ecran-prep[hidden] { display: none; }
.prep-bloc { display: flex; align-items: center; gap: 22px; max-width: 560px; }
.prep-renard { flex: none; display: flex; align-items: center; justify-content: center; }
.prep-renard img, .prep-renard .vulpi { width: 72px; height: 72px; }
.prep-textes { display: flex; flex-direction: column; gap: 8px; }
.prep-titre { font: 600 27px/1.2 var(--font-titre); color: var(--encre); margin: 0; letter-spacing: -.2px; }
.prep-sous { font: 400 15.5px/1.5 var(--font-corps); color: #6b625a; margin: 0; display: flex; align-items: baseline; }
.prep-points i {
  display: inline-block; opacity: .25;
  animation: prepPoint 1.4s ease-in-out infinite;
}
.prep-points i:nth-child(2) { animation-delay: .18s; }
.prep-points i:nth-child(3) { animation-delay: .36s; }
@keyframes prepPoint { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (max-width: 899px) {
  .prep-bloc { flex-direction: column; text-align: center; gap: 18px; }
  .prep-textes { align-items: center; }
  .prep-titre { font-size: 23px; }
  .prep-sous { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .prep-points i { animation: none; opacity: .6; } }

/* ════════════ FIGURES DE RÉFÉRENCE au tableau (v138) ════════════
   Elles montrent l'objet, jamais le résultat : le cercle porte l'angle et ses
   projections, mais cos et sin restent à trouver. */
.ct-cercle { fill: none; stroke: var(--encre); stroke-width: 1.6; opacity: .55; }
.ct-repere { fill: var(--grege); }
.ct-arc { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.ct-rayon { stroke-width: 2; stroke-linecap: round; }
.ct-point { stroke: var(--creme); stroke-width: 2; }
/* la teinte ne pose QUE le trait : un fill ici remplissait l'arc en camembert */
.ct-teinte0 { stroke: var(--terracotta); }
.ct-teinte1 { stroke: var(--petrole); }
.ct-point.ct-teinte0 { fill: var(--terracotta); }
.ct-point.ct-teinte1 { fill: var(--petrole); }
.ct-arc, .ct-rayon { fill: none; }
.ct-projection { stroke: var(--grege); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .85; }
.ct-etiquette { font: 600 12px var(--font-corps); fill: var(--encre); }
.ct-legende { margin-top: 8px; }
.ct-legende p { font: 400 13px/1.5 var(--font-corps); color: #6b625a; margin: 2px 0; }

.tr-triangle { fill: rgba(188, 90, 56, .07); stroke: var(--encre); stroke-width: 2; stroke-linejoin: round; }
.tr-droit { fill: none; stroke: var(--encre); stroke-width: 1.5; opacity: .7; }
.tr-mesure { font: 500 12.5px var(--font-corps); fill: #6b625a; }
.tr-mesure.tr-cherche { fill: var(--terracotta); font-weight: 600; }
.tr-sommet { font: 600 14px var(--font-titre); fill: var(--encre); }

/* ════════════ LE TABLEAU SIGNÉ (v140) ════════════
   Chaque bloc dit qui l'a écrit. L'auteur vient du serveur, jamais du modèle :
   terracotta = l'élève, pétrole = Vulpi. */
.bloc-auteur {
  display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px;
  font: 600 10.5px var(--font-corps); letter-spacing: 1px; text-transform: uppercase;
}
.auteur-eleve { background: rgba(188, 90, 56, .12); color: var(--terracotta); }
.auteur-vulpi { background: rgba(31, 78, 76, .12); color: var(--petrole); }

/* l'idée de l'élève : ses mots, entre guillemets */
.bloc-idee .note-texte { font-style: italic; }

/* la clef de Vulpi : ce qu'on relit avant un contrôle */
.bloc-clef { border-left: 3px solid var(--petrole); padding-left: 14px; }
/* la puce suit l'auteur : la clef est de Vulpi, elle ne peut pas être terracotta */
.bloc-clef::before { background: var(--petrole); box-shadow: 0 1.5px 0 #163b39; }
.clef-eyebrow {
  display: block; font: 600 10.5px var(--font-corps); letter-spacing: 1.3px;
  color: var(--petrole); margin-bottom: 5px;
}
.bloc-clef .note-texte { font-weight: 500; }