/* =========================================
   ASEVIE v7 — Space Dark · Violet Nebula
   Inter · Enterprise UI
   ========================================= */
:root {
  /* Accents violet — repris du logo Espoir & Vie */
  --p:   #9B5DE5; --pd: #5B2D8E; --pm: #D6BBFA;
  /* Violet actif nav */
  --nav-on: #7C3AED;
  /* Transparents dark-mode */
  --pl: rgba(155,93,229,.18);   --px: rgba(155,93,229,.08);
  --gl: rgba(108,192,74,.18);   --ol: rgba(250,184,46,.18);
  --rl: rgba(226,35,26,.18);    --bl: rgba(65,105,225,.18);
  /* Status (bleu = globe du logo) */
  --g:  #6CC04A; --o: #FAB82E; --r: #E2231A; --b: #4169E1;
  /* Fond ultra-sombre */
  --bg:  #04060F; --wh: #080E20;
  /* Sidebar couleur de base (le gradient est sur l'élément) */
  --sb:  #100830; --sb2: #18124A; --sb3: #221960;
  --sbt: rgba(255,255,255,.55);
  --tx:  #E8ECFF; --mu: #8892B0;
  --bd:  rgba(255,255,255,.14);
  --rd:  7px; --rds: 5px; --rdl: 10px;
  --sh:  0 2px 8px rgba(0,0,0,.5);
  --shm: 0 8px 32px rgba(0,0,0,.7);
  --ff:  'Inter', system-ui, sans-serif;
  --fs:  'Inter', sans-serif;
}

/* ════════ THÈME CLAIR ════════
   La sidebar, la barre du haut et l'écran de connexion restent volontairement
   sombres (identité visuelle). Seul le contenu principal passe en clair. */
html[data-theme="light"] {
  --bg:  #EEF1F8;
  --wh:  #FFFFFF;
  --tx:  #1B2440;
  --mu:  #5A6480;
  --bd:  rgba(20,28,60,.14);
  --sh:  0 1px 3px rgba(20,28,60,.10);
  --shm: 0 10px 30px rgba(20,28,60,.16);
  /* Violet plus intense pour un meilleur contraste sur fond clair */
  --p:   #6B2DC8; --pd: #4A1A8C; --pm: #9B5DE5;
  --pl:  rgba(107,45,200,.15); --px: rgba(107,45,200,.08);
  --nav-on: #5B1FB8;
}
/* Fond étoilé / nébuleuse masqués en clair */
html[data-theme="light"] body::before,
html[data-theme="light"] body::after { display: none; }
/* Surfaces qui codaient le sombre en dur */
html[data-theme="light"] .cd { background: var(--wh); border-color: var(--bd); box-shadow: var(--sh); }
html[data-theme="light"] .tbl th { background: #F1F4FA; }
html[data-theme="light"] .fs { background: #F6F8FC; }
html[data-theme="light"] .fg input,
html[data-theme="light"] .fg select,
html[data-theme="light"] .fg textarea,
html[data-theme="light"] .finp { background: #FFFFFF; }
html[data-theme="light"] .fg select option,
html[data-theme="light"] .fsel option { background: #FFFFFF; color: var(--tx); }
html[data-theme="light"] .sb-box,
html[data-theme="light"] .fsel { background: #FFFFFF; border-color: var(--bd); }
html[data-theme="light"] .vr { background: #F6F8FC; }
html[data-theme="light"] .b-g { background: rgba(20,28,60,.06); }
html[data-theme="light"] .b-g:hover { background: rgba(20,28,60,.12); border-color: var(--mu); }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }

/* ── STARFIELD ── */
@keyframes twinkle {
  0%,100% { opacity: .75; }
  50%      { opacity: .25; }
}
@keyframes twinkle2 {
  0%,100% { opacity: .5; }
  60%     { opacity: .9; }
}
body {
  font-family: var(--ff);
  background: var(--bg);
  color: var(--tx);
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  overflow-x: hidden;
}
/* Nebula glow + planètes — palette reprise du logo Espoir & Vie */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    /* planètes */
    radial-gradient(circle 46px at 92% 11%, #F4D58D 0%, #C98A2E 45%, #6B4413 80%, transparent 100%),
    radial-gradient(circle 72px at 6% 86%, #C7AEFF 0%, #6B3FA0 45%, #2E1860 78%, transparent 100%),
    radial-gradient(circle 28px at 50% 94%, #E0875A 0%, #B14B27 50%, #5C2410 80%, transparent 100%),
    /* voile */
    radial-gradient(ellipse 1400px 900px at 50% -10%, rgba(150,90,255,.16) 0%, transparent 70%),
    /* nébuleuse */
    radial-gradient(ellipse 900px 700px at 15% 35%, rgba(120,40,200,.26) 0%, transparent 65%),
    radial-gradient(ellipse 700px 500px at 80% 20%, rgba(60,40,220,.20) 0%, transparent 60%),
    radial-gradient(ellipse 600px 450px at 60% 85%, rgba(170,30,190,.16) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
/* Stars layer 1 — small */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at  3%  8%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.9) 1px, transparent 1px),
    radial-gradient(circle at 11% 22%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.6) 1px, transparent 1px),
    radial-gradient(circle at 22%  5%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.8) 1px, transparent 1px),
    radial-gradient(circle at 35% 17%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.5) 1px, transparent 1px),
    radial-gradient(circle at 48%  9%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.7) 1px, transparent 1px),
    radial-gradient(circle at 61% 14%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.9) 1px, transparent 1px),
    radial-gradient(circle at 74%  3%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.6) 1px, transparent 1px),
    radial-gradient(circle at 87% 19%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.8) 1px, transparent 1px),
    radial-gradient(circle at 94%  7%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.5) 1px, transparent 1px),
    radial-gradient(circle at  7% 32%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.7) 1px, transparent 1px),
    radial-gradient(circle at 19% 41%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.9) 1px, transparent 1px),
    radial-gradient(circle at 31% 28%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.6) 1px, transparent 1px),
    radial-gradient(circle at 44% 38%, rgba(255,255,255,.4) 0%, rgba(255,255,255,.4) 1px, transparent 1px),
    radial-gradient(circle at 57% 25%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.8) 1px, transparent 1px),
    radial-gradient(circle at 69% 36%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.5) 1px, transparent 1px),
    radial-gradient(circle at 82% 29%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.7) 1px, transparent 1px),
    radial-gradient(circle at 92% 42%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.9) 1px, transparent 1px),
    radial-gradient(circle at  4% 55%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.6) 1px, transparent 1px),
    radial-gradient(circle at 16% 62%, rgba(255,255,255,.4) 0%, rgba(255,255,255,.4) 1px, transparent 1px),
    radial-gradient(circle at 27% 48%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.8) 1px, transparent 1px),
    radial-gradient(circle at 39% 59%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.7) 1px, transparent 1px),
    radial-gradient(circle at 52% 51%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.5) 1px, transparent 1px),
    radial-gradient(circle at 65% 64%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.9) 1px, transparent 1px),
    radial-gradient(circle at 78% 47%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.6) 1px, transparent 1px),
    radial-gradient(circle at 89% 58%, rgba(255,255,255,.4) 0%, rgba(255,255,255,.4) 1px, transparent 1px),
    radial-gradient(circle at  9% 73%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.8) 1px, transparent 1px),
    radial-gradient(circle at 21% 81%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.6) 1px, transparent 1px),
    radial-gradient(circle at 33% 69%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.5) 1px, transparent 1px),
    radial-gradient(circle at 46% 77%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.9) 1px, transparent 1px),
    radial-gradient(circle at 58% 72%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.7) 1px, transparent 1px),
    radial-gradient(circle at 71% 83%, rgba(255,255,255,.4) 0%, rgba(255,255,255,.4) 1px, transparent 1px),
    radial-gradient(circle at 84% 76%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.8) 1px, transparent 1px),
    radial-gradient(circle at 96% 68%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.6) 1px, transparent 1px),
    radial-gradient(circle at  5% 91%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.5) 1px, transparent 1px),
    radial-gradient(circle at 18% 95%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.7) 1px, transparent 1px),
    radial-gradient(circle at 30% 88%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.9) 1px, transparent 1px),
    radial-gradient(circle at 43% 93%, rgba(255,255,255,.4) 0%, rgba(255,255,255,.4) 1px, transparent 1px),
    radial-gradient(circle at 55% 86%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.6) 1px, transparent 1px),
    radial-gradient(circle at 67% 97%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.8) 1px, transparent 1px),
    radial-gradient(circle at 80% 89%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.5) 1px, transparent 1px),
    radial-gradient(circle at 93% 94%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.7) 1px, transparent 1px),
    /* étoiles plus brillantes éparpillées */
    radial-gradient(circle at 26% 44%, rgba(180,200,255,.95) 0%, rgba(180,200,255,.95) 2px, transparent 2px),
    radial-gradient(circle at 72% 18%, rgba(200,220,255,.9)  0%, rgba(200,220,255,.9)  2px, transparent 2px),
    radial-gradient(circle at 50% 66%, rgba(160,190,255,.95) 0%, rgba(160,190,255,.95) 2px, transparent 2px),
    radial-gradient(circle at 88% 53%, rgba(180,210,255,.85) 0%, rgba(180,210,255,.85) 2px, transparent 2px),
    radial-gradient(circle at 14% 78%, rgba(200,220,255,.9)  0%, rgba(200,220,255,.9)  2px, transparent 2px);
  pointer-events: none;
  z-index: 0;
  animation: twinkle 5s ease-in-out infinite;
}

