/* ==========================================================================
   E-Academy — charte graphique violet / or
   Reprend l'identité utilisée sur les supports pédagogiques E-Academy
   (fiches de cours, séries d'exercices, présentations).
   RTL géré par propriétés logiques (inset-inline, margin-inline, etc.).
   ========================================================================== */

/* ==========================================================================
   E-Academy — identité "Modern EdTech" : bleu clair (dominante) + violet
   (secondaire, titres forts) + jaune (accent, CTA). Chaleureux, premium,
   aéré — inspiré des qualités de lisibilité et de générosité de mise en
   page d'EdTech modernes, sans en reprendre l'identité visuelle.
   RTL géré par propriétés logiques (inset-inline, margin-inline, etc.).
   ========================================================================== */

:root{
  /* Bleu clair — couleur principale (dominante de l'interface) */
  --bl-900:#0B2A5E;
  --bl-800:#0F3A82;
  --bl-700:#0F4FA8;
  --bl-600:#1367D4;
  --bl-500:#1483FA;
  --bl-400:#4FA3FF;
  --bl-200:#C2E0FF;
  --bl-100:#DEEEFF;
  --bl-050:#F0F8FF;

  /* Violet — couleur secondaire forte (titres, sections particulières, dégradés) */
  --v-900:#2B1259;
  --v-800:#3B1B7A;
  --v-700:#4C24A0;
  --v-600:#5E2FC4;
  --v-500:#6D3FEA;
  --v-400:#9169F2;
  --v-200:#D9C9FB;
  --v-100:#EAE1FD;
  --v-050:#F5F1FE;

  /* Jaune — couleur d'accent (CTA, badges, mise en avant) */
  --or-700:#8A5B00;
  --or-600:#B37D00;
  --or-500:#E0A100;
  --or-400:#FFC01F;
  --or-200:#FFE9AD;
  --or-100:#FFF3D6;

  /* Neutres */
  --ink:#131A2B;
  --ink-soft:#5B667A;
  --ink-faint:#8A93A6;
  --line:#E3E8F0;
  --line-strong:#CBD4E3;
  --paper:#FFFFFF;
  --paper-soft:#F5F8FC;

  /* États */
  --ok:#1EA672; --ok-bg:#E7F8F0;
  --warn:#B37D00; --warn-bg:#FCF1DE;
  --err:#DC3545; --err-bg:#FDEAEC;

  /* Rayons généreux : petits éléments 10-12px, boutons 14px, cards 18-22px, grandes sections 26-32px */
  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:32px;
  --sh-sm:0 1px 2px rgba(19,26,43,.05), 0 4px 12px rgba(19,26,43,.05);
  --sh:0 2px 6px rgba(19,26,43,.06), 0 14px 34px rgba(19,26,43,.08);
  --sh-lg:0 6px 18px rgba(11,42,94,.10), 0 28px 60px rgba(11,42,94,.12);
  --sh-v:0 12px 28px rgba(20,131,250,.28);

  --f-ui:Arial,'Helvetica Neue',Helvetica,sans-serif;
  --f-ar:'Cairo','Tajawal',system-ui,sans-serif;
  --f-num:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --sidebar-w:266px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-ui);font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
[dir="rtl"] body{font-family:var(--f-ar);font-size:17.5px;line-height:1.9;}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;color:inherit;}
img,svg{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--bl-500);outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}
[dir="rtl"] .mirror{transform:scaleX(-1);}

.wrap{max-width:1340px;margin-inline:auto;padding-inline:30px;}
.wrap-narrow{max-width:1000px;margin-inline:auto;padding-inline:26px;}

/* ---------------------------------------------------------------- Titres */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bl-600);
}
[dir="rtl"] .eyebrow{letter-spacing:0;text-transform:none;}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--or-500);border-radius:2px;}
h1,h2,h3,.h{letter-spacing:-.02em;font-weight:700;}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .h{letter-spacing:0;font-weight:800;}
.t-xl{font-size:clamp(28px,3.6vw,44px);line-height:1.12;font-weight:800;}
[dir="rtl"] .t-xl{font-size:clamp(36px,5.4vw,64px);line-height:1.32;font-weight:900;}
.t-lg{font-size:clamp(28px,3.6vw,42px);line-height:1.16;font-weight:700;}
[dir="rtl"] .t-lg{line-height:1.42;font-weight:800;}
.t-md{font-size:22px;font-weight:700;}
[dir="rtl"] .t-md{font-weight:800;}
.hl{
  background:var(--ink);color:#fff;padding:3px 11px;border-radius:9px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
[dir="rtl"] .hl{padding-inline:4px;}
.hl.bl{background:var(--bl-600);}
.hl.v{background:var(--v-600);}
.hl.or{background:var(--or-400);color:#3A2A00;}
.lead{font-size:18.5px;color:var(--ink-soft);}
.muted{color:var(--ink-soft);}
.faint{color:var(--ink-faint);}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;}

/* --------------------------------------------------------------- Boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:46px;padding-inline:22px;border-radius:999px;border:1.5px solid transparent;
  font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:transform .15s cubic-bezier(.2,.8,.3,1),box-shadow .15s,background .15s,border-color .15s,color .15s;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(135deg,var(--bl-600),var(--bl-800));color:#fff;box-shadow:var(--sh-v);}
.btn-primary:hover{box-shadow:0 16px 38px rgba(20,131,250,.36);transform:translateY(-1px);}
.btn-gold{background:linear-gradient(135deg,var(--or-400),var(--or-500));color:#3A2A00;box-shadow:0 10px 26px rgba(224,161,0,.32);}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(224,161,0,.4);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--bl-500);color:var(--bl-700);background:var(--bl-050);}
.btn-light{background:#fff;color:var(--bl-700);border-color:var(--bl-200);}
.btn-light:hover{background:var(--bl-050);border-color:var(--bl-400);}
.btn-lg{height:54px;padding-inline:28px;font-size:16px;}
.btn-sm{height:36px;padding-inline:15px;font-size:13px;}
.btn-block{width:100%;}
/* Garde-fou : un bouton placé dans une colonne flex ne se laisse pas
   comprimer sous sa hauteur propre. */
.btn{flex-shrink:0;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none;}
.btn-locked{background:var(--paper-soft);color:var(--ink-faint);border-color:var(--line);box-shadow:none;}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:40px;height:40px;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink-soft);cursor:pointer;transition:.15s;
}
.icon-btn:hover{border-color:var(--bl-400);color:var(--bl-700);}
.link-btn{background:none;border:none;padding:0;cursor:pointer;color:var(--bl-600);font-weight:600;font-size:13.5px;}
.link-btn:hover{color:var(--bl-800);text-decoration:underline;}

/* ---------------------------------------------------------------- Header */
/* ---------------------------------------------------------------- Header */
.contact-bar{background:var(--bl-800);color:rgba(255,255,255,.92);}
.contact-bar-inner{display:flex;align-items:center;justify-content:space-between;height:34px;gap:14px;font-size:12.5px;}
/* Téléphone et WhatsApp côte à côte : un vrai espace entre les deux,
   sinon les chiffres de l'un touchent l'icône de l'autre. */
.contact-bar-info{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.contact-bar-info a{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:700;font-family:var(--f-num);letter-spacing:.02em;}
.contact-bar-info a:hover{color:var(--or-400);}
.contact-bar-cta{background:none;border:none;padding:0;cursor:pointer;color:var(--or-400);font-weight:800;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;}
.contact-bar-cta:hover{color:#fff;}
.contact-bar-cta svg{width:12px;height:12px;}
/*
 * Sur téléphone, deux numéros et un lien ne tiennent plus sur une
 * ligne : les coordonnées restent, le raccourci « Contact » s'efface,
 * la même page étant déjà dans le menu.
 */
@media (max-width:640px){
  .contact-bar-inner{justify-content:center;gap:0;}
  .contact-bar-info{gap:14px;font-size:12px;flex-wrap:nowrap;}
  .contact-bar-info a{gap:5px;}
  .contact-bar-cta{display:none;}
}
@media (max-width:380px){
  /* Place vraiment comptée : les icônes suffisent à dire quoi taper. */
  .contact-bar-info a span{display:none;}
  .contact-bar-info{gap:26px;}
}
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:20px;height:78px;}
.brand{display:inline-flex;align-items:center;cursor:pointer;background:none;border:none;padding:0;}
.brand-mark{height:54px;width:auto;display:block;object-fit:contain;}
.brand-mark-sm{height:40px;width:auto;display:block;object-fit:contain;}
.main-nav{display:flex;align-items:center;gap:6px;margin-inline-start:22px;}
.main-nav button,.main-nav a{
  position:relative;background:none;border:none;text-decoration:none;display:inline-block;padding:10px 4px;border-radius:0;
  font-size:14.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:color .2s;
  margin-inline-end:14px;
}
.main-nav button::after,.main-nav a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:2px;height:3px;width:100%;border-radius:3px;
  background:var(--bl-600);
  transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.main-nav button:hover,.main-nav a:hover{color:var(--bl-700);}
.main-nav button:hover::after,.main-nav a:hover::after{transform:scaleX(.55);}
.main-nav button.is-active,.main-nav a.is-active{color:var(--bl-800);font-weight:800;}
.main-nav button.is-active::after,.main-nav a.is-active::after{transform:scaleX(1);}
.header-actions{display:flex;align-items:center;gap:10px;margin-inline-start:auto;}
.burger{display:none;}

.lang-switch{display:inline-flex;align-items:center;background:var(--paper-soft);border:1.5px solid var(--line);border-radius:999px;padding:3px 4px 3px 10px;gap:2px;}
[dir="rtl"] .lang-switch{padding:3px 10px 3px 4px;}
.lang-globe{display:inline-flex;color:var(--ink-faint);margin-inline-end:4px;}
.lang-switch button{border:none;background:none;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:800;cursor:pointer;color:var(--ink-faint);letter-spacing:.02em;transition:.18s;min-height:30px;}
.lang-switch button.is-active{background:var(--bl-700);color:#fff;}

/* ------------------------------------------------------------------ Hero */
.hero{position:relative;overflow:hidden;background:#fff;color:var(--ink);}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 380px at 100% 0%, rgba(20,131,250,.07), transparent 62%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;padding:72px 0 88px;}
/*
 * Premier écran : le hero, et rien d'autre.
 *
 * La bande de chiffres dépassait sous la ligne de flottaison et se
 * dévoilait à moitié. Le hero occupe donc toute la hauteur restante sous
 * l'en-tête (barre de contact 34 + en-tête 78 + 1 de filet) : la bande
 * commence exactement au bas de l'écran, et ne se voit qu'en défilant.
 * Sur écran bas, le hero se resserre pour tenir dans cette hauteur.
 */
@media (min-width:1025px){
  .hero-plein{min-height:calc(100svh - 113px);display:flex;align-items:center;}
  .hero-plein > .wrap{width:100%;}
}
@media (min-width:1025px) and (max-height:900px){
  .hero-plein .hero-grid{padding:40px 0 48px;gap:44px;}
  .hero-plein h1{margin-top:16px;}
  .hero-plein .hero-sub{margin-top:16px;font-size:17.5px;}
  .hero-rotator{margin-top:14px;font-size:17.5px;}
  .hero-cta{margin-top:24px;}
  .hero-trust{margin-top:18px;}
}
@media (min-width:1025px) and (max-height:800px){
  .hero-plein .hero-grid{padding:26px 0 32px;gap:36px;}
  .hero-plein .hero-photo{aspect-ratio:4/3;}
}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  background:var(--paper-soft);border:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--bl-700);
}
.hero h1{margin-top:22px;color:var(--ink);}
.hero h1 .gold{
  background:linear-gradient(120deg,var(--bl-600),var(--v-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{margin-top:22px;font-size:19px;color:var(--ink-soft);max-width:540px;}
/* Zone de texte dynamique : une phrase disparait, la suivante prend sa place */
.hero-rotator{margin-top:18px;display:flex;align-items:baseline;gap:9px;font-size:19px;font-weight:700;min-height:1.6em;}
.hero-rotator .rot-label{color:var(--ink-faint);font-weight:600;font-size:15px;flex-shrink:0;}
.hero-rotator .rot-text{color:var(--bl-700);transition:opacity .35s ease,transform .35s ease;}
.hero-rotator .rot-text.rot-out{opacity:0;transform:translateY(6px);}
.hero-cta{margin-top:32px;display:flex;gap:13px;flex-wrap:wrap;}
.hero-trust{margin-top:26px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-faint);}
.hero-trust svg{color:var(--bl-500);}
.fade-up{animation:fadeUp .6s cubic-bezier(.2,.8,.3,1) both;}
.d1{animation-delay:.07s;} .d2{animation-delay:.14s;} .d3{animation-delay:.21s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* Photo du hero */
.hero-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/3.4;position:relative;}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block;}

.bar{height:7px;border-radius:99px;background:var(--bl-100);overflow:hidden;}
.bar > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--bl-500),var(--bl-700));}
.bar.gold > i{background:linear-gradient(90deg,var(--or-400),var(--or-600));}

/* --------------------------------------------------------------- Sections */
.section{padding:84px 0;}
.section-sm{padding:56px 0;}
.section-soft{background:var(--paper-soft);}
.section-violet{background:linear-gradient(160deg,var(--v-900),var(--v-700));color:#fff;}
.section-violet .lead,.section-violet .muted{color:rgba(255,255,255,.76);}
.section-violet .eyebrow{color:var(--or-300,var(--or-400));}
.sec-head{max-width:660px;margin-bottom:44px;}
.sec-head.center{margin-inline:auto;text-align:center;}
.sec-head h2{margin-top:12px;}
.sec-head p{margin-top:14px;}

/* Bandeau de chiffres */
.stats-intro{text-align:center;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--bl-600);margin-bottom:18px;}
[dir="rtl"] .stats-intro{letter-spacing:0;text-transform:none;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.stat-card{
  position:relative;overflow:hidden;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:32px 20px;text-align:center;transition:.22s cubic-bezier(.2,.8,.3,1);
}
.stat-card:hover,.stat-card:focus-within{
  transform:translateY(-8px) scale(1.035);box-shadow:var(--sh-lg);border-color:var(--bl-400);
}
.stat-card:hover .stat-ico,.stat-card:focus-within .stat-ico{transform:scale(1.12) rotate(-6deg);}
.stat-card:hover .stat-num b,.stat-card:focus-within .stat-num b{color:var(--bl-700);}
.stat-card.sv-1:hover .stat-num b,.stat-card.sv-1:focus-within .stat-num b{color:var(--or-600);}
.stat-card.sv-2:hover .stat-num b,.stat-card.sv-2:focus-within .stat-num b{color:var(--v-600);}
.stat-card::before{
  content:"";position:absolute;top:-34px;inset-inline-end:-34px;width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle,var(--bl-050),transparent 70%);pointer-events:none;
}
.stat-card.sv-1::before{background:radial-gradient(circle,var(--or-100),transparent 70%);}
.stat-card.sv-2::before{background:radial-gradient(circle,var(--v-050),transparent 70%);}
.stat-card.sv-3::before{background:radial-gradient(circle,var(--bl-050),transparent 70%);}
.stat-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin:0 auto 18px;color:#fff;position:relative;transition:transform .25s cubic-bezier(.2,.8,.3,1);}
.stat-card.sv-0 .stat-ico{background:linear-gradient(135deg,var(--v-500),var(--v-800));}
.stat-card.sv-1 .stat-ico{background:linear-gradient(135deg,var(--or-400),var(--or-600));color:#3A2A00;}
.stat-card.sv-2 .stat-ico{background:linear-gradient(135deg,var(--bl-500),var(--bl-800));}
.stat-card.sv-3 .stat-ico{background:linear-gradient(135deg,var(--v-400),var(--bl-700));}
.stat-num{position:relative;display:flex;align-items:baseline;justify-content:center;gap:1px;}
.stat-num b{font-size:40px;font-weight:800;line-height:1;font-family:var(--f-num);color:var(--ink);}
.stat-num .stat-suffix{font-size:26px;font-weight:800;font-family:var(--f-num);color:var(--bl-600);}
.stat-card.sv-1 .stat-num .stat-suffix{color:var(--or-600);}
.stat-card.sv-2 .stat-num .stat-suffix{color:var(--v-600);}
.stat-card span.stat-label{display:block;margin-top:12px;font-size:14.5px;font-weight:700;color:var(--ink);position:relative;}

/* Grilles génériques */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
/* Les trois atouts, posés dans le hero de la page enseignants : ils se
   resserrent pour tenir sous le titre sans pousser le formulaire. */
.teach-atouts{margin-top:26px;}
/* Sur un écran bas, la photo se resserre pour que les trois atouts
   restent dans le premier écran. */
@media (min-width:1025px) and (max-height:820px){
  .teach-hero .cutout-photo img{max-height:300px;}
  .teach-atouts{margin-top:18px;}
  .teach-atouts .info-card{padding:16px 18px 14px;}
}
.teach-atouts .info-card{padding:20px 20px 18px;}
.teach-atouts .info-card h3{font-size:15.5px;}
.teach-atouts .info-card p{font-size:13.5px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}

/* Cartes */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;}
.card-pad{padding:28px;}
/* Confirmation de candidature : seule à l'écran, elle se pose au milieu
   plutôt que collée en haut d'une page vide. */
.teach-ok{margin-top:40px;padding:44px 28px;}
.teach-card{position:relative;overflow:hidden;border-top:4px solid var(--or-400);}
.teach-card-head{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.teach-card-head .feature-ico{margin-bottom:0;flex-shrink:0;}
.teach-card-head h2{margin:0;}
.card-hover{transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,border-color .18s;}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--bl-200);}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;}
.feature-ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,var(--bl-100),var(--bl-050));color:var(--bl-700);
  border:1px solid var(--bl-200);
}
.feature-ico.gold{background:linear-gradient(135deg,var(--or-100),#FFF9EA);color:var(--or-700);border-color:var(--or-200);}
.feature h3{font-size:16.5px;margin-bottom:8px;}
.feature p{font-size:14px;color:var(--ink-soft);}

/* Carte "info" à fond coloré : mission/vision/méthode, La plateforme...
   Le fond fonce légèrement et la carte se détache au survol/focus. Trois
   teintes tournantes pour varier sans surcharger. */
.info-card{
  border-radius:var(--r-lg);padding:26px;border:1.5px solid transparent;cursor:default;
  transition:.2s cubic-bezier(.2,.8,.3,1);
}
.info-card:hover,.info-card:focus-within{transform:translateY(-7px) scale(1.02);box-shadow:var(--sh-lg);}
.info-card .feature-ico{transition:transform .25s cubic-bezier(.2,.8,.3,1);}
.info-card:hover .feature-ico,.info-card:focus-within .feature-ico{transform:scale(1.12) rotate(-6deg);}
.info-card.ic-bl:hover,.info-card.ic-bl:focus-within{border-color:var(--bl-400);}
.info-card.ic-v:hover,.info-card.ic-v:focus-within{border-color:var(--v-400);}
.info-card .feature-ico{background:rgba(255,255,255,.7);}
.info-card.ic-bl{background:var(--bl-050);border-color:var(--bl-100);}
.info-card.ic-bl:hover,.info-card.ic-bl:focus-within{background:var(--bl-100);}
.info-card.ic-v{background:var(--v-050);border-color:var(--v-100);}
.info-card.ic-v:hover,.info-card.ic-v:focus-within{background:var(--v-100);}
.info-card.ic-white{background:#fff;border-color:var(--line);}
.info-card.ic-white:hover,.info-card.ic-white:focus-within{background:var(--v-050);border-color:var(--v-100);}
.info-card.ic-white h3,.info-card.ic-white p{color:var(--v-700);}
.info-card h3{font-size:16.5px;margin-bottom:8px;}
.info-card p{font-size:14px;color:var(--ink-soft);}

/* Bande photo (vie étudiante) */
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.photo-card{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--sh-sm);margin:0;}
.photo-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.2,.8,.3,1);}
.photo-card:hover img{transform:scale(1.05);}
.photo-card figcaption{position:absolute;inset-inline:0;bottom:0;padding:18px 18px 15px;background:linear-gradient(180deg,transparent,rgba(20,10,40,.85));color:#fff;font-size:13.5px;font-weight:700;line-height:1.35;}

/* Matières */
.subject-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:0;transition:.18s;}
.subject-card:hover{transform:translateY(-3px);box-shadow:var(--sh);}
.subject-photo{position:relative;aspect-ratio:16/10;overflow:hidden;}
.subject-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.subject-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(11,26,43,.5));pointer-events:none;}
.subject-card-body{padding:26px 24px 28px;}
.subject-card h3{font-size:19px;margin-bottom:14px;}
.subject-card p{color:var(--ink-soft);font-size:14.5px;}
.wcp-row{display:flex;gap:12px;margin-bottom:13px;align-items:baseline;}
.wcp-row:last-child{margin-bottom:0;}
.wcp-row p{margin:0;font-size:13.5px;line-height:1.55;}
.wcp-tag{
  flex-shrink:0;width:72px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--bl-700);padding-top:1px;
}
[dir="rtl"] .wcp-tag{letter-spacing:0;text-transform:none;}
.wcp-tag.gold{color:var(--or-700);}
.wcp-tag.v{color:var(--v-600);}
.subject-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;}
.chip{font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--bl-050);color:var(--bl-700);border:1px solid var(--bl-200);}
.chip.gold{background:var(--or-100);color:var(--or-700);border-color:var(--or-200);}
.chip.plain{background:var(--paper-soft);color:var(--ink-soft);border-color:var(--line);}

/* Parcours 1ère -> Bac */
.path{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:12px;}
.path::before{content:"";position:absolute;inset-inline:6%;top:27px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--bl-200),var(--bl-500) 60%,var(--or-500));}
.path-step{position:relative;text-align:center;cursor:default;}
.path-dot{
  width:54px;height:54px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:3px solid var(--bl-300,var(--bl-400));color:var(--bl-700);
  font-weight:800;font-size:17px;position:relative;z-index:1;box-shadow:0 6px 18px rgba(91,33,182,.16);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,background .28s,color .28s;
}
/* Pastille du Bac : halo qui pulse doucement pour attirer l'oeil vers l'objectif */
.path-step.is-bac .path-dot{border-color:var(--or-500);color:var(--or-700);background:var(--or-100);box-shadow:0 8px 22px rgba(212,160,23,.3);}
.path-step.is-bac .path-dot::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--or-400);
  animation:pathPulse 2.4s ease-out infinite;pointer-events:none;
}
@keyframes pathPulse{
  0%{transform:scale(1);opacity:.75;}
  70%{transform:scale(1.35);opacity:0;}
  100%{transform:scale(1.35);opacity:0;}
}
/* Étape survolée : la pastille se remplit et se détache */
.path-step:hover .path-dot,.path-step:focus-within .path-dot{
  transform:translateY(-6px) scale(1.12);
  background:linear-gradient(135deg,var(--bl-600),var(--bl-800));color:#fff;border-color:var(--bl-800);
  box-shadow:0 14px 30px rgba(20,131,250,.34);
}
.path-step.is-bac:hover .path-dot,.path-step.is-bac:focus-within .path-dot{
  background:linear-gradient(135deg,var(--or-400),var(--or-600));color:#3A2A00;border-color:var(--or-600);
  box-shadow:0 14px 30px rgba(224,161,0,.4);
}
.path-step b{display:block;font-size:14.5px;margin-bottom:5px;transition:color .2s;}
.path-step:hover b{color:var(--bl-800);}
.path-step.is-bac:hover b{color:var(--or-700);}
.path-step span{font-size:12.5px;color:var(--ink-soft);}
@media (prefers-reduced-motion:reduce){
  .path-step.is-bac .path-dot::after{animation:none;}
}
.path-note-card{
  display:flex;align-items:center;gap:16px;margin-top:40px;padding:20px 24px;border-radius:var(--r-lg);
  background:linear-gradient(120deg,var(--bl-050),var(--or-100));border:1px solid var(--bl-200);
}
.path-note-card svg{color:var(--bl-600);flex-shrink:0;}
.path-note-card p{font-size:14.5px;font-weight:600;color:var(--bl-800);line-height:1.5;}
@media (max-width:640px){.path-note-card{flex-direction:column;text-align:center;}}

/* Étapes "comment ça marche" */
/* Quatre étapes : une seule rangée sur grand écran, deux par rangée en
   dessous. Une grille de trois colonnes laissait la quatrième seule. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 18px 20px;}
.step-n{
  position:absolute;top:-14px;inset-inline-start:22px;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(135deg,var(--bl-600),var(--bl-800));box-shadow:var(--sh-v);
}
.step h3{font-size:15.5px;margin:14px 0 6px;}
.step p{font-size:13.5px;color:var(--ink-soft);}

/* Offres */
/* Grille adaptative : le nombre de colonnes suit le nombre d'offres,
   qui n'est plus figé à trois depuis qu'on peut en créer. */
.offer-grid{--offre-gap:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:var(--offre-gap);align-items:stretch;}
/* Une ou deux offres activées : largeur de carte du cas à trois, bloc
   centré. Sinon la page change de maquette selon ce qui est activé. */
@media (min-width:1025px){
  .offer-grid.offres-peu{justify-content:center;
    grid-template-columns:repeat(var(--offres-n,3),minmax(0,calc((100% - var(--offre-gap) * 2) / 3)));}
}
.offer-grid:hover .offer:not(:hover):not(:focus-within){opacity:.72;transform:scale(.96);}
.offer:hover,.offer:focus-within{transform:scale(1.045) translateY(-8px);z-index:5;box-shadow:var(--sh-lg);border-color:var(--bl-300);}
.offer.featured:hover,.offer.featured:focus-within{border-color:var(--or-500);}
.offer{
  position:relative;display:flex;flex-direction:column;background:#fff;overflow:hidden;
  border:1.5px solid var(--line);border-radius:var(--r-lg);padding:0;transition:.22s cubic-bezier(.2,.8,.3,1);
}
.offer.featured{border-color:var(--or-400);box-shadow:var(--sh-lg);}
.offer-top{height:6px;background:var(--bl-500);}
.offer.tier-live .offer-top{background:var(--v-500);}
.offer.tier-complete .offer-top{background:linear-gradient(90deg,var(--or-400),var(--or-600));}

/* Dépliant des caractéristiques de l'offre : replié par défaut (carte
   compacte), un clic déplie la liste et le bouton de choix. Technique
   simple (max-height) plutôt qu'une rotation 3D, plus fiable d'un
   navigateur à l'autre. */
.offer-toggle{
  margin-top:16px;padding:0;background:none;border:none;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--bl-700);display:inline-flex;align-items:center;gap:5px;
}
.offer-toggle svg{transform:rotate(90deg);transition:transform .25s;}
.offer.expanded .offer-toggle svg{transform:rotate(-90deg);}
.offer-details{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.2,.8,.3,1);}
.offer.expanded .offer-details{max-height:420px;}
.offer-details ul{margin:16px 0 18px;}
.offer-body{padding:24px 24px 22px;display:flex;flex-direction:column;flex:1;}
.offer-ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--bl-050);color:var(--bl-700);border:1px solid var(--bl-200);
}
.offer.tier-live .offer-ico{background:var(--v-050);color:var(--v-600);border-color:var(--v-200);}
.offer.tier-complete .offer-ico{background:var(--or-100);color:var(--or-700);border-color:var(--or-200);}
.offer.featured::after{
  content:attr(data-badge);position:absolute;top:16px;inset-inline-end:-32px;transform:rotate(35deg);
  background:linear-gradient(135deg,var(--or-400),var(--or-600));color:#3A2A00;
  font-size:11px;font-weight:800;padding:5px 38px;white-space:nowrap;
}
[dir="rtl"] .offer.featured::after{transform:rotate(-35deg);}
.offer h3{font-size:21px;}
.offer .accroche{font-size:13.5px;color:var(--ink-soft);margin-top:7px;min-height:38px;}
.price{margin-top:16px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;}
/* Montants et lignes de réduction centrés sur la carte d'offre. */
.offer .price-line{text-align:center;justify-content:center;width:100%;}
.price b{font-size:38px;font-weight:800;line-height:1;font-family:var(--f-num);}
.price span{font-size:13px;color:var(--ink-faint);font-weight:600;}
/*
 * Tarif barré.
 *
 * Le trait horizontal de `line-through` reprenait la couleur du texte,
 * déjà pâle : à 13 pixels, on ne le voyait pas, et le montant passait
 * pour le prix à payer. Un trait oblique, posé en dégradé par-dessus le
 * texte, se lit comme une rature et reste net à toutes les tailles.
 */
.price-old{
  position:relative;display:inline-block;font-size:14px;font-weight:600;
  color:var(--ink-soft);text-decoration:none;
}
.price-old::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top left,
    transparent calc(50% - 1.1px), var(--err) calc(50% - 1.1px),
    var(--err) calc(50% + 1.1px), transparent calc(50% + 1.1px));
}
/* En RTL, la rature doit pencher dans l'autre sens pour accompagner le
   sens de lecture plutôt que de le contrarier. */
[dir="rtl"] .price-old::after{
  background:linear-gradient(to top right,
    transparent calc(50% - 1.1px), var(--err) calc(50% - 1.1px),
    var(--err) calc(50% + 1.1px), transparent calc(50% + 1.1px));
}
.price-save{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--ok);background:var(--ok-bg);padding:3px 10px;border-radius:999px;}
.price-cap{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:600;color:var(--or-700);background:var(--or-100);padding:3px 10px;border-radius:999px;}
.offer ul{margin:16px 0 18px;flex:1;}
.offer li{position:relative;padding-block:5px;padding-inline-start:26px;font-size:13.8px;color:var(--ink-soft);}
.offer li::before{
  content:"";position:absolute;inset-inline-start:0;top:12px;width:16px;height:16px;border-radius:50%;
  background:var(--bl-100);
}
.offer.tier-live li::before{background:var(--v-100);}
.offer.tier-complete li::before{background:var(--or-200);}
.offer li::after{
  content:"";position:absolute;inset-inline-start:4.5px;top:16px;width:7px;height:4px;
  border-inline-start:2px solid var(--bl-700);border-bottom:2px solid var(--bl-700);transform:rotate(-45deg);
}

/*
 * Ligne phare d'une offre : le stage intensif, qui justifie à lui seul
 * le tarif de saison.
 *
 * Elle respire au lieu de s'entourer d'un bandeau : le texte grandit
 * puis revient, lentement, ce qui attire l'œil sans découper la carte en
 * deux. Le mouvement part du bord du texte pour que la puce ne bouge
 * pas, et s'arrête pour qui a demandé moins d'animations.
 *
 * Même ambre que la mention « augmentée » du titre (--or-500) : les deux
 * signalent la même chose (le stage inclus), ils doivent avoir la même
 * couleur pour que l'œil les relie l'un à l'autre.
 */
.offer li.av-phare{
  font-weight:750;color:var(--or-500);
  transform-origin:var(--phare-origine, 0%) center;
}
.offer li.av-phare::before{background:var(--or-200);}
.offer li.av-phare::after{border-color:var(--or-500);}
[data-theme="nuit"] .offer li.av-phare{color:#FCD34D;}
[data-theme="nuit"] .offer li.av-phare::before{background:rgba(245,158,11,.32);}
[data-theme="nuit"] .offer li.av-phare::after{border-color:#FCD34D;}
[dir="rtl"] .offer li.av-phare{--phare-origine:100%;}

@keyframes phare-respire{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.075);}
}
@media (prefers-reduced-motion: reduce){
  .offer li.av-phare{animation:none;}
}

/*
 * « augmentée » dans le titre de l'offre : même ambre que la ligne du
 * stage, pour dire d'un coup d'œil ce que la mention recouvre. Elle
 * reste dans le titre, sans devenir une pastille qui l'alourdirait.
 */
