/* =================================================================
   DAR EL OUD ETTOUNSI — style cinématographique « patrimonial »
   Charte : Midnight · Albâtre · Gingembre (Padauk décoratif, Palissandre pied de page)
   Typo : Bebas Neue (titres) · Inter (corps) · Amiri (arabe)
   ================================================================= */

:root{
  --midnight:#081F2C;
  --albatre:#FAFFF5;
  --gingembre:#FEFFD6;
  --padauk:#7D4045;
  --palissandre:#1B1210;

  --midnight-2:#0d2a3c;            /* variante claire pour survols */
  --albatre-soft:rgba(250,255,245,.72);
  --albatre-faint:rgba(250,255,245,.45);
  --maxw:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Mode jour/nuit — espace privé uniquement (voir html[data-theme="light"]
     body.lms plus bas et js/mon-compte.js::applyTheme). Valeurs par
     défaut = mode nuit actuel,
     inchangé partout ailleurs sur le site public. --gingembre reste tel
     quel : utilisé comme FOND des pastilles actives (toujours associé au
     texte --midnight, qui lui aussi ne change jamais) — --lms-accent sert
     uniquement quand le gingembre est utilisé en texte/icône/bordure, où
     sa teinte pâle serait illisible sur fond clair. */
  --lms-page-bg:var(--midnight);
  --lms-accent:var(--gingembre);
  --lms-surface-rgb:250,255,245;
  --lms-base-rgb:8,31,44;
  --lms-dropdown-bg:#0d2836;
  --lms-ok:#7fe0a8; --lms-ok-rgb:125,224,168;
  --lms-warn:#ffce8a; --lms-warn-rgb:255,206,138;
  --lms-err:#ff9a9a; --lms-err-rgb:255,154,154;
}

/* Police arabe de marque (charte) — titres arabes sur toutes les langues */
@font-face{
  font-family:'Arabswell';
  src:url('../assets/fonts/arabswell_1.ttf') format('truetype');
  font-display:swap;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--midnight);
  color:var(--albatre);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  zoom:1.08;           /* agrandissement global du site (~108%) */
}
img{display:block;max-width:100%}
/* Dissuasion du téléchargement des médias (photos, audio, vidéo) */
img,picture,video,audio{-webkit-user-drag:none;-khtml-user-drag:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px}
.ar{font-family:'Amiri',serif}

/* libellé en lettres espacées */
.eyebrow{
  font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gingembre);
}

/* ---------- BOUTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.92rem;font-weight:600;
  letter-spacing:.02em;padding:14px 30px;border-radius:3px;
  border:1.5px solid transparent;transition:.25s var(--ease);
}
.btn-solid{background:var(--gingembre);color:var(--midnight);border-color:var(--gingembre)}
.btn-solid:hover{background:#fff;border-color:#fff;transform:translateY(-2px)}
.btn-ghost{background:rgba(250,255,245,.04);color:var(--albatre);border-color:rgba(250,255,245,.55)}
.btn-ghost:hover{background:rgba(250,255,245,.12);border-color:var(--albatre);transform:translateY(-2px)}

/* =================================================================
   EN-TÊTE
   ================================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 48px;
  background:transparent;
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(8,31,44,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:12px 48px;
  border-bottom:1px solid rgba(250,255,245,.08);
}
.site-header .logo{height:88px;width:auto;transition:height .4s var(--ease)}
.site-header.scrolled .logo{height:66px}

.nav{display:flex;align-items:center;gap:19px}
.nav a{
  font-size:.86rem;font-weight:500;letter-spacing:.03em;color:var(--albatre);
  position:relative;padding:4px 0;transition:color .2s;white-space:nowrap;
}
.nav a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--gingembre);transition:width .25s var(--ease)}
.nav a:hover{color:var(--gingembre)}
.nav a:hover::after,.nav a.active::after{width:100%}
.nav a.btn-eleve{
  background:var(--gingembre);color:var(--midnight);
  font-weight:700;font-size:.86rem;letter-spacing:.02em;
  padding:10px 20px;border-radius:3px;transition:.25s var(--ease);white-space:nowrap;
}
.nav a.btn-eleve::after{display:none}
.nav a.btn-eleve:hover{background:#fff;color:var(--midnight);transform:translateY(-2px)}

/* Menu déroulant « Le malouf » (injecté par main.js) */
.nav-malouf{position:relative;display:flex;align-items:center}
.malouf-caret{font-size:.7em;opacity:.85;margin-inline-start:3px}
.malouf-menu{
  position:absolute;top:100%;left:0;margin-top:8px;min-width:212px;
  display:none;flex-direction:column;
  background:rgba(8,31,44,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(250,255,245,.12);border-radius:8px;padding:8px 6px;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.7);z-index:200;
}
.malouf-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-malouf:hover .malouf-menu{display:flex}
.malouf-menu a{padding:8px 16px;font-size:.85rem;white-space:nowrap;border-radius:4px}
.malouf-menu a::after{display:none}
.malouf-menu a:hover{color:var(--gingembre);background:rgba(250,255,245,.06)}
html[dir="rtl"] .malouf-menu{left:auto;right:0}

/* groupe de droite + sélecteur de langue */
.header-right{display:flex;align-items:center;gap:20px}
.lang{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;white-space:nowrap}
.lang a{color:var(--albatre-soft);transition:color .2s}
.lang a.on{color:var(--gingembre)}
.lang a:hover{color:var(--gingembre)}
.lang .sep{color:rgba(250,255,245,.28)}

.burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:6px;z-index:120}
.burger span{display:block;width:26px;height:2px;background:var(--albatre);transition:.3s}

/* =================================================================
   HERO
   ================================================================= */
.hero{position:relative;min-height:calc(100vh / 1.08);display:flex;align-items:flex-end;overflow:hidden;padding-top:150px}
.hero-bg{position:absolute;inset:0;z-index:1}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:0;transition:opacity 1.6s ease-in-out}
.hero-bg img.active{opacity:1;animation:kenburns 8s ease-out both}
@keyframes kenburns{from{transform:scale(1.07)}to{transform:scale(1)}}
/* deux dégradés Midnight : vertical + horizontal */
.hero::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to right, var(--midnight) 8%, rgba(8,31,44,.65) 42%, rgba(8,31,44,0) 78%),
    linear-gradient(to bottom, rgba(8,31,44,.55) 0%, rgba(8,31,44,0) 30%, rgba(8,31,44,.85) 88%, var(--midnight) 100%);
}
.medaillon{
  position:absolute;top:-40px;right:-60px;z-index:2;
  width:540px;max-width:46vw;opacity:.07;pointer-events:none;
  animation:float 16s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(22px) rotate(4deg)}}

.hero-content{position:relative;z-index:3;width:100%;padding:0 48px 92px;max-width:var(--maxw);margin:0 auto}
.hero-inner{max-width:680px;animation:rise 1s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.hero .eyebrow{display:block;margin-bottom:16px}
.hero-ar{font-family:'Arabswell','Amiri',serif;font-size:clamp(1.9rem,3.6vw,2.9rem);color:var(--gingembre);margin-bottom:10px;line-height:1.5;text-align:left;direction:rtl;margin-left:1em}
.hero h1{
  font-family:'Bebas Neue',sans-serif;font-weight:400;color:var(--albatre);
  font-size:clamp(2.8rem,5vw,4.6rem);line-height:.96;letter-spacing:.01em;margin-bottom:22px;
}
.hero p{font-size:1.18rem;color:var(--albatre-soft);max-width:520px;margin-bottom:34px;font-weight:300}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}

/* =================================================================
   RANGÉES / CARROUSELS
   ================================================================= */
.row{padding:46px 0}
.row:first-of-type{padding-top:72px}
.row-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px}
.row-head h2{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.02em;
  font-size:clamp(1.7rem,3vw,2.4rem);color:var(--albatre);
}
.seeall{font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--gingembre);white-space:nowrap;transition:.2s}
.seeall:hover{opacity:.7}

.track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  max-width:var(--maxw);margin:0 auto;
  padding:6px 48px 18px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.track::-webkit-scrollbar{display:none}

.card{
  position:relative;flex:0 0 320px;scroll-snap-align:start;
  border-radius:6px;overflow:hidden;background:var(--midnight-2);
  cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 50px -22px rgba(0,0,0,.8)}
.card .thumb{position:relative;height:210px;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .thumb img{transform:scale(1.09)}
.card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,31,44,0) 35%,rgba(8,31,44,.9) 100%)}
.card .body{padding:16px 18px 20px}
.card-title{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.4rem;letter-spacing:.02em;color:var(--albatre);line-height:1.05}
.card-sub{font-size:.84rem;color:var(--gingembre);margin-top:4px;font-weight:500}

/* Grille de cartes (cliquables, sans défilement horizontal) — pages instruments */
.icards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:var(--maxw);margin:0 auto;padding:6px 24px}
.icards .card{flex:none}
.tag{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--padauk);color:var(--gingembre);
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:2px;
}

/* =================================================================
   MANIFESTE
   ================================================================= */
.manifest{padding:120px 0;text-align:center;position:relative}
.manifest::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(125,64,69,.16),transparent 62%)}
.manifest .inner{position:relative;z-index:2;max-width:880px;margin:0 auto}
.manifest-ar{font-family:'Arabswell','Amiri',serif;font-size:clamp(2rem,4vw,3rem);color:var(--gingembre);margin-bottom:14px}
.manifest h2{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.01em;
  font-size:clamp(2.4rem,5vw,4rem);line-height:1;color:var(--albatre);margin-bottom:24px;
}
.manifest p{font-size:1.16rem;color:var(--albatre-soft);font-weight:300;max-width:680px;margin:0 auto 56px}
.stats{display:flex;justify-content:center;gap:64px;flex-wrap:wrap}
.stat .num{font-family:'Bebas Neue',sans-serif;font-size:3.6rem;line-height:1;color:var(--gingembre)}
.stat .lbl{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--albatre-faint);margin-top:8px}

/* =================================================================
   PIED DE PAGE
   ================================================================= */
.site-footer{background:var(--palissandre);padding:72px 0 32px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
.footer-brand .logo{height:92px;margin-bottom:18px}
.footer-brand p{color:var(--albatre-faint);font-weight:300;font-size:.92rem;max-width:300px}
.footer-col h4{font-family:'Inter',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gingembre);margin-bottom:16px}
.footer-col ul{list-style:none;display:grid;gap:11px}
.footer-col a{color:var(--albatre-soft);font-size:.92rem;transition:color .2s}
.footer-col a:hover{color:var(--gingembre)}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-top:54px;padding-top:24px;border-top:1px solid rgba(250,255,245,.1);
  font-size:.82rem;color:var(--albatre-faint);
}

/* ---------- révélation discrète au défilement ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* =================================================================
   RESPONSIVE
   ================================================================= */
/* Le menu complet (8 liens) bascule en burger dès qu'il devient trop large */
@media(max-width:1200px){
  /* Bouton "Login" visible en permanence dans la barre du haut, hors du
     menu burger (ergonomie mobile — il était caché dans le menu déroulant
     jusque-là, peu visible) : .nav reste affiché (flex) même fermé, seul
     ce bouton reste visible parmi ses enfants (les liens normaux passent
     à display:none tant que le menu n'est pas ouvert). Le menu ouvert
     (.nav.open) garde son comportement plein écran inchangé — tous les
     liens y réapparaissent, y compris ce bouton une deuxième fois (voir
     .nav.open a.btn-eleve plus bas), pour qui préfère l'utiliser depuis
     le menu déroulé plutôt que dans la barre. */
  .nav{display:flex}
  .nav:not(.open) > a:not(.btn-eleve),.nav:not(.open) > .nav-malouf{display:none}
  .nav a.btn-eleve{padding:8px 14px;font-size:.8rem}
  .header-right{gap:12px}
  .burger{display:flex;z-index:300}
  .nav.open{
    display:flex;flex-direction:column;align-items:flex-start;gap:22px;
    position:fixed;inset:0;background:var(--midnight);
    padding:96px 32px;z-index:200;overflow-y:auto;
  }
  .nav.open a{font-size:1.4rem}
  .nav.open a.btn-eleve{display:inline-flex;margin-top:8px;font-size:1.1rem;padding:10px 20px}
  body.menu-open{overflow:hidden}
  body.menu-open .wa-btn,body.menu-open .cbot-btn,body.menu-open .cbot-panel{display:none}
  .burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger.is-open span:nth-child(2){opacity:0}
  .burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  /* « Le malouf » déplié dans le menu burger */
  .nav.open .nav-malouf{flex-direction:column;align-items:flex-start;gap:14px;width:100%}
  .nav.open .malouf-menu{position:static;display:flex;margin:0;padding:0;padding-inline-start:18px;border:none;background:none;box-shadow:none;min-width:0;gap:13px}
  .nav.open .malouf-menu::before{display:none}
  .nav.open .malouf-menu a{font-size:1.05rem;padding:0}
}
@media(max-width:860px){
  .wrap,.hero-content{padding-left:24px;padding-right:24px}
  .site-header,.site-header.scrolled{padding:14px 24px}
  .site-header .logo,.site-header.scrolled .logo{height:54px}
  .medaillon{display:none}
  .hero{min-height:calc(88vh / 1.08)}
  .hero-content{padding-bottom:64px}
  .hero-bg img{object-position:65% center}
  .track{padding-left:24px;padding-right:24px}
  .card{flex-basis:260px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .stats{gap:36px}
}
@media(max-width:520px){
  .footer-grid{grid-template-columns:1fr}
  .card{flex-basis:230px}
  .hero h1{font-size:clamp(3rem,13vw,4.4rem)}
}

/* =================================================================
   PAGES INTÉRIEURES (thème sombre cinématographique)
   ================================================================= */
.page-banner{position:relative;min-height:56vh;display:flex;align-items:flex-end;overflow:hidden;padding-top:150px}
.page-banner .bg{position:absolute;inset:0;z-index:1}
.page-banner .bg img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.page-banner::before{content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to right, var(--midnight) 6%, rgba(8,31,44,.55) 48%, rgba(8,31,44,.15) 100%),
    linear-gradient(to bottom, rgba(8,31,44,.45) 0%, rgba(8,31,44,0) 32%, var(--midnight) 100%);}
.page-banner .inner{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 48px 60px}
.breadcrumb{font-size:.8rem;color:var(--albatre-faint);margin-bottom:14px;letter-spacing:.04em}
.breadcrumb a{color:var(--gingembre)}
.page-banner .eyebrow{display:block;margin-bottom:12px}
.page-banner .ar{font-family:'Amiri',serif;color:var(--gingembre);font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:6px}
.page-banner h1{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(2.8rem,6.4vw,5.2rem);line-height:.94;letter-spacing:.01em;color:var(--albatre)}
.page-banner .intro{margin-top:18px;color:var(--albatre-soft);font-weight:300;font-size:1.12rem;max-width:600px}

.sec{padding:84px 0}
.sec.alt{background:#0b2433}
.sec .lead{max-width:760px;margin-bottom:42px}
.sec .lead .eyebrow{display:block;margin-bottom:12px}
.sec h2{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(2rem,4vw,3.2rem);line-height:1;letter-spacing:.01em;color:var(--albatre);margin-bottom:18px}
.sec h2 .accent{color:var(--gingembre)}
.sec p{color:var(--albatre-soft);font-weight:300;margin-bottom:16px}
.sec h3{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.7rem;letter-spacing:.02em;color:var(--albatre);margin-bottom:8px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid rgba(250,255,245,.12);padding-bottom:16px;margin-bottom:36px}
.sec-head h2{margin:0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split + .split{margin-top:74px}
.split .media{border-radius:6px;overflow:hidden;aspect-ratio:4/3;background:var(--midnight-2)}
.split .media img{width:100%;height:100%;object-fit:cover}
.split.media-right .media{order:2}

.feature-list{list-style:none;display:grid;gap:18px;margin-top:8px}
.feature-list li{padding-left:30px;position:relative;color:var(--albatre-soft);font-weight:300}
.feature-list li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border:2px solid var(--gingembre);transform:rotate(45deg)}
.feature-list b{display:block;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.2rem;letter-spacing:.02em;color:var(--albatre)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.panel{background:var(--midnight-2);border:1px solid rgba(250,255,245,.08);border-radius:6px;padding:30px 28px;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.panel:hover{transform:translateY(-5px);border-color:rgba(254,255,214,.34)}
.panel .cat{color:var(--gingembre);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:10px}
.panel h3{margin-bottom:8px}
.panel p{color:var(--albatre-soft);font-weight:300;font-size:.96rem;margin:0}

.tarifs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tarif{position:relative;background:var(--midnight-2);border:1px solid rgba(250,255,245,.1);border-radius:6px;padding:36px 28px;display:flex;flex-direction:column}
.tarif.featured{border-color:var(--gingembre)}
.tarif .badge{position:absolute;top:-12px;left:28px;background:var(--gingembre);color:var(--midnight);font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:2px}
.tarif h3{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--albatre);margin-bottom:2px}
.tarif .sub{color:var(--albatre-faint);font-size:.84rem}
.tarif .price{font-family:'Bebas Neue',sans-serif;font-size:3rem;color:var(--gingembre);line-height:1;margin:16px 0}
.tarif .price small{font-family:'Inter',sans-serif;font-size:.78rem;color:var(--albatre-faint)}
.tarif ul{list-style:none;display:grid;gap:11px;margin:16px 0 28px}
.tarif li{color:var(--albatre-soft);font-weight:300;font-size:.94rem;padding-left:22px;position:relative}
.tarif li::before{content:"—";position:absolute;left:0;color:var(--gingembre)}
.tarif .btn{margin-top:auto;justify-content:center}

.form{display:grid;gap:20px;max-width:680px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--albatre)}
.field input,.field select,.field textarea{font-family:'Inter',sans-serif;font-size:1rem;padding:13px 15px;border-radius:4px;border:1px solid rgba(250,255,245,.18);background:rgba(250,255,245,.05);color:var(--albatre)}
.field input::placeholder,.field textarea::placeholder{color:var(--albatre-faint)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gingembre);background:rgba(250,255,245,.08)}
.field select option{color:#111;background:#fff}
.field textarea{min-height:130px;resize:vertical}
/* Espace privé (.lms) : sections administratives denses (staff/superadmin)
   — champs resserrés pour tenir beaucoup plus d'information à l'écran, sans
   toucher aux formulaires publics (contact/inscription/pré-inscription/don)
   qui partagent les mêmes classes .field/.btn. Seule la lecture de la
   description des cours (élèves) reste "aérée" : elle n'utilise jamais
   .field (simple <p>, voir js/mon-compte.js::renderCoursDetail), donc hors
   d'atteinte de ce resserrement. */
.lms .field{gap:3px}
.lms .field label{font-size:.76rem}
.lms .field input,.lms .field select,.lms .field textarea{padding:7px 9px;font-size:.88rem;border-radius:6px}
.lms .field textarea{min-height:60px}
.lms .btn{padding:9px 18px;font-size:.85rem}
.form-note{font-size:.82rem;color:var(--albatre-faint)}

.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.product{background:var(--midnight-2);border:1px solid rgba(250,255,245,.08);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.product:hover{transform:translateY(-5px);border-color:rgba(254,255,214,.34)}
.product .pimg{aspect-ratio:1;overflow:hidden;background:var(--midnight)}
.product .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.product:hover .pimg img{transform:scale(1.06)}
.product .pbody{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.product .cat{color:var(--gingembre);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.product h3{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.35rem;letter-spacing:.02em;color:var(--albatre)}
.product .pr{color:var(--albatre);font-weight:600;font-size:.96rem}
.product .btn{margin-top:8px;justify-content:center}
.shop-note{font-size:.9rem;color:var(--albatre-soft);background:var(--midnight-2);border:1px solid rgba(250,255,245,.1);border-radius:6px;padding:18px 22px;line-height:1.6}
.shop-note a{color:var(--gingembre)}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.info-list{list-style:none;display:grid;gap:24px}
.info-list .k{color:var(--gingembre);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
.info-list .v{font-size:1.04rem;color:var(--albatre)}
.info-list a{color:var(--gingembre)}
.map{aspect-ratio:16/10;border-radius:6px;overflow:hidden;border:1px solid rgba(250,255,245,.12);margin-top:36px}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.4) brightness(.85) contrast(1.05)}

.lessons{display:grid;border-top:1px solid rgba(250,255,245,.12);margin-top:8px}
.lesson{display:grid;grid-template-columns:54px 1fr auto;gap:22px;align-items:center;padding:20px 0;border-bottom:1px solid rgba(250,255,245,.12)}
.lesson .no{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--gingembre);line-height:1}
.lesson h4{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.3rem;letter-spacing:.02em;color:var(--albatre)}
.lesson .meta{color:var(--albatre-faint);font-size:.86rem}
.lesson .lock{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--albatre-faint);white-space:nowrap}
.lesson .lock.free{color:var(--gingembre)}
/* Leçons en accordéon (espace élève) */
.lesson-acc{border-bottom:1px solid rgba(250,255,245,.12)}
.lesson-head{width:100%;display:grid;grid-template-columns:54px 1fr auto;gap:22px;align-items:center;padding:20px 0;background:none;border:0;color:inherit;cursor:pointer;text-align:left;font:inherit}
.lesson-head .no{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--gingembre);line-height:1}
.lesson-head .lh-main{display:flex;flex-direction:column;gap:3px}
.lesson-head .lh-title{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.3rem;letter-spacing:.02em;color:var(--albatre)}
.lesson-head .meta{color:var(--albatre-faint);font-size:.86rem}
.lesson-head .chev{color:var(--gingembre);font-size:1.2rem;transition:transform .25s}
.lesson-acc.open .chev{transform:rotate(180deg)}
.lesson-acc.open .lesson-head{background:rgba(250,255,245,.02)}
.lesson-body{display:none;padding:4px 0 24px;padding-inline-start:76px}
.lesson-acc.open .lesson-body{display:block}
.lesson-sec{margin-bottom:18px}
.lesson-sec h5{color:var(--gingembre);font-size:.72rem;font-weight:700;letter-spacing:.1em;margin-bottom:8px}
.lesson-sec .txt{white-space:pre-wrap;color:var(--albatre-soft);font-weight:300;line-height:1.7}
@media(max-width:560px){
  .lesson-head{grid-template-columns:38px 1fr auto;gap:12px}
  .lesson-body{padding-inline-start:0}
}