a { color: inherit; text-decoration: none; }
button { font-family: var(--ff); }

/* ══ PAGE D'ACCUEIL (landing) ═════════════════════════ */
#ls { display: none; position: fixed; inset: 0; z-index: 9999; overflow-y: auto; background: #07021A; color: #E8ECFF; }
#ls.v { display: block; }

/* ── NAVBAR ── */
.lp-nav { position: sticky; top: 0; z-index: 100; background: rgba(7,2,26,.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); }
.lp-nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 32px; }
.lp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lp-brand-logo { width: 32px; height: 32px; }
.lp-brand-name { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.lp-nav-links { display: flex; gap: 4px; margin-left: auto; }
.lp-nav-link { padding: 6px 14px; font-size: 13px; color: rgba(255,255,255,.6); text-decoration: none; border-radius: var(--rds); transition: all .15s; }
.lp-nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.lp-nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
.lp-theme-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; }
.lp-theme-btn:hover { background: rgba(255,255,255,.18); }
.lp-theme-btn svg { width: 15px; height: 15px; stroke: rgba(255,255,255,.8); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-nav-cta { background: var(--p); color: #fff; padding: 8px 18px; border-radius: var(--rds); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s; }
.lp-nav-cta:hover { background: var(--pd); }
.lp-burger { display: none; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: var(--rds); width: 36px; height: 36px; align-items: center; justify-content: center; cursor: pointer; }
.lp-burger svg { width: 17px; height: 17px; stroke: rgba(255,255,255,.85); fill: none; stroke-width: 2; stroke-linecap: round; }
.lp-mobile-menu { display: none; flex-direction: column; padding: 8px 16px 16px; border-top: 1px solid rgba(255,255,255,.07); }
.lp-mobile-menu.op { display: flex; }
.lp-mobile-link { padding: 13px 4px; font-size: 15px; color: rgba(255,255,255,.75); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.06); transition: color .15s; }
.lp-mobile-link:last-child { border-bottom: none; }
.lp-mobile-link:hover { color: #fff; }
html[data-theme="light"] .lp-burger { background: rgba(107,45,200,.08); border-color: rgba(107,45,200,.2); }
html[data-theme="light"] .lp-burger svg { stroke: #6B2DC8; }
html[data-theme="light"] .lp-mobile-menu { border-top-color: rgba(107,45,200,.1); }
html[data-theme="light"] .lp-mobile-link { color: #5A6480; border-bottom-color: rgba(107,45,200,.08); }
html[data-theme="light"] .lp-mobile-link:hover { color: #1B2440; }

/* ── SECTIONS communes ── */
.lp-section { padding: 80px 24px; }
.lp-section-alt { background: rgba(255,255,255,.03); }
.lp-section-inner { max-width: 1000px; margin: 0 auto; }
.lp-section-header { text-align: center; margin-bottom: 56px; }
.lp-section-tag { display: inline-block; background: var(--pl); color: var(--pm); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; }
.lp-section-title { font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -.02em; margin-bottom: 14px; line-height: 1.2; }
.lp-section-desc { font-size: 15px; color: rgba(255,255,255,.55); max-width: 560px; margin: 0 auto; line-height: 1.7; }

/* ── HERO ── */
.lp-hero { min-height: calc(100vh - 60px); display: flex; align-items: center; padding: 80px 24px; }
.lp-hero-inner { flex: 1; max-width: 560px; margin: 0 auto 0 0; padding-left: calc((100vw - 1000px) / 2); }
.lp-hero-badge { display: inline-block; background: rgba(155,93,229,.15); color: #D6BBFA; font-size: 12px; font-weight: 600; letter-spacing: .06em; padding: 5px 14px; border-radius: 20px; border: 1px solid rgba(155,93,229,.3); margin-bottom: 24px; }
.lp-hero-title { font-family: 'Fraunces', Georgia, serif; font-size: 64px; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; color: #fff; margin-bottom: 20px; }
.lp-accent { color: var(--p); }
.lp-hero-sub { font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.75; max-width: 480px; margin-bottom: 36px; }
.lp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.lp-btn-primary { background: var(--p); color: #fff; padding: 13px 28px; border-radius: var(--rds); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s; display: inline-block; }
.lp-btn-primary:hover { background: var(--pd); }
.lp-btn-ghost { background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); padding: 13px 28px; border-radius: var(--rds); font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,.15); transition: all .15s; display: inline-block; }
.lp-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.lp-hero-tagline { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: rgba(255,255,255,.25); text-transform: uppercase; }
.lp-hero-visual { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding-right: calc((100vw - 1000px) / 2); }
.lp-hero-svg { width: 220px; height: 220px; filter: drop-shadow(0 0 40px rgba(155,93,229,.4)); animation: lpFloat 4s ease-in-out infinite; }
@keyframes lpFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* ── STATS ── */
.lp-stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
.lp-stat { text-align: center; }
.lp-stat-num { font-size: 42px; font-weight: 800; color: var(--p); letter-spacing: -.02em; line-height: 1; margin-bottom: 6px; }
.lp-stat-lbl { font-size: 13px; color: rgba(255,255,255,.5); font-weight: 500; }

/* ── VALEURS ── */
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--rdl); padding: 32px 24px; text-align: center; transition: transform .2s, border-color .2s; }
.lp-card:hover { transform: translateY(-4px); border-color: rgba(155,93,229,.35); }
.lp-card-icon { font-size: 36px; margin-bottom: 16px; }
.lp-card-img { width: 100%; height: 180px; border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.lp-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.lp-card:hover .lp-card-img img { transform: scale(1.04); }
.lp-card-title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.lp-card-desc { font-size: 13.5px; color: rgba(255,255,255,.5); line-height: 1.65; }

/* ── ÉQUIPE ── */
.lp-team { display: flex; flex-direction: column; gap: 20px; }
.lp-tcard { display: flex; min-height: 320px; border-radius: var(--rdl); overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: border-color .2s, box-shadow .2s; }
.lp-tcard:hover { border-color: rgba(155,93,229,.3); box-shadow: 0 8px 32px rgba(155,93,229,.1); }
.lp-tcard-rev { flex-direction: row-reverse; }
.lp-tcard-text { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 52px; }
.lp-tcard-photo { width: 38%; flex-shrink: 0; overflow: hidden; }
.lp-tcard-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.lp-tcard-quote { font-size: 19px; font-weight: 600; color: #fff; line-height: 1.55; margin: 12px 0 20px; font-style: italic; }
.lp-member-name { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.lp-member-role { font-size: 11px; color: var(--pm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lp-photo-placeholder { background: linear-gradient(135deg, var(--p), #4169E1); display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; color: #fff; }
/* ── SECTION LOGIN ── */
.lp-login-section { display: flex; flex-direction: column; align-items: center; }
.lp-login-section .lp-section-inner { display: flex; flex-direction: column; align-items: center; }
.lp-login-section .lc { margin-top: 0; width: 100%; }

/* ── FOOTER ── */
/* ── ACTUALITÉS ── */
.lp-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-article { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--rdl); padding: 24px; transition: border-color .2s, transform .2s; cursor: pointer; }
.lp-article:hover { border-color: rgba(155,93,229,.35); transform: translateY(-4px); }
.lp-article-img { width: 100%; height: 200px; overflow: hidden; border-radius: 8px; margin-bottom: 16px; }
.lp-article-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .3s; }
.lp-article:hover .lp-article-img img { transform: scale(1.04); }
.lp-article-tag { display: inline-block; background: var(--pl); color: var(--pm); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; }
.lp-article-date { font-size: 11.5px; color: rgba(255,255,255,.35); margin-bottom: 10px; }
.lp-article-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.35; margin-bottom: 12px; }
.lp-article-excerpt { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.65; margin-bottom: 16px; }
.lp-article-more { font-size: 12.5px; color: var(--p); font-weight: 600; }

/* ── MODAL LECTURE ARTICLE ── */
.lp-article-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 10000; overflow-y: auto; backdrop-filter: blur(4px); padding: 40px 16px; }
.lp-article-modal.op { display: flex; align-items: flex-start; justify-content: center; }
.lp-article-modal-inner { position: relative; background: var(--wh); border-radius: var(--rdl); max-width: 800px; width: 100%; padding: 40px; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.lp-article-close { position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,.08); border: none; border-radius: 50%; width: 36px; height: 36px; font-size: 16px; cursor: pointer; color: var(--tx); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.lp-article-close:hover { background: rgba(0,0,0,.15); }
.lp-modal-meta { margin-bottom: 12px; }
.lp-modal-title { font-size: 24px; font-weight: 700; color: var(--tx); line-height: 1.3; margin-bottom: 24px; }
.lp-modal-body-grid { display: flex; gap: 28px; align-items: flex-start; }
.lp-modal-img-side { width: 260px; flex-shrink: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.15); }
.lp-modal-img-side img { width: 100%; display: block; object-fit: cover; }
.lp-modal-text { flex: 1; font-size: 14.5px; color: var(--mu); line-height: 1.85; }
.lp-modal-text p { margin-bottom: 12px; }
.lp-modal-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.lp-modal-share { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--bd); }
.lp-modal-share-label { font-size: 11px; font-weight: 700; color: var(--mu); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.lp-modal-share-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--rds); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; font-family: var(--ff); transition: opacity .15s; }
.lp-share-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.lp-share-btn:hover { opacity: .85; }
.lp-share-wa { background: #25D366; color: #fff; }
.lp-share-fb { background: #1877F2; color: #fff; }
.lp-share-copy { background: var(--pl); color: var(--p); }
.lp-modal-gal-img { border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.lp-modal-gal-img img { width: 100%; display: block; object-fit: cover; height: 220px; }

/* ── FOOTER ── */
.lp-footer { border-top: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.25); }
.lp-footer-main { max-width: 1100px; margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.lp-footer-brand {}
.lp-footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 16px; font-weight: 700; color: #fff; }
.lp-footer-desc { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.7; max-width: 260px; margin-bottom: 14px; }
.lp-footer-tagline { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: rgba(255,255,255,.2); text-transform: uppercase; }
.lp-footer-col { display: flex; flex-direction: column; gap: 12px; }
.lp-footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.lp-footer-link { font-size: 13.5px; color: rgba(255,255,255,.45); text-decoration: none; cursor: pointer; transition: color .15s; }
.lp-footer-link:hover { color: #fff; }
.lp-footer-bar { max-width: 1100px; margin: 0 auto; padding: 20px 24px; border-top: 1px solid rgba(255,255,255,.06); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,.25); flex-wrap: wrap; gap: 12px; }
.lp-footer-legal { display: flex; gap: 20px; cursor: pointer; }
.lp-footer-legal span:hover { color: rgba(255,255,255,.55); }

/* ── THÈME CLAIR — overrides landing ── */
html[data-theme="light"] #ls { background: #F4F0FC; color: #1B2440; }
html[data-theme="light"] .lp-nav { background: rgba(244,240,252,.92); border-bottom-color: rgba(107,45,200,.12); }
html[data-theme="light"] .lp-brand-name { color: #1B2440; }
html[data-theme="light"] .lp-nav-link { color: #5A6480; }
html[data-theme="light"] .lp-nav-link:hover { color: #1B2440; background: rgba(107,45,200,.07); }
html[data-theme="light"] .lp-theme-btn { background: rgba(107,45,200,.08); border-color: rgba(107,45,200,.2); }
html[data-theme="light"] .lp-theme-btn svg { stroke: #6B2DC8; }
html[data-theme="light"] .lp-section-alt { background: rgba(107,45,200,.04); }
html[data-theme="light"] .lp-section-title { color: #1B2440; }
html[data-theme="light"] .lp-section-desc { color: #5A6480; }
html[data-theme="light"] .lp-hero-title { color: #1B2440; }
html[data-theme="light"] .lp-hero-badge { background: rgba(107,45,200,.12); color: #4A1A8C; border-color: rgba(107,45,200,.35); }
html[data-theme="light"] .lp-hero-sub { color: #5A6480; }
html[data-theme="light"] .lp-hero-tagline { color: rgba(27,36,64,.25); }
html[data-theme="light"] .lp-btn-ghost { background: rgba(107,45,200,.07); color: #6B2DC8; border-color: rgba(107,45,200,.2); }
html[data-theme="light"] .lp-btn-ghost:hover { background: rgba(107,45,200,.14); color: #4A1A8C; }
html[data-theme="light"] .lp-stat-lbl { color: #5A6480; }
html[data-theme="light"] .lp-card { background: #fff; border-color: rgba(107,45,200,.12); box-shadow: 0 2px 12px rgba(107,45,200,.06); }
html[data-theme="light"] .lp-card:hover { border-color: rgba(107,45,200,.35); }
html[data-theme="light"] .lp-card-title { color: #1B2440; }
html[data-theme="light"] .lp-card-desc { color: #5A6480; }
html[data-theme="light"] .lp-tcard { background: #fff; border-color: rgba(107,45,200,.12); box-shadow: 0 4px 24px rgba(107,45,200,.08); }
html[data-theme="light"] .lp-tcard-quote { color: #1B2440; }
html[data-theme="light"] .lp-member-info .lp-member-name { color: #1B2440; }
html[data-theme="light"] .lp-member-info .lp-member-quote { color: #5A6480; }
html[data-theme="light"] .lp-footer { border-top-color: rgba(107,45,200,.12); background: rgba(107,45,200,.04); }
html[data-theme="light"] .lp-footer-logo { color: #1B2440; }
html[data-theme="light"] .lp-footer-desc { color: #5A6480; }
html[data-theme="light"] .lp-footer-tagline { color: rgba(27,36,64,.2); }
html[data-theme="light"] .lp-footer-col-title { color: #1B2440; }
html[data-theme="light"] .lp-footer-link { color: #5A6480; }
html[data-theme="light"] .lp-footer-link:hover { color: #1B2440; }
html[data-theme="light"] .lp-footer-bar { border-top-color: rgba(107,45,200,.1); color: rgba(27,36,64,.3); }
html[data-theme="light"] .lp-article { background: #fff; border-color: rgba(107,45,200,.12); box-shadow: 0 2px 12px rgba(107,45,200,.06); }
html[data-theme="light"] .lp-article-title { color: #1B2440; }
html[data-theme="light"] .lp-article-excerpt { color: #5A6480; }
html[data-theme="light"] .lp-article-date { color: rgba(27,36,64,.4); }

/* ── LOGIN FORM dans landing ── */
.lc { position: relative; width: 100%; max-width: 380px; background: rgba(24,18,74,.8); border: 1px solid rgba(155,93,229,.25); border-radius: var(--rdl); padding: 36px; box-shadow: 0 24px 64px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(12px); }
html[data-theme="light"] .lc { background: #fff; border-color: rgba(107,45,200,.2); box-shadow: 0 8px 40px rgba(107,45,200,.12); }
html[data-theme="light"] .lb-t { color: #1B2440; }
html[data-theme="light"] .lb-s { color: #5A6480; }
html[data-theme="light"] .lf label { color: #5A6480; }
html[data-theme="light"] .lf input { background: #FFFFFF; border-color: rgba(20,28,60,.2); color: #1B2440; }
html[data-theme="light"] .lf input::placeholder { color: rgba(27,36,64,.35); }
html[data-theme="light"] .lf input:focus { border-color: #6B2DC8; background: rgba(107,45,200,.04); }
html[data-theme="light"] .lt-bureau-btn { color: rgba(27,36,64,.28); }
html[data-theme="light"] .lt-bureau-btn:hover { color: rgba(27,36,64,.55); }
html[data-theme="light"] .lt-back-btn { color: rgba(27,36,64,.45); }
html[data-theme="light"] .lt-back-btn:hover { color: rgba(27,36,64,.75); }
.lb { text-align: center; margin-bottom: 28px; }
.lb-ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--p); border-radius: var(--rd); margin-bottom: 14px; overflow: hidden; }
.lb-ic img { width: 100%; height: 100%; object-fit: cover; }
.lb-t { font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.lb-s { font-size: 12px; color: var(--sbt); margin-top: 4px; }

.lt-tabs { display: flex; gap: 4px; background: rgba(255,255,255,.05); border: 1px solid var(--sb3); border-radius: var(--rds); padding: 3px; margin-bottom: 20px; }
.lt-tab { flex: 1; padding: 9px 0; background: none; border: none; border-radius: var(--rds); font-family: var(--ff); font-size: 12.5px; font-weight: 600; color: var(--sbt); cursor: pointer; transition: all .15s; letter-spacing: .01em; }
.lt-tab:hover { color: #fff; }
.lt-tab.on { background: var(--p); color: #fff; }

.le { display: none; background: rgba(226,35,26,.15); color: #FF6B6B; border: 1px solid rgba(226,35,26,.3); border-radius: var(--rds); padding: 9px 13px; font-size: 12.5px; margin-bottom: 14px; }
.le.v { display: block; }
.lf { margin-bottom: 14px; }
.lf label { font-size: 10.5px; font-weight: 600; color: var(--sbt); letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.lf input { width: 100%; padding: 10px 13px; border: 1px solid var(--sb3); border-radius: var(--rds); font-family: var(--ff); font-size: 13px; color: #fff; background: rgba(255,255,255,.07); outline: none; transition: border-color .15s; }
.lf input::placeholder { color: rgba(255,255,255,.3); }
.lf input:focus { border-color: var(--p); background: rgba(155,93,229,.08); }
.lf input.lf-pin { text-align: center; font-size: 22px; letter-spacing: 12px; font-weight: 600; padding: 10px 13px 10px 25px; }
.lb-btn { width: 100%; padding: 11px; background: var(--p); color: #fff; border: none; border-radius: var(--rds); font-family: var(--ff); font-size: 13.5px; font-weight: 600; cursor: pointer; letter-spacing: .01em; transition: background .15s; margin-top: 6px; }
.lb-btn:hover { background: var(--pd); }
.lb-btn:disabled { opacity: .5; cursor: not-allowed; }
.lt-bureau-btn { background: none; border: none; font-family: var(--ff); font-size: 11px; color: rgba(255,255,255,.18); cursor: pointer; letter-spacing: .04em; padding: 4px 8px; transition: color .2s; }
.lt-bureau-btn:hover { color: rgba(255,255,255,.45); }
.lt-back-btn { background: none; border: none; font-family: var(--ff); font-size: 12px; color: rgba(255,255,255,.4); cursor: pointer; padding: 4px 8px; transition: color .2s; }
.lt-back-btn:hover { color: rgba(255,255,255,.7); }
.ld { margin-top: 16px; padding: 12px 13px; background: rgba(255,255,255,.05); border-radius: var(--rds); font-size: 11.5px; color: var(--sbt); line-height: 1.8; border: 1px solid rgba(255,255,255,.07); }
.ld strong { display: block; color: var(--p); font-size: 11px; margin-bottom: 6px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

/* ── LAYOUT ── */
#app { display: flex; min-height: 100vh; }

/* ── SIDEBAR — Dark navy Cisco ── */
.sb { width: 220px; flex-shrink: 0; background: linear-gradient(175deg, #2E1065 0%, #1F0F4A 40%, #140A35 75%, #0A0620 100%); border-right: 1px solid rgba(155,93,229,.22); position: fixed; top: 48px; bottom: 0; left: 0; display: flex; flex-direction: column; padding: 0; z-index: 100; overflow-y: auto; }
.sb::-webkit-scrollbar { width: 3px; }
.sb::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 16px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 8px; }
.sb-ic { width: 32px; height: 32px; background: var(--p); border-radius: var(--rds); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.sb-ic img { width: 100%; height: 100%; object-fit: cover; }
.sb-name { font-size: 14px; font-weight: 600; line-height: 1.2; color: #fff; letter-spacing: -.01em; }
.sb-sub { font-size: 10px; color: var(--sbt); margin-top: 1px; }
.sb-sec { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.28); letter-spacing: .12em; text-transform: uppercase; padding: 14px 14px 5px; margin-top: 2px; }
.nb { display: flex; align-items: center; gap: 10px; width: calc(100% - 16px); margin: 1px 8px; padding: 9px 12px; border: 1px solid transparent; border-radius: var(--rds); background: none; color: rgba(255,255,255,.48); font-size: 13px; font-weight: 400; cursor: pointer; transition: all .15s; text-align: left; }
.nb:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.16); }
.nb.on { background: rgba(124,58,237,.38); color: #fff; font-weight: 600; border-color: rgba(255,255,255,.28); box-shadow: 0 0 12px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.1); }
.nb svg { width: 15px; height: 15px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; }
.nb .cnt { margin-left: auto; background: var(--r); color: #fff; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 10px; min-width: 17px; text-align: center; }
.sb-foot { margin-top: auto; padding: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.up { display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-radius: var(--rds); cursor: pointer; transition: background .12s; }
.up:hover { background: rgba(255,255,255,.06); }
.av { width: 30px; height: 30px; border-radius: 50%; background: var(--p); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.up-info { flex: 1; min-width: 0; }
.up-name { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.up-role { font-size: 10.5px; color: var(--sbt); }
.up-out { background: none; border: none; color: rgba(255,255,255,.4); cursor: pointer; padding: 4px; border-radius: var(--rds); transition: color .13s; display: flex; }
.up-out:hover { color: var(--r); }
.up-out svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── ANNONCE BAR ── */
/* ── TOP BAR ── */
#topbar { position: fixed; top: 0; left: 0; right: 0; height: 48px; background: linear-gradient(90deg, #150A35 0%, #1B0F40 25%, #140C38 60%, #0A0620 100%); border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; padding: 0 12px; z-index: 250; box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 20px rgba(0,0,0,.5); }
.tb-brand { display: flex; align-items: center; gap: 9px; margin-right: 8px; min-width: 210px; }
.tb-logo-svg { width: 38px; height: 38px; flex-shrink: 0; filter: drop-shadow(0 0 5px rgba(150,90,255,0.5)) drop-shadow(0 0 2px rgba(220,50,20,0.3)); }
.tb-title { display: flex; flex-direction: column; line-height: 1.2; }
.tb-title-main { font-size: 14px; font-weight: 700; color: #E8ECFF; letter-spacing: .6px; font-family: var(--ff); }
.tb-title-sub { font-size: 9px; color: rgba(160,180,255,.60); letter-spacing: .3px; font-family: var(--ff); }
.tb-session-range { font-size: 9px; font-weight: 600; color: var(--pm); letter-spacing: .2px; font-family: var(--ff); }
.tb-spacer { flex: 1; }
.tb-right { display: flex; align-items: center; gap: 8px; }
.tb-icon { background: none; border: none; color: rgba(255,255,255,.45); cursor: pointer; width: 32px; height: 32px; border-radius: var(--rds); transition: all .13s; display: flex; align-items: center; justify-content: center; }
.tb-icon:hover { color: #fff; background: rgba(255,255,255,.09); }
.tb-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tb-sep { width: 1px; height: 22px; background: rgba(255,255,255,.1); margin: 0 4px; }
#topbar-av { width: 28px; height: 28px; border-radius: 50%; background: var(--nav-on); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; border: 1px solid rgba(255,255,255,.2); }
.tb-user { display: flex; flex-direction: column; }
.tb-user .up-name { font-size: 12px; font-weight: 600; color: var(--tx); line-height: 1.2; }
.tb-user .up-role { font-size: 10px; color: var(--mu); line-height: 1.2; }
.tb-logout { background: none; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.5); cursor: pointer; padding: 5px 10px; border-radius: var(--rds); transition: all .13s; display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-family: var(--ff); margin-left: 4px; }
.tb-logout:hover { color: #FF6B63; border-color: rgba(226,35,26,.4); background: rgba(226,35,26,.1); }
.tb-logout svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Bande d'annonces défilante — visible uniquement en mobile (la page "Annonces" du menu fait foi sur desktop) */
#ann-ticker { display: none; }
.ann-ticker-track { display: flex; white-space: nowrap; animation: ann-scroll 20s linear infinite; }
.ann-ticker-item { padding: 0 28px; font-size: 12px; font-weight: 500; color: #E8ECFF; flex-shrink: 0; }
@keyframes ann-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── MAIN ── */
.main { margin-left: 220px; margin-top: 48px; flex: 1; min-width: 0; padding: 24px 28px; min-height: calc(100vh - 48px); background: transparent; position: relative; z-index: 1; }
.main.ha { padding-top: 50px; }

/* ── PAGE HEADER ── */
.ph { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ph-l .pt { font-size: 20px; font-weight: 600; color: var(--tx); line-height: 1.25; letter-spacing: -.02em; }
.ph-l .ps { font-size: 12.5px; color: var(--mu); margin-top: 2px; }

/* ── CARDS ── */
.cd { background: rgba(8,14,32,.7); border: 1px solid rgba(255,255,255,.14); border-radius: var(--rd); padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.ch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ct { font-size: 13px; font-weight: 600; color: var(--tx); display: flex; align-items: center; gap: 6px; }
.ct svg { width: 14px; height: 14px; stroke: var(--p); fill: none; stroke-width: 2; }

/* ── STATS GRID ── */
/* ── DASHBOARD CHARTS ── */
.dg4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 14px; }
@media (max-width: 600px) { .dg4 { grid-template-columns: 1fr; } }
.ch-wrap { display: flex; flex-direction: column; align-items: center; padding: 28px 20px 22px; gap: 14px; }
.ch-t { font-size: 11px; font-weight: 700; color: var(--mu); text-transform: uppercase; letter-spacing: .08em; text-align: center; }
.ch-ring { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
.ch-ring svg { width: 180px; height: 180px; }
.ch-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.ch-num { font-size: 40px; font-weight: 700; color: var(--tx); line-height: 1; }
.ch-unit { font-size: 12px; color: var(--mu); }
.ch-legs { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.ch-leg { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--mu); }
.ch-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* legacy stat grid kept for fallback */
.sg { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sc { background: var(--wh); border: 1px solid var(--bd); border-radius: var(--rd); padding: 14px 16px; box-shadow: var(--sh); border-top: 2px solid var(--p); }
.sl { font-size: 11px; font-weight: 500; color: var(--mu); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.sv { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.sv.gn { color: var(--g); }
.sv.rd { color: var(--r); }
.sv.vio { color: var(--p); }
.sv.go { color: var(--o); }
.ss { font-size: 11px; color: var(--mu); margin-top: 5px; }

/* ── TWO-COL GRID ── */
.tc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 960px) { .tc { grid-template-columns: 1fr; } }

/* ── TABLE ── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { font-size: 10.5px; font-weight: 600; color: var(--mu); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--bd); letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.04); }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--bd); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.ck { cursor: pointer; transition: background .1s; }
.tbl tr.ck:hover td { background: var(--px); }

/* ── BADGES ── */
.bg { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 3px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.bg-g { background: var(--gl); color: #7DD65C; }
.bg-r { background: var(--rl); color: #FF6B63; }
.bg-o { background: var(--ol); color: #FFD166; }
.bg-p { background: var(--pl); color: var(--pm); }
.bg-b { background: var(--bl); color: #9DB8FF; }
.bg-m { background: var(--bg); color: var(--mu); border: 1px solid var(--bd); }

/* ── MEMBRE CELL ── */
.mc { display: flex; align-items: center; gap: 9px; }
.av-s { width: 28px; height: 28px; border-radius: 50%; background: var(--p); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.mn { font-weight: 500; font-size: 13px; }
.msub { font-size: 11px; color: var(--mu); }
.dot-online { color: #2ECC71; font-size: 10px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--rds); font-family: var(--ff); font-size: 12.5px; font-weight: 500; cursor: pointer; border: none; transition: all .12s; white-space: nowrap; }
.btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.b-p { background: var(--p); color: #fff; }
.b-p:hover { background: var(--pd); }
.b-s { background: var(--bg); color: var(--tx); border: 1px solid var(--bd); }
.b-s:hover { background: var(--bd); }
.b-g { background: rgba(255,255,255,.08); color: var(--tx); border: 1px solid var(--bd); }
.b-g:hover { background: rgba(255,255,255,.14); border-color: var(--mu); }
.b-r { background: var(--rl); color: var(--r); border: 1px solid rgba(226,35,26,.2); }
.b-r:hover { background: var(--r); color: #fff; }
.b-gn { background: var(--gl); color: #3A7E22; border: 1px solid rgba(108,192,74,.2); }
.b-gn:hover { background: var(--g); color: #fff; }
.btn.sm { padding: 4px 9px; font-size: 11.5px; }

/* ── SEARCH + FILTERS ── */
.fb { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.sb-box { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 7px 14px; flex: 1; min-width: 160px; max-width: 280px; transition: border-color .15s; }
.sb-box input { color: var(--tx); }
.sb-box:focus-within { border-color: var(--p); box-shadow: 0 0 0 2px rgba(155,93,229,.15); }
.sb-box svg { width: 13px; height: 13px; stroke: var(--mu); fill: none; flex-shrink: 0; }
.sb-box input { border: none; outline: none; font-family: var(--ff); font-size: 13px; color: var(--tx); width: 100%; background: none; }
.fsel { padding: 7px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; font-family: var(--ff); font-size: 12.5px; color: var(--tx); background: rgba(255,255,255,.05); cursor: pointer; outline: none; transition: border-color .15s; }
.fsel option { background: #1C2A3A; }
.fsel:focus { border-color: var(--p); }

/* ── FORMS ── */
.fs { display: none; background: rgba(255,255,255,.04); border: 1px solid var(--bd); border-radius: var(--rd); padding: 16px; margin-bottom: 12px; border-top: 3px solid var(--p); }
.fs.op { display: block; }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.fr.t3 { grid-template-columns: 1fr 1fr 1fr; }
.fr.f1 { grid-template-columns: 1fr; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.fg { display: flex; flex-direction: column; gap: 4px; }
.fg label { font-size: 10.5px; font-weight: 600; color: var(--mu); letter-spacing: .05em; text-transform: uppercase; }
.fg input, .fg select, .fg textarea { padding: 8px 11px; border: 1px solid var(--bd); border-radius: var(--rds); font-family: var(--ff); font-size: 13px; color: var(--tx); background: rgba(255,255,255,.06); outline: none; transition: border-color .15s; }
.fg input::placeholder { color: var(--mu); }
.fg select option { background: #1C2A3A; color: #E4EAF0; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--p); box-shadow: 0 0 0 2px rgba(155,93,229,.12); }
.fdiv { font-size: 11px; font-weight: 700; color: var(--p); margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; letter-spacing: .05em; text-transform: uppercase; }
.fdiv::after { content: ''; flex: 1; height: 1px; background: var(--bd); }

/* ── PROFILE PANEL ── */
.po { display: none; position: fixed; inset: 0; background: rgba(13,27,42,.5); z-index: 200; backdrop-filter: blur(4px); }
.po.op { display: flex; align-items: stretch; justify-content: flex-end; }
.pp { position: relative; width: 520px; max-width: 95vw; background: var(--wh); height: calc(100% - 48px); margin-top: 48px; overflow-y: auto; padding: 24px; animation: slideIn .2s ease; border-left: 1px solid var(--bd); }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.pp-close { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: var(--rds); background: var(--bg); border: 1px solid var(--bd); cursor: pointer; font-size: 14px; color: var(--mu); display: flex; align-items: center; justify-content: center; }
.pp-close:hover { background: var(--bd); color: var(--tx); }
.pp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--bd); }
.pp-av { width: 46px; height: 46px; border-radius: 50%; background: var(--p); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.pp-name { font-size: 17px; font-weight: 600; line-height: 1.2; }
.pp-meta { font-size: 11.5px; color: var(--mu); margin-top: 2px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; background: var(--pl); color: var(--pd); }
.chip.r { background: var(--rl); color: var(--r); }
.chip.g { background: var(--gl); color: #3A7E22; }
.chip.o { background: var(--ol); color: #8B6200; }
.ps { margin-bottom: 16px; }
.pst { font-size: 10px; font-weight: 700; color: var(--mu); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--bd); }
.ig { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ii { display: flex; flex-direction: column; gap: 2px; }
.il { font-size: 10.5px; color: var(--mu); }
.iv { font-size: 12.5px; font-weight: 500; }
.pb { height: 6px; background: var(--bd); border-radius: 2px; overflow: hidden; margin: 7px 0; }
.pf { height: 100%; border-radius: 2px; background: var(--p); }
.pf.ok { background: var(--g); }
.vr { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: var(--rds); background: rgba(255,255,255,.05); margin-bottom: 3px; font-size: 12px; border: 1px solid var(--bd); }
.ay { background: var(--bg); border-radius: var(--rds); padding: 10px; margin-bottom: 6px; border: 1px solid var(--bd); }
.ay.dc { border-color: var(--r); background: var(--rl); }
.mg { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.md { border-radius: 3px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
.md.ok { background: var(--gl); color: #3A7E22; }
.md.lt { background: var(--rl); color: var(--r); }
.md.pa { background: var(--ol); color: #8B6200; }
.md.cu { background: var(--pl); color: var(--pd); border: 1.5px solid var(--p); }
.md.ft { background: var(--bg); color: var(--mu); }
.ins-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--rds); margin-bottom: 6px; }
.ins-card.ok { background: var(--gl); border: 1px solid rgba(108,192,74,.25); }
.ins-card.bad { background: var(--rl); border: 1px solid rgba(226,35,26,.2); }
.ins-card.warn { background: var(--ol); border: 1px solid rgba(250,184,46,.25); }
.ins-label { font-size: 13px; font-weight: 600; }
.ins-sub { font-size: 11px; color: var(--mu); margin-top: 2px; }
.sec-progress { height: 6px; background: var(--bd); border-radius: 2px; overflow: hidden; margin: 5px 0; }
.sec-fill { height: 100%; border-radius: 2px; background: var(--o); transition: width .3s; }
.sec-fill.complete { background: var(--g); }
.versement-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 9px; background: var(--bg); border-radius: var(--rds); margin-bottom: 4px; font-size: 12px; border: 1px solid var(--bd); }
.finp { padding: 7px 10px; border: 1px solid var(--bd); border-radius: var(--rds); font-family: var(--ff); font-size: 12.5px; color: var(--tx); background: rgba(255,255,255,.06); outline: none; transition: border-color .15s; }
.finp:focus { border-color: var(--p); }
.adc { background: var(--bg); border-radius: var(--rds); padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--bd); }
.adc.dec { background: var(--rl); border-color: rgba(226,35,26,.25); }
.adh { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.adn { font-weight: 600; font-size: 13px; }
.adn2 { font-size: 12px; color: var(--mu); margin-top: 4px; }
.adm { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--mu); margin-top: 3px; flex-wrap: wrap; }
.ads { font-size: 12px; color: var(--r); margin-top: 6px; }

/* ── MODALS ── */
.mo { display: none; position: fixed; inset: 0; background: rgba(13,27,42,.5); z-index: 300; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.mo.op { display: flex; }
.mb { background: var(--wh); border-radius: var(--rdl); padding: 24px; width: 420px; max-width: 95vw; box-shadow: var(--shm); border-top: 3px solid var(--p); }
.mt { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: var(--tx); }
.mf { display: flex; gap: 7px; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bd); }

/* ── SESSION / RÉUNIONS ── */
.smg { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; }
.sm { height: 20px; border-radius: 2px; cursor: help; transition: opacity .15s; }
.sm:hover { opacity: .75; }
.sm.dn { background: var(--g); }
.sm.cu { background: var(--o); }
.sm.ft { background: var(--bd); }
.pm { border-radius: 3px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
.pm.done { background: var(--pl); color: var(--pd); }
.pm.current { background: var(--p); color: #fff; }
.pm:not(.done):not(.current) { background: var(--bg); color: var(--mu); }
/* ── RÉUNION TABS ── */
.tab-nav { display: flex; gap: 0; border-bottom: 1px solid var(--bd); margin-bottom: 14px; }
.tn { padding: 9px 18px; border: none; background: none; color: var(--mu); font-family: var(--ff); font-size: 13px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .12s; white-space: nowrap; }
.tn:hover { color: var(--tx); }
.tn.on { color: var(--p); border-bottom-color: var(--p); font-weight: 600; }
.rt { display: none; }
.rt.on { display: block; }
/* Month pills */
.mt-pills { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--bd) transparent; }
.mt-pills::-webkit-scrollbar { height: 3px; }
.mt-pills::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 2px; }
.mt-pill { padding: 5px 13px; border-radius: 14px; border: 1px solid var(--bd); background: none; color: var(--mu); font-size: 12px; font-family: var(--ff); font-weight: 500; cursor: pointer; transition: all .12s; white-space: nowrap; flex-shrink: 0; }
.mt-pill:hover { color: var(--tx); background: rgba(255,255,255,.06); }
.mt-pill.dn { border-color: rgba(108,192,74,.4); color: #7DD65C; }
.mt-pill.cu { border-color: var(--o); color: var(--o); }
.mt-pill.ft { opacity: .4; }
.mt-pill.sel.dn { background: rgba(108,192,74,.18); }
.mt-pill.sel.cu { background: rgba(250,184,46,.18); border-color: var(--o); }
.mt-pill.sel.ft { background: rgba(255,255,255,.08); color: var(--tx); opacity: 1; border-color: var(--mu); }
/* Month summary stats inline */
.ms-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ms-stat { background: rgba(255,255,255,.05); border: 1px solid var(--bd); border-radius: var(--rds); padding: 8px 14px; }
.ms-stat .msv { font-size: 20px; font-weight: 700; color: var(--tx); }
.ms-stat .msl { font-size: 10.5px; color: var(--mu); margin-top: 1px; }
/* Session planning */
.sess-card { border: 1px solid var(--bd); border-radius: var(--rd); padding: 16px; margin-bottom: 12px; background: rgba(255,255,255,.03); }
.sess-card.active { border-left: 3px solid var(--p); }
.dur-btn { padding: 7px 18px; border-radius: var(--rds); border: 1px solid var(--bd); background: none; color: var(--mu); font-family: var(--ff); font-size: 13px; cursor: pointer; transition: all .12s; }
.dur-btn.on { background: var(--nav-on); color: #fff; border-color: var(--nav-on); }
.prs { padding: 4px 7px; border-radius: var(--rds); border: 1px solid var(--bd); background: rgba(255,255,255,.05); color: var(--tx); font-family: var(--ff); font-size: 12px; outline: none; cursor: pointer; }
.prs option { background: var(--wh); }
.rg { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 8px; }
.rc { background: var(--wh); border: 1px solid var(--bd); border-radius: var(--rd); padding: 12px; cursor: pointer; transition: all .15s; }
.rc:hover { border-color: var(--p); box-shadow: 0 0 0 2px rgba(155,93,229,.12); }
.rc.dn { border-color: var(--g); background: var(--gl); border-left: 3px solid var(--g); }
.rc.cu { border-color: var(--o); background: var(--ol); border-left: 3px solid var(--o); }
.rc.ft { opacity: .55; }
.rn { font-size: 9.5px; font-weight: 700; color: var(--mu); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.rm { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.ri { font-size: 11px; color: var(--mu); }
.bk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--p); cursor: pointer; background: none; border: none; font-family: var(--ff); padding: 0; margin-bottom: 14px; font-weight: 500; }
.bk:hover { text-decoration: underline; }
.bk svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.pr-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--rds); background: var(--bg); margin-bottom: 4px; gap: 10px; border: 1px solid var(--bd); }
.prs { padding: 4px 8px; border: 1px solid var(--bd); border-radius: var(--rds); font-family: var(--ff); font-size: 12px; cursor: pointer; outline: none; transition: all .15s; background: var(--wh); }
.prs.present { border-color: var(--g); background: var(--gl); color: #3A7E22; }
.prs.excuse { border-color: var(--o); background: var(--ol); color: #8B6200; }
.prs.absent { border-color: var(--mu); color: var(--mu); }

/* ── TONTINE ── */
.tc2 { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--rds); background: var(--bg); margin-bottom: 4px; cursor: pointer; transition: background .12s; border: 1px solid var(--bd); }
.tc2:hover { background: var(--pl); border-color: var(--p); }
.tc2.done { background: var(--gl); border-color: rgba(108,192,74,.3); }
.tc2.cur { background: var(--ol); border-color: rgba(250,184,46,.3); }
.tnum { width: 26px; height: 26px; border-radius: 50%; background: var(--pl); color: var(--pd); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.tc2.done .tnum { background: var(--g); color: #fff; }
.tc2.cur .tnum { background: var(--o); color: #fff; }

/* ── AUDIT ── */
.ar { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bd); }
.ar:last-child { border-bottom: none; }
.ad2 { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.ad2.add { background: var(--g); }
.ad2.edit { background: var(--p); }
.ad2.del { background: var(--r); }
.ad2.pay { background: var(--o); }
.ai { flex: 1; }

/* ── TOAST ── */
.toast { position: fixed; bottom: 20px; right: 20px; padding: 10px 16px; border-radius: var(--rds); font-size: 12.5px; font-weight: 500; z-index: 9999; transform: translateY(10px); opacity: 0; transition: all .2s; pointer-events: none; max-width: 300px; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.toast.v { transform: none; opacity: 1; }
.toast.success { background: #3A7E22; color: #fff; }
.toast.error { background: var(--r); color: #fff; }
.toast.info { background: var(--pd); color: #fff; }

/* ── ADMIN ── */
.user-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--rds); background: var(--bg); margin-bottom: 6px; gap: 12px; flex-wrap: wrap; border: 1px solid var(--bd); }
.role-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.role-badge.superadmin { background: var(--rl); color: var(--r); }
.role-badge.admin { background: var(--pl); color: var(--pd); }
.role-badge.membre { background: var(--gl); color: #3A7E22; }
.pending-badge { display: inline-flex; padding: 2px 7px; background: var(--ol); color: #8B6200; border-radius: 3px; font-size: 10.5px; font-weight: 700; margin-left: 6px; }

/* ── PAGE VISIBILITY ── */
.page { display: none; }
.page.on { display: block; }
.rp { display: none; }
.rp.on { display: block; }

/* ── COTISATION GRID 16 MOIS ── */
.cg16 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.cg { border-radius: 3px; padding: 5px 3px; text-align: center; font-size: 9.5px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: default; }
.cg span { font-size: 8.5px; color: var(--mu); font-weight: 400; }
.cg.paid { background: var(--gl); color: #3A7E22; }
.cg.late { background: var(--rl); color: var(--r); }
.cg.partial { background: var(--ol); color: #8B6200; }
.cg.current { background: var(--p); color: #fff; }
.cg.future { background: var(--bg); color: var(--mu); border: 1px solid var(--bd); }

/* ── REPAS CARD ── */
.rpc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: var(--rds); background: var(--bg); border: 1px solid var(--bd); margin-bottom: 4px; }
.rpc.paid { background: var(--gl); border-color: rgba(108,192,74,.25); }

/* ── COMMENTAIRES ── */
.ci { background: var(--ol); border-radius: var(--rds); padding: 9px 11px; margin-bottom: 5px; border: 1px solid rgba(250,184,46,.25); }
.cm { font-size: 10.5px; color: #8B6200; font-weight: 700; margin-bottom: 3px; }
.cx { font-size: 12.5px; }

/* ── SESSION PILL ── */
#session-pill { font-size: 9.5px; color: var(--pm); font-weight: 600; margin-top: 2px; }

/* ── UTILS ── */
.gn { color: var(--g); }
.rd { color: var(--r); }
.vio { color: var(--p); }

/* ════════════════════════════════════════
   MOBILE — menu hamburger + sidebar/panneau tiroirs
   ════════════════════════════════════════ */
.sb-burger { display: none; background: none; border: none; color: rgba(255,255,255,.85); width: 32px; height: 32px; border-radius: var(--rds); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-right: 4px; }
.sb-burger:hover { background: rgba(255,255,255,.08); }
.sb-burger svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2.2; }
#mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 99; }

@media (max-width: 860px) {
  /* Landing page responsive */
  .lp-nav-links { display: none; }
  .lp-burger { display: flex; }
  .lp-hero { flex-direction: column; min-height: auto; padding: 60px 24px 40px; text-align: center; }
  .lp-hero-inner { padding-left: 0; margin: 0; }
  .lp-hero-title { font-size: 38px; }
  .lp-hero-visual { padding-right: 0; margin-top: 32px; }
  .lp-hero-svg { width: 140px; height: 140px; }
  .lp-hero-actions { justify-content: center; }
  .lp-cards { grid-template-columns: 1fr; }
  /* Équipe mobile : photo carrée à gauche, texte à droite — toujours horizontal */
  .lp-tcard { flex-direction: row !important; min-height: auto; align-items: stretch; }
  .lp-tcard-rev { flex-direction: row !important; }
  .lp-tcard-photo { width: 130px; min-width: 130px; height: auto; }
  .lp-tcard-text { padding: 20px 18px; justify-content: center; }
  .lp-tcard-quote { font-size: 13.5px; margin: 8px 0 14px; }
  .lp-stats { gap: 28px; }
  .lp-section { padding: 56px 20px; }
  /* Articles mobile : layout horizontal compact */
  .lp-articles { grid-template-columns: 1fr; gap: 12px; }
  .lp-article { display: flex; gap: 14px; padding: 14px; align-items: flex-start; }
  .lp-article-img { width: 90px; min-width: 90px; height: 90px; border-radius: 8px; margin-bottom: 0; flex-shrink: 0; }
  .lp-article-img img { border-radius: 8px; }
  .lp-article-body { flex: 1; min-width: 0; }
  .lp-article-excerpt { display: none; }
  .lp-article-title { font-size: 14px; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lp-article-tag { margin-bottom: 4px; }
  .lp-article-date { margin-bottom: 6px; }
  .lp-modal-body-grid { flex-direction: column; }
  .lp-modal-img-side { width: 100%; }
  .lp-article-modal-inner { padding: 24px 18px; }
  .lp-footer-main { grid-template-columns: 1fr 1fr; gap: 28px; padding: 40px 20px 28px; }
  .lp-footer-bar { flex-direction: column; text-align: center; gap: 8px; }
  .lc { max-width: 100%; }

  .sb-burger { display: flex; }
  #mobile-backdrop.v { display: block; }

  #topbar { padding: 0 10px; gap: 4px; }
  .tb-brand { min-width: 0; }
  .tb-user { display: none; }

  .sb { transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1); box-shadow: 8px 0 32px rgba(0,0,0,.6); }
  .sb.op { transform: translateX(0); }

  .main { margin-left: 0; padding: 18px 14px; }

  #ann-ticker.v { display: flex; position: fixed; top: 48px; left: 0; right: 0; height: 34px; background: linear-gradient(90deg, #150A35 0%, #1B0F40 25%, #140C38 60%, #0A0620 100%); border-bottom: 1px solid rgba(255,255,255,.1); z-index: 240; overflow: hidden; align-items: center; }
  body.has-ann-ticker .main { margin-top: 82px; }
  body.has-ann-ticker .sb { top: 82px; }

  .ph-l .pt { font-size: 18px; }

  .ch-ring, .ch-ring svg { width: 140px; height: 140px; }

  .ig { grid-template-columns: 1fr; }
  .mg, .cg16 { grid-template-columns: repeat(4, 1fr); }
  .smg { grid-template-columns: repeat(8, 1fr); }
  .rg { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

  .cd { overflow-x: auto; padding: 13px; }
  .tbl { min-width: 480px; }

  /* Formulaires (ajout membre, paiement, annonce, nouvel utilisateur…) : un champ par ligne pour une saisie facile au pouce. */
  .fr, .fr.t3, .grid2 { grid-template-columns: 1fr; }
  .fs { padding: 13px; }

  /* Barre de filtres : un filtre par ligne, pleine largeur, plus facile à toucher. */
  .fb { flex-direction: column; align-items: stretch; }
  .fb > * { width: 100%; max-width: none; box-sizing: border-box; }

  /* Panneau fiche membre (slide-in) : occupe tout l'écran sur mobile.
     margin-top égal à la hauteur de #topbar (z-index supérieur) pour que le
     bouton ✕ ne se retrouve pas caché sous la barre fixe du haut. */
  .pp { width: 100vw; max-width: 100vw; height: calc(100% - 48px); margin-top: 48px; padding: 18px; }
}

@media (max-width: 480px) {
  .tb-logout span { display: none; }
  .tb-logout { padding: 6px; gap: 0; }
  .ph-l .pt { font-size: 16px; }
  .ch-ring, .ch-ring svg { width: 120px; height: 120px; }
}
.go { color: var(--o); }