.offer h3 .offer-plus,
.co-nom .offer-plus{color:var(--or-500);font-style:italic;}
[data-theme="nuit"] .offer h3 .offer-plus,
[data-theme="nuit"] .co-nom .offer-plus{color:#FCD34D;}

/*
 * Pastille « Passez à l'offre augmentée » : ambre comme la ligne du
 * stage, pour que l'œil relie l'invitation à ce qu'elle apporte. Le bleu
 * se confondait avec le fond de la carte sélectionnée.
 */
.tag.tag-augmentee{background:var(--or-100);color:var(--or-700);}
[data-theme="nuit"] .tag.tag-augmentee{background:rgba(245,158,11,.18);color:#FCD34D;}

/* Même mise en avant dans la fenêtre de changement d'offre, couleur et
   respiration comprises (voir .offer li.av-phare ci-dessus). */
.co-liste li.av-phare{
  font-weight:700;color:var(--or-500);
  transform-origin:var(--phare-origine, 0%) center;
}
.co-liste li.av-phare::before{background:var(--or-500);}
[data-theme="nuit"] .co-liste li.av-phare{color:#FCD34D;}
[data-theme="nuit"] .co-liste li.av-phare::before{background:#FCD34D;}
[dir="rtl"] .co-liste li.av-phare{--phare-origine:100%;}
@media (prefers-reduced-motion: reduce){
  .co-liste li.av-phare{animation:none;}
}

/* Contrôles de la page offres */
.pricer{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px;box-shadow:var(--sh-sm);margin-bottom:22px;}
.pricer-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;}
.pricer-group{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.pricer-label{font-size:12px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;}
[dir="rtl"] .pricer-label{text-transform:none;letter-spacing:0;}
.pill-check{
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line-strong);background:#fff;font-size:13.5px;font-weight:600;transition:.15s;
}
.pill-check input{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:16px;height:16px;min-width:16px;margin:0;border-radius:5px;flex-shrink:0;
  border:1.5px solid var(--line-strong);background:#fff;position:relative;cursor:pointer;transition:.15s;
}
.pill-check input:checked{background:var(--bl-600);border-color:var(--bl-600);}
.pill-check input:checked::after{
  content:"";position:absolute;inset-inline-start:4px;top:1px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.pill-check input:disabled{background:var(--paper-soft);border-color:var(--line);cursor:not-allowed;}
.pill-check.is-on{border-color:var(--bl-600);background:var(--bl-050);color:var(--bl-800);}
.pill-check.is-off{opacity:.45;cursor:not-allowed;}
.pill-check-sm{padding:5px 10px;font-size:12px;gap:6px;}
.pill-check.pill-check-sm input,
.field .pill-check.pill-check-sm input,
.field .check-row .pill-check input{
  width:14px;height:14px;min-width:14px;max-width:14px;flex:0 0 14px;border-radius:3px;padding:0;
}
.pill-check.pill-check-sm input:checked::after{inset-inline-start:3.2px;top:.5px;width:3.5px;height:7px;}
.segment{display:inline-flex;background:var(--paper-soft);border:1.5px solid var(--line);border-radius:999px;padding:3px;}
.segment button{border:none;background:none;padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink-soft);}
.segment button.is-active{background:linear-gradient(135deg,var(--bl-600),var(--bl-800));color:#fff;}
.select{
  height:44px;border-radius:12px;border:1.5px solid var(--line-strong);background:#fff;color:var(--ink);
  padding-inline:14px;font-size:14px;font-family:inherit;font-weight:600;cursor:pointer;
}
.select:focus{border-color:var(--bl-500);outline:none;}

/* Témoignages */
.testi{
  background:#fff;border:1.5px solid var(--line);border-top:3px solid var(--v-400);border-radius:var(--r-lg);
  padding:26px;position:relative;overflow:hidden;transition:.2s cubic-bezier(.2,.8,.3,1);
}
.testi:hover{transform:translateY(-4px);box-shadow:var(--sh);}
.testi::before{
  content:"\201C";position:absolute;top:-18px;inset-inline-end:16px;font-size:80px;font-weight:800;
  color:var(--v-100);line-height:1;font-family:Georgia,'Times New Roman',serif;pointer-events:none;
}
.testi.tv-1{border-top-color:var(--or-400);}
.testi.tv-1::before{color:var(--or-100);}
.testi.tv-2{border-top-color:var(--bl-400);}
.testi.tv-2::before{color:var(--bl-100);}
.testi p{position:relative;}
.testi p{font-size:14.5px;color:var(--ink);margin:6px 0 18px;}
.testi-foot{display:flex;align-items:center;gap:11px;}
.testi cite{font-style:normal;line-height:1.3;}
.testi cite b{display:block;font-size:13.5px;font-weight:800;}
.testi cite span{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:1px;}
.testi-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:14.5px;
}
.testi-avatar.av-0{background:linear-gradient(135deg,var(--v-500),var(--v-800));}
.testi-avatar.av-1{background:linear-gradient(135deg,var(--or-400),var(--or-600));color:#3A2A00;}
.testi-avatar.av-2{background:linear-gradient(135deg,var(--bl-500),var(--bl-800));}
.stars{display:flex;gap:3px;color:var(--or-500);margin-bottom:12px;}

/* Équipe */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.team-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 26px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s;
}
.team-card:hover{transform:translateY(-3px);box-shadow:var(--sh);}
.team-photo{
  width:156px;height:156px;border-radius:50%;object-fit:cover;margin-bottom:20px;
  box-shadow:var(--sh);border:5px solid #fff;outline:3px solid var(--bl-100);
}
.team-card h3{font-size:18px;margin-bottom:4px;}
.team-role{font-size:11.5px;font-weight:800;color:var(--or-600);margin-bottom:13px;text-transform:uppercase;letter-spacing:.05em;}
[dir="rtl"] .team-role{text-transform:none;letter-spacing:0;}
.team-tag{font-size:13.5px;color:var(--ink-soft);line-height:1.55;}

/* FAQ : fond clair, qui fonce et se détache quand la question est ouverte.
   Couleur alternée bleu/violet pour varier sans surcharger. */
/* Bannière de mise en avant du parrainage */
.ref-band{
  display:flex;align-items:center;gap:26px;padding:34px 38px;border-radius:var(--r-xl);
  background:linear-gradient(120deg,var(--or-600),var(--or-400));position:relative;overflow:hidden;
}
.ref-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(440px 280px at 92% 115%,rgba(109,63,234,.28),transparent 62%);
}
.ref-band-ico{
  width:64px;height:64px;border-radius:18px;background:#fff;color:var(--v-600);
  display:grid;place-items:center;flex-shrink:0;position:relative;box-shadow:var(--sh-sm);
}
.ref-band-body{flex:1;position:relative;min-width:220px;}
.ref-band-sm{padding:20px 24px;gap:18px;border-radius:var(--r-lg);}
.ref-band-sm .ref-band-ico{width:46px;height:46px;border-radius:13px;}
.ref-band-sm:hover{box-shadow:var(--sh);transform:translateY(-2px);transition:.18s;}

/* FAQ : fond blanc sobre au repos, une seule couleur d'accent quand la
   question est ouverte (plus d'alternance bleu/violet, trop chargée). */
.faq-item{
  position:relative;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;
  margin-bottom:10px;overflow:hidden;transition:.26s cubic-bezier(.2,.8,.3,1);
}
.faq-item::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--bl-500),var(--bl-800));
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
[dir="rtl"] .faq-item::before{transform-origin:right;}
.faq-item:hover{border-color:var(--bl-300,var(--bl-200));background:var(--paper-soft);}
.faq-item.open{background:var(--bl-050);border-color:var(--bl-400);box-shadow:var(--sh-sm);}
.faq-item.open::before{transform:scaleX(1);}
.faq-q{
  width:100%;display:flex;align-items:center;gap:14px;padding:18px 22px;background:none;border:none;
  text-align:start;font-size:15px;font-weight:700;cursor:pointer;color:var(--ink);transition:color .2s;
}
.faq-item.open .faq-q{color:var(--bl-800);}
.faq-q .caret{
  margin-inline-start:auto;color:var(--ink-faint);flex-shrink:0;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper-soft);transition:.28s cubic-bezier(.2,.8,.3,1);
}
.faq-item.open .faq-q .caret{transform:rotate(180deg);background:var(--bl-600);color:#fff;}
.faq-a{padding:0 22px 20px;font-size:14px;color:var(--ink-soft);display:none;}
.faq-item.open .faq-a{display:block;animation:faqIn .32s cubic-bezier(.2,.8,.3,1) both;}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* Bandeau CTA */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:60px 40px;text-align:center;
  background:linear-gradient(150deg,var(--v-900),var(--v-700) 55%,var(--v-600));color:#fff;
}
.cta-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 300px at 80% 0%,rgba(232,185,58,.25),transparent 60%);}
.cta-band > *{position:relative;}
.cta-band h2{color:#fff;}
.cta-band p{margin-top:12px;color:rgba(255,255,255,.8);}
.cta-band .btn{margin-top:26px;}

/* Pied de page */
.site-footer{background:var(--bl-900);color:rgba(255,255,255,.8);padding:56px 0 28px;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;}
.site-footer h4{color:#fff;font-size:14px;margin-bottom:14px;}
.site-footer li{margin-bottom:9px;font-size:13.5px;}
.site-footer button,.site-footer li a{background:none;border:none;padding:0;cursor:pointer;color:rgba(255,255,255,.72);font-size:13.5px;text-decoration:none;}
.site-footer button:hover,.site-footer li a:hover{color:var(--or-400);}
.footer-tag{font-size:13.5px;margin-top:16px;max-width:330px;}
.footer-contact{font-size:13.5px;}
.footer-contact a{color:var(--or-200);}
/*
 * Champ fichier.
 *
 * Le champ natif est masqué, mais il reste dans la page : le clavier et
 * les lecteurs d'écran le trouvent, et c'est lui qui porte le fichier.
 * Le bouton visible est son étiquette, ce qui ouvre le sélecteur au clic
 * sans une ligne de script. Le texte du bouton natif, lui, n'est pas
 * traduisible et restait en anglais sur la page arabe.
 */
.file-pick{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 12px;border-radius:12px;border:1.5px dashed var(--line-strong);
  background:var(--paper-soft);
}
.file-pick:hover{border-color:var(--bl-400);background:var(--bl-050);}
.file-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.file-btn{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;cursor:pointer;
  padding:8px 16px;border-radius:999px;border:none;
  background:var(--bl-600);color:#fff;font-weight:700;font-size:12.5px;font-family:inherit;
}
.file-btn:hover{background:var(--bl-700);}
.file-btn svg{width:15px;height:15px;}
/* Mise en évidence au clavier : le champ masqué ne peut pas la porter. */
.file-native:focus-visible + .file-btn{outline:2px solid var(--bl-500);outline-offset:2px;}
.file-nom{
  flex:1 1 140px;min-width:0;font-size:13px;color:var(--ink-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.file-nom.is-set{color:var(--ink);font-weight:600;}



/* Rechargement de cagnotte */
.topup-moyens{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.topup-moyen{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;cursor:pointer;
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;
  font-size:12.5px;font-weight:700;color:var(--ink-soft);transition:.18s;
}
.topup-moyen:hover{border-color:var(--bl-400);color:var(--bl-700);}
.topup-moyen.is-on{border-color:var(--bl-600);background:var(--bl-050);color:var(--bl-800);box-shadow:0 0 0 3px var(--bl-100);}
.topup-moyen-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--paper-soft);color:inherit;}
.topup-moyen.is-on .topup-moyen-ico{background:var(--bl-600);color:#fff;}
.topup-info{font-size:13px;line-height:1.6;color:var(--ink-soft);background:var(--paper-soft);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:14px;}
.topup-qr{text-align:center;margin-bottom:16px;}
.topup-qr img{width:180px;height:180px;object-fit:contain;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;background:#fff;}
.topup-qr p{font-size:12.5px;color:var(--ink-faint);margin-top:8px;}
.topup-amounts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.topup-amount{
  padding:8px 14px;border-radius:999px;border:1.5px solid var(--line-strong);background:#fff;
  font-size:13px;font-weight:700;cursor:pointer;color:var(--ink-soft);transition:.15s;font-family:var(--f-num);
}
.topup-amount:hover{border-color:var(--bl-400);color:var(--bl-700);}
.topup-amount.is-on{border-color:var(--bl-600);background:var(--bl-050);color:var(--bl-800);}

/* Cartes "La plateforme" : accent latéral qui se déploie au survol */
.plat-card{
  position:relative;overflow:hidden;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r-lg);padding:26px 26px 26px 30px;
  transition:.24s cubic-bezier(.2,.8,.3,1);
}
[dir="rtl"] .plat-card{padding:26px 30px 26px 26px;}
.plat-card::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--bl-500),var(--bl-800));
  transform:scaleY(.28);transform-origin:top;transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.plat-card.pv-1::before{background:linear-gradient(180deg,var(--v-400),var(--v-700));}
.plat-card.pv-2::before{background:linear-gradient(180deg,var(--or-400),var(--or-600));}
.plat-card:hover,.plat-card:focus-within{
  transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--bl-200);
}
.plat-card:hover::before,.plat-card:focus-within::before{transform:scaleY(1);}
.plat-card-ico{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--bl-050);color:var(--bl-700);border:1px solid var(--bl-200);
  transition:transform .26s cubic-bezier(.2,.8,.3,1),background .26s,color .26s;
}
.plat-card.pv-1 .plat-card-ico{background:var(--v-050);color:var(--v-600);border-color:var(--v-200);}
.plat-card.pv-2 .plat-card-ico{background:var(--or-100);color:var(--or-700);border-color:var(--or-200);}
.plat-card:hover .plat-card-ico,.plat-card:focus-within .plat-card-ico{
  transform:scale(1.1) rotate(-6deg);background:linear-gradient(135deg,var(--bl-600),var(--bl-800));color:#fff;
}
.plat-card.pv-1:hover .plat-card-ico,.plat-card.pv-1:focus-within .plat-card-ico{background:linear-gradient(135deg,var(--v-500),var(--v-800));color:#fff;}
.plat-card.pv-2:hover .plat-card-ico,.plat-card.pv-2:focus-within .plat-card-ico{background:linear-gradient(135deg,var(--or-400),var(--or-600));color:#3A2A00;}
.plat-card h3{font-size:16.5px;margin-bottom:8px;}
.plat-card p{font-size:14px;color:var(--ink-soft);}

/* Cartes de contact (page Contactez-nous) */
/* Cartes de contact : une par ligne, pour que le numéro et l'adresse
   ne soient jamais coupés sur deux lignes. */
.contact-cards{display:flex;flex-direction:column;gap:12px;}
.contact-card{
  display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r);
  background:var(--bl-050);border:1.5px solid var(--bl-100);transition:.2s cubic-bezier(.2,.8,.3,1);
}
.contact-card:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--bl-400);background:var(--bl-100);}
.contact-card-ico{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--bl-500),var(--bl-800));color:#fff;
}
.contact-card-ico.gold{background:linear-gradient(135deg,var(--or-400),var(--or-600));color:#3A2A00;}
/* WhatsApp : le vert de la marque, pour qu'on la reconnaisse sans lire. */
.contact-card-ico.green{background:linear-gradient(135deg,#34C77B,#128C7E);color:#fff;}
.contact-card-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.contact-card-label{font-size:12px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;}
[dir="rtl"] .contact-card-label{text-transform:none;letter-spacing:0;}
.contact-card-value{font-size:16px;font-weight:800;color:var(--ink);font-family:var(--f-num);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.social-row{display:flex;gap:9px;margin-top:12px;}
.social-btn{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:#fff;transition:.15s;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.social-btn:hover{transform:translateY(-2px);filter:brightness(1.1);}
.social-btn.facebook{background:#1877F2;}
.social-btn.instagram{background:radial-gradient(circle at 30% 110%,#FDF497,#FD5949 30%,#D6249F 60%,#285AEB 90%);}
.social-btn.youtube{background:#FF0000;}
.social-btn.tiktok{background:#000000;}
.social-btn.whatsapp{background:#25D366;}
.footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:rgba(255,255,255,.5);text-align:center;}

/* ------------------------------------------------------- Formulaires/auth */
.auth-shell{min-height:calc(100vh - 74px);display:grid;place-items:center;padding:48px 20px;background:linear-gradient(170deg,var(--bl-050),#fff 60%);}
.auth-card{width:100%;max-width:480px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:36px 34px;}
.auth-card h1{font-size:25px;}
.auth-card .sub{margin-top:8px;font-size:14px;color:var(--ink-soft);}
.field{margin-top:18px;}
.field > label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;height:46px;border-radius:12px;border:1.5px solid var(--line-strong);background:#fff;
  padding-inline:14px;font-size:14.5px;font-family:inherit;color:var(--ink);
}
.field textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bl-500);outline:none;box-shadow:0 0 0 4px var(--bl-050);}
/* Une case à cocher posée dans un champ garde sa taille de pastille :
   la règle générale des champs l'étirait sur toute la largeur. */
.field .pill-check,
.field > label.pill-check{display:inline-flex;width:auto;margin-bottom:0;font-size:13.5px;}
.field .pill-check input{width:16px;height:16px;padding:0;border-radius:5px;}
.field .pill-check.pill-check-sm input{width:14px;height:14px;}
/* Mot de passe : l'œil se pose DANS le champ, côté fin de ligne, et le
   texte s'arrête avant lui pour ne jamais passer dessous. */
.pass-wrap{position:relative;display:block;}
.pass-wrap input{padding-inline-end:46px;}
.pass-eye{
  position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:grid;place-items:center;border:none;background:none;
  color:var(--ink-faint);cursor:pointer;border-radius:9px;
}
.pass-eye:hover{color:var(--bl-700);background:var(--paper-soft);}
.pass-eye.is-on{color:var(--bl-700);}
.field .hint{font-size:12px;color:var(--ink-faint);margin-top:6px;}
.field .err{display:none;font-size:12.5px;color:var(--err);margin-top:6px;font-weight:600;}
.captcha-q{font-family:var(--f-num);font-weight:800;color:var(--bl-700);font-size:14px;background:var(--bl-050);padding:2px 9px;border-radius:7px;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--err);}
.field.invalid .err{display:block;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.banner{display:none;margin-top:16px;padding:12px 15px;border-radius:12px;font-size:13.5px;font-weight:600;}
.banner.show{display:block;}
.banner.err{background:var(--err-bg);color:var(--err);}
.banner.ok{background:var(--ok-bg);color:var(--ok);}
.check-row{display:flex;flex-wrap:wrap;gap:10px;}
.auth-foot{margin-top:20px;text-align:center;font-size:13.5px;color:var(--ink-soft);}

/* --------------------------------------------------------- Espace connecté */
/* color explicite ici, et pas seulement sur body : body résout
   var(--ink) une fois pour toutes AVANT d'entrer dans .app, donc tout
   élément interne sans couleur propre héritait de cette résolution
   figée (toujours sombre) plutôt que de suivre le thème actif. */
.app{display:flex;min-height:100vh;background:var(--paper-soft);color:var(--ink);}
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--bl-900),#081D42);color:rgba(255,255,255,.72);
}
.sidebar .brand{padding:22px 20px 18px;}
.sidebar-nav{flex:1;overflow-y:auto;padding:6px 12px 16px;}
.sb-label{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.38);padding:16px 12px 8px;}
[dir="rtl"] .sb-label{letter-spacing:0;text-transform:none;}
.sb-link{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;margin-bottom:3px;
  border:none;background:none;border-radius:12px;color:rgba(255,255,255,.72);
  font-size:14px;font-weight:600;cursor:pointer;text-align:start;transition:.15s;text-decoration:none;
}
.sb-link svg{flex-shrink:0;opacity:.85;}
.sb-link:hover{background:rgba(255,255,255,.07);color:#fff;}
.sb-link.is-active{background:rgba(255,255,255,.12);color:#fff;}
.sb-link.is-active::before{content:"";position:absolute;inset-inline-start:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--or-400);}
.sb-badge{margin-inline-start:auto;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--or-500);color:#3A2A00;font-size:11px;font-weight:800;display:grid;place-items:center;}
.sb-foot{padding:14px;border-top:1px solid rgba(255,255,255,.1);}
.sb-user{display:flex;align-items:center;gap:11px;}
.sb-avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--or-400),var(--or-600));color:#3A2A00;display:grid;place-items:center;font-weight:800;flex-shrink:0;}
.sb-user .n{color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Zone de clic confortable : le lien ne mesurait que 14 pixels de haut,
   difficile à viser au doigt dans le menu déroulé. */
.sb-user button{background:none;border:none;padding:6px 0;color:rgba(255,255,255,.55);font-size:12px;cursor:pointer;min-height:30px;text-align:start;}
.sb-user button:hover{color:#fff;}

.app-main{flex:1;min-width:0;}
.topbar{
  position:sticky;top:0;z-index:40;height:70px;display:flex;align-items:center;gap:14px;padding-inline:30px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.topbar h1{font-size:17px;}
.topbar .actions{margin-inline-start:auto;display:flex;align-items:center;gap:10px;}
.app-content{padding:32px 36px;max-width:1400px;}
.mobile-bar{display:none;}
.scrim{display:none;}

.notif-dot{position:absolute;top:7px;inset-inline-end:7px;width:9px;height:9px;border-radius:50%;background:var(--or-500);border:2px solid #fff;}

/* Modale générique */
.modal-overlay{
  position:fixed;inset:0;background:rgba(11,26,43,.55);z-index:300;
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .15s ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-box{
  background:#fff;border-radius:var(--r-lg);max-width:560px;width:100%;max-height:82vh;
  display:flex;flex-direction:column;box-shadow:var(--sh-lg);
}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);flex-shrink:0;}
.modal-head h3{font-size:18px;}
.modal-body{padding:22px 24px 26px;overflow-y:auto;font-size:14px;line-height:1.7;color:var(--ink-soft);}
.modal-body p{margin-bottom:16px;}
/* ---- Fenêtre de confirmation ----
   Elle remplace la boîte du navigateur : même charte, même sens de
   lecture, et une question posée par la plateforme plutôt qu'un
   avertissement préfixé de l'adresse du site. */
.modal-confirm{max-width:460px;}
.modal-confirm .modal-body{padding-bottom:4px;}
.modal-confirm-q{font-size:15.5px;color:var(--ink);font-weight:600;line-height:1.6;}
.modal-confirm-d{font-size:13.5px;color:var(--ink-soft);}
.modal-pied{
  display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  padding:16px 24px 22px;
}
.modal-pied .btn{min-width:120px;}
/* Action irréversible : le bouton le dit avant le clic. */
.btn-danger{background:var(--err);color:#fff;border-color:transparent;box-shadow:none;}
.btn-danger:hover{background:#B52A38;transform:translateY(-1px);}
[data-theme="nuit"] .modal-confirm-q{color:var(--ink);}
.modal-body b{color:var(--ink);}

.notif-panel{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;width:340px;max-height:420px;overflow-y:auto;z-index:70;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);
}
.notif-item{padding:14px 17px;border-bottom:1px solid var(--line);}
.notif-item:last-child{border-bottom:none;}
.notif-item.unread{background:var(--bl-050);}
.notif-item b{display:block;font-size:13px;}
.notif-item p{font-size:12.5px;color:var(--ink-soft);margin-top:3px;}
.notif-item time{display:block;font-size:11px;color:var(--ink-faint);margin-top:5px;}
.notif-empty{padding:28px;text-align:center;font-size:13.5px;color:var(--ink-faint);}

/* Cartes de statistiques */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;}
.kpi .ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;background:var(--bl-050);color:var(--bl-700);border:1px solid var(--bl-200);}
.kpi .ico.gold{background:var(--or-100);color:var(--or-700);border-color:var(--or-200);}
.kpi b{font-size:26px;font-weight:800;font-family:var(--f-num);line-height:1;}
.kpi span{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:5px;}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;margin-bottom:20px;}
.panel-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.panel-head h2{font-size:17px;}
.panel-head .right{margin-inline-start:auto;}
/* Les deux colonnes s'étirent à la même hauteur : sans cela, le bloc
   le plus court laisse un vide sous lui. */
.two-col{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;align-items:stretch;}
.two-col > .panel{display:flex;flex-direction:column;margin-bottom:0;}
/* Le dernier bloc absorbe la hauteur restante, mais jamais un bouton :
   dans un panneau court, « flex:1 » le ramenait à la hauteur de son
   texte, 23 pixels, impossible à viser au doigt. */
.two-col > .panel > *:last-child:not(.btn){flex:1;}

.empty{padding:18px;border-radius:12px;background:var(--paper-soft);color:var(--ink-faint);font-size:13.5px;border:1px dashed var(--line-strong);}
.tag{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;white-space:nowrap;}
.tag.ok{background:var(--ok-bg);color:var(--ok);}
.tag.warn{background:var(--warn-bg);color:var(--warn);}
.tag.err{background:var(--err-bg);color:var(--err);}
.tag.info{background:var(--bl-050);color:var(--bl-700);}

.access-box{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}

.prog-row{padding:15px 0;border-bottom:1px solid var(--line);}
.prog-row:first-child{padding-top:0;}
.prog-row:last-child{border-bottom:none;padding-bottom:0;}
.prog-top{display:flex;justify-content:space-between;gap:12px;font-size:13.8px;font-weight:600;margin-bottom:8px;}
.prog-top .pct{font-family:var(--f-num);color:var(--bl-600);}

/* Mes cours */
.search-wrap{position:relative;margin-bottom:20px;}
.search-wrap svg{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);color:var(--ink-faint);}
.search-wrap input{
  width:100%;height:50px;border-radius:14px;border:1.5px solid var(--line-strong);background:#fff;
  padding-inline-start:46px;padding-inline-end:16px;font-size:14.5px;font-family:inherit;
}
.search-wrap input:focus{border-color:var(--bl-500);outline:none;box-shadow:0 0 0 4px var(--bl-050);}
.subj-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:820px;}
.subj-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:.18s;}
.subj-tile:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--bl-200);}
.subj-tile-photo{position:relative;aspect-ratio:16/9;overflow:hidden;}
.subj-tile-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.subj-tile-tag{position:absolute;top:12px;inset-inline-end:12px;}
.subj-tile-body{padding:13px 15px 15px;}
.subj-tile-body h3{font-size:15px;margin-bottom:7px;}

.matiere-block{margin-bottom:26px;}
.matiere-head{display:flex;align-items:center;gap:13px;margin-bottom:14px;flex-wrap:wrap;}
.matiere-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--bl-600),var(--bl-800));color:#fff;flex-shrink:0;}
.matiere-ico.pc{background:linear-gradient(135deg,var(--or-500),var(--or-700));color:#fff;}
.matiere-head h3{font-size:18px;}
.matiere-head .right{margin-inline-start:auto;display:flex;align-items:center;gap:10px;}
.chap-list{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
/* Liste de chapitres : ligne qui se détache au survol, avec un accent
   latéral indiquant le chapitre pointé. */
.chap{
  position:relative;display:flex;align-items:center;gap:14px;padding:15px 18px;
  border-bottom:1px solid var(--line);transition:.18s cubic-bezier(.2,.8,.3,1);
}
.chap::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--bl-600);transform:scaleY(0);transition:transform .2s;
}
.chap:last-child{border-bottom:none;}
.chap:hover{background:var(--bl-050);}
.chap:hover::before{transform:scaleY(1);}
.chap.locked{opacity:.62;}
.chap.locked:hover::before{background:var(--ink-faint);}
.chap-n{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:var(--bl-050);color:var(--bl-700);font-size:13px;font-weight:800;font-family:var(--f-num);
  transition:.18s;
}
.chap:hover .chap-n{background:linear-gradient(135deg,var(--bl-600),var(--bl-800));color:#fff;}
.chap.locked .chap-n{background:var(--paper-soft);color:var(--ink-faint);}
.chap-title{flex:1;font-size:14.2px;font-weight:600;min-width:0;}
.chap-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.fav-btn{background:none;border:none;cursor:pointer;color:var(--line-strong);padding:4px;transition:.15s;}
.fav-btn:hover{color:var(--or-400);}
.fav-btn.on{color:var(--or-500);}

/* Messagerie : fil de conversation en bulles */
.thread{display:flex;flex-direction:column;gap:12px;padding:4px 2px 6px;}
.bubble{max-width:78%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.55;word-break:break-word;}
.bubble.mine{align-self:flex-end;background:linear-gradient(135deg,var(--bl-600),var(--bl-800));color:#fff;border-end-end-radius:4px;}
.bubble.theirs{align-self:flex-start;background:var(--paper-soft);color:var(--ink);border-end-start-radius:4px;}
.bubble time{display:block;margin-top:7px;font-size:10.5px;opacity:.65;}

/* Séances live */
.live-item{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
.live-item:last-child{border-bottom:none;}
.live-date{
  width:58px;flex-shrink:0;text-align:center;border-radius:12px;padding:8px 4px;
  background:var(--bl-050);border:1px solid var(--bl-200);
}
.live-date b{display:block;font-size:19px;font-weight:800;color:var(--bl-700);font-family:var(--f-num);line-height:1;}
.live-date span{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;}
.live-info{flex:1;min-width:0;}
.live-info b{display:block;font-size:14.5px;}
.live-info span{font-size:12.5px;color:var(--ink-faint);}
.locked-overlay{text-align:center;padding:36px 24px;border-radius:var(--r);background:var(--paper-soft);border:1px dashed var(--line-strong);}
.locked-overlay .ico{width:52px;height:52px;border-radius:16px;margin:0 auto 16px;display:grid;place-items:center;background:var(--or-100);color:var(--or-700);border:1px solid var(--or-200);}
.locked-overlay h3{font-size:17px;margin-bottom:8px;}
.locked-overlay p{font-size:14px;color:var(--ink-soft);max-width:420px;margin:0 auto 20px;}

/* Parrainage */
.code-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 22px;border-radius:var(--r);background:linear-gradient(135deg,var(--bl-050),#fff);border:1.5px dashed var(--bl-200);}
.code-box .code{font-family:var(--f-num);font-size:27px;font-weight:800;letter-spacing:.14em;color:var(--bl-800);}
[dir="rtl"] .code-box .code{letter-spacing:.14em;direction:ltr;}
.wallet-amount{font-family:var(--f-num);font-size:38px;font-weight:800;background:linear-gradient(135deg,var(--bl-600),var(--or-600));-webkit-background-clip:text;background-clip:text;color:transparent;}
.list-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:13.8px;}
.list-row:last-child{border-bottom:none;}
.list-row .amt{font-family:var(--f-num);font-weight:700;}
.list-row .amt.plus{color:var(--ok);}
.list-row .amt.minus{color:var(--ink-soft);}

/* Récapitulatif de paiement */
.pay-shell{max-width:560px;}
.sum-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-soft);}
.sum-row b{color:var(--ink);font-weight:700;}
/* Détail d'une ligne au-dessus (ex. le « dont » de l'économie totale) :
   en retrait, plus petit, sans bordure propre pour rester rattaché. */
.sum-row-detail{padding-block:5px;padding-inline-start:16px;border-bottom:none;font-size:12.5px;}
.sum-row-detail b{font-weight:600;font-size:12.5px;}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:16px;border-top:2px solid var(--ink);}
.sum-total .big{font-family:var(--f-num);font-size:30px;font-weight:800;color:var(--bl-800);}
.wallet-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding:15px 17px;border-radius:14px;background:var(--or-100);border:1px solid var(--or-200);color:var(--or-700);font-size:13.5px;font-weight:600;}
.switch{position:relative;width:44px;height:25px;flex-shrink:0;}
.switch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:2;}
.switch .track{position:absolute;inset:0;border-radius:999px;background:var(--line-strong);transition:.18s;}
.switch input:checked ~ .track{background:var(--bl-600);}
.switch .knob{position:absolute;top:3px;inset-inline-start:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.25);}
[dir="ltr"] .switch input:checked ~ .track ~ .knob{transform:translateX(19px);}
[dir="rtl"] .switch input:checked ~ .track ~ .knob{transform:translateX(-19px);}