.cta-band{padding:104px 0;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(125,64,69,.2),transparent 60%)}
.cta-band .inner{position:relative;z-index:2;max-width:780px;margin:0 auto;padding:0 24px}
.cta-band .ar{font-family:'Amiri',serif;color:var(--gingembre);font-size:1.6rem;margin-bottom:12px}
.cta-band h2{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1;color:var(--albatre);margin-bottom:16px}
.cta-band p{color:var(--albatre-soft);font-weight:300;max-width:500px;margin:0 auto 30px}

@media(max-width:860px){
  .page-banner .inner{padding-left:24px;padding-right:24px}
  .grid-3,.tarifs,.shop{grid-template-columns:1fr 1fr}
  .grid-2,.split,.contact-grid,.form .row{grid-template-columns:1fr}
  .split{gap:34px}
  .split.media-right .media{order:-1}
  .map{margin-top:0}
}
@media(max-width:520px){
  .grid-3,.tarifs,.shop{grid-template-columns:1fr}
  .lesson{grid-template-columns:40px 1fr;gap:14px}
  .lesson .lock{grid-column:2;margin-top:4px}
}

/* ===== équipe (maîtres) ===== */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.member{background:var(--midnight-2);border:1px solid rgba(250,255,245,.08);border-radius:6px;overflow:hidden;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.member:hover{transform:translateY(-5px);border-color:rgba(254,255,214,.34)}
.member .mimg{aspect-ratio:4/5;overflow:hidden;background:var(--midnight)}
.member .mimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.member:hover .mimg img{transform:scale(1.05)}
.member .mbody{padding:18px 20px 22px}
.member h3{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.5rem;letter-spacing:.02em;color:var(--albatre)}
.member .role{color:var(--gingembre);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:4px 0 10px}
.member p{color:var(--albatre-soft);font-weight:300;font-size:.92rem;margin:0}
/* Variante à une seule carte (portrait + texte libre), ex. biographie de
   l'intervenant·e d'un atelier (voir worker/index.js::renderAtelierHtml) —
   même carte .member que ci-dessus, juste une mise en page 2 colonnes au
   lieu de la grille à 3, repliée en une colonne sur mobile comme .team. */
.team-bio{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start}
.team-bio .member:hover{transform:none}
@media(max-width:600px){.team-bio{grid-template-columns:1fr}.team-bio .member .mimg{aspect-ratio:16/10}}
/* Titres de section au sein du texte libre (voir worker/index.js::
   renderAtelierHtml, découpage de bio_intervenant) — .sec h3 fixe déjà la
   police/couleur, il ne manque que l'air au-dessus pour détacher chaque
   section de la précédente. */
.team-bio h3{margin-top:28px}
.team-bio h3:first-child{margin-top:0}

/* ===== agenda ===== */
/* Filtre par type sur la page "Activités" (voir js/activites.js) — pilules
   compactes, distinctes de .btn/.btn-solid (trop larges pour une barre de
   filtres), même palette (--gingembre/--midnight/--albatre). */
.activites-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.activites-filter-btn{cursor:pointer;font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.02em;padding:8px 18px;border-radius:999px;border:1.5px solid rgba(250,255,245,.3);background:transparent;color:var(--albatre);transition:.2s var(--ease)}
.activites-filter-btn:hover{border-color:var(--albatre)}
.activites-filter-btn.active{background:var(--gingembre);border-color:var(--gingembre);color:var(--midnight)}
.agenda-list{display:grid;border-top:1px solid rgba(250,255,245,.12)}
.event{display:grid;grid-template-columns:108px 1fr auto;gap:28px;align-items:center;padding:24px 0;border-bottom:1px solid rgba(250,255,245,.12);transition:background .25s}
.event:hover{background:rgba(250,255,245,.03)}
.event .date{text-align:center;border-right:1px solid rgba(250,255,245,.14);padding-right:22px}
.event .date .d{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;line-height:.9;color:var(--gingembre)}
.event .date .m{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--albatre-faint);margin-top:4px}
.event .cat{color:var(--gingembre);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
.event h3{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.5rem;letter-spacing:.02em;color:var(--albatre);line-height:1}
.event .place{color:var(--albatre-faint);font-size:.9rem;margin-top:4px}
.event .go{color:var(--gingembre);font-size:.86rem;font-weight:600;white-space:nowrap}
@media(max-width:860px){
  .team{grid-template-columns:1fr 1fr}
  .event{grid-template-columns:80px 1fr;gap:18px}
  .event .go{display:none}
}
@media(max-width:520px){.team{grid-template-columns:1fr}}

/* ===== Espace élève — page de connexion ===== */
.auth{position:relative;min-height:calc(100vh / 1.08);display:flex;align-items:center;justify-content:center;padding:150px 24px 80px;overflow:hidden}
.auth .bg{position:absolute;inset:0;z-index:1}
.auth .bg img{width:100%;height:100%;object-fit:cover;opacity:.22}
.auth .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(8,31,44,.5),var(--midnight) 78%)}
.auth-card{position:relative;z-index:2;width:100%;max-width:430px;background:rgba(13,42,60,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(250,255,245,.12);border-radius:10px;padding:46px 40px}
.auth-card .eyebrow{display:block;margin-bottom:12px}
.auth-card h1{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:2.5rem;letter-spacing:.02em;color:var(--albatre);line-height:1;margin-bottom:8px}
.auth-card .sub{color:var(--albatre-soft);font-size:.96rem;font-weight:300;margin-bottom:28px}
.auth-card form{display:grid;gap:18px}
.auth-card .btn{width:100%;justify-content:center;margin-top:6px}
.auth-links{display:flex;justify-content:space-between;align-items:center;font-size:.84rem}
.auth-links label{display:flex;align-items:center;gap:7px;font-weight:400;color:var(--albatre-soft)}
.auth-links input[type=checkbox]{width:auto}
.auth-links a{color:var(--gingembre)}
.auth-note{margin-top:16px;font-size:.78rem;color:var(--albatre-faint);text-align:center}
.auth-alt{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid rgba(250,255,245,.1);font-size:.92rem;color:var(--albatre-faint)}
.auth-alt a{color:var(--gingembre);font-weight:600}
@media(max-width:520px){
  .auth{padding:112px 14px 56px}
  .auth-card{padding:30px 18px}
  .auth-card h1{font-size:2.1rem}
  .auth-links{flex-direction:column;align-items:flex-start;gap:11px}
}

/* ===== Chatbot FAQ ===== */
.cbot-btn{position:fixed;bottom:24px;right:24px;z-index:300;width:60px;height:60px;border-radius:50%;background:var(--gingembre);color:var(--midnight);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.65);transition:transform .25s var(--ease)}
.cbot-btn:hover{transform:scale(1.07)}
.cbot-btn svg{width:28px;height:28px}
.cbot-btn .ic-close{display:none}
.cbot-btn.open .ic-chat{display:none}
.cbot-btn.open .ic-close{display:block}
html[dir="rtl"] .cbot-btn{right:auto;left:24px}

.cbot-panel{position:fixed;bottom:98px;right:24px;z-index:300;width:372px;max-width:calc(100vw - 36px);height:526px;max-height:calc(100vh - 140px);background:var(--midnight-2);border:1px solid rgba(250,255,245,.14);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px -18px rgba(0,0,0,.72);opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.cbot-panel.open{opacity:1;transform:none;pointer-events:auto}
html[dir="rtl"] .cbot-panel{right:auto;left:24px}

.cbot-head{background:var(--midnight);padding:15px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(250,255,245,.1)}
.cbot-head .dot{width:9px;height:9px;border-radius:50%;background:#57d38c;flex-shrink:0}
.cbot-head .ttl{font-family:'Bebas Neue',sans-serif;font-size:1.25rem;letter-spacing:.03em;color:var(--albatre);line-height:1}
.cbot-head .sub{font-size:.7rem;color:var(--albatre-faint)}
.cbot-head .x{margin-left:auto;background:none;border:none;color:var(--albatre-soft);cursor:pointer;font-size:1.4rem;line-height:1;padding:0 4px}
html[dir="rtl"] .cbot-head .x{margin-left:0;margin-right:auto}

.cbot-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:11px}
.cbot-msg{max-width:85%;padding:11px 14px;border-radius:15px;font-size:.92rem;line-height:1.55}
.cbot-msg.bot{align-self:flex-start;background:rgba(250,255,245,.08);color:var(--albatre);border-bottom-left-radius:4px}
.cbot-msg.user{align-self:flex-end;background:var(--gingembre);color:var(--midnight);border-bottom-right-radius:4px}
.cbot-msg a{color:var(--gingembre);font-weight:600}
.cbot-msg.user a{color:var(--midnight)}
html[dir="rtl"] .cbot-msg.bot{border-bottom-left-radius:15px;border-bottom-right-radius:4px}
html[dir="rtl"] .cbot-msg.user{border-bottom-right-radius:15px;border-bottom-left-radius:4px}

.cbot-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.cbot-chip{background:rgba(250,255,245,.07);border:1px solid rgba(250,255,245,.16);color:var(--albatre-soft);font-size:.8rem;padding:7px 13px;border-radius:20px;cursor:pointer;transition:.2s;font-family:'Inter',sans-serif}
.cbot-chip:hover{background:var(--gingembre);color:var(--midnight);border-color:var(--gingembre)}

.cbot-input{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(250,255,245,.1)}
.cbot-input input{flex:1;background:rgba(250,255,245,.06);border:1px solid rgba(250,255,245,.16);border-radius:22px;padding:11px 16px;color:var(--albatre);font-family:'Inter',sans-serif;font-size:.92rem}
.cbot-input input::placeholder{color:var(--albatre-faint)}
.cbot-input input:focus{outline:none;border-color:var(--gingembre)}
.cbot-input button{background:var(--gingembre);color:var(--midnight);border:none;border-radius:50%;width:42px;height:42px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cbot-input button svg{width:18px;height:18px}
html[dir="rtl"] .cbot-input button svg{transform:scaleX(-1)}

@media(max-width:520px){
  .cbot-panel{bottom:86px;right:12px;left:12px;width:auto;max-width:none;height:72vh}
  html[dir="rtl"] .cbot-panel{right:12px;left:12px}
  .cbot-btn{bottom:18px;right:18px}
  html[dir="rtl"] .cbot-btn{right:auto;left:18px}
}

/* ===== Bouton flottant WhatsApp (coin opposé au chatbot) — volontairement
   discret (petit, ombre légère, un peu transparent au repos) plutôt
   qu'un gros bouton, surtout gênant sur mobile où il empiète sur le
   contenu ; pleinement opaque et légèrement agrandi au survol/tap pour
   rester repérable et accessible. */
.wa-btn{position:fixed;bottom:20px;left:20px;z-index:250;width:42px;height:42px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -6px rgba(0,0,0,.45);opacity:.82;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.wa-btn:hover,.wa-btn:focus-visible{transform:scale(1.08);opacity:1}
.wa-btn svg{width:22px;height:22px;fill:#fff}
html[dir="rtl"] .wa-btn{left:auto;right:20px}
@media(max-width:520px){
  .wa-btn{bottom:14px;left:14px;width:36px;height:36px;opacity:.78}
  .wa-btn svg{width:19px;height:19px}
  html[dir="rtl"] .wa-btn{left:auto;right:14px}
}

/* ===== Étapes « Comment ça marche » ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.step{background:rgba(250,255,245,.04);border:1px solid rgba(250,255,245,.1);border-radius:14px;padding:30px 26px}
.step .step-n{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;width:46px;height:46px;border-radius:50%;background:var(--gingembre);color:var(--midnight);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h3{font-size:1.25rem;margin-bottom:8px}
.step p{color:var(--albatre-soft);font-size:.98rem}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* ===== FAQ (accordéon natif) ===== */
.faq{max-width:880px;margin:30px auto 0}
.faq-q{background:rgba(250,255,245,.04);border:1px solid rgba(250,255,245,.1);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq-q summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;font-size:1.05rem;display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+";font-size:1.6rem;line-height:1;color:var(--gingembre);transition:transform .2s var(--ease);flex-shrink:0}
.faq-q[open] summary::after{transform:rotate(45deg)}
.faq-q .faq-a{padding:0 22px 18px;color:var(--albatre-soft);line-height:1.7}
.faq-q .faq-a a{color:var(--gingembre);font-weight:600}

/* ===== Espace élève + : emploi du temps, factures, messagerie ===== */
.sched{display:flex;flex-direction:column;gap:10px}
.sched-row{display:grid;grid-template-columns:130px 140px 1fr;gap:12px;align-items:center;background:rgba(250,255,245,.04);border:1px solid rgba(250,255,245,.1);border-radius:10px;padding:14px 18px}
.sched-day{font-weight:700;color:var(--gingembre)}
.sched-time{color:var(--albatre-soft)}
.sched-extra{color:var(--albatre-faint)}

/* Assiduité */
.att-summary{display:flex;flex-wrap:wrap;align-items:center;gap:24px;background:rgba(250,255,245,.04);border:1px solid rgba(250,255,245,.1);border-radius:14px;padding:18px 22px;margin-bottom:18px}
.att-rate{text-align:center}
.att-rate-n{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;line-height:1}
.att-rate-l{font-size:.82rem;color:var(--albatre-soft)}
.att-counts{display:flex;flex-wrap:wrap;gap:18px;color:var(--albatre-soft);font-size:.9rem}
.att-counts b{font-size:1.15rem}
.att-list{display:flex;flex-direction:column;gap:8px}
.att-row{display:flex;align-items:center;gap:12px;background:rgba(250,255,245,.03);border:1px solid rgba(250,255,245,.08);border-radius:10px;padding:11px 16px}
.att-date{font-weight:600;min-width:104px}
.att-course{flex:1;color:var(--albatre-soft);font-size:.9rem;min-width:0}
.att-badge{border:1px solid;border-radius:20px;padding:2px 12px;font-size:.8rem;font-weight:600}
.att-note{color:var(--albatre-faint);font-size:.85rem}
@media(max-width:620px){.sched-row{grid-template-columns:1fr;gap:4px}}

.inv-amount{font-size:1.5rem;color:var(--gingembre);font-weight:700;margin:6px 0}
.panel.inv-paid .cat{color:#9fe0c0}
.panel.inv-unpaid .cat{color:#ffcf8f}
.panel.inv-cancel .cat{color:var(--albatre-faint)}

.msg-box{max-height:440px;overflow-y:auto;background:rgba(8,31,44,.4);border:1px solid rgba(250,255,245,.1);border-radius:12px;padding:16px;margin-bottom:14px}
.msgs{display:flex;flex-direction:column;gap:10px}
.msg{max-width:80%;padding:11px 15px;border-radius:14px}
.msg .msg-b{white-space:pre-wrap;line-height:1.5}
.msg .msg-t{font-size:.72rem;color:var(--albatre-faint);margin-top:5px}
.msg.them{align-self:flex-start;background:rgba(250,255,245,.08);border-bottom-left-radius:4px}
.msg.me{align-self:flex-end;background:var(--gingembre);color:var(--midnight);border-bottom-right-radius:4px}
.msg.me .msg-t{color:rgba(8,31,44,.6)}
html[dir="rtl"] .msg.them{align-self:flex-end;border-bottom-left-radius:14px;border-bottom-right-radius:4px}
html[dir="rtl"] .msg.me{align-self:flex-start;border-bottom-right-radius:14px;border-bottom-left-radius:4px}
.msg-form{display:flex;gap:10px;align-items:flex-end}
.msg-form textarea{flex:1;background:rgba(250,255,245,.06);border:1px solid rgba(250,255,245,.16);border-radius:10px;padding:12px 14px;color:var(--albatre);font-family:'Inter',sans-serif;font-size:.95rem;resize:vertical}
.msg-form textarea:focus{outline:none;border-color:var(--gingembre)}

/* ===== Messagerie directe (style Messenger) ===== */
.dm{display:flex;height:calc(100vh - 210px);min-height:430px;border:1px solid rgba(250,255,245,.1);border-radius:14px;overflow:hidden;background:rgba(8,31,44,.4)}
.dm-list{width:310px;flex-shrink:0;border-right:1px solid rgba(250,255,245,.1);overflow-y:auto}
.dm-search{position:sticky;top:0;z-index:2;background:var(--midnight-2);padding:10px;border-bottom:1px solid rgba(250,255,245,.1);display:flex;gap:8px;align-items:center}
.dm-search input{flex:1;min-width:0;background:rgba(250,255,245,.06);border:1px solid rgba(250,255,245,.16);border-radius:20px;padding:9px 16px;color:var(--albatre);font-family:'Inter',sans-serif;font-size:.9rem}
.dm-search input:focus{outline:none;border-color:var(--gingembre)}
.dm-newgrp{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1px solid rgba(250,255,245,.16);background:rgba(250,255,245,.06);color:var(--albatre);font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dm-newgrp:hover{border-color:var(--gingembre);background:rgba(231,160,82,.15)}
.dm-av-grp{background:var(--midnight-2);border:1.5px solid var(--gingembre)}
.dm-av-grp i{font-size:1.2rem}
.dm-from{display:block;font-size:.72rem;font-weight:700;color:var(--gingembre);margin-bottom:2px;font-style:normal}
.dm-leave{margin-left:auto;background:none;border:none;color:var(--albatre-faint);font-size:1.2rem;cursor:pointer;line-height:1}
.dm-leave:hover{color:var(--padauk)}
.grp-modal{position:fixed;inset:0;z-index:1000;background:rgba(8,12,18,.72);display:flex;align-items:center;justify-content:center;padding:18px}
.grp-card{background:var(--midnight-2);border:1px solid rgba(250,255,245,.14);border-radius:16px;width:100%;max-width:420px;max-height:84vh;overflow:auto;padding:20px}
.grp-card h3{margin:0 0 14px}
.grp-card>input{width:100%;background:rgba(250,255,245,.06);border:1px solid rgba(250,255,245,.16);border-radius:10px;padding:10px 14px;color:var(--albatre);font-family:'Inter',sans-serif;font-size:.95rem;margin-bottom:14px}
.grp-card>input:focus{outline:none;border-color:var(--gingembre)}
.grp-sub{font-size:.8rem;color:var(--albatre-faint);margin-bottom:8px;font-weight:600}
.grp-list{max-height:46vh;overflow:auto;border:1px solid rgba(250,255,245,.1);border-radius:10px}
.grp-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(250,255,245,.06);cursor:pointer;font-size:.92rem}
.grp-opt:last-child{border-bottom:none}
.grp-opt input{width:18px;height:18px;accent-color:var(--gingembre)}
.grp-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.dm-contact{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;border-bottom:1px solid rgba(250,255,245,.06);color:var(--albatre);text-align:left;padding:12px 14px;cursor:pointer;font-family:'Inter',sans-serif}
.dm-contact:hover,.dm-contact.active{background:rgba(250,255,245,.07)}
.dm-av{position:relative;overflow:hidden;width:44px;height:44px;border-radius:50%;background:var(--gingembre);color:var(--midnight);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-style:normal}
.dm-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dm-c-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dm-c-name{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-c-last{font-size:.8rem;color:var(--albatre-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-unread{background:var(--padauk);color:#fff;border-radius:11px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-style:normal;flex-shrink:0;font-weight:700}
.dm-chat{flex:1;display:flex;flex-direction:column;min-width:0}
.dm-empty{margin:auto;color:var(--albatre-faint)}
.dm-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(250,255,245,.1);font-weight:600}
.dm-back{display:none;background:none;border:none;color:var(--albatre);font-size:1.4rem;cursor:pointer;line-height:1}
.dm-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.dm-b{max-width:78%;padding:9px 13px;border-radius:15px;font-size:.92rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.dm-b.them{align-self:flex-start;background:rgba(250,255,245,.1);border-bottom-left-radius:4px}
.dm-b.me{align-self:flex-end;background:var(--gingembre);color:var(--midnight);border-bottom-right-radius:4px}
.dm-t{display:block;font-size:.64rem;opacity:.6;margin-top:3px}
.dm-form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(250,255,245,.1)}
.dm-form textarea{flex:1;background:rgba(250,255,245,.06);border:1px solid rgba(250,255,245,.16);border-radius:20px;padding:10px 16px;color:var(--albatre);font-family:'Inter',sans-serif;font-size:.92rem;resize:none}
.dm-form textarea:focus{outline:none;border-color:var(--gingembre)}
html[dir="rtl"] .dm-b.them{align-self:flex-end;border-bottom-left-radius:15px;border-bottom-right-radius:4px}
html[dir="rtl"] .dm-b.me{align-self:flex-start;border-bottom-right-radius:15px;border-bottom-left-radius:4px}
html[dir="rtl"] .dm-back{transform:scaleX(-1)}
@media(max-width:760px){
  .dm{height:calc(100vh - 200px);min-height:340px}
  .dm-list{width:100%}
  .dm-chat{display:none}
  .dm.chat-open .dm-list{display:none}
  .dm.chat-open .dm-chat{display:flex}
  .dm-back{display:block}
}

/* ===== Dossiers (sous-sections : leçons / partitions / paroles) ===== */
.folder{border:1px solid rgba(250,255,245,.1);border-radius:12px;margin-bottom:14px;overflow:hidden;background:rgba(250,255,245,.02)}
.folder-head{display:flex;align-items:center;gap:10px;width:100%;background:rgba(250,255,245,.04);border:none;color:var(--albatre);font-family:'Inter',sans-serif;font-size:1.02rem;font-weight:600;padding:14px 18px;cursor:pointer;text-align:left}
.folder-head:hover{background:rgba(250,255,245,.07)}
.folder-ic{font-size:1.1rem}
.folder-name{flex:1}
.folder-count{background:rgba(250,255,245,.12);color:var(--albatre-soft);border-radius:11px;min-width:24px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;padding:0 7px}
.folder-head .chev{transition:transform .25s var(--ease);color:var(--gingembre)}
.folder.open .folder-head .chev{transform:rotate(180deg)}
.folder-body{display:none;padding:16px 18px}
.folder.open .folder-body{display:block}
html[dir="rtl"] .folder-head{text-align:right}

/* ===== LMS — espace élève en application ===== */
body.lms{overflow-x:hidden;background:var(--lms-page-bg)}
body.lms .cbot-btn,body.lms .cbot-panel,body.lms .wa-btn,body.lms .pwa-install,body.lms .pwa-tip{display:none !important}

/* Mode jour — voir js/mon-compte.js::applyTheme (bouton #lms-theme-toggle
   dans le header, lu/écrit dans localStorage ; un petit script inline
   dans <head> applique l'attribut html[data-theme] avant peinture pour
   éviter un flash). --midnight et --gingembre-en-fond ne changent volontairement
   PAS : ce sont les couleurs du texte/bordures posés SUR les pastilles
   actives (fond gingembre constant dans les deux modes), donc elles
   doivent rester sombres pour rester lisibles quel que soit le thème. */
html[data-theme="light"] body.lms{
  --lms-page-bg:#F6F8F2;
  --midnight-2:#E9EEE3;
  --albatre:#132A35;
  --albatre-soft:rgba(19,42,53,.72);
  --albatre-faint:rgba(19,42,53,.5);
  --lms-accent:var(--padauk);
  --lms-surface-rgb:19,42,53;
  --lms-base-rgb:255,255,255;
  --lms-dropdown-bg:#ffffff;
  --lms-ok:#1a8f52; --lms-ok-rgb:26,143,82;
  --lms-warn:#a5670a; --lms-warn-rgb:165,103,10;
  --lms-err:#c73a3a; --lms-err-rgb:199,58,58;
}
.lms-shell{display:flex;height:100vh;overflow:hidden}
.lms-side{width:250px;flex-shrink:0;background:var(--midnight-2);border-right:1px solid rgba(var(--lms-surface-rgb),.08);display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh}
.lms-brand{display:block;text-align:center;margin-bottom:16px}
.lms-brand img{height:76px;width:auto;display:inline-block}
.lms-menu{display:flex;flex-direction:column;gap:4px}
.lms-link{display:flex;align-items:center;gap:12px;background:none;border:none;color:var(--albatre-soft);font-family:'Inter',sans-serif;font-size:.98rem;font-weight:500;padding:12px 14px;border-radius:10px;cursor:pointer;text-align:left;transition:.2s}
.lms-link[hidden]{display:none}
.ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
.lms-link .ic{width:26px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--lms-accent)}
.lms-link .ic .ms{font-size:24px}
.lms-link.active .ic{color:var(--midnight)}
.lms-side .lms-menu{overflow-y:auto}
.lms-link:hover{background:rgba(var(--lms-surface-rgb),.05);color:var(--albatre)}
.lms-link.active{background:var(--gingembre);color:var(--midnight);font-weight:700}
.lms-back{margin-top:auto;color:var(--albatre-faint);font-size:.85rem;text-decoration:none;padding:12px 14px}
.lms-back:hover{color:var(--lms-accent)}
.lms-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:auto;background:var(--padauk);color:#fff;border-radius:9px;font-size:.7rem;font-style:normal;font-weight:700}
.lms-badge[hidden]{display:none}
html[dir="rtl"] .lms-link .lms-badge{margin-left:0;margin-right:auto}
/* Non-lu simple (pas de mention) — voir js/matrix-chat.js::setNavBadge :
   petit point plutôt qu'une pastille chiffrée, même distinction qu'Element
   entre "nouveau message" et "vous avez été mentionné·e". */
.lms-badge.lms-badge-dot{min-width:9px;width:9px;height:9px;padding:0;background:var(--lms-accent);border-radius:50%}

.lms-main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:100vh}
.lms-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 30px;border-bottom:1px solid rgba(var(--lms-surface-rgb),.08);position:sticky;top:0;background:rgba(var(--lms-base-rgb),.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10}
.lms-htitle{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.9rem;letter-spacing:.02em;color:var(--albatre);line-height:1}
.lms-who{font-size:.82rem;color:var(--albatre-faint);max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Prénom de l'en-tête cliquable vers "Mes informations" (data-sec="info",
   voir js/mon-compte.js — le petit bouclage document.querySelectorAll
   ("[data-sec]") qui câble déjà tous les liens de nav ramasse aussi cet
   élément automatiquement, aucun câblage dédié nécessaire). */
.lms-who[data-sec]{cursor:pointer;transition:color .2s}
.lms-who[data-sec]:hover{color:var(--albatre)}
.lms-head-right{display:flex;align-items:center;gap:16px}
.lms-theme-toggle{background:none;border:1px solid rgba(var(--lms-surface-rgb),.3);color:var(--albatre-soft);cursor:pointer;border-radius:50%;width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.2s}
.lms-theme-toggle:hover{background:rgba(var(--lms-surface-rgb),.08);color:var(--albatre);border-color:rgba(var(--lms-surface-rgb),.5)}
.lms-theme-toggle .ms{font-size:19px}
/* Sélecteur de langue replié en icône "globe" (voir espace.html, <details
   class="lms-lang-switch">) — masqué par défaut, seul .lang (FR·EN·ع en
   ligne, partagé avec les 22 autres pages du site) reste visible tant que
   la largeur le permet ; sous 880px c'est l'inverse (voir le @media plus
   bas), .lang prenant trop de place dans un en-tête déjà chargé sur
   mobile (bouton menu + thème + who...). <details>/<summary> plutôt que
   du JS : ouverture/fermeture native au clic, pas de script à câbler. */
.lms-lang-switch{display:none;position:relative}
.lms-lang-switch summary{list-style:none}
.lms-lang-switch summary::-webkit-details-marker{display:none}
.lms-lang-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:50;background:var(--lms-dropdown-bg);border:1px solid rgba(var(--lms-surface-rgb),.16);border-radius:10px;padding:6px;box-shadow:0 14px 34px -10px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px;min-width:130px}
.lms-lang-menu a{padding:8px 10px;border-radius:7px;font-size:.85rem;font-weight:600;color:var(--albatre-soft);text-decoration:none;transition:.15s}
.lms-lang-menu a:hover{background:rgba(var(--lms-surface-rgb),.08);color:var(--albatre)}
.lms-lang-menu a.on{color:var(--gingembre)}
@media(max-width:880px){
  .lms-head .lang{display:none}
  .lms-lang-switch{display:inline-flex}
}
.lms-body{flex:1;padding:20px 26px 34px;overflow-y:auto}
.lms-panel{animation:lmsfade .3s var(--ease)}
@keyframes lmsfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   Accordeur (voir espace.html, data-panel="accordeur", js/accordeur.js)
   — port natif de l'app oudpitch (dépôt Git séparé) : même algorithme
   pYIN et même géométrie de jauge SVG, entièrement recoloré aux
   variables du thème de l'espace privé (--lms-ok/--lms-warn/--lms-err/
   --albatre...) plutôt que ses propres couleurs fixes, aucun logo/
   police qui lui soit propre — on est déjà sur le site de Dar El Oud.
   ============================================================ */
.accordeur-wrap{width:100%;max-width:460px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}

/* Démarrer/Arrêter + réglage LA côte à côte, sur une seule ligne — gagne
   la hauteur d'une rangée entière par rapport à l'ancien empilement
   vertical (voir accordeur-toolbar). Bouton plus compact (padding/
   font-size réduits, largeur au contenu plutôt que 100%) mais reste
   repérable grâce à sa couleur pleine (btn-solid) — demande explicite :
   "peut-être plus petit, mais bien visible grâce à sa couleur". */
.accordeur-toolbar{display:flex;align-items:stretch;gap:8px;width:100%}
.accordeur-toggle{flex:0 0 auto;justify-content:center;padding:9px 20px;border-radius:100px;font-size:.88rem}
@keyframes accordeur-pulse{0%{box-shadow:0 0 0 0 rgba(var(--lms-surface-rgb),.25)}70%{box-shadow:0 0 0 14px rgba(var(--lms-surface-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--lms-surface-rgb),0)}}
.accordeur-toggle:not(.is-active){animation:accordeur-pulse 2.2s ease-out infinite}
.accordeur-toggle.is-active{background:transparent;border-color:rgba(var(--lms-surface-rgb),.2);color:var(--albatre-faint)}

.accordeur-la{display:flex;align-items:center;gap:4px;flex:1 1 auto;min-width:0;justify-content:center;background:rgba(var(--lms-surface-rgb),.04);border:1px solid rgba(var(--lms-surface-rgb),.14);border-radius:100px;padding:4px 6px}
.accordeur-la-label{font-size:.85rem;font-weight:700;letter-spacing:1px;color:var(--lms-accent);padding:0 12px}
.accordeur-la-btn{width:30px;height:30px;padding:0;border-radius:50%;border:1px solid rgba(var(--lms-surface-rgb),.16);background:rgba(var(--lms-surface-rgb),.05);color:var(--albatre);font-size:1.1rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.accordeur-la-btn:hover{background:rgba(var(--lms-surface-rgb),.14)}
.accordeur-la-val{font-size:.9rem;min-width:78px;text-align:center;color:var(--lms-accent)}
/* .accordeur-la est maintenant un <button> unique (voir espace.html/
   accordeur.js) qui ouvre le modal de réglages (diapason + rapport
   SOL/LA) — demande explicite : "un bouton de configuration". Un
   <button> natif hérite d'une police/couleur par défaut du navigateur
   qu'il faut réinitialiser explicitement ; à l'intérieur du modal, la
   même classe .accordeur-la habille un simple <div> (pas de bouton
   englobant), .accordeur-la-modal ne fait qu'ajuster le fond. */
button.accordeur-la{font:inherit;color:inherit;cursor:pointer;padding:6px 8px 6px 14px;transition:background .15s,border-color .15s}
button.accordeur-la:hover{background:rgba(var(--lms-surface-rgb),.1);border-color:rgba(var(--lms-surface-rgb),.24)}
.accordeur-settings-icon{font-size:1.15rem;color:var(--albatre-soft);margin-inline-start:2px}
.accordeur-la-modal{justify-content:center;background:rgba(var(--lms-surface-rgb),.06)}

/* Modal de réglages (diapason + rapport SOL/LA) — mêmes classes
   .lms-modal-backdrop/.lms-modal que le reste de l'espace privé (voir
   js/accordeur.js::buildModal, espace.html #depense-modal-backdrop pour
   le même schéma). */
.accordeur-modal-title{margin:0 0 16px;font-size:1.1rem}
.accordeur-modal-section{margin:0 0 18px}
.accordeur-modal-section:last-of-type{margin-bottom:20px}
.accordeur-modal-label{font-size:.82rem;font-weight:600;color:var(--albatre-soft);margin-bottom:8px}
.accordeur-modal-radio{display:flex;align-items:center;gap:8px;padding:8px 2px;font-size:.92rem;cursor:pointer}
.accordeur-modal-radio input{accent-color:var(--lms-accent);width:17px;height:17px;flex:none}
.accordeur-modal-close{width:100%;justify-content:center}

.accordeur-gauge-wrap{display:flex;flex-direction:column;align-items:center;width:100%}
.accordeur-gauge{width:100%;max-width:280px;height:auto}
.accordeur-track{stroke:rgba(var(--lms-surface-rgb),.16)}
.accordeur-zone-red{stroke:var(--lms-err);opacity:.7}
.accordeur-zone-yellow{stroke:var(--lms-warn);opacity:.75}
.accordeur-zone-green{stroke:var(--lms-ok);opacity:.9}
.accordeur-tick{stroke:rgba(var(--lms-surface-rgb),.4)}
.accordeur-tick-label{fill:var(--albatre-soft);font-size:9px}
#accordeur-needle{stroke:var(--albatre-soft)}
#accordeur-pivot{fill:var(--albatre-soft)}
.accordeur-pivot-bg{fill:var(--lms-page-bg)}
#accordeur-cents{font-size:1.05rem;color:var(--albatre-faint);letter-spacing:1.5px;min-height:1.4em;text-align:center;margin-top:0;transition:color .2s}
/* Fréquence détectée (Hz) : n'existait pas avant — seul l'écart en cents
   était affiché. Reste visible même après un arrêt de son, geste au
   dernier état plutôt que remis à "—" (voir accordeur.js::updateUI/
   resetUI, demande explicite). Grande et en gras : c'est la lecture
   brute, la plus directement utile pendant l'accordage. */
#accordeur-freq{font-size:1.6rem;font-weight:700;color:var(--albatre);letter-spacing:.5px;text-align:center;margin-top:2px;transition:color .2s}

/* Toujours 4 colonnes (jamais 2×2, même sur mobile — voir le media
   query plus bas qui ne fait plus que réduire encore le padding) : les
   quatre fréquences doivent rester sur une seule rangée pour tenir sur
   un même écran sans scroll, demande explicite. */
.accordeur-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%}
.accordeur-card{cursor:default;text-align:center;padding:6px 2px 5px;transition:border-color .25s,box-shadow .25s,background .25s}
/* "Corde" / وتر : petit mot-étiquette au-dessus du nom de la corde
   (ex. "Corde" + "al-Dîl", وتر + الذيل) — demande explicite. Volontairement
   discret (petit, atténué) pour ne pas reprendre l'espace tout juste
   regagné sur ces cartes déjà compactes. */
.accordeur-note-corde{font-size:.58rem;font-weight:600;letter-spacing:.5px;color:var(--albatre-faint);opacity:.7;text-transform:uppercase}
[lang="ar"] .accordeur-note-corde{text-transform:none}
/* Noms de note et fréquences cibles agrandis et éclaircis au repos —
   trop petits/ternes pour être lus confortablement pendant l'accordage
   (demande explicite : "de manière beaucoup plus visible"). La couleur
   vive (var(--lms-ok/warn/err)) posée par accordeur.js quand la carte
   est la plus proche de la fréquence détectée reste un ajout par-dessus
   cette base, pas un remplacement. Légèrement réduit par rapport à
   l'origine (1.2rem) pour compenser la ligne "Corde" ajoutée au-dessus,
   tout en restant nettement plus lisible que l'ancienne taille pré-1.2rem. */
.accordeur-note-name{font-size:.95rem;font-weight:700;color:var(--albatre);transition:color .25s}
.accordeur-note-freq{font-size:.85rem;font-weight:600;color:var(--albatre-soft);opacity:1;margin-top:2px}
.accordeur-note-sub{font-size:.58rem;color:var(--albatre-faint);opacity:.65;margin-top:2px;line-height:1.25}
.accordeur-card-cents{font-size:.8rem;font-weight:600;margin-top:3px;min-height:1.05rem;letter-spacing:.5px}

/* Fréquences/formules/cents restent en chiffres latins non "retournés"
   par l'algorithme bidi en contexte arabe (voir espace.html — sans ça,
   "432.0 Hz" s'affichait "Hz 432.0", "(quinte↓)" devenait "(↓quinte)") —
   direction isolée explicitement, indépendamment du sens de lecture de
   la page. Les NOMS de note (arabe natif en ar/) n'en font jamais partie. */
#accordeur-la-display,#accordeur-cents,#accordeur-freq,.accordeur-note-freq,.accordeur-note-sub,.accordeur-card-cents,.accordeur-tick-label{direction:ltr;unicode-bidi:isolate}

@media(max-width:520px){
  .accordeur-gauge{max-width:190px}
  .accordeur-card{padding:5px 2px 4px}
}
@media(max-width:360px){
  .accordeur-note-name{font-size:.82rem}
  .accordeur-note-freq{font-size:.72rem}
}

.lms-hello{font-family:'Bebas Neue',sans-serif;font-size:2.3rem;color:var(--albatre);letter-spacing:.02em}
.lms-hello b{color:var(--lms-accent);font-weight:400}
.lms-sub{color:var(--albatre-soft);margin:4px 0 16px}
.lms-announce{background:linear-gradient(135deg,rgba(254,255,214,.13),rgba(125,64,69,.16));border:1px solid rgba(254,255,214,.35);border-radius:14px;padding:16px 20px;margin-bottom:22px}
.lms-announce-h{color:var(--lms-accent);font-weight:700;margin-bottom:6px}
.lms-announce-b{color:var(--albatre);line-height:1.55;white-space:pre-wrap}
.lms-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:26px}
.lms-card{text-align:left;background:rgba(var(--lms-surface-rgb),.04);border:1px solid rgba(var(--lms-surface-rgb),.1);border-radius:14px;padding:18px 20px;cursor:pointer;color:var(--albatre);font-family:'Inter',sans-serif;transition:.2s}
.lms-card:hover{transform:translateY(-3px);border-color:rgba(254,255,214,.4)}
.lms-card.warn{border-color:rgba(255,180,120,.45)}
.lms-card-h{font-size:.9rem;color:var(--albatre-soft);margin-bottom:8px}
.lms-card-b{font-size:1.05rem;line-height:1.4}
.lms-card-b b{color:var(--lms-accent)}
.lms-quick{display:flex;flex-wrap:wrap;gap:10px}
.lms-q{background:rgba(var(--lms-surface-rgb),.06);border:1px solid rgba(var(--lms-surface-rgb),.14);color:var(--albatre-soft);border-radius:22px;padding:10px 18px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.9rem;transition:.2s}
.lms-q:hover{background:var(--gingembre);color:var(--midnight)}

.lms-prof{display:flex;align-items:center;gap:18px}
.lms-avatar{position:relative;overflow:hidden;width:78px;height:78px;border-radius:50%;background:var(--gingembre);color:var(--midnight);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:2.1rem;flex-shrink:0}
.lms-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lms-prof-name{font-size:1.3rem;font-weight:600}
.lms-prof-mail{color:var(--albatre-soft);font-size:.92rem;word-break:break-all}
.lms-prof-lvl{color:var(--albatre-soft);font-size:.92rem;margin-top:4px}
.lms-prof-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* display:flex ci-dessus écrase sinon la règle native [hidden]{display:none} */
.lms-prof-actions[hidden]{display:none}
.lms-settings{margin-top:8px;max-width:540px}
.lms-set-title{font-size:1.05rem;font-weight:700;margin:16px 0 4px;color:var(--albatre)}
.lms-set-row{display:flex;align-items:center;gap:14px;padding:14px 2px;border-top:1px solid rgba(var(--lms-surface-rgb),.08)}
.lms-set-row .ti{flex:1;min-width:0}
.lms-set-row .ti b{display:block;font-size:.95rem}
.lms-set-row .ti span{color:var(--albatre-faint);font-size:.83rem}
/* Consentements par inscription (règlement intérieur / droit à l'image) —
   onglet "Mes informations" (élève). */
.lms-inscription-block{border:1px solid rgba(var(--lms-surface-rgb),.14);border-radius:10px;padding:12px 16px;margin:10px 0}
.lms-inscription-block>b{display:block;font-size:.92rem;margin-bottom:8px}
.lms-consent-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid rgba(var(--lms-surface-rgb),.08)}
.lms-consent-item:first-of-type{border-top:none}
.lms-consent-item input[type=checkbox]{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--lms-accent)}
.lms-consent-item label{flex:1;min-width:0;font-size:.88rem;line-height:1.4;cursor:pointer}
.lms-consent-item label span.hint{display:block;color:var(--albatre-faint);font-size:.8rem;margin-top:2px}
.lms-consent-item label a{color:var(--lms-accent)}
.lms-consent-item.unchecked label{color:#fbbf24}
.lms-consent-ok{font-size:.78rem;color:#34d399;margin-inline-start:6px;opacity:0;transition:opacity .3s}
.lms-consent-ok.show{opacity:1}
/* Contact d'urgence (mineur·e·s) — même onglet. */
.lms-guardian-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:6px 0;border-top:1px solid rgba(var(--lms-surface-rgb),.08)}
.lms-guardian-row:first-child{border-top:none}
.lms-guardian-row .ti b{display:block;font-size:.92rem}
.lms-guardian-row .ti span{color:var(--albatre-faint);font-size:.82rem}
.lms-guardian-row a{color:var(--lms-accent);font-weight:600}
/* Coordonnées bancaires — onglet "Mes paiements" (élève). */
.lms-bank-info{background:rgba(var(--lms-surface-rgb),.05);border:1px solid rgba(var(--lms-surface-rgb),.14);border-radius:10px;padding:6px 16px;max-width:420px}
.lms-bank-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid rgba(var(--lms-surface-rgb),.08)}
.lms-bank-row:first-child{border-top:none}
.lms-bank-row span{color:var(--albatre-faint);font-size:.85rem}
.lms-bank-row b{font-weight:600;text-align:end}
/* En arabe (RTL), le libellé et la valeur poussés aux deux extrémités de la
   ligne donnent l'effet voulu (RIB/IBAN alignés à gauche, en LTR). En
   français/anglais (LTR), on garde un flux normal : valeur juste après le
   libellé, alignée à gauche, sans les écarter aux deux bouts. */
html:not([dir="rtl"]) .lms-bank-row{justify-content:flex-start}
html:not([dir="rtl"]) .lms-bank-row b{text-align:left}
.lms-set-form{margin:6px 0 8px;display:flex;flex-direction:column;gap:6px}
.lms-set-form[hidden]{display:none}
.lms-set-form input{background:rgba(var(--lms-surface-rgb),.06);border:1px solid rgba(var(--lms-surface-rgb),.16);border-radius:8px;padding:7px 10px;color:var(--albatre);font-family:'Inter',sans-serif;font-size:.9rem;width:100%;box-sizing:border-box}
.lms-set-form input:focus{outline:none;border-color:var(--lms-accent)}
/* Grille plutôt que 2 colonnes figées : autant de champs que la largeur le
   permet sur une même ligne (jusqu'à 4-5 en écran large) — gain d'espace
   vertical important sur les formulaires denses (Élèves, Finances...). */
.lms-set-form .row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 12px}
.lms-set-msg{font-size:.85rem;margin-top:2px}
.lms-set-msg.ok{color:var(--lms-ok)}.lms-set-msg.err{color:var(--lms-err)}

/* Messagerie interne Matrix (voir js/matrix-chat.js) — fil de messages en
   colonne, bulle alignée à droite/accentuée pour les messages envoyés par
   l'utilisateur courant, à gauche/neutre pour les autres. justify-content:
   flex-end ancre la conversation (ou le message "aucun message pour le
   moment" quand elle est vide) contre le BAS de la zone disponible, comme
   n'importe quel client de discussion (Element compris) — sans ça, avec
   peu ou aucun message, le contenu s'agglutinait en haut d'une zone
   souvent bien plus haute que lui (voir #matrix-room-view etc. plus bas,
   flex:1) et le formulaire d'envoi, juste après, se retrouvait séparé
   par un grand vide plutôt que collé au fil. */
.matrix-messages{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;max-height:60vh;overflow-y:auto;margin:14px 0;padding:4px 2px}
/* Avatar rond : photo de profil si renseignée, sinon cercle de couleur +
   initiale (voir js/matrix-chat.js::renderAvatar) — même principe visuel
   qu'Element. object-fit:cover pour qu'une photo non carrée remplisse le
   cercle sans se déformer. */
.matrix-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-weight:700;font-size:.8rem;color:#0b1c26}
.matrix-avatar-photo{object-fit:cover;background:rgba(var(--lms-surface-rgb),.08)}
.matrix-avatar-spacer{width:30px;flex-shrink:0}
/* Une bulle = ligne [avatar | colonne meta+texte] — les messages
   consécutifs d'un·e même expéditeur·rice (.grouped) n'affichent
   l'avatar/le nom qu'une fois, comme Element. */
.matrix-msg{display:flex;gap:8px;align-items:flex-end;max-width:85%;align-self:flex-start;margin-top:10px}
.matrix-msg.grouped{margin-top:2px}
.matrix-msg.mine{align-self:flex-end;flex-direction:row-reverse}
.matrix-msg-col{background:rgba(var(--lms-surface-rgb),.06);border:1px solid rgba(var(--lms-surface-rgb),.12);border-radius:12px;padding:8px 12px;min-width:0}
.matrix-msg.mine .matrix-msg-col{background:rgba(var(--lms-surface-rgb),.1);border-color:rgba(254,255,214,.35)}
.matrix-msg-meta{font-size:.75rem;color:var(--albatre-faint);margin-bottom:3px}
.matrix-msg-body{font-size:.92rem;color:var(--albatre);white-space:pre-wrap;word-break:break-word}
.matrix-msg-edited{font-size:.72rem;color:var(--albatre-faint);font-style:italic}

/* Réactions emoji (voir js/matrix-chat.js::renderReactionsHtml) — pastilles
   posées sous la bulle (nombre de personnes ayant réagi avec cet emoji),
   plus un petit bouton "+" qui ouvre une rangée d'emojis fixes au clic
   (pas de picker complet : hors périmètre demandé, une poignée d'emojis
   courants suffit). Sélecteur ouvert gardé en mémoire côté JS pour ne pas
   se refermer au prochain /sync (re-rendu même sans changement). */
.matrix-msg-reactions{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px}
.matrix-reaction-pill{display:inline-flex;align-items:center;gap:3px;border:1px solid rgba(var(--lms-surface-rgb),.16);background:rgba(var(--lms-surface-rgb),.05);border-radius:100px;padding:2px 7px;font-size:.78rem;line-height:1.5;cursor:pointer;color:var(--albatre)}
.matrix-reaction-pill span{font-size:.72rem;color:var(--albatre-faint)}
.matrix-reaction-pill.mine{border-color:var(--lms-accent);background:rgba(var(--lms-surface-rgb),.12)}
.matrix-reaction-add{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:var(--albatre-faint);cursor:pointer;border-radius:50%;opacity:.7}
.matrix-reaction-add:hover{opacity:1;background:rgba(var(--lms-surface-rgb),.08)}
.matrix-reaction-add .ms{font-size:16px}
.matrix-reaction-picker{display:none;align-items:center;gap:2px;border:1px solid rgba(var(--lms-surface-rgb),.16);background:var(--lms-page-bg);border-radius:100px;padding:3px 6px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.matrix-reaction-picker.is-open{display:inline-flex}
.matrix-reaction-choice{border:none;background:transparent;font-size:1.05rem;line-height:1;padding:3px 4px;cursor:pointer;border-radius:6px}
.matrix-reaction-choice:hover{background:rgba(var(--lms-surface-rgb),.1)}

/* Panneau "Personnes" (voir Element) — liste des membres de la salle,
   triée en ligne d'abord (voir js/matrix-chat.js::renderMembersInto).
   Pastille de présence : couleurs génériques --lms-ok/--lms-warn déjà
   utilisées ailleurs pour "payé"/"non payé", réemployées ici pour rester
   cohérent avec la palette du site plutôt que d'introduire de nouvelles
   teintes juste pour ça. */
.matrix-members-panel{border:1px solid rgba(var(--lms-surface-rgb),.12);border-radius:12px;padding:10px 12px;margin:10px 0;max-height:260px;overflow-y:auto;background:rgba(var(--lms-surface-rgb),.03)}
.matrix-member{display:flex;align-items:center;gap:10px;padding:7px 2px}
.matrix-member-name{flex:1;min-width:0;font-size:.88rem;color:var(--albatre);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.matrix-member-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--albatre-faint)}
.matrix-member-dot.matrix-presence-online{background:var(--lms-ok)}
.matrix-member-dot.matrix-presence-away{background:var(--lms-warn)}
/* Bandeau compact "personnes en ligne" dans l'en-tête d'une discussion
   (voir renderPresenceStrip, js/matrix-chat.js) — remplace la liste
   dépliable .matrix-members-panel pour Club Mālūf : un seul bouton pour
   toute la discussion (demande explicite, ergonomie mobile), les
   personnes en ligne restent visibles sans clic supplémentaire. */
.matrix-presence-strip{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--albatre-faint);flex-shrink:0}
.matrix-presence-avatars{display:flex}
.matrix-presence-avatars .matrix-avatar{width:22px;height:22px;font-size:.6rem;margin-inline-start:-8px;border:2px solid var(--lms-page-bg)}
.matrix-presence-avatars .matrix-avatar:first-child{margin-inline-start:0}
.matrix-room-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.matrix-room-head .lms-set-title{margin:0;flex:1;min-width:0}
.matrix-room-head .lms-sub{margin:0}
/* Retour + titre + personnes sur une seule ligne (voir espace.html,
   Messagerie) — bouton icône seule (comme .matrix-members-btn) plutôt
   qu'un texte "← Retour aux discussions" sur sa propre ligne, pour
   gagner l'espace vertical que ça prenait auparavant. */
.matrix-back-btn{flex-shrink:0}
html[dir="rtl"] .matrix-back-btn .ms{transform:scaleX(-1)}
.matrix-notif-btn{white-space:nowrap;font-size:.85rem;padding:8px 14px}
.matrix-notif-btn[disabled]{opacity:.6;cursor:default}
@media(max-width:880px){.matrix-notif-btn{width:100%;justify-content:center}}
.matrix-members-btn{margin-inline-start:auto}

/* Statistiques Meta Business (voir js/mon-compte.js::renderMetaStatsPanel)
   — deux cartes chiffre-clé côte à côte, même esprit que .lms-dashcash-
   total pour le style du chiffre mais sans son tableau. */
.meta-stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:16px 0 24px}
.meta-stat-card{background:rgba(var(--lms-surface-rgb),.04);border:1px solid rgba(var(--lms-surface-rgb),.1);border-radius:14px;padding:18px 20px;text-align:center}
.meta-stat-label{font-size:.8rem;color:var(--albatre-faint);text-transform:uppercase;letter-spacing:.03em}
.meta-stat-value{font-family:'Bebas Neue',sans-serif;font-size:2.1rem;color:var(--lms-accent);letter-spacing:.02em;margin-top:4px}
.matrix-send-form{display:flex;gap:8px;margin-top:8px}
.matrix-send-form input{flex:1;background:rgba(var(--lms-surface-rgb),.06);border:1px solid rgba(var(--lms-surface-rgb),.16);border-radius:8px;padding:9px 12px;color:var(--albatre);font-family:'Inter',sans-serif;font-size:.92rem}
.matrix-send-form input:focus{outline:none;border-color:var(--lms-accent)}
/* Ligne de paiement compacte (frais d'inscription / versement, voir
   js/mon-compte.js::buildEleveDetailHtml) : statut, bascule payé,
   mode de paiement, justificatif — tout sur une ligne pour économiser
   l'espace vertical (plusieurs versements par inscription). Fond/bordure
   légers pour regrouper visuellement chaque ligne (plus lisible qu'un
   simple texte sur fond nu quand plusieurs versements s'enchaînent). */