/* Facture */
.invoice{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:38px;max-width:660px;}
.invoice-head{display:flex;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:2px solid var(--bl-700);margin-bottom:22px;flex-wrap:wrap;}
.invoice-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;font-size:14px;}
.invoice-total{display:flex;justify-content:space-between;padding-top:16px;margin-top:12px;border-top:2px solid var(--ink);font-weight:800;font-size:17px;}
@media print{
  .sidebar,.topbar,.mobile-bar,.no-print{display:none!important;}
  .app,.app-main{background:#fff;}
  .app-content{padding:0;max-width:none;}
  .invoice{border:none;padding:0;}
}

/* Divers */
.toast{
  position:fixed;bottom:26px;inset-inline-start:50%;transform:translateX(-50%) translateY(24px);
  background:var(--ink);color:#fff;padding:14px 22px;border-radius:14px;font-size:14px;font-weight:600;
  box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:.22s;z-index:200;max-width:92vw;
}
[dir="rtl"] .toast{transform:translateX(50%) translateY(24px);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
[dir="rtl"] .toast.show{transform:translateX(50%) translateY(0);}
.toast.err{background:var(--err);}
.toast.ok{background:var(--ok);}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite;}
.spinner.dark{border-color:rgba(28,22,48,.18);border-top-color:var(--bl-700);}
@keyframes spin{to{transform:rotate(360deg);}}
.skel{border-radius:12px;background:linear-gradient(90deg,var(--line) 25%,var(--paper-soft) 37%,var(--line) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}

/* ------------------------------------------------------------- Responsive */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:46px;padding:60px 0 72px;}
  .hero-photo{max-width:440px;}
  .split{grid-template-columns:1fr;gap:36px;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .path{grid-template-columns:repeat(5,1fr);gap:8px;}
  .path-step span{display:none;}
  .steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .main-nav{display:none;}
  .burger{display:inline-flex;}
  .grid-2,.grid-3,.grid-4,.offer-grid,.steps,.stats-row,.photo-strip{grid-template-columns:1fr;}
  .path{grid-template-columns:1fr;gap:20px;}
  .path::before{inset-inline:auto;inset-inline-start:26px;top:8%;bottom:8%;width:3px;height:auto;
    background:linear-gradient(180deg,var(--v-200),var(--v-500) 60%,var(--or-500));}
  .path-step{display:flex;align-items:center;gap:16px;text-align:start;}
  .path-dot{margin:0;flex-shrink:0;}
  .path-step span{display:block;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .field-row{grid-template-columns:1fr;}

  .app{display:block;}
  .sidebar{position:fixed;top:0;inset-inline-start:0;z-index:120;transform:translateX(-100%);transition:transform .22s;}
  [dir="rtl"] .sidebar{transform:translateX(100%);}
  .sidebar.open{transform:none;}
  .scrim{position:fixed;inset:0;background:rgba(28,22,48,.55);z-index:110;}
  .scrim.open{display:block;}
  .mobile-bar{
    display:flex;align-items:center;gap:12px;height:62px;padding-inline:16px;position:sticky;top:0;z-index:50;
    background:#fff;border-bottom:1px solid var(--line);
  }
  .topbar{padding-inline:16px;height:60px;}
  .topbar h1{font-size:15.5px;}
  .topbar .lang-switch{display:none;}
  .app-content{padding:18px 16px 40px;}
  .section{padding:56px 0;}
  .cta-band{padding:44px 22px;}
  .invoice{padding:24px;}
  .notif-panel{width:min(340px,calc(100vw - 32px));}
}

/* Petits téléphones : l'en-tête (barre de contact + logo + langue + auth +
   burger) ne tient plus sur une seule ligne avec les boutons texte. On les
   masque au profit du menu mobile (qui les propose déjà), pour éliminer le
   débordement horizontal plutôt que de rétrécir des boutons jusqu'à les
   rendre illisibles. */
@media (max-width:480px){
  .header-actions > .btn{display:none;}
}

/* Coordonnées bancaires affichées pour le virement */
.topup-rib{background:var(--paper-soft);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 14px;margin-bottom:14px;}
.topup-rib-num{font-family:var(--f-num);letter-spacing:.04em;}

/* Visuel du hero affiché en entier (illustration au format paysage) */

/* Nos valeurs : cartes numérotées, deux teintes en alternance */
.values-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.value-card{
  position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:20px;
  padding:28px 28px 28px 24px;border-radius:var(--r-lg);border:1.5px solid var(--line);
  background:#fff;transition:.24s cubic-bezier(.2,.8,.3,1);
}
[dir="rtl"] .value-card{padding:28px 24px 28px 28px;}
.value-card.vc-0{background:var(--bl-050);border-color:var(--bl-100);}
.value-card::after{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--bl-500),var(--v-500));
  transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.value-card:hover,.value-card:focus-within{
  transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--bl-300,var(--bl-200));
}
.value-card:hover::after,.value-card:focus-within::after{transform:scaleY(1);}
.value-num{
  flex-shrink:0;font-family:var(--f-num);font-size:34px;font-weight:800;line-height:1;
  color:var(--bl-200);transition:color .24s;
}
.value-card.vc-0 .value-num{color:var(--bl-400);}
.value-card:hover .value-num,.value-card:focus-within .value-num{color:var(--v-500);}
.value-body h3{font-size:17px;margin-bottom:8px;}
.value-body p{font-size:14px;color:var(--ink-soft);line-height:1.6;}
@media (max-width:860px){.values-grid{grid-template-columns:1fr;}}

/* Notre contenu : filtres en colonne latérale, résultats à côté */
.contenu-layout{display:grid;grid-template-columns:270px 1fr;gap:26px;align-items:start;}
.contenu-filtres{
  position:sticky;top:96px;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r-lg);padding:22px;
}
.contenu-filtres .field{margin-top:14px;}
.contenu-filtres .field:first-of-type{margin-top:0;}
@media (max-width:900px){
  .contenu-layout{grid-template-columns:1fr;}
  .contenu-filtres{position:static;}
}

/* Contactez-nous : FAQ et contact côte à côte */
/*
 * Deux colonnes, mais pas sur toute la largeur du site : une page de
 * contact tient en deux panneaux, et les étaler sur 1220 pixels la
 * faisait paraître vide à côté des pages remplies de cartes. Le titre
 * reste centré sur la même bande que les autres pages.
 */
.contact-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:start;
  max-width:1040px;margin-inline:auto;}
@media (max-width:960px){.contact-layout{grid-template-columns:1fr;}}

/* Photo détourée : pas de cadre ni d'ombre, l'image s'intègre au fond de page */
.cutout-photo{position:relative;display:grid;place-items:center;}
.cutout-photo::before{
  content:"";position:absolute;inset:8% 6%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,var(--bl-050) 0%,transparent 68%);
}
.cutout-photo img{position:relative;z-index:1;width:100%;height:auto;display:block;}

/* Photo intégrée en douceur : bords fondus vers la page, sans cadre marqué.
   Utilisé quand l'arrière-plan de la photo n'est pas détourable proprement. */
.soft-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/11;}
.soft-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.soft-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0%,rgba(255,255,255,0) 26%),
             linear-gradient(0deg,var(--paper) 0%,rgba(255,255,255,0) 22%);
  mix-blend-mode:normal;
}
[dir="rtl"] .soft-photo::after{
  background:linear-gradient(270deg,var(--paper) 0%,rgba(255,255,255,0) 26%),
             linear-gradient(0deg,var(--paper) 0%,rgba(255,255,255,0) 22%);
}

/* Formats de contenu (page Notre contenu) */
.content-formats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
.format-card{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px;
  transition:.22s cubic-bezier(.2,.8,.3,1);
}
.format-card:hover,.format-card:focus-within{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--bl-200);}
.format-ico{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;
  background:var(--bl-050);color:var(--bl-700);border:1px solid var(--bl-200);
}
.format-card.fc-1 .format-ico{background:var(--v-050);color:var(--v-600);border-color:var(--v-200);}
.format-card.fc-2 .format-ico{background:var(--ok-bg);color:var(--ok);border-color:var(--ok);}
.format-card.fc-3 .format-ico{background:var(--or-100);color:var(--or-700);border-color:var(--or-200);}
.format-card h3{font-size:15.5px;margin-bottom:7px;}
.format-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;}

/* Bandeau conformité au programme officiel */
.content-official{
  display:flex;align-items:flex-start;gap:16px;padding:22px 26px;border-radius:var(--r-lg);
  background:var(--bl-050);border:1.5px solid var(--bl-200);
}
.content-official-ico{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--bl-600),var(--bl-800));color:#fff;
}
.content-official b{display:block;font-size:15.5px;margin-bottom:6px;color:var(--bl-900);}
.content-official p{font-size:13.8px;color:var(--ink-soft);line-height:1.6;}
@media (max-width:900px){.content-formats{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.content-formats{grid-template-columns:1fr;}}

/* Image détourée en colonne : bornée en hauteur pour ne pas dominer la page */
.cutout-photo img{max-height:380px;width:auto;margin-inline:auto;}

/* ============================================================
   Réglages typographiques de la version arabe
   Cairo a des hauteurs de caractères plus faibles que la police
   latine : à taille égale, l'arabe paraît plus petit. On compense
   sur les titres, tout en gardant le hero visible sans défiler.
   ============================================================ */

/* Titres de section plus présents en arabe */
[dir="rtl"] .t-lg{font-size:clamp(30px,3.9vw,46px);line-height:1.4;}
[dir="rtl"] .t-md{font-size:24px;}
[dir="rtl"] .sec-head .lead{font-size:17.5px;}
[dir="rtl"] .eyebrow{font-size:13.5px;}

/* Titre du hero : assez grand, mais borné pour que les boutons et la
   phrase de confiance restent visibles sans défiler. */
[dir="rtl"] .t-xl{font-size:clamp(30px,3.8vw,46px);line-height:1.35;}
[dir="rtl"] .hero-sub{font-size:17px;line-height:1.75;}
[dir="rtl"] .hero-grid{padding:52px 0 64px;}
[dir="rtl"] .hero-rotator{margin-block:14px;}

/* Surlignage : l'arabe n'a pas besoin d'autant de marge latérale */
[dir="rtl"] .hl{padding:1px 6px;border-radius:7px;line-height:1.5;}

/* Corps de texte arabe : interlignage plus aéré pour la lisibilité */
[dir="rtl"] .lead,[dir="rtl"] .value-body p,[dir="rtl"] .info-card p,
[dir="rtl"] .plat-card p,[dir="rtl"] .format-card p{line-height:1.85;}
[dir="rtl"] .stat-card span.stat-label{font-size:15px;}

/* Lien de retour : icône et libellé sur une seule ligne */
.back-link{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;margin-bottom:16px;
  padding:7px 14px;border-radius:999px;background:var(--paper-soft);border:1px solid var(--line);
  transition:.18s;
}
.back-link:hover{background:var(--bl-050);border-color:var(--bl-200);text-decoration:none;}
.back-link svg{flex-shrink:0;transform:rotate(180deg);}
[dir="rtl"] .back-link svg{transform:none;}

/* Rappel d'échéance d'abonnement (tableau de bord) */
.echeance-alerte{
  display:flex;align-items:center;gap:16px;margin-bottom:20px;padding:16px 20px;
  border-radius:var(--r);background:var(--or-100);border:1.5px solid var(--or-200);
}
.echeance-alerte.urgent{background:var(--err-bg,#FEF2F2);border-color:var(--err);}
.echeance-ico{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  background:var(--or-400);color:#3A2A00;
}
.echeance-alerte.urgent .echeance-ico{background:var(--err);color:#fff;}
.echeance-body{flex:1;min-width:0;}
.echeance-body b{display:block;font-size:15px;color:var(--or-700);}
.echeance-alerte.urgent .echeance-body b{color:var(--err);}
.echeance-body p{font-size:13px;color:var(--ink-soft);margin-top:3px;}
/* Thème sombre : fonds sombres teintés, texte clair. */
[data-theme="nuit"] .echeance-alerte{background:rgba(245,158,11,.14);border-color:rgba(252,211,77,.45);}
[data-theme="nuit"] .echeance-alerte.urgent{background:rgba(239,68,68,.16);border-color:rgba(248,113,113,.6);}
[data-theme="nuit"] .echeance-body b{color:#FCD34D;}
[data-theme="nuit"] .echeance-alerte.urgent .echeance-body b{color:#FCA5A5;}

/* Page de paiement sécurisé */
.pay-secure{max-width:560px;margin-inline:auto;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:32px;}
.pay-secure-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px;}
.pay-secure-lock{
  width:48px;height:48px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;
  background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok);
}
.pay-secure-amount{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;border-radius:var(--r);background:var(--bl-050);border:1.5px solid var(--bl-200);margin-bottom:20px;
}
.pay-secure-amount b{font-size:26px;font-weight:800;color:var(--bl-800);}

/* Bandeau d'espace élève : hors de la zone de contenu, pour rester
   affiché quelle que soit la page (les vues réécrivent #app-content). */
.app-hero-wrap{padding:18px 30px 18px;}
.app-hero-wrap .page-hero{margin-bottom:0;}
.app-hero-wrap + .app-content{padding-top:0;}
@media (max-width:640px){.app-hero-wrap{padding:14px 16px 14px;}}

/* Vidéos de démonstration (page Contact/Aide) */
.demo-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.demo-video{
  display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:var(--r);
  background:var(--paper-soft);border:1.5px solid var(--line);transition:.18s;
}
.demo-video:hover{border-color:var(--bl-400);background:var(--bl-050);transform:translateY(-2px);}
.demo-video-play{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--bl-600),var(--bl-800));color:#fff;
}
.demo-video-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.demo-video-body b{font-size:14px;}
.demo-video-body small{font-size:12.5px;color:var(--ink-soft);}

/* Panneaux de l'espace connecté : léger relief et titres mieux posés */
.panel{transition:box-shadow .2s;}
.panel:hover{box-shadow:var(--sh-sm);}
.panel-head{padding-bottom:14px;border-bottom:1px solid var(--line);}
.panel-head > svg{color:var(--bl-600);flex-shrink:0;}
.panel-head h2{font-size:17.5px;}

/* Vignettes de matières : accent coloré au survol */
.subj-tile{position:relative;}
.subj-tile::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--bl-500),var(--v-500));
  transform:scaleX(0);transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.subj-tile:hover::after{transform:scaleX(1);}
.subj-tile-body h3{transition:color .18s;}
.subj-tile:hover .subj-tile-body h3{color:var(--bl-800);}

/* Indicateurs du tableau de bord : relief au survol */
.kpi{transition:.22s cubic-bezier(.2,.8,.3,1);}
.kpi:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--bl-200);}
.kpi .ico{transition:transform .22s;}
.kpi:hover .ico{transform:scale(1.1) rotate(-5deg);}

/* ============================================================
   THÈMES DE L'ESPACE CONNECTÉ
   L'élève choisit l'ambiance de son espace. On ne redéfinit que
   la famille "bl" (bleu par défaut) : toute l'interface s'appuie
   dessus, donc un seul jeu de variables suffit à basculer les
   sidebars, boutons, accents et dégradés.
   ============================================================ */

/* Thème « Mauve » — parme doux, moins froid que le bleu */
[data-theme="mauve"]{
  --bl-900:#3B1E4D; --bl-800:#522A69; --bl-700:#6E3A8A; --bl-600:#8B4FAB;
  --bl-500:#A96BC7; --bl-400:#C494DC; --bl-300:#DBBAEB; --bl-200:#EBD8F5;
  --bl-100:#F4EAFA; --bl-050:#FAF5FD;
}

/* Thème « Nuit » — fond sombre pour le travail du soir */
[data-theme="nuit"]{
  --bl-900:#0A0E17; --bl-800:#111827; --bl-700:#1B2436; --bl-600:#3B82F6;
  --bl-500:#60A5FA; --bl-400:#93C5FD; --bl-300:#1E293B; --bl-200:#243044;
  --bl-100:#1B2436; --bl-050:#151C2A;

  --paper:#0F1520; --paper-soft:#151C2A;
  /* --ink-faint servait aux dates et aux mentions secondaires : trop
     sombre, elles disparaissaient sur le fond de nuit. */
  --ink:#E8EDF5; --ink-soft:#A3B0C4; --ink-faint:#8D9BB2;
  --line:#232D3F; --line-strong:#2E3A4E;
}
/* Sur fond sombre, les surfaces blanches doivent suivre. */
[data-theme="nuit"] body{background:var(--paper);}
[data-theme="nuit"] .panel,
[data-theme="nuit"] .kpi,
[data-theme="nuit"] .offer,
[data-theme="nuit"] .page-hero,
[data-theme="nuit"] .chap-list,
[data-theme="nuit"] .subj-tile,
[data-theme="nuit"] .assist-panel,
[data-theme="nuit"] .modal-box,
[data-theme="nuit"] .pricer,
[data-theme="nuit"] .contact-card,
[data-theme="nuit"] .format-card,
[data-theme="nuit"] .value-card,
[data-theme="nuit"] .faq-item,
[data-theme="nuit"] .assist-msg.bot,
[data-theme="nuit"] .assist-form,
[data-theme="nuit"] .topup-rib{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .app-content{background:var(--paper);}
[data-theme="nuit"] input,
[data-theme="nuit"] textarea,
[data-theme="nuit"] .select{background:#0F1520;color:var(--ink);border-color:var(--line-strong);}
[data-theme="nuit"] .btn-ghost,
[data-theme="nuit"] .btn-light{background:#1B2436;color:var(--ink);border-color:var(--line-strong);}
[data-theme="nuit"] .empty{background:#111827;border-color:var(--line-strong);}

/* Thème « Rose » */
/* Thème « Rose » — nuance claire */
[data-theme="rose"]{
  --bl-900:#6D2447; --bl-800:#8C2F5B; --bl-700:#AD3D71; --bl-600:#CB5289;
  --bl-500:#E0709F; --bl-400:#F0A0C2; --bl-300:#F7C4D9; --bl-200:#FBDCE8;
  --bl-100:#FDEBF2; --bl-050:#FEF6F9;
}

/* Sélecteur de thème (page Mon abonnement) */
.theme-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.theme-choice{
  display:flex;flex-direction:column;gap:10px;padding:14px;cursor:pointer;
  border:1.5px solid var(--line-strong);border-radius:var(--r);background:#fff;transition:.18s;
}
.theme-choice:hover{border-color:var(--bl-400);transform:translateY(-2px);}
.theme-choice.is-on{border-color:var(--bl-600);box-shadow:0 0 0 3px var(--bl-100);}
.theme-swatch{display:flex;gap:5px;}
.theme-swatch i{width:26px;height:26px;border-radius:8px;display:block;}
.theme-choice-name{font-size:13.5px;font-weight:700;color:var(--ink);}

/* Récit « Notre histoire » : trois temps, avec un filet vertical qui
   guide la lecture et une chute mise en valeur. */
.story{position:relative;padding-inline-start:26px;max-width:760px;margin-inline:auto;}
.story::before{
  content:"";position:absolute;inset-inline-start:0;top:6px;bottom:6px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--bl-400),var(--v-400));
}
.story p{font-size:16.5px;line-height:1.8;color:var(--ink-soft);margin-bottom:18px;}
.story p:last-child{margin-bottom:0;}
.story-lead{font-size:18px;color:var(--ink);font-weight:500;}
.story-chute{
  font-weight:700;color:var(--ink);background:var(--bl-050);
  border-radius:var(--r);padding:16px 20px;border:1px solid var(--bl-100);
}
[dir="rtl"] .story p{line-height:1.95;}


/* ============================================================
   BANDEAU DE PAGE (espace connecté)
   Sobre sur les pages internes : le titre de la page domine, le
   contexte de l'élève reste lisible mais discret. Coloré sur le
   tableau de bord, qui joue le rôle d'accueil.
   ============================================================ */
.page-hero{
  position:relative;display:flex;align-items:center;align-content:center;gap:16px;flex-wrap:wrap;
  padding:18px 22px;border-radius:var(--r);margin-bottom:22px;
  background:#fff;border:1.5px solid var(--line);
}
.page-hero-ico{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;
  background:var(--bl-050);color:var(--bl-700);border:1px solid var(--bl-200);
}
.page-hero-ico svg{width:21px;height:21px;}
.page-hero-main{flex:1;min-width:200px;}
.page-hero-title{font-size:21px;font-weight:800;line-height:1.25;color:var(--ink);}
.page-hero-sub{font-size:13.5px;color:var(--ink-soft);margin-top:3px;}
.page-hero-tag{
  flex-shrink:0;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--bl-050);color:var(--bl-800);border:1px solid var(--bl-100);
}

/* Tableau de bord : bandeau d'accueil, en couleur */
.page-hero.is-home{
  overflow:hidden;color:#fff;border:none;
  background:linear-gradient(130deg,var(--bl-700),var(--bl-500) 62%,var(--v-500));
}
.page-hero.is-home::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(340px 200px at 92% 130%,rgba(255,192,31,.3),transparent 62%);
}
.page-hero.is-home .page-hero-ico{
  background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.28);
}
.page-hero.is-home .page-hero-main{position:relative;}
.page-hero.is-home .page-hero-title{color:#fff;}
.page-hero.is-home .page-hero-sub{color:rgba(255,255,255,.85);}

/* Action contextuelle (ex. raccourci parrainage sur le tableau de bord) */
.page-hero-action{
  position:relative;display:inline-flex;align-items:center;gap:9px;flex-shrink:0;cursor:pointer;
  padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700;transition:.2s;
  background:var(--bl-050);color:var(--bl-800);border:1.5px solid var(--bl-200);
}
.page-hero-action:hover{background:var(--bl-100);transform:translateY(-2px);}
.page-hero.is-home .page-hero-action{
  background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.3);
}
.page-hero.is-home .page-hero-action:hover{background:rgba(255,255,255,.3);}
.page-hero-action-ico{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--or-400);color:#3A2A00;
}
.page-hero-action-ico svg{width:14px;height:14px;}

@media (max-width:640px){
  .page-hero{padding:16px;gap:12px;}
  .page-hero-tag,.page-hero-action{width:100%;justify-content:center;}
}

/* Sélecteur de thème compact, dans le bandeau du tableau de bord */
.hero-themes{position:relative;display:flex;gap:6px;flex-shrink:0;align-items:center;}
.hero-theme{
  width:26px;height:26px;padding:2px;border-radius:50%;cursor:pointer;
  background:none;border:2px solid rgba(255,255,255,.35);transition:.18s;
}
.hero-theme span{display:block;width:100%;height:100%;border-radius:50%;}
.hero-theme:hover{transform:scale(1.12);border-color:rgba(255,255,255,.7);}
.hero-theme.is-on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35);}

/* ============================================================
   RESPONSIVE — tablette et téléphone
   Le site s'adapte sans dépendre d'une largeur d'écran précise :
   les grilles passent en colonne, la barre latérale devient un
   menu escamotable, et rien ne déborde horizontalement.
   ============================================================ */

/* Aucun débordement horizontal, quelle que soit la largeur */
html,body{max-width:100%;overflow-x:hidden;}
img,svg,video{max-width:100%;height:auto;}
table{max-width:100%;}

/* ---- Tablette ---- */
@media (max-width:1024px){
  .wrap{padding-inline:22px;}
  .split{grid-template-columns:1fr;gap:32px;}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .offer-grid{grid-template-columns:1fr;gap:18px;}
  .offer-grid:hover .offer:not(:hover){opacity:1;transform:none;}
  .offer:hover,.offer:focus-within{transform:translateY(-4px);}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .subj-tiles{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr;}
}

/* ---- Téléphone ---- */
@media (max-width:680px){
  .wrap{padding-inline:16px;}
  .grid-2,.grid-3,.grid-4,.stats-row,.subj-tiles,
  .content-formats,.values-grid,.contenu-layout,.contact-layout{grid-template-columns:1fr;}
  /*
   * Téléphone : tout le bloc d'accueil doit tenir à l'écran jusqu'à la
   * ligne sur le programme officiel, barre d'adresse du navigateur
   * comprise. On resserre les écarts plutôt que de retirer du texte.
   */
  .hero-grid{padding:26px 0 30px;gap:28px;}
  .t-xl{font-size:clamp(25px,7vw,34px);}
  .t-lg{font-size:clamp(22px,6vw,30px);}
  .hero-sub{margin-top:14px;font-size:16.5px;}
  .hero-rotator{margin-top:12px;font-size:17px;}
  .hero-cta{margin-top:20px;flex-direction:column;align-items:stretch;gap:10px;}
  .hero-cta .btn{width:100%;justify-content:center;}
  .hero-trust{margin-top:16px;}
  .page-hero{flex-direction:column;align-items:flex-start;}
  .page-hero-tag,.page-hero-action{width:100%;justify-content:center;}
  .hero-themes{width:100%;justify-content:center;margin-top:4px;}
  .field-row{grid-template-columns:1fr;}
  .topup-moyens{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .invoice-parties{grid-template-columns:1fr;gap:16px;}
  .demo-videos{grid-template-columns:1fr;}
  .path{grid-template-columns:repeat(2,1fr);gap:22px;}
  .path::before{display:none;}
  .team-grid{grid-template-columns:1fr;}
  .modal-box{max-width:100%;margin:12px;}
  .chap{padding:13px 14px;gap:11px;}
  .chap-title{font-size:14px;}
}

/* ---- Petits téléphones ---- */
@media (max-width:400px){
  .wrap{padding-inline:13px;}
  .topup-moyens{grid-template-columns:1fr;}
  .path{grid-template-columns:1fr;}
  .brand-mark{height:44px;}
}

/* Bandeau signalant à l'administrateur qu'il navigue sur un compte élève */
.imperso-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 22px;background:var(--or-400);color:#3A2A00;
  font-size:13.5px;font-weight:700;position:sticky;top:0;z-index:55;
}
.imperso-ico{display:inline-flex;flex-shrink:0;}
.imperso-txt{flex:1;min-width:180px;}
.imperso-quit{
  background:#3A2A00;color:#fff;border:none;flex-shrink:0;
  padding:6px 14px;border-radius:999px;font-weight:700;cursor:pointer;font-size:12.5px;
}
.imperso-quit:hover{background:#000;}

/* Page Nos offres : en-tête resserré, l'essentiel doit rester visible
   sans avoir à faire défiler. */
.offers-page .sec-head{margin-bottom:22px;}
/* La phrase d'introduction tient sur une ligne. Au gabarit commun de
   660 pixels, elle se coupait en deux et séparait le principe du tarif
   de ce dont il dépend. Elle se replie normalement sur un téléphone. */
.offers-page .sec-head{max-width:960px;}
.offers-page.section-sm{padding-top:34px;padding-bottom:40px;}

/* Répartition de la cagnotte : part transférable / part bloquée */
.wallet-split{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
.wallet-part{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);}
.wallet-part i{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:block;}
.wallet-part .wp-ok{background:var(--ok);}
.wallet-part .wp-lock{background:var(--ink-faint);}

/* Confirmation de transfert */
.transfer-confirm{text-align:center;padding:20px 8px 8px;}
.transfer-confirm-ico{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  background:var(--or-100);color:var(--or-700);
}
.transfer-confirm-q{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:10px;}


/* Barre latérale réellement figée : elle ne suit pas le défilement du
   contenu. Seule la liste des liens défile si elle dépasse en hauteur,
   pour que le bloc profil du bas reste toujours atteignable. */
@media (min-width:1025px){
  .app{align-items:start;}
  .sidebar{
    position:fixed;inset-block:0;inset-inline-start:0;width:266px;
    display:flex;flex-direction:column;overflow:hidden;z-index:40;
  }
  .sidebar-nav{flex:1;overflow-y:auto;min-height:0;}
  .app-main{margin-inline-start:266px;}
}

/* Pas d'espace mort entre le bandeau et le premier bloc de contenu */
.app-hero-wrap + .app-content{padding-top:0;}
.app-content > *:first-child{margin-top:0;}

/* ============================================================
   ASSISTANT — bulle flottante
   ============================================================ */
.assist-fab{
  position:fixed;inset-inline-end:22px;bottom:22px;z-index:90;
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--bl-600),var(--bl-800));color:#fff;
  box-shadow:0 8px 26px rgba(11,26,43,.28);display:grid;place-items:center;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s;
}
.assist-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 32px rgba(11,26,43,.34);}
.assist-fab.is-open{transform:scale(.9);opacity:.85;}
.assist-fab svg{width:24px;height:24px;}

.assist-panel{
  position:fixed;inset-inline-end:22px;bottom:88px;z-index:91;
  width:min(370px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 130px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 18px 50px rgba(11,26,43,.24);
}
.assist-panel[hidden]{display:none;}

.assist-head{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:linear-gradient(135deg,var(--bl-700),var(--bl-500));color:#fff;
}
.assist-head-ico{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.2);
}
.assist-head-ico svg{width:18px;height:18px;}
.assist-head b{display:block;font-size:14.5px;}
.assist-head small{font-size:12px;color:rgba(255,255,255,.82);}
.assist-head .icon-btn{margin-inline-start:auto;color:#fff;border:none;background:rgba(255,255,255,.15);}
.assist-head .icon-btn:hover{background:rgba(255,255,255,.28);}

.assist-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--paper-soft);}
.assist-msg{
  max-width:85%;padding:10px 14px;border-radius:16px;font-size:13.8px;line-height:1.6;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.assist-msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-start-start-radius:5px;}
.assist-msg.moi{align-self:flex-end;background:var(--bl-600);color:#fff;border-end-end-radius:5px;}
.assist-link{
  display:inline-block;margin-top:8px;background:var(--bl-050);border:1px solid var(--bl-200);
  color:var(--bl-800);font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer;
}
.assist-link:hover{background:var(--bl-100);}

.assist-sugg{display:flex;flex-direction:column;gap:7px;margin-top:2px;}
.assist-sugg button{
  text-align:start;background:#fff;border:1px solid var(--bl-200);color:var(--bl-800);
  font-size:13px;padding:9px 13px;border-radius:12px;cursor:pointer;transition:.16s;font-family:inherit;
}
.assist-sugg button:hover{background:var(--bl-050);border-color:var(--bl-400);}

.assist-typing{display:flex;gap:5px;align-items:center;padding:14px;}
.assist-typing span{
  width:7px;height:7px;border-radius:50%;background:var(--ink-faint);
  animation:assistDot 1.2s infinite ease-in-out;
}
.assist-typing span:nth-child(2){animation-delay:.15s;}
.assist-typing span:nth-child(3){animation-delay:.3s;}
@keyframes assistDot{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-4px);}}

.assist-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff;}
.assist-form input{
  flex:1;min-width:0;padding:10px 14px;border-radius:999px;border:1.5px solid var(--line-strong);
  font-size:13.5px;font-family:inherit;
}
.assist-form input:focus{outline:none;border-color:var(--bl-500);}
.assist-send{
  width:40px;height:40px;border-radius:50%;border:none;flex-shrink:0;cursor:pointer;
  background:var(--bl-600);color:#fff;display:grid;place-items:center;
}
.assist-send:hover{background:var(--bl-800);}
[dir="rtl"] .assist-send svg{transform:rotate(180deg);}

@media (max-width:680px){
  .assist-fab{inset-inline-end:14px;bottom:14px;width:50px;height:50px;}
  .assist-panel{inset-inline:14px;bottom:74px;width:auto;max-height:calc(100vh - 110px);}
}

/* ============================================================
   DENSITÉ — contenu légèrement dézoomé
   On réduit l'échelle typographique et les espacements de base
   plutôt que d'appliquer un zoom CSS, qui rendrait le texte flou.
   ============================================================ */
@media (min-width:1025px){
  /* Densité de l'espace CONNECTÉ uniquement : .app n'existe pas dans la
     coquille publique, ces règles ne peuvent donc pas y fuiter. */
  .app .wrap{max-width:1400px;}
  .app .section{padding-block:56px;}
  .app .section-sm{padding-block:40px;}
  .app .panel{padding:22px;margin-bottom:16px;}
  .app-content{padding:20px 30px 40px;}
  .kpi-grid{gap:14px;}
  .app .t-lg{font-size:clamp(24px,3.1vw,36px);}
  .app .t-md{font-size:20px;}
  .app .sec-head{margin-bottom:24px;}
}

/* ============================================================
   PAGES PUBLIQUES — largeur légèrement réduite, contenu dézoomé
   #page n'existe que dans la coquille publique (voir render()) :
   c'est un point d'ancrage sûr, distinct de l'espace connecté.
   ============================================================ */