.lms-pay-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0;padding:9px 12px;border-radius:10px;background:rgba(var(--lms-surface-rgb),.04);border:1px solid rgba(var(--lms-surface-rgb),.1)}
.lms-pay-label{font-size:.83rem;color:var(--albatre-faint);min-width:100px}
.lms-pay-mode{padding:4px 8px;font-size:.78rem;border-radius:6px;background:rgba(var(--lms-surface-rgb),.06);border:1px solid rgba(var(--lms-surface-rgb),.16);color:var(--albatre);font-family:'Inter',sans-serif;margin-inline-start:auto}
/* Montant éditable d'un paiement (voir js/mon-compte.js::montantInputHtml)
   — largeur fixe courte (un montant tient toujours en quelques chiffres),
   même famille visuelle que .lms-pay-mode juste au-dessus. */
.lms-pay-montant{width:72px;padding:4px 8px;font-size:.78rem;border-radius:6px;background:rgba(var(--lms-surface-rgb),.06);border:1px solid rgba(var(--lms-surface-rgb),.16);color:var(--albatre);font-family:'Inter',sans-serif}
/* Bouton unique état/action "Payé"/"Non payé" (voir
   js/mon-compte.js::paymentStatusButtonHtml) : son fond/texte reflètent
   directement l'état courant (vert = payé, rouge clair = non payé) et un
   clic bascule cet état — remplace l'ancienne paire tag+bouton séparée. */
.lms-pay-status{display:inline-flex;align-items:center;gap:5px;border-radius:14px;padding:5px 12px;font-size:.8rem;font-weight:600;border:1px solid transparent;cursor:pointer;font-family:'Inter',sans-serif;transition:filter .15s,transform .1s}
.lms-pay-status .ms{font-size:15px}
.lms-pay-status:hover{filter:brightness(1.12)}
.lms-pay-status:active{transform:scale(.96)}
.lms-pay-status[data-paye="true"]{background:rgba(var(--lms-ok-rgb),.16);color:var(--lms-ok);border-color:rgba(var(--lms-ok-rgb),.35)}
.lms-pay-status[data-paye="false"]{background:rgba(var(--lms-err-rgb),.14);color:var(--lms-err);border-color:rgba(var(--lms-err-rgb),.3)}
/* Date de paiement/échéance (voir js/mon-compte.js::versementDateHtml) —
   absente du DOM si le rôle de l'utilisateur·rice n'y donne pas accès. */
.lms-pay-date{font-size:.78rem;color:var(--albatre-faint)}
.lms-pay-date.overdue{color:var(--lms-err);font-weight:600}
/* Variante éditable (voir js/mon-compte.js::versementDateFieldHtml) : même
   texte/couleur que .lms-pay-date, avec un sélecteur de date compact
   accolé — même famille visuelle que .lms-pay-montant plus haut. */
.lms-pay-date-input{width:100px;padding:4px 8px;font-size:.78rem;border-radius:6px;background:rgba(var(--lms-surface-rgb),.06);border:1px solid rgba(var(--lms-surface-rgb),.16);color:var(--albatre);font-family:'Inter',sans-serif}
/* Suppression d'un versement (voir js/mon-compte.js::wireEleveDetailForms,
   .v-delete) — icône seule, même discrétion que .jw-versement à côté. */
.lms-pay-delete{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--albatre-faint);cursor:pointer;transition:background .15s,color .15s}
.lms-pay-delete:hover{background:rgba(var(--lms-err-rgb),.14);color:var(--lms-err)}
.lms-pay-delete .ms{font-size:16px}
/* Justificatif en icônes (voir renderJustificatifWidget) : un simple
   trombone, plein/coloré si un fichier est attaché, vide sinon — plus
   lisible en un coup d'œil que l'ancien texte "Aucun justificatif
   ajouté...". Le bouton d'ajout (upload) reste cliquable même masqué par
   JS (hidden), déclenche un input file caché plutôt que le bouton natif
   disgracieux "Choisir un fichier". */
.jw-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;flex-shrink:0;border:none;cursor:pointer;color:var(--albatre-faint);background:rgba(var(--lms-surface-rgb),.06);text-decoration:none}
.jw-icon .ms{font-size:16px}
.jw-icon-ok{color:var(--lms-ok);background:rgba(var(--lms-ok-rgb),.15)}
.jw-icon-ok:hover{background:rgba(var(--lms-ok-rgb),.28)}
.jw-icon-empty{cursor:default;opacity:.55}
.jw-remove-icon:hover{color:var(--lms-err);background:rgba(var(--lms-err-rgb),.15)}
.jw-upload-btn:hover{color:var(--albatre);background:rgba(var(--lms-surface-rgb),.14)}
.jw-upload-btn[hidden]{display:none}
/* Invitation subtile à compléter un champ vide — jamais bloquant, disparaît dès la saisie. */
.field.field-empty label::after{content:"— à compléter";margin-left:6px;font-weight:400;font-size:.78em;color:var(--albatre-faint);font-style:italic}
.field.field-empty input,.field.field-empty select{border-style:dashed}
html[dir="rtl"] .field.field-empty label::after{margin-left:0;margin-right:6px}
html[lang="ar"] .field.field-empty label::after{content:"— يفضل إكماله"}
/* Sélecteur de date jj/mm/aaaa (js/date-picker.js) — remplace l'ergonomie
   pauvre de <input type="date"> natif (format dépendant du système
   d'exploitation) par un champ texte + calendrier, sans dépendance externe. */
.lms-datepicker-wrap{position:relative}
.lms-datepicker-input{padding-inline-end:40px!important}
.lms-datepicker-icon{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:10px;background:none;border:none;color:var(--albatre-faint);cursor:pointer;display:flex;padding:4px;border-radius:6px}
.lms-datepicker-icon:hover{color:var(--albatre)}
.lms-datepicker-icon .ms{font-size:20px}
.lms-datepicker-popup{position:absolute;top:100%;left:0;z-index:30;background:var(--lms-dropdown-bg);border:1px solid rgba(var(--lms-surface-rgb),.16);border-radius:10px;padding:12px;margin-top:6px;width:272px;max-width:calc(100vw - 24px);box-shadow:0 14px 34px -10px rgba(0,0,0,.6)}
html[dir="rtl"] .lms-datepicker-popup{left:auto;right:0}
/* Pas assez de place en dessous (champ proche du bas de l'écran, ou
   masqué par la barre d'onglets fixe en bas sur mobile) -> le calendrier
   s'ouvre au-dessus du champ à la place (voir date-picker.js::placePopup). */
.lms-datepicker-popup.is-flipped{top:auto;bottom:100%;margin-top:0;margin-bottom:6px}
.lms-datepicker-head{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.lms-datepicker-nav{background:none;border:none;color:var(--albatre);font-size:1.15rem;cursor:pointer;padding:2px 9px;border-radius:6px;line-height:1.4}
.lms-datepicker-nav:hover{background:rgba(var(--lms-surface-rgb),.1)}
.lms-datepicker-select{flex:1;min-width:0;font-family:'Inter',sans-serif;font-size:.8rem;padding:5px 4px;border-radius:6px;border:1px solid rgba(var(--lms-surface-rgb),.18);background:rgba(var(--lms-surface-rgb),.05);color:var(--albatre)}
.lms-datepicker-select-year{flex:.75;min-width:68px}
.lms-datepicker-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.lms-datepicker-wd{font-size:.66rem;color:var(--albatre-faint);padding:4px 0;font-weight:600;text-transform:capitalize}
.lms-datepicker-day{background:none;border:none;color:var(--albatre);font-size:.85rem;padding:7px 0;border-radius:6px;cursor:pointer;font-family:'Inter',sans-serif}
.lms-datepicker-day:hover{background:rgba(var(--lms-surface-rgb),.1)}
.lms-datepicker-day:focus-visible{outline:2px solid var(--lms-accent);outline-offset:-2px}
.lms-datepicker-day.is-today{font-weight:700;color:var(--lms-accent)}
.lms-datepicker-day.is-selected{background:var(--gingembre);color:var(--midnight);font-weight:700}
.lms-datepicker-footer{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(var(--lms-surface-rgb),.1)}
.lms-datepicker-footbtn{flex:1;background:rgba(var(--lms-surface-rgb),.06);border:1px solid rgba(var(--lms-surface-rgb),.16);color:var(--albatre-soft);font-family:'Inter',sans-serif;font-size:.8rem;padding:7px 0;border-radius:6px;cursor:pointer}
.lms-datepicker-footbtn:hover{background:rgba(var(--lms-surface-rgb),.1);color:var(--albatre)}
/* Mobile (même seuil que la bascule barre latérale -> onglets du bas,
   voir @media(max-width:880px) plus bas) : cases plus grandes (cible
   tactile confortable) et calendrier qui prend toute la largeur utile au
   lieu d'une largeur fixe pensée pour desktop. */
@media(max-width:880px){
  .lms-datepicker-popup{width:min(320px,calc(100vw - 24px))}
  .lms-datepicker-day{padding:11px 0;font-size:.92rem}
  .lms-datepicker-nav{padding:6px 12px;font-size:1.3rem}
  .lms-datepicker-select{padding:8px 6px;font-size:.85rem}
  .lms-datepicker-footbtn{padding:10px 0;font-size:.85rem}
}
/* Photo de profil : avatar cliquable, boutons appareil photo / galerie. */
.lms-photo-row{display:flex;align-items:center;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.lms-photo-edit{position:relative;width:78px;height:78px;flex-shrink:0}
.lms-photo-edit .lms-avatar{width:100%;height:100%;cursor:pointer}
.lms-photo-badge{position:absolute;bottom:-2px;right:-2px;width:28px;height:28px;border-radius:50%;background:var(--gingembre);color:var(--midnight);display:flex;align-items:center;justify-content:center;border:2px solid var(--midnight-2);cursor:pointer}
.lms-photo-badge .ms{font-size:16px}
html[dir="rtl"] .lms-photo-badge{right:auto;left:-2px}
.lms-photo-actions{display:flex;gap:10px;flex-wrap:wrap}
.lms-photo-actions .btn{padding:9px 16px;font-size:.85rem}
/* .btn{display:inline-flex} écrase sinon la règle native [hidden]{display:none} — le
   CSS de l'auteur l'emporte toujours sur la feuille de style du navigateur, même à
   spécificité égale. */
.btn[hidden]{display:none}
/* Onglets "Tous les cours" / "Mes paiements" / "Mon enseignement" / "Ma rémunération". */
.lms-item-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 2px;border-top:1px solid rgba(var(--lms-surface-rgb),.08);flex-wrap:wrap}
.lms-item-row-click{cursor:pointer;border-radius:8px;transition:.15s}
.lms-table-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lms-col-toggle{position:relative}
.lms-col-menu{position:absolute;top:100%;left:0;z-index:20;background:var(--lms-dropdown-bg);border:1px solid rgba(var(--lms-surface-rgb),.16);border-radius:10px;padding:10px;margin-top:6px;min-width:180px;box-shadow:0 14px 34px -10px rgba(0,0,0,.6);display:flex;flex-direction:column}
.lms-col-menu[hidden]{display:none}
html[dir="rtl"] .lms-col-menu{left:auto;right:0}
.lms-col-menu label{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:.85rem;cursor:pointer;white-space:nowrap;color:var(--albatre)}
.lms-col-menu input{width:15px;height:15px;accent-color:var(--lms-accent);cursor:pointer}
.lms-table-wrap{overflow-x:auto}
/* Sur mobile, ces tableaux (Personnes/Élèves/Finances/Journal…) débordent
   presque toujours largement — le défilement horizontal marche déjà
   (overflow-x:auto ci-dessus) mais rien ne l'indiquait visuellement : un
   dégradé au bord suggère qu'il y a plus de colonnes à découvrir. */
@media(max-width:880px){
  .lms-table-wrap{position:relative}
  .lms-table-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:26px;background:linear-gradient(to left,rgba(var(--lms-base-rgb),.9),transparent);pointer-events:none}
  html[dir="rtl"] .lms-table-wrap::after{right:auto;left:0;background:linear-gradient(to right,rgba(var(--lms-base-rgb),.9),transparent)}
}
.lms-table{width:100%;border-collapse:collapse;font-size:.88rem}
.lms-table th{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(var(--lms-surface-rgb),.15);color:var(--albatre-soft);font-weight:600;white-space:nowrap;cursor:pointer;user-select:none}
html[dir="rtl"] .lms-table th{text-align:right}
.lms-table th:hover{color:var(--albatre)}
.lms-table th.sorted{color:var(--lms-accent)}
.lms-table th.sorted::after{content:" \25B2"}
.lms-table th.sorted.desc::after{content:" \25BC"}
.lms-table td{padding:9px 12px;border-bottom:1px solid rgba(var(--lms-surface-rgb),.06);white-space:nowrap;color:var(--albatre)}
.lms-table tbody tr.lms-item-row-click{cursor:pointer}
.lms-table tbody tr:hover{background:rgba(var(--lms-surface-rgb),.05)}
/* Ligne "nom d'élève" du pointage manuel des Présences (voir
   renderSeancesManuel, js/mon-compte.js) — triangle de repli + nom +
   icône frais d'inscription + boutons Présent/Absent, tous collés sur
   la même ligne (demande explicite : plus de colonne de boutons
   séparée poussée à droite). flex-wrap permet aux boutons de passer
   sous le nom plutôt que de déborder si la ligne est trop étroite. */
.presences-eleve-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;row-gap:4px}
.presences-toggle-tri{background:none;border:none;padding:0;margin:0;cursor:pointer;color:var(--albatre-faint);display:flex;flex-shrink:0}
.presences-toggle-tri .ms{font-size:18px;transition:transform .15s}
.presences-toggle-tri[aria-expanded="true"] .ms{transform:rotate(90deg)}
.presences-frais-icon{font-size:17px;flex-shrink:0}
/* Boutons Présent/Absent (voir presenceStatutBoutons, js/mon-compte.js) —
   .btn-sm plutôt que la taille générique du site (pensée pour un CTA de
   page publique, beaucoup trop large ici) ; libellé masqué sous 600px
   (icône seule) pour ne jamais dépasser la largeur de l'écran sur mobile.
   Posés directement dans .presences-eleve-row, collés au nom (demande
   explicite), plutôt que dans une colonne de tableau séparée. */
.presences-statut-boutons{display:flex;gap:6px;flex-wrap:nowrap;margin-inline-start:2px}
.presences-statut-btn{white-space:nowrap}
.presences-statut-btn .ms{font-size:16px}
.presences-statut-btn.is-present{background:var(--lms-ok);color:var(--lms-page-bg);border-color:var(--lms-ok)}
.presences-statut-btn.is-absent{background:var(--lms-err);color:var(--lms-page-bg);border-color:var(--lms-err)}
@media(max-width:600px){
  .presences-btn-label{display:none}
  .presences-statut-btn{padding:6px 8px}
  .presences-statut-boutons{gap:4px}
}
/* Séance repliée par défaut (voir renderSeancesManuel) — seuls
   titre/horaire/professeur restent visibles tant qu'on n'a pas cliqué,
   la liste des élèves (souvent longue) ne s'affiche qu'au clic. Même
   principe de triangle que .kc-ref, mais posé dans le <h3> plutôt qu'en
   ligne du <summary> (titre + sous-titre restent sur deux lignes). */
.presences-seance summary{cursor:pointer;list-style:none}
.presences-seance summary::-webkit-details-marker{display:none}
.presences-seance summary h3{display:flex;align-items:center;gap:6px;margin:0 0 2px}
.presences-seance summary h3::before{content:"▸";color:var(--lms-accent);font-size:.85em;transition:transform .15s;flex-shrink:0}
.presences-seance[open] summary h3::before{transform:rotate(90deg)}
.presences-seance summary:hover h3{color:var(--albatre)}
.presences-seance-search-row{margin:10px 0 8px}
.presences-seance-search-row .field{margin:0}
/* Ligne de totaux optionnelle (voir renderTable::opts.totalsRow, ex.
   Trésorerie) — bordure double pour la détacher visuellement des lignes de
   données, jamais cliquable/survolable comme elles. */
.lms-table tbody tr.lms-table-total-row{border-top:2px solid rgba(var(--lms-surface-rgb),.2);cursor:default}
.lms-table tbody tr.lms-table-total-row:hover{background:none}
.lms-table tbody tr.lms-table-total-row td{color:var(--albatre)}
/* Titre de groupe (voir renderTable::opts.groupBy, ex. Recettes par mode
   de paiement) — une ligne pleine largeur au-dessus de chaque groupe,
   jamais cliquable/survolable comme une ligne de donnée. */
.lms-table tbody tr.lms-table-group-row{background:rgba(var(--lms-surface-rgb),.07);cursor:default}
.lms-table tbody tr.lms-table-group-row:hover{background:rgba(var(--lms-surface-rgb),.07)}
.lms-table tbody tr.lms-table-group-row td{padding:8px 12px;border-bottom:1px solid rgba(var(--lms-surface-rgb),.12);white-space:normal}
.lms-group-title{font-weight:700;color:var(--albatre)}
.lms-group-sub{color:var(--albatre-faint);font-size:.82rem;margin-inline-start:8px}
.lms-item-row-click:hover{background:rgba(var(--lms-surface-rgb),.05)}
.kc-subform{margin-top:10px;padding-top:10px;border-top:1px solid rgba(var(--lms-surface-rgb),.1)}
.lms-table td .btn{padding:6px 12px;font-size:.8rem;white-space:nowrap}
.lms-item-row:first-child{border-top:none}
.lms-item-main{min-width:0}
.lms-item-main b{display:block;font-size:.96rem}
.lms-item-main span{color:var(--albatre-faint);font-size:.83rem}
/* Salle avec message(s) non lu(s) dans la liste de Messagerie (voir
   js/matrix-chat.js::renderRoomsList) — aperçu du dernier message en clair
   plutôt qu'estompé, comme Element, la pastille .lms-badge suffisant déjà
   à distinguer la ligne au premier coup d'œil. */
.matrix-room-unread .lms-item-main span{color:var(--albatre);font-weight:600}
.lms-tag{display:inline-flex;align-items:center;gap:5px;border-radius:14px;padding:4px 11px;font-size:.78rem;font-weight:600;white-space:nowrap}
.lms-tag.ok{background:rgba(var(--lms-ok-rgb),.15);color:var(--lms-ok)}
.lms-tag.warn{background:rgba(var(--lms-warn-rgb),.15);color:var(--lms-warn)}
.lms-tag.err{background:rgba(var(--lms-err-rgb),.15);color:var(--lms-err)}
.lms-tag.neutral{background:rgba(var(--lms-surface-rgb),.08);color:var(--albatre-faint)}
.lms-empty{color:var(--albatre-faint);font-size:.9rem;padding:14px 2px}
.lms-cap-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:20px}
.lms-cap-kpi{background:rgba(var(--lms-surface-rgb),.04);border:1px solid rgba(var(--lms-surface-rgb),.1);border-radius:10px;padding:14px 16px}
.lms-cap-kpi b{display:block;font-size:1.6rem;font-family:'Bebas Neue',sans-serif;letter-spacing:.02em}
.lms-cap-kpi span{color:var(--albatre-faint);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.lms-cap-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid rgba(var(--lms-surface-rgb),.06)}
.lms-cap-row:last-child{border-bottom:none}
.lms-cap-label{flex:0 0 auto;min-width:170px;max-width:260px}
.lms-cap-label b{display:block;font-size:.92rem}
.lms-cap-label span{color:var(--albatre-faint);font-size:.78rem}
.lms-cap-track{flex:1;height:10px;border-radius:999px;background:rgba(var(--lms-surface-rgb),.08);overflow:hidden;min-width:80px}
.lms-cap-fill{height:100%;border-radius:999px;transition:width .3s}
.lms-cap-fill.ok{background:var(--lms-ok)}
.lms-cap-fill.warn{background:var(--lms-warn)}
.lms-cap-fill.err{background:var(--lms-err)}
.lms-cap-count{flex:0 0 auto;min-width:76px;text-align:end;font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--albatre-soft)}
.lms-cap-illimitee{color:var(--albatre-faint);font-style:italic;font-size:.82rem}
.lms-presence-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;background:rgba(var(--lms-surface-rgb),.04);border:1px solid rgba(var(--lms-surface-rgb),.1);border-radius:12px;padding:24px;margin:16px 0}
.lms-presence-qr-wrap img{width:220px;height:220px;background:#fff;border-radius:8px;padding:10px}
.lms-presence-qr-status{color:var(--lms-err);font-size:.85rem;margin:0}
.lms-cap-sub{margin:6px 0 0;padding-inline-start:18px;border-inline-start:2px solid rgba(var(--lms-surface-rgb),.1)}
.lms-cap-sub .lms-cap-row{padding:7px 2px}
.lms-cap-sub .lms-cap-label{font-size:.86rem;min-width:140px}
.lms-cap-theorique{color:var(--albatre-faint);font-size:.72rem;font-style:italic}
.lms-cap-row-details > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px}
.lms-cap-row-details > summary::-webkit-details-marker{display:none}
.lms-cap-row-details > summary::before{content:'▸';display:inline-block;width:12px;flex:0 0 auto;color:var(--albatre-faint);font-size:.7rem}
.lms-cap-row-details[open] > summary::before{content:'▾'}
.lms-cap-row-details > summary .lms-cap-row{flex:1;min-width:0}
html[dir="rtl"] .lms-cap-label{text-align:right}
@media(max-width:600px){
  .lms-cap-row{flex-wrap:wrap}
  .lms-cap-label{flex:1 1 100%;max-width:none}
  .lms-cap-track{flex:1 1 auto}
}
.lms-calendrier-wrap{overflow-x:auto}
.lms-calendrier-table{width:100%;border-collapse:collapse;font-size:.86rem}
.lms-calendrier-table th{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(var(--lms-surface-rgb),.15);color:var(--albatre-soft);font-weight:600;white-space:nowrap;vertical-align:top}
html[dir="rtl"] .lms-calendrier-table th{text-align:right}
.lms-calendrier-table td{padding:10px 12px;border-bottom:1px solid rgba(var(--lms-surface-rgb),.06);color:var(--albatre);vertical-align:top;min-width:220px}
.lms-calendrier-table td:first-child{white-space:nowrap;color:var(--albatre-soft)}
.lms-calendrier-domaines{list-style:none;margin:6px 0 0;padding:0;font-size:.84rem}
.lms-calendrier-domaines li{padding:2px 0 2px 8px}
html[dir="rtl"] .lms-calendrier-domaines li{padding:2px 8px 2px 0}
.lms-calendrier-domaine-nom{color:var(--albatre-faint)}
.lms-domaine-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.lms-empty-cell{color:var(--albatre-faint);font-size:.84rem}
/* Édition inline du contenu pédagogique par les enseignant·e·s — voir
   mon-compte.js::makeEditableField/multiLangEditableHtml. Discret au repos
   (aucune différence visuelle avec le texte statique), liseré en pointillés
   au survol/focus pour signaler l'éditabilité sans alourdir la lecture. */