@media (min-width:1025px){
  /* Largeur : un cran en dessous de l'ancienne valeur, sans être étroite. */
  #page .wrap{max-width:1220px;}
  #page .wrap-narrow{max-width:880px;}

  /* Échelle typographique et espacements resserrés d'environ 10 % */
  #page .t-xl{font-size:clamp(26px,3.3vw,40px);}
  #page .t-lg{font-size:clamp(22px,2.8vw,33px);}
  #page .t-md{font-size:18px;}
  #page .lead{font-size:16.5px;}
  #page .hero-sub{font-size:17px;}
  #page .hero-grid{padding:56px 0 68px;gap:44px;}
  #page .section{padding:66px 0;}
  #page .section-sm{padding:44px 0;}
  #page .sec-head{margin-bottom:20px;}
  #page .offer-body{padding:22px 22px 20px;}
  #page .info-card,#page .plat-card,#page .format-card,#page .value-card{padding:22px;}
  #page .stat-card{padding:22px 18px;}
}
/* La barre de contact et le pied de page encadrent #page mais n'en font
   pas partie : ils gardent leur largeur habituelle, pour ne pas donner
   une impression de bandeaux plus larges que le contenu. */
@media (min-width:1025px){
  .contact-bar .wrap,.site-footer .wrap,.site-header .wrap{max-width:1220px;}
}

/* Page Nos offres dans l'espace connecté : l'élève a déjà son niveau,
   l'en-tête et le sélecteur peuvent être bien plus compacts. */
.app-content .offers-page.section-sm{padding-top:0;padding-bottom:24px;}
.app-content .pricer{padding:14px 18px;margin-bottom:16px;}
.app-content .pricer-row{gap:14px;}
.app-content .offer-grid{--offre-gap:16px;}
.app-content .offer-body{padding:20px 20px 18px;}
.app-content .offer .accroche{min-height:0;margin-bottom:2px;}
.app-content .offer ul{margin:12px 0 14px;}