.lms-editable{cursor:text;border-radius:6px;padding:2px 5px;margin:-2px -5px;outline:none;transition:background-color .15s,box-shadow .15s}
.lms-editable:hover{box-shadow:0 0 0 1px dashed rgba(var(--lms-surface-rgb),.35)}
.lms-editable:focus{box-shadow:0 0 0 1px dashed var(--lms-accent);background:rgba(254,255,214,.06)}
.lms-editable-saving{opacity:.6}
.lms-editable-ok{background:rgba(var(--lms-ok-rgb),.16)}
.lms-editable-err{background:rgba(var(--lms-err-rgb),.16)}
.lms-editable-main{display:flex;align-items:flex-start;gap:6px}
.lms-editable-main .lms-ml-field{flex:1;min-width:0}
.lms-lang-toggle{background:none;border:none;color:var(--albatre-faint);cursor:pointer;font-size:.9rem;line-height:1;padding:2px 4px;border-radius:6px;flex-shrink:0}
.lms-lang-toggle:hover{background:rgba(var(--lms-surface-rgb),.08);color:var(--albatre)}
.lms-lang-extra{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.lms-lang-extra-row{display:flex;align-items:flex-start;gap:8px}
.lms-lang-extra-row .lms-ml-field{flex:1;min-width:0}
/* Préserve les sauts de ligne (ex. description de cours en plusieurs
   paragraphes) — sans effet sur un texte sans saut de ligne existant. */
.lms-ml-field,.kc-subform p{white-space:pre-wrap}
.lms-prog-entrees,.lms-prog-entrees-ro{display:flex;flex-direction:column;gap:10px}
/* Couleur du domaine posée en liseré directement en inline (voir
   domaineColor) plutôt qu'ici : une classe ne peut pas porter une couleur
   dynamique par domaine. Chaque entrée montre désormais tout : nom du
   domaine, intitulé, contenu réel, mode/notions/œuvres — plus de repli sur
   un simple liseré de couleur renvoyant à une légende externe. */
.lms-prog-entree{display:flex;align-items:flex-start;flex-wrap:wrap;gap:2px 6px;padding-inline-start:8px;padding-block:1px}
.lms-prog-entree .lms-prog-domaine-nom{flex-basis:100%;font-size:.82rem}
.lms-prog-entree .lms-prog-intitule{flex:1;min-width:140px}
.lms-reel-toggle,.lms-prog-delete{background:none;border:none;cursor:pointer;font-size:.85rem;line-height:1.4;padding:0 3px;border-radius:6px;opacity:.35;flex-shrink:0;color:var(--albatre-soft)}
.lms-reel-toggle:hover,.lms-prog-delete:hover{opacity:1;background:rgba(var(--lms-surface-rgb),.08)}
.lms-reel-toggle-filled{opacity:.85;color:var(--lms-accent)}
.lms-prog-delete:hover{color:var(--lms-err)}
.lms-prog-contenu{flex-basis:100%;font-style:italic;font-size:.92em;opacity:.9}
.lms-prog-contenu-ro{flex-basis:100%;font-size:.92em;opacity:.9}
.lms-prog-contenu-label{font-style:italic;color:var(--albatre-faint)}
.lms-prog-detail{flex-basis:100%;margin:0;font-size:.82rem;color:var(--albatre-soft)}
/* Œuvre cliquable dans le détail du programme (voir oeuvresLigneHtml,
   js/mon-compte.js) — ouvre son texte dans une modale, même rendu que
   Club Mālūf. Style lien discret plutôt que bouton/pastille : reste dans
   le fil du texte de .lms-prog-detail. */
.lms-prog-oeuvre-link{background:none;border:none;padding:0;margin:0;font:inherit;font-weight:600;color:var(--lms-accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.lms-prog-oeuvre-link:hover{color:var(--albatre)}
/* Bouton "+" (ajouter un domaine) — icône seule, discret, pas de texte
   répété à chaque semaine. Déplie .lms-add-domaine-picker (pastilles de
   couleur, une par domaine absent) au clic. */
.lms-add-domaine{background:none;border:1px dashed rgba(var(--lms-surface-rgb),.35);color:var(--albatre-faint);cursor:pointer;width:20px;height:20px;line-height:1;border-radius:50%;font-size:.85rem;margin-top:4px;margin-inline-start:8px;flex-shrink:0}
.lms-add-domaine:hover{color:var(--albatre);border-color:var(--lms-accent)}
.lms-add-domaine-picker{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;margin-inline-start:8px}
.lms-add-domaine-picker .lms-domaine-dot-btn{background:rgba(var(--lms-surface-rgb),.06);border:1px solid rgba(var(--lms-surface-rgb),.18);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lms-add-domaine-picker .lms-domaine-dot-btn:hover{border-color:var(--lms-accent);transform:scale(1.1)}
.lms-add-domaine-picker .lms-domaine-dot{width:11px;height:11px}
.kc-checklist{display:flex;flex-wrap:wrap;gap:6px 16px;margin:4px 0 6px}
.kc-checklist label{display:flex;align-items:center;gap:7px;font-size:.9rem;color:var(--albatre);cursor:pointer}
.kc-checklist input{width:16px;height:16px;accent-color:var(--lms-accent);cursor:pointer}
.kc-checklist input:disabled{cursor:default}
.kc-filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 16px}
.kc-chip{background:rgba(var(--lms-surface-rgb),.06);border:1px solid rgba(var(--lms-surface-rgb),.18);color:var(--albatre-soft);border-radius:12px;padding:3px 10px;font-size:.74rem;font-family:'Inter',sans-serif;cursor:pointer;transition:.15s;line-height:1.6}
.kc-chip:hover{background:rgba(var(--lms-surface-rgb),.1)}
.kc-chip.active{background:var(--gingembre);border-color:var(--gingembre);color:var(--midnight);font-weight:700}
.kc-filterbar .btn{padding:5px 14px;font-size:.78rem;gap:6px}
.kc-chip-domaine{display:inline-flex;align-items:center;gap:6px}
.kc-showall{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--albatre-faint);cursor:pointer;margin:4px 0}
.kc-showall input{width:16px;height:16px;accent-color:var(--lms-accent);cursor:pointer}
.lms-checklist{max-height:260px;overflow-y:auto;border:1px solid rgba(var(--lms-surface-rgb),.12);border-radius:8px;padding:6px 10px}
.lms-checklist .kc-showall{margin:6px 0}

/* Onglet "Demandes" (Leads) — cartes verticales tap-friendly plutôt que le
   tableau générique renderTable() (défilement horizontal sur mobile, pas
   ergonomique pour une consultation/saisie rapide après un appel — demande
   explicite). */
.lms-lead-cards{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.lms-lead-card{background:rgba(var(--lms-surface-rgb),.04);border:1px solid rgba(var(--lms-surface-rgb),.12);border-radius:12px;padding:12px 14px;cursor:pointer;transition:background .15s,border-color .15s}
.lms-lead-card:hover,.lms-lead-card:active{background:rgba(var(--lms-surface-rgb),.09);border-color:rgba(var(--lms-surface-rgb),.24)}
.lms-lead-card-top{display:flex;align-items:center;gap:8px}
.lms-lead-canal-icon{font-size:1.2rem;color:var(--lms-accent);flex:none}
.lms-lead-card-name{font-weight:700;font-size:1rem;color:var(--albatre);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lms-lead-card-meta{color:var(--albatre-soft);font-size:.82rem;margin-top:4px}
.lms-lead-card-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kc-ref{margin-top:30px;border-top:1px solid rgba(var(--lms-surface-rgb),.08);padding-top:4px}
/* Glossaire "Comment lire ces chiffres ?" (onglet Marketing) — mêmes
   paires terme/explication qu'un <dl> classique, dans le <details> .kc-ref. */
.lms-help-list{margin:8px 2px 4px;padding:0}
.lms-help-list dt{font-weight:600;color:var(--albatre);margin-top:12px;font-size:.92rem}
.lms-help-list dt:first-child{margin-top:0}
.lms-help-list dd{margin:3px 0 0;color:var(--albatre-soft);font-size:.88rem;line-height:1.55}
/* Page d'accueil de l'espace privé — cartes-raccourcis "vivantes" par rôle
   (voir js/mon-compte.js::renderAccueilPanel) : icône, titre du panneau visé,
   une ligne de donnée réelle (prochain cours, paiement en attente...). */
.lms-home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:4px}
.lms-home-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:rgba(var(--lms-surface-rgb),.04);border:1px solid rgba(var(--lms-surface-rgb),.1);cursor:pointer;transition:.15s;position:relative}
.lms-home-card:hover{background:rgba(var(--lms-surface-rgb),.08);border-color:rgba(var(--lms-surface-rgb),.2)}
.lms-home-icon{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:rgba(var(--lms-surface-rgb),.08);color:var(--lms-accent);display:flex;align-items:center;justify-content:center}
.lms-home-icon .ms{font-size:24px}
.lms-home-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lms-home-body b{font-size:.96rem;color:var(--albatre);font-weight:600}
.lms-home-body span{font-size:.82rem;color:var(--albatre-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lms-home-card .lms-badge{margin-left:0;flex-shrink:0}
html[dir="rtl"] .lms-home-card .lms-badge{margin-right:0}
.kc-ref summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:12px 2px;font-weight:600;font-size:.92rem;color:var(--albatre-soft)}
.kc-ref summary::-webkit-details-marker{display:none}
.kc-ref summary::before{content:"▸";color:var(--lms-accent);font-size:.8em;transition:transform .15s;flex-shrink:0}
.kc-ref[open] summary::before{transform:rotate(90deg)}
.kc-ref summary:hover{color:var(--albatre)}
html[dir="rtl"] .kc-ref summary::before{content:"◂"}
html[dir="rtl"] .kc-ref[open] summary::before{transform:rotate(-90deg)}
.pdf-modal{position:fixed;inset:0;z-index:1200;background:rgba(5,9,14,.86);display:flex;flex-direction:column;padding:16px}
.pdf-modal-head{display:flex;align-items:center;gap:10px;color:var(--albatre);padding:0 2px 12px}
.pdf-modal-head h3{flex:1;margin:0;font-size:1.02rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdf-modal-head a,.pdf-modal-head button{background:rgba(var(--lms-surface-rgb),.1);border:1px solid rgba(var(--lms-surface-rgb),.22);color:var(--albatre);border-radius:9px;padding:9px 15px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.9rem;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.pdf-modal-head a:hover,.pdf-modal-head button:hover{border-color:var(--lms-accent)}
.pdf-zoom{display:flex;align-items:center;gap:6px}
.pdf-zoom .pdf-zo{padding:6px 13px;font-size:1.15rem;line-height:1;font-weight:700}
.pdf-zlvl{min-width:46px;text-align:center;font-size:.85rem;opacity:.85}
.pdf-scroll{flex:1;overflow:auto;border-radius:12px;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom;display:flex;justify-content:center}
.pdf-pages{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0;transform-origin:top center;will-change:transform}
.pdf-cv{background:#fff;border-radius:6px;box-shadow:0 6px 22px rgba(0,0,0,.45);max-width:100%}
.pdf-load{color:var(--albatre);opacity:.7;padding:30px;font-size:1.4rem}
.pdf-frame{flex:1;border:none;border-radius:12px;background:#fff;width:100%}
@media(max-width:560px){.pdf-modal{padding:8px}.pdf-modal-head{gap:6px;flex-wrap:wrap}.pdf-modal-head h3{flex:1 1 100%;font-size:.92rem;order:-1}.pdf-modal-head a,.pdf-modal-head button{padding:7px 11px}}
.stu-card{background:linear-gradient(135deg,#0c2a38,#163f52);border:1px solid rgba(231,160,82,.4);border-radius:20px;padding:22px;max-width:430px;box-shadow:0 18px 50px rgba(0,0,0,.4);color:var(--albatre)}
.stu-card-top{display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(231,160,82,.25);padding-bottom:15px;margin-bottom:18px}
.stu-logo{width:46px;height:46px;object-fit:contain;flex-shrink:0}
.stu-inst{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.04em;color:var(--gingembre);line-height:1}
.stu-subt{font-size:.74rem;color:var(--albatre-soft);text-transform:uppercase;letter-spacing:.2em;margin-top:3px}
.stu-card-body{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.stu-photo{position:relative;width:84px;height:84px;border-radius:14px;overflow:hidden;background:var(--gingembre);color:var(--midnight);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:2.3rem;flex-shrink:0;border:2px solid rgba(231,160,82,.5)}
.stu-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stu-info{flex:1;min-width:150px}
.stu-name{font-size:1.3rem;font-weight:700;margin-bottom:5px}
.stu-meta{font-size:.88rem;color:var(--albatre-soft);margin-top:2px}
.stu-badge{display:inline-block;margin-top:11px;font-size:.74rem;font-weight:700;padding:4px 12px;border-radius:20px}
.stu-badge.ok{background:rgba(125,224,168,.18);color:#9fe7be;border:1px solid rgba(125,224,168,.4)}
.stu-badge.off{background:rgba(255,200,120,.15);color:#ffce8a;border:1px solid rgba(255,200,120,.4)}
.stu-qr{flex-shrink:0;margin-inline-start:auto}
.stu-qr img{width:100px;height:100px;border-radius:10px;background:#fff;padding:6px;display:block}
.carte-page{background:radial-gradient(circle at 50% -10%,#0e3242,#071821 75%);min-height:100vh;margin:0;font-family:'Inter',sans-serif}
.carte-wrap{max-width:520px;margin:0 auto;padding:42px 18px 60px;text-align:center}
.carte-wrap .stu-card{margin:0 auto;text-align:left}
.carte-brand img{width:60px;margin-bottom:28px}
.carte-foot{margin-top:26px;color:var(--albatre-faint);font-size:.85rem}
.carte-foot a,.carte-brand{color:var(--gingembre);text-decoration:none}
.carte-loading,.carte-err{color:var(--albatre-soft);padding:40px}
.cic{color:var(--gingembre);font-size:21px;flex-shrink:0}
.lms-card-h{display:flex;align-items:center;gap:9px}
.lms-q{display:inline-flex;align-items:center;gap:9px}

/* Masquer le menu latéral (bouton #lms-menu-toggle dans le header, voir
   js/mon-compte.js) — .lms-side disparaît complètement (pas un simple
   repli en icônes), .lms-main récupère toute la largeur. Sans effet sous
   880px, .lms-side y étant déjà masqué au profit de .lms-tabbar. */
body.lms.lms-menu-collapsed .lms-side{display:none}

/* ---- Dashboard Cash (Finances > superadmin, js/mon-compte.js::renderDashboardCash) ---- */
.lms-dashcash-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin-bottom:14px}
.lms-dashcash-toolbar .field{margin:0}
.lms-dashcash-toolbar select,.lms-dashcash-toolbar input{background:rgba(var(--lms-surface-rgb),.06);border:1px solid rgba(var(--lms-surface-rgb),.22);color:var(--albatre);border-radius:8px;padding:7px 10px;font-family:'Inter',sans-serif;font-size:.88rem}
.lms-dashcash-toolbar #dashcash-fullscreen{margin-inline-start:auto}
/* Icônes zoom texte (+ bouton Discussion) du Club Mālūf : fixées en haut de
   l'écran en défilant dans le répertoire/le détail d'une nūba — demande
   explicite, surtout utile sur mobile où le texte peut être long. .lms-body
   est le seul conteneur qui défile réellement ici (voir plus haut), donc
   "sticky" s'accroche à son bord haut — même fond flouté que .lms-head,
   pour que le texte défilé en dessous ne transparaisse pas. */
#club-maluf-toolbar{position:sticky;top:0;z-index:10;background:rgba(var(--lms-base-rgb),.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding-block:8px}
.lms-dashcash-table{width:100%;border-collapse:collapse;font-size:.84rem;white-space:nowrap}
.lms-dashcash-table th,.lms-dashcash-table td{padding:7px 12px;border-bottom:1px solid rgba(var(--lms-surface-rgb),.08);text-align:right}
html[dir="rtl"] .lms-dashcash-table th,html[dir="rtl"] .lms-dashcash-table td{text-align:left}
.lms-dashcash-table thead th{text-align:right;color:var(--albatre-soft);font-weight:600;position:sticky;top:0;background:var(--lms-page-bg);z-index:2}
html[dir="rtl"] .lms-dashcash-table thead th{text-align:left}
.lms-dashcash-table tbody th{text-align:left;font-weight:500;color:var(--albatre-soft);position:sticky;left:0;background:var(--lms-page-bg);z-index:1}
html[dir="rtl"] .lms-dashcash-table tbody th{text-align:right;left:auto;right:0}
.lms-dashcash-table thead th:first-child{position:sticky;left:0;z-index:3}
html[dir="rtl"] .lms-dashcash-table thead th:first-child{left:auto;right:0}
.lms-dashcash-table td.pos{color:var(--lms-ok)}
.lms-dashcash-table td.neg{color:var(--lms-err)}
/* Cellule contenant un montant "prévu" (pas encore réalisé) — voir le
   bouton #dashcash-toggle-prevu, qui décide de l'inclure ou non. */
.lms-dashcash-table td.prevu{font-style:italic;opacity:.72}
/* Bouton "Prévues" — bordure accentuée pour rester repérable même à l'état
   ghost (masqué), voir js/mon-compte.js::applyPrevuToggleUI. */
.lms-dashcash-prevu-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lms-dashcash-prevu-label{font-size:.78rem;color:var(--albatre-faint);margin-inline-end:2px}
.lms-dashcash-section th{background:rgba(var(--lms-surface-rgb),.06);color:var(--albatre);font-weight:700;text-align:left;padding-top:14px}
html[dir="rtl"] .lms-dashcash-section th{text-align:right}
.lms-dashcash-total th,.lms-dashcash-total td{border-top:2px solid rgba(var(--lms-surface-rgb),.25);border-bottom:2px solid rgba(var(--lms-surface-rgb),.25);font-weight:700;color:var(--albatre)}
.lms-dashcash-check th,.lms-dashcash-check td{color:var(--albatre-faint);font-style:italic}
.lms-dashcash-check-alert th,.lms-dashcash-check-alert td{color:var(--lms-err);font-style:normal;font-weight:700}
.lms-dashcash-editable{cursor:pointer}
.lms-dashcash-editable:hover th,.lms-dashcash-editable:hover td{background:rgba(var(--lms-surface-rgb),.08)}
.lms-dashcash-catrow{cursor:pointer;font-weight:600}
.lms-dashcash-catrow:hover th,.lms-dashcash-catrow:hover td{background:rgba(var(--lms-surface-rgb),.08)}
.lms-dashcash-triangle{background:none;border:none;color:var(--albatre-soft);font-size:.7rem;padding:0 6px 0 0;cursor:pointer;line-height:1;vertical-align:middle}
.lms-dashcash-catdetail th{padding-left:28px;font-weight:400;color:var(--albatre-faint)}
html[dir="rtl"] .lms-dashcash-catdetail th{padding-left:12px;padding-right:28px}

/* Plein écran du tableau Dashboard Cash (bouton #dashcash-fullscreen) —
   même principe que .pdf-modal (position fixed pleine page) mais habillé
   avec les jetons de thème LMS pour rester lisible en mode jour/nuit. */
.lms-fullscreen{position:fixed;inset:0;z-index:1200;background:var(--lms-page-bg);padding:22px 26px;overflow:auto;display:flex;flex-direction:column}
.lms-fullscreen #dashcash-table-wrap{flex:1;overflow:auto}
body.lms-fullscreen-lock{overflow:hidden}

/* Modal "Nouvelle dépense"/édition (Dashboard Cash) — au-dessus de
   .lms-fullscreen (z-index 1200) pour rester utilisable même en mode
   plein écran du tableau. */
.lms-modal-backdrop{position:fixed;inset:0;z-index:1300;background:rgba(5,9,14,.72);display:flex;align-items:center;justify-content:center;padding:20px}
/* display:flex ci-dessus écrase sinon la règle native [hidden]{display:none}
   (même spécificité, cette règle-ci vient après — même piège que .btn, voir
   plus haut) : le modal restait affiché en permanence, bloquant tout clic
   dès l'arrivée sur le Dashboard Cash. */
.lms-modal-backdrop[hidden]{display:none}
.lms-modal{background:var(--lms-dropdown-bg);border:1px solid rgba(var(--lms-surface-rgb),.16);border-radius:14px;box-shadow:0 24px 60px -10px rgba(0,0,0,.6);max-width:640px;width:100%;max-height:88vh;overflow:auto;padding:22px 26px}
@media(max-width:560px){.lms-modal{padding:16px}}
/* Sous-modal "Nouvelle catégorie"/"Nouveau fournisseur" (bouton + à côté
   d'un <select>, voir js/mon-compte.js::openSubEntityModal) — z-index
   au-dessus du modal "Nouvelle dépense" déjà ouvert derrière lui. */
.lms-modal-nested{z-index:1400}
.lms-modal-sm{max-width:420px}
/* Texte d'une œuvre (voir openOeuvreTexteModal, js/mon-compte.js) — plus
   large que .lms-modal par défaut (640px) : les vers sadr/عجز (.lms-vers,
   flex wrap) ont besoin d'espace pour ne pas se retrouver comprimés/
   empilés comme dans une boîte de dialogue étroite, contrairement à la
   même forme de poème dans le Club Mālūf qui remplit toute la largeur de
   .lms-body (pas de max-width). */
.lms-modal-lg{max-width:920px}
.lms-select-add{display:flex;gap:8px;align-items:stretch}
.lms-select-add select{flex:1;min-width:0}
.lms-btn-add{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:34px;padding:0;margin:0;font-size:1.2rem;line-height:1;border-radius:6px}

.lms-tabbar{display:none}

@media(max-width:880px){
  .lms-side{display:none}
  /* Colonne flex sur toute la hauteur d'écran (en-tête fixe + corps qui
     défile lui-même) plutôt qu'un défilement de la page entière avec des
     hauteurs de sous-vues calculées à la main (calc(100dvh - Npx), voir
     plus bas) : .lms-head n'a plus besoin d'être "collant" pendant un
     défilement de PAGE qui n'existe plus, il reste simplement le premier
     élément fixe de la colonne — sa hauteur réelle (variable selon
     env(safe-area-inset-top) sur un écran à encoche) n'a plus besoin
     d'être devinée nulle part : place à ce qui reste (flex:1) sans aucune
     valeur en dur. Unique source de vérité : 100dvh sur .lms-shell. */
  .lms-shell{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
  .lms-main{flex:1;min-height:0;display:flex;flex-direction:column}
  .lms-head{position:static;flex-shrink:0;padding:16px 18px;padding-top:max(16px,env(safe-area-inset-top))}
  .lms-htitle{font-size:1.6rem}
  /* padding-bottom nettement plus large que .lms-tabbar (~66px hors
     encoche) — laisse une marge confortable après le dernier contenu au
     lieu de coller pile à sa hauteur (trop juste : un débordement mineur
     dans un panneau enfant, comme Club Mālūf ci-dessous, suffisait à faire
     recouvrir la fin de page par le menu). */
  .lms-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px calc(140px + env(safe-area-inset-bottom))}
  .lms-hello{font-size:2rem}
  .lms-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:300;background:rgba(var(--lms-base-rgb),.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(var(--lms-surface-rgb),.1);padding:8px 4px calc(8px + env(safe-area-inset-bottom));overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Sous 880px, .lms-side (ce que #lms-menu-toggle masque à l'origine,
     voir mon-compte.js) est déjà masqué par la règle ci-dessus, donc
     inerte — le bouton reprend ici un rôle utile : masquer/afficher la
     barre d'onglets du bas (même mécanisme lms-menu-collapsed, aucune
     nouvelle logique JS), pour regagner l'espace vertical qu'elle
     occupe en permanence (surtout utile en pleine lecture d'une
     discussion ou d'une longue liste). */
  body.lms-menu-collapsed .lms-tabbar{display:none}
  body.lms-menu-collapsed .lms-body{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .lms-tab{flex:1 0 auto;min-width:62px;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--albatre-faint);font-family:'Inter',sans-serif;font-size:.66rem;cursor:pointer;padding:4px 2px;position:relative}
  .lms-tab .ic{height:26px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--lms-accent)}
  .lms-tab .ic .ms{font-size:26px}
  .lms-tab.active{color:var(--lms-accent)}
  .lms-tab .lms-badge{position:absolute;top:-3px;left:calc(50% + 6px);margin:0}
  html[dir="rtl"] .lms-tab .lms-badge{left:auto;right:calc(50% + 6px)}
  .lms-tab[hidden]{display:none}
}

/* ===== PWA : bouton « Installer » + astuce iOS ===== */
.pwa-install{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:240;background:var(--gingembre);color:var(--midnight);border:none;border-radius:26px;padding:12px 22px;font-family:'Inter',sans-serif;font-weight:700;font-size:.9rem;cursor:pointer;box-shadow:0 14px 34px -10px rgba(0,0,0,.65);display:inline-flex;align-items:center;gap:8px}
.pwa-install:hover{background:#fff;transform:translateX(-50%) translateY(-2px)}
.pwa-tip{position:fixed;left:16px;right:16px;bottom:18px;z-index:240;background:rgba(8,31,44,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--albatre);border:1px solid rgba(250,255,245,.16);border-radius:12px;padding:13px 16px;display:flex;align-items:center;gap:12px;font-size:.9rem;line-height:1.5;box-shadow:0 18px 44px -16px rgba(0,0,0,.7);max-width:520px;margin:0 auto}
.pwa-tip button{margin-inline-start:auto;background:none;border:none;color:var(--albatre-soft);font-size:1.5rem;line-height:1;cursor:pointer;flex-shrink:0;padding:0 4px}
body.menu-open .pwa-install,body.menu-open .pwa-tip{display:none}

/* ===== Lisibilité mobile : titres qui ne débordent jamais ===== */
.hero h1, .page-banner h1, .sec h2, .cta-band h2, .manifest h2, .sec-head h2 { overflow-wrap:break-word; }
@media(max-width:560px){
  .page-banner h1{font-size:clamp(1.9rem,8.4vw,2.9rem);line-height:1.04}
  .hero h1{font-size:clamp(2.2rem,10vw,3.6rem)}
  .sec h2,.cta-band h2,.manifest h2{font-size:clamp(1.7rem,7vw,2.5rem)}
  .sec-head h2,.feat .head h2,.agenda .head h2,.gallery .head h2{font-size:1.55rem}
  .page-banner .intro,.hero p{font-size:1.04rem}
  .row-head h2{font-size:1.5rem}
}

/* ===== Pré-inscription : formulaire en étapes (dareloud.tn/pre-inscription) ===== */
.wizard{max-width:820px;margin:0 auto}
.wizard-progress{display:flex;list-style:none;gap:8px;margin-bottom:40px}
.wizard-progress li{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--albatre-faint)}
.wizard-progress-n{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(250,255,245,.25);font-family:'Inter',sans-serif;font-weight:700;font-size:.9rem}
.wizard-progress-label{font-size:.72rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.wizard-progress li.is-active,.wizard-progress li.is-done{color:var(--albatre)}
.wizard-progress li.is-active .wizard-progress-n{background:var(--gingembre);color:var(--midnight);border-color:var(--gingembre)}
.wizard-progress li.is-done .wizard-progress-n{background:rgba(250,255,245,.14);border-color:rgba(250,255,245,.4)}
.wizard-step h2{margin-bottom:20px}
.wizard-error{background:rgba(255,154,154,.12);border:1px solid rgba(255,154,154,.4);color:#ffbcbc;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:.9rem}
.wizard-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.wizard-cards-sub{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-top:14px}
.wizard-card{background:var(--midnight-2);border:1px solid rgba(250,255,245,.1);border-radius:8px;padding:20px 18px;cursor:pointer;text-align:start;font-family:inherit;color:var(--albatre);transition:transform .2s var(--ease),border-color .2s var(--ease)}
.wizard-card:hover{transform:translateY(-3px);border-color:rgba(254,255,214,.34)}
.wizard-card.is-selected{border-color:var(--gingembre);background:rgba(254,255,214,.06)}
.wizard-card strong{display:block;font-size:1.05rem;margin-bottom:6px}
.wizard-card .wizard-card-prix{color:var(--gingembre);font-size:.85rem;font-weight:600}
.wizard-subchoice{margin-top:28px}
.wizard-subchoice h3{font-size:1rem;margin-bottom:4px;color:var(--albatre-soft)}
.wizard-price{background:var(--midnight-2);border:1px solid rgba(250,255,245,.1);border-radius:8px;padding:22px 24px;margin-bottom:24px}
.wizard-price .wizard-price-montant{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:var(--gingembre);letter-spacing:.02em}
.wizard-price .wizard-price-frais{margin-top:10px;font-size:.88rem;color:var(--albatre-soft)}
.wizard-modalites{display:grid;gap:14px}
.wizard-payment-methods{margin-top:28px}
.wizard-payment-methods h3{font-size:1rem;margin-bottom:12px;color:var(--albatre-soft)}
.wizard-payment-methods ol{margin:0 0 20px;padding-inline-start:22px;display:grid;gap:8px;color:var(--albatre-soft);font-size:.92rem}
.wizard-payment-methods ol strong{color:var(--albatre)}
.wizard-bank{background:var(--midnight-2);border:1px solid rgba(250,255,245,.1);border-radius:8px;padding:18px 20px;font-size:.92rem}
.wizard-bank dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.wizard-bank dt{color:var(--albatre-faint)}
.wizard-bank dd{margin:0;font-family:monospace,'Inter',sans-serif;letter-spacing:.02em}
.wizard-radio{display:flex;gap:14px;align-items:flex-start;background:var(--midnight-2);border:1px solid rgba(250,255,245,.1);border-radius:8px;padding:16px 18px;cursor:pointer;transition:border-color .2s var(--ease)}
.wizard-radio:has(input:checked){border-color:var(--gingembre)}
.wizard-radio input{margin-top:4px}
.wizard-radio strong{display:block;margin-bottom:4px}
.wizard-radio p{margin:0;color:var(--albatre-faint);font-size:.86rem}
.wizard-groupes{display:grid;gap:12px}
.wizard-groupe{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--midnight-2);border:1px solid rgba(250,255,245,.1);border-radius:8px;padding:16px 18px;cursor:pointer;transition:border-color .2s var(--ease)}
.wizard-groupe:has(input:checked){border-color:var(--gingembre)}
.wizard-groupe.is-complet{cursor:not-allowed;opacity:.55}
.wizard-groupe input{margin:0}
.wizard-groupe .wizard-groupe-info{flex:1;min-width:200px}
.wizard-groupe .wizard-groupe-info strong{display:block}
.wizard-groupe .wizard-groupe-info span{color:var(--albatre-faint);font-size:.86rem}
.wizard-badge{font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.wizard-badge.ok{background:rgba(127,224,168,.16);color:var(--lms-ok)}
.wizard-badge.warn{background:rgba(255,206,138,.16);color:var(--lms-warn)}
.wizard-badge.err{background:rgba(255,154,154,.16);color:var(--lms-err)}
.wizard-empty{color:var(--albatre-faint);font-style:italic}
.wizard-recap{background:var(--midnight-2);border:1px solid rgba(250,255,245,.1);border-radius:8px;padding:18px 20px;margin-bottom:24px;font-size:.92rem}
.wizard-recap dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.wizard-recap dt{color:var(--albatre-faint)}
.wizard-recap dd{margin:0}
.wizard-nav{display:flex;justify-content:space-between;gap:12px;margin-top:32px}
.wizard-nav .btn{min-width:130px;justify-content:center}
.wizard-nav .btn[hidden]{visibility:hidden}
@media(max-width:620px){
  .wizard-progress-label{display:none}
  .wizard-nav{flex-direction:column-reverse}
  .wizard-nav .btn{width:100%}
}

/* Onglet "Club Mālūf" — détail d'une nūba (voir js/mon-compte.js::renderNubaDetail).
   --cm-scale : facteur de zoom du texte, réglé par les boutons #club-maluf-
   zoom-in/-out (voir js/mon-compte.js) et mémorisé par appareil — 1 par
   défaut, borné à [.8, 1.6] côté JS. Scope sur .lms-panel[data-panel=
   "club-maluf"] : n'affecte aucun autre onglet (les autres classes
   .lms-nuba-* et .lms-item-main b y sont de toute façon inutilisées).
   .lms-nuba-title (nom de la nūba, liste + en-tête du détail) : Arabswell,
   la police arabe de titre du site public (voir @font-face plus haut et
   css/rtl.css) — pas Bebas Neue/Inter ci-dessous, sans glyphes arabes. */
.lms-panel[data-panel="club-maluf"]{--cm-scale:1}
.lms-nuba-title{font-family:'Arabswell','Cairo',sans-serif !important;font-weight:normal !important;letter-spacing:normal !important;font-size:calc(1.3rem * var(--cm-scale,1)) !important}
.lms-nuba-forme{margin:18px 0 4px;font-family:'Bebas Neue',sans-serif;letter-spacing:.03em;font-size:calc(1.2rem * var(--cm-scale,1));color:var(--lms-accent)}
.lms-nuba-forme:first-child{margin-top:0}
.lms-nuba-rythme{margin:8px 0 4px;font-weight:600;color:var(--albatre-soft);font-size:calc(1rem * var(--cm-scale,1))}
.lms-nuba-oeuvre{border:1px solid rgba(var(--lms-surface-rgb),.12);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.lms-nuba-oeuvre-title{cursor:pointer;list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-weight:600;margin:0;font-size:calc(1rem * var(--cm-scale,1));width:100%}
/* Le texte du titre doit pouvoir rétrécir/passer à la ligne (min-width:0
   annule le min-width:auto par défaut d'un enfant flex, qui sinon force
   un débordement hors de l'écran sur mobile plutôt qu'un retour à la
   ligne — repéré en testant le rendu mobile). Le tag rythme, lui, garde
   sa taille intrinsèque (flex-shrink:0 déjà sur .lms-tag ailleurs, sinon
   ajouté ici en repli). */
/* flex:1 sur le titre (pas juste min-width:0) : absorbe tout l'espace
   disponible, ce qui pousse naturellement le tag rythme tout à
   l'extrémité de la ligne (à gauche en RTL) plutôt que collé au titre —
   demande explicite. */
.lms-nuba-oeuvre-titletext{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.lms-nuba-oeuvre-title .lms-tag{flex-shrink:0}
.lms-nuba-oeuvre-title::-webkit-details-marker{display:none}
.lms-nuba-oeuvre-title::before{content:"▸";color:var(--lms-accent);font-size:.8em;transition:transform .15s;flex-shrink:0}
.lms-nuba-oeuvre[open] .lms-nuba-oeuvre-title{margin-bottom:4px}
.lms-nuba-oeuvre[open] .lms-nuba-oeuvre-title::before{transform:rotate(90deg)}
/* :dir(rtl) plutôt que html[dir="rtl"] : le contenu Club Mālūf est
   toujours en arabe (RTL) via dir="rtl" posé directement sur son propre
   conteneur (#club-maluf-detail-content), que la page elle-même (espace
   privé en FR/EN/AR) soit en LTR ou RTL — html[dir="rtl"] ne matchait
   donc jamais pour un·e utilisateur·rice FR/EN consultant ce contenu. */
.lms-nuba-oeuvre-title:dir(rtl)::before{content:"◂"}
.lms-nuba-oeuvre[open] .lms-nuba-oeuvre-title:dir(rtl)::before{transform:rotate(-90deg)}
/* Couleur stable par rythme (voir js/mon-compte.js::rythmeColorClass) —
   8 teintes distinctes choisies pour rester lisibles sur le fond sombre
   de l'espace privé, même principe que .lms-tag.ok/.warn/.err (fond
   semi-transparent, texte dans la teinte pleine). */
.lms-tag.lms-rythme-c0{background:rgba(79,209,197,.18);color:#4fd1c5}
.lms-tag.lms-rythme-c1{background:rgba(246,173,85,.18);color:#f6ad55}
.lms-tag.lms-rythme-c2{background:rgba(246,135,179,.18);color:#f687b3}
.lms-tag.lms-rythme-c3{background:rgba(183,148,244,.18);color:#b794f4}
.lms-tag.lms-rythme-c4{background:rgba(99,179,237,.18);color:#63b3ed}
.lms-tag.lms-rythme-c5{background:rgba(104,211,145,.18);color:#68d391}
.lms-tag.lms-rythme-c6{background:rgba(246,224,94,.18);color:#f6e05e}
.lms-tag.lms-rythme-c7{background:rgba(252,129,129,.18);color:#fc8181}
.lms-nuba-texte{line-height:1.8;margin:8px 0;font-family:'Amiri',serif;font-size:calc(1.02rem * var(--cm-scale,1))}
/* Image(s) d'un Enregistrement à côté du texte du morceau (voir
   js/mon-compte.js::texteAvecImagesHtml) — flex row, suit le sens RTL
   hérité de #club-maluf-detail-content (l'image posée en premier dans le
   DOM se retrouve du côté "départ" de lecture). Empilé en colonne sous
   640px, le texte reste toujours plus important que l'image sur mobile. */
.lms-nuba-texte-row{display:flex;gap:16px;align-items:flex-start;margin:10px 0}
.lms-nuba-texte-row .lms-nuba-texte{margin:0;flex:1;min-width:0}
.lms-nuba-images{display:flex;flex-direction:column;gap:8px;flex-shrink:0;width:160px}
.lms-nuba-images img{width:100%;border-radius:8px;object-fit:cover;display:block;aspect-ratio:4/3}
@media(max-width:640px){
  .lms-nuba-texte-row{flex-direction:column;margin:6px 0}
  .lms-nuba-images{width:100%;flex-direction:row;flex-wrap:wrap}
  .lms-nuba-images img{width:120px;aspect-ratio:4/3}
  /* Resserrement supplémentaire sur mobile (demande explicite) — les
     marges/paddings ci-dessus et plus bas restent pensés pour desktop,
     trop généreux une fois l'écran réduit. */
  .lms-nuba-forme{margin:12px 0 2px}
  .lms-nuba-rythme{margin:6px 0 2px}
  .lms-nuba-oeuvre{padding:8px 10px;margin-bottom:6px}
  .lms-nuba-texte{margin:6px 0}
  .lms-nuba-version-bloc{margin-top:calc(1.1rem * var(--cm-scale,1));padding-top:calc(.7rem * var(--cm-scale,1))}
}
.lms-nuba-biblio{font-size:calc(.8rem * var(--cm-scale,1));opacity:.7;font-style:italic;margin:6px 0 0}
/* Versions multiples d'un texte (balise <نسخة>, voir renderTexteContenu)
   — mêmes valeurs que .version-bloc/.version-titre dans maluf/tailwind-
   input.css, pour un rendu cohérent entre maluf.tn et Club Mālūf. */
.lms-nuba-version-bloc{margin-top:calc(2rem * var(--cm-scale,1));padding-top:calc(1.25rem * var(--cm-scale,1));border-top:1px solid rgba(var(--lms-surface-rgb),.15)}
.lms-nuba-version-bloc:first-child{margin-top:0;padding-top:0;border-top:none}
.lms-nuba-version-titre{font-family:'Amiri',serif;font-weight:700;font-size:calc(1.05rem * var(--cm-scale,1));opacity:.75;margin:0 0 .6rem;text-align:center}
/* Choix du témoin affiché pour un Texte à apparat critique (voir
   texteContenuBlock/apparatusWitnessList, js/mon-compte.js) — <select>
   natif : la cible tactile native reste la plus fiable au doigt, pas besoin
   d'un menu déroulant maison. Pleine largeur + hauteur généreuse pour
   rester confortable sur petit écran (demande explicite : ergonomie
   mobile). */
.lms-nuba-version-select{display:block;width:100%;margin:0 0 10px;padding:9px 12px;font-family:'Amiri',serif;font-size:calc(.95rem * var(--cm-scale,1));background:rgba(var(--lms-surface-rgb),.05);color:inherit;border:1px solid rgba(var(--lms-surface-rgb),.2);border-radius:8px}
.lms-nuba-version-select:focus-visible{outline:2px solid var(--lms-accent);outline-offset:1px}
.lms-nuba-vers-groupe{margin:0 0 calc(.9em * var(--cm-scale,1))}
.lms-nuba-vers-groupe:last-child{margin-bottom:0}
/* Un vers = deux hémistiches (صدر/عجز) en flex : côte à côte tant qu'ils
   tiennent sur une ligne, l'عجز passe seul à la ligne suivante dès que ça
   ne rentre plus (typiquement au zoom du texte, --cm-scale) — flex-wrap
   natif plutôt qu'un seuil arbitraire en JS (demande explicite : meilleure
   lisibilité au zoom). Espacement entre vers un peu plus généreux et lui
   aussi proportionnel au zoom, pour laisser respirer un عجز qui vient de
   passer à la ligne. */
.lms-vers{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;gap:.15em calc(1.4em * var(--cm-scale,1));margin:0 0 calc(.5em * var(--cm-scale,1))}
.lms-vers:last-child{margin-bottom:0}
.lms-vers-hemi{flex:0 1 auto}
/* Sur desktop, un بيت (صدر+عجز) reste sur une seule ligne, comme sur
   maluf.tn — seul un manque réel de place (mobile, ou --cm-scale élevé)
   doit faire passer l'عجز à la ligne, voir le commentaire ci-dessus sur
   flex-wrap:wrap (lisibilité au zoom, toujours vrai en dessous de ce
   seuil). Même seuil que le reste du site (@media(max-width:880px)). */
@media(min-width:881px){
  .lms-vers{flex-wrap:nowrap}
}
/* نوع du vers (طالع/رجوع…), voir renderApparatusPoem — étiquette centrée,
   réduite et en gras plutôt que de suivre la taille du texte du poème
   (demande explicite, cohérent avec div.emph sur maluf.tn), lisible même
   petite sur mobile. */
.lms-vers-type{display:block;text-align:center;font-weight:700;font-size:calc(.78rem * var(--cm-scale,1));opacity:.75;margin:0 0 calc(.3em * var(--cm-scale,1))}
/* ملاحظة (note éditoriale, voir apparatus.rs::Group.note/Verse.note et
   renderApparatusPoem) — remarque de critique textuelle (variantes de
   source, etc.), toujours visible plutôt que masquée derrière une
   info-bulle (contexte de lecture/étude, pas la vitrine publique) :
   italique et atténuée pour rester secondaire au texte du poème. */
.lms-vers-note{display:block;text-align:center;font-style:italic;opacity:.65;font-size:calc(.82rem * var(--cm-scale,1));line-height:1.5;margin:0 0 calc(.5em * var(--cm-scale,1))}
/* Édition du texte (superadmin uniquement, voir js/mon-compte.js::
   texteContenuBlock/openTexteEditor) — le corps du poème lui-même devient
   la cible du clic ("cliquant sur un div contenant du texte des chants"),
   léger survol pour signaler que c'est cliquable sans alourdir la lecture
   normale (personne d'autre ne voit cette classe). */
.lms-nuba-texte-editable{cursor:pointer;border-radius:8px;transition:background .15s;outline:none}
.lms-nuba-texte-editable:hover,.lms-nuba-texte-editable:focus-visible{background:rgba(var(--lms-surface-rgb),.05)}
.cm-nuba-edit-btn{margin:0 0 8px;font-size:.82rem;padding:7px 12px}
.cm-nuba-edit-btn .ms{font-size:16px}
/* Formulaire structuré vers par vers (voir renderApparatusEditor) — un
   .cm-ed-verse par بيت, une .cm-ed-reading par قراءة d'apparat à
   l'intérieur. Toujours dir="rtl" (même contenu que la lecture, voir
   #cm-ed-root plus haut) mais champs eux-mêmes en direction naturelle du
   texte tapé (pas de dir forcé sur les <input>, un témoin/une note reste
   lisible tel quel qu'il soit en arabe ou en translittération). */
.cm-ed-group{padding:12px 0}
.cm-ed-group-sep{border:none;border-top:1px solid rgba(var(--lms-surface-rgb),.12);margin:4px 0}
.cm-ed-verse{border:1px solid rgba(var(--lms-surface-rgb),.14);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.cm-ed-verse-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.cm-ed-type{width:140px;flex-shrink:0}
.cm-ed-label-toggle{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--albatre-soft);white-space:nowrap}
.cm-ed-verse-remove{margin-inline-start:auto;font-size:.78rem;padding:6px 10px;flex-shrink:0}
.cm-ed-hemi-fields{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.cm-ed-hemi-fields[hidden]{display:none}
/* Un صدر/عجز ajoutable/retirable indépendamment l'un de l'autre (demande
   explicite) — chacun dans son propre .cm-ed-hemi-slot : soit un champ +
   son bouton de suppression, soit un simple bouton "+" quand ce حémistiche
   est absent (voir js/mon-compte.js::renderHemiSlot). */
.cm-ed-hemi-slot{display:flex;align-items:center;gap:4px;flex:1 1 45%;min-width:130px}
.cm-ed-hemi-slot input{flex:1;min-width:0}
.cm-ed-hemi-add{width:100%;font-size:.8rem;padding:8px 10px}
.cm-ed-hemi-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;border-radius:50%;background:transparent;color:var(--albatre-faint);cursor:pointer}
.cm-ed-hemi-remove:hover{background:rgba(var(--lms-err-rgb),.14);color:var(--lms-err)}
.cm-ed-hemi-remove .ms{font-size:14px}
.cm-ed-label-field{width:100%;margin-bottom:8px}
/* ملاحظة de vers (voir renderApparatusEditorVerse) — un .cm-ed-hemi-slot
   de plus (même widget +/- que صدر/عجز, voir renderHemiSlot), seul dans sa
   propre rangée plutôt que côte à côte avec eux : une note est
   indépendante du mode شطر/صدر-عجز et peut être plus longue qu'un
   حémistiche. */
.cm-ed-note-row{display:flex;margin-bottom:8px}
.cm-ed-type,.cm-ed-hemi-slot input,.cm-ed-label-field,.cm-ed-r-witness,.cm-ed-r-note,.cm-ed-r-text,.cm-ed-group-note{
  font-family:'Inter',sans-serif;font-size:.88rem;padding:8px 10px;border-radius:6px;
  border:1px solid rgba(var(--lms-surface-rgb),.18);background:rgba(var(--lms-surface-rgb),.05);color:var(--albatre);
}
.cm-ed-type:focus,.cm-ed-hemi-slot input:focus,.cm-ed-label-field:focus,.cm-ed-r-witness:focus,.cm-ed-r-note:focus,.cm-ed-r-text:focus,.cm-ed-group-note:focus{
  outline:none;border-color:var(--lms-accent);background:rgba(var(--lms-surface-rgb),.08);
}
/* ملاحظة de groupe (voir renderApparatusEditor) — enfant direct de
   <أبيات>, distincte d'une note de vers ; toujours en tête de la carte du
   groupe (avant même "Texte de référence"), comme dans le contenu réel où
   <ملاحظة> précède les <بيت> du groupe. */
.cm-ed-group-note{display:block;width:100%;min-height:2.4em;resize:vertical;font-style:italic;margin:0 0 12px}
.cm-ed-readings{display:flex;flex-direction:column;gap:6px;padding-inline-start:14px;border-inline-start:2px solid rgba(var(--lms-surface-rgb),.1)}
.cm-ed-reading{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* Témoin (نسخة) — <select> peuplé du catalogue bibliographique (voir
   js/mon-compte.js::loadCmNotices/witnessOptionsHtml), pas une saisie
   libre : des titres de notices peuvent être longs, flex plutôt qu'une
   largeur fixe. Couleurs d'options forcées (même patron que .field select
   option) : la liste déroulante native ignore souvent le thème sombre de
   la page. */
.cm-ed-r-witness{flex:1 1 180px;min-width:140px}
.cm-ed-r-witness option{color:#111;background:#fff}
.cm-ed-r-note{width:160px;flex-shrink:0}
.cm-ed-r-text{flex:1 1 200px;min-width:0}
.cm-ed-reading-remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;border-radius:50%;background:transparent;color:var(--albatre-faint);cursor:pointer}
.cm-ed-reading-remove:hover{background:rgba(var(--lms-err-rgb),.14);color:var(--lms-err)}
.cm-ed-reading-remove .ms{font-size:15px}
.cm-ed-reading-add,.cm-ed-verse-add{font-size:.8rem;padding:6px 10px;margin-top:2px}
.cm-ed-section-title{font-size:.76rem;font-weight:700;color:var(--albatre-soft);text-transform:uppercase;letter-spacing:.03em;margin:16px 0 6px}
.cm-ed-group>.cm-ed-section-title:first-child{margin-top:0}
.cm-ed-verses{margin-bottom:4px}
/* Aperçu sélectionnable du texte de référence (voir js/mon-compte.js::
   renderReferencePreview/resolveSelectionToLemma) — texte simple (pas de
   <input>), pour que la Selection API du navigateur puisse cibler des
   nœuds de texte réels : c'est de là qu'on construit le lemme d'une
   nouvelle entrée d'apparat en sélectionnant un mot, un حémistiche, un
   vers ou plusieurs. */
.cm-ed-reference{font-family:'Amiri',serif;font-size:.95rem;line-height:1.9;padding:10px 12px;margin-bottom:10px;border:1px solid rgba(var(--lms-surface-rgb),.14);border-radius:10px;background:rgba(var(--lms-surface-rgb),.03);cursor:text}
.cm-ed-ref-line{display:flex;flex-wrap:wrap;gap:0 1.2em;margin-bottom:.4em}
.cm-ed-ref-line:last-child{margin-bottom:0}
.cm-ed-ref-hemi{color:var(--albatre)}
.cm-ed-entry-add-from-selection{margin-bottom:10px;font-size:.82rem}
.cm-ed-entry-add-from-selection:disabled{opacity:.4;cursor:not-allowed}
.cm-ed-apparatus{display:flex;flex-direction:column;gap:10px}
.cm-ed-entry{border:1px solid rgba(var(--lms-surface-rgb),.14);border-radius:10px;padding:10px 12px}
.cm-ed-entry-lemma{font-family:'Amiri',serif;font-size:.95rem;color:var(--lms-accent);margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed rgba(var(--lms-surface-rgb),.16)}
.cm-ed-entry-remove{margin-top:8px;font-size:.78rem;padding:6px 10px}
.lms-nuba-embed{aspect-ratio:16/9;border-radius:6px;overflow:hidden;margin:10px 0;background:rgba(var(--lms-surface-rgb),.06);max-width:480px}
.lms-nuba-embed iframe{width:100%;height:100%;border:0}
.lms-nuba-audio{width:100%;max-width:480px;margin:10px 0}

/* Lecteur wavesurfer.js d'un Enregistrement maison (voir
   dareloudEnregistrementBlock, js/mon-compte.js) — forme d'onde dessinée
   sur <canvas> par la lib, waveColor/progressColor résolus depuis
   --albatre-faint/--lms-accent en JS (resolveCssVar) pour suivre le
   thème jour/nuit comme le reste de l'espace privé. */
.lms-rec-player{display:flex;align-items:center;gap:10px;max-width:520px;margin:10px 0;padding:8px 10px;background:rgba(var(--lms-surface-rgb),.04);border:1px solid rgba(var(--lms-surface-rgb),.12);border-radius:10px}
.lms-rec-playpause{flex:none;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid rgba(var(--lms-surface-rgb),.3);background:rgba(var(--lms-surface-rgb),.06);color:var(--lms-accent);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.lms-rec-playpause:hover{background:rgba(var(--lms-surface-rgb),.16)}
.lms-rec-playpause .ms{font-size:20px}
.lms-rec-wave{flex:1 1 auto;min-width:0;cursor:pointer}
.lms-rec-time{flex:none;font-size:.78rem;color:var(--albatre-soft);font-variant-numeric:tabular-nums;min-width:78px;text-align:end}
@media(max-width:480px){.lms-rec-player{max-width:100%}.lms-rec-time{min-width:64px;font-size:.72rem}}

/* Répertoire des nūba (#club-maluf-list) — grille de cartes sur desktop
   (demande explicite : "grille et non pas en liste"), colonne unique de
   cartes larges et tactiles sur mobile (même seuil 880px que le reste de
   l'espace privé, voir .lms-tabbar) plutôt qu'une simple réduction de la
   grille — la densité d'une grille à 2 colonnes reste inconfortable au
   doigt sur un petit écran. */
.lms-nuba-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:14px}
.lms-nuba-card{background:rgba(var(--lms-surface-rgb),.04);border:1px solid rgba(var(--lms-surface-rgb),.1);border-radius:14px;padding:20px 18px;cursor:pointer;text-align:center;transition:transform .18s var(--ease),border-color .18s var(--ease);display:flex;flex-direction:column;align-items:center;gap:6px;font-family:inherit;color:inherit;width:100%}
.lms-nuba-card:hover{transform:translateY(-3px);border-color:rgba(254,255,214,.4)}
.lms-nuba-card:focus-visible{outline:2px solid var(--lms-accent);outline-offset:2px}
.lms-nuba-card .lms-nuba-card-main{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.lms-nuba-card .lms-nuba-title{font-size:calc(1.15rem * var(--cm-scale,1)) !important;margin:0}
.lms-nuba-card-sub{color:var(--albatre-faint);font-size:.82rem}
@media(max-width:880px){
  .lms-nuba-grid{grid-template-columns:1fr;gap:10px}
  .lms-nuba-card{flex-direction:row;justify-content:flex-start;text-align:start;padding:18px 20px}
  .lms-nuba-card .lms-nuba-card-main{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
  .lms-nuba-card .lms-nuba-title{font-size:calc(1.2rem * var(--cm-scale,1)) !important}
}

/* Widget de discussion Club Mālūf (voir js/matrix-chat.js) — bouton
   d'entrée bien visible (rempli/accentué, pas ghost, cible tactile
   généreuse) plutôt qu'un simple bouton discret perdu à côté des
   réglages de zoom : c'était la confusion remontée ("je ne vois pas
   d'aspect lié à la messagerie"). Icône seule (pas de texte "Discussion")
   pour rester cohérent avec les autres boutons de la barre (zoom -/+,
   déjà icône seule) plutôt que le seul à porter un texte à côté de son
   icône. Une fois ouvert, remplace entièrement le répertoire (voir
   matrix-chat.js::ouvrirDiscussionClubMaluf) — jamais les deux en même
   temps, pour rester simple sur petit écran. */
.matrix-open-chat-btn{
  width:38px;height:38px;flex-shrink:0;padding:0;border-radius:50%;border:none;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--gingembre);color:var(--midnight);
  margin-inline-start:auto;transition:.2s var(--ease);
}
.matrix-open-chat-btn:hover{background:#fff;transform:translateY(-1px)}
.matrix-open-chat-btn .ms{font-size:19px}
/* Bouton d'envoi en icône seule, ronde et fine (voir .matrix-send-form
   et matrix-chat.js::wireSendVisibility) — pas de texte "Envoyer", pas
   du tout affiché tant que le champ est vide (jamais utile : rien à
   envoyer) et apparaît (fondu + léger zoom) dès la première frappe.
   Style propre plutôt qu'hérité de .btn/.btn-solid (rectangulaire,
   pensé pour du texte) : cible tactile ronde façon appli de messagerie. */
.matrix-send-btn{
  width:36px;height:36px;flex-shrink:0;padding:0;border-radius:50%;border:none;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--lms-accent);color:var(--midnight);
  opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity .15s var(--ease),transform .15s var(--ease),background .15s;
}
.matrix-send-btn.is-visible{opacity:1;transform:scale(1);pointer-events:auto}
.matrix-send-btn:hover{background:#fff}
.matrix-send-btn .ms{font-size:18px;font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20}
html[dir="rtl"] .matrix-send-btn .ms{transform:scaleX(-1)}
@media(max-width:880px){
  .lms-panel[data-panel="club-maluf"] .lms-dashcash-toolbar{gap:8px}
  /* Cadre de discussion (en-tête de salle + fil de messages + formulaire
     d'envoi) borné à la hauteur RÉELLEMENT disponible — chaîne de
     flex:1/height:100% depuis .lms-body (voir plus haut, lui-même
     flex:1 dans .lms-shell{height:100dvh}) plutôt qu'une hauteur calculée
     à la main (ancienne valeur calc(100dvh - Npx), qui devait deviner la
     hauteur de .lms-head — variable selon env(safe-area-inset-top) sur
     un écran à encoche — et donc dérivait sur certains téléphones). Le
     panneau devient lui-même une colonne flex SEULEMENT quand sa
     discussion est affichée (:has ci-dessous) — jamais pour ses autres
     sous-vues (liste des discussions, Dashboard Cash, listes Paiements/
     Factures/Dépenses/Trésorerie, répertoire/détail d'une nūba...), qui
     doivent rester en flux normal dans .lms-body. Un height:100%
     permanent sur tout le panneau tronque ces sous-vues à la hauteur
     visible : plus longues qu'elle, elles débordent par-dessus le
     padding-bottom de .lms-body réservé au menu du bas (au lieu de le
     repousser plus loin), donc .lms-tabbar masque leur fin — bug d'abord
     rapporté et corrigé pour Club Mālūf seul ; même risque pour
     Messagerie et Finances, corrigé ici de la même façon. */
  .lms-panel[data-panel="messagerie"]:has(#matrix-room-view:not([hidden])),
  .lms-panel[data-panel="finances"]:has(#finances-discussion-view:not([hidden])),
  .lms-panel[data-panel="club-maluf"]:has(#club-maluf-chat-view:not([hidden])){
    height:100%;
    display:flex;
    flex-direction:column;
  }
  #matrix-room-view, #club-maluf-chat-view, #finances-discussion-view{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .matrix-room-head{flex-shrink:0}
  #matrix-messages, #club-maluf-chat-messages, #finances-chat-messages{
    flex:1 1 auto;
    max-height:none;
    min-height:0;
  }
  #matrix-send-form, #club-maluf-chat-form, #finances-chat-form{flex-shrink:0}
  .matrix-send-form input{padding:12px 14px;font-size:1rem}
  .matrix-send-btn{width:42px;height:42px}
  .matrix-send-btn .ms{font-size:20px}
  .matrix-msg{max-width:94%;gap:6px}
  .matrix-msg-body{font-size:.96rem}
  .matrix-msg-col{padding:7px 10px}
  .matrix-avatar,.matrix-avatar-spacer{width:26px}
  .matrix-avatar{height:26px;font-size:.72rem}
  .matrix-reaction-add{width:30px;height:30px}
  .matrix-reaction-add .ms{font-size:18px}
  .matrix-reaction-choice{font-size:1.2rem;padding:5px 6px}
}
/* Rédaction/affichage des messages jusqu'aux bords de l'écran sur mobile —
   les 3 discussions (Messagerie/Club Mālūf/Finances) partagent ce même
   besoin d'espace, l'écran mobile étant déjà étroit. Réduit directement
   le padding-inline de .lms-body (la SOURCE de la marge latérale, voir
   plus haut, padding:18px 16px) quand un panneau de discussion est visible
   :has() (CSS Selectors Level 4, W3C) plutôt que d'ANNULER cette marge
   sur chaque enfant avec des margin négatifs calés à la main sur une
   valeur dupliquée ailleurs (16px) : tout écart entre les deux (un
   panneau parent avec un padding différent selon le contexte, une future
   modification de .lms-body oubliant ce couplage...) aurait raboté
   l'affichage plutôt que de simplement revenir au padding par défaut —
   c'est exactement le bug rapporté ("il me manque de l'affichage à
   gauche"). Propriétés logiques (padding-inline, pas padding-left/right)
   pour rester correct en RTL sans dupliquer la règle. Support :has() large
   sur mobile (Safari/Chrome/Firefox récents) ; à défaut, dégradation sans
   casse — .lms-body garde simplement son padding habituel. */
@media(max-width:880px){
  /* Chaque sélecteur passe par le panneau ET la sous-vue de discussion,
     tous deux :not([hidden]) — #matrix-room-view etc. gardent leur
     dernier état hidden/visible même une fois le panneau lui-même masqué
     (switchSection ne touche que .lms-panel, jamais ses descendants),
     donc un simple :has(#matrix-room-view:not([hidden])) matcherait à
     tort sur une tout autre section après un aller-retour dans une
     discussion. */
  .lms-body:has(.lms-panel[data-panel="messagerie"]:not([hidden]) #matrix-room-view:not([hidden])),
  .lms-body:has(.lms-panel[data-panel="club-maluf"]:not([hidden]) #club-maluf-chat-view:not([hidden])),
  .lms-body:has(.lms-panel[data-panel="finances"]:not([hidden]) #finances-discussion-view:not([hidden])),
  .lms-body:has(.lms-panel[data-panel="marketing"]:not([hidden]) #campagne-detail-view:not([hidden])){
    padding-inline:8px;
  }
}

/* ---- Marketing (simulateur de rentabilité de campagne) ----
   .lms-campagne-scenarios : scénarios côte à côte sur desktop pour une
   comparaison directe (Plan A vs Plan B...), empilés en une colonne sous
   720px — voir la règle de base "aucun min-width plus large que l'écran"
   déjà suivie partout ailleurs sur ce site. */
.lms-campagne-head{margin-bottom:18px}
.lms-campagne-scenarios{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:8px}
.lms-scenario-card{background:rgba(var(--lms-surface-rgb),.04);border:1px solid rgba(var(--lms-surface-rgb),.1);border-radius:12px;padding:16px}
.lms-scenario-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.lms-scenario-head .lms-set-title{margin:0}
.lms-scenario-total{margin:10px 0;font-size:.98rem}
.btn-sm{padding:4px 10px;font-size:.78rem}
.btn-icon{background:none;border:none;color:var(--albatre-faint);cursor:pointer;font-size:.85rem;line-height:1;padding:2px 6px;border-radius:6px}
.btn-icon:hover{background:rgba(var(--lms-err-rgb),.14);color:var(--lms-err)}

.lms-mini-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:.86rem}
.lms-mini-table th{text-align:start;color:var(--albatre-faint);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.02em;padding:4px 6px;border-bottom:1px solid rgba(var(--lms-surface-rgb),.1)}
.lms-mini-table td{padding:6px;border-bottom:1px solid rgba(var(--lms-surface-rgb),.06);vertical-align:middle}
.lms-mini-table tr:last-child td{border-bottom:none}
.lms-row-click{cursor:pointer;transition:background .15s}
.lms-row-click:hover{background:rgba(var(--lms-surface-rgb),.05)}
.lms-esperance-row td{background:rgba(var(--lms-surface-rgb),.08);font-weight:600;border-top:1px solid rgba(var(--lms-surface-rgb),.15)}

.lms-chart-block{margin:18px 0;background:rgba(var(--lms-surface-rgb),.03);border:1px solid rgba(var(--lms-surface-rgb),.08);border-radius:12px;padding:14px 16px}
.lms-chart-block .lms-set-title{margin:0 0 8px}
.lms-chart-svg{width:100%;height:auto;overflow:visible}
.lms-chart-bar{transition:opacity .15s}
.lms-chart-bar:hover{opacity:.82}
.lms-chart-grid{stroke:rgba(var(--lms-surface-rgb),.08);stroke-width:1}
.lms-chart-zero{stroke:rgba(var(--lms-surface-rgb),.35);stroke-width:1.5}
.lms-chart-axis{font-size:9.5px;fill:var(--albatre-faint)}
.lms-chart-legend{font-size:10px;fill:var(--albatre-soft)}
.lms-chart-value{font-size:9.5px;fill:var(--albatre-soft);font-weight:600}
@media(max-width:560px){.lms-campagne-scenarios{grid-template-columns:1fr}}