/* Thème Nuit : surfaces restantes à adapter (barre supérieure, listes) */
[data-theme="nuit"] .topbar{background:var(--paper);border-color:var(--line);}
[data-theme="nuit"] .topbar h1{color:var(--ink);}
[data-theme="nuit"] .list-row,
[data-theme="nuit"] .sum-row,
[data-theme="nuit"] .chap{border-color:var(--line);}
[data-theme="nuit"] .chap:hover{background:#1B2436;}
[data-theme="nuit"] .lang-switch{background:#151C2A;border-color:var(--line-strong);}
[data-theme="nuit"] .icon-btn{background:#151C2A;border-color:var(--line-strong);color:var(--ink);}
[data-theme="nuit"] .skel{background:linear-gradient(90deg,#151C2A,#1E2739,#151C2A);}
[data-theme="nuit"] .tag.warn{background:#3A2E12;color:#F7D488;}
[data-theme="nuit"] .mobile-bar{background:var(--paper);border-color:var(--line);}

/* Grilles de panneaux côte à côte : hauteurs alignées partout */
.grid-2 > .panel,
.two-col > .panel{height:100%;}

/* Thème Nuit : éléments interactifs restés illisibles (noir sur noir) */
[data-theme="nuit"] select,
[data-theme="nuit"] select option,
[data-theme="nuit"] .select{background:#1B2436;color:var(--ink);}
[data-theme="nuit"] .btn-primary{background:linear-gradient(135deg,#2563EB,#1D4ED8);color:#fff;}
[data-theme="nuit"] .btn-gold{background:linear-gradient(135deg,#4F86F7,#2563EB);color:#fff;}
[data-theme="nuit"] .segment{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .segment button{color:var(--ink-soft);}
[data-theme="nuit"] .segment button.is-active{background:#2563EB;color:#fff;}
[data-theme="nuit"] .pill-check{background:#1B2436;border-color:var(--line-strong);color:var(--ink);}
[data-theme="nuit"] .pill-check:has(input:checked){background:#1E3A5F;border-color:#3B82F6;color:#fff;}
[data-theme="nuit"] .chip,
[data-theme="nuit"] .chip.plain{background:#1B2436;color:var(--ink-soft);border-color:var(--line-strong);}
[data-theme="nuit"] .tag.ok{background:#123524;color:#6EE7A8;}
[data-theme="nuit"] .link-btn{color:#7CB2FF;}
[data-theme="nuit"] .back-link{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .fav-btn{color:var(--ink-faint);}
[data-theme="nuit"] .assist-sugg button{background:#1B2436;color:var(--ink);border-color:var(--line-strong);}

/* Carte indicateur cliquable (cagnotte -> page Cagnotte et parrainage) */
.kpi-link{cursor:pointer;position:relative;}
.kpi-go{
  display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  font-size:12px;font-weight:700;color:var(--bl-700);opacity:0;transform:translateY(3px);
  transition:.2s;
}
.kpi-go svg{width:12px;height:12px;}
.kpi-link:hover .kpi-go,.kpi-link:focus-visible .kpi-go{opacity:1;transform:none;}
.kpi-link:focus-visible{outline:2px solid var(--bl-500);outline-offset:2px;}


/* ---- Corrections du thème Nuit ---- */

/* (1.1) Bandeau d'accueil : sombre comme le reste, plus le dégradé bleu vif */
[data-theme="nuit"] .page-hero.is-home{
  background:linear-gradient(130deg,#151C2A,#1B2436 60%,#232D3F);
  border:1px solid var(--line);
}
[data-theme="nuit"] .page-hero.is-home::after{
  background:radial-gradient(340px 200px at 92% 130%,rgba(59,130,246,.16),transparent 62%);
}

/* (1.4) Boutons dorés : ombre bleue au lieu de l'ombre jaune */
[data-theme="nuit"] .btn-gold{box-shadow:0 6px 18px rgba(37,99,235,.34);}
[data-theme="nuit"] .btn-gold:hover{box-shadow:0 10px 24px rgba(37,99,235,.44);}
[data-theme="nuit"] .btn-primary{box-shadow:0 6px 18px rgba(37,99,235,.3);}

/* (1.5) Modale de rechargement : moyens de paiement lisibles une fois choisis */
[data-theme="nuit"] .topup-moyen{background:#1B2436;border-color:var(--line-strong);color:var(--ink-soft);}
[data-theme="nuit"] .topup-moyen:hover{border-color:#3B82F6;color:var(--ink);}
[data-theme="nuit"] .topup-moyen.is-on{
  background:#1E3A5F;border-color:#3B82F6;color:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.22);
}
[data-theme="nuit"] .topup-moyen-ico{background:#243044;color:inherit;}
[data-theme="nuit"] .topup-moyen.is-on .topup-moyen-ico{background:#3B82F6;color:#fff;}
[data-theme="nuit"] .topup-amount{background:#1B2436;border-color:var(--line-strong);color:var(--ink-soft);}
[data-theme="nuit"] .topup-amount:hover{border-color:#3B82F6;color:var(--ink);}
[data-theme="nuit"] .topup-amount.is-on{background:#1E3A5F;border-color:#3B82F6;color:#fff;}
[data-theme="nuit"] .topup-info{background:#151C2A;color:var(--ink-soft);}
[data-theme="nuit"] .topup-qr img{background:#E8EDF5;}
[data-theme="nuit"] .modal-head{border-color:var(--line);}
[data-theme="nuit"] .transfer-confirm-ico{background:#243044;color:#93C5FD;}

/* (1.3) Flèche alignée sur la ligne de texte des liens */
.link-btn{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;}
.link-btn svg{width:13px;height:13px;flex-shrink:0;}
[dir="rtl"] .link-btn svg{transform:rotate(180deg);}

/* Thème Nuit : derniers accents jaunes à neutraliser */
[data-theme="nuit"] .page-hero-action-ico{background:#3B82F6;color:#fff;}
[data-theme="nuit"] .kpi .ico.gold{background:#243044;color:#93C5FD;}
[data-theme="nuit"] .tag.warn,
[data-theme="nuit"] .chip.gold{background:#243044;color:#93C5FD;border-color:var(--line-strong);}
[data-theme="nuit"] .fav-btn.on{color:#7CB2FF;}
[data-theme="nuit"] .sb-link.is-active::before{background:#3B82F6;}
[data-theme="nuit"] .sb-user .avatar{background:#3B82F6;color:#fff;}
[data-theme="nuit"] .price-save{background:#123524;color:#6EE7A8;}

/* ---- Chronomètre de session (bandeau du tableau de bord) ---- */
.hero-chrono{
  position:relative;display:flex;align-items:center;gap:7px;flex-shrink:0;
  padding:6px 10px 6px 14px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
}
[dir="rtl"] .hero-chrono{padding:6px 14px 6px 10px;}
.chrono-val{
  font-family:var(--f-num);font-size:15px;font-weight:800;color:#fff;
  min-width:58px;text-align:center;letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.chrono-btn{
  width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  background:rgba(255,255,255,.22);color:#fff;display:grid;place-items:center;transition:.16s;
}
.chrono-btn:hover{background:rgba(255,255,255,.38);}
.chrono-btn svg{width:13px;height:13px;}
.hero-chrono.is-on{background:rgba(255,192,31,.26);border-color:rgba(255,192,31,.5);}
[data-theme="nuit"] .hero-chrono.is-on{background:rgba(59,130,246,.26);border-color:rgba(59,130,246,.5);}

/* ---- Étiquettes du tableau de bord ---- */
/* Espace suffisant sous le bandeau, et pas de chevauchement au clic :
   le soulèvement au survol se fait dans la place déjà réservée. */
.app-hero-wrap + .app-content{padding-top:18px;}
.kpi-grid{margin-bottom:18px;}
.kpi-link{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;text-align:start;font-family:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--line);
}
.kpi-link .kpi-lbl{font-size:12.5px;color:var(--ink-soft);}
.kpi-link:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--bl-300,var(--bl-200));z-index:1;}
.kpi-link:focus-visible{outline:2px solid var(--bl-500);outline-offset:2px;}
[data-theme="nuit"] .kpi-link{background:#151C2A;border-color:var(--line);}

/* ---- Tableau de bord plus compact, pour tenir sans défilement ---- */
@media (min-width:1025px){
  .app-content .panel{padding:18px 20px;margin-bottom:14px;}
  .kpi{padding:14px 16px;}
  .kpi b{font-size:26px;}
  .kpi .ico{width:34px;height:34px;border-radius:11px;margin-bottom:6px;}
  .access-box{gap:10px;}
  .app-hero-wrap{padding:16px 30px 16px;}
  .page-hero{padding:14px 20px;}
}

/* Thème Nuit : icônes des indicateurs et bouton de l'assistant.
   Seule la variante .gold était traitée ; les icônes standard (matières,
   chapitres) restaient en bleu très clair sur fond sombre. */
[data-theme="nuit"] .kpi .ico{background:#243044;color:#93C5FD;border-color:var(--line-strong);}
[data-theme="nuit"] .kpi-link:hover .ico{background:#2D3B52;color:#BFDBFE;}
[data-theme="nuit"] .assist-link{
  background:#1E3A5F;border-color:#3B82F6;color:#DBEAFE;
}
[data-theme="nuit"] .assist-link:hover{background:#2A4E7C;color:#fff;}

/* ============================================================
   THÈME NUIT — corrections de contraste
   Les surfaces claires (--bl-050, --bl-100) deviennent très sombres
   en thème Nuit : tout élément qui s'en servait comme fond devient
   invisible. On leur donne ici un fond distinct du panneau.
   ============================================================ */

/* Cartes d'offres : icône et pastilles de la liste d'avantages */
[data-theme="nuit"] .offer-ico{background:#243044;color:#93C5FD;border-color:var(--line-strong);}
[data-theme="nuit"] .offer.tier-live .offer-ico{background:#2A2440;color:#C4A6F5;border-color:#3B3358;}
[data-theme="nuit"] .offer.tier-complete .offer-ico{background:#33291A;color:#F0C674;border-color:#4A3C24;}
[data-theme="nuit"] .offer li{color:var(--ink-soft);}
[data-theme="nuit"] .offer li::before{background:#2D3B52;}
[data-theme="nuit"] .offer.tier-live li::before{background:#38305A;}
[data-theme="nuit"] .offer.tier-complete li::before{background:#453720;}
[data-theme="nuit"] .offer li::after{border-color:#93C5FD;}
[data-theme="nuit"] .offer{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .offer.featured{border-color:#B37D00;}
[data-theme="nuit"] .price{color:var(--ink);}
[data-theme="nuit"] .price-old{color:var(--ink-faint);}
[data-theme="nuit"] .price-cap{background:#33291A;color:#F0C674;}

/* Questions fréquentes : le texte de la question restait très sombre */
[data-theme="nuit"] .faq-q{color:var(--ink);}
[data-theme="nuit"] .faq-item{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .faq-item:hover{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .faq-item.open{background:#1B2436;border-color:#3B82F6;}
[data-theme="nuit"] .faq-item.open .faq-q{color:#BFDBFE;}
[data-theme="nuit"] .faq-q .caret{background:#243044;color:var(--ink-soft);}
[data-theme="nuit"] .faq-item.open .faq-q .caret{background:#3B82F6;color:#fff;}
[data-theme="nuit"] .faq-a{color:var(--ink-soft);}

/* Cartes de contact et formats de contenu */
[data-theme="nuit"] .contact-card{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .contact-card:hover{background:#243044;border-color:#3B82F6;}
[data-theme="nuit"] .contact-card-ico{background:linear-gradient(135deg,#2563EB,#1D4ED8);color:#fff;}
[data-theme="nuit"] .contact-card-ico.gold{background:linear-gradient(135deg,#3B82F6,#2563EB);color:#fff;}
[data-theme="nuit"] .contact-card-ico.green{background:linear-gradient(135deg,#25A96B,#0F7A6E);color:#fff;}
[data-theme="nuit"] .contact-card-value{color:var(--ink);}
[data-theme="nuit"] .format-ico{background:#243044;color:#93C5FD;border-color:var(--line-strong);}
[data-theme="nuit"] .format-card.fc-1 .format-ico,
[data-theme="nuit"] .format-card.fc-2 .format-ico,
[data-theme="nuit"] .format-card.fc-3 .format-ico{background:#243044;color:#93C5FD;border-color:var(--line-strong);}
[data-theme="nuit"] .content-official{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .content-official b{color:#BFDBFE;}

/* Autres pastilles claires réutilisées ailleurs */
[data-theme="nuit"] .chap-n{background:#243044;color:#93C5FD;}
[data-theme="nuit"] .chap:hover .chap-n{background:#3B82F6;color:#fff;}
[data-theme="nuit"] .feature-ico,
[data-theme="nuit"] .plat-card-ico,
[data-theme="nuit"] .value-num,
[data-theme="nuit"] .stat-ico{background:#243044;color:#93C5FD;border-color:var(--line-strong);}
[data-theme="nuit"] .info-card,
[data-theme="nuit"] .plat-card,
[data-theme="nuit"] .format-card,
[data-theme="nuit"] .value-card,
[data-theme="nuit"] .stat-card{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .demo-video{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .demo-video:hover{background:#243044;border-color:#3B82F6;}
[data-theme="nuit"] .search-wrap{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .search-wrap input{background:transparent;color:var(--ink);}
[data-theme="nuit"] .subj-tile{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .access-box .btn-locked{background:#1B2436;color:var(--ink-faint);}

/* ============================================================
   THÈME NUIT — pages restées blanches (fond #fff figé en dur)
   Paiement sécurisé, notifications et facture n'avaient aucune
   règle de thème : elles gardaient un fond blanc et des couleurs
   de texte qui devenaient sombre-sur-sombre une fois les variables
   --bl-* redéfinies.
   ============================================================ */

/* Paiement sécurisé */
[data-theme="nuit"] .pay-secure{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .pay-secure-lock{background:#123524;color:#6EE7A8;border-color:#1E5B3F;}
[data-theme="nuit"] .pay-secure-amount{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .pay-secure-amount b{color:#BFDBFE;}
[data-theme="nuit"] .pay-secure-amount span{color:var(--ink-soft);}
[data-theme="nuit"] .pay-secure h2,
[data-theme="nuit"] .pay-secure-head p{color:var(--ink);}
[data-theme="nuit"] .pay-secure-head .muted{color:var(--ink-soft);}
[data-theme="nuit"] .pay-secure .empty{background:#1B2436;border-color:var(--line-strong);color:var(--ink-soft);}

/* Notifications */
[data-theme="nuit"] .notif-panel{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .notif-item{border-color:var(--line);}
[data-theme="nuit"] .notif-item b{color:var(--ink);}
[data-theme="nuit"] .notif-item.unread{background:#1B2436;}
[data-theme="nuit"] .icon-btn .notif-dot{border-color:#151C2A;}

/* Facture */
[data-theme="nuit"] .invoice{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .invoice-head{border-color:#3B82F6;}
[data-theme="nuit"] .invoice-total{border-color:var(--ink);}
[data-theme="nuit"] .invoice-legal,
[data-theme="nuit"] .invoice-label{color:var(--ink-soft);}
[data-theme="nuit"] .invoice-table th{color:var(--ink-soft);border-color:var(--line-strong);}
[data-theme="nuit"] .invoice-table td{border-color:var(--line);}
[data-theme="nuit"] .invoice-foot{color:var(--ink-faint);}

/* Facture imprimée : toujours sur fond blanc, donc logo à encre noire
   et texte sombre, même si l'élève consulte le site en thème Nuit. */
@media print{
  [data-theme="nuit"] .invoice{background:#fff !important;color:#131A2B !important;}
  [data-theme="nuit"] .invoice *{color:#131A2B !important;}
  [data-theme="nuit"] .invoice .brand-mark{filter:invert(1) brightness(.2);}
}

/* Page Offres dans l'espace connecté : elle doit tenir sans défilement
   quels que soient les filtres (2 matières + annuel = configuration la
   plus haute, à cause du prix barré et de la mention des mois couverts). */
@media (min-width:1025px){
  .app-content .offers-page .offer-body{padding:16px 18px 16px;}
  .app-content .offers-page .offer-ico{width:34px;height:34px;border-radius:10px;margin-bottom:10px;}
  .app-content .offers-page .offer h3{font-size:17px;}
  .app-content .offers-page .offer .accroche{font-size:12.8px;margin-top:5px;}
  .app-content .offers-page .price{margin-top:10px;}
  .app-content .offers-page .price b{font-size:30px;}
  .app-content .offers-page .offer ul{margin:10px 0 12px;}
  .app-content .offers-page .offer li{padding-block:3px;font-size:13px;}
  .app-content .offers-page .offer li::before{top:9px;width:14px;height:14px;}
  .app-content .offers-page .offer li::after{top:13px;}
  .app-content .offers-page .hint{margin-top:5px;font-size:11.5px;}
  .app-content .offers-page .price-old{font-size:12.5px;}
  .app-content .offers-page .btn-block{padding-block:10px;}
}

/* Mouvement en attente de vérification : montant en gris, pas en vert,
   car il n'est pas encore crédité. */
.list-row.is-pending{opacity:.85;}
.amt.wait{color:var(--ink-faint);}

/* Code de parrainage : le fond doit suivre le thème, pas rester gris */
.ref-code,.ref-code-box{background:var(--paper-soft);border-color:var(--line);color:var(--ink);}
[data-theme="nuit"] .ref-code,
[data-theme="nuit"] .ref-code-box{background:#1B2436;border-color:var(--line-strong);color:var(--ink);}
[data-theme="nuit"] .wallet-part{color:var(--ink-soft);}
[data-theme="nuit"] .wallet-amount{color:var(--ink);}
.wallet-part .wp-gift{background:var(--or-500);}

/* Message de confirmation (virement déclaré) : lisible dans tous les thèmes */
[data-theme="nuit"] .empty{background:#1B2436;border-color:var(--line-strong);color:var(--ink-soft);}
[data-theme="nuit"] .banner.ok,
[data-theme="nuit"] .modal-box .empty[style*="ok"]{background:#123524 !important;color:#6EE7A8 !important;border-color:#1E5B3F !important;}

/* ---- Candidatures : liste repliable avec filtres ---- */
.cand-filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.cand-filtre{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
  padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;transition:.16s;
  background:#fff;border:1.5px solid var(--line);color:var(--ink-soft);
}
.cand-filtre:hover{border-color:var(--bl-400);color:var(--ink);}
.cand-filtre.is-on{background:var(--bl-600);border-color:var(--bl-600);color:#fff;}
.cand-filtre-n{
  min-width:20px;padding:1px 6px;border-radius:999px;font-size:11.5px;
  background:var(--bl-050);color:var(--bl-800);
}
.cand-filtre.is-on .cand-filtre-n{background:rgba(255,255,255,.26);color:#fff;}

.cand-row{border-bottom:1px solid var(--line);}
.cand-row:last-child{border-bottom:none;}
.cand-head{
  display:flex;align-items:center;gap:14px;width:100%;cursor:pointer;text-align:start;
  padding:14px 20px;background:none;border:none;font-family:inherit;transition:.16s;
}
.cand-head:hover{background:var(--bl-050);}
.cand-row.is-open .cand-head{background:var(--bl-050);}
.cand-nom{font-weight:700;font-size:14.5px;color:var(--ink);flex-shrink:0;}
.cand-meta{flex:1;min-width:0;font-size:13px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cand-caret{color:var(--ink-faint);transition:transform .2s;flex-shrink:0;}
.cand-row.is-open .cand-caret{transform:rotate(180deg);}
.cand-detail{padding:4px 20px 20px;}

/* Texte long : passage à la ligne, jamais de débordement */
.cand-texte{margin-top:14px;}
.cand-texte p{
  margin-top:5px;font-size:13.5px;line-height:1.65;color:var(--ink-soft);
  white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;
}
.cand-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}

[data-theme="nuit"] .cand-filtre{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .cand-filtre-n{background:#243044;color:#93C5FD;}
[data-theme="nuit"] .cand-head:hover,
[data-theme="nuit"] .cand-row.is-open .cand-head{background:#1B2436;}

/* Bandeau d'aperçu (simulation de profil) : bleu, pour le distinguer du
   bandeau orange d'accès à un compte réel. */
.imperso-bar-sim{background:var(--bl-500);color:#fff;}
.imperso-bar-sim .imperso-quit{background:#0B2A5E;}

/* Comptes d'administration */
.admin-row{padding:16px 0;border-bottom:1px solid var(--line);}
.admin-row:last-child{border-bottom:none;}
.admin-row-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;}
[data-theme="nuit"] .admin-row{border-color:var(--line);}

/* Onglets des paramètres du site */
.set-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.set-tab{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
  padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:700;transition:.18s;
  background:#fff;color:var(--ink-soft);border:1.5px solid var(--line);
}
.set-tab svg{width:15px;height:15px;flex-shrink:0;}
.set-tab:hover{border-color:var(--bl-400);color:var(--ink);}
.set-tab.is-on{background:var(--bl-600);color:#fff;border-color:var(--bl-600);}
[data-theme="nuit"] .set-tab{background:#1B2436;border-color:var(--line-strong);color:var(--ink-soft);}
[data-theme="nuit"] .set-tab:hover{border-color:#3B82F6;color:var(--ink);}
[data-theme="nuit"] .set-tab.is-on{background:#2563EB;color:#fff;border-color:#2563EB;}
@media (max-width:680px){.set-tab span{display:none;}.set-tab{padding:9px 13px;}}

/* Mention de la période couverte par un renouvellement */
.renew-note{
  display:flex;align-items:flex-start;gap:11px;margin-top:18px;padding:13px 16px;
  border-radius:var(--r);background:var(--bl-050);border:1px solid var(--bl-100);
  font-size:13.5px;color:var(--ink-soft);line-height:1.6;
}
.renew-note svg{flex-shrink:0;margin-top:2px;color:var(--bl-600);}
[data-theme="nuit"] .renew-note{background:#1B2436;border-color:var(--line-strong);}

/* Couleurs d'offre, choisies dans l'administration */
.offer.tier-bleu .offer-top{background:linear-gradient(90deg,var(--bl-500),var(--bl-700));}
.offer.tier-violet .offer-top{background:linear-gradient(90deg,var(--v-500),var(--v-700));}
.offer.tier-or .offer-top{background:linear-gradient(90deg,var(--or-400),var(--or-600));}
.offer.tier-vert .offer-top{background:linear-gradient(90deg,#12A06B,#0A5C3F);}
.offer.tier-rose .offer-top{background:linear-gradient(90deg,#E0709F,#AD3D71);}
.offer.tier-vert .offer-ico{background:#E7F8F0;color:#0A5C3F;border-color:#B4EDD4;}
.offer.tier-rose .offer-ico{background:#FDEBF2;color:#AD3D71;border-color:#F7C4D9;}
.offer.tier-vert li::before{background:#D6F6E7;}
.offer.tier-rose li::before{background:#FBDCE8;}
[data-theme="nuit"] .offer.tier-vert .offer-ico{background:#123524;color:#6EE7A8;border-color:#1E5B3F;}
[data-theme="nuit"] .offer.tier-rose .offer-ico{background:#3A1F2C;color:#F0A0C2;border-color:#5A3244;}
[data-theme="nuit"] .offer.tier-vert li::before{background:#1B3B2C;}
[data-theme="nuit"] .offer.tier-rose li::before{background:#3A2530;}

/* ============================================================
   ÉTATS VIDES — pages sans contenu encore
   ============================================================ */
.vide{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:44px 24px;border-radius:var(--r-lg);
  background:var(--paper-soft);border:1.5px dashed var(--line-strong);
}
.vide-ico{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--bl-050);color:var(--bl-600);border:1px solid var(--bl-200);
}
.vide-ico svg{width:24px;height:24px;}
.vide-titre{font-size:16px;font-weight:700;color:var(--ink);}
.vide-texte{font-size:13.8px;color:var(--ink-soft);margin-top:7px;max-width:420px;line-height:1.6;}
.vide .btn{margin-top:18px;}
[data-theme="nuit"] .vide{background:#151C2A;border-color:var(--line-strong);}
[data-theme="nuit"] .vide-ico{background:#243044;color:#93C5FD;border-color:var(--line-strong);}

/* État du solde sur la page de finalisation d'abonnement */
.pay-solde{margin-top:16px;}
.pay-solde-ok,.pay-solde-ko{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r);
  flex-wrap:wrap;
}
.pay-solde-ok{background:var(--ok-bg);border:1.5px solid var(--ok);}
.pay-solde-ko{background:var(--or-100);border:1.5px solid var(--or-200);}
.pay-solde-ico{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
}
.pay-solde-ok .pay-solde-ico{background:var(--ok);color:#fff;}
.pay-solde-ko .pay-solde-ico{background:var(--or-400);color:#3A2A00;}
.pay-solde-ok b,.pay-solde-ko b{display:block;font-size:14.5px;}
.pay-solde-ok p,.pay-solde-ko p{font-size:13px;color:var(--ink-soft);margin-top:3px;}
.pay-solde-ok > div,.pay-solde-ko > div{flex:1;min-width:180px;}

/* Thème Nuit : montants et modales de solde restés illisibles */
[data-theme="nuit"] .sum-total,
[data-theme="nuit"] .sum-total .big,
[data-theme="nuit"] .sum-row b{color:var(--ink);}
[data-theme="nuit"] .sum-total{border-color:var(--ink);}
[data-theme="nuit"] .sum-row{border-color:var(--line);}
[data-theme="nuit"] .sum-row span{color:var(--ink-soft);}
/* La coquille garde le fond de page ; seul le bloc de confirmation
   du solde est vert. */
[data-theme="nuit"] .pay-solde-ok{background:#123524;border-color:#1E5B3F;}
[data-theme="nuit"] .pay-solde-ok b{color:#6EE7A8;}
[data-theme="nuit"] .pay-solde-ko{background:#33291A;border-color:#4A3C24;}
[data-theme="nuit"] .pay-solde-ko b{color:#F0C674;}
[data-theme="nuit"] .pay-solde-ko .pay-solde-ico{background:#F0C674;color:#33291A;}
[data-theme="nuit"] .modal-box,
[data-theme="nuit"] .modal-head{background:#151C2A;color:var(--ink);}
[data-theme="nuit"] .modal-head h3,
[data-theme="nuit"] .modal-box h3,
[data-theme="nuit"] .modal-box b,
[data-theme="nuit"] .modal-box label{color:var(--ink);}
[data-theme="nuit"] .modal-box p,
[data-theme="nuit"] .modal-box .muted,
[data-theme="nuit"] .modal-box .hint{color:var(--ink-soft);}
[data-theme="nuit"] .wallet-amount{color:var(--ink);}

/* Mouvements masqués au-delà des 5 premiers */
.list-row.mv-cache{display:none;}

/* Code de parrainage : le dégradé vers le blanc et la couleur --bl-800
   rendaient le code presque invisible sur fond sombre. */
[data-theme="nuit"] .code-box{
  background:#1B2436;
  border-color:#3B82F6;
}
[data-theme="nuit"] .code-box .code{color:#BFDBFE;}
[data-theme="nuit"] .code-box .faint{color:var(--ink-soft);}
[data-theme="nuit"] .code-box .btn-ghost{background:#243044;color:var(--ink);border-color:var(--line-strong);}
[data-theme="nuit"] .code-box .btn-ghost:hover{background:#2D3B52;border-color:#3B82F6;}

/* Rechargement refusé : montant barré, il n'a jamais été crédité */
.amt.ko{color:var(--ink-faint);text-decoration:line-through;}

/* Élément masqué au-delà des 5 premiers (mouvements, messagerie) */
.chap.mv-cache{display:none;}

/* Thème Nuit : étiquettes de statut lisibles partout */
[data-theme="nuit"] .tag{border:1px solid transparent;}
[data-theme="nuit"] .tag.ok{background:#123524;color:#6EE7A8;border-color:#1E5B3F;}
[data-theme="nuit"] .tag.warn{background:#3A2E12;color:#F7D488;border-color:#5A4A20;}
[data-theme="nuit"] .tag.err{background:#3A1620;color:#F8A0B0;border-color:#5A2634;}
[data-theme="nuit"] .tag.info{background:#1B2A44;color:#93C5FD;border-color:#2E4570;}

/* Thème Nuit : modales de solde entièrement sombres */
[data-theme="nuit"] .modal-backdrop{background:rgba(5,8,14,.72);}
[data-theme="nuit"] .topup-rib{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .topup-rib-num{color:#BFDBFE;}
[data-theme="nuit"] .field-row label,
[data-theme="nuit"] .modal-box .field label{color:var(--ink-soft);}
[data-theme="nuit"] .transfer-confirm-q{color:var(--ink);}

/* Moyens de paiement : administration et affichage élève */
.moyen-bloc{padding:16px 0;border-bottom:1px solid var(--line);}
.moyen-bloc:last-of-type{border-bottom:none;}
.moyen-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;flex-wrap:wrap;}
.moyen-head b{font-size:15px;}
[data-theme="nuit"] .moyen-bloc{border-color:var(--line);}

.moyen-piece,.moyen-aide{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;margin-inline-end:8px;
  padding:7px 13px;border-radius:999px;font-size:12.8px;font-weight:700;cursor:pointer;
  background:var(--bl-050);color:var(--bl-800);border:1px solid var(--bl-200);font-family:inherit;
}
.moyen-piece:hover,.moyen-aide:hover{background:var(--bl-100);text-decoration:none;}
.moyen-piece svg,.moyen-aide svg{width:14px;height:14px;flex-shrink:0;}
[data-theme="nuit"] .moyen-piece,
[data-theme="nuit"] .moyen-aide{background:#243044;color:#BFDBFE;border-color:var(--line-strong);}

/* Onglets de statut des paiements à vérifier */
.vir-onglets{display:flex;gap:8px;flex-wrap:wrap;}
.vir-onglet{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
  padding:8px 15px;border-radius:999px;font-size:13.5px;font-weight:700;transition:.18s;
  background:#fff;color:var(--ink-soft);border:1.5px solid var(--line);
}
.vir-onglet:hover{border-color:var(--bl-400);color:var(--ink);}
.vir-onglet.is-on{background:var(--bl-600);color:#fff;border-color:var(--bl-600);}
.vir-count{
  display:inline-grid;place-items:center;min-width:22px;height:20px;padding-inline:6px;
  border-radius:999px;font-size:11.5px;background:var(--bl-050);color:var(--bl-800);
}
.vir-onglet.is-on .vir-count{background:rgba(255,255,255,.26);color:#fff;}
[data-theme="nuit"] .vir-onglet{background:#1B2436;border-color:var(--line-strong);color:var(--ink-soft);}
[data-theme="nuit"] .vir-onglet.is-on{background:#2563EB;color:#fff;border-color:#2563EB;}
[data-theme="nuit"] .vir-count{background:#243044;color:#BFDBFE;}

/* (2) Objet long : il débordait du panneau au lieu de passer à la ligne */
.chap-title{overflow-wrap:anywhere;word-break:break-word;min-width:0;}
.chap{align-items:flex-start;}
.chap-n{margin-top:2px;}
.panel-head h2{overflow-wrap:anywhere;min-width:0;}
.list-row span{min-width:0;overflow-wrap:anywhere;}

/* ============================================================
   TABLEAU DE BORD ADMINISTRATEUR
   Deux blocs distincts : l'argent d'un côté, l'activité de l'autre.
   ============================================================ */
.ov-section{margin-bottom:26px;}
.ov-titre{
  display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:14px;
}
.ov-titre svg{width:16px;height:16px;color:var(--bl-600);}
[dir="rtl"] .ov-titre{letter-spacing:0;text-transform:none;}

.ov-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;}
.ov-card{
  display:flex;flex-direction:column;gap:5px;padding:18px 20px;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r);
}
.ov-label{font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.ov-val{font-family:var(--f-num);font-size:27px;font-weight:800;color:var(--ink);line-height:1.15;}
.ov-val small{font-size:13px;font-weight:700;color:var(--ink-soft);}
.ov-note{font-size:11.8px;color:var(--ink-faint);line-height:1.5;}

/* L'encaissé est le chiffre qui compte : on le met en avant. */
.ov-card-fort{
  background:linear-gradient(135deg,var(--bl-050),#fff);border-color:var(--bl-300,var(--bl-200));
}
.ov-card-fort .ov-val{color:var(--bl-800);font-size:31px;}
.ov-card-attente{background:var(--or-100);border-color:var(--or-200);}
.ov-card-attente .ov-val{color:var(--or-700);}

/* Un indicateur qui demande une action se signale */
.kpi-alerte{border-color:var(--or-400);}
.kpi-alerte .ico{background:var(--or-100);color:var(--or-700);border-color:var(--or-200);}

[data-theme="nuit"] .ov-card{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .ov-card-fort{background:#1B2436;border-color:#3B82F6;}
[data-theme="nuit"] .ov-card-fort .ov-val{color:#BFDBFE;}
[data-theme="nuit"] .ov-card-attente{background:#33291A;border-color:#4A3C24;}
[data-theme="nuit"] .ov-card-attente .ov-val{color:#F0C674;}
[data-theme="nuit"] .kpi-alerte{border-color:#8A5B00;}
[data-theme="nuit"] .kpi-alerte .ico{background:#33291A;color:#F0C674;border-color:#4A3C24;}

/* Paiements à vérifier : filtres compacts et fiches pliables */
.vir-filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;}
.vir-filtres input[type="date"],.vir-filtres .select{
  padding:8px 12px;border-radius:10px;border:1.5px solid var(--line-strong);
  font-size:13px;font-family:inherit;background:#fff;color:var(--ink);
}
.vf-search{flex:1;min-width:190px;padding-block:2px;}
[data-theme="nuit"] .vir-filtres input[type="date"],
[data-theme="nuit"] .vir-filtres .select{background:#1B2436;color:var(--ink);border-color:var(--line-strong);}

.vir-head{cursor:pointer;user-select:none;}
.vir-head h2{display:flex;flex-direction:column;gap:2px;font-size:15.5px;}
.vir-resume{font-size:12.5px;font-weight:600;color:var(--ink-soft);font-family:var(--f-num);}
.vir-caret{
  margin-inline-start:10px;flex-shrink:0;color:var(--ink-faint);
  transition:transform .2s;display:inline-flex;
}
.vir-fiche.is-open .vir-caret{transform:rotate(180deg);}
.vir-corps{display:none;}
.vir-fiche.is-open .vir-corps{display:block;}
.vir-fiche{padding-bottom:0;}
.vir-fiche.is-open{padding-bottom:20px;}

/* Listes de diffusion */
.diff-choix{display:flex;gap:8px;flex-wrap:wrap;}
.diff-seg{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
  padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:700;transition:.18s;
  background:#fff;color:var(--ink-soft);border:1.5px solid var(--line);
}
.diff-seg:hover{border-color:var(--bl-400);color:var(--ink);}
.diff-seg.is-on{background:var(--bl-600);color:#fff;border-color:var(--bl-600);}
.diff-seg.is-on .vir-count{background:rgba(255,255,255,.26);color:#fff;}
[data-theme="nuit"] .diff-seg{background:#1B2436;border-color:var(--line-strong);color:var(--ink-soft);}
[data-theme="nuit"] .diff-seg.is-on{background:#2563EB;color:#fff;border-color:#2563EB;}

/* Listes de diffusion */
.liste-entete{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-radius:var(--r);background:var(--bl-050);border:1px solid var(--bl-100);
}
[data-theme="nuit"] .liste-entete{background:#1B2436;border-color:var(--line-strong);}

/* Paiements groupés par moyen de versement */
.vir-groupe{margin-bottom:24px;}
.vir-groupe .ov-titre{margin-bottom:10px;}
.vir-groupe .vir-count{margin-inline-start:4px;}

/* Alerte de référence déjà soumise */
.vir-doublon{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;padding:12px 14px;
  border-radius:var(--r);font-size:13px;line-height:1.55;
  background:var(--or-100);color:var(--or-800,var(--or-700));border:1px solid var(--or-200);
}
.vir-doublon svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;}
.vir-doublon.is-grave{background:#FDECEC;color:#9B1C1C;border-color:#F5C2C2;font-weight:700;}
[data-theme="nuit"] .vir-doublon{background:#33291A;color:#F0C674;border-color:#4A3C24;}
[data-theme="nuit"] .vir-doublon.is-grave{background:#3A1620;color:#F8A0B0;border-color:#5A2634;}

/* Alignement des filtres : tous les champs à la même hauteur */
.vir-filtres > *{height:38px;box-sizing:border-box;}
.vir-filtres .search-wrap{display:flex;align-items:center;padding-block:0;}
.vir-filtres .search-wrap input{height:100%;border:none;background:transparent;}
.vir-filtres .btn{display:inline-flex;align-items:center;}

/* Diagnostic de l'assistant */
.md-ok{color:var(--ok);}
.md-ko{color:var(--err);}
/* Étape qui échoue sans empêcher la séance : ni verte ni rouge. */
.md-avert{color:var(--warn);}
.md-liste{display:flex;flex-wrap:wrap;gap:7px;}
.md-liste code{
  font-family:var(--f-num);font-size:12.5px;padding:5px 10px;border-radius:8px;
  background:var(--paper-soft);border:1px solid var(--line);color:var(--ink);
}
[data-theme="nuit"] .md-liste code{background:#1B2436;border-color:var(--line-strong);}

/* Choix d'une offre supérieure */
.co-offre{
  display:flex;flex-direction:column;gap:4px;width:100%;text-align:start;cursor:pointer;
  padding:15px 18px;margin-bottom:10px;border-radius:var(--r);font-family:inherit;
  background:#fff;border:1.5px solid var(--line);transition:.18s;
}
.co-offre:hover{border-color:var(--bl-500);background:var(--bl-050);transform:translateY(-2px);}
.co-nom{font-size:15px;font-weight:800;color:var(--ink);}
.co-prix{font-family:var(--f-num);font-size:19px;color:var(--bl-800);}
.co-prix s{font-size:14px;color:var(--ink-faint);font-weight:600;}
.co-note{font-size:12px;color:var(--ok);}
[data-theme="nuit"] .co-offre{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .co-offre:hover{background:#243044;border-color:#3B82F6;}
[data-theme="nuit"] .co-prix{color:#BFDBFE;}

/* Le champ de recherche hérite d'une marge basse prévue pour les
   formulaires : dans la barre de filtres, elle décale le champ vers le
   haut par rapport aux autres. */
.vir-filtres > *{margin:0 !important;align-self:center;}

/* (4)(7) Lien de retour : la flèche pointe vers la gauche */
.back-arrow svg{transform:rotate(180deg);}
[dir="rtl"] .back-arrow svg{transform:none;}

/* (7) Boutons d'action d'une conversation : même largeur */
.msg-actions{display:flex;gap:10px;flex-wrap:wrap;}
.msg-actions .btn{flex:1;min-width:150px;justify-content:center;}

/* (9) Modales de solde et assistant : fond conforme au thème sombre */
[data-theme="nuit"] .modal-box,
[data-theme="nuit"] .modal-body,
[data-theme="nuit"] .assist-panel,
[data-theme="nuit"] .assist-body{background:#151C2A;color:var(--ink);}
[data-theme="nuit"] .modal-box input,
[data-theme="nuit"] .modal-box textarea,
[data-theme="nuit"] .modal-box .select,
[data-theme="nuit"] .assist-form input{background:#0F1520;color:var(--ink);border-color:var(--line-strong);}
[data-theme="nuit"] .assist-msg.bot{background:#1B2436;border-color:var(--line-strong);color:var(--ink);}
[data-theme="nuit"] .assist-sugg button{background:#1B2436;color:var(--ink);border-color:var(--line-strong);}

/* (10) Impression d'une facture : on n'imprime que la facture. */
@media print{
  .sidebar, .topbar, .imperso-bar, .assist-fab, .assist-panel,
  .toast, .modal-overlay, .invoice-actions, .app-hero-wrap,
  .back-link, .link-btn, .btn{display:none !important;}
  .app, .app-main, .app-content{display:block !important;margin:0 !important;padding:0 !important;}
  .invoice{box-shadow:none !important;border:none !important;margin:0 !important;}
  @page{margin:14mm;}
}

/* (18) Indicateur de chargement global : une barre fine en haut de page,
   discrète mais visible, plutôt qu'un sablier qui bloque la lecture. */
#chargement{
  position:fixed;top:0;inset-inline:0;height:3px;z-index:400;
  background:linear-gradient(90deg,var(--bl-400),var(--bl-600),var(--or-400));
  background-size:200% 100%;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .2s ease;pointer-events:none;
}
#chargement.actif{transform:scaleX(1);animation:chargementAnim 1.1s linear infinite;}
@keyframes chargementAnim{0%{background-position:0% 0;}100%{background-position:200% 0;}}

/* Pagination des historiques */
.pagination{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;
}
[data-theme="nuit"] .pagination{border-color:var(--line);}

/* Droits d'administration groupés par domaine */
.droits-groupe{margin-bottom:16px;}
.droits-titre{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;
}
[dir="rtl"] .droits-titre{letter-spacing:0;text-transform:none;}

/* Squelette de chargement : logo qui pulse au centre de la zone */
.chargement-page{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:70px 20px;
}
.chargement-logo{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--bl-500),var(--bl-700));color:#fff;
  animation:logoPulse 1.4s ease-in-out infinite;
}
.chargement-logo svg{width:26px;height:26px;}
.chargement-txt{font-size:13.5px;color:var(--ink-soft);}
@keyframes logoPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(20,131,250,.35);}
  50%{transform:scale(1.06);box-shadow:0 0 0 14px rgba(20,131,250,0);}
}
[data-theme="nuit"] .chargement-logo{background:linear-gradient(135deg,#2563EB,#1D4ED8);}

/* Consigne avant d'ouvrir une salle : l'élève doit savoir sur
   quoi cliquer avant d'arriver sur la salle. */
.access-etape{
  display:flex;align-items:center;gap:11px;margin-top:14px;padding:12px 16px;
  border-radius:var(--r);background:var(--bl-050);border:1px solid var(--bl-200);
  font-size:13.5px;color:var(--ink);line-height:1.5;
}
.access-etape-num{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--bl-600);color:#fff;font-size:12.5px;font-weight:800;
}
[data-theme="nuit"] .access-etape{background:#1B2436;border-color:var(--line-strong);color:var(--ink);}
[data-theme="nuit"] .access-etape-num{background:#2563EB;}

/* Choix d'offre : contenu visible et sélection */
.co-offre{
  display:flex;flex-direction:column;gap:6px;width:100%;text-align:start;cursor:pointer;
  padding:16px 18px;margin-bottom:10px;border-radius:var(--r);font-family:inherit;
  background:#fff;border:1.5px solid var(--line);transition:.18s;
}
.co-offre:hover:not(:disabled){border-color:var(--bl-500);background:var(--bl-050);}
.co-offre.is-on{border-color:var(--bl-600);background:var(--bl-050);box-shadow:0 0 0 3px rgba(20,131,250,.14);}
.co-offre:disabled{opacity:.55;cursor:not-allowed;}
.co-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.co-nom{font-size:15.5px;font-weight:800;color:var(--ink);}
.co-prix{font-family:var(--f-num);font-size:19px;color:var(--bl-800);white-space:nowrap;}
.co-prix s{font-size:14px;color:var(--ink-faint);font-weight:600;}
.co-accroche{font-size:13px;color:var(--ink-soft);line-height:1.5;}
.co-liste{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;}
.co-liste li{font-size:12.5px;color:var(--ink-soft);padding-inline-start:16px;position:relative;}
.co-liste li::before{
  content:'';position:absolute;inset-inline-start:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--bl-500);
}
.co-note{font-size:12px;color:var(--ok);margin-top:4px;}
.co-note.faint{color:var(--ink-faint);}
[data-theme="nuit"] .co-offre{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .co-offre:hover:not(:disabled),
[data-theme="nuit"] .co-offre.is-on{background:#243044;border-color:#3B82F6;}
[data-theme="nuit"] .co-prix{color:#BFDBFE;}

/* Pièces jointes dans une conversation */
.bubble-pieces{display:flex;flex-direction:column;gap:6px;margin-top:9px;}
.piece-jointe{
  display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:10px;
  font-size:12.5px;text-decoration:none;background:rgba(255,255,255,.18);color:inherit;
  border:1px solid rgba(255,255,255,.25);transition:.16s;
}
.bubble.theirs .piece-jointe{background:var(--bl-050);border-color:var(--bl-200);color:var(--bl-800);}
.piece-jointe:hover{background:rgba(255,255,255,.3);text-decoration:none;}
.bubble.theirs .piece-jointe:hover{background:var(--bl-100);}
.piece-jointe svg{width:14px;height:14px;flex-shrink:0;}
.piece-jointe span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px;}
.piece-jointe em{font-style:normal;opacity:.7;font-size:11.5px;flex-shrink:0;}
[data-theme="nuit"] .bubble.theirs .piece-jointe{background:#243044;border-color:var(--line-strong);color:#BFDBFE;}

/* ============================================================
   LECTEUR DE COURS : menu des chapitres à gauche, contenu à droite
   ============================================================ */
.lecteur{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start;}
@media (max-width:900px){.lecteur{grid-template-columns:1fr;}}

.lecteur-menu{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:18px;position:sticky;top:18px;max-height:calc(100vh - 120px);
  display:flex;flex-direction:column;
}
@media (max-width:900px){.lecteur-menu{position:static;max-height:none;}}
.lecteur-menu-tete{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:12px;}
.lecteur-menu-tete b{display:block;font-size:15px;margin-bottom:9px;}
.lecteur-menu-tete .faint{font-size:12px;}
.lecteur-barre{height:6px;border-radius:99px;background:var(--bl-100);overflow:hidden;margin-bottom:6px;}
.lecteur-barre span{display:block;height:100%;background:var(--bl-600);transition:width .3s;}
.lecteur-recherche{margin-bottom:10px;}
#lc-liste{overflow-y:auto;display:flex;flex-direction:column;gap:2px;}

.lc-chap{
  display:flex;align-items:flex-start;gap:10px;width:100%;text-align:start;cursor:pointer;
  padding:10px 11px;border-radius:10px;border:none;background:transparent;
  font-family:inherit;font-size:13.5px;color:var(--ink-soft);transition:.15s;
}
.lc-chap:hover{background:var(--paper-soft);color:var(--ink);}
.lc-chap.is-on{background:var(--bl-050);color:var(--bl-800);font-weight:700;}
.lc-num{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:11.5px;font-weight:800;font-family:var(--f-num);
  background:var(--paper-soft);color:var(--ink-faint);border:1px solid var(--line);
}
/* Anciennement vert : le numéro reste neutre, la coche à côté du titre
   suffit à signaler qu'un chapitre est terminé. */
.lc-num svg{width:12px;height:12px;}
.lc-titre{line-height:1.4;}

.lecteur-contenu{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:24px;
}
.lc-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.lc-tete h2{font-size:20px;flex:1;min-width:200px;}
.lc-video video{width:100%;border-radius:var(--r);background:#000;display:block;}
.lc-video-titre{font-size:13px;color:var(--ink-soft);margin-top:8px;}
.lc-video-vide{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:60px 20px;border-radius:var(--r);background:var(--paper-soft);
  border:1.5px dashed var(--line-strong);color:var(--ink-soft);font-size:13.5px;text-align:center;
}
.lc-video-vide svg{width:34px;height:34px;color:var(--ink-faint);}

.lc-docs{margin-top:26px;}
.lc-docs h3{font-size:15px;margin-bottom:12px;}
.lc-doc{
  display:flex;align-items:center;gap:13px;padding:13px 16px;margin-bottom:9px;
  border-radius:var(--r);background:var(--paper-soft);border:1px solid var(--line);
  text-decoration:none;color:var(--ink);font-size:13.5px;transition:.16s;
}
.lc-doc:hover{background:var(--bl-050);border-color:var(--bl-300,var(--bl-200));text-decoration:none;}
.lc-doc-ico{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  background:var(--bl-050);color:var(--bl-600);border:1px solid var(--bl-200);
}
.lc-doc > span:nth-child(2){flex:1;min-width:0;}
.lc-doc svg:last-child{width:15px;height:15px;color:var(--ink-faint);flex-shrink:0;}

[data-theme="nuit"] .lecteur-menu,
[data-theme="nuit"] .lecteur-contenu{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .lc-chap:hover{background:#1B2436;}
[data-theme="nuit"] .lc-chap.is-on{background:#243044;color:#BFDBFE;}
[data-theme="nuit"] .lc-num{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .lc-doc{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .lc-doc:hover{background:#243044;border-color:#3B82F6;}
[data-theme="nuit"] .lc-doc-ico{background:#243044;color:#93C5FD;border-color:var(--line-strong);}
[data-theme="nuit"] .lc-video-vide{background:#1B2436;border-color:var(--line-strong);}

/* Séances en direct */
.seance{
  display:flex;align-items:center;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.seance:last-child{border-bottom:none;}
.seance-date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:66px;flex-shrink:0;padding:8px;border-radius:12px;
  background:var(--bl-050);border:1px solid var(--bl-200);
}
.seance-jour{font-size:12px;font-weight:800;color:var(--bl-800);text-transform:uppercase;}
.seance-heure{font-family:var(--f-num);font-size:14px;color:var(--ink);}
.seance-info{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px;}
.seance-info b{font-size:14.5px;}
.seance-info .faint{font-size:12.5px;}
.seance-action{flex-shrink:0;}
.seance.en-cours .seance-date{background:var(--ok-bg);border-color:var(--ok);}
.seance.en-cours .seance-jour{color:var(--ok);}
.seance.annulee{opacity:.6;}
.seance.terminee .seance-date{background:var(--paper-soft);border-color:var(--line);}
.seance.terminee .seance-jour{color:var(--ink-faint);}
[data-theme="nuit"] .seance{border-color:var(--line);}
[data-theme="nuit"] .seance-date{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .seance-jour{color:#BFDBFE;}

/* Onglets d'un chapitre */
.lc-onglets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1.5px solid var(--line);}
.lc-onglet{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
  padding:10px 15px;border:none;background:transparent;border-bottom:2.5px solid transparent;
  font-size:14px;font-weight:700;color:var(--ink-soft);transition:.16s;margin-bottom:-1.5px;
}
.lc-onglet:hover{color:var(--ink);}
.lc-onglet.is-on{color:var(--bl-700);border-bottom-color:var(--bl-600);}
.lc-onglet-n{
  display:inline-grid;place-items:center;min-width:19px;height:18px;padding-inline:5px;
  border-radius:99px;font-size:11px;background:var(--paper-soft);color:var(--ink-faint);
}
.lc-onglet.is-on .lc-onglet-n{background:var(--bl-100);color:var(--bl-800);}

/* Sections d'un onglet */
.lc-section{margin-bottom:28px;}
.lc-section:last-child{margin-bottom:0;}
.lc-section-titre{
  display:flex;align-items:center;gap:10px;font-size:15.5px;margin-bottom:12px;color:var(--ink);
}
.lc-section-n{
  width:24px;height:24px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;
  font-size:12px;font-family:var(--f-num);font-weight:800;
  background:var(--bl-050);color:var(--bl-700);border:1px solid var(--bl-200);
}
.lc-section .lc-video{margin-bottom:12px;}
.lc-texte{
  padding:15px 18px;margin-bottom:10px;border-radius:var(--r);
  background:var(--paper-soft);border:1px solid var(--line);
  font-size:14px;line-height:1.7;color:var(--ink);
}
.lc-texte b{display:block;margin-bottom:6px;}
[data-theme="nuit"] .lc-onglet-n{background:#1B2436;}
[data-theme="nuit"] .lc-onglet.is-on{color:#BFDBFE;border-bottom-color:#3B82F6;}
[data-theme="nuit"] .lc-onglet.is-on .lc-onglet-n{background:#243044;color:#BFDBFE;}
[data-theme="nuit"] .lc-section-n{background:#1B2436;color:#93C5FD;border-color:var(--line-strong);}
[data-theme="nuit"] .lc-texte{background:#1B2436;border-color:var(--line-strong);}

/* Administration du contenu : sections et ajout de ressources */
.adm-section{
  padding:16px;margin-bottom:14px;border-radius:var(--r);
  background:var(--paper-soft);border:1px solid var(--line);
}
.adm-section-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.adm-ajout{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;}
.adm-ajout > *{margin:0;}
.adm-ajout input[type="text"],.adm-ajout input:not([type]),.adm-ajout .select{
  padding:8px 12px;border-radius:10px;border:1.5px solid var(--line-strong);
  font-size:13px;font-family:inherit;background:#fff;color:var(--ink);flex:1;min-width:150px;
}
.adm-ajout textarea{
  width:100%;padding:9px 12px;border-radius:10px;border:1.5px solid var(--line-strong);
  font-family:inherit;font-size:13px;background:#fff;color:var(--ink);resize:vertical;
}
[data-theme="nuit"] .adm-section{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .adm-ajout input,[data-theme="nuit"] .adm-ajout .select,
[data-theme="nuit"] .adm-ajout textarea{background:#0F1520;color:var(--ink);border-color:var(--line-strong);}

/* Aperçu des formules pendant la saisie */
.apercu-formule{
  min-height:0;margin-top:8px;padding:0;font-size:14px;line-height:1.7;color:var(--ink);
}
.apercu-formule:not(:empty){
  padding:12px 14px;border-radius:10px;
  background:var(--bl-050);border:1px dashed var(--bl-200);
}
[data-theme="nuit"] .apercu-formule:not(:empty){background:#1B2436;border-color:var(--line-strong);}
/* Les formules doivent rester lisibles en thème sombre */
[data-theme="nuit"] .katex{color:var(--ink);}
.lc-texte .katex-display{margin:0.8em 0;}

/* Sous-onglets énoncés / corrigés */
.lc-sous-onglets{display:flex;gap:8px;margin-bottom:18px;}
.lc-sous{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
  padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;transition:.16s;
  background:var(--paper-soft);color:var(--ink-soft);border:1.5px solid var(--line);
}
.lc-sous:hover{border-color:var(--bl-400);color:var(--ink);}
.lc-sous.is-on{background:var(--bl-600);color:#fff;border-color:var(--bl-600);}
.lc-sous.is-on .lc-onglet-n{background:rgba(255,255,255,.26);color:#fff;}

/* Document affiché dans la page, défilable */
.lc-doc-bloc{
  margin-bottom:14px;border-radius:var(--r);overflow:hidden;
  background:#fff;border:1.5px solid var(--line);
}
.lc-doc-tete{
  display:flex;align-items:center;gap:11px;padding:11px 14px;
  background:var(--paper-soft);border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.lc-doc-tete b{flex:1;min-width:120px;font-size:13.5px;}
.lc-doc-actions{display:flex;gap:8px;align-items:center;}
.lc-doc-cadre{height:520px;background:var(--paper-soft);}
.lc-doc-cadre iframe{width:100%;height:100%;border:none;display:block;}
.lc-doc-bloc.replie .lc-doc-cadre{display:none;}
@media (max-width:700px){.lc-doc-cadre{height:360px;}}
[data-theme="nuit"] .lc-doc-bloc{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .lc-doc-tete{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .lc-doc-cadre{background:#0F1520;}
[data-theme="nuit"] .lc-sous{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .lc-sous.is-on{background:#2563EB;color:#fff;border-color:#2563EB;}

/* ============================================================
   FIL DE DISCUSSION D'UNE SÉANCE
   ============================================================ */
.chat-fil{
  height:380px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  padding:14px;border-radius:var(--r);background:var(--paper-soft);
  border:1px solid var(--line);margin-bottom:12px;
}
.chat-msg{
  align-self:flex-start;max-width:82%;padding:9px 13px;border-radius:14px 14px 14px 4px;
  background:#fff;border:1px solid var(--line);font-size:13.5px;line-height:1.5;
}
.chat-msg.moi{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--bl-600);color:#fff;border-color:var(--bl-600);}
.chat-msg.prof{background:var(--or-100);border-color:var(--or-200);}
.chat-msg b{display:block;font-size:11.5px;opacity:.75;margin-bottom:2px;}
.chat-msg time{display:block;font-size:10.5px;opacity:.6;margin-top:3px;}
.chat-saisie{display:flex;gap:8px;}
.chat-saisie input{
  flex:1;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line-strong);
  font-family:inherit;font-size:14px;background:#fff;color:var(--ink);
}
[data-theme="nuit"] .chat-fil{background:#0F1520;border-color:var(--line-strong);}
[data-theme="nuit"] .chat-msg{background:#1B2436;border-color:var(--line-strong);color:var(--ink);}
[data-theme="nuit"] .chat-msg.prof{background:#33291A;border-color:#4A3C24;color:#F0C674;}
[data-theme="nuit"] .chat-saisie input{background:#1B2436;color:var(--ink);border-color:var(--line-strong);}

/* ============================================================
   AFFINAGE VISUEL GÉNÉRAL
   ============================================================ */
/* Cartes : ombre plus douce et légère élévation au survol, pour donner
   du relief sans alourdir. */
.panel{transition:box-shadow .22s, transform .22s;}
.panel:hover{box-shadow:0 4px 20px rgba(11,26,43,.07);}
.kpi{transition:transform .18s, box-shadow .18s, border-color .18s;}
.kpi-link:hover{transform:translateY(-3px);box-shadow:0 6px 22px rgba(20,131,250,.14);border-color:var(--bl-400);}

/* Boutons : réaction tactile au clic */
.btn{transition:transform .12s, box-shadow .18s, background .18s, border-color .18s;}
.btn:active:not(:disabled){transform:scale(.97);}
.btn-primary{box-shadow:0 2px 10px rgba(20,131,250,.22);}
.btn-primary:hover:not(:disabled){box-shadow:0 5px 18px rgba(20,131,250,.32);}

/* Entrées de menu : le repère visuel glisse au lieu d'apparaître */
.sb-link{transition:background .18s, color .18s, padding-inline-start .18s;}
.sb-link:hover:not(.is-on){padding-inline-start:20px;}

/* Champs : anneau de focus net, utile au clavier */
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:none;border-color:var(--bl-500);box-shadow:0 0 0 3px rgba(20,131,250,.16);
}
[data-theme="nuit"] input:focus-visible,
[data-theme="nuit"] textarea:focus-visible,
[data-theme="nuit"] select:focus-visible{box-shadow:0 0 0 3px rgba(59,130,246,.25);}

/* Apparition douce du contenu, sans effet gratuit */
.app-content > *{animation:apparait .3s ease both;}
@keyframes apparait{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .app-content > *{animation:none;}
  .btn,.kpi,.panel,.sb-link{transition:none;}
}

/* Zone de dépôt d'un document de séance : chaque champ occupe sa propre
   ligne, le bouton garde sa taille naturelle. */
.depot-zone{
  display:flex;flex-direction:column;gap:10px;align-items:stretch;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.depot-titre{font-size:13px;font-weight:700;color:var(--ink-soft);}
.depot-zone input[type="text"],.depot-zone input:not([type]){
  padding:10px 13px;border-radius:12px;border:1.5px solid var(--line-strong);
  font-family:inherit;font-size:14px;background:#fff;color:var(--ink);width:100%;
}
.depot-zone #ed-ok{align-self:flex-start;flex:0 0 auto;width:auto;height:auto;}
#es-docs{display:flex;flex-direction:column;}
[data-theme="nuit"] .depot-zone{border-color:var(--line);}
[data-theme="nuit"] .depot-zone input[type="text"],
[data-theme="nuit"] .depot-zone input:not([type]){background:#1B2436;color:var(--ink);border-color:var(--line-strong);}

/* ============================================================
   CALENDRIER
   ============================================================ */
.cal-tete{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.cal-tete b{font-size:16px;text-transform:capitalize;flex:1;min-width:140px;}
.cal-jours{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;
  font-size:11.5px;font-weight:800;color:var(--ink-faint);text-transform:uppercase;text-align:center;
}
.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-case{
  position:relative;min-height:104px;padding:6px;border-radius:10px;
  background:var(--paper-soft);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px;
}
.cal-case.vide{background:transparent;border:none;}
.cal-case.aujourdhui{border-color:var(--bl-500);border-width:2px;padding:5px;}
.cal-num{font-size:12px;font-weight:700;color:var(--ink-soft);font-family:var(--f-num);}
.cal-case.aujourdhui .cal-num{color:var(--bl-700);}
/* Un événement remplit la cellule, avec sa couleur de matière. */
.cal-evt{
  display:flex;align-items:stretch;gap:2px;width:100%;
  border-radius:7px;overflow:hidden;font-size:11px;line-height:1.3;
}
.cal-evt-corps{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
  text-align:start;cursor:pointer;font-family:inherit;font-size:11px;
  padding:5px 7px;border:none;background:transparent;color:inherit;
}
.cal-titre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.cal-prof{font-size:10px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-rejoindre{
  display:grid;place-items:center;width:26px;flex-shrink:0;
  background:rgba(255,255,255,.35);color:inherit;text-decoration:none;transition:.15s;
}
.cal-rejoindre svg{width:13px;height:13px;}
.cal-rejoindre:hover{background:rgba(255,255,255,.6);}

/* Couleurs par matière : chacune est identifiable sans lire le titre. */
.cal-evt.seance{background:var(--bl-100);color:var(--bl-800);}
.cal-evt.mat-maths{background:#DBEAFE;color:#1E40AF;}
.cal-evt.mat-physique-chimie{background:#DCFCE7;color:#166534;}
.cal-evt.mat-sciences{background:#FEF3C7;color:#854D0E;}
.cal-evt.mat-informatique{background:#F3E8FF;color:#6B21A8;}
.cal-evt.perso{background:var(--or-100);color:var(--or-800,#7A5A00);}
.cal-evt.annule{opacity:.55;}
.cal-evt.annule .cal-titre{text-decoration:line-through;}
.cal-evt:hover{filter:brightness(.96);}

[data-theme="nuit"] .cal-evt.mat-maths{background:#1E3A5F;color:#BFDBFE;}
[data-theme="nuit"] .cal-evt.mat-physique-chimie{background:#14432A;color:#A7F3D0;}
[data-theme="nuit"] .cal-evt.mat-sciences{background:#3B2F14;color:#FDE68A;}
[data-theme="nuit"] .cal-evt.mat-informatique{background:#2E1B47;color:#E9D5FF;}
[data-theme="nuit"] .cal-rejoindre{background:rgba(255,255,255,.12);}
[data-theme="nuit"] .cal-rejoindre:hover{background:rgba(255,255,255,.22);}
/*
 * Teinte de repli, pour une matière sans couleur propre : elle héritait
 * d'un fond clair et d'un texte presque noir, illisible sur fond sombre.
 */
[data-theme="nuit"] .cal-evt.seance{background:#1E3A5F;color:#BFDBFE;}
[data-theme="nuit"] .cal-evt.perso{background:#3B2F14;color:#FDE68A;}
/* Le numéro du jour courant reprenait un bleu foncé invisible la nuit. */
[data-theme="nuit"] .cal-case.aujourdhui .cal-num{color:var(--bl-400);}
[data-theme="nuit"] .cal-reste:hover{background:#1B2436;color:var(--bl-400);border-color:var(--bl-600);}
.cal-h{font-family:var(--f-num);font-weight:700;margin-inline-end:4px;}
.cal-plus{
  position:absolute;top:4px;inset-inline-end:4px;width:18px;height:18px;
  border-radius:6px;border:none;cursor:pointer;font-size:14px;line-height:1;
  background:transparent;color:var(--ink-faint);opacity:0;transition:.15s;
}
.cal-case:hover .cal-plus{opacity:1;}
.cal-plus:hover{background:var(--bl-100);color:var(--bl-700);}
.cal-legende{display:flex;gap:18px;margin-top:14px;font-size:12.5px;color:var(--ink-soft);}
.cal-legende span{display:flex;align-items:center;gap:7px;}
.cal-legende .pt{width:11px;height:11px;border-radius:4px;display:inline-block;}
.cal-legende .pt.seance{background:var(--bl-500);}
.cal-legende .pt.perso{background:var(--or-400);}
/*
 * Vue mois sur un téléphone.
 *
 * Sept colonnes sur 390 pixels laissent 45 pixels par jour : le titre
 * d'une séance y était tronqué dès le premier mot, le bouton « + » d'une
 * case mesurait 18 pixels de côté, et viser la bonne journée relevait de
 * la chance.
 *
 * On renonce donc à écrire dans les cases : chaque événement devient une
 * pastille de la couleur de sa matière, et la journée entière devient le
 * bouton qui ouvre sa liste. La vue mois redevient ce qu'elle doit être
 * sur un petit écran, un aperçu de la densité du mois.
 *
 * Les vues semaine et jour gardent le texte : elles ont la place.
 */
@media (max-width:700px){
  .cal-case{min-height:64px;padding:4px;}
  .cal-evt{font-size:10px;}

  .cal-plus{opacity:1;width:30px;height:30px;font-size:17px;}

  /* Cibles tactiles : rien d'essentiel sous 32 pixels de haut. */
  .cal-vue{min-height:34px;padding-inline:14px;}
  .cal-tete .btn{min-height:34px;}
}
[data-theme="nuit"] .cal-case{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .cal-evt.seance{background:#243044;color:#BFDBFE;}
[data-theme="nuit"] .cal-evt.perso{background:#33291A;color:#F0C674;}

/* ============================================================
   LECTEUR : menu repliable et panneau de comparaison
   ============================================================ */
.lecteur{
  position:relative;display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start;
  transition:grid-template-columns .22s ease, gap .22s ease;
}
.lecteur.menu-replie{grid-template-columns:0 1fr;gap:0;}
.lecteur-menu{overflow:hidden;transition:opacity .18s;}
.lecteur.menu-replie .lecteur-menu{opacity:0;pointer-events:none;}

/* Le bouton reste hors du panneau replié, pour pouvoir toujours rouvrir. */
.lc-toggle{
  position:absolute;top:18px;inset-inline-start:300px;z-index:5;
  width:26px;height:26px;border-radius:50%;transform:translateX(-50%);
  display:grid;place-items:center;cursor:pointer;padding:0;
  background:#fff;border:1.5px solid var(--line);color:var(--ink-soft);
  transition:inset-inline-start .22s ease, transform .22s ease, color .16s;
}
.lc-toggle svg{width:13px;height:13px;}
.lc-toggle:hover{color:var(--bl-700);border-color:var(--bl-400);}
.lecteur.menu-replie .lc-toggle{inset-inline-start:0;}
[dir="rtl"] .lc-toggle{transform:translateX(50%) scaleX(-1);}
[dir="rtl"] .lecteur.menu-replie .lc-toggle{transform:translateX(50%) scaleX(-1);}
@media (max-width:900px){.lc-toggle{display:none;}}
[data-theme="nuit"] .lc-toggle{background:#151C2A;border-color:var(--line-strong);color:var(--ink-soft);}

/* Panneau de comparaison : deux volets, persistant quel que soit l'onglet
   affiché en dessous. */
.lc-compare-entete{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.lc-compare-entete b{display:flex;align-items:center;gap:8px;font-size:14px;}
.lc-compare-grille{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px;}
.lc-compare-volet{border-radius:var(--r);overflow:hidden;background:#fff;border:1.5px solid var(--bl-300,var(--bl-200));}
.lc-compare-tete{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--bl-050);border-bottom:1px solid var(--bl-200);
}
.lc-compare-tete b{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lc-compare-volet iframe{width:100%;height:420px;border:none;display:block;background:var(--paper-soft);}
.lc-compare-volet.vide{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  height:420px;background:var(--paper-soft);border-style:dashed;color:var(--ink-faint);font-size:13px;text-align:center;
}
@media (max-width:900px){.lc-compare-grille{grid-template-columns:1fr;}.lc-compare-volet iframe{height:340px;}}
[data-theme="nuit"] .lc-compare-volet{background:#151C2A;border-color:#3B82F6;}
[data-theme="nuit"] .lc-compare-tete{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .lc-compare-volet iframe{background:#0F1520;}
[data-theme="nuit"] .lc-compare-volet.vide{background:#1B2436;border-color:var(--line-strong);}

/* (4) Les filtres ne doivent pas toucher la liste en dessous */
.vir-filtres{margin-bottom:18px;}
#msg-list .vir-onglets{margin-bottom:14px;}

/* (5) Champ de fichier : aligné et conforme au thème. Le sélecteur natif
   ne s'habille pas, on met en forme son bouton interne. */
/* ---- Champ de fichier ----
   Le champ natif dessinait son propre bouton, avec le libellé du
   navigateur : « Choose Files » s'affichait au milieu d'un écran en
   arabe, et ce bouton venait toucher le bord du cadre en lecture de
   droite à gauche. Le champ reste là, accessible au clavier, mais
   invisible : le bouton et le nom du fichier sont à nous. */
.fichier-champ{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
/* Sélecteur doublé : `.field input{width:100%}`, déclaré plus haut,
   l'emportait sur une règle de même force et le champ gardait toute la
   largeur. Invisible, il restait cliquable et couvrait ses voisins. */
.fichier-champ .fichier-input{
  position:absolute;width:1px;height:1px;min-width:0;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  /* Le libellé ouvre le sélecteur : le champ n'a plus à recevoir de clic. */
  pointer-events:none;
}
.fichier-btn{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;
  height:42px;padding-inline:18px;border-radius:12px;cursor:pointer;
  font-size:13.5px;font-weight:700;font-family:inherit;
  background:var(--bl-050);color:var(--bl-700);border:1.5px solid var(--bl-200);
  transition:background .16s,border-color .16s,color .16s;
}
.fichier-btn svg{width:17px;height:17px;flex-shrink:0;}
.fichier-btn:hover{background:var(--bl-100);border-color:var(--bl-400);}
/* Le champ étant invisible, c'est le bouton qui doit montrer le focus. */
.fichier-input:focus-visible + .fichier-btn{outline:2px solid var(--bl-500);outline-offset:3px;}
.fichier-nom{font-size:13.5px;color:var(--ink);min-width:0;word-break:break-word;}
.fichier-nom.is-vide{color:var(--ink-faint);}
[data-theme="nuit"] .fichier-btn{background:#243044;color:#BFDBFE;border-color:var(--line-strong);}
[data-theme="nuit"] .fichier-btn:hover{background:#2D3B52;}

/* (7) Boutons du formulaire de message à leur largeur naturelle */
.msg-actions{justify-content:flex-start;}
.msg-actions .btn{flex:0 0 auto;min-width:0;padding-inline:22px;}

/* (10) Page « Contenu des cours » : même fond que les autres écrans
   d'administration, et panneaux cohérents. */
.adm-lecteur .lecteur-menu,
.adm-lecteur .lecteur-contenu{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 3px rgba(11,26,43,.04);
}
[data-theme="nuit"] .adm-lecteur .lecteur-menu,
[data-theme="nuit"] .adm-lecteur .lecteur-contenu{background:#151C2A;border-color:var(--line);}

/* (12) Case à cocher simple, à la place de la grosse pastille */
.case-simple{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:14px;color:var(--ink);user-select:none;
}
.case-simple input{width:16px;height:16px;accent-color:var(--bl-600);cursor:pointer;margin:0;}

/* (19) Cartes du tableau de bord administrateur : une couleur par nature
   d'information, pour les distinguer d'un coup d'œil. */
.ov-cards .ov-card:nth-child(1){background:linear-gradient(135deg,#EFF6FF,#fff);border-color:#BFDBFE;}
.ov-cards .ov-card:nth-child(1) .ov-val{color:#1E40AF;}
.ov-cards .ov-card:nth-child(2){background:linear-gradient(135deg,#F0FDF4,#fff);border-color:#BBF7D0;}
.ov-cards .ov-card:nth-child(2) .ov-val{color:#166534;}
.ov-cards .ov-card:nth-child(3){background:linear-gradient(135deg,#FAF5FF,#fff);border-color:#E9D5FF;}
.ov-cards .ov-card:nth-child(3) .ov-val{color:#6B21A8;}
.ov-cards .ov-card:nth-child(4){background:linear-gradient(135deg,#FFF7ED,#fff);border-color:#FED7AA;}
.ov-cards .ov-card:nth-child(4) .ov-val{color:#9A3412;}
.ov-cards .ov-card:nth-child(5){background:linear-gradient(135deg,#F0F9FF,#fff);border-color:#BAE6FD;}
.ov-cards .ov-card:nth-child(5) .ov-val{color:#075985;}

/* Indicateurs d'activité : pastilles colorées par domaine */
.kpi-grid .kpi:nth-child(1) .ico{background:#EFF6FF;color:#1E40AF;border-color:#BFDBFE;}
.kpi-grid .kpi:nth-child(2) .ico{background:#F0FDF4;color:#166534;border-color:#BBF7D0;}
.kpi-grid .kpi:nth-child(3) .ico{background:#FAF5FF;color:#6B21A8;border-color:#E9D5FF;}
.kpi-grid .kpi:nth-child(4) .ico{background:#FFF7ED;color:#9A3412;border-color:#FED7AA;}
.kpi-grid .kpi:nth-child(5) .ico{background:#FEF2F2;color:#991B1B;border-color:#FECACA;}

[data-theme="nuit"] .ov-cards .ov-card:nth-child(1){background:#16233B;border-color:#1E3A5F;}
[data-theme="nuit"] .ov-cards .ov-card:nth-child(1) .ov-val{color:#BFDBFE;}
[data-theme="nuit"] .ov-cards .ov-card:nth-child(2){background:#14271C;border-color:#14432A;}
[data-theme="nuit"] .ov-cards .ov-card:nth-child(2) .ov-val{color:#A7F3D0;}
[data-theme="nuit"] .ov-cards .ov-card:nth-child(3){background:#211730;border-color:#2E1B47;}
[data-theme="nuit"] .ov-cards .ov-card:nth-child(3) .ov-val{color:#E9D5FF;}
[data-theme="nuit"] .ov-cards .ov-card:nth-child(4){background:#2A1D12;border-color:#3B2F14;}
[data-theme="nuit"] .ov-cards .ov-card:nth-child(4) .ov-val{color:#FDE68A;}
[data-theme="nuit"] .ov-cards .ov-card:nth-child(5){background:#12232E;border-color:#164E63;}
[data-theme="nuit"] .ov-cards .ov-card:nth-child(5) .ov-val{color:#BAE6FD;}
[data-theme="nuit"] .kpi-grid .kpi .ico{border-color:var(--line-strong);}

/* Profils des collaborateurs : cartes cliquables plutôt que cases nues */
.profils-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;}
.profil-carte{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  padding:12px 14px;border-radius:var(--r);font-size:13.5px;
  background:#fff;border:1.5px solid var(--line);transition:.16s;
}
.profil-carte:hover{border-color:var(--bl-400);background:var(--bl-050);}
.profil-carte input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--bl-600);cursor:pointer;flex-shrink:0;}
.profil-carte:has(input:checked){border-color:var(--bl-600);background:var(--bl-050);box-shadow:0 0 0 2px rgba(20,131,250,.12);}
.profil-carte span{display:flex;flex-direction:column;gap:2px;min-width:0;}
.profil-carte b{font-size:13.5px;}
.profil-carte .faint{font-size:12px;line-height:1.45;}
[data-theme="nuit"] .profil-carte{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .profil-carte:hover,
[data-theme="nuit"] .profil-carte:has(input:checked){background:#243044;border-color:#3B82F6;}

/* Enregistrements des séances */
.enr-groupe{margin-bottom:20px;}
.enr-groupe:last-child{margin-bottom:0;}
.enr-groupe .ov-titre{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.enr-groupe .pt{width:11px;height:11px;border-radius:4px;display:inline-block;background:var(--bl-500);}
.enr-groupe .pt.mat-maths{background:#3B82F6;}
.enr-groupe .pt.mat-physique-chimie{background:#16A34A;}
.enr-groupe .pt.mat-sciences{background:#D97706;}
.enr-groupe .pt.mat-informatique{background:#9333EA;}

/* Replay indisponible : bouton présent mais inactif */
.cal-rejoindre.desactive{
  opacity:.4;cursor:not-allowed;background:rgba(255,255,255,.18);
}

/* Bandeau d'horloge simulée : volontairement visible, pour qu'un test
   oublié ne passe pas pour un bug d'expiration. */
.imperso-bar-horloge{background:#7C2D12;color:#FFEDD5;}
.imperso-bar-horloge .imperso-ico{background:rgba(255,255,255,.18);}

/* (2) Liste des chapitres : hauteur limitée avec défilement, sinon la
   page s'allonge indéfiniment et le contenu passe hors écran. */
.adm-lecteur #ct-liste{max-height:min(58vh, 520px);overflow-y:auto;padding-inline-end:4px;}
.adm-lecteur .lecteur-menu{max-height:none;}

/* Sections d'un chapitre affichées comme sous-entrées du menu */
/* Table des matières pliable, comme la structure d'un cours. */
.ct-chap{margin-bottom:2px;}
.ct-caret{
  margin-inline-start:auto;flex-shrink:0;color:var(--ink-faint);
  display:inline-flex;padding:2px;border-radius:5px;transition:transform .18s;
}
.ct-caret svg{width:12px;height:12px;}
.ct-caret:hover{background:var(--bl-100);color:var(--bl-700);}
.ct-chap.is-open .ct-caret{transform:rotate(180deg);}
.ct-sous{
  display:none;flex-direction:column;gap:1px;
  margin:2px 0 4px;padding-inline-start:32px;
}
.ct-chap.is-open .ct-sous{display:flex;}
.ct-sous span{
  font-size:11.5px;color:var(--ink-faint);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ct-sous span::before{content:'· ';opacity:.6;}

/* Flèche de téléchargement sur les cartes du tableau de bord */
.ov-tel{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;
  margin-inline-start:7px;vertical-align:middle;color:var(--ink-faint);
  text-decoration:none;transition:.15s;opacity:0;
}
.ov-card:hover .ov-tel,.kpi:hover .ov-tel{opacity:1;}
.ov-tel:hover{background:var(--bl-100);color:var(--bl-700);}
.ov-tel svg{width:12px;height:12px;transform:rotate(90deg);}
.kpi .ov-tel{position:absolute;top:12px;inset-inline-end:12px;opacity:0;}
.kpi{position:relative;}
@media (hover:none){.ov-tel{opacity:1;}}
[data-theme="nuit"] .ov-tel:hover{background:#243044;color:#BFDBFE;}

/* Sélecteur de vue du calendrier */
.cal-vues{display:flex;gap:4px;margin-inline-start:auto;}
.cal-vue{
  padding:6px 13px;border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;transition:.16s;
  background:var(--paper-soft);color:var(--ink-soft);border:1.5px solid var(--line);
}
.cal-vue:hover{border-color:var(--bl-400);color:var(--ink);}
.cal-vue.is-on{background:var(--bl-600);color:#fff;border-color:var(--bl-600);}
[data-theme="nuit"] .cal-vue{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .cal-vue.is-on{background:#2563EB;color:#fff;border-color:#2563EB;}

/* Vue semaine : une seule ligne de sept jours, plus hauts */
.cal-grille.vue-semaine .cal-case{min-height:220px;}
/* Vue jour : une colonne unique, pleine largeur */
.cal-grille.vue-jour{grid-template-columns:1fr;}
.cal-grille.vue-jour .cal-case{min-height:260px;}
.cal-grille.vue-jour .cal-evt{font-size:13px;}
.cal-grille.vue-jour .cal-evt-corps{padding:10px 14px;font-size:13px;}
.cal-grille.vue-jour .cal-rejoindre{width:40px;}

/* (6) Hauteur de cellule constante : sans cela, un jour chargé étire
   toute sa ligne et la grille devient irrégulière. Les événements en
   trop défilent dans la cellule. */
.cal-grille.vue-mois .cal-case{
  /* Assez haute pour trois éléments lisibles côte à côte : deux séances
     et la pastille « +N ». En dessous, le contenu débordait. */
  height:132px;min-height:0;overflow:hidden;
}
.cal-grille.vue-mois .cal-evts{
  flex:1;min-height:0;overflow:hidden;
  display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:3px;
}
.cal-grille.vue-semaine .cal-case{height:230px;min-height:0;overflow:hidden;}
.cal-grille.vue-semaine .cal-evts{flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:4px;}
.cal-grille.vue-jour .cal-evts{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:6px;}
@media (max-width:700px){
  .cal-grille.vue-mois .cal-case{height:92px;}
}

/* En vue mois, l'espace est compté : heure et titre sur une seule ligne,
   le nom du professeur est masqué. Sans cela, seule l'heure restait
   lisible quand plusieurs séances tombaient le même jour. */
.cal-grille.vue-mois .cal-evt-corps{
  flex-direction:row;align-items:baseline;gap:5px;padding:3px 7px;
}
.cal-grille.vue-mois .cal-h{font-size:10px;flex-shrink:0;margin:0;}
.cal-grille.vue-mois .cal-titre{font-size:10.5px;flex:1;min-width:0;}
.cal-grille.vue-mois .cal-prof{display:none;}
.cal-grille.vue-mois .cal-rejoindre{width:20px;}
.cal-grille.vue-mois .cal-rejoindre svg{width:11px;height:11px;}

/* Diffusion d'une notion vers d'autres filières */
.ct-cibles:not(:empty){
  margin-top:14px;padding:14px 16px;border-radius:var(--r);
  background:var(--bl-050);border:1px solid var(--bl-200);
}
.ct-cibles-tete{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:4px;}
.ct-cibles-tete svg{width:15px;height:15px;color:var(--bl-600);}
.ct-cible{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
.ct-cible:last-child{margin-bottom:0;}
.ct-cible .pill-check{min-width:160px;flex-shrink:0;}
.ct-cible .select{
  flex:1;min-width:200px;padding:7px 11px;border-radius:10px;
  border:1.5px solid var(--line-strong);font-size:13px;font-family:inherit;
  background:#fff;color:var(--ink);
}
.ct-cible .select:disabled{opacity:.45;cursor:not-allowed;}
[data-theme="nuit"] .ct-cibles:not(:empty){background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .ct-cible .select{background:#0F1520;color:var(--ink);border-color:var(--line-strong);}

/* Paramétrage des matières */
.mat-origine{
  padding:14px 16px;margin-bottom:18px;border-radius:var(--r);
  background:var(--paper-soft);border:1px solid var(--line);font-size:13.5px;
}
.mat-carte{
  padding:18px;margin-bottom:14px;border-radius:var(--r-lg);
  background:#fff;border:1.5px solid var(--line);
}
.mat-tete{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.mat-tete b{flex:1;min-width:140px;font-size:15px;}
.mat-niveau{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.mat-niveau-nom{
  min-width:150px;flex-shrink:0;font-size:12.5px;font-weight:700;
  color:var(--ink-soft);padding-top:6px;
}
.mat-carte textarea{
  width:100%;padding:10px 13px;border-radius:12px;border:1.5px solid var(--line-strong);
  font-family:inherit;font-size:14px;background:#fff;color:var(--ink);resize:vertical;
}
.mat-carte input[type="color"]{
  width:56px;height:40px;padding:3px;border-radius:10px;cursor:pointer;
  border:1.5px solid var(--line-strong);background:#fff;
}
[data-theme="nuit"] .mat-origine{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .mat-carte{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .mat-carte textarea,
[data-theme="nuit"] .mat-carte input[type="color"]{background:#1B2436;color:var(--ink);border-color:var(--line-strong);}

/* (8) La flèche du panneau des chapitres pointait du mauvais côté :
   quand le menu est ouvert, elle doit inviter à le replier. */
.lc-toggle svg{transform:rotate(180deg);}
.lecteur.menu-replie .lc-toggle svg{transform:none;}
[dir="rtl"] .lc-toggle svg{transform:none;}
[dir="rtl"] .lecteur.menu-replie .lc-toggle svg{transform:rotate(180deg);}

/* Liste des collaborateurs : lignes pliables */
.admin-row{
  padding:14px 16px;margin-bottom:10px;border-radius:var(--r);
  background:#fff;border:1.5px solid var(--line);
}
.admin-row-head{display:flex;align-items:flex-start;gap:14px;cursor:pointer;}
.admin-row-head > span:first-child{flex:1;min-width:0;line-height:1.5;}
.admin-caret{
  flex-shrink:0;color:var(--ink-faint);display:inline-flex;
  padding:2px;transition:transform .18s;
}
.admin-caret svg{width:13px;height:13px;}
.admin-row.is-open .admin-caret{transform:rotate(180deg);}
.admin-row-corps{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.admin-row.is-open .admin-row-corps{display:block;}
[data-theme="nuit"] .admin-row{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .admin-row-corps{border-color:var(--line);}

/* Offre déjà couverte par l'abonnement en cours : visible mais inactive */
.offer.is-inutile{opacity:.62;}
.offer.is-inutile .price{filter:grayscale(.5);}

/* (10) Liste des filleuls : défilement au-delà de trois, pour que la page
   ne s'allonge pas indéfiniment. */
.filleuls-liste{max-height:232px;overflow-y:auto;padding-inline-end:4px;}

/* Favori d'une matière souscrite : la ligne mène au cours */
.chap.cliquable{cursor:pointer;transition:background .16s, border-color .16s;}
.chap.cliquable:hover{background:var(--bl-050);border-color:var(--bl-300,var(--bl-200));}
[data-theme="nuit"] .chap.cliquable:hover{background:#1B2436;}

/* Choix de la périodicité dans « Modifier mon abonnement » */
.co-periodes{display:flex;gap:8px;}
.co-periode{
  flex:1;padding:10px 14px;border-radius:12px;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:700;transition:.16s;
  background:#fff;color:var(--ink-soft);border:1.5px solid var(--line-strong);
}
.co-periode:hover{border-color:var(--bl-400);color:var(--ink);}
.co-periode.is-on{background:var(--bl-600);color:#fff;border-color:var(--bl-600);}
[data-theme="nuit"] .co-periode{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .co-periode.is-on{background:#2563EB;color:#fff;border-color:#2563EB;}

/* Matière déjà souscrite : visible, cochée, non décochable */
.pill-check.acquise{opacity:.9;cursor:default;background:var(--bl-050);border-color:var(--bl-300,var(--bl-200));}
.pill-check.acquise input{cursor:default;}
.acquise-tag{
  font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:99px;
  background:var(--bl-100);color:var(--bl-700);margin-inline-start:5px;
}
[data-theme="nuit"] .pill-check.acquise{background:#1B2436;border-color:var(--line-strong);}
[data-theme="nuit"] .acquise-tag{background:#243044;color:#BFDBFE;}

/* ============================================================
   LECTEUR : sous-menu des notions et plein écran
   ============================================================ */

/* Notions du chapitre ouvert, en retrait sous son titre */
.lc-notions:not(:empty){
  display:flex;flex-direction:column;gap:1px;
  margin:2px 0 6px;padding-inline-start:30px;
}
.lc-notion{
  display:flex;align-items:center;gap:8px;width:100%;text-align:start;
  cursor:pointer;font-family:inherit;border:none;background:transparent;
  padding:6px 10px;border-radius:8px;font-size:12.5px;color:var(--ink-soft);
  line-height:1.4;transition:.14s;
}
.lc-notion:hover{background:var(--bl-050);color:var(--ink);}
.lc-notion.is-on{background:var(--bl-100);color:var(--bl-800);font-weight:700;}
.lc-notion-n{
  width:18px;height:18px;flex-shrink:0;display:grid;place-items:center;
  border-radius:6px;font-size:10.5px;font-family:var(--f-num);font-weight:800;
  background:var(--paper-soft);color:var(--ink-faint);
}
.lc-notion.is-on .lc-notion-n{background:var(--bl-600);color:#fff;}
[data-theme="nuit"] .lc-notion:hover{background:#1B2436;}
[data-theme="nuit"] .lc-notion.is-on{background:#243044;color:#BFDBFE;}
[data-theme="nuit"] .lc-notion-n{background:#1B2436;}

/* Plein écran : la barre latérale et les marges disparaissent, le cours
   occupe toute la fenêtre. */
body.lecteur-plein .sidebar,
body.lecteur-plein .topbar,
body.lecteur-plein .assist-fab{display:none;}
body.lecteur-plein .app-main{margin-inline-start:0;}
body.lecteur-plein .app-content{max-width:none;padding:18px 26px;}
body.lecteur-plein .lecteur{grid-template-columns:270px 1fr;}
body.lecteur-plein #lc-plein{background:var(--bl-100);color:var(--bl-700);}
@media (max-width:900px){
  body.lecteur-plein .app-content{padding:12px;}
}

/* Multi-affichage : pied de ressource et volets typés */
.lc-res-pied{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:8px;flex-wrap:wrap;
}
.lc-texte .lc-res-pied{margin-top:12px;}
.lc-compare-media{width:100%;height:420px;background:#000;display:block;}
.lc-compare-texte{
  height:420px;overflow-y:auto;padding:16px 18px;
  font-size:14px;line-height:1.7;color:var(--ink);background:var(--paper-soft);
}
@media (max-width:900px){
  .lc-compare-media,.lc-compare-texte{height:300px;}
}
[data-theme="nuit"] .lc-compare-texte{background:#0F1520;}

/* ============================================================
   LECTEUR — refonte : plan hiérarchique et commandes discrètes
   ============================================================ */

/* Retour à la liste des chapitres */
.lc-retour{
  display:flex;align-items:center;gap:8px;width:100%;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;color:var(--bl-700);
  background:transparent;border:none;padding:4px 6px;margin-bottom:10px;border-radius:8px;
}
.lc-retour:hover{background:var(--bl-050);}
.lc-retour svg{width:13px;height:13px;transform:rotate(180deg);}
[dir="rtl"] .lc-retour svg{transform:none;}

/* Chapitre ouvert, en tête du plan */
.lc-chap-ouvert{
  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;margin-bottom:8px;
  border-radius:10px;background:var(--bl-050);border:1px solid var(--bl-200);
}
.lc-chap-ouvert .lc-titre{font-weight:800;font-size:14px;color:var(--bl-900);}

/* Sous-notions : un cran de plus en retrait */
.lc-notion.sous{padding-inline-start:26px;font-size:12px;}
.lc-notion.sous .lc-notion-n{width:16px;height:16px;font-size:9.5px;}
.lc-notion-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Commandes d'une ressource : symboles discrets */
.lc-act{
  display:inline-grid;place-items:center;width:28px;height:28px;flex-shrink:0;
  border-radius:8px;cursor:pointer;border:1px solid transparent;
  background:transparent;color:var(--ink-faint);transition:.15s;
}
.lc-act svg{width:15px;height:15px;}
.lc-act:hover{background:var(--paper-soft);color:var(--ink);border-color:var(--line);}
.lc-act.is-on{background:var(--bl-100);color:var(--bl-700);border-color:var(--bl-300,var(--bl-200));}
.lc-doc-bloc.replie .lc-act[data-plier-doc] svg{transform:rotate(-90deg);}

/* Vidéo : rien dessous, hormis la commande en surimpression */
.lc-video{position:relative;}
.lc-video-embed{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);display:block;}

/*
 * Cadre d'un document consulté.
 *
 * Le filigrane nominatif qui s'y posait a été retiré : la session unique
 * empêche le partage de compte, ce qu'une marque sur la page ne faisait
 * que constater après coup.
 */
.lc-doc-cadre{position:relative;}

.lc-video-act{
  position:absolute;top:10px;inset-inline-end:10px;
  background:rgba(255,255,255,.9);border-radius:9px;
}
[data-theme="nuit"] .lc-video-act{background:rgba(21,28,42,.9);}

/* Boutons plein écran et repli : libellé visible */
.lc-plein-btn{display:inline-flex;align-items:center;gap:7px;}
.lc-plein-btn.is-on{background:var(--bl-100);color:var(--bl-700);border-color:var(--bl-300,var(--bl-200));}
.lc-plein-ico{display:inline-flex;}
.lc-plein-ico svg{width:15px;height:15px;}

/* Le bouton vit DANS le panneau de gauche, pas au-dessus du contenu :
   flottant, il recouvrait le titre du chapitre. Replié, il glisse sur
   le bord gauche pour rester atteignable. */
.lc-toggle{
  position:absolute;top:-2px;inset-inline-start:0;z-index:5;
  display:inline-flex;align-items:center;gap:6px;
  height:auto;width:auto;padding:5px 11px;border-radius:999px;
  cursor:pointer;font-family:inherit;
  font-size:11.5px;font-weight:700;white-space:nowrap;
  background:#fff;border:1.5px solid var(--line);color:var(--ink-soft);
  transition:background .16s, color .16s;
}
.lc-toggle:hover{color:var(--bl-700);border-color:var(--bl-400);}
.lc-toggle-ico{display:inline-flex;}
.lc-toggle-ico svg{width:12px;height:12px;transform:rotate(180deg);}
.lecteur.menu-replie .lc-toggle{inset-inline-start:0;}
.lecteur.menu-replie .lc-toggle-ico svg{transform:none;}
[data-theme="nuit"] .lc-toggle{background:#151C2A;border-color:var(--line-strong);}

/* Menu replié : le contenu occupe TOUTE la largeur */
.lecteur.menu-replie{grid-template-columns:0 1fr;gap:0;}
.lecteur.menu-replie .lecteur-menu{width:0;padding:0;border:none;overflow:hidden;opacity:0;}
.lecteur.menu-replie .lecteur-contenu{padding-top:52px;}

/* Sous-notion dans l'administration */
.adm-sous-marque{color:var(--ink-faint);margin-inline-end:2px;}
.adm-section-tete .link-btn{white-space:nowrap;}

/* Le panneau de gauche laisse la place au bouton en haut */
.lecteur{position:relative;padding-top:34px;}
.lecteur-menu,.lecteur-contenu{position:relative;}

/* Le bouton du plan : cette règle prime sur les versions antérieures,
   qui le décalaient de moitié et le faisaient sortir du cadre. */
.lc-toggle{
  position:absolute;top:-2px;inset-inline-start:2px;
  transform:none;width:auto;height:auto;border-radius:999px;
  padding:5px 12px;display:inline-flex;align-items:center;gap:6px;
}
.lecteur.menu-replie .lc-toggle{inset-inline-start:2px;transform:none;}
.lc-toggle svg{width:12px;height:12px;}

/* En plein écran, le retour aux matières disparaît : on quitte d'abord
   le plein écran, puis on navigue. */
body.lecteur-plein .lc-retour-matieres{display:none;}

/* Catalogue visible mais verrouillé (offre Live seule) */
.cours-bandeau{margin-bottom:18px;}
.cours-bandeau .link-btn{margin-inline-start:6px;}
.subj-tile.verrouille{cursor:default;opacity:.72;}
.subj-tile.verrouille:hover{transform:none;box-shadow:var(--sh);}
.subj-tile.verrouille .subj-tile-photo img{filter:grayscale(.75);}
.subj-tile.verrouille .subj-tile-tag{display:inline-flex;align-items:center;gap:4px;}
.subj-tile.verrouille .subj-tile-tag svg{width:12px;height:12px;}

/* ============================================================
   CORRECTIFS : plein écran replié et lisibilité en thème nuit
   ============================================================ */

/* (1) Plein écran + plan masqué : le cours prend toute la largeur.
   La règle du plein écran fixait 270px et l'emportait sur le repli. */
body.lecteur-plein .lecteur.menu-replie{grid-template-columns:0 1fr;gap:0;}
body.lecteur-plein .lecteur.menu-replie .lecteur-menu{
  width:0;padding:0;border:none;overflow:hidden;opacity:0;
}

/* (3) Thème nuit : ces éléments gardaient une couleur claire sur fond
   sombre, ou l'inverse. */
[data-theme="nuit"] .lc-retour{color:var(--bl-500);}
[data-theme="nuit"] .lc-retour:hover{background:#1B2436;}
[data-theme="nuit"] .lc-chap-ouvert{
  background:#1B2436;border-color:var(--line-strong);
}
[data-theme="nuit"] .lc-chap-ouvert .lc-titre{color:var(--ink);}
[data-theme="nuit"] .lc-chap-ouvert .lc-num{background:#243044;color:#BFDBFE;}
[data-theme="nuit"] .lc-plein-btn{
  background:#1B2436;border-color:var(--line-strong);color:var(--ink);
}
[data-theme="nuit"] .lc-plein-btn.is-on{background:#243044;color:#BFDBFE;border-color:#2E3A4E;}
[data-theme="nuit"] .lc-toggle{background:#1B2436;border-color:var(--line-strong);color:var(--ink-soft);}
[data-theme="nuit"] .lc-toggle:hover{color:var(--bl-400);border-color:var(--bl-500);}
[data-theme="nuit"] .lc-section-titre{color:var(--ink);}
/* Date et enseignant, à droite du titre d'un enregistrement. */
[data-theme="nuit"] .lc-section-titre .faint{color:var(--ink-soft);}
[data-theme="nuit"] .lc-act{color:var(--ink-faint);}
[data-theme="nuit"] .lc-act:hover{background:#1B2436;color:var(--ink);border-color:var(--line-strong);}
[data-theme="nuit"] .lc-act.is-on{background:#243044;color:#BFDBFE;border-color:#2E3A4E;}
[data-theme="nuit"] .lc-notion{color:var(--ink-soft);}
[data-theme="nuit"] .lc-notion-n{background:#1B2436;color:var(--ink-faint);}
[data-theme="nuit"] .cours-bandeau{background:#2A2413;border-color:#4A3D1A;color:#F5E6B8;}
[data-theme="nuit"] .lc-video-act{background:rgba(21,28,42,.92);}

/* Le libellé du bouton plein écran héritait de la couleur du thème clair :
   sur fond sombre, texte et fond se confondaient. */
[data-theme="nuit"] .lc-plein-btn,
[data-theme="nuit"] .lc-plein-txt,
[data-theme="nuit"] .lc-plein-ico{color:var(--ink);}
[data-theme="nuit"] .lc-plein-btn.is-on,
[data-theme="nuit"] .lc-plein-btn.is-on .lc-plein-txt,
[data-theme="nuit"] .lc-plein-btn.is-on .lc-plein-ico{color:#BFDBFE;}

/* Sommaire d'une matière accessible : chaque chapitre mène au lecteur */
.chap.cliquable .chap-actions svg{width:14px;height:14px;color:var(--ink-faint);}
.chap.cliquable:hover .chap-actions svg{color:var(--bl-600);}
.chap.locked .chap-actions svg{width:14px;height:14px;color:var(--ink-faint);}

/* Chapitre terminé : une pastille à côté du titre. Le numéro reste
   visible, il sert de repère dans le programme. */
.chap-fait{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;margin-inline-start:6px;
  background:var(--ok-100,#D1FAE5);color:var(--ok-700,#047857);
  vertical-align:middle;flex-shrink:0;
}
.chap-fait svg{width:10px;height:10px;stroke-width:3;}
/* Le numéro garde son apparence : c'est un repère de position, pas un
   indicateur d'avancement. Seule la coche signale un chapitre terminé. */
[data-theme="nuit"] .chap-fait{background:#12372A;color:#6EE7B7;}


/* Jour des prochaines séances, en tête de la liste */
.live-jour{
  font-size:13px;font-weight:700;color:var(--ink);
  margin:0 0 10px;text-transform:capitalize;
}
.live-jour .faint{font-weight:600;text-transform:none;}

/* Progression par matière : un anneau par matière */
.prog-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:14px;}
.prog-carte{
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  padding:14px 8px;border-radius:var(--r);background:var(--paper-soft);border:1px solid var(--line);
}
.prog-carte b{font-size:13px;color:var(--ink);line-height:1.3;}
.prog-carte .faint{font-size:11.5px;}
.prog-anneau{width:74px;height:74px;transform:rotate(-90deg);}
.prog-fond{fill:none;stroke:var(--line);stroke-width:7;}
.prog-arc{
  fill:none;stroke:var(--bl-600);stroke-width:7;stroke-linecap:round;
  transition:stroke-dasharray .5s ease;
}
.prog-pct{
  transform:rotate(90deg);transform-origin:32px 32px;
  text-anchor:middle;dominant-baseline:central;
  font-family:var(--f-num);font-size:15px;font-weight:800;fill:var(--ink);
}
[data-theme="nuit"] .prog-carte{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .prog-fond{stroke:#243044;}
[data-theme="nuit"] .prog-pct{fill:var(--ink);}

/* ============================================================
   LECTEUR — ergonomie : document, vidéo, commandes
   ============================================================ */

/* Carte d'un document : fermée par défaut, deux actions lisibles */
.lc-doc-bloc{
  border:1.5px solid var(--line);border-radius:var(--r);
  background:#fff;margin-bottom:12px;overflow:hidden;
}
.lc-doc-tete{
  display:flex;align-items:center;gap:12px;padding:12px 14px;flex-wrap:wrap;
}
.lc-doc-ico{
  width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;
  border-radius:10px;background:var(--err-050,#FEF2F2);color:var(--err,#DC2626);
}
.lc-doc-ico svg{width:19px;height:19px;}
.lc-doc-nom{flex:1;min-width:140px;display:flex;flex-direction:column;line-height:1.35;}
.lc-doc-nom .faint{font-size:11.5px;}
.lc-doc-actions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;}
.lc-doc-bloc.replie .lc-doc-cadre{display:none;}
.lc-doc-cadre{border-top:1px solid var(--line);}
.lc-doc-cadre iframe{width:100%;height:560px;border:none;display:block;}
.lc-act.is-off{opacity:.4;cursor:not-allowed;}
[data-theme="nuit"] .lc-doc-bloc{background:#151C2A;border-color:var(--line);}
[data-theme="nuit"] .lc-doc-ico{background:#3A1E1E;color:#FCA5A5;}
[data-theme="nuit"] .lc-doc-cadre{border-color:var(--line);}

/* Vidéo : centrée, largeur raisonnable plutôt que pleine page */
.lc-video{
  /* Centrée et plus étroite que le conteneur : une vidéo pleine largeur
     force à balayer l'écran des yeux pour suivre le tableau. */
  width:min(640px, 82%);margin:0 auto 14px;border-radius:var(--r);
  overflow:hidden;background:#000;position:relative;
}
@media (max-width:700px){ .lc-video{width:100%;} }
/* Hauteur proportionnelle à la fenêtre : sur un petit écran, une vidéo
   de 420px poussait le reste du cours hors de vue. */
.lc-video video{width:100%;display:block;max-height:min(420px, 46vh);}
@media (max-height:700px){ .lc-video video{max-height:40vh;} }

/* Multi-affichage : en haut à droite de la ressource */
.lc-video-act{position:absolute;top:10px;inset-inline-end:10px;}
.lc-texte{position:relative;}
.lc-texte .lc-res-pied{
  position:absolute;top:10px;inset-inline-end:10px;margin:0;
}

/* Progression : les anneaux occupent toute la largeur du panneau */
.prog-grille{grid-template-columns:repeat(auto-fit,minmax(0,1fr));}

/* Progression : les anneaux occupent toute la hauteur du panneau.
   Le panneau voisin (prochaines séances) fixe la hauteur de la rangée ;
   sans cette règle, les cartes restaient collées en haut avec un grand
   vide en dessous. */
.two-col > .panel{display:flex;flex-direction:column;}
#dash-prog{flex:1;display:flex;flex-direction:column;min-height:0;}
#dash-prog .prog-grille{flex:1;align-content:stretch;}
#dash-prog .prog-carte{justify-content:center;}

/* Abonnement et message vidéo côte à côte */
.dash-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.dash-duo.seul{grid-template-columns:1fr;}
.dash-duo > .panel{margin-bottom:0;}
.dash-video-cadre{border-radius:var(--r);overflow:hidden;background:#000;}
.dash-video-cadre video{width:100%;display:block;max-height:min(280px, 32vh);}
@media (max-width:900px){ .dash-duo{grid-template-columns:1fr;} }

/* Séance passée sans chapitre déclaré : l'enseignant doit la compléter */
.seance.sans-chapitre{border-inline-start:3px solid var(--err,#DC2626);background:var(--err-050,#FEF2F2);}
.seance-manque{
  display:inline-flex;align-items:center;gap:5px;margin-top:3px;
  font-size:12px;font-weight:700;color:var(--err,#DC2626);
}
.seance-manque svg{width:12px;height:12px;}
[data-theme="nuit"] .seance.sans-chapitre{background:#2A1515;border-inline-start-color:#F87171;}
[data-theme="nuit"] .seance-manque{color:#FCA5A5;}

/* Séances rattachées à un chapitre */
.lc-seance{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px;}
.lc-seance:last-child{border-bottom:none;}
.lc-seance-titre{font-size:12.5px;font-weight:800;color:var(--ink-soft);margin:16px 0 8px;}
.lc-seance-fil{display:flex;flex-direction:column;gap:8px;}
.lc-msg{
  padding:9px 12px;border-radius:12px;background:var(--paper-soft);
  font-size:13.5px;line-height:1.5;
}
.lc-msg b{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:2px;}
.lc-msg.prof{background:var(--bl-050);border:1px solid var(--bl-200);}
[data-theme="nuit"] .lc-msg{background:#1B2436;}
[data-theme="nuit"] .lc-msg.prof{background:#243044;border-color:var(--line-strong);}

/* Survol d'une vignette de matière en thème nuit : le nom passait en
   --bl-800, presque noir sur fond sombre, et devenait illisible. */
[data-theme="nuit"] .subj-tile:hover .subj-tile-body h3{color:#93C5FD;}
[data-theme="nuit"] .subj-tile .subj-tile-body h3{color:var(--ink);}

/* Plan à trois niveaux : chaque niveau s'enfonce d'un cran */
.lc-notion.niv-0{padding-inline-start:10px;}
.lc-notion.niv-1{padding-inline-start:26px;font-size:12px;}
.lc-notion.niv-2{padding-inline-start:42px;font-size:11.5px;}
.lc-notion.niv-1 .lc-notion-n,
.lc-notion.niv-2 .lc-notion-n{width:auto;min-width:18px;padding:0 4px;font-size:9.5px;}

/* Exercice : énoncé puis corrigé, en deux blocs distincts */
.lc-exo-bloc{margin-bottom:16px;padding-top:4px;}
.lc-exo-titre{
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  margin:0 0 8px;color:var(--bl-700);
}
.lc-exo-bloc.corrige{border-top:1px dashed var(--line);padding-top:14px;}


/* ============================================================
   LECTEUR À LA HAUTEUR DE L'ÉCRAN
   (limité à #lc-wrap : l'écran d'administration du contenu réutilise
   ces classes, et sa liste d'éléments doit pouvoir défiler librement)
   La hauteur --lc-h est calculée en JavaScript depuis la position réelle
   du lecteur : elle tient compte de la barre du haut, du lien de retour
   et du mode plein écran, que du CSS seul ne connaît pas.
   Le plan défile dans sa colonne ; dans le contenu, l'en-tête (titre,
   boutons, onglets) reste en place et seule la matière défile.
   ============================================================ */
@media (min-width:901px){
  #lc-wrap.lecteur{height:var(--lc-h, calc(100vh - 160px));align-items:stretch;}
  #lc-wrap .lecteur-menu{
    position:static;max-height:none;height:100%;min-height:0;
    display:flex;flex-direction:column;
  }
  #lc-wrap .lecteur-menu > #lc-liste{flex:1;min-height:0;overflow-y:auto;}
  #lc-wrap .lecteur-contenu{
    height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  }
  #lc-wrap .lecteur-contenu > *{flex:none;}
  #lc-wrap .lecteur-contenu > #lc-sections{flex:1;min-height:0;overflow-y:auto;padding-inline-end:4px;}
  #lc-wrap .lecteur-contenu > #lc-compare{max-height:45%;overflow-y:auto;}
  /* Sans chapitre choisi, l'invitation reste centrée dans l'espace. */
  #lc-wrap .lecteur-contenu > .vide{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;}
}

/* ============================================================
   LECTEUR : ESPACE, PLEIN ÉCRAN, MULTI-AFFICHAGE, COULEURS, VIDÉO
   ============================================================ */

/* ---- En-tête compact : plus aucune ligne au-dessus du lecteur ---- */
#lc-wrap.lecteur{padding-top:0;--lc-menu-w:290px;}
@media (min-width:901px){
  #lc-wrap.lecteur{grid-template-columns:var(--lc-menu-w) 1fr;gap:18px;}
  #lc-wrap.lecteur.menu-replie{grid-template-columns:0 1fr;gap:0;}
}
.lecteur-menu-titre{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.lecteur-menu-titre b{font-size:15px;line-height:1.25;}

/* Petit bouton rond, pour les commandes qui ne doivent pas prendre de place */
.lc-rond{
  flex-shrink:0;width:28px;height:28px;padding:0;border-radius:50%;
  display:inline-grid;place-items:center;cursor:pointer;font:inherit;font-weight:800;
  background:#fff;border:1.5px solid var(--line);color:var(--ink-soft);
  transition:background .15s,color .15s,border-color .15s;
}
.lc-rond:hover{color:var(--bl-700);border-color:var(--bl-400);background:var(--bl-050);}
.lc-rond svg{width:14px;height:14px;}

/* « Masquer le plan » : sur la séparation des colonnes */
#lc-wrap .lc-toggle{
  position:absolute;z-index:6;top:16px;transform:none;margin:0;
  inset-inline-start:calc(var(--lc-menu-w) + 9px - 14px);
  width:28px;height:28px;padding:0;border-radius:50%;box-shadow:var(--sh);
}
#lc-wrap .lc-toggle svg{transition:transform .2s;}
#lc-wrap.menu-replie .lc-toggle{inset-inline-start:-14px;}
#lc-wrap.menu-replie .lc-toggle svg{transform:rotate(180deg);}
[dir="rtl"] #lc-wrap .lc-toggle svg{transform:rotate(180deg);}
[dir="rtl"] #lc-wrap.menu-replie .lc-toggle svg{transform:none;}
@media (max-width:900px){ #lc-wrap .lc-toggle{display:none;} }

/* ---- Plein écran : tout l'écran pour le cours ---- */
body.lecteur-plein .app-content{padding:8px 10px !important;max-width:none;}
body.lecteur-plein #lc-wrap.lecteur{--lc-menu-w:250px;gap:10px;}
body.lecteur-plein .lecteur-menu,
body.lecteur-plein .lecteur-contenu{padding:14px 16px;}
body.lecteur-plein .lc-tete{margin-bottom:6px;}
body.lecteur-plein .lc-tete h2{font-size:18px;}

/* ---- Multi-affichage : il prend la place, le zoom agrandit ---- */
@media (min-width:901px){
  #lc-wrap .lecteur-contenu.avec-multi > #lc-compare{flex:1.5 1 0;max-height:none;min-height:0;display:flex;flex-direction:column;}
  #lc-wrap .lecteur-contenu.avec-multi > #lc-sections{flex:1 1 0;}
  #lc-wrap .lecteur-contenu.multi-max > #lc-sections,
  #lc-wrap .lecteur-contenu.multi-max > .lc-onglets,
  #lc-wrap .lecteur-contenu.multi-max > .lc-sous-onglets{display:none;}
  #lc-wrap .lecteur-contenu.avec-multi .lc-compare-grille{flex:1;min-height:0;margin-bottom:8px;}
  #lc-wrap .lecteur-contenu.avec-multi .lc-compare-volet{display:flex;flex-direction:column;min-height:0;}
  #lc-wrap .lecteur-contenu.avec-multi .lc-compare-volet > iframe,
  #lc-wrap .lecteur-contenu.avec-multi .lc-compare-volet > video,
  #lc-wrap .lecteur-contenu.avec-multi .lc-compare-volet > .lc-compare-texte{flex:1;min-height:0;height:auto;}
  #lc-wrap .lecteur-contenu.avec-multi .lc-compare-texte{overflow:auto;}
}
.lc-compare-cmd{display:flex;gap:14px;}
.lc-compare-tete{gap:10px;}
.lc-compare-tete > b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lc-zoom{display:inline-flex;align-items:center;gap:4px;}
.lc-zoom .lc-rond{width:24px;height:24px;font-size:14px;}
.lc-zoom-val{
  min-width:48px;border:none;background:none;cursor:pointer;font:inherit;
  font-family:var(--f-num);font-size:12px;font-weight:700;color:var(--ink-soft);
}
.lc-compare-texte{line-height:1.65;transition:font-size .15s;}

/* ---- Présentation des pages de cours : une seule couleur, celle du site ----
   Même teinte dans toutes les rubriques. La lisibilité vient de la
   hiérarchie (titres, espacements, cartes), pas de couleurs différentes. */

/* Titre de la section affichée, souligné discrètement */
.lc-section-titre{
  font-size:17px;font-weight:800;color:var(--ink);
  padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.lc-section-titre .faint{font-weight:600;}

/* Ressources : cartes régulières, bien aérées */
.lc-section .lc-texte{padding:16px 18px;line-height:1.7;}
.lc-section > * + *{margin-top:12px;}

/* Énoncé puis corrigé : deux blocs neutres, séparés nettement */
.lc-exo-titre{
  color:var(--ink-soft);font-size:11.5px;letter-spacing:.06em;
  display:flex;align-items:center;gap:8px;
}
.lc-exo-titre::after{content:"";flex:1;height:1px;background:var(--line);}
.lc-exo-bloc.corrige{border-top:none;padding-top:6px;}
.lc-exo-bloc.corrige .lc-exo-titre{color:var(--ink-soft);}

/* Mots-clés d'un exercice */
.lc-mots{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 14px;}
.lc-mots span{
  font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--bl-050);color:var(--bl-700);border:1px solid var(--bl-100);
}
.adm-mots{margin-top:6px;width:100%;font-size:12.5px;}

/* Section vide : un message sobre plutôt qu'un grand vide */
.lc-section .hint{
  padding:18px;border:1.5px dashed var(--line);border-radius:var(--r);
  text-align:center;color:var(--ink-faint);
}

[data-theme="nuit"] .lc-mots span{background:#172033;color:#93C5FD;border-color:#2E3A4E;}
[data-theme="nuit"] .lc-rond{background:#1B2436;border-color:var(--line-strong);color:var(--ink);}

/* ---- Vidéo : au format 16/9, la plus haute possible ----
   Avant, la hauteur était plafonnée alors que la largeur restait grande :
   l'image paraissait écrasée. La largeur découle maintenant de la hauteur
   disponible dans la colonne, en gardant le format 16/9. */
.lc-section .lc-video{
  width:min(100%, max(360px, calc((var(--lc-h, 640px) - 230px) * 16 / 9)));
  aspect-ratio:16 / 9;margin:0 auto 14px;background:#000;
}
.lc-section .lc-video video{width:100%;height:100%;max-height:none;object-fit:contain;}
@media (max-width:900px){ .lc-section .lc-video{width:100%;} }
#se-tete .lc-video{width:min(100%, 820px);aspect-ratio:16 / 9;margin:0 auto;background:#000;}
#se-tete .lc-video video{width:100%;height:100%;max-height:none;object-fit:contain;}
/* La flèche de base pointe vers l'avant : le retour la retourne. */
.lecteur-menu-titre .lc-retour-matieres svg{transform:rotate(180deg);}
[dir="rtl"] .lecteur-menu-titre .lc-retour-matieres svg{transform:none;}
/* L'ancien bouton du plan réservait 52 px au-dessus du titre : il vit
   désormais sur la séparation, cette réserve n'a plus lieu d'être. */
#lc-wrap.menu-replie .lecteur-contenu{padding-top:24px;}
body.lecteur-plein #lc-wrap.menu-replie .lecteur-contenu{padding-top:14px;}
/* Plan visible : la flèche pointe vers le plan (le replier) ;
   plan masqué : elle pointe vers le contenu (le rouvrir). */
#lc-wrap .lc-toggle svg{transform:rotate(180deg);}
#lc-wrap.menu-replie .lc-toggle svg{transform:none;}
[dir="rtl"] #lc-wrap .lc-toggle svg{transform:none;}
[dir="rtl"] #lc-wrap.menu-replie .lc-toggle svg{transform:rotate(180deg);}
#lc-wrap.menu-replie .lc-toggle{inset-inline-start:-12px;}
/* Titres du plan : passage à la ligne plutôt que coupure, un intitulé
   tronqué ne permet pas de choisir la bonne notion. */
.lecteur-menu .lc-notion{align-items:flex-start;}
.lecteur-menu .lc-notion-t{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;text-align:start;}
.lecteur-menu .lc-notion-n{flex-shrink:0;margin-top:1px;}

/* Ajout d'un élément, en tête de la liste d'administration */
.adm-nouveau{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:14px 0 18px;padding:12px;border:1.5px dashed var(--line-strong,var(--line));
  border-radius:var(--r);background:var(--paper-soft);
}
.adm-nouveau input{flex:1;min-width:200px;}
.adm-nouveau .btn svg{width:14px;height:14px;}

/* Respiration entre un titre et son contenu */
.lc-section-titre{margin-bottom:22px;}
.lc-mots{margin:-10px 0 20px;}
.lc-exo-bloc{margin-bottom:0;}
.lc-exo-bloc + .lc-exo-bloc{margin-top:26px;}
.lc-exo-titre{margin:0 0 12px;}

/* Vidéo : format 16/9 conservé, mais taille modérée. Elle ne doit pas
   envahir la page : 640 px de large au plus (360 px de haut), 820 px en
   plein écran, et jamais plus de la moitié de la hauteur disponible. */
.lc-section .lc-video{
  width:min(100%, 640px, calc((var(--lc-h, 640px) * 0.5) * 16 / 9));
  aspect-ratio:16 / 9;margin:0 auto 16px;
}
body.lecteur-plein .lc-section .lc-video{
  width:min(100%, 820px, calc((var(--lc-h, 700px) * 0.55) * 16 / 9));
}
@media (max-width:900px){ .lc-section .lc-video{width:100%;} }

/* Notion-titre : liste de ses sous-notions, cliquables */
.lc-sommaire{display:flex;flex-direction:column;gap:6px;}
.lc-sommaire-lien{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);
  background:#fff;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;text-align:start;
}
.lc-sommaire-lien:hover{border-color:var(--bl-300,var(--bl-200));background:var(--bl-050);}
.lc-sommaire-lien svg{width:14px;height:14px;color:var(--ink-faint);flex-shrink:0;}
[dir="rtl"] .lc-sommaire-lien svg{transform:rotate(180deg);}
[data-theme="nuit"] .lc-sommaire-lien{background:#151C2A;border-color:var(--line);}

/* Diffusion vers d'autres filières : repliable */
.ct-cibles-pli > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;}
.ct-cibles-pli > summary::-webkit-details-marker{display:none;}
.ct-cibles-pli > summary::after{content:"▾";margin-inline-start:auto;color:var(--ink-faint);transition:transform .15s;}
.ct-cibles-pli:not([open]) > summary::after{transform:rotate(-90deg);}
[dir="rtl"] .ct-cibles-pli:not([open]) > summary::after{transform:rotate(90deg);}

/* Mots-clés : un vrai espace sous le titre de l'exercice */
.lc-mots{margin:0 0 20px;}

/* Élément d'administration pliable : en-tête seul, corps à la demande */
.adm-section .adm-section-corps{display:none;padding-top:10px;}
.adm-section.ouverte .adm-section-corps{display:block;}
.adm-section-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.adm-section-titre{cursor:pointer;flex:1;min-width:140px;}
.adm-nb{font-size:12px;}
.adm-plier svg{transition:transform .15s;transform:rotate(0deg);}
.adm-section.ouverte .adm-plier svg{transform:rotate(90deg);}
[dir="rtl"] .adm-plier svg{transform:rotate(180deg);}
[dir="rtl"] .adm-section.ouverte .adm-plier svg{transform:rotate(90deg);}
.ct-cible input[disabled]:checked{opacity:1;accent-color:var(--bl-600);}

/* Saisie d'une sous-notion, intégrée à l'élément */
.adm-sous-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 2px;}
.adm-sous-form[hidden]{display:none;}
.adm-sous-form input{flex:1;min-width:200px;}

/* Élément sans ressource : même présentation que les autres, car un titre
   seul est un choix légitime. Il n'est simplement pas cliquable. */
.lc-notion.sans-contenu{cursor:default;pointer-events:none;}

/* Titre d'une ressource vidéo, au-dessus du lecteur */
.lc-res-titre{
  display:flex;align-items:center;gap:7px;margin:0 0 8px;
  font-size:13.5px;font-weight:700;color:var(--ink);
}
.lc-res-titre svg{width:15px;height:15px;color:var(--ink-faint);flex-shrink:0;}

/* Invitation devant les mots-clés */
.lc-mots-intro{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--ink-faint);
  background:none;border:none;padding:0;
}
.lc-mots-intro svg{width:13px;height:13px;}
/* Séance en direct en cours : bouton bien visible dans l'en-tête du chapitre */
.lc-direct{animation:pulseDirect 2.4s ease-in-out infinite;}
@keyframes pulseDirect{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.35);}50%{box-shadow:0 0 0 6px rgba(37,99,235,0);}}
/* Chapitres traités, une liste par filière du créneau */
.ens-filiere + .ens-filiere{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
/* Séance visible mais non ouvrable : offre Live requise */
.live-item.verrouille{opacity:.75;cursor:default;}
.live-item.verrouille .btn{pointer-events:none;}
/* Séance du jour déjà passée : gardée dans la liste, mise en retrait */
.live-item.passee .live-date,
.live-item.passee .live-info b{color:var(--ink-soft);}
/*
 * Pastille de date, la nuit : le fond et le chiffre reprenaient deux
 * bleus devenus presque identiques, le jour disparaissait.
 */
[data-theme="nuit"] .live-date{background:#1E3A5F;border-color:#2E4468;}
[data-theme="nuit"] .live-date b{color:#BFDBFE;}
[data-theme="nuit"] .live-date span{color:#93A9C9;}
[data-theme="nuit"] .live-item.passee .live-date{background:#243044;}
[data-theme="nuit"] .live-item.passee .live-date b{color:var(--ink-soft);}

/* Séance en cours : appel clair à rejoindre la salle */
.seance-direct{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px;margin-bottom:14px;border-radius:var(--r);
  background:var(--bl-050);border:1.5px solid var(--bl-200);
}
.seance-direct-txt{flex:1;min-width:180px;display:flex;flex-direction:column;line-height:1.4;}
.seance-direct-txt span{font-size:12.5px;color:var(--ink-soft);}
.seance-pastille{
  width:11px;height:11px;border-radius:50%;background:var(--err,#DC2626);flex-shrink:0;
  animation:pulseDirect 1.8s ease-in-out infinite;
}
@keyframes pulseDirect{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.45);}50%{box-shadow:0 0 0 7px rgba(220,38,38,0);}}

/* Enregistrement pas encore disponible */
.seance-attente{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:26px;border:1.5px dashed var(--line);border-radius:var(--r);
  color:var(--ink-faint);font-size:13.5px;text-align:center;
}
.seance-attente svg{width:20px;height:20px;flex-shrink:0;}
[data-theme="nuit"] .seance-direct{background:#172033;border-color:var(--line-strong);}

/* Panneau repliable générique (chapitres traités, etc.) */
.pli-panneau > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;}
.pli-panneau > summary::-webkit-details-marker{display:none;}
.pli-panneau > summary::after{content:"▾";margin-inline-start:auto;color:var(--ink-faint);transition:transform .15s;}
.pli-panneau:not([open]) > summary::after{transform:rotate(-90deg);}
[dir="rtl"] .pli-panneau:not([open]) > summary::after{transform:rotate(90deg);}
.pli-panneau > summary .panel-head,
.pli-panneau > summary h2{margin:0;}
/* Séance pas encore commencée ou déjà finie : même encadré, sans le signal du direct */
.seance-direct.calme{background:var(--paper-soft);border-color:var(--line);}
.seance-direct .btn[disabled]{opacity:.55;cursor:not-allowed;}
.seance-direct .btn[disabled] svg{width:14px;height:14px;}

/* Fil de discussion : largeur fixe, messages qui reviennent à la ligne.
   Une colonne de grille grandit par défaut avec son contenu : un long
   message élargissait donc tout le bloc. min-width:0 l'en empêche, et le
   texte est coupé même sans espace (adresse, suite de caractères). */
.two-col > *{min-width:0;}
.chat-fil{min-width:0;}
.chat-msg{
  max-width:82%;min-width:0;
  overflow-wrap:anywhere;word-break:break-word;
}
/* Les retours à la ligne du message sont conservés, mais sur le corps
   seul : appliqué à la bulle entière, le saut de ligne du gabarit entre
   l'auteur et le message apparaissait comme une ligne vide. */
.chat-msg > span{display:block;white-space:pre-wrap;margin-top:1px;}
.chat-msg b, .chat-msg time{overflow-wrap:anywhere;}
.lc-msg{overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap;}

/* Fil de discussion : une date par journée, l'heure près de l'auteur */
.chat-jour{
  align-self:center;font-size:11px;font-weight:700;color:var(--ink-faint);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 12px;margin:4px 0;
}
.chat-msg b{display:flex;align-items:baseline;gap:8px;justify-content:space-between;}
.chat-msg b time{display:inline;font-size:10.5px;opacity:.7;margin:0;flex-shrink:0;}
[data-theme="nuit"] .chat-jour{background:#1B2436;border-color:var(--line-strong);}

/* Navigation d'une notion à l'autre, sous le contenu */
.lc-nav{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
}
.lc-nav-btn{
  display:flex;align-items:center;gap:8px;width:auto;
  padding:9px 14px;border:1.5px solid var(--line);border-radius:var(--r);
  background:#fff;cursor:pointer;font:inherit;color:var(--ink);text-align:start;
}
.lc-nav-btn.suivant{margin-inline-start:auto;text-align:end;}
.lc-nav-btn:hover{border-color:var(--bl-300,var(--bl-200));background:var(--bl-050);}
.lc-nav-btn span{white-space:nowrap;font-weight:700;font-size:13.5px;}
.lc-nav-btn svg{width:14px;height:14px;color:var(--ink-faint);flex-shrink:0;}
.lc-nav-btn:not(.suivant) svg{transform:rotate(180deg);}
[dir="rtl"] .lc-nav-btn:not(.suivant) svg{transform:none;}
[dir="rtl"] .lc-nav-btn.suivant svg{transform:rotate(180deg);}
[data-theme="nuit"] .lc-nav-btn{background:#151C2A;border-color:var(--line);}

/* Grille des remises annuelles, un mois par case */
.remises-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:10px;}
.remise-mois{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--ink-soft);}
.remise-mois.ferme{opacity:.6;}
.remise-mois input{width:100%;}
/* Étiquette d'une vignette : cadenas et texte sur la même ligne */
.subj-tile-tag{white-space:nowrap;display:inline-flex;align-items:center;gap:5px;}
.subj-tile-tag svg{width:12px;height:12px;flex-shrink:0;}

/* Séances centrées dans la case du calendrier */
.cal-evts{display:flex;flex-direction:column;gap:4px;justify-content:center;flex:1;min-height:0;}
.cal-evt-corps{text-align:center;align-items:center;}
.cal-titre, .cal-prof{max-width:100%;}

/* Panneau de survol d'une séance */
.cal-evt{position:relative;overflow:visible;}
.cal-apercu{
  position:absolute;bottom:calc(100% + 8px);inset-inline-start:50%;transform:translateX(-50%) scale(.96);
  z-index:40;width:240px;padding:12px 14px;border-radius:var(--r);
  background:#fff;border:1.5px solid var(--line-strong,var(--line));
  display:flex;flex-direction:column;gap:4px;text-align:start;color:var(--ink);
  font-size:12.5px;line-height:1.45;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;
}
.cal-apercu b{font-size:13.5px;}
.cal-apercu span{color:var(--ink-soft);}
.cal-apercu-act{margin-top:8px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.cal-apercu-act .btn{width:100%;justify-content:center;}
.apercu-etat{font-size:11.5px;color:var(--ink-faint);}
.cal-evt:hover .cal-apercu, .cal-evt:focus-within .cal-apercu{
  opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1);
}
[dir="rtl"] .cal-apercu{transform:translateX(50%) scale(.96);}
[dir="rtl"] .cal-evt:hover .cal-apercu{transform:translateX(50%) scale(1);}
/*
 * Le panneau ne doit pas sortir de l'écran. Centré sur une case de
 * calendrier large d'une cinquantaine de pixels, il débordait aux deux
 * bords de la grille : à gauche le lundi, à droite le dimanche. Dans ces
 * deux colonnes, il s'aligne donc sur la case au lieu de rester centré.
 */
.cal-grille:not(.vue-jour) .cal-case:nth-child(7n+1) .cal-apercu{
  inset-inline-start:0;transform:translateX(0) scale(.96);}
.cal-grille:not(.vue-jour) .cal-case:nth-child(7n+1) .cal-evt:hover .cal-apercu,
.cal-grille:not(.vue-jour) .cal-case:nth-child(7n+1) .cal-evt:focus-within .cal-apercu{
  transform:translateX(0) scale(1);}
.cal-grille:not(.vue-jour) .cal-case:nth-child(7n) .cal-apercu{
  inset-inline-start:auto;inset-inline-end:0;transform:translateX(0) scale(.96);}
.cal-grille:not(.vue-jour) .cal-case:nth-child(7n) .cal-evt:hover .cal-apercu,
.cal-grille:not(.vue-jour) .cal-case:nth-child(7n) .cal-evt:focus-within .cal-apercu{
  transform:translateX(0) scale(1);}
/* Écran tactile : pas de survol, et le détail s'ouvre déjà au toucher. */
@media (hover:none),(max-width:860px){ .cal-apercu{display:none;} }
[data-theme="nuit"] .cal-apercu{background:#1B2436;border-color:var(--line-strong);}

/* Formulaire d'administration en blocs : grille régulière, champs alignés */
.adm-bloc{
  border:1.5px solid var(--line);border-radius:var(--r);
  padding:14px 16px 16px;margin-bottom:16px;
}
.adm-bloc > legend{
  padding:0 8px;font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-soft);
}
.adm-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px;align-items:start;}
.adm-grille > .field{margin:0;min-width:0;}
.adm-grille > .field.large{grid-column:span 2;}
.adm-grille > .field > label{display:block;margin-bottom:5px;}
.adm-grille input, .adm-grille select, .adm-grille .select{width:100%;}
.adm-grille .hint{margin-top:6px;font-size:11.5px;}
.adm-grille .check-row{margin:0;}
@media (max-width:700px){ .adm-grille > .field.large{grid-column:span 1;} }
[data-theme="nuit"] .adm-bloc{border-color:var(--line-strong);}
/* L'attribut hidden doit l'emporter sur l'affichage en grille */
.adm-grille[hidden]{display:none;}


/* ============================================================
   CALENDRIER : LES SÉANCES REMPLISSENT LEUR CELLULE
   Une séance seule occupe toute la hauteur ; plusieurs séances se
   partagent l'espace à parts égales. Plus de barre de défilement, qui
   masquait une partie du contenu et alourdissait la grille.
   ============================================================ */
/* Grille à lignes égales : « grid-auto-rows:1fr » garantit des parts
   strictement identiques, ce que flex ne faisait pas — la hauteur du
   contenu de chaque élément influençait encore sa part. */
.cal-evts{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:3px;flex:1;min-height:0;overflow:hidden;}
/* height:0 avec flex:1 impose la part exacte : sans cela, la hauteur du
   contenu faisait un plancher et la cellule débordait à trois éléments. */
.cal-evts > .cal-evt{min-height:0;height:auto;overflow:hidden;align-items:center;}
.cal-evt-corps{justify-content:center;min-height:0;overflow:hidden;}
/*
 * Le bouton portait height:100% alors que son parent est en hauteur
 * automatique : la valeur retombait sur zéro et le texte se retrouvait
 * rogné en haut et en bas dès qu'une cellule portait trois séances.
 * On laisse sa hauteur libre et on le centre dans la part qui lui
 * revient.
 */
.cal-evts > .cal-evt > .cal-evt-corps{height:auto;align-self:center;}

/* Deux séances ou plus : le texte se resserre pour rester lisible. */
.cal-evts > .cal-evt:nth-child(n+3) ~ .cal-evt .cal-evt-corps,
.cal-evts > .cal-evt:nth-child(n+3) .cal-evt-corps{padding:2px 6px;font-size:10px;}
.cal-evts > .cal-evt:nth-child(n+4) ~ .cal-evt .cal-prof,
.cal-evts > .cal-evt:nth-child(n+4) .cal-prof{display:none;}

/* En vue mois, l'heure et le titre partagent déjà une ligne : on garde
   ce comportement quel que soit le nombre de séances. */
.cal-grille.vue-mois .cal-evt-corps{align-items:center;}
/* Pastille « +N » : elle partage l'espace avec les séances */
.cal-reste{
  display:grid;place-items:center;border:1px dashed var(--line-strong,var(--line));
  background:transparent;color:var(--ink-soft);cursor:pointer;font:inherit;
  font-size:10.5px;font-weight:700;border-radius:7px;padding:0 6px;
}
.cal-reste:hover{background:var(--bl-050);color:var(--bl-700);border-color:var(--bl-300,var(--bl-200));}

/* Édition d'une séance déjà programmée, dépliée sous sa ligne. */
.sn-edit{
  border:1.5px solid var(--line-strong,var(--line));border-radius:var(--r);
  padding:14px 16px 16px;margin:2px 0 14px;background:var(--paper-soft);
}
.sn-edit[hidden]{display:none;}
[data-theme="nuit"] .sn-edit{background:#1B2436;border-color:var(--line-strong);}

/* Une ligne par section, avec l'enseignant qui lui est affecté.
   Colonnes fixes : les libellés de sections n'ont pas la même longueur
   et les sélecteurs se retrouvaient en escalier. */
.se-section-ligne{
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,260px);
  align-items:center;gap:10px;margin-bottom:8px;
}
.se-section-ligne .pill-check{min-width:0;}
.se-section-ligne .pill-check span{overflow:hidden;text-overflow:ellipsis;}
@media (max-width:640px){
  .se-section-ligne{grid-template-columns:1fr;}
}


/* Séances non incluses : l'icône et la phrase tiennent sur une ligne,
   le cadenas restant aligné sur le texte et non au-dessus. */
.live-sansacces{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-size:12.5px;color:var(--ink-soft);line-height:1.35;
}
.live-sansacces svg{width:15px;height:15px;flex-shrink:0;color:var(--ink-faint);}


/* Thème sombre : la case à cocher elle-même restait blanche. */
[data-theme="nuit"] .pill-check input{background:#0F1520;border-color:#3A4660;}
[data-theme="nuit"] .pill-check input:checked{background:var(--bl-600);border-color:var(--bl-600);}
[data-theme="nuit"] .pill-check input:disabled{background:#1B2436;border-color:var(--line);}

/* Stage intensif rappelé dans l'abonnement. */
.mention-stage{
  display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line);font-size:13px;
}
.mention-stage svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--or-600);}
.option-stage-row span{display:flex;align-items:center;gap:7px;}
.option-stage-row svg{width:15px;height:15px;color:var(--or-600);}
[data-theme="nuit"] .mention-stage svg,
[data-theme="nuit"] .option-stage-row svg{color:#FDE68A;}

/*
 * Séances de l'enseignant : barre de filtres et pagination.
 *
 * La barre s'enroule plutôt que de déborder : sur un téléphone, les
 * quatre contrôles passent les uns sous les autres, et le champ de
 * recherche prend la largeur restante dès qu'il y en a.
 */
.es-filtres{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px;
}
.es-filtres > *{height:38px;box-sizing:border-box;margin-bottom:0;}
.es-filtres .search-wrap{
  display:flex;align-items:center;padding-block:0;flex:1 1 220px;min-width:0;
}
.es-filtres .search-wrap input{height:100%;border:none;background:transparent;min-width:0;}
.es-filtres .select{flex:0 1 190px;min-width:0;}
.es-filtres .pill-check{display:inline-flex;align-items:center;white-space:nowrap;}
.es-filtres .link-btn{flex:0 0 auto;}

.es-pages{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px;margin-top:16px;
}
.es-pages .btn{min-width:38px;}
@media (max-width: 560px){
  .es-filtres .select{flex:1 1 100%;}
  .es-pages .btn{min-width:34px;padding-inline:9px;}
}

/*
 * Vue mois du calendrier sur un téléphone.
 *
 * Posé en fin de feuille, et avec la même spécificité que les règles de
 * grille plus haut : celles-ci imposent une grille d'événements étirés
 * sur toute la hauteur de la case, qu'il faut défaire ici.
 *
 * Sept colonnes sur 390 pixels laissent 45 pixels par jour. Le titre
 * d'une séance y était coupé dès le premier mot, le bouton « + » d'une
 * case mesurait 18 pixels de côté, et viser la bonne journée relevait de
 * la chance. On renonce donc à écrire dans les cases : chaque événement
 * devient une pastille de la couleur de sa matière, et la journée entière
 * ouvre sa liste. La vue mois redevient ce qu'elle doit être sur un petit
 * écran, un aperçu de la densité du mois.
 *
 * Les vues semaine et jour gardent leur texte : elles ont la place.
 */
@media (max-width: 700px){
  .cal-grille.vue-mois .cal-case{min-height:58px;gap:4px;}
  .cal-grille.vue-mois .cal-case:not(.vide){cursor:pointer;}
  .cal-grille.vue-mois .cal-num{font-size:13px;}
  .cal-grille.vue-mois .cal-evts{
    display:flex;flex-direction:row;flex-wrap:wrap;gap:3px;
    align-content:flex-start;align-items:flex-start;overflow:hidden;
  }
  /* La pastille garde la couleur de fond posée par sa matière. */
  .cal-grille.vue-mois .cal-evts > .cal-evt{
    width:8px;height:8px;min-height:0;border-radius:50%;
    padding:0;flex:0 0 auto;align-self:flex-start;overflow:hidden;
  }
  .cal-grille.vue-mois .cal-evt-corps,
  .cal-grille.vue-mois .cal-rejoindre{display:none;}
  /* « +2 autres » ouvre la journée : c'est une vraie action, elle doit
     pouvoir être visée au doigt. */
  .cal-grille.vue-mois .cal-evts > .cal-reste{
    width:auto;height:auto;min-height:30px;border-radius:7px;padding:0 7px;
    font-size:10px;font-weight:700;line-height:30px;
  }
  /* Le rappel s'ajoute depuis la journée ouverte, où le bouton a la
     place d'être visé. */
  .cal-grille.vue-mois .cal-plus{display:none;}
}

/*
 * Liens d'action au doigt.
 *
 * Un « lien bouton » posé dans une phrase ne mesure que la hauteur de sa
 * ligne, une vingtaine de pixels : suffisant à la souris, trop juste au
 * doigt. On lui donne de la marge haute et basse sur petit écran, sans
 * toucher à sa place dans le texte, puisqu'il reste en ligne.
 */
@media (max-width: 700px){
  .link-btn{
    display:inline-flex;align-items:center;min-height:30px;
    vertical-align:middle;
  }
}

/*
 * Lignes de liste sur très petit écran.
 *
 * `.list-row` pose le libellé et ses actions côte à côte. Sous 480
 * pixels, la colonne d'actions se réduisait à une centaine de pixels :
 * « Modifier » et « Supprimer » s'y repliaient lettre par lettre, en deux
 * colonnes verticales qui se chevauchaient. Les actions passent donc sous
 * le libellé, alignées à gauche et à la bonne hauteur pour le doigt.
 */
@media (max-width: 480px){
  .list-row{
    flex-direction:column;align-items:stretch;gap:8px;
  }
  .list-row > span:last-child{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    justify-content:flex-start;
  }
  .list-row .link-btn{min-height:32px;}
}

/*
 * Carte de séance, côté enseignant, sur petit écran.
 *
 * Les deux actions (« Documents et échanges », « Ouvrir la salle »)
 * tenaient sur une seule ligne qui dépassait du cadre : le second bouton
 * se retrouvait coupé au bord droit. Elles occupent maintenant toute la
 * largeur sous les informations, et se partagent la ligne quand elle
 * suffit.
 */
@media (max-width: 560px){
  .seance-action{
    flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;
  }
  .seance-action > *{flex:1 1 150px;justify-content:center;}
  .seance-info{min-width:0;flex:1 1 140px;}
}

/*
 * Lecteur : empilement sur petit écran.
 *
 * Le bloc « LECTEUR : menu repliable » redéclare `grid-template-columns`
 * plus bas dans la feuille, à spécificité égale : il écrasait donc
 * l'empilement prévu plus haut pour les écrans étroits. Le panneau de
 * contenu se retrouvait poussé à 338 px d'un écran de 390, c'est-à-dire
 * hors cadre, dans le lecteur de l'élève comme dans l'éditeur de contenu
 * de l'administration. On rétablit l'empilement ici, après les deux
 * déclarations, et jusque dans l'état replié.
 */
@media (max-width: 900px){
  .lecteur,
  .lecteur.menu-replie{
    grid-template-columns:1fr;gap:18px;
  }
  .lecteur.menu-replie .lecteur-menu{
    opacity:1;pointer-events:auto;
  }
  .lecteur-menu{position:static;max-height:none;}
}

/*
 * Segment « Comptant / Fractionné » dans une carte d'offre.
 *
 * Plus compact que le segment du bandeau de simulation, et centré sous
 * l'accroche : le clic et le montant qu'il change doivent rester côte à
 * côte. Il occupe toute la largeur sur les cartes étroites, pour que les
 * deux choix restent de la taille d'un doigt.
 */
.pay-seg{
  /* Positionné et élevé : la bulle qu'il contient doit passer au-dessus
     du prix et de la liste qui le suivent dans la carte, sinon leur
     texte se lisait au travers. */
  position:relative;z-index:5;
  display:flex;width:100%;margin:14px 0 2px;padding:3px;
  justify-content:center;
}
.pay-seg button{
  flex:1 1 0;padding:7px 10px;font-size:12.5px;white-space:nowrap;min-height:32px;
}
/* Place réservée au point d'information, pour que le libellé ne passe
   jamais dessous. Seulement quand il est là : sinon le libellé du
   bouton inactif paraîtrait décentré sans raison. */
.pay-seg button[data-pay="fractionne"].is-active{padding-inline-end:30px;}
.pay-bloc{display:block;}
.pay-bloc[hidden]{display:none;}
/* ---- Bouton d'information du fractionné, et sa bulle ----
   La bulle est accrochée au bouton : elle s'ouvre juste dessous et le
   suit, quelle que soit la largeur de la carte et le sens de lecture.
   Ouverte au clic, jamais au survol, qui n'existe pas sur un
   téléphone. */
/* Le point d'information se pose SUR le bouton « Fractionné », sans être
   dedans : un élément cliquable à l'intérieur d'un autre se laisse mal
   atteindre au clavier, et le clic aurait fait deux choses à la fois. */
.pay-info-hote{
  position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);
  /* Il n'a de sens qu'une fois le fractionné choisi : avant, l'élève
     n'a pas encore la question. */
  display:none;align-items:center;
}
.pay-seg button[data-pay="fractionne"].is-active ~ .pay-info-hote{display:inline-flex;}
/* Pastille ronde, posée sur un bouton devenu bleu : fond blanc et
   lettre bleue, sans quoi elle se serait fondue dans le bouton.
   Sélecteur doublé : `.pay-seg button` étirait la pastille sur toute la
   hauteur du segment et effaçait son fond. */
.pay-seg .pay-info{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:19px;height:19px;min-height:0;padding:0;margin:0;
  border-radius:50%;border:none;background:#fff;
  color:var(--bl-700);font-size:12px;font-weight:800;line-height:1;
  font-style:italic;font-family:Georgia,'Liberation Serif',serif;
  cursor:pointer;box-shadow:0 1px 3px rgba(11,42,94,.35);
  transition:background .15s,color .15s,transform .15s;
}
.pay-seg .pay-info:hover{transform:scale(1.1);}
.pay-seg .pay-info[aria-expanded="true"]{background:var(--or-400);color:#3A2A00;}
.pay-bulle{
  position:absolute;z-index:60;top:calc(100% + 10px);inset-inline-end:-8px;
  width:min(264px,calc(100vw - 56px));padding:12px 14px;
  background:var(--bl-900);color:#fff;border-radius:12px;
  font-size:12.5px;line-height:1.55;font-weight:500;text-align:start;
  /* Le bouton du segment interdit le retour à la ligne : la bulle, elle,
     doit s'étaler sur plusieurs lignes. */
  white-space:normal;
  box-shadow:0 10px 30px rgba(11,42,94,.3);
}
[dir="rtl"] .pay-bulle{line-height:1.8;}
.pay-bulle::before{
  content:"";position:absolute;top:-5px;inset-inline-end:15px;
  width:11px;height:11px;background:var(--bl-900);transform:rotate(45deg);
}
.pay-bulle[hidden]{display:none;}
/* La carte doit continuer de rogner ce qui dépasse : c'est ce rognage
   qui taille la bande « La plus complète » en coin. La bulle tient donc
   à l'intérieur de la carte, elle n'en sort jamais. */

/* Le taux du bonus, annoncé sur le bouton qui l'applique. */
.pay-seg .pay-off{
  display:inline-block;margin-inline-start:5px;font-size:11.5px;font-weight:800;
  color:var(--ok);
}
.pay-seg button.is-active .pay-off{color:#fff;opacity:.92;}
[data-theme="nuit"] .pay-seg{background:rgba(255,255,255,.04);}

/*
 * Effectifs d'une séance, côté enseignant.
 *
 * Une ligne par filière, le chiffre à droite et la barre entre les deux.
 * En direct, la barre dit d'un coup d'oeil si la salle est pleine : plus
 * vite qu'une division mentale entre deux phrases.
 */
.eff-liste{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
/* Grille plutôt que boîte souple : les barres de deux filières aux noms
   de longueurs différentes doivent commencer à la même abscisse, sinon
   l'oeil compare des longueurs qui ne partent pas du même point. */
.eff-ligne{display:grid;grid-template-columns:minmax(0,180px) 1fr auto;align-items:center;gap:12px;}
.eff-nom{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.eff-barre{
  height:8px;border-radius:999px;overflow:hidden;
  background:var(--bl-100,rgba(20,30,50,.08));
}
.eff-barre > i{display:block;height:100%;background:var(--bl-500,#2f6df6);border-radius:999px;
  transition:width .4s ease;}
.eff-chiffre{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:15px;}
[data-theme="nuit"] .eff-barre{background:rgba(233,240,252,.12);}
@media (max-width:520px){
  .eff-ligne{grid-template-columns:1fr auto;}
  .eff-barre{display:none;}
}

/*
 * Salle de séance, dépliée dans la fiche.
 *
 * Le cadre part d'une hauteur nulle et s'ouvre vers le bas. Une vidéo
 * qui surgit d'un coup fait sursauter et décale tout ce que l'élève
 * était en train de lire ; une ouverture d'une demi-seconde laisse l'oeil
 * suivre le mouvement.
 *
 * La hauteur finale est calculée en JavaScript, d'après la fenêtre, et
 * posée dans --salle-h : une salle figée à 560 px mangeait tout l'écran
 * d'un portable.
 *
 * Le SDK de Zoom a besoin d'un conteneur de taille réelle : c'est
 * pourquoi la page déplie le cadre AVANT de démarrer la réunion.
 */
.salle-cadre{
  --salle-h:0px;
  height:0;opacity:0;overflow:hidden;margin:0;
  transition:height .5s cubic-bezier(.22,.61,.36,1), opacity .45s ease, margin .5s ease;
}
.salle-cadre.ouverte{
  height:calc(var(--salle-h) + 34px);opacity:1;margin:14px 0 4px;
}
.salle-barre{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;min-height:26px;margin-bottom:8px;font-size:13px;
}
.salle-etat{color:var(--muted,#6b7a90);min-width:0;}
.salle-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
/* La place réservée dans la fiche : la vidéo vient se poser dessus. */
.salle-place{
  width:100%;height:var(--salle-h);
  border-radius:var(--r);
  background:var(--bl-050,rgba(20,30,50,.04));
}
[data-theme="nuit"] .salle-place{background:rgba(233,240,252,.06);}

/*
 * Le bloc de la réunion vit dans le <body>, jamais dans la fiche.
 *
 * Déplacer le conteneur d'une réunion en cours casserait son rendu. Il
 * reste donc au même endroit du document et change seulement de
 * position : collé sur la fiche quand l'élève y est, réduit dans un coin
 * quand il consulte autre chose. La séance ne s'interrompt pas.
 */
.salle-hote{
  position:absolute;z-index:40;
  border-radius:var(--r);overflow:hidden;
  /* Noir, comme la toile de Zoom : un fond bleu autour de la vidéo
     donnait l'impression d'un conteneur mal dimensionné. */
  background:#000;
  transition:box-shadow .3s ease;
}
.salle-hote .salle-zoom{width:100%;height:100%;}
.salle-hote .salle-mini-barre,
.salle-hote .salle-plein-barre{display:none;}

/*
 * Plein écran.
 *
 * C'est la page entière qui passe en plein écran, et non le conteneur de
 * la réunion : les panneaux de Zoom (discussion, participants, réglages)
 * sont posés à la racine du document, et le navigateur n'affiche que le
 * sous-arbre mis en plein écran. Isoler notre conteneur les faisait donc
 * disparaître.
 *
 * Le reste de l'interface est masqué, le conteneur occupe l'écran, et
 * les panneaux de Zoom restent affichables par-dessus. Les styles en
 * ligne posés par l'ancrage sur la fiche doivent céder, d'où les
 * `!important` : ils ne s'appliquent qu'ici.
 */
body.salle-plein{overflow:hidden;background:#000;}
body.salle-plein #app-root{display:none;}
body.salle-plein .salle-hote{
  position:fixed!important;top:0!important;left:0!important;
  width:100vw!important;height:100vh!important;
  border-radius:0;background:#000;z-index:300;
  display:flex;flex-direction:column;
}
body.salle-plein .salle-hote .salle-zoom{
  flex:1 1 auto;height:auto;min-height:0;
  /* La toile de Zoom garde ses proportions : on la centre plutôt que de
     la coller en haut à gauche avec du noir en dessous. */
  /* Étirés en largeur, centrés en hauteur : la barre d'outils de Zoom
     garde toute la largeur, et l'ensemble ne se colle pas en haut. */
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;
}
body.salle-plein .salle-hote .salle-plein-barre{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:8px 14px;background:#111c33;color:#e9f0fc;font-size:12.5px;
}
body.salle-plein .salle-hote .salle-mini-barre{display:none;}
body.salle-plein .salle-vues{margin-inline-end:auto;}

/* Choix de la disposition : intervenant, galerie, bandeau. */
.salle-vues{display:inline-flex;gap:4px;padding:2px;border-radius:999px;
  background:var(--bl-050,rgba(20,30,50,.06));}
.salle-vues button{
  border:0;cursor:pointer;border-radius:999px;background:transparent;
  padding:4px 10px;font-size:12px;font-weight:600;color:var(--ink-soft,#55617a);
}
.salle-vues button:hover{color:var(--ink,#16203a);}
.salle-vues button.is-on{background:#fff;color:var(--bl-600,#174ea6);box-shadow:var(--sh-sm,0 1px 2px rgba(8,15,30,.12));}
[data-theme="nuit"] .salle-vues{background:rgba(233,240,252,.08);}
[data-theme="nuit"] .salle-vues button.is-on{background:#1B2436;color:#cfe0ff;}
body.salle-plein .salle-vues{background:rgba(233,240,252,.12);}
body.salle-plein .salle-vues button{color:#c7d4ea;}
body.salle-plein .salle-vues button.is-on{background:rgba(233,240,252,.22);color:#fff;}

/* Remontée au-dessus de la bulle d'assistance, qui occupe déjà le coin. */
.salle-hote.mini{
  position:fixed;inset:auto 18px 92px auto;
  width:min(340px,86vw);height:auto;z-index:70;
  box-shadow:0 18px 40px rgba(8,15,30,.35);
}
.salle-hote.mini .salle-zoom{height:calc(min(340px,86vw) * 9 / 16);}
.salle-hote.mini .salle-mini-barre{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;background:#111c33;color:#e9f0fc;font-size:12.5px;
}
.salle-mini-titre{
  flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;
}
.salle-mini-btn{
  flex:0 0 auto;border:0;border-radius:999px;cursor:pointer;
  padding:4px 10px;font-size:12px;font-weight:600;
  background:rgba(233,240,252,.14);color:#e9f0fc;
}
.salle-mini-btn:hover{background:rgba(233,240,252,.24);}
.salle-mini-btn.ko{background:rgba(255,120,120,.18);color:#ffd7d7;}
.salle-mini-btn.ko:hover{background:rgba(255,120,120,.3);}

@media (max-width:520px){
  .salle-hote.mini{inset:auto 10px 84px auto;width:min(260px,76vw);}
  .salle-hote.mini .salle-zoom{height:calc(min(260px,76vw) * 9 / 16);}
}

/* Mouvement réduit demandé par le système : on ouvre sans animer. */
@media (prefers-reduced-motion:reduce){
  .salle-cadre{transition:none;}
}

/* Avancement de l'envoi d'une vidéo vers l'hébergeur. */
.adm-envoi{display:flex;align-items:center;gap:10px;width:100%;margin-top:8px;}
.adm-envoi-barre{
  flex:1 1 auto;height:8px;border-radius:999px;overflow:hidden;
  background:var(--bl-100,rgba(20,30,50,.08));
}
.adm-envoi-barre > i{display:block;height:100%;width:0;background:var(--bl-500,#2f6df6);
  border-radius:999px;transition:width .3s ease;}
.adm-envoi-txt{flex:0 0 auto;font-size:12.5px;color:var(--muted,#6b7a90);}
[data-theme="nuit"] .adm-envoi-barre{background:rgba(233,240,252,.12);}

/* ---- Fermeture d'un compte élève (administration) ---- */
.rv-ligne{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.rv-ligne:last-child{border-bottom:0;}
.rv-qui{display:flex;flex-direction:column;gap:2px;min-width:0;}
.rv-qui b{font-size:14px;}
.rv-qui span{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;}
.rv-motif{color:var(--err);}
.rv-ligne.ferme .rv-qui b{text-decoration:line-through;color:var(--ink-faint);}
.rv-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.rv-raison{
  width:190px;max-width:42vw;padding:7px 10px;font-size:12.5px;
  border:1.5px solid var(--line);border-radius:var(--r-sm,10px);background:#fff;color:var(--ink);
}
[data-theme="nuit"] .rv-raison{background:#1B2436;border-color:var(--line-strong);}
.btn.rv-fermer{background:var(--err);color:#fff;border-color:var(--err);}
.btn.rv-fermer:hover{filter:brightness(1.07);}
@media (max-width:680px){
  .rv-ligne{grid-template-columns:1fr;}
  .rv-act{justify-content:flex-start;}
  .rv-raison{width:100%;max-width:none;}
}

/* Effectif concerné, sur la carte de séance de l'enseignant. */
.seance-effectif{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:600;color:var(--bl-600,#174ea6);
}
.seance-effectif svg{width:14px;height:14px;}
[data-theme="nuit"] .seance-effectif{color:#9dc0ff;}

/* ---- Statistiques (administration) ---- */
.st-filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.st-filtres .pill-check{cursor:pointer;user-select:none;}

.st-tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px;}
.st-tuile{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r);
  padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0;
}
.st-tuile b{font-size:28px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums;}
.st-tuile-t{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);}
.st-tuile-d{font-size:12px;color:var(--ink-soft);}
[data-theme="nuit"] .st-tuile{background:#1B2436;border-color:var(--line-strong);}

.st-fig{margin:0;}
.st-fig figcaption{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.st-svg{width:100%;height:auto;display:block;margin-top:6px;}
.st-donut{width:180px;height:180px;flex:0 0 auto;}

.st-legende{display:flex;gap:14px;flex-wrap:wrap;list-style:none;padding:0;margin:8px 0 0;}
.st-legende li{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);}
.st-legende i,.st-legende-liste i{width:10px;height:10px;border-radius:3px;flex:0 0 auto;}

.st-anneau{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:10px;}
.st-legende-liste{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;min-width:0;}
.st-legende-liste li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);}
.st-legende-liste b{margin-inline-start:auto;color:var(--ink);font-variant-numeric:tabular-nums;}

.st-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.st-jauges{display:flex;flex-direction:column;gap:14px;margin-top:10px;}
.st-jauge-tete{display:flex;justify-content:space-between;gap:10px;font-size:13px;}
.st-jauge-tete b{font-variant-numeric:tabular-nums;}
.st-jauge-piste{height:8px;border-radius:999px;background:var(--bl-050,rgba(20,30,50,.06));overflow:hidden;margin:5px 0 3px;}
.st-jauge-piste > i{display:block;height:100%;border-radius:999px;}
.st-jauge-pied{font-size:11.5px;color:var(--ink-faint);}
[data-theme="nuit"] .st-jauge-piste{background:rgba(233,240,252,.1);}

/* Abonnements à échéance : une liste d'appels, pas un tableau. */
.st-echeances{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;}
.st-echeances li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;
}
.st-echeances li:last-child{border-bottom:0;}
.st-ech-qui{display:flex;flex-direction:column;min-width:0;}
.st-ech-qui .muted{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st-ech-quand{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto;text-align:end;}
.st-ech-quand b{font-variant-numeric:tabular-nums;}
.st-ech-quand .muted{font-size:11.5px;}

.st-tableau-cadre{overflow-x:auto;}
.st-tableau{width:100%;border-collapse:collapse;font-size:13px;}
.st-tableau th,.st-tableau td{padding:8px 10px;text-align:start;border-bottom:1px solid var(--line);white-space:nowrap;}
.st-tableau th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);}
.st-tableau td{font-variant-numeric:tabular-nums;color:var(--ink);}
.st-tableau tbody tr:hover{background:var(--bl-050,rgba(20,30,50,.03));}

@media (max-width:900px){
  .st-duo{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .st-anneau{justify-content:center;}
  .st-tuile b{font-size:24px;}
}

/* ---- Texte servi dans le HTML pour les moteurs de recherche ----
   Il porte le contenu de la page pour les robots qui n'exécutent pas
   le JavaScript. Les visiteurs, eux, n'ont pas à le voir : affiché, il
   montrait pendant plusieurs secondes une page de texte brut avant que
   l'interface ne se dessine.

   Il reste donc dans le document, lisible par un robot, mais hors du
   champ visuel. Une seule exception : si rien ne s'est affiché au bout
   de six secondes, c'est que le JavaScript a échoué ou n'arrive pas.
   Le texte reprend alors sa place, pour que le visiteur ait au moins le
   contenu et les liens des autres pages plutôt qu'une page blanche. */
#pre-rendu{animation:pre-rendu-secours .01s linear 6s forwards;}
@keyframes pre-rendu-secours{
  to{
    position:static;width:auto;height:auto;overflow:visible;
    clip:auto;white-space:normal;
    max-width:760px;margin:0 auto;padding:48px 24px;
  }
}
#pre-rendu h1{font-size:22px;line-height:1.35;color:var(--ink);margin:0 0 12px;}
#pre-rendu p{margin:0 0 8px;font-size:14px;color:var(--ink-faint);}
#pre-rendu nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;}
#pre-rendu nav a{color:var(--ink-faint);font-size:13px;}