/* ============================================================
   MENTORA — Design System
   Colors: #071B3B (navy) | #10B981 (green) | #F59E0B (orange)
   Font: Poppins
   ============================================================ */

:root {
  --navy:        #071B3B;
  --navy-dark:   #040F22;
  --navy-mid:    #0D2952;
  --green:       #10B981;
  --green-light: #D1FAE5;
  --green-dark:  #059669;
  --orange:      #F59E0B;
  --orange-light:#FFF3CD;
  --orange-dark: #D97706;
  --blue:        #3B82F6;
  --blue-light:  #DBEAFE;
  --purple:      #8B5CF6;
  --purple-light:#F3E8FF;
  --red:         #EF4444;
  --red-light:   #FEE2E2;

  --bg:          #F8F9FA;
  --white:       #FFFFFF;
  --gray-50:     #F9FAFB;
  --gray-100:    #F3F4F6;
  --gray-200:    #E5E7EB;
  --gray-400:    #9CA3AF;
  --gray-500:    #6B7280;
  --gray-700:    #374151;
  --gray-900:    #111827;

  --text:        #1F2937;
  --text-muted:  #6B7280;
  --border:      #E5E7EB;

  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow:      0 4px 16px rgba(0,0,0,.08);
  --shadow-md:   0 8px 32px rgba(0,0,0,.10);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.12);

  --navbar-h:    70px;
  --sidebar-w:   260px;
}

/* ── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--navbar-h); }
body {
  font-family: 'Poppins', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }

/* ── TYPOGRAPHY ─────────────────────────────────────── */
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.15; }
h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p  { color: var(--text-muted); }
.text-green  { color: var(--green); }
.text-orange { color: var(--orange); }
.text-dark   { color: var(--navy); }
.text-muted  { color: var(--text-muted); }

/* ── SKIP NAVIGATION (accessibilité clavier) ────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--navy);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 0; outline: 3px solid var(--green); outline-offset: 2px; }

/* ── LAYOUT ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.section { padding: 56px 0; content-visibility: auto; contain-intrinsic-size: 0 400px; }
.section.bg-light { background: var(--gray-50); }
.mt-24 { margin-top: 24px; }

/* ── BUTTONS ─────────────────────────────────────────── */
/* ── FOCUS-VISIBLE (keyboard navigation accessibility) ── */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: .9rem;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--green);
  color: #fff;
}
.btn-primary:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(16,185,129,.3); }
.btn-orange {
  background: var(--orange);
  color: #fff;
}
.btn-orange:hover { background: var(--orange-dark); }
.btn-navy {
  background: var(--navy);
  color: #fff;
}
.btn-navy:hover { background: var(--navy-dark); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--border);
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-white {
  background: #fff;
  color: var(--navy);
  font-weight: 700;
}
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.5);
}
.btn-outline-white:hover { background: rgba(255,255,255,.15); }
.btn-secondary {
  background: var(--gray-100);
  color: var(--navy);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover { background: var(--gray-200); border-color: var(--gray-400); }
.btn-success {
  background: var(--green);
  color: #fff;
}
.btn-success:hover { background: var(--green-dark); }
.btn-sm { padding: 6px 16px; font-size: .82rem; }
.btn-lg { padding: 14px 32px; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled,
.btn[disabled],
button:disabled,
button[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}
.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all .2s;
  position: relative;
}
.btn-icon:hover { background: var(--gray-100); color: var(--text); }

/* ── BADGE ───────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: .72rem;
  font-weight: 600;
}
.badge-premium {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--orange);
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: .7rem;
  font-weight: 700;
}

/* ── NAVBAR ──────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s;
}
.navbar.scrolled { box-shadow: var(--shadow-md); }
.nav-inner {
  display: flex;
  align-items: center;
  height: var(--navbar-h);
  gap: 8px;
}
.brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; color: var(--navy); }
.brand-logo { height: 56px; width: auto; }
.brand-name {
  font-family: 'Nunito', 'Poppins', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--navy);
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}
.brand-a { color: var(--orange); }
.nav-links {
  display: none;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
@media (min-width: 900px) {
  .nav-links { display: flex; }
}
.nav-link {
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all .2s;
}
.nav-link:hover, .nav-link.active {
  color: var(--navy);
  background: var(--gray-100);
}
.nav-link--highlight {
  color: var(--navy);
  font-weight: 600;
  border: 1.5px solid transparent;
}
.nav-link--highlight:hover, .nav-link--highlight.active {
  background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
  border-color: #A7F3D0;
  color: #059669;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto; /* pousse les actions à droite sur desktop ET mobile */
}
.avatar-sm {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
}
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: none;
  border: none;
  flex-shrink: 0;
}
/* Hamburger visible sur TOUS les écrans (mobile + desktop) */
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .32s cubic-bezier(.4,0,.2,1),
              opacity  .28s ease,
              width    .28s ease;
  transform-origin: center;
}

/* ── Animation hamburger → X quand le drawer est ouvert ── */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Search dropdown */
.nav-search {
  display: none;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  background: #fff;
}
.nav-search.open { display: block; }
.search-bar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  padding: 8px 16px;
}
.search-bar-nav input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: .92rem;
  color: var(--text);
}
/* ══════════════════════════════════════════════
   DRAWER LATÉRAL MOBILE
══════════════════════════════════════════════ */
.nav-drawer {
  position: fixed;
  top: 0; left: 0;
  width: 285px;
  max-width: 85vw;
  height: 100vh;
  background: #fff;
  z-index: 2000;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 32px rgba(7,27,59,.18);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,27,59,.45);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.nav-drawer-overlay.open { opacity: 1; pointer-events: auto; }

.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nav-drawer-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--gray-100);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.nav-drawer-close:hover { background: var(--gray-200); color: var(--navy); }

.nav-drawer-body {
  padding: 12px 0 32px;
  display: flex;
  flex-direction: column;
}
.nav-drawer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: background .15s;
  border-radius: 0;
}
.nav-drawer-link:hover { background: var(--gray-50); color: var(--green); }
.nav-drawer-link.active { background: var(--green-light); color: var(--green); font-weight: 700; }

.nav-drawer-sep {
  height: 1px;
  background: var(--border);
  margin: 10px 20px;
}
.nav-drawer-section-title {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 20px 4px;
  margin: 0;
}
.nav-drawer-sublink {
  display: block;
  padding: 8px 20px 8px 32px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.nav-drawer-sublink:hover { color: var(--navy); background: var(--gray-50); }

.nav-drawer-link-cta {
  display: block;
  margin: 8px 16px 4px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: #fff !important;
  font-size: .93rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  text-align: center;
  text-decoration: none;
  transition: opacity .2s;
}
.nav-drawer-link-cta:hover { opacity: .88; }

/* Footer : cacher les colonnes de navigation sur mobile */
@media (max-width: 899px) {
  .footer-col-nav { display: none; }
}

/* ── FLASH / ALERTS ──────────────────────────────────── */
.flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-radius: var(--radius);
  margin: 12px 20px;
  font-size: .9rem;
  font-weight: 500;
}
.flash-success { background: var(--green-light); color: var(--green-dark); }
.flash-error   { background: var(--red-light); color: var(--red); }
.flash button  { opacity: .6; font-size: 1.2rem; }
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .88rem; }
.alert-success { background: var(--green-light); color: var(--green-dark); }
.alert-error   { background: var(--red-light); color: var(--red); }

/* ── HERO ─────────────────────────────────────────────── */
.hero {
  background: linear-gradient(145deg, #FFF7ED 0%, #FFFFFF 45%, #F0FDF4 100%);
  padding: 48px 0 32px;
  position: relative;
}
/* Ivorian flag ribbon accents */
.hero::before {
  content: '';
  position: absolute;
  top: -60px; left: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249,115,22,0.13) 0%, rgba(249,115,22,0) 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22,163,74,0.11) 0%, rgba(22,163,74,0) 70%);
  pointer-events: none;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  position: relative; z-index: 1;
}
@media (min-width: 768px) {
  .hero-inner { grid-template-columns: 55% 45%; }
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #FFF7ED, #FEFCE8);
  border: 1.5px solid #FED7AA;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: .82rem;
  font-weight: 600;
  color: #9A3412;
  margin-bottom: 18px;
}
.hero-badge-star { color: #F97316; font-size: 1rem; }
.hero-title {
  font-size: clamp(2.4rem, 6.5vw, 4rem);
  font-weight: 900;
  line-height: 1.08;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}
.hero-subtitle {
  font-size: .97rem;
  color: var(--text-muted);
  margin-bottom: 22px;
  max-width: 420px;
  line-height: 1.65;
}
/* CTA button row (Commencer + Découvrir) */
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  background: #F97316;
  color: #fff;
  font-weight: 700;
  font-size: .97rem;
  transition: all .25s;
  box-shadow: 0 6px 20px rgba(249,115,22,0.35);
}
.btn-hero-primary:hover { background: #EA6A0A; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(249,115,22,0.42); }
.btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--navy);
  font-weight: 600;
  font-size: .97rem;
  border: 2px solid var(--border);
  transition: all .25s;
}
.btn-hero-ghost:hover { border-color: var(--navy); background: rgba(7,27,59,0.05); }
/* Mini stats bar inside hero */
.hero-mini-stats {
  display: flex;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.hero-mini-stat {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero-mini-stat-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.hms-orange { background: #FFF3E6; }
.hms-blue   { background: #EFF6FF; }
.hms-green  { background: #F0FDF4; }
.hms-purple { background: #F5F3FF; }
.hero-mini-stat-body {}
.hero-mini-stat-num {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
}
.hero-mini-stat-lbl {
  font-size: .72rem;
  color: var(--text-muted);
  font-weight: 500;
}
/* Dividers between mini stats */
.hero-mini-stat-div {
  width: 1px;
  height: 32px;
  background: var(--border);
  align-self: center;
}
.hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border-radius: var(--radius-full);
  padding: 7px 7px 7px 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  margin-bottom: 20px;
  border: 1.5px solid var(--border);
  max-width: 480px;
  transition: border-color .2s, box-shadow .2s;
  overflow: hidden;
}
.hero-search:focus-within { border-color: #F97316; box-shadow: 0 4px 20px rgba(249,115,22,.15); }
.hero-search > svg { flex-shrink: 0; }
.hero-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  font-size: .93rem;
  background: transparent;
  color: var(--text);
}
.hero-search input::placeholder { color: var(--gray-400); }
.hero-search button {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #F97316;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s;
}
.hero-search button:hover { background: #EA6A0A; }
.level-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.level-pills::-webkit-scrollbar { display: none; }
.level-pills .pill { flex-shrink: 0; }
.pill {
  padding: 7px 18px;
  border-radius: var(--radius-full);
  font-size: .82rem;
  font-weight: 600;
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  transition: all .2s;
}
.pill:hover          { border-color: var(--green); color: var(--green); }
.pill.pill-active    { background: var(--navy); color: #fff; border-color: var(--navy); }
.pill-green          { background:#D1FAE5; border-color:#A7F3D0; color:#065F46; }
.pill-blue           { background:#DBEAFE; border-color:#BFDBFE; color:#1E40AF; }
.pill-orange         { background:#FEF3C7; border-color:#FDE68A; color:#92400E; }
.pill-purple         { background:#EDE9FE; border-color:#C4B5FD; color:#5B21B6; }
.pill-green:hover    { background: var(--green); color: #fff; border-color: var(--green); }
.pill-blue:hover     { background: var(--blue); color: #fff; border-color: var(--blue); }
.pill-orange:hover   { background: var(--orange); color: #fff; border-color: var(--orange); }
.pill-purple:hover   { background: var(--purple); color: #fff; border-color: var(--purple); }

/* Hero illustration area */
.hero-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 360px;
}
.hero-blob-bg {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 60% 40% 50% 60% / 55% 60% 40% 45%;
  background: linear-gradient(135deg, #FED7AA 0%, #FFF3E6 50%, #D1FAE5 100%);
  z-index: 0;
}
.hero-img {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.12));
}
/* Floating decorative elements */
.hero-deco {
  position: absolute;
  z-index: 2;
  animation: floatDeco 4s ease-in-out infinite;
  user-select: none;
}
.hero-deco-cap1  { top: 8%; left: 18%; font-size: 2rem; animation-delay: 0s; }
.hero-deco-cap2  { top: 6%; right: 10%; font-size: 1.6rem; animation-delay: 1s; }
.hero-deco-cap3  { bottom: 22%; left: 8%; font-size: 1.4rem; animation-delay: 2s; }
.hero-deco-star1 { top: 20%; right: 4%; font-size: 1.1rem; color: var(--orange); animation-delay: .5s; }
.hero-deco-star2 { bottom: 32%; right: 15%; font-size: .85rem; color: var(--orange); animation-delay: 1.8s; }
.hero-deco-play  {
  top: 38%; left: 20%;
  width: 52px; height: 52px;
  background: #FF6B6B;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(255,107,107,.4);
  animation-delay: .8s;
}
.hero-deco-doc {
  bottom: 16%; right: 6%;
  width: 44px; height: 44px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  animation-delay: 1.4s;
}
@keyframes floatDeco {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

/* ── FEATURES ─────────────────────────────────────────── */
.features { background: var(--gray-50); padding: 40px 0; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .features-grid { grid-template-columns: repeat(4, 1fr); }
}
.feature-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
  transition: all .3s;
  display: block;
  box-shadow: var(--shadow-sm);
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); }
.feature-icon {
  width: 60px; height: 60px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.fi-orange { background: #FEF3C7; color: #F59E0B; }
.fi-purple { background: #EDE9FE; color: #8B5CF6; overflow: hidden; }
.fi-blue   { background: #DBEAFE; color: #3B82F6; }
.fi-teal   { background: #D1FAE5; color: #10B981; }
.feature-card h3 { font-size: .97rem; margin-bottom: 8px; color: var(--navy); font-weight: 700; }
.feature-card p  { font-size: .82rem; margin: 0; line-height: 1.55; }

/* ── SECTION HEADER ──────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.section-header.centered { text-align: center; flex-direction: column; gap: 8px; }
.section-title { color: var(--navy); }
.section-sub { color: var(--text-muted); font-size: .9rem; margin-top: 4px; }
.voir-tout-link {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color .2s;
}
.voir-tout-link:hover { color: var(--navy); }

/* ── COURSES ROW (homepage) ────────────────────────── */
.courses-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 600px)  { .courses-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .courses-row { grid-template-columns: repeat(5, 1fr); } }
.course-card-v2 {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all .3s;
  display: block;
}
.course-card-v2:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.course-thumb-v2 {
  position: relative;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.course-thumb-icon-v2 { font-size: 3rem; }
.course-body-v2 { padding: 12px 14px 14px; }
.course-title-v2 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.course-grade-v2 {
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.course-foot-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--text-muted);
}
.course-rating-v2 { display: flex; align-items: center; gap: 3px; font-weight: 700; color: var(--navy); }

/* ── COURSES GRID ────────────────────────────────────── */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 600px)  { .courses-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .courses-grid { grid-template-columns: repeat(4, 1fr); } }
.courses-grid-lg { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px)  { .courses-grid-lg { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .courses-grid-lg { grid-template-columns: repeat(4, 1fr); } }

.course-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all .3s;
  display: block;
}
.course-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.course-thumb {
  position: relative;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.course-thumb-icon { font-size: 2.5rem; }
.course-body { padding: 14px; }
.course-meta { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.course-level {
  font-size: .7rem;
  font-weight: 600;
  background: var(--green-light);
  color: var(--green-dark);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.course-grade {
  font-size: .7rem;
  font-weight: 600;
  background: var(--orange-light);
  color: var(--orange-dark);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.course-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-desc {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--text-muted);
}
.course-rating { display: flex; align-items: center; gap: 3px; font-weight: 600; }

/* ── VIDEOS GRID ──────────────────────────────────────── */
.videos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 480px)  { .videos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .videos-grid { grid-template-columns: repeat(3, 1fr); } }

.videos-grid-lg {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 480px)  { .videos-grid-lg { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .videos-grid-lg { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .videos-grid-lg { grid-template-columns: repeat(4, 1fr); } }

.video-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all .3s;
  display: block;
}
.video-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--navy);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.video-card:hover .video-thumb img { transform: scale(1.05); }
.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.3);
  transition: background .2s;
}
.video-card:hover .video-play { background: rgba(0,0,0,.5); }
.video-play-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s;
}
.video-card:hover .video-play-btn { transform: scale(1.1); }
.video-duration {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(0,0,0,.8);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 600;
}
.video-body { padding: 14px; }
.video-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  margin: 6px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-stats { font-size: .78rem; color: var(--text-muted); display: flex; gap: 12px; }

/* ── STATS SECTION ───────────────────────────────────── */
.stats-outer { background: var(--gray-50); padding: 40px 0; }
.stats-box {
  background: var(--navy);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (min-width: 480px) { .stats-box { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .stats-box { grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 44px 48px; } }
.stat-item { text-align: center; }
.stat-icon { font-size: 2.2rem; margin-bottom: 8px; }
.stat-number {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
}
.stat-label { color: rgba(255,255,255,.65); font-size: .8rem; font-weight: 500; }
/* Legacy stats-section kept for other pages */
.stats-section {
  background: var(--navy);
  padding: 56px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (min-width: 480px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(5, 1fr); } }

/* ── TESTIMONIALS ────────────────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 600px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--gray-100);
}
.testimonial-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar-v2 {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.t-name { display: block; font-size: .92rem; font-weight: 700; color: var(--navy); }
.t-role { display: block; font-size: .75rem; color: var(--text-muted); margin-top: 1px; }
.t-quote {
  font-size: .88rem;
  color: var(--text);
  line-height: 1.7;
  font-style: italic;
}
/* Legacy testimonial styles for other pages */
.testimonial-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}
.testimonial-card blockquote {
  flex: 1;
  font-size: .9rem;
  color: var(--text);
  font-style: italic;
  line-height: 1.7;
}
.testimonial-author strong { display: block; font-size: .9rem; color: var(--navy); }
.testimonial-author span  { font-size: .78rem; color: var(--text-muted); }

/* ── CTA SECTION ─────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  padding: 64px 0;
}
.cta-inner {
  text-align: center;
  color: #fff;
}
.cta-inner h2 { color: #fff; margin-bottom: 12px; }
.cta-inner p  { color: rgba(255,255,255,.85); margin-bottom: 32px; }
.cta-actions  { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── PAGE HEADER ─────────────────────────────────────── */
.page-header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding: 48px 0 36px;
  color: #fff;
}
.page-title { color: #fff; margin-bottom: 8px; }
.page-sub   { color: rgba(255,255,255,.7); margin-bottom: 24px; }
.page-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: var(--radius-full);
  padding: 8px 8px 8px 20px;
  margin-bottom: 20px;
  max-width: 520px;
}
.page-search:focus-within { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.page-search input {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: #fff;
  font-size: .95rem;
}
.page-search input::placeholder { color: rgba(255,255,255,.6); }
.page-search-btn { flex: 0 0 auto; padding: 0 20px; }
.results-count { color: var(--text-muted); font-size: .88rem; margin-bottom: 20px; }

/* ── QUIZ CARDS ──────────────────────────────────────── */
.quizzes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) { .quizzes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .quizzes-grid { grid-template-columns: repeat(3, 1fr); } }
.quiz-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all .2s;
}
.quiz-card:hover { box-shadow: var(--shadow-md); transform: translateX(4px); }
.quiz-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.quiz-body { flex: 1; }
.quiz-title { font-size: .92rem; font-weight: 700; color: var(--navy); margin: 4px 0 6px; }
.quiz-meta  { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-muted); }
.quiz-arrow { font-size: 1.2rem; color: var(--text-muted); transition: transform .2s; }
.quiz-card:hover .quiz-arrow { transform: translateX(4px); color: var(--green); }

/* ── QUIZ SHOW ───────────────────────────────────────── */
.quiz-page { max-width: 760px; margin: 48px auto; padding: 0 20px; }
.quiz-header { margin-bottom: 32px; }
.quiz-progress-bar { height: 6px; background: var(--border); border-radius: 3px; margin: 12px 0; }
.quiz-progress-fill { height: 100%; background: var(--green); border-radius: 3px; transition: width .4s; }
.quiz-question-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-md);
  margin-bottom: 24px;
}
.quiz-question-num { font-size: .8rem; font-weight: 600; color: var(--green); margin-bottom: 8px; }
.quiz-question-text { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 24px; }
.quiz-options { display: flex; flex-direction: column; gap: 12px; }
.quiz-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all .2s;
  font-weight: 500;
}
.quiz-option:hover { border-color: var(--green); background: var(--green-light); }
.quiz-option.selected { border-color: var(--green); background: var(--green-light); }
.quiz-option.correct  { border-color: var(--green); background: var(--green-light); }
.quiz-option.wrong    { border-color: var(--red); background: var(--red-light); }
.quiz-option-letter {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .82rem;
  flex-shrink: 0;
  color: var(--text-muted);
}
.quiz-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}

/* ── AUTH ────────────────────────────────────────────── */
.auth-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, #f0f9f4 0%, #fff8e1 100%);
}
.auth-container { width: 100%; max-width: 480px; }
.auth-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}
.auth-logo { text-align: center; margin-bottom: 20px; }
.auth-logo img, .auth-logo-img { height: 50px; width: auto; display: inline-block; }
.auth-brand-name {
  display: inline-block;
  font-family: 'Nunito', 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -1px;
  line-height: 1;
}
.auth-brand-a { color: var(--orange); }
.auth-title { text-align: center; color: var(--navy); margin-bottom: 8px; font-size: 1.6rem; }
.auth-sub   { text-align: center; color: var(--text-muted); margin-bottom: 20px; font-size: .9rem; }
.auth-form  { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: .88rem; font-weight: 600; color: var(--text); }
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
}
.input-wrap input {
  width: 100%;
  padding: 12px 44px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  font-size: .92rem;
  outline: none;
  transition: border-color .2s;
  color: var(--text);
  background: var(--gray-50);
}
.input-wrap input:focus,
.input-wrap select:focus { border-color: var(--green); background: #fff; outline: none; }
input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
select[readonly],
textarea[readonly] {
  opacity: .6;
  cursor: not-allowed;
  background: var(--gray-100) !important;
}
.toggle-pass { position: absolute; right: 14px; color: var(--text-muted); }
.toggle-pass:hover { color: var(--text); }
.role-select {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.role-option {
  flex: 1;
  min-width: 80px;
}
.role-option input { display: none; }
.role-option span {
  display: block;
  text-align: center;
  padding: 10px 8px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  color: var(--text-muted);
}
.role-option input:checked + span { border-color: var(--green); color: var(--green); background: var(--green-light); }
.role-option span:hover { border-color: var(--green-light); }
.auth-divider {
  text-align: center;
  position: relative;
  margin: 16px 0;
  color: var(--text-muted);
  font-size: .82rem;
}
.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: var(--border);
}
.auth-divider span { background: #fff; padding: 0 12px; position: relative; }
.auth-demo { background: var(--gray-50); border-radius: var(--radius); padding: 16px; }
.auth-demo-title { font-size: .82rem; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.demo-accounts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-btn {
  padding: 9px 12px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: #fff;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  transition: all .2s;
}
.demo-btn:hover { border-color: var(--green); color: var(--green); }
.auth-switch { text-align: center; margin-top: 20px; font-size: .88rem; color: var(--text-muted); }
.auth-switch a { color: var(--green); font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }
.auth-terms { font-size: .75rem; color: var(--text-muted); text-align: center; line-height: 1.5; margin-top: 4px; }
.auth-terms a { color: var(--green); }

/* ── FORUM ───────────────────────────────────────────── */
.forum-grid { display: flex; flex-direction: column; gap: 12px; }
.forum-post-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 16px;
  transition: box-shadow .2s;
}
.forum-post-card:hover { box-shadow: var(--shadow-md); }
.forum-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--green-dark);
  flex-shrink: 0;
  font-size: .9rem;
}
.forum-body { flex: 1; }
.forum-title { font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.forum-excerpt { font-size: .85rem; color: var(--text-muted); margin-bottom: 10px; }
.forum-meta { display: flex; gap: 16px; font-size: .78rem; color: var(--text-muted); }
.forum-new-form {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-md);
  margin-bottom: 32px;
}
.forum-new-form textarea {
  width: 100%;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: inherit;
  font-size: .92rem;
  resize: vertical;
  min-height: 80px;
  outline: none;
}
.forum-new-form textarea:focus { border-color: var(--green); }

/* ── DOCUMENTS ───────────────────────────────────────── */
.documents-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) { .documents-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .documents-grid { grid-template-columns: repeat(3, 1fr); } }
.doc-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .2s;
}
.doc-card:hover { box-shadow: var(--shadow-md); }
.doc-icon { font-size: 2rem; }
.doc-title { font-weight: 700; color: var(--navy); font-size: .95rem; }
.doc-meta  { font-size: .78rem; color: var(--text-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.doc-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--green);
  transition: gap .2s;
}
.doc-card:hover .doc-download { gap: 10px; }

/* ── DOC CARD REFONTE ─────────────────────────────── */
.doc-card { padding: 0; overflow: hidden; }
.doc-thumb {
  position: relative;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.doc-thumb-icon { font-size: 2.8rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
.doc-thumb-badge {
  position: absolute;
  bottom: 8px; right: 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: 4px;
}
.doc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.doc-meta-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.doc-grade-tag {
  font-size: .72rem;
  background: var(--bg-muted, #f0f4f8);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}
.doc-desc { font-size: .78rem; color: var(--text-muted); margin: 0; line-height: 1.4; }
.doc-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.doc-dl-count { font-size: .72rem; color: var(--text-muted); }
.doc-actions-row { display: flex; gap: 6px; align-items: center; }
.doc-soon { font-size: .75rem; color: var(--text-muted); opacity: .5; }
.btn-sm {
  padding: 5px 11px;
  font-size: .76rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all .2s;
}
.btn-ghost {
  background: var(--bg-muted, #f0f4f8);
  color: var(--navy);
  border: 1px solid var(--border, #e2e8f0);
}
.btn-ghost:hover { background: var(--border, #e2e8f0); }

/* ── PDF MODAL VISIONNEUSE ────────────────────────── */
.pdf-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7,27,59,.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.pdf-modal-overlay.active { display: flex; }
.pdf-modal-box {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 900px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
.pdf-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
  gap: 12px;
}
.pdf-modal-title {
  font-weight: 700;
  color: var(--navy);
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdf-modal-close {
  background: var(--bg-muted, #f0f4f8);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
}
.pdf-modal-close:hover { background: #fee2e2; color: #dc2626; }
.pdf-modal-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #f8f9fa;
}
.pdf-modal-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  transition: opacity .3s;
}
.pdf-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-muted);
  font-size: .9rem;
  background: #f8f9fa;
}
.pdf-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid var(--border, #e2e8f0);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pdf-modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .pdf-modal-box { border-radius: 16px; height: 95vh; }
  .pdf-modal-head { padding: 12px 14px; }
  .pdf-modal-foot { padding: 10px 14px; }
}

/* ── PREMIUM ─────────────────────────────────────────── */
.premium-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding: 64px 0;
  color: #fff;
  overflow: hidden;
}
.premium-hero h1 { color: #fff; margin-bottom: 12px; font-size: 2.2rem; }
.premium-hero p  { color: rgba(255,255,255,.75); font-size: 1.05rem; margin-bottom: 0; }
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 900px;
  margin: -40px auto 0;
  padding: 0 20px 60px;
}
@media (min-width: 600px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  box-shadow: var(--shadow-md);
  text-align: center;
  border: 3px solid transparent;
  transition: transform .2s;
}
.pricing-card:hover { transform: translateY(-4px); }
.pricing-card.featured {
  border-color: var(--green);
  position: relative;
}
.pricing-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: #fff;
  padding: 4px 20px;
  border-radius: var(--radius-full);
  font-size: .78rem;
  font-weight: 700;
}
.pricing-name  { font-size: .9rem; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.pricing-price {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 4px;
  line-height: 1;
}
.pricing-period { font-size: .82rem; color: var(--text-muted); margin-bottom: 24px; }
.pricing-features { text-align: left; margin-bottom: 28px; display: flex; flex-direction: column; gap: 10px; }
.pricing-feature { display: flex; align-items: center; gap: 10px; font-size: .88rem; }
.pricing-feature .check { color: var(--green); font-weight: 700; }
.pricing-feature .cross { color: var(--text-muted); }

/* ── FOOTER ──────────────────────────────────────────── */
.footer {
  background: var(--navy);
  color: rgba(255,255,255,.75);
  padding: 56px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
@media (min-width: 600px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-logo   { height: 36px; width: auto; margin-bottom: 14px; filter: brightness(10); }
.footer-brand p { font-size: .87rem; line-height: 1.7; max-width: 280px; }
.footer-title  { color: #fff; font-size: .92rem; font-weight: 700; margin-bottom: 16px; }
.footer-list   { display: flex; flex-direction: column; gap: 10px; }
.footer-list a {
  font-size: .86rem;
  color: rgba(255,255,255,.6);
  transition: color .2s;
}
.footer-list a:hover { color: var(--green); }
.social-links { display: flex; gap: 8px; margin-top: 16px; }
.social-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  transition: all .2s;
}
.social-btn:hover { background: var(--green); color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 24px;
  font-size: .82rem;
  text-align: center;
  color: rgba(255,255,255,.5);
}

/* ── MOBILE BOTTOM NAV ───────────────────────────────── */
.bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  z-index: 900;
  padding: 6px 0;
}
@media (min-width: 900px) { .bottom-nav { display: none; } }
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: .62rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color .2s;
}
.bottom-nav-item.active, .bottom-nav-item:hover { color: var(--green); }
body { padding-bottom: 70px; }
@media (min-width: 900px) { body { padding-bottom: 0; } }

/* ── DASHBOARD ───────────────────────────────────────── */
.dashboard-body { background: var(--gray-50); }
.dash-layout {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: var(--sidebar-w);
  background: #ffffff;
  color: var(--text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 2000;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  -webkit-overflow-scrolling: touch;
  box-shadow: 4px 0 32px rgba(7,27,59,.12);
}
.sidebar.open { transform: translateX(0); }
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.sidebar-logo { height: 36px; }
.sidebar-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--gray-100);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--gray-50);
}
.sidebar-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  flex-shrink: 0;
}
.sidebar-username { font-size: .9rem; font-weight: 600; color: var(--navy); }
.sidebar-role     { font-size: .75rem; color: var(--text-muted); }
.sidebar-nav { padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: .88rem;
  font-weight: 500;
  transition: all .2s;
}
.sidebar-link:hover {
  background: var(--gray-100);
  color: var(--navy);
}
.sidebar-link.active {
  background: #FFF3E6;
  color: #F97316;
  font-weight: 600;
}
.sidebar-logout {
  margin-top: auto;
  color: var(--text-muted);
}
.sidebar-logout:hover { background: #FEE2E2; color: #EF4444; }
.sidebar-premium {
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 8px 0;
  text-align: center;
}
.premium-icon   { font-size: 1.5rem; margin-bottom: 6px; }
.sidebar-premium strong { font-size: .88rem; color: var(--navy); display: block; margin-bottom: 4px; }
.sidebar-premium p { font-size: .75rem; color: var(--text-muted); margin-bottom: 12px; }

/* Dash main area */
.dash-main { flex: 1; display: flex; flex-direction: column; }
.dash-topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.sidebar-open {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: none;
  border: none;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}
/* Hamburger dashboard — mêmes dimensions que nav-toggle */
.sidebar-open span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .32s cubic-bezier(.4,0,.2,1),
              opacity  .28s ease,
              width    .28s ease;
  transform-origin: center;
}

/* ── Animation hamburger → X (dashboard) ── */
.sidebar-open.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sidebar-open.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sidebar-open.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.topbar-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  max-width: 400px;
}
.topbar-search input { border: none; background: none; outline: none; font-size: .88rem; color: var(--text); width: 100%; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border);
  transition: border-color .2s;
}
.topbar-user:hover { border-color: var(--green); }
.user-name { font-size: .85rem; font-weight: 600; color: var(--navy); }
.user-tag  { font-size: .72rem; color: var(--text-muted); }
.notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-content { padding: 24px; flex: 1; }
.dash-page { max-width: 1100px; }

/* Dash welcome */
.dash-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.dash-welcome h1 { font-size: 1.5rem; color: var(--navy); margin-bottom: 4px; }
.dash-date { font-size: .85rem; color: var(--text-muted); }

/* Dash stat cards */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (min-width: 768px) { .dash-stats { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 0 0 0 80px;
  opacity: .1;
}
.stat-blue::before { background: var(--blue); }
.stat-green::before { background: var(--green); }
.stat-orange::before { background: var(--orange); }
.stat-purple::before { background: var(--purple); }
.stat-card-icon { font-size: 1.3rem; }
.stat-card-value { font-size: 1.8rem; font-weight: 900; color: var(--navy); line-height: 1; }
.stat-card-label { font-size: .78rem; color: var(--text-muted); line-height: 1.5; }

/* Dash grid */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 960px) { .dash-grid { grid-template-columns: 2fr 1fr; } }
.dash-col-1, .dash-col-2 { display: flex; flex-direction: column; }
.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dash-section-header h2 { font-size: 1rem; font-weight: 700; color: var(--navy); }
.link-muted { font-size: .82rem; color: var(--text-muted); }
.link-muted:hover { color: var(--green); }

/* Progress cards */
.progress-cards { display: flex; flex-direction: column; gap: 10px; }
.progress-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 12px;
  align-items: center;
  transition: box-shadow .2s;
}
.progress-card:hover { box-shadow: var(--shadow-md); }
.progress-thumb {
  width: 52px; height: 52px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.progress-body { flex: 1; }
.progress-body h4 { font-size: .88rem; font-weight: 700; color: var(--navy); margin: 2px 0 6px; }
.progress-bar-wrap { display: flex; align-items: center; gap: 10px; }
.progress-bar { flex: 1; height: 5px; background: var(--border); border-radius: 3px; }
.progress-fill { height: 100%; background: var(--green); border-radius: 3px; }
.progress-pct { font-size: .72rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }

/* Video mini grid */
.videos-mini-grid { display: flex; flex-direction: column; gap: 10px; }
.video-mini-card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff;
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
  position: relative;
}
.video-mini-card:hover { box-shadow: var(--shadow-md); }
.video-mini-card img {
  width: 90px; height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.video-mini-play {
  position: absolute;
  left: 32px;
  background: rgba(0,0,0,.6);
  color: #fff;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
}
.video-mini-info strong { display: block; font-size: .83rem; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.video-mini-info span  { font-size: .72rem; color: var(--text-muted); }

/* Quiz results */
.quiz-results { display: flex; flex-direction: column; gap: 8px; }
.quiz-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
}
.quiz-result-icon { font-size: 1.1rem; }
.quiz-result-body { flex: 1; }
.quiz-result-body strong { display: block; font-size: .85rem; font-weight: 700; color: var(--navy); }
.quiz-result-body small  { font-size: .72rem; color: var(--text-muted); }
.quiz-result-score { font-weight: 700; font-size: .88rem; padding: 3px 10px; border-radius: var(--radius-full); }
.score-good { background: var(--green-light); color: var(--green-dark); }
.score-bad  { background: var(--red-light); color: var(--red); }

/* Quick actions */
.quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.quick-action {
  display: block;
  background: #fff;
  border-radius: var(--radius);
  padding: 12px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: all .2s;
}
.quick-action:hover { box-shadow: var(--shadow-md); color: var(--green); transform: translateY(-2px); }
.premium-action { color: var(--orange); }
.premium-action:hover { color: var(--orange-dark); }

/* Empty states */
.empty-state {
  text-align: center;
  padding: 64px 20px;
}
.empty-icon { font-size: 3rem; margin-bottom: 16px; }
.empty-state h3 { color: var(--navy); margin-bottom: 8px; }
.empty-state p  { color: var(--text-muted); margin-bottom: 24px; }
.empty-state-sm { text-align: center; padding: 24px; }
.empty-state-sm p { margin-bottom: 12px; font-size: .88rem; }

/* ══════════════════════════════════════════════════════
   SCROLL PROGRESS BAR
   ══════════════════════════════════════════════════════ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--green) 0%, var(--orange) 60%, #8B5CF6 100%);
  z-index: 2000;
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
}

/* ══════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
   TOAST SYSTEM — Modern animated notifications
   ══════════════════════════════════════════════════════ */
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(110%) scale(.92); }
  to   { opacity: 1; transform: translateX(0)    scale(1);   }
}
@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0) scale(1);   max-height: 120px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateX(110%) scale(.92); max-height: 0;   margin-bottom: -8px; }
}
@keyframes toastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.toast-container {
  position: fixed;
  bottom: 90px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 360px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
@media (min-width: 900px) { .toast-container { bottom: 28px; right: 24px; } }

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  font-size: .875rem;
  font-weight: 500;
  color: var(--navy);
  position: relative;
  overflow: hidden;
  pointer-events: all;
  cursor: default;
  animation: toastSlideIn .42s cubic-bezier(.34,1.56,.64,1) both;
  border-left: 4px solid transparent;
}
.toast.toast-hiding {
  animation: toastSlideOut .35s ease-in both;
}

/* Left accent */
.toast-success { border-left-color: #10B981; }
.toast-error   { border-left-color: #EF4444; }
.toast-warning { border-left-color: #F59E0B; }
.toast-info    { border-left-color: #3B82F6; }
.toast-payment { border-left-color: #8B5CF6; }

/* Icon circle */
.toast-icon-wrap {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.toast-success .toast-icon-wrap { background: #ECFDF5; }
.toast-error   .toast-icon-wrap { background: #FEF2F2; }
.toast-warning .toast-icon-wrap { background: #FFFBEB; }
.toast-info    .toast-icon-wrap { background: #EFF6FF; }
.toast-payment .toast-icon-wrap { background: #F5F3FF; }

/* Body */
.toast-body { flex: 1; min-width: 0; }
.toast-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
  opacity: .6;
}
.toast-msg {
  font-size: .875rem;
  line-height: 1.45;
  color: var(--navy);
  word-break: break-word;
}

/* Close button */
.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 6px;
  transition: background .15s, color .15s;
  margin-top: -2px;
}
.toast-close:hover { background: var(--bg); color: var(--navy); }

/* Progress bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: left;
  border-radius: 0 0 16px 16px;
}
.toast-success .toast-progress { background: #10B981; }
.toast-error   .toast-progress { background: #EF4444; }
.toast-warning .toast-progress { background: #F59E0B; }
.toast-info    .toast-progress { background: #3B82F6; }
.toast-payment .toast-progress { background: #8B5CF6; }
.toast-progress.running { animation: toastProgress linear both; }

/* ══════════════════════════════════════════════════════
   SKELETON LOADERS
   ══════════════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
.skeleton-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.skeleton-thumb { height: 130px; }
.skeleton-body  { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line  { height: 12px; border-radius: 6px; }
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }

/* ══════════════════════════════════════════════════════
   TRENDING VIDEOS SECTION (homepage)
   ══════════════════════════════════════════════════════ */
.trending-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 600px) { .trending-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .trending-grid { grid-template-columns: repeat(4, 1fr); } }

/* ══════════════════════════════════════════════════════
   PARTNERS SECTION
   ══════════════════════════════════════════════════════ */
.partners-section { background: var(--gray-50); padding: 40px 0; }
.partners-intro {
  text-align: center;
  margin-bottom: 32px;
}
.partners-intro h2 { margin-bottom: 8px; }
.partners-intro p  { max-width: 500px; margin: 0 auto; }
.partners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 480px) { .partners-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .partners-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; } }
.partner-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all .25s;
  border: 1.5px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.partner-card:hover { box-shadow: var(--shadow-md); border-color: var(--green); transform: translateY(-3px); }
.partner-emoji { font-size: 2.2rem; }
.partner-name  { font-size: .74rem; font-weight: 700; color: var(--navy); line-height: 1.3; }

/* ── Fade in animation for filtered cards ── */
@keyframes fadeInCard {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — corrections complètes mobile-first
   ══════════════════════════════════════════════════════ */

/* ── Très petits écrans (< 380px) ── */
@media (max-width: 380px) {
  .container { padding: 0 12px; }
  .hero-title { font-size: 2rem; }
  .courses-row { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; gap: 12px; }
  .stats-box { padding: 24px 14px; gap: 16px; }
  .pill { padding: 5px 10px; font-size: .74rem; }
}

/* ── Mobile (< 600px) ── */
@media (max-width: 599px) {
  /* Navbar : hauteur réduite, espacements compacts */
  :root { --navbar-h: 60px; }
  /* Logo : plus grand sur mobile (utilisateur a demandé) */
  .brand-logo { height: 42px; }
  /* Nom MENTORA : réduit juste assez pour ne pas déborder */
  .brand-name { font-size: .95rem; letter-spacing: .06em; }
  .nav-inner { gap: 6px; }
  .nav-actions { gap: 4px; }
  .btn-icon { padding: 7px; }
  /* "Se connecter" : icône seule + texte masqué → économise ~70px */
  .nav-btn-login { padding: 7px; min-width: 34px; justify-content: center; }
  .login-text { display: none; }
  /* "S'inscrire" : masqué sur mobile — accessible depuis le drawer */
  .nav-actions .btn-orange { display: none; }

  /* Hero : pleine largeur, texte sans coupure */
  .hero { padding: 28px 0 20px; }
  /* Correction "grid blowout" : les items grid doivent avoir min-width:0
     pour que overflow-x:auto sur .level-pills fonctionne correctement */
  .hero-inner > * { min-width: 0; }
  .hero-text { min-width: 0; width: 100%; }
  .hero-title { max-width: 100%; font-size: clamp(2rem, 11vw, 2.8rem); }
  .hero-subtitle {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }
  .hero-search { max-width: 100%; width: 100%; }
  .level-pills { max-width: 100%; }
  /* Clip les éléments décoratifs absolus qui débordent à droite */
  .hero-image { min-height: 220px; overflow: hidden; border-radius: 16px; }
  .hero-inner { gap: 20px; }

  /* Notification dropdown : pleine largeur sur mobile */
  .notif-dropdown {
    width: calc(100vw - 24px);
    right: -8px;
  }


  /* Feature cards : 2 colonnes conservées, padding réduit */
  .feature-card { padding: 20px 14px; }
  .feature-icon { width: 50px; height: 50px; }

  /* Stats */
  .stats-outer { padding: 28px 0; }
  .stats-box {
    padding: 28px 18px;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    border-radius: var(--radius-lg);
  }
  .stat-icon { font-size: 1.6rem; margin-bottom: 4px; }

  /* Courses */
  .section { padding: 36px 0; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .voir-tout-link { align-self: flex-end; }

  /* Témoignages */
  .testimonials-grid { gap: 14px; }
  .testimonial-card { padding: 18px; }

  /* CTA */
  .cta-section { padding: 44px 0; }
  .cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .cta-actions .btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  /* Bottom nav : safe-area iPhone */
  .bottom-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

  /* Auth mobile */
  .auth-section { min-height: unset; padding: 16px 12px; align-items: flex-start; }
  .auth-container { max-width: 100%; }
  .auth-card { padding: 20px 16px; border-radius: 16px; }
  .auth-logo { margin-bottom: 12px; }
  .auth-logo img { height: 36px !important; }
  .auth-title { font-size: 1.2rem; margin-bottom: 4px; }
  .auth-sub { font-size: .8rem; margin-bottom: 14px; }
  .auth-form { gap: 12px; }
  .form-group { gap: 4px; }
  .form-group label { font-size: .82rem; }
  .input-wrap input, .input-wrap select { padding: 10px 40px 10px 38px; font-size: .88rem; }
  .btn-lg { padding: 11px 20px; font-size: .95rem; }
  .auth-demo { margin-top: 10px; }
  .auth-demo-title { font-size: .78rem; }
  .demo-accounts { grid-template-columns: 1fr 1fr; gap: 6px; }
  .demo-btn { padding: 8px 10px; font-size: .8rem; }
  .auth-switch { margin-top: 12px; font-size: .82rem; }
  .auth-terms { font-size: .75rem; }
  .role-select { gap: 6px; }
  .role-option span { font-size: .82rem; padding: 6px 10px; }

  /* Page header */
  .page-header { padding: 32px 0 24px; }
  .page-search { max-width: 100%; }
}

/* Sur très petits écrans (< 430px) : renforcement du compactage */
@media (max-width: 429px) {
  .brand-name { font-size: .82rem; letter-spacing: .04em; }
  .brand-logo { height: 36px; }
}

/* ── Tablette portrait (600px – 767px) ── */
@media (min-width: 600px) and (max-width: 767px) {
  .hero { padding: 40px 0 28px; }
  .hero-subtitle { max-width: 100%; }
  .hero-search { max-width: 100%; }
  .hero-image { min-height: 300px; }
  .stats-box { grid-template-columns: repeat(3, 1fr); padding: 36px 28px; gap: 24px; }
  .cta-actions { gap: 12px; }
}

/* ── Tablette paysage (768px – 899px) ── */
@media (min-width: 768px) and (max-width: 899px) {
  .hero-inner { grid-template-columns: 52% 48%; gap: 28px; }
  .courses-row { grid-template-columns: repeat(3, 1fr); }
}

/* ── Desktop large (≥ 1280px) ── */
@media (min-width: 1280px) {
  .hero { padding: 64px 0 48px; }
  .hero-title { font-size: 4.2rem; }
  .stats-box { padding: 52px 56px; }
}

/* ── Corrections globales ── */

/* Éviter tout débordement horizontal sans couper le contenu visible */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
.section, .features, .stats-outer, .cta-section { overflow: hidden; }
/* Hero : clip complet pour stopper les éléments absolus qui débordent */
.hero { overflow: hidden; }

/* Images et SVG toujours dans leur conteneur */
img, svg { max-width: 100%; height: auto; }

/* Barres de progression et textes longs */
.course-title-v2, .course-title, .video-title { word-break: break-word; }

/* Grilles : ne jamais déborder */
.courses-row, .courses-grid, .videos-grid, .features-grid, .testimonials-grid {
  width: 100%;
  min-width: 0;
}

/* Containment général : tous les éléments flex/grid respectent la largeur */
* { box-sizing: border-box; }

/* Boutons page-search : texte affiché sur desktop, icône sur mobile */
.search-btn-icon { display: none; }
.search-btn-text { display: inline; }

/* Boutons : ne pas écraser le texte sur petits écrans */
.btn { white-space: nowrap; }
@media (max-width: 360px) {
  .btn { font-size: .82rem; padding: 9px 16px; }
  .btn-lg { font-size: .88rem; padding: 11px 20px; }
}

/* ── Responsive barre de recherche des pages (< 600px) ── */
@media (max-width: 599px) {
  /* Bouton Rechercher → icône seulement pour gagner de la place */
  .search-btn-text { display: none; }
  .search-btn-icon { display: block; }
  .page-search-btn {
    flex: 0 0 38px;
    padding: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Page search : input prend toute la place restante */
  .page-search input { min-width: 0; flex: 1 1 0; }
  /* Hero search : input prend toute la place restante */
  .hero-search input { min-width: 0; }
  /* Containment hero : tous les grid-items respectent la largeur */
  .hero-inner { overflow: hidden; }
  /* Hero image : les décos absolus ne débordent JAMAIS à droite */
  .hero-image { overflow: hidden; }
  /* Hero text column : taille contrainte */
  .hero-text { overflow: hidden; max-width: 100%; }
}

/* ── AOS ANIMATIONS ──────────────────────────────────── */
[data-aos] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
[data-aos="zoom-in"] { transform: scale(.9); }
[data-aos="fade-right"] { transform: translateX(-30px); }
[data-aos="fade-left"]  { transform: translateX(30px); }
[data-aos].aos-animate {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── UTILITY ─────────────────────────────────────────── */
.text-center { text-align: center; }
.hidden { display: none !important; }
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(21,128,61,.45);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .3s ease;
}
.overlay.open { opacity: 1; pointer-events: auto; }
html.no-scroll { overflow: hidden !important; }
html.no-scroll body { overflow: hidden !important; }

/* ── NOTIFICATIONS ───────────────────────────────────── */
/* ══════════════════════════════════════════════════════
   NOTIFICATION BELL & DROPDOWN — Modern redesign
   ══════════════════════════════════════════════════════ */
@keyframes notifDropIn {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}
@keyframes notifPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.25); }
}

.notif-bell-wrap { position: relative; }
.notif-bell-btn  { position: relative; }

.notif-badge-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: linear-gradient(135deg, #F59E0B, #EF4444);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  border: 2px solid #fff;
  animation: notifPulse 2s ease-in-out infinite;
}

/* Dropdown panel */
.notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 360px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(7,27,59,.18), 0 4px 16px rgba(0,0,0,.08);
  z-index: 500;
  overflow: hidden;
}
.notif-dropdown.open {
  display: block;
  animation: notifDropIn .28s cubic-bezier(.34,1.2,.64,1) both;
}

/* Header */
.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #F8FAFC 0%, #fff 100%);
}
.notif-header-title {
  font-weight: 800;
  font-size: .9rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.notif-header-count {
  background: linear-gradient(135deg, #F59E0B, #EF4444);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
}
.notif-mark-all {
  background: var(--green);
  border: none;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 20px;
  font-family: inherit;
  transition: opacity .2s, transform .15s;
}
.notif-mark-all:hover { opacity: .85; transform: scale(.97); }

/* List */
.notif-list {
  max-height: 360px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.notif-list::-webkit-scrollbar { width: 4px; }
.notif-list::-webkit-scrollbar-track { background: #F3F4F6; }
.notif-list::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 99px; }

/* Empty state */
.notif-empty {
  padding: 40px 24px;
  text-align: center;
}
.notif-empty-icon {
  font-size: 2.8rem;
  margin-bottom: 10px;
  display: block;
  filter: grayscale(.2);
}
.notif-empty p {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0;
  font-weight: 500;
}

/* Item */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #F3F4F6;
  text-decoration: none;
  color: var(--text);
  background: #fff;
  transition: background .15s;
  position: relative;
  cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #FAFAFA; }

/* Unread */
.notif-item:not(.notif-read) {
  background: linear-gradient(90deg, #F0FDF4 0%, #fff 60%);
}
.notif-item:not(.notif-read):hover { background: linear-gradient(90deg, #DCFCE7 0%, #F9FAFB 60%); }
.notif-item:not(.notif-read)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #10B981, #059669);
  border-radius: 0 2px 2px 0;
}

/* Icon circle */
.notif-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-top: 1px;
}
.notif-icon-success  { background: #ECFDF5; }
.notif-icon-error    { background: #FEF2F2; }
.notif-icon-warning  { background: #FFFBEB; }
.notif-icon-info     { background: #EFF6FF; }
.notif-icon-payment  { background: #F5F3FF; }
.notif-icon-default  { background: #F3F4F6; }

.notif-body   { flex: 1; min-width: 0; }
.notif-msg {
  font-size: .82rem;
  margin: 0 0 4px;
  line-height: 1.45;
  word-break: break-word;
  color: var(--navy);
}
.notif-item.notif-read .notif-msg { color: var(--text-muted); font-weight: 400; }
.notif-item:not(.notif-read) .notif-msg { font-weight: 600; }
.notif-time {
  font-size: .7rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981, #059669);
  flex-shrink: 0;
  margin-top: 6px;
  box-shadow: 0 0 0 3px rgba(16,185,129,.2);
}

/* Footer link */
.notif-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: #FAFAFA;
  text-align: center;
}
.notif-footer a {
  font-size: .78rem;
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}
.notif-footer a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════
   MESSAGERIE PRIVÉE
   ══════════════════════════════════════════════════════ */

/* Override dash-content padding for messages page */
.msg-page { margin: -24px; height: calc(100dvh - 64px); display: flex; flex-direction: column; }

.msg-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: var(--white);
  border-radius: 0;
}

/* ── Left sidebar ── */
.msg-sidebar {
  width: 320px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--white);
  overflow: hidden;
}

.msg-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.msg-sidebar-title { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; hyphens: none; word-break: keep-all; overflow-wrap: normal; }
.msg-new-btn { display: flex; align-items: center; gap: 6px; font-size: .8rem; padding: 6px 12px; flex-shrink: 0; white-space: nowrap; }

/* New conversation panel */
.msg-new-panel {
  display: none;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  background: var(--gray-50);
  max-height: 300px;
}
.msg-new-panel.open { display: flex; }
.msg-search-input {
  margin: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .85rem;
  outline: none;
  font-family: inherit;
}
.msg-search-input:focus { border-color: var(--green); }
.msg-contact-list { overflow-y: auto; flex: 1; }
.msg-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text);
  transition: background .15s;
}
.msg-contact-item:hover { background: var(--gray-100); }
.msg-contact-name { font-size: .88rem; font-weight: 600; display: block; }
.msg-contact-role { font-size: .75rem; color: var(--text-muted); }
.msg-empty-contacts { padding: 16px; font-size: .85rem; color: var(--text-muted); text-align: center; }

/* Conversation list */
.msg-convs { flex: 1; overflow-y: auto; }
.msg-empty-convs { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; gap: 8px; color: var(--text-muted); text-align: center; }
.msg-empty-convs p { font-weight: 600; margin: 0; font-size: .9rem; }
.msg-empty-convs small { font-size: .8rem; }
.msg-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--gray-100);
  transition: background .15s;
  position: relative;
}
.msg-conv-item:hover { background: var(--gray-50); }
.msg-conv-item.active { background: var(--green-light); }
.msg-conv-info { flex: 1; min-width: 0; }
.msg-conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.msg-conv-name { font-size: .88rem; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv-time { font-size: .72rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.msg-conv-preview { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.msg-conv-last { font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.msg-unread-badge {
  background: var(--green);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  min-width: 20px;
  text-align: center;
}

/* ── Avatar ── */
.msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  flex-shrink: 0;
}
.msg-avatar-sm { width: 30px; height: 30px; font-size: .75rem; }
.msg-avatar-lg { width: 44px; height: 44px; font-size: 1.1rem; }
.msg-avatar-green { background: var(--green); }
.msg-avatar-navy  { background: var(--navy); }
.msg-avatar-blue  { background: var(--blue); }
.msg-avatar-orange{ background: var(--orange); }

/* ── Right panel ── */
.msg-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--gray-50);
}

/* Empty state */
.msg-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 40px;
}
.msg-empty-icon { margin-bottom: 8px; }
.msg-empty-state h3 { color: var(--text); font-size: 1.1rem; margin: 0; }
.msg-empty-state p { font-size: .9rem; max-width: 300px; margin: 0; }

/* Chat header */
.msg-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.msg-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text);
  text-decoration: none;
  transition: background .15s;
}
.msg-back-btn:hover { background: var(--gray-100); }
.msg-chat-user-info { flex: 1; min-width: 0; }
.msg-chat-name { display: block; font-weight: 700; font-size: .95rem; color: var(--navy); }
.msg-chat-role { font-size: .78rem; color: var(--text-muted); }

/* Messages area */
.msg-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.msg-day-label {
  text-align: center;
  font-size: .72rem;
  color: var(--text-muted);
  background: var(--gray-200);
  border-radius: var(--radius-full);
  padding: 3px 14px;
  margin: 10px auto;
  align-self: center;
}

/* Bubble wrapper */
.msg-bubble-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 2px;
}
.msg-bubble-wrap.sent { flex-direction: row-reverse; }
.msg-bubble-wrap.recv { flex-direction: row; }

/* Bubble */
.msg-bubble {
  max-width: 65%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: .88rem;
  line-height: 1.55;
  word-break: break-word;
  position: relative;
}
.msg-bubble.sent {
  background: var(--green);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-bubble.recv {
  background: var(--white);
  color: var(--text);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm);
}
.msg-bubble-text { display: block; }
.msg-bubble-time {
  display: block;
  font-size: .68rem;
  margin-top: 4px;
  opacity: .7;
  text-align: right;
}
.msg-bubble.recv .msg-bubble-time { text-align: left; }

/* Composer */
.msg-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 20px;
  background: var(--white);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.msg-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 10px 18px;
  font-size: .88rem;
  font-family: inherit;
  resize: none;
  outline: none;
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
  transition: border-color .2s;
  background: var(--gray-50);
}
.msg-input:focus { border-color: var(--green); background: var(--white); }
.msg-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .1s;
}
.msg-send-btn:hover { background: var(--green-dark); transform: scale(1.05); }
.msg-send-btn:active { transform: scale(.95); }

/* Sidebar message badge */
.sidebar-msg-badge {
  background: var(--green);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  margin-left: auto;
}

/* ── Mobile responsive ── */
@media (max-width: 700px) {
  .msg-page { height: calc(100dvh - 60px); margin: -16px; }
  .msg-sidebar { width: 100%; min-width: 100%; display: none; }
  .msg-sidebar.msg-panel-show { display: flex; }
  .msg-body { display: none; }
  .msg-body.msg-panel-show { display: flex; }
  .msg-back-btn { display: flex; }
  .msg-bubble { max-width: 82%; }
}

/* ── Messages : correctifs mobile fins ── */
@media (max-width: 480px) {
  /* Corrige le mismatch margin (-16px) / padding (12px) du dash-content */
  .msg-page { margin: -12px; height: calc(100dvh - 60px); }
  /* Titre : interdit tout retour à la ligne ou coupure */
  .msg-sidebar-title { font-size: 1rem; white-space: nowrap; hyphens: none; overflow-wrap: normal; word-break: keep-all; }
  /* Bouton Nouveau : plus compact */
  .msg-new-btn { padding: 5px 10px; font-size: .75rem; gap: 4px; }
  .msg-new-btn svg { width: 12px; height: 12px; }
  /* Ajustements en-tête sidebar */
  .msg-sidebar-head { padding: 12px 14px; gap: 8px; }
  /* Bulles : largeur max sur très petits écrans */
  .msg-bubble { max-width: 88%; }
  /* Compositeur de message */
  .msg-composer { padding: 10px 14px; gap: 8px; }
}

/* ══════════════════════════════════════════════
   SECTION TAG (petite étiquette colorée)
══════════════════════════════════════════════ */
.section-tag {
  display: inline-block;
  background: rgba(16,185,129,.12);
  color: var(--green);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}

/* ══════════════════════════════════════════════
   SECTION PÉDAGOGIE (homepage)
══════════════════════════════════════════════ */
.pedagogy-section { background: #F8FAFF; }
.pedagogy-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}
.pedagogy-img-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.pedagogy-img {
  width: 100%;
  max-width: 440px;
  border-radius: 24px;
  filter: drop-shadow(0 12px 32px rgba(7,27,59,.12));
}
.pedagogy-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 14px;
}
.pedagogy-desc {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
}
.pedagogy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pedagogy-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  color: var(--navy);
  font-weight: 500;
}
.pedagogy-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--green);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .pedagogy-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .pedagogy-img-wrap { order: -1; }
  .pedagogy-img { max-width: 320px; }
  .pedagogy-title { font-size: 1.45rem; }
}

/* ══════════════════════════════════════════════
   SECTION CASE STUDY / RÉSULTATS (homepage)
══════════════════════════════════════════════ */
.casestudy-section { background: #fff; }
.casestudy-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}
.casestudy-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 14px;
}
.casestudy-desc {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 28px;
}
.casestudy-stats {
  display: flex;
  gap: 28px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.cs-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-num {
  font-size: 2rem;
  font-weight: 900;
  color: var(--green);
  line-height: 1;
}
.cs-lbl {
  font-size: .8rem;
  color: var(--text-muted);
  font-weight: 500;
}
.casestudy-img-wrap {
  display: flex;
  justify-content: center;
}
.casestudy-img {
  width: 100%;
  max-width: 480px;
  filter: drop-shadow(0 12px 32px rgba(7,27,59,.1));
}
@media (max-width: 860px) {
  .casestudy-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .casestudy-img-wrap { order: -1; }
  .casestudy-img { max-width: 320px; }
  .casestudy-title { font-size: 1.45rem; }
  .casestudy-stats { gap: 20px; }
  .cs-num { font-size: 1.6rem; }
}

/* ══════════════════════════════════════════════
   PREMIUM PAGE — HERO AVEC ILLUSTRATION
══════════════════════════════════════════════ */
.premium-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.premium-hero-text {
  text-align: left;
  flex: 1;
}
.premium-hero-illus {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.premium-graduates-img {
  width: 280px;
  max-width: 100%;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,.35));
  animation: floatDeco 5s ease-in-out infinite;
}
@media (max-width: 720px) {
  .premium-hero-inner {
    flex-direction: column;
    text-align: center;
  }
  .premium-hero-text { text-align: center; }
  .premium-graduates-img { width: 180px; }
}

/* ══════════════════════════════════════════════
   PREMIUM PAGE — FEATURES BANNER
══════════════════════════════════════════════ */
.premium-features-banner {
  background: #F8FAFF;
  padding: 60px 0;
}
.premium-feat-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  gap: 52px;
  max-width: 900px;
  margin: 0 auto;
}
.premium-feat-img {
  display: flex;
  justify-content: center;
}
.premium-feat-illustration {
  width: 100%;
  max-width: 280px;
  filter: drop-shadow(0 10px 28px rgba(7,27,59,.12));
}
.premium-feat-text h2 {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 14px;
}
.premium-feat-text p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}
.premium-feat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pfeat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: .83rem;
  font-weight: 600;
  color: var(--navy);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
@media (max-width: 720px) {
  .premium-feat-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .premium-feat-img { order: -1; }
  .premium-feat-illustration { max-width: 200px; }
  .premium-feat-text h2 { font-size: 1.4rem; }
  .premium-feat-badges { justify-content: center; }
}

/* ============================================================
   ESPACE ÉLÈVE MODERNE — Nouveaux composants
   ============================================================ */


/* ── SIDEBAR ENHANCEMENTS ───────────────────────────────── */
.sidebar-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.sidebar-level-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  border: 2px solid #fff;
}
.sidebar-xp-bar {
  height: 4px;
  background: var(--gray-200);
  border-radius: 99px;
  margin-top: 6px;
  overflow: hidden;
}
.sidebar-xp-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .8s ease;
}
.sidebar-xp-label {
  font-size: .7rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.sidebar-xp-badge {
  margin-left: auto;
  font-size: .68rem;
  background: var(--orange-light);
  color: var(--orange-dark);
  padding: 2px 6px;
  border-radius: 99px;
  font-weight: 600;
}
.sidebar-badge-count {
  margin-left: auto;
  font-size: .68rem;
  background: var(--purple-light);
  color: var(--purple);
  padding: 2px 6px;
  border-radius: 99px;
  font-weight: 600;
}
.sidebar-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: 12px 16px 4px;
}
.sidebar-bottom-actions {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

/* Navigation de tableau de bord: catégories repliables et faciles à parcourir */
.sidebar-nav-group {
  margin: 3px 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  overflow: hidden;
}
.sidebar-nav-group > summary {
  min-height: 44px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  list-style: none;
  cursor: pointer;
  color: rgba(255,255,255,.82);
  font-size: .81rem;
  font-weight: 700;
  border-radius: 12px;
  user-select: none;
}
.sidebar-nav-group > summary::-webkit-details-marker { display: none; }
.sidebar-nav-group > summary::after {
  content: "+";
  margin-left: auto;
  color: rgba(255,255,255,.62);
  font-size: 1rem;
  font-weight: 500;
}
.sidebar-nav-group[open] > summary::after { content: "−"; }
.sidebar-nav-group > summary:hover,
.sidebar-nav-group[open] > summary { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-nav-group > summary:focus-visible {
  outline: 2px solid #FDBA74;
  outline-offset: -2px;
}
.sidebar-group-count {
  min-width: 21px;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.72);
  text-align: center;
  font-size: .66rem;
  font-weight: 600;
}
.sidebar-group-links {
  padding: 2px 6px 7px;
  border-left: 1px solid rgba(255,255,255,.15);
  margin-left: 14px;
}
.sidebar-nav-group .sidebar-link {
  min-height: 40px;
  padding: 9px 10px;
  gap: 9px;
  font-size: .82rem;
}
.sidebar-nav-group .sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-nav > .sidebar-link[data-nav-primary="true"] { margin-bottom: 5px; }
.bottom-nav-menu {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
@media (max-width: 959px) {
  .sidebar-nav-group > summary { min-height: 48px; font-size: .86rem; }
  .sidebar-nav-group .sidebar-link { min-height: 46px; padding: 11px 10px; }
}

/* ── XP HERO BAR ─────────────────────────────────────────── */
.xp-hero {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1.5px solid #bae6fd;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.xp-hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.xp-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.xp-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
}
.xp-level-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  border: 2.5px solid #fff;
  background: #fff;
}
.xp-info { flex: 1; min-width: 0; }
.xp-greeting {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 2px;
}
.xp-greeting span { color: var(--green); }
.xp-level-name {
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.xp-bar-wrap { display: flex; align-items: center; gap: 10px; }
.xp-bar {
  flex: 1;
  height: 8px;
  background: rgba(0,0,0,.1);
  border-radius: 99px;
  overflow: hidden;
}
.xp-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 1s ease;
}
.xp-label { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
.xp-hero-right {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.xp-badge-pill {
  background: #fff;
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  min-width: 90px;
}
.xp-pill-icon { font-size: 1.5rem; }
.xp-pill-val {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.xp-pill-sub { font-size: .7rem; color: var(--text-muted); }

/* ── DASH PAGE HEADER ─────────────────────────────────────── */
.dash-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.dash-page-header h1 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 4px;
}
.my-rank-pill {
  background: var(--orange-light);
  color: var(--orange-dark);
  border-radius: 99px;
  padding: 8px 20px;
  font-size: .9rem;
  font-weight: 600;
}
.badges-summary-pill {
  background: var(--purple-light);
  color: var(--purple);
  border-radius: 99px;
  padding: 8px 20px;
  font-size: .9rem;
  font-weight: 600;
}

/* ── BADGES PREVIEW ROW ─────────────────────────────────── */
.badges-preview-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.badge-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1.5px solid;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  font-size: .8rem;
  cursor: default;
}
.badge-mini-icon { font-size: 1rem; }
.badge-mini-name { font-weight: 600; color: var(--navy); }

/* ── COURSE DONE BADGE ──────────────────────────────────── */
.course-done-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── DAILY OBJECTIVE ───────────────────────────────────── */
.daily-objective {
  background: linear-gradient(135deg, #fef9c3, #fef3c7);
  border: 1.5px solid #fde68a;
  border-radius: 16px;
  padding: 18px;
  margin-top: 16px;
}
.daily-obj-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.daily-objective p { font-size: .88rem; color: var(--gray-700); margin: 0; }

/* ── PODIUM ────────────────────────────────────────────── */
.podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  padding: 32px 24px;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-radius: 20px;
  margin-bottom: 24px;
}
.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.podium-crown { font-size: 1.6rem; }
.podium-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  border: 3px solid #fff;
  box-shadow: var(--shadow);
}
.podium-avatar.p1-avatar {
  width: 68px;
  height: 68px;
  font-size: 1.7rem;
  border-color: #F59E0B;
}
.podium-name { font-size: .9rem; font-weight: 700; color: var(--navy); }
.podium-xp { font-size: .78rem; color: var(--text-muted); }
.podium-step {
  padding: 8px 20px;
  border-radius: 12px 12px 0 0;
  font-size: 1.2rem;
  font-weight: 800;
  margin-top: 4px;
}
.p1-step { background: #F59E0B; color: #fff; padding: 12px 28px; }
.p2-step { background: #6B7280; color: #fff; }
.p3-step { background: #92400e; color: #fff; }

/* ── LEADERBOARD TABLE ─────────────────────────────────── */
.leaderboard-table-wrap {
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 24px;
}
.leaderboard-table { width: 100%; border-collapse: collapse; }
.leaderboard-table thead tr {
  background: var(--navy);
  color: #fff;
}
.leaderboard-table th {
  padding: 12px 16px;
  font-size: .8rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.leaderboard-table td { padding: 12px 16px; font-size: .88rem; }
.leaderboard-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.leaderboard-table tbody tr:hover { background: var(--gray-50); }
.lb-row-me { background: rgba(16,185,129,.06) !important; }
.lb-rank { font-size: 1.1rem; font-weight: 800; width: 50px; }
.lb-user { display: flex; align-items: center; gap: 10px; }
.lb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.lb-name { font-weight: 600; font-size: .88rem; }
.lb-sub { font-size: .75rem; color: var(--text-muted); }
.lb-level-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.lb-xp { font-size: .9rem; white-space: nowrap; }
.lb-streak { white-space: nowrap; }
.me-tag {
  display: inline-block;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: .65rem;
  padding: 1px 6px;
  border-radius: 99px;
  font-weight: 700;
  vertical-align: middle;
}

/* ── XP GUIDE ──────────────────────────────────────────── */
.xp-guide {
  background: var(--white);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.xp-guide h3 { font-size: 1.1rem; color: var(--navy); margin-bottom: 16px; }
.xp-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.xp-guide-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: 12px;
  font-size: .85rem;
}
.xg-icon { font-size: 1.3rem; flex-shrink: 0; }

/* ── BADGES FULL GRID ─────────────────────────────────── */
.level-recap-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--white);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.level-recap-left { display: flex; align-items: center; gap: 14px; }
.level-recap-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.level-recap-name { font-size: 1rem; color: var(--navy); }
.level-recap-sub { font-size: .8rem; color: var(--text-muted); }
.level-recap-right { min-width: 200px; }
.badges-full-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.badge-card {
  background: var(--white);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--border);
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.badge-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.badge-earned { border-color: transparent; }
.badge-locked { opacity: .65; }
.badge-card-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.badge-card-body h4 { font-size: .95rem; color: var(--navy); margin-bottom: 4px; }
.badge-card-body p { font-size: .8rem; color: var(--text-muted); margin-bottom: 10px; }
.badge-earned-date { font-size: .75rem; color: var(--green-dark); font-weight: 600; }
.badge-locked-label { font-size: .75rem; color: var(--text-muted); }
.badge-xp-reward { font-size: .78rem; font-weight: 700; margin-top: 6px; }

/* ── CERTIFICATE ───────────────────────────────────────── */
.cert-page-wrap { max-width: 800px; margin: 0 auto; }
.cert-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.certificate-card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  border: 2px solid var(--orange);
}
.cert-header {
  background: linear-gradient(135deg, var(--navy), #0D2952);
  padding: 32px;
  color: #fff;
  text-align: center;
}
.cert-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.cert-logo-text {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 900;
}
.cert-brand-name { font-size: 1.4rem; font-weight: 900; letter-spacing: .05em; }
.cert-brand-sub { font-size: .78rem; opacity: .7; }
.cert-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .03em;
  opacity: .95;
}
.cert-body { padding: 36px 40px; text-align: center; }
.cert-presented { color: var(--text-muted); font-size: .9rem; margin-bottom: 8px; }
.cert-student-name {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 28px;
  border-bottom: 2px dashed var(--border);
  padding-bottom: 20px;
}
.cert-stats-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.cert-stat { text-align: center; }
.cert-stat-val { font-size: 1.1rem; font-weight: 700; color: var(--navy); }
.cert-stat-lbl { font-size: .72rem; color: var(--text-muted); }
.cert-courses { margin-bottom: 24px; }
.cert-courses-title { font-size: .85rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.cert-courses-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  max-width: 400px;
  margin: 0 auto;
}
.cert-course-item { font-size: .85rem; color: var(--green-dark); }
.cert-message {
  font-size: .85rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.7;
  max-width: 500px;
  margin: 0 auto 24px;
}
.cert-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px 40px;
  background: var(--gray-50);
  border-top: 1px solid var(--border);
}
.cert-footer-col { text-align: center; flex: 1; }
.cert-footer-right { text-align: right; }
.cert-footer-center { text-align: center; flex: 0 0 auto; }
.cert-sig-line { width: 120px; height: 1px; background: var(--border); margin: 0 auto 8px; }
.cert-sig-name { font-size: .85rem; font-weight: 700; color: var(--navy); }
.cert-sig-role { font-size: .72rem; color: var(--text-muted); }
.cert-seal { font-size: 2rem; margin-bottom: 4px; }
.cert-date { font-size: .75rem; color: var(--text-muted); }
.cert-achievements { margin-top: 24px; }
.cert-achievements h3 { font-size: 1.1rem; color: var(--navy); margin-bottom: 16px; }
.cert-ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.cert-ach-item {
  background: var(--white);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.cert-ach-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin: 0 auto 8px;
}
.cert-ach-val { font-size: 1.3rem; font-weight: 800; color: var(--navy); }
.cert-ach-lbl { font-size: .75rem; color: var(--text-muted); }
@media print {
  .no-print { display: none !important; }
  .sidebar, .dash-topbar, .dash-main > *:not(.dash-content) { display: none !important; }
  .certificate-card { box-shadow: none; border: 2px solid #F59E0B; }
  .cert-page-wrap { max-width: 100%; }
  body, .dash-layout, .dash-main, .dash-content { background: #fff !important; }
}

/* ── TIMETABLE ─────────────────────────────────────────── */
.timetable-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.tt-day {
  background: var(--white);
  border-radius: 16px;
  border: 1.5px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.tt-day-today { border-color: var(--green); }
.tt-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--border);
}
.tt-day-name { font-weight: 700; font-size: .9rem; color: var(--navy); }
.tt-today-badge {
  background: var(--green);
  color: #fff;
  font-size: .65rem;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
}
.tt-day-entries { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tt-entry {
  padding: 10px 12px;
  border-radius: 10px;
  position: relative;
}
.tt-entry-time { font-size: .72rem; color: var(--text-muted); margin-bottom: 2px; }
.tt-entry-subject { font-size: .85rem; font-weight: 700; }
.tt-entry-desc { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.tt-empty { font-size: .8rem; color: var(--text-muted); text-align: center; padding: 16px; }
.tt-del-form { position: absolute; top: 6px; right: 6px; }
.tt-del-btn {
  background: rgba(0,0,0,.08);
  border: none;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  line-height: 1;
}
.tt-del-btn:hover { background: var(--red-light); color: var(--red); }

/* ── MODAL ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--white);
  border-radius: 20px;
  padding: 28px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-md);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.modal-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin: 0; }
.modal-header button {
  background: var(--gray-100);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.color-picker-row { display: flex; gap: 8px; flex-wrap: wrap; }
.color-opt input { display: none; }
.color-opt span {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: border-color .15s, transform .15s;
}
.color-opt input:checked + span { border-color: var(--navy); transform: scale(1.15); }

/* ── TOPBAR AVATAR ─────────────────────────────────────── */
.topbar-avatar { width: 34px; height: 34px; font-size: .9rem; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   ESPACE PARENT
═══════════════════════════════════════════════════════════ */

/* ── SIDEBAR PARENT ──────────────────────────────────────── */
.parent-sidebar-user {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin-bottom: 8px;
}
.parent-sidebar-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff; font-size: 1.2rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.parent-child-link {
  display: flex; align-items: center; gap: 8px;
}
.parent-child-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: #fff; font-size: .75rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.parent-child-level {
  font-size: .7rem; padding: 2px 6px; border-radius: 20px;
  background: #10B98120; color: #10B981; font-weight: 600;
  white-space: nowrap;
}
.sidebar-alert-badge {
  margin-left: auto; background: #EF4444; color: #fff;
  font-size: .68rem; font-weight: 700; border-radius: 20px;
  padding: 2px 7px; min-width: 20px; text-align: center;
}

/* ── WELCOME BANNER ──────────────────────────────────────── */
.parent-welcome {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  background: linear-gradient(135deg, #071B3B 0%, #0D2952 100%);
  border-radius: 16px; padding: 24px 28px; margin-bottom: 24px;
}
.parent-welcome-title {
  font-size: 1.6rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.parent-welcome-date { color: #93c5fd; font-size: .9rem; margin: 0; }
.parent-welcome-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.parent-alert-chip {
  display: flex; align-items: center; gap: 6px;
  background: #EF444430; color: #FCA5A5; border: 1px solid #EF444450;
  border-radius: 20px; padding: 6px 14px; font-size: .82rem; font-weight: 600;
}
.parent-alert-chip--red { background: #EF444430; }
.parent-ok-chip {
  display: flex; align-items: center; gap: 6px;
  background: #10B98130; color: #6EE7B7; border: 1px solid #10B98150;
  border-radius: 20px; padding: 6px 14px; font-size: .82rem; font-weight: 600;
}

/* ── CHILDREN CARDS ──────────────────────────────────────── */
.parent-children-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.parent-child-card {
  background: #fff; border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: box-shadow .2s, transform .2s;
}
.parent-child-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.parent-child-card-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; position: relative;
}
.parent-child-card-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: #fff; font-size: 1.3rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.parent-child-card-name { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0 0 4px; }
.parent-child-card-level {
  font-size: .75rem; padding: 2px 8px; border-radius: 20px;
  background: #3B82F620; color: #3B82F6; font-weight: 600;
}
.parent-child-alert-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #EF4444; position: absolute; top: 0; right: 0;
  animation: pulse 2s infinite;
}
.parent-child-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px;
}
.parent-child-stat { text-align: center; }
.parent-child-stat-value { font-size: 1.4rem; font-weight: 900; line-height: 1; }
.parent-child-stat-label { font-size: .72rem; color: var(--text-muted); margin: 2px 0; }
.parent-child-stat-badge {
  display: inline-block; font-size: .68rem; font-weight: 600;
  padding: 2px 6px; border-radius: 20px;
}
.parent-child-card-actions { display: flex; gap: 8px; }

/* ── PAGE HEADER ─────────────────────────────────────────── */
.parent-page-header {
  margin-bottom: 20px;
}
.parent-page-title { font-size: 1.6rem; font-weight: 800; color: var(--navy); margin: 0 0 4px; }
.parent-page-subtitle { color: var(--text-muted); font-size: .9rem; margin: 0; }

/* ── PARENT CARD ─────────────────────────────────────────── */
.parent-card {
  background: #fff; border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  margin-bottom: 16px; overflow: hidden; max-width: 100%;
}
.parent-card--urgent { border-color: #EF444440; background: #FFF5F5; }
.parent-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 8px; overflow: hidden;
}
.parent-card-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parent-card-header .link-muted { flex-shrink: 0; white-space: nowrap; }

/* ── ALERTS SECTION ──────────────────────────────────────── */
.parent-alerts-section { margin-bottom: 24px; }
.parent-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.parent-section-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0; }
.parent-section-count {
  background: #EF444420; color: #EF4444; border-radius: 20px;
  padding: 2px 10px; font-size: .8rem; font-weight: 700;
}
.parent-alerts-list { display: flex; flex-direction: column; gap: 8px; }
.parent-alert-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 10px; padding: 12px 16px;
  border-left: 4px solid; box-shadow: var(--shadow-sm);
  font-size: .9rem; border: 1px solid var(--border);
  border-left-width: 4px;
}
.parent-alert-type { font-size: 1.1rem; flex-shrink: 0; }

/* ── DASH GRID ───────────────────────────────────────────── */
.parent-dash-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 1024px) {
  .parent-dash-grid { grid-template-columns: 1fr 1fr; gap: 0 16px; }
}
.parent-dash-col { display: flex; flex-direction: column; min-width: 0; }

.parent-grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 860px) { .parent-grid-2 { grid-template-columns: 1fr 1fr; } }

/* ── HOMEWORK LIST ───────────────────────────────────────── */
.parent-hw-list { display: flex; flex-direction: column; gap: 8px; }
.parent-hw-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border); overflow: hidden;
}
.parent-hw-item:last-child { border-bottom: none; }
.parent-hw-urgency { width: 4px; height: 36px; border-radius: 4px; flex-shrink: 0; }
.parent-hw-body { flex: 1; min-width: 0; overflow: hidden; }
.parent-hw-title { font-size: .9rem; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parent-hw-meta { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parent-hw-subject { font-weight: 600; }
.parent-hw-due { font-size: .78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

/* ── ANNOUNCEMENTS ───────────────────────────────────────── */
.parent-announce-list { display: flex; flex-direction: column; gap: 8px; }
.parent-announce-item { padding: 8px 0; border-bottom: 1px solid var(--border); }
.parent-announce-item:last-child { border-bottom: none; }
.parent-announce-badge { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; display: inline-block; margin-bottom: 4px; }
.parent-announce-title { font-size: .88rem; font-weight: 600; color: var(--navy); }
.parent-announce-date { font-size: .75rem; color: var(--text-muted); }

/* ── EVENTS ──────────────────────────────────────────────── */
.parent-events-list { display: flex; flex-direction: column; gap: 8px; }
.parent-event-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border); overflow: hidden;
}
.parent-event-item:last-child { border-bottom: none; }
.parent-event-icon {
  width: 36px; height: 36px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.parent-event-body { flex: 1; min-width: 0; overflow: hidden; }
.parent-event-title { font-size: .88rem; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parent-event-date { font-size: .75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parent-event-type-badge { font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }

/* ── PAYMENTS SUMMARY ────────────────────────────────────── */
.parent-payment-summary { display: flex; flex-direction: column; gap: 8px; }
.parent-pay-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.parent-pay-item:last-child { border-bottom: none; }
.parent-pay-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.parent-pay-body { flex: 1; min-width: 0; }
.parent-pay-label { font-size: .88rem; font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parent-pay-meta { font-size: .75rem; color: var(--text-muted); }
.parent-pay-amount { font-size: .85rem; font-weight: 700; white-space: nowrap; }
.parent-pay-total { padding-top: 10px; border-top: 1px solid var(--border); font-size: .85rem; color: var(--text-muted); text-align: right; }

/* ── QUICK ACTIONS ───────────────────────────────────────── */
.parent-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.parent-quick-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 12px; text-decoration: none;
  background: var(--gray-200); color: var(--navy); font-size: .85rem; font-weight: 600;
  transition: background .2s, color .2s, transform .2s;
}
.parent-quick-btn:hover { background: #10B98120; color: #10B981; transform: translateY(-1px); }

/* ── STATS ROW ───────────────────────────────────────────── */
.parent-stats-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin-bottom: 16px;
}
@media (min-width: 640px) { .parent-stats-row { grid-template-columns: repeat(4, 1fr); } }
.parent-mini-stat {
  background: #fff; border-radius: 12px; padding: 16px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  text-align: center;
}
.parent-mini-stat-val {
  font-size: 1.8rem; font-weight: 900; color: var(--msc, var(--navy)); line-height: 1;
}
.parent-mini-stat-label { font-size: .75rem; color: var(--text-muted); margin-top: 4px; }

/* ── FILTERS ─────────────────────────────────────────────── */
.parent-filters {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff; border-radius: 12px; padding: 14px 18px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 16px;
}
.parent-filter-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.parent-filter-group { display: flex; flex-direction: column; gap: 4px; }
.parent-filter-group label { font-size: .75rem; font-weight: 600; color: var(--text-muted); }
.parent-select {
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px;
  font-family: inherit; font-size: .88rem; background: #fff; color: var(--navy);
  cursor: pointer;
}
.parent-filter-avg { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: .9rem; }

/* ── SUBJECT BARS ────────────────────────────────────────── */
.parent-subject-bars { display: flex; flex-direction: column; gap: 10px; }
.parent-subject-row {
  display: grid; grid-template-columns: 120px 1fr 60px;
  align-items: center; gap: 10px;
}
.parent-subject-row--lg { grid-template-columns: 130px 1fr 70px 100px 60px; }
.parent-subject-name { font-size: .85rem; font-weight: 600; color: var(--navy); }
.parent-subject-bar-wrap { height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
.parent-subject-bar-wrap--lg { height: 10px; }
.parent-subject-bar { height: 100%; border-radius: 4px; transition: width .6s ease; }
.parent-subject-avg { font-size: .85rem; font-weight: 700; text-align: right; }
.parent-subject-apprec { font-size: .78rem; font-weight: 600; }
.parent-subject-count { font-size: .75rem; }

/* ── GRADES TABLE ────────────────────────────────────────── */
.parent-grades-table, .parent-absences-table, .parent-payments-table { overflow-x: auto; }
.parent-table-head {
  display: grid; padding: 8px 12px; background: var(--gray-200);
  border-radius: 8px; margin-bottom: 4px; font-size: .75rem;
  font-weight: 700; color: var(--text-muted); gap: 8px;
}
.parent-table-row {
  display: grid; padding: 10px 12px; gap: 8px;
  border-bottom: 1px solid var(--border); align-items: center;
  font-size: .85rem;
}
.parent-table-row:last-child { border-bottom: none; }
.parent-grades-table .parent-table-head,
.parent-grades-table .parent-table-row { grid-template-columns: 130px 1fr 80px 60px 100px 50px 80px; }
.parent-absences-table .parent-table-head,
.parent-absences-table .parent-table-row { grid-template-columns: 90px 100px 1fr 120px; }
.parent-payments-table .parent-table-head,
.parent-payments-table .parent-table-row { grid-template-columns: 1fr 100px 100px 90px 90px 100px; }
.parent-grade-bubble {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 28px; border-radius: 8px; font-size: .85rem; font-weight: 700;
}

/* ── RECENT GRADES ───────────────────────────────────────── */
.parent-recent-grades { display: flex; flex-direction: column; gap: 10px; }
.parent-grade-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.parent-grade-item:last-child { border-bottom: none; }
.parent-grade-circle {
  width: 44px; height: 44px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: .88rem; font-weight: 800; flex-shrink: 0;
}
.parent-grade-body { flex: 1; min-width: 0; }
.parent-grade-title { font-size: .88rem; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parent-grade-meta { font-size: .75rem; color: var(--text-muted); }
.parent-grade-apprec { font-size: .75rem; font-weight: 600; }
.parent-grade-raw { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }

/* ── BEHAVIOR TIMELINE ───────────────────────────────────── */
.parent-behavior-timeline { display: flex; flex-direction: column; gap: 12px; }
.parent-behavior-item { display: flex; gap: 12px; }
.parent-behavior-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.parent-behavior-body { flex: 1; }
.parent-behavior-type { font-size: .78rem; font-weight: 700; margin-bottom: 2px; }
.parent-behavior-message { font-size: .88rem; color: var(--navy); }
.parent-behavior-meta { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }

/* ── PENDING PAYMENTS ────────────────────────────────────── */
.parent-pending-list { display: flex; flex-direction: column; gap: 10px; }
.parent-pending-item {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 10px; padding: 14px 16px;
  border-left: 4px solid; box-shadow: var(--shadow-sm);
  border: 1px solid var(--border); border-left-width: 4px;
}
.parent-pending-body { flex: 1; min-width: 0; }
.parent-pending-label { font-size: .9rem; font-weight: 600; color: var(--navy); }
.parent-pending-meta { font-size: .78rem; color: var(--text-muted); }
.parent-pending-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.parent-pending-amount { font-size: 1rem; font-weight: 800; }

/* ── STATUS BADGE ────────────────────────────────────────── */
.status-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700;
}

/* ── CALENDAR ────────────────────────────────────────────── */
.parent-calendar-legend {
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
  background: #fff; border-radius: 12px; padding: 12px 18px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  font-size: .82rem; font-weight: 600; color: var(--navy);
}
.parent-legend-item { display: flex; align-items: center; gap: 6px; }
.parent-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.parent-calendar-month { margin-bottom: 20px; }
.parent-calendar-month-title {
  font-size: 1.1rem; font-weight: 800; color: var(--navy);
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--border);
}
.parent-calendar-events { display: flex; flex-direction: column; gap: 8px; }
.parent-cal-event {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 12px; padding: 14px 16px;
  border-left: 4px solid; box-shadow: var(--shadow-sm);
  border: 1px solid var(--border); border-left-width: 4px;
}
.parent-cal-event--ongoing { background: #F0FDF4; }
.parent-cal-event-date { text-align: center; min-width: 44px; flex-shrink: 0; }
.parent-cal-day { font-size: 1.4rem; font-weight: 900; color: var(--navy); line-height: 1; }
.parent-cal-month-mini { font-size: .7rem; font-weight: 700; color: var(--text-muted); }
.parent-cal-event-body { flex: 1; min-width: 0; }
.parent-cal-event-title { font-size: .92rem; font-weight: 700; color: var(--navy); }
.parent-cal-event-desc { font-size: .8rem; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parent-cal-event-meta { font-size: .78rem; color: var(--text-muted); margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.parent-ongoing-badge {
  background: #10B98120; color: #10B981; padding: 1px 8px;
  border-radius: 20px; font-size: .72rem; font-weight: 700;
}
.parent-cal-event-type { flex-shrink: 0; }

/* ── ANNOUNCEMENTS ───────────────────────────────────────── */
.parent-announce-full { display: flex; flex-direction: column; gap: 12px; }
.parent-announce-card {
  background: #fff; border-radius: 14px; padding: 20px;
  border-left: 4px solid; box-shadow: var(--shadow-sm);
  border: 1px solid var(--border); border-left-width: 4px;
}
.parent-announce-card--urgent { background: #FFF5F5; border-color: #EF4444; }
.parent-announce-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; }
.parent-announce-type-badge { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.parent-announce-date { font-size: .78rem; }
.parent-announce-card-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.parent-announce-card-content { font-size: .88rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 12px; }
.parent-announce-card-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── HOMEWORK FULL LIST ──────────────────────────────────── */
.parent-hw-full-list { display: flex; flex-direction: column; gap: 8px; }
.parent-hw-full-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 10px; background: var(--gray-200);
}
.parent-hw-full-item--overdue { background: #FFF5F5; }
.hw-done { opacity: .6; }
.parent-hw-checkbox {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; color: #10B981; font-weight: 700; flex-shrink: 0;
}
.parent-hw-checkbox.checked { background: #10B98120; border-color: #10B981; }
.parent-hw-full-body { flex: 1; min-width: 0; }
.parent-hw-full-title { font-size: .9rem; font-weight: 600; color: var(--navy); }
.parent-hw-full-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.parent-hw-full-due { font-size: .8rem; font-weight: 700; white-space: nowrap; }
.hw-subject-tag {
  font-size: .72rem; font-weight: 600; padding: 2px 8px;
  border-radius: 20px; background: #3B82F620; color: #3B82F6;
}

/* ── CHILD PROFILE ───────────────────────────────────────── */
.parent-child-profile { margin-bottom: 20px; }
.parent-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: .85rem; text-decoration: none;
  margin-bottom: 14px; font-weight: 600;
}
.parent-back-btn:hover { color: var(--green); }
.parent-child-profile-header {
  background: linear-gradient(135deg, #071B3B, #0D2952);
  border-radius: 16px; padding: 24px 28px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.parent-child-profile-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: #fff; font-size: 1.8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.parent-child-profile-info h1 { color: #fff; margin: 0 0 8px; font-size: 1.4rem; }
.parent-child-profile-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.parent-child-profile-stats {
  margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap;
}
.parent-profile-stat { text-align: center; }
.parent-profile-stat-value { font-size: 1.6rem; font-weight: 900; line-height: 1; }
.parent-profile-stat-label { font-size: .72rem; color: #93c5fd; margin-top: 4px; }

/* ── TABS ────────────────────────────────────────────────── */
.parent-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px;
  background: #fff; border-radius: 12px; padding: 6px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}
.parent-tab {
  flex: 1; min-width: 100px; padding: 10px 16px; border: none; border-radius: 8px;
  font-family: inherit; font-size: .85rem; font-weight: 600;
  color: var(--text-muted); background: transparent; cursor: pointer;
  transition: background .2s, color .2s;
}
.parent-tab:hover { background: var(--gray-200); color: var(--navy); }
.parent-tab.active { background: var(--navy); color: #fff; }
.parent-tab-content { display: none; }
.parent-tab-content.active { display: block; }

/* ── SETTINGS TOGGLES ────────────────────────────────────── */
.parent-notif-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--border); gap: 16px;
}
.parent-notif-option:last-child { border-bottom: none; }
.parent-notif-option p { margin: 2px 0 0; font-size: .82rem; color: var(--text-muted); }
.parent-toggle {
  width: 44px; height: 24px; border-radius: 12px;
  background: var(--gray-400); flex-shrink: 0; cursor: pointer;
  position: relative; transition: background .2s;
}
.parent-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform .2s;
}
.parent-toggle.active { background: #10B981; }
.parent-toggle.active::after { transform: translateX(20px); }

/* ── DARK MODE — Parent space ────────────────────────────── */

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .parent-child-profile-header { flex-direction: column; align-items: flex-start; }
  .parent-child-profile-stats { margin-left: 0; }
  .parent-grades-table .parent-table-head,
  .parent-grades-table .parent-table-row { grid-template-columns: 100px 1fr 70px 60px; }
  .parent-grades-table .parent-table-head span:nth-child(n+5),
  .parent-grades-table .parent-table-row span:nth-child(n+5) { display: none; }
  .parent-payments-table .parent-table-head,
  .parent-payments-table .parent-table-row { grid-template-columns: 1fr 90px 90px; }
  .parent-payments-table .parent-table-head span:nth-child(n+4),
  .parent-payments-table .parent-table-row span:nth-child(n+4) { display: none; }
  .parent-subject-row--lg { grid-template-columns: 100px 1fr 60px; }
  .parent-subject-row--lg .parent-subject-apprec,
  .parent-subject-row--lg .parent-subject-count { display: none; }
  .parent-child-stats { grid-template-columns: repeat(3, 1fr); }
  .parent-children-grid { grid-template-columns: 1fr; }
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .xp-hero { flex-direction: column; align-items: flex-start; }
  .xp-hero-right { width: 100%; justify-content: space-between; }
  .leaderboard-table th:nth-child(n+6),
  .leaderboard-table td:nth-child(n+6) { display: none; }
  .timetable-wrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .xp-badge-pill { min-width: 0; padding: 10px 12px; }
  .podium { gap: 8px; }
  .podium-avatar { width: 44px; height: 44px; font-size: 1.1rem; }
  .podium-avatar.p1-avatar { width: 54px; height: 54px; font-size: 1.4rem; }
  .cert-footer { flex-direction: column; gap: 20px; align-items: center; }
  .cert-footer-right { text-align: center; }
  .timetable-wrap { grid-template-columns: 1fr; }
  .badges-full-grid { grid-template-columns: repeat(2, 1fr); }
  .leaderboard-table th:nth-child(n+4),
  .leaderboard-table td:nth-child(n+4) { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   ESPACE ENSEIGNANT — Teacher Space Premium
   ═══════════════════════════════════════════════════════════ */

/* ── Sidebar section labels ───────────────────────────────── */
.sidebar-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.45);
  padding: 14px 16px 4px;
  margin-top: 4px;
}

/* ── Page skeleton ─────────────────────────────────────────── */
.dash-page { padding: 0 4px 32px; }
.tpage-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.tpage-title { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin: 0; }
.tpage-sub { font-size: .85rem; color: var(--text-muted); margin: 4px 0 0; }
.tback-link { font-size: .82rem; color: var(--green); text-decoration: none; display: inline-block; margin-bottom: 10px; }
.tback-link:hover { text-decoration: underline; }

/* ── Teacher hero ─────────────────────────────────────────── */
.teacher-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #1e3a6e 100%);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.teacher-hero-info { display: flex; align-items: center; gap: 16px; }
.teacher-hero-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #059669);
  color: #fff; font-size: 1.4rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.teacher-hero-title { font-size: 1.3rem; font-weight: 700; color: #fff; margin: 0; }
.teacher-hero-sub { font-size: .82rem; color: rgba(255,255,255,.7); margin: 4px 0 0; }

/* ── Stats grid ───────────────────────────────────────────── */
.teacher-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.tstat-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.tstat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tstat-val { font-size: 1.6rem; font-weight: 800; color: var(--navy); line-height: 1; }
.tstat-label { font-size: .73rem; color: var(--text-muted); font-weight: 600; margin-top: 2px; }
.tstat-blue  svg { color: #2563EB; } .tstat-blue  { border-left: 3px solid #2563EB; }
.tstat-green svg { color: var(--green); } .tstat-green { border-left: 3px solid var(--green); }
.tstat-purple svg { color: #7C3AED; } .tstat-purple { border-left: 3px solid #7C3AED; }
.tstat-orange svg { color: #D97706; } .tstat-orange { border-left: 3px solid #D97706; }
.tstat-red  svg { color: #EF4444; } .tstat-red  { border-left: 3px solid #EF4444; }
.tstat-teal svg { color: #0891B2; } .tstat-teal { border-left: 3px solid #0891B2; }
.tstat-indigo svg { color: #4F46E5; } .tstat-indigo { border-left: 3px solid #4F46E5; }
.tstat-rose svg { color: #E11D48; } .tstat-rose { border-left: 3px solid #E11D48; }

/* ── Dashboard 2-col grid ─────────────────────────────────── */
.teacher-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.teacher-dash-col { display: flex; flex-direction: column; gap: 16px; }

/* ── Card ─────────────────────────────────────────────────── */
.tcard {
  background: #fff;
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.tcard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tcard-title { font-size: .95rem; font-weight: 700; color: var(--navy); }
.tcard-link { font-size: .78rem; color: var(--green); text-decoration: none; font-weight: 600; }
.tcard-link:hover { text-decoration: underline; }

/* ── Live items ───────────────────────────────────────────── */
.tlive-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.tlive-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.live-dot-red { background: #EF4444; box-shadow: 0 0 0 3px #FEE2E2; animation: pulse-red 1.5s infinite; }
.live-dot-gray { background: #94A3B8; }
@keyframes pulse-red { 0%,100%{box-shadow:0 0 0 3px #FEE2E2}50%{box-shadow:0 0 0 6px #FEE2E2} }
.tlive-info { flex: 1; min-width: 0; }
.tlive-title { font-size: .88rem; font-weight: 600; color: var(--navy); }
.tlive-meta { font-size: .73rem; color: var(--text-muted); }
.badge-live { background: #EF4444; color: #fff; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; flex-shrink: 0; }
.badge-scheduled { background: #EFF6FF; color: #2563EB; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; flex-shrink: 0; }

/* ── Course rows ──────────────────────────────────────────── */
.tcourse-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.tcourse-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.tcourse-info { flex: 1; min-width: 0; }
.tcourse-title { font-size: .88rem; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcourse-meta { font-size: .73rem; color: var(--text-muted); }
.tcourse-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* ── Grades ───────────────────────────────────────────────── */
.tgrade-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.tgrade-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), #1e3a6e); color: #fff; font-size: .88rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tgrade-val { font-size: .9rem; font-weight: 800; border-radius: 8px; padding: 4px 10px; white-space: nowrap; flex-shrink: 0; }
.tgrade-val-sm { font-size: .82rem; font-weight: 700; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.grade-good { background: #DCFCE7; color: #166534; }
.grade-avg  { background: #FEF9C3; color: #854D0E; }
.grade-low  { background: #FEE2E2; color: #991B1B; }

/* ── Quick actions ────────────────────────────────────────── */
.tquick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tquick-btn {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: 12px; text-decoration: none; font-size: .83rem; font-weight: 600;
  border: 1px solid var(--border); background: #f8fafc; color: var(--navy);
  transition: background .15s, color .15s, transform .1s;
}
.tquick-btn:hover { transform: translateY(-1px); }
.tq-blue:hover   { background: #EFF6FF; color: #2563EB; border-color: #BFDBFE; }
.tq-purple:hover { background: #EDE9FE; color: #7C3AED; border-color: #DDD6FE; }
.tq-orange:hover { background: #FEF3C7; color: #D97706; border-color: #FDE68A; }
.tq-red:hover    { background: #FEF2F2; color: #EF4444; border-color: #FCA5A5; }
.tq-green:hover  { background: #DCFCE7; color: #166534; border-color: #A7F3D0; }
.tq-teal:hover   { background: #ECFEFF; color: #0891B2; border-color: #A5F3FC; }

/* ── HW rows ──────────────────────────────────────────────── */
.thw-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }

/* ── Form ─────────────────────────────────────────────────── */
.tform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.tform-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.tform-group { display: flex; flex-direction: column; gap: 5px; }
.tform-group label { font-size: .8rem; font-weight: 600; color: var(--navy); }
.tform-input { padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: .88rem; font-family: inherit; background: #fff; color: var(--navy); transition: border-color .15s; width: 100%; box-sizing: border-box; }
.tform-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px #10B98120; }
.tform-span2 { grid-column: span 2; }
.tform-span3 { grid-column: span 3; }
.tform-action { display: flex; align-items: flex-end; }
textarea.tform-input { resize: vertical; }

/* ── List ─────────────────────────────────────────────────── */
.tlist { display: flex; flex-direction: column; gap: 10px; }
.tlist-item { background: #fff; border-radius: 14px; border: 1px solid var(--border); padding: 14px 16px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); transition: box-shadow .15s; }
.tlist-item:hover { box-shadow: var(--shadow); }
.tlist-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.tlist-info { flex: 1; min-width: 0; }
.tlist-title { font-size: .9rem; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.tlist-meta { font-size: .75rem; color: var(--text-muted); }
.tlist-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── Quiz question cards ──────────────────────────────────── */
.tquiz-question-card { background: #f8fafc; border-radius: 12px; padding: 14px 16px; }
.tq-num { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.tq-text { font-size: .9rem; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.tq-options { display: flex; flex-wrap: wrap; gap: 6px; }
.tq-option { font-size: .78rem; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; color: var(--text-muted); }
.tq-correct { background: #DCFCE7; border-color: #86EFAC; color: #166534; font-weight: 600; }

/* ── Grades table ─────────────────────────────────────────── */
.tgrades-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.tgrades-table th { padding: 10px 12px; text-align: left; font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 2px solid var(--border); }
.tgrades-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tgrades-table tr:last-child td { border-bottom: none; }
.tgrades-table tr:hover td { background: #f8fafc; }

/* ── Tabs ─────────────────────────────────────────────────── */
.ttabs { display: flex; gap: 6px; border-bottom: 2px solid var(--border); padding-bottom: 0; }
.ttab { padding: 8px 20px; font-size: .85rem; font-weight: 600; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 8px 8px 0 0; transition: color .15s; }
.ttab:hover { color: var(--navy); }
.ttab-active { color: var(--green); border-bottom-color: var(--green); background: #DCFCE720; }

/* ── Badges ───────────────────────────────────────────────── */
.tbadge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: .72rem; font-weight: 700; }
.tbadge-green { background: #DCFCE7; color: #166534; }
.tbadge-red   { background: #FEE2E2; color: #991B1B; }
.tbadge-orange { background: #FEF3C7; color: #854D0E; }

/* ── Empty states ─────────────────────────────────────────── */
.tempty { font-size: .82rem; color: var(--text-muted); font-style: italic; padding: 8px 0; }
.tempty-state { text-align: center; padding: 48px 20px; background: #fff; border-radius: 16px; border: 1px solid var(--border); }
.tempty-state p { color: var(--text-muted); font-size: .9rem; margin-top: 12px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-icon-sm { background: #f1f5f9; border: none; border-radius: 8px; padding: 5px 8px; cursor: pointer; font-size: .9rem; transition: background .15s; text-decoration: none; display: inline-block; }
.btn-icon-sm:hover { background: #e2e8f0; }
.btn-danger-sm { background: #FEE2E2 !important; }
.btn-danger-sm:hover { background: #FECACA !important; }
.btn-sm { padding: 5px 12px; font-size: .78rem; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all .15s; }
.btn-outline { background: #fff; border: 1.5px solid var(--border); color: var(--navy); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-danger { background: #FEE2E2; color: #991B1B; }
.btn-danger:hover { background: #FECACA; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) { .teacher-stats-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) {
  .teacher-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .teacher-dash-grid { grid-template-columns: 1fr; }
  .tform-grid { grid-template-columns: 1fr; }
  .tform-grid-3 { grid-template-columns: 1fr 1fr; }
  .tform-span2, .tform-span3 { grid-column: 1; }
}
@media (max-width: 640px) {
  .teacher-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .tquick-grid { grid-template-columns: 1fr; }
  .teacher-hero { padding: 18px; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE GLOBAL — CORRECTIONS MOBILE (tous dashboards)
   Breakpoints : mobile ≤ 480px | phablet ≤ 640px | tablet ≤ 768px | ≤ 960px
   ═══════════════════════════════════════════════════════════ */

/* ── Topbar dashboard — tablette ─────────────────────────── */
@media (max-width: 960px) {
  .dash-topbar { padding: 10px 16px; gap: 10px; }
  .dash-content { padding: 16px; }
  .dash-welcome { margin-bottom: 20px; }
  .dash-welcome h1 { font-size: 1.25rem; }
  .topbar-search { max-width: 260px; padding: 7px 12px; }
  .msg-page { margin: -16px; height: calc(100dvh - 60px); }
}

/* ── Topbar dashboard — mobile ───────────────────────────── */
@media (max-width: 640px) {
  .topbar-search { display: none; }
  .user-name, .user-tag { display: none; }
  .topbar-user { padding: 6px 8px; gap: 0; }
  .topbar-user .sidebar-avatar { width: 32px; height: 32px; font-size: .8rem; }
  .dash-topbar { padding: 8px 12px; gap: 8px; }
  .notif-dropdown { width: min(320px, calc(100vw - 16px)); right: -8px; }
}

/* ── Contenu dashboard — mobile ──────────────────────────── */
@media (max-width: 480px) {
  .dash-content { padding: 12px; }
  .dash-welcome h1 { font-size: 1.1rem; }
  .dash-date { font-size: .78rem; }
  .stat-card { padding: 14px 12px; }
  .stat-icon { width: 36px; height: 36px; font-size: 1rem; }
  .stat-value { font-size: 1.4rem; }
  .dash-page { padding: 0 0 24px; }
}

/* ── Sidebar mobile — plus grands touch targets ───────────── */
@media (max-width: 959px) {
  .sidebar-link { padding: 12px 14px; font-size: .9rem; }
  .sidebar-close { padding: 8px 12px; font-size: 1.6rem; }
}

/* ── Notification dropdown mobile ────────────────────────── */
@media (max-width: 400px) {
  .notif-dropdown { width: calc(100vw - 8px); right: calc(-100vw / 2 + 50px); }
}

/* ── Section enseignant — mobile ─────────────────────────── */
@media (max-width: 480px) {
  .teacher-hero { padding: 14px 16px; flex-direction: column; align-items: flex-start; }
  .teacher-hero-info { gap: 10px; }
  .teacher-hero-avatar { width: 42px; height: 42px; font-size: 1.1rem; }
  .teacher-hero-title { font-size: 1.1rem; }
  .teacher-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tstat-card { padding: 12px 14px; gap: 10px; }
  .tstat-val { font-size: 1.3rem; }
  .tform-grid-3 { grid-template-columns: 1fr; }
  .tform-span2, .tform-span3 { grid-column: 1; }
  .tpage-title { font-size: 1.2rem; }
  .tpage-header { gap: 8px; }
  .tcard { padding: 14px 14px; }
  .tlist-item { padding: 10px 12px; gap: 10px; }
  .tlist-icon { width: 36px; height: 36px; }
  .tquick-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .tquick-btn { padding: 10px 10px; font-size: .78rem; gap: 6px; }
}

/* ── Tableau notes enseignant — overflow mobile ───────────── */
@media (max-width: 768px) {
  .tgrades-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tgrades-table { min-width: 500px; }
  .ttabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 2px; }
  .ttab { white-space: nowrap; flex-shrink: 0; padding: 8px 14px; }
}

/* ── Section parent — mobile ─────────────────────────────── */
@media (max-width: 480px) {
  .parent-subject-row {
    grid-template-columns: 90px 1fr 52px;
    gap: 6px;
    font-size: .8rem;
  }
  .parent-subject-name { font-size: .82rem; }
  .parent-mini-stat { padding: 12px 8px; }
  .parent-mini-stat-val { font-size: 1.5rem; }
  .parent-quick-actions { grid-template-columns: 1fr 1fr; gap: 6px; }
  .parent-quick-btn { padding: 10px 10px; font-size: .8rem; }
  .parent-children-grid { grid-template-columns: 1fr; }
  .parent-child-card { padding: 16px; }
  .parent-child-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ── Panneau Parent — responsive 768px ───────────────────── */
@media (max-width: 768px) {
  /* Bandeau d'accueil */
  .parent-welcome { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
  .parent-welcome-title { font-size: 1.3rem; }
  /* Profil enfant */
  .parent-child-profile-header { padding: 18px; gap: 14px; }
  .parent-child-profile-stats { margin-left: 0; gap: 14px; }
  .parent-profile-stat-value { font-size: 1.3rem; }
  /* Titre de page */
  .parent-page-title { font-size: 1.3rem; }
  /* Paiements en attente */
  .parent-pending-item { flex-wrap: wrap; gap: 10px; }
  .parent-pending-right {
    width: 100%; flex-direction: row;
    align-items: center; justify-content: space-between;
  }
  /* Calendrier — événements */
  .parent-cal-event { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .parent-cal-event-body { flex: 1 1 60%; min-width: 0; }
  .parent-cal-event-type { flex: 0 0 auto; }
  /* Filtres */
  .parent-filter-form { flex-direction: column; gap: 8px; }
  .parent-filter-avg { margin-left: 0; flex-wrap: wrap; }
}

/* ── Panneau Parent — responsive 480px ───────────────────── */
@media (max-width: 480px) {
  /* Titre */
  .parent-page-title { font-size: 1.15rem; }
  .parent-page-subtitle { font-size: .82rem; }
  /* Profil enfant stats en 2×2 */
  .parent-child-profile-stats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; width: 100%;
  }
  .parent-profile-stat-value { font-size: 1.2rem; }
  .parent-profile-stat { background: rgba(255,255,255,.08); border-radius: 10px; padding: 8px; }
  /* Tableau de notes — 3 col sur 480px */
  .parent-grades-table .parent-table-head,
  .parent-grades-table .parent-table-row { grid-template-columns: 80px 1fr 55px; }
  .parent-grades-table .parent-table-head span:nth-child(n+4),
  .parent-grades-table .parent-table-row span:nth-child(n+4) { display: none; }
  /* Tableau absences — 3 col */
  .parent-absences-table .parent-table-head,
  .parent-absences-table .parent-table-row { grid-template-columns: 72px 1fr 96px; }
  .parent-absences-table .parent-table-head span:nth-child(2),
  .parent-absences-table .parent-table-row span:nth-child(2) { display: none; }
  /* Tableau paiements — 2 col */
  .parent-payments-table .parent-table-head,
  .parent-payments-table .parent-table-row { grid-template-columns: 1fr 80px; }
  .parent-payments-table .parent-table-head span:nth-child(n+3),
  .parent-payments-table .parent-table-row span:nth-child(n+3) { display: none; }
  /* Matières barres avancé */
  .parent-subject-row--lg { grid-template-columns: 80px 1fr 52px; }
  .parent-subject-row--lg .parent-subject-apprec,
  .parent-subject-row--lg .parent-subject-count { display: none; }
  /* Calendrier — badge type masqué sous 480px */
  .parent-cal-event-type { display: none; }
  .parent-cal-event-body { flex: 1 1 100%; }
  /* Note récente */
  .parent-grade-item { gap: 8px; }
  .parent-grade-circle { width: 38px; height: 38px; font-size: .8rem; }
  .parent-grade-title { font-size: .82rem; }
  .parent-grade-raw { font-size: .75rem; }
  /* Devoirs complets */
  .parent-hw-full-item { gap: 8px; padding: 10px; }
  .parent-hw-full-title { font-size: .84rem; }
  .parent-hw-full-due { font-size: .75rem; }
  /* Paiements urgents */
  .parent-pending-right { gap: 6px; }
  .parent-pending-amount { font-size: .9rem; }
  /* Légende calendrier */
  .parent-calendar-legend { gap: 10px; padding: 10px 14px; font-size: .78rem; }
  /* Alerte item */
  .parent-alert-item { font-size: .82rem; padding: 10px 12px; }
}

/* ── Panneau Parent — responsive 360px ───────────────────── */
@media (max-width: 360px) {
  .parent-welcome { padding: 14px 16px; }
  .parent-welcome-title { font-size: 1.1rem; }
  .parent-mini-stat-val { font-size: 1.3rem; }
  .parent-mini-stat-label { font-size: .68rem; }
  .parent-child-profile-header { padding: 14px; gap: 10px; }
  .parent-child-profile-avatar { width: 52px; height: 52px; font-size: 1.4rem; }
  .parent-profile-stat-value { font-size: 1.05rem; }
  .parent-profile-stat-label { font-size: .65rem; }
  .parent-card-title { font-size: .9rem; }
  .parent-grades-table .parent-table-head,
  .parent-grades-table .parent-table-row { font-size: .75rem; padding: 8px 8px; gap: 4px; grid-template-columns: 70px 1fr 48px; }
  .parent-absences-table .parent-table-head,
  .parent-absences-table .parent-table-row { font-size: .75rem; padding: 8px 8px; gap: 4px; grid-template-columns: 60px 1fr 82px; }
  .parent-tab { font-size: .8rem; padding: 7px 10px; }
  .parent-grade-item { gap: 6px; }
  .parent-grade-circle { width: 34px; height: 34px; font-size: .75rem; }
  .parent-event-type-badge { display: none; }
  .parent-pay-amount { font-size: .8rem; }
}

/* ── Tableaux admin/parent — overflow mobile ─────────────── */
@media (max-width: 768px) {
  .parent-filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .parent-filter-form { flex-direction: column; gap: 8px; }
  .parent-filter-avg { margin-left: 0; }
}

/* ── Tables overflow scroll sur mobile ───────────────────── */
@media (max-width: 768px) {
  .tgrades-table-wrap,
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tgrades-table { min-width: 480px; }
  table.tgrades-table { display: table; }
}

/* ── Messagerie — hauteur mobile ─────────────────────────── */
@media (max-width: 640px) {
  .msg-page { margin: -16px; height: calc(100dvh - 52px); }
  .msg-header { padding: 10px 12px; }
  .msg-input-row { padding: 8px 10px; }
}
@media (max-width: 480px) {
  .msg-page { margin: -12px; height: calc(100dvh - 52px); }
}

/* ── Général — conteneurs scrollables mobile ─────────────── */
@media (max-width: 640px) {
  .timetable-outer { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kora-layout { gap: 0; }
}

/* ── Dash grid élève — mobile ─────────────────────────────── */
@media (max-width: 640px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-welcome { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE ADMIN — Tous les dashboards (admin, enseignant,
   élève, parent) — toutes les sections : cours, notes, stats,
   modals, tables, filtres, tabs, formulaires
   ═══════════════════════════════════════════════════════════ */

/* ── Classe utilitaire grille 2 colonnes responsive ─────── */
.g-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 640px) {
  .g-2col { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Layout notes enseignant (280px sidebar → 1 col) ─────── */
.teacher-grades-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .teacher-grades-layout { grid-template-columns: 1fr; }
}

/* ── Layout edit examen enseignant ──────────────────────── */
.texam-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .texam-edit-grid { grid-template-columns: 1fr; }
}

/* ── Admin hero (toutes les pages admin) ─────────────────── */
@media (max-width: 640px) {
  .admin-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
    gap: 12px;
  }
  .apage-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 18px;
    gap: 10px;
  }
  .apage-hero h1 { font-size: 1.1rem; }
  .apage-hero p { font-size: .8rem; }
  .admin-hero h1 { font-size: 1.3rem; }
  .admin-hero-stats { gap: 16px; }
  .admin-hero-stat-val { font-size: 1.2rem; }
}

/* ── KPI Grids admin — tablette ──────────────────────────── */
@media (max-width: 768px) {
  .akpi-grid  { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .akpi-grid3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .akpi-grid4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .akpi-row   { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
/* ── KPI Grids admin — mobile ────────────────────────────── */
@media (max-width: 480px) {
  .akpi-grid  { gap: 10px; }
  .akpi-row   { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .akpi-card  { padding: 14px; }
  .akpi-icon  { width: 36px; height: 36px; font-size: 1rem; margin-bottom: 8px; }
  .akpi-val   { font-size: 1.3rem; }
  .akpi-label { font-size: .72rem; }
  .akpi-badge { font-size: .62rem; padding: 2px 6px; }
  .akpi-sm, .akpi-s, .akpi-c { padding: 12px 10px; }
  .akpi-sm-val, .akpi-s-val, .akpi-c-val { font-size: 1.2rem; }
}

/* ── Admin grids content ─────────────────────────────────── */
@media (max-width: 768px) {
  .admin-grid-2,
  .admin-grid-3,
  .admin-charts-grid { grid-template-columns: 1fr !important; }
}

/* ── Quick links grid admin ──────────────────────────────── */
@media (max-width: 768px) {
  .quick-links-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 420px) {
  .quick-links-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .qlink { padding: 12px 6px; font-size: .72rem; gap: 4px; }
  .qlink-icon { font-size: 1.2rem; }
}

/* ── Admin cards padding ─────────────────────────────────── */
@media (max-width: 640px) {
  .admin-card { padding: 14px; }
  .admin-card-title { font-size: .88rem; }
  .admin-card-header { margin-bottom: 10px; }
}

/* ── Admin tables — overflow scroll sur mobile ───────────── */
@media (max-width: 768px) {
  .atable-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .atable      { min-width: 520px; }
  .admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table table { min-width: 460px; }
}

/* ── Admin modals — bottom sheet sur mobile ──────────────── */
@media (max-width: 540px) {
  .amodal-overlay.show { align-items: flex-end; padding: 0; }
  .amodal {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0;
    padding: 20px 16px 28px;
    max-height: 92vh;
    overflow-y: auto;
  }
}

/* ── Admin tab bars — scroll horizontal ─────────────────── */
@media (max-width: 640px) {
  .atab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 4px;
    scrollbar-width: none;
  }
  .atab-bar::-webkit-scrollbar { display: none; }
  .atab { white-space: nowrap; flex-shrink: 0; padding: 7px 10px; font-size: .78rem; }
}

/* ── Admin filter bars ───────────────────────────────────── */
@media (max-width: 640px) {
  .afilter-bar { padding: 10px 12px; gap: 6px; }
  .afilter-search { min-width: 0; }
}
@media (max-width: 480px) {
  .afilter-bar { flex-direction: column; align-items: stretch; }
  .afilter-search { width: 100%; }
}

/* ── KPI stat rows / export grids ───────────────────────── */
@media (max-width: 640px) {
  .kpi-stat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .export-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 400px) {
  .kpi-stat-row { grid-template-columns: 1fr 1fr; }
  .export-grid  { grid-template-columns: 1fr 1fr; }
}

/* ── Admin form cards (user edit) ────────────────────────── */
@media (max-width: 640px) {
  .aform-card { padding: 20px 16px; }
}

/* ── Admin pagination ────────────────────────────────────── */
@media (max-width: 480px) {
  .apagi { flex-wrap: wrap; gap: 4px; padding: 12px 0; }
  .apage-btn { width: 28px; height: 28px; font-size: .74rem; }
}

/* ── Badges admin (abadge) — wrap autorisé ───────────────── */
@media (max-width: 480px) {
  .abadge { font-size: .68rem; padding: 2px 8px; }
}

/* ── Teacher — form inline grade (1fr 1fr) ───────────────── */
@media (max-width: 480px) {
  .teacher-grades-layout .tcard { padding: 14px; }
}

/* ── Teacher calendar ────────────────────────────────────── */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(7,1fr)"] {
    overflow-x: auto;
  }
}

/* ── Parent — pages tabs ─────────────────────────────────── */
@media (max-width: 640px) {
  .parent-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .parent-tabs::-webkit-scrollbar { display: none; }
  .parent-tab { white-space: nowrap; flex-shrink: 0; }
}

/* ── Badges page (student) ───────────────────────────────── */
@media (max-width: 480px) {
  .badges-full-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .badge-card { padding: 16px 12px; }
}

/* ── Leaderboard — podium mobile ─────────────────────────── */
@media (max-width: 360px) {
  .podium { gap: 4px; }
  .podium-avatar { width: 38px; height: 38px; font-size: 1rem; }
  .podium-avatar.p1-avatar { width: 48px; height: 48px; font-size: 1.2rem; }
}

/* ── Quiz show — options touch-friendly ─────────────────── */
@media (max-width: 640px) {
  .quiz-option { min-height: 52px; padding: 12px 14px; }
  .quiz-question-text { font-size: 1rem; }
}

/* ── Profile / Settings — page max-width ─────────────────── */
@media (max-width: 640px) {
  .dash-page[style*="max-width:600px"],
  .dash-page[style*="max-width: 600px"] {
    padding: 0 0 24px;
  }
}

/* ── Emploi du temps — overflow ─────────────────────────── */
@media (max-width: 640px) {
  .timetable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tt-day { min-width: 120px; }
}

/* ── Messagerie — adapt mobile complet ───────────────────── */
@media (max-width: 540px) {
  .msg-sidebar { width: 100%; max-width: none; }
  .msg-conv-item { padding: 10px 12px; }
  .msg-bubble { max-width: 90%; font-size: .84rem; }
  .msg-input { font-size: .88rem; }
}

/* ── Admin — tables scroll horizontal (override overflow:hidden) ── */
@media (max-width: 768px) {
  .atable-wrap {
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════
   DRAWER UTILISATEUR CONNECTÉ (nav-drawer--user)
   Remplace le drawer visiteur quand l'utilisateur est connecté
   ═══════════════════════════════════════════════════════════ */

/* Drawer avec thème sidebar navy */
.nav-drawer--user {
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
}

/* Header du drawer connecté */
.nav-drawer-header--user {
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.nav-drawer-close--user {
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 8px;
  color: #fff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.nav-drawer-close--user:hover { background: rgba(255,255,255,.22); }

/* Carte profil utilisateur */
.nd-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.nd-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nd-user-info { flex: 1; min-width: 0; }
.nd-username {
  font-weight: 600;
  font-size: .92rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nd-role { font-size: .75rem; margin-top: 2px; }
.nd-xp-bar {
  height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 99px;
  margin-top: 6px;
  overflow: hidden;
}
.nd-xp-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .4s;
}
.nd-xp-label {
  font-size: .68rem;
  color: rgba(255,255,255,.5);
  margin-top: 3px;
}

/* Navigation rôle */
.nd-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.nd-nav::-webkit-scrollbar { width: 4px; }
.nd-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }

/* Réutilise .sidebar-link et .sidebar-section-label déjà définis */
/* Les couleurs s'appliquent car le fond est navy */
.nav-drawer--user .sidebar-link {
  color: rgba(255,255,255,.75);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .88rem;
  gap: 10px;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-drawer--user .sidebar-link:hover,
.nav-drawer--user .sidebar-link.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.nav-drawer--user .sidebar-link.active { background: rgba(16,185,129,.22); color: #10B981; }
.nav-drawer--user .sidebar-link svg { flex-shrink: 0; opacity: .75; }
.nav-drawer--user .sidebar-link:hover svg,
.nav-drawer--user .sidebar-link.active svg { opacity: 1; }

.nav-drawer--user .sidebar-section-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  padding: 12px 14px 4px;
}

.nav-drawer--user .sidebar-logout {
  color: rgba(239,68,68,.8) !important;
  margin-top: 8px;
}
.nav-drawer--user .sidebar-logout:hover { background: rgba(239,68,68,.15) !important; color: #EF4444 !important; }
.nav-drawer--user .sidebar-bottom-actions { padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 8px; }

/* ============================================================
   NOUVELLES SECTIONS HOMEPAGE — Ajout 2026-05-16
   ============================================================ */

/* section-subtitle commun */
.section-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  margin-top: 6px;
  text-align: center;
}

/* ---- COMMENT ÇA MARCHE ---- */
.how-section { background: var(--bg-alt, #F8FAFC); }
.how-steps {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 40px;
}
.how-step {
  flex: 1;
  background: var(--white);
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 2px 12px rgba(7,27,59,.07);
  position: relative;
  text-align: center;
}
.how-step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.how-step-icon { font-size: 2.4rem; margin-bottom: 12px; }
.how-step h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.how-list { list-style: none; padding: 0; margin: 0; text-align: left; }
.how-list li {
  font-size: .88rem;
  color: var(--text-muted);
  padding: 5px 0 5px 18px;
  position: relative;
}
.how-list li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--green);
  font-weight: 700;
}
.how-arrow {
  font-size: 1.8rem;
  color: var(--border);
  align-self: center;
  flex-shrink: 0;
  margin-top: -20px;
}
@media (max-width: 768px) {
  .how-steps { flex-direction: column; }
  .how-arrow { transform: rotate(90deg); margin: 0 auto; }
}

/* ---- NIVEAUX SCOLAIRES ---- */
.levels-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.levels-title { font-size: 1.8rem; font-weight: 800; color: var(--navy); margin: 10px 0 14px; }
.levels-desc { color: var(--text-muted); font-size: .97rem; line-height: 1.7; margin-bottom: 20px; }
.levels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.level-bloc {
  background: var(--white);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(7,27,59,.07);
  border-top: 4px solid var(--lc);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .2s;
}
.level-bloc:hover { transform: translateY(-4px); }
.level-emoji { font-size: 2rem; }
.level-bloc strong { font-size: 1rem; font-weight: 700; color: var(--navy); }
.level-bloc span { font-size: .8rem; color: var(--text-muted); }
@media (max-width: 900px) {
  .levels-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ---- PLACEMENT ---- */
.placement-section { background: var(--bg-alt, #F8FAFC); }
.placement-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.placement-card {
  background: var(--white);
  border-radius: 16px;
  padding: 28px 22px;
  box-shadow: 0 2px 12px rgba(7,27,59,.07);
  transition: transform .2s, box-shadow .2s;
}
.placement-card:hover { transform: translateY(-5px); box-shadow: 0 8px 28px rgba(7,27,59,.12); }
.placement-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.placement-card h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.placement-card p { font-size: .88rem; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 900px) { .placement-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .placement-grid { grid-template-columns: 1fr; } }

/* ---- PAIEMENT CENTRALISÉ ---- */
.payment-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.payment-title { font-size: 1.8rem; font-weight: 800; color: var(--navy); margin: 10px 0 14px; }
.payment-desc { color: var(--text-muted); font-size: .97rem; line-height: 1.7; margin-bottom: 28px; }
.payment-flow { display: flex; flex-direction: column; gap: 0; }
.pf-step {
  display: flex; align-items: center; gap: 16px;
  background: var(--white);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(7,27,59,.06);
}
.pf-dot {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.pf-info { display: flex; flex-direction: column; }
.pf-info strong { font-size: .95rem; font-weight: 700; color: var(--navy); }
.pf-info span { font-size: .82rem; color: var(--text-muted); margin-top: 2px; }
.pf-arrow {
  text-align: center;
  font-size: 1.4rem;
  color: var(--border);
  padding: 4px 0;
}
.payment-cards { display: flex; flex-direction: column; gap: 14px; }
.pay-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--white);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(7,27,59,.06);
  border-left: 4px solid var(--green);
}
.pay-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
.pay-card strong { font-size: .95rem; font-weight: 700; color: var(--navy); display: block; margin-bottom: 4px; }
.pay-card p { font-size: .83rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
@media (max-width: 900px) {
  .payment-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ---- ESPACE PARENTS ---- */
.parents-section { background: var(--bg-alt, #F8FAFC); }
.parents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.parent-feat {
  background: var(--white);
  border-radius: 16px;
  padding: 28px 22px;
  box-shadow: 0 2px 12px rgba(7,27,59,.07);
  transition: transform .2s;
}
.parent-feat:hover { transform: translateY(-4px); }
.parent-feat-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.parent-feat h4 { font-size: .98rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.parent-feat p { font-size: .86rem; color: var(--text-muted); line-height: 1.6; }
.parents-cta { text-align: center; margin-top: 36px; }
@media (max-width: 900px) { .parents-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .parents-grid { grid-template-columns: 1fr; } }

/* ---- CONFIDENTIALITÉ ---- */
.privacy-section { background: var(--navy); }
.privacy-inner { text-align: center; max-width: 700px; margin: 0 auto; }
.privacy-shield { font-size: 3.5rem; margin-bottom: 16px; }
.privacy-title { font-size: 1.9rem; font-weight: 800; color: var(--white); margin-bottom: 14px; }
.privacy-desc { font-size: 1rem; color: rgba(255,255,255,.72); margin-bottom: 36px; line-height: 1.7; }
.privacy-pills {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
}
.privacy-pill {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 99px;
  padding: 10px 20px;
  font-size: .88rem;
  color: rgba(255,255,255,.9);
  display: flex; align-items: center; gap: 8px;
  transition: background .2s;
}
.privacy-pill:hover { background: rgba(255,255,255,.14); }

/* ---- ENSEIGNANTS ---- */
.teachers-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.teachers-title { font-size: 1.8rem; font-weight: 800; color: var(--navy); margin: 10px 0 14px; }
.teachers-desc { color: var(--text-muted); font-size: .97rem; line-height: 1.7; margin-bottom: 20px; }
.teachers-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.t-stat-card {
  background: var(--white);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 2px 14px rgba(7,27,59,.08);
  border-top: 3px solid var(--green);
  transition: transform .2s;
}
.t-stat-card:hover { transform: translateY(-4px); }
.t-stat-icon { font-size: 1.6rem; margin-bottom: 8px; }
.t-stat-num { font-size: 1.5rem; font-weight: 800; color: var(--navy); }
.t-stat-lbl { font-size: .78rem; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 900px) {
  .teachers-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ---- AVANTAGES ---- */
.advantages-section { background: var(--bg-alt, #F8FAFC); }
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.adv-card {
  background: var(--white);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 2px 12px rgba(7,27,59,.07);
  transition: transform .2s, box-shadow .2s;
  border-bottom: 3px solid transparent;
}
.adv-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(7,27,59,.12);
  border-bottom-color: var(--green);
}
.adv-icon { font-size: 2.2rem; margin-bottom: 14px; }
.adv-card h4 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.adv-card p { font-size: .86rem; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 900px) { .advantages-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .advantages-grid { grid-template-columns: 1fr; } }


/* ── HOME BOUTIQUE SECTION ───────────────────────────────── */
.home-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.home-shop-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.home-shop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(7,27,59,.12);
}
.home-shop-thumb {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.home-shop-icon { font-size: 2.4rem; }
.home-shop-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  border-radius: 99px;
  padding: 2px 9px;
  font-size: .65rem;
  font-weight: 700;
}
.home-shop-badge.free  { background: #ECFDF5; color: #059669; }
.home-shop-badge.paid  { background: #EFF6FF; color: #2563EB; }
.home-shop-body {
  padding: 12px 14px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-shop-type {
  font-size: .68rem;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.home-shop-title {
  font-size: .86rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}
.home-shop-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── HOME TEACHERS SECTION ───────────────────────────────── */
.home-teachers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.home-teacher-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .2s, box-shadow .2s;
}
.home-teacher-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(7,27,59,.12);
}
.home-teacher-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.home-teacher-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), #10B981);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.home-teacher-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}
.home-teacher-verified {
  display: inline-flex;
  align-items: center;
  background: #ECFDF5;
  color: #059669;
  border-radius: 99px;
  padding: 1px 7px;
  font-size: .65rem;
  font-weight: 700;
}
.home-teacher-avail {
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  padding: 1px 7px;
  font-size: .65rem;
  font-weight: 700;
}
.avail-yes { background: #D1FAE5; color: #065F46; }
.avail-no  { background: #FEE2E2; color: #991B1B; }
.home-teacher-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
  flex-shrink: 0;
}
.home-teacher-subjects {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.home-teacher-subject-tag {
  background: #EFF6FF;
  color: #2563EB;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 600;
}
.home-teacher-footer {
  border-top: 1px solid #F1F5F9;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.home-teacher-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .72rem;
  color: var(--text-muted);
}
.home-teacher-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--green);
  color: #fff;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}
.home-teacher-btn:hover { background: #059669; }

/* ── HOME SECTION EMPTY STATE ────────────────────────────── */
.home-section-empty {
  border: 2px dashed var(--border);
  border-radius: 16px;
  padding: 32px 20px;
}
.home-section-empty-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  text-align: left;
}
.home-section-empty-inner strong { color: var(--navy); font-size: .92rem; display: block; margin-bottom: 4px; }
.home-section-empty-inner p { margin: 0; font-size: .82rem; color: var(--text-muted); }

@media (max-width: 1024px) {
  .home-shop-grid { grid-template-columns: repeat(2, 1fr); }
  .home-teachers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .home-shop-grid { grid-template-columns: 1fr 1fr; }
  .home-teachers-grid { grid-template-columns: 1fr; }
  .home-teacher-footer { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   RESPONSIVE MOBILE — PANNEAU PROFESSEUR COMPLET
   Breakpoints : 480px (mobile), 768px (tablette), 1024px (desktop)
   ============================================================ */

/* ── Classes utilitaires issues de la refonte HTML ── */
.tcal-event-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.tstats-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.tearnings-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
.tearnings-sidebar {
  position: sticky;
  top: 80px;
}

/* ── Prévention overflow global dashboard prof ── */
.dash-page { min-width: 0; overflow-x: hidden; }

/* ── Vidéos : item row responsive ── */
.tvideo-row {
  display: flex;
  overflow: hidden;
  align-items: stretch;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.tvideo-thumb { width: 100px; flex-shrink: 0; }
.tvideo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tvideo-info  { flex: 1; padding: 12px 16px; min-width: 0; }
.tvideo-del   { display: flex; align-items: center; padding: 0 14px; border-left: 1px solid var(--border); flex-shrink: 0; }

/* ── Élèves : table → cartes mobiles ── */
.tstudent-card {
  display: none; /* visible seulement sur mobile via media query */
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  gap: 10px;
  margin-bottom: 10px;
}
.tstudent-card-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.tstudent-card-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; flex-shrink: 0; }
.tstudent-card-info { flex: 1; min-width: 0; }
.tstudent-card-name { font-size: .9rem; font-weight: 700; color: var(--navy); }
.tstudent-card-email { font-size: .73rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tstudent-card-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.tstudent-pill { font-size: .72rem; padding: 2px 10px; border-radius: 99px; background: var(--gray-100); color: var(--text-muted); }

/* ── Calendar JS : grille intérieure responsive ── */
#calendarRoot > div > div:last-child {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Live : tform-grid sur mobile ── */
.tform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }

/* ── Wallet : w-kpi sur mobile ── */
.w-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 28px; }

/* ── Stats table mobile : overflow propre ── */
.tgrades-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =============================================================
   TABLETTE — max 768px
   ============================================================= */
@media (max-width: 768px) {

  /* Calendrier — 3 colonnes → 1 colonne */
  .tcal-event-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Stats 2 colonnes → 1 colonne */
  .tstats-2col { grid-template-columns: 1fr; }

  /* Wallet layout → 1 colonne */
  .tearnings-layout { grid-template-columns: 1fr; }
  .tearnings-sidebar { position: static; top: auto; }

  /* Wallet : w-kpi compact */
  .w-kpi { grid-template-columns: 1fr 1fr; }

  /* Tables : toutes en scroll horizontal */
  .tcard table, .tcard .tgrades-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 480px; }
  table.tgrades-table { display: table; min-width: 480px; }

  /* Live planning : 2 col → 1 col */
  .tform-grid { grid-template-columns: 1fr; }
  .tform-grid-3 { grid-template-columns: 1fr; }
  .tform-span2, .tform-span3 { grid-column: 1; }

  /* Videos items */
  .tvideo-thumb { width: 80px; }
  .tvideo-info { padding: 10px 12px; }

  /* Dashboard hero */
  .teacher-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
  .teacher-hero .btn { width: 100%; text-align: center; justify-content: center; }

  /* Stats grid 2 col sur tablette */
  .teacher-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Dashboard main 2 col → 1 col */
  .teacher-dash-grid { grid-template-columns: 1fr; }

  /* Wallet transactions table */
  #tab-txn table, #tab-withdrawals table, #tab-rates table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 500px;
    width: 100%;
  }
  #tab-txn table tbody, #tab-txn table thead,
  #tab-withdrawals table tbody, #tab-withdrawals table thead,
  #tab-rates table tbody, #tab-rates table thead { display: table; width: 100%; }

  /* Quick actions 2 × 2 */
  .tquick-grid { grid-template-columns: 1fr 1fr; }

  /* g-2col formulaires */
  .g-2col { grid-template-columns: 1fr; }
  .teacher-grades-layout { grid-template-columns: 1fr; }
}

/* =============================================================
   MOBILE — max 480px
   ============================================================= */
@media (max-width: 480px) {

  /* Teacher hero */
  .teacher-hero { padding: 14px; border-radius: 14px; }
  .teacher-hero-avatar { width: 40px; height: 40px; font-size: 1rem; }
  .teacher-hero-title { font-size: 1rem; }
  .teacher-hero-sub { font-size: .75rem; }

  /* Stats grid 2×2 compact */
  .teacher-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tstat-card { padding: 10px 12px; gap: 8px; }
  .tstat-val { font-size: 1.2rem; }
  .tstat-label { font-size: .72rem; }

  /* Cartes */
  .tcard { padding: 12px; }
  .tcard-title { font-size: .92rem; }
  .tpage-title { font-size: 1.1rem; }
  .tpage-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tpage-header .btn, .tpage-header a.btn { width: 100%; text-align: center; justify-content: center; }

  /* Liste items */
  .tlist-item { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .tlist-icon { width: 34px; height: 34px; font-size: 1rem; }
  .tlist-title { font-size: .85rem; }
  .tlist-meta { font-size: .72rem; }
  .tlist-actions { width: 100%; flex-direction: row; justify-content: flex-end; gap: 6px; }
  .tlist-actions form, .tlist-actions .btn { flex: 1; }
  .tlist-actions .btn { width: 100% !important; text-align: center; justify-content: center; }

  /* Vidéos : row → colonne sur très petit écran */
  .tvideo-row, [style*="display:flex"][style*="overflow:hidden"][style*="align-items:stretch"] {
    flex-direction: column !important;
  }
  .tvideo-thumb, [style*="width:100px"][style*="flex-shrink:0"] {
    width: 100% !important;
    height: 140px !important;
  }
  .tvideo-del, [style*="border-left:1px solid var(--border)"][style*="flex-shrink:0"] {
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
    padding: 10px 12px !important;
    justify-content: flex-end !important;
  }

  /* Notes : table → scroll avec min-width réduit */
  table.tgrades-table { min-width: 420px; font-size: .78rem; }
  .tgrades-table th, .tgrades-table td { padding: 7px 8px; }

  /* Élèves : masquer le tableau, afficher les cartes */
  .tstudent-table-wrap { display: none; }
  .tstudent-card { display: flex; flex-direction: column; }

  /* Quick actions 2 colonnes compact */
  .tquick-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .tquick-btn { padding: 10px 8px; font-size: .75rem; gap: 5px; }

  /* Tabs prof */
  .ttabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 2px; gap: 4px; }
  .ttab { white-space: nowrap; flex-shrink: 0; padding: 7px 12px; font-size: .8rem; }

  /* Calendrier interne JS : cellules plus petites */
  #calendarRoot div[style*="border-radius:8px"] {
    min-height: 38px !important;
    padding: 2px 1px !important;
  }
  #calendarRoot div[style*="border-radius:8px"] > div:first-child {
    font-size: .7rem !important;
  }
  #calendarRoot div[style*="font-size:.6rem"] {
    font-size: .55rem !important;
  }

  /* Wallet KPI */
  .w-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-box { padding: 14px 12px; }
  .kpi-val { font-size: 1.2rem !important; }
  .kpi-label { font-size: .68rem; }

  /* Wallet tabs */
  .tab-btn { padding: 7px 12px; font-size: .78rem; }

  /* Wallet tables */
  #tab-txn table, #tab-withdrawals table, #tab-rates table {
    font-size: .78rem;
    min-width: 460px;
  }
  #tab-txn th, #tab-txn td,
  #tab-withdrawals th, #tab-withdrawals td,
  #tab-rates th, #tab-rates td { padding: 7px 8px; }

  /* Formulaire retrait pleine largeur */
  .w-card form input, .w-card form select { font-size: .9rem; }

  /* Live tform */
  .tform-input { font-size: .88rem; padding: 9px 12px; }

  /* Stats prof — graphes et tables */
  .tstats-2col { gap: 12px; }

  /* Préférences enseignant — champs */
  .tform-group { gap: 4px; }
  .tform-group label { font-size: .82rem; }

  /* Pagination wallet */
  [style*="display:flex;justify-content:center;gap:6px"] a {
    padding: 5px 8px !important;
    font-size: .76rem !important;
  }
}

/* =============================================================
   TRÈS PETIT ÉCRAN — max 360px
   ============================================================= */
@media (max-width: 360px) {
  .teacher-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .tstat-card { padding: 8px 10px; }
  .tstat-val { font-size: 1.1rem; }
  .w-kpi { grid-template-columns: 1fr; }
  .tquick-btn { padding: 9px 6px; font-size: .72rem; }
  .tcard { padding: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE ADMIN — PANNEAU ADMINISTRATEUR COMPLET
   Couvre toutes les 34 vues admin_*.php
   ═══════════════════════════════════════════════════════════ */

/* ── Hero admin (apage-hero) — flex-col sur mobile ────────── */
@media (max-width: 640px) {
  .apage-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 18px;
    gap: 12px;
  }
  .apage-hero h1 { font-size: 1.1rem; }
  .apage-hero > a,
  .apage-hero > button,
  .apage-hero > form,
  .apage-hero > div:last-child { align-self: stretch; }
  .apage-hero > a,
  .apage-hero > button { text-align: center; justify-content: center; width: 100%; }
  /* Hero paiements (pay-hero) et rémunérations (rem-hero) */
  .pay-hero, .rem-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 20px;
    gap: 14px;
  }
  .pay-hero h1, .rem-hero h1 { font-size: 1.2rem; }
  /* Hero YengaPay (admin-header / admin-title) */
  .admin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .admin-title { font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .apage-hero { padding: 14px 14px; gap: 10px; }
  .apage-hero h1 { font-size: 1rem; }
}

/* ── Grilles KPI 4 colonnes (akpi-grid4, akpi-c) ─────────── */
@media (max-width: 768px) {
  .akpi-grid4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
  .akpi-grid4 { gap: 8px; }
  .akpi-c-val { font-size: 1.2rem; }
  .akpi-c { padding: 14px; }
}
@media (max-width: 360px) {
  .akpi-grid4 { grid-template-columns: 1fr; }
}

/* ── Grille KPI 3 colonnes (akpi-grid3 — emails, etc.) ──────── */
@media (max-width: 768px) {
  .akpi-grid3 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
}
@media (max-width: 480px) {
  .akpi-grid3 { grid-template-columns: 1fr !important; }
  .akpi-s { padding: 12px; }
  .akpi-s-val { font-size: 1.1rem; }
}

/* ── Grille KPI 6 cols analytics (akpi-row) ──────────────── */
@media (max-width: 640px) {
  .akpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .akpi-sm { padding: 12px; }
  .akpi-sm-val { font-size: 1.1rem; }
}
@media (max-width: 360px) {
  .akpi-row { grid-template-columns: 1fr !important; }
}

/* ── Grilles paiements (pay-kpi 5 cols) ──────────────────── */
@media (max-width: 640px) {
  .pay-kpi { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .pay-kcard { padding: 12px 14px; }
  .pay-kcard-val { font-size: 1.1rem; }
}
@media (max-width: 360px) {
  .pay-kpi { grid-template-columns: 1fr !important; }
}

/* ── Grilles rémunérations (rem-kpi 4 cols) ──────────────── */
@media (max-width: 480px) {
  .rem-kpi { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .rem-kcard { padding: 14px 16px; }
  .rem-kcard-val { font-size: 1.2rem; }
}

/* ── Grille charts analytics (admin-charts-grid) ─────────── */
@media (max-width: 640px) {
  .admin-charts-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .admin-charts-grid .admin-card { padding: 14px; }
}

/* ── Config système — cfg-item flex-col + input pleine larg ─ */
@media (max-width: 640px) {
  .cfg-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 0;
  }
  .cfg-input { min-width: 0; width: 100%; box-sizing: border-box; }
  /* Grille 2fr/1fr config → 1 col */
  .admin-grid-2[style*="2fr 1fr"],
  .admin-grid-2[style*="2fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ── Tab bars admin (atab-bar) — scroll horizontal ───────── */
@media (max-width: 640px) {
  .atab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
    gap: 4px;
    padding: 5px;
  }
  .atab-bar::-webkit-scrollbar { display: none; }
  .atab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: .8rem;
  }
}

/* ── Modération — mod-card stack vertical sur mobile ─────── */
@media (max-width: 540px) {
  .mod-card { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mod-icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 10px; }
}
@media (max-width: 480px) {
  .mod-card { padding: 14px; }
}

/* ── Modals rem/pay (modal, modal-overlay) — bottom-sheet ── */
@media (max-width: 540px) {
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    width: 100% !important;
    padding: 22px 18px !important;
  }
  .modal h2 { font-size: 1rem !important; }
  /* Champs inline dans les modals paiements */
  .frow { grid-template-columns: 1fr !important; gap: 8px !important; }
}

/* ── Filter bars YengaPay (yp-filters) ─── ──────────────── */
@media (max-width: 640px) {
  .yp-filters { gap: 6px; }
  .yp-filters select,
  .yp-filters input { width: 100%; flex: 1 1 100%; padding: .5rem .75rem; font-size: .82rem; }
}

/* ── Tables YengaPay (txn-table, wh-table) — overflow ───── */
@media (max-width: 768px) {
  .txn-table, .wh-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ── Tables brutes (admin wallets/retraits) — overflow ───── */
@media (max-width: 768px) {
  .dashboard-content > .w-card { overflow-x: auto; }
  .dashboard-content table, .w-card table {
    min-width: 520px;
    font-size: .8rem;
  }
  .dashboard-content th,
  .dashboard-content td { padding: 8px 10px !important; }
}

/* ── Section header paiements — flex-col sur mobile ─────── */
@media (max-width: 480px) {
  .pay-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
  }
  .rem-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
  }
  .rem-section-header h3 { font-size: .92rem; }
  .pay-filters, .rem-filters { gap: 8px; padding: 12px 14px; }
}

/* ── Partenaires — grille form 1fr sur mobile ────────────── */
@media (max-width: 640px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    /* Ciblage CSS spécifique partenaires via sélecteur inline */
  }
  /* form partners grid inline style — patch via parent */
  .dash-page form > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Écoles (schools-grid) — min-width réduit ────────────── */
@media (max-width: 480px) {
  .schools-grid { grid-template-columns: 1fr !important; }
  .school-card { padding: 14px; }
  .school-icon { width: 40px; height: 40px; font-size: 1.2rem; }
}

/* ── Analytics — stats-bar hero (live indicator) ─────────── */
@media (max-width: 480px) {
  .apage-hero > div[style*="background:rgba(16,185"] {
    display: none;
  }
}

/* ── YengaPay config / stats bar (yp-stat) ───────────────── */
@media (max-width: 480px) {
  .yp-stat { padding: .85rem 1rem; }
  .yp-stat-val { font-size: 1.2rem; }
}

/* ── Commission rates — rate-card input ──────────────────── */
@media (max-width: 480px) {
  .rate-card { padding: 16px; }
  .rate-input { width: 70px; font-size: 1rem; }
}

/* ── Key code (sécurité) — wrappable sur mobile ──────────── */
@media (max-width: 640px) {
  .akey-code { word-break: break-all; white-space: normal; }
  .role-stat-card { padding: 10px 12px; }
}

/* ── Modération counts dans hero — inline sur petit écran ── */
@media (max-width: 480px) {
  .apage-hero > div[style*="display:flex;gap"] {
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
  }
}

/* ── Logs — filter-bar inputs pleine largeur ─────────────── */
@media (max-width: 480px) {
  .afilter-search { width: 100%; }
  .afilter-search input,
  .afilter-search select { width: 100%; }
}

/* ── Abonnements — hero boutons côte à côte sur mobile ───── */
@media (max-width: 480px) {
  .apage-hero > div[style*="display:flex;gap:8"] {
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }
  .apage-hero > div[style*="display:flex;gap:8"] > a,
  .apage-hero > div[style*="display:flex;gap:8"] > button { flex: 1; text-align: center; justify-content: center; }
}

/* ── Admin tableau de bord principal — quick-links 2 cols ── */
@media (max-width: 360px) {
  .quick-links { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
}

/* ── Dashboard content — spacing réduit sur très petit écran */
@media (max-width: 360px) {
  .akpi-c { padding: 10px 12px; }
  .akpi-c-val { font-size: 1rem; }
  .admin-card { padding: 12px !important; }
}



/* ══════════════════════════════════════════════════════════════
   🇨🇮  THÈME IVOIRIEN — Surcharge complète
   Orange #F97316  |  Blanc #FFFFFF  |  Vert #16A34A
   Appliqué sur : navbar, hamburger, drawer, hero, cartes, stats,
   footer, sidebar, pills, boutons, sections, CTA, témoignages
══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --ci-or:  #F97316; --ci-or-d: #EA6A0A; --ci-or-l: #FFF3E6; --ci-or-m: #FED7AA;
  --ci-vt:  #16A34A; --ci-vt-d: #15803D; --ci-vt-l: #F0FDF4; --ci-vt-m: #BBF7D0;
  --green:       #16A34A; --green-dark:  #15803D; --green-light: #F0FDF4;
  --orange:      #F97316; --orange-dark: #EA6A0A; --orange-light: #FFF3E6;
}

/* ── Corps de page — crème ivoirien ────────────────────────── */
body { background: #FFFBF7 !important; }

/* ── Barre de progression — drapeau ────────────────────────── */
.scroll-progress { background: linear-gradient(90deg,#F97316 0%,#F97316 33%,#fff 33%,#fff 66%,#16A34A 66%) !important; }

/* ══ NAVBAR ════════════════════════════════════════════════════ */
.navbar {
  border-bottom: 1px solid rgba(249,115,22,.18) !important;
  background: #fff !important;
}
/* Bandeau drapeau sous la navbar */
.navbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,#F97316 33.33%,#fff 33.33%,#fff 66.66%,#16A34A 66.66%);
  pointer-events: none;
}
.nav-link { color: var(--gray-700) !important; }
.nav-link:hover { color: #F97316 !important; background: #FFF3E6 !important; }
.nav-link.active {
  color: #F97316 !important;
  background: #FFF3E6 !important;
  font-weight: 700 !important;
}
/* Hamburger bars — orange */
.nav-toggle span { background: #F97316 !important; }
/* Logo texte orange */
.brand-a { color: #F97316 !important; }
/* Bouton S'inscrire — orange vif */
.btn-orange { background: #F97316 !important; color:#fff !important; }
.btn-orange:hover { background: #EA6A0A !important; box-shadow: 0 4px 18px rgba(249,115,22,.38) !important; }
/* btn-primary override → orange */
.btn-primary { background: #F97316 !important; color:#fff !important; }
.btn-primary:hover { background: #EA6A0A !important; box-shadow: 0 4px 16px rgba(249,115,22,.32) !important; }
/* Ghost btn hover → orange */
.btn-ghost:hover { border-color: #F97316 !important; color: #F97316 !important; }
/* Search nav btn */
.search-bar-nav button.btn-primary { background: #F97316 !important; }

/* ══ DRAWER MOBILE ═════════════════════════════════════════════ */
.nav-drawer {
  border-right: none !important;
}
/* Entête drawer — navy propre avec accent orange */
.nav-drawer-header {
  background: #071B3B !important;
  border-bottom: 3px solid #F97316 !important;
  padding: 16px 16px 18px !important;
}
.nav-drawer-header .brand-name { color: #fff !important; }
.nav-drawer-header .brand-a    { color: #F97316 !important; }
/* Logo image dans l'entête drawer : rendre blanc sur fond navy */
.nav-drawer-header img,
.nav-drawer-header .brand-logo {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}
.nav-drawer-header--user {
  background: #071B3B !important;
  border-bottom: 3px solid #F97316 !important;
}
/* Logo image dans l'entête drawer connecté */
.nav-drawer-header--user img {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}
/* Fermer bouton dans l'entête */
.nav-drawer-close { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.nav-drawer-close:hover { background: rgba(255,255,255,.22) !important; color:#fff !important; }
/* Liens du drawer */
.nav-drawer-link { color: #071B3B !important; }
.nav-drawer-link:hover { background: #FFF3E6 !important; color: #F97316 !important; }
.nav-drawer-section-title { color: #9CA3AF !important; }
.nav-drawer-sublink { color: #6B7280 !important; }
.nav-drawer-sublink:hover { background: #FFF3E6 !important; color: #F97316 !important; }
/* CTA drawer — orange */
.nav-drawer-link-cta {
  background: linear-gradient(135deg,#F97316,#EA6A0A) !important;
  box-shadow: 0 4px 16px rgba(249,115,22,.35) !important;
}
.nav-drawer-link-cta:hover { opacity: .88 !important; }
/* Overlay — vert foncé translucide */
.nav-drawer-overlay { background: rgba(21,128,61,.45) !important; }

/* ══ USER DRAWER (connecté) ════════════════════════════════════ */
.nav-drawer--user .sidebar-link { color: rgba(255,255,255,.75) !important; }
.nav-drawer--user .sidebar-link:hover { background: rgba(249,115,22,.18) !important; color: #fff !important; }
.nav-drawer--user .sidebar-link.active { background: rgba(249,115,22,.28) !important; color: #F97316 !important; }
.nd-nav .sidebar-link:hover  { background: #FFF3E6 !important; color: #F97316 !important; }
.nd-nav .sidebar-link.active { background: #FFF3E6 !important; color: #F97316 !important; }

/* ══ SECTION FEATURES ══════════════════════════════════════════ */
.features {
  background: linear-gradient(135deg,rgba(249,115,22,.05) 0%,#FFFDF9 40%,rgba(22,163,74,.05) 100%) !important;
  position: relative;
}
.features::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg,#F97316 33.33%,#fff 33.33%,#fff 66.66%,#16A34A 66.66%);
  position: absolute; top:0; left:0; right:0;
}
/* Icônes feature — couleurs drapeau */
.fi-orange { background: #FFF3E6 !important; color: #F97316 !important; }
.fi-purple { background: #F0FDF4 !important; color: #16A34A !important; }
.fi-blue   { background: #FFF3E6 !important; color: #F97316 !important; }
.fi-teal   { background: #F0FDF4 !important; color: #16A34A !important; }
/* Feature cards — top border flag */
.feature-card {
  border-top: 4px solid #F97316 !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}
.feature-card:nth-child(even) { border-top-color: #16A34A !important; }
.feature-card:hover { box-shadow: 0 10px 36px rgba(249,115,22,.15) !important; }
.feature-card h3 { color: #071B3B !important; }

/* ══ PILLS NIVEAU ══════════════════════════════════════════════ */
.pill.pill-active { background: #F97316 !important; border-color: #F97316 !important; color: #fff !important; }
.pill:hover { border-color: #F97316 !important; color: #F97316 !important; background: #FFF3E6 !important; }

/* ══ VOIR TOUT LINKS ═══════════════════════════════════════════ */
.voir-tout-link:hover { color: #F97316 !important; }

/* ══ SECTION TITLE underline ═══════════════════════════════════ */
.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  display: block;
  width: 52px; height: 4px;
  margin-top: 10px;
  background: linear-gradient(90deg,#F97316,#16A34A);
  border-radius: 2px;
}

/* ══ COURSE CARDS ══════════════════════════════════════════════ */
.course-card-v2:hover, .course-card:hover {
  box-shadow: 0 8px 32px rgba(249,115,22,.16) !important;
}
.course-level { background: #F0FDF4 !important; color: #15803D !important; }
.course-card-v2:hover { border-top: 2px solid #F97316; }

/* ══ STATS BOX ═════════════════════════════════════════════════ */
.stats-outer { background: #FFFBF7 !important; }
.stats-box {
  background: linear-gradient(135deg,#166534 0%,#1a7a3f 60%,#15803D 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Bandeau drapeau en haut de la stats box */
.stats-box::before {
  content: '';
  position: absolute;
  top:0; left:0; right:0;
  height: 6px;
  background: linear-gradient(90deg,#F97316 33.33%,#fff 33.33%,#fff 66.66%,#16A34A 66.66%);
  z-index: 1;
}
.stat-number { color: #fff !important; }
.stat-label  { color: rgba(255,255,255,.75) !important; }

/* ══ TESTIMONIALS ══════════════════════════════════════════════ */
.testimonial-card {
  border-left: 5px solid #F97316 !important;
  border-top: none !important;
}
.testimonial-card:nth-child(even) { border-left-color: #16A34A !important; }

/* ══ CTA SECTION ═══════════════════════════════════════════════ */
.cta-section {
  background: linear-gradient(135deg,#EA6A0A 0%,#F97316 45%,#16A34A 100%) !important;
  position: relative !important;
}
.cta-section::before {
  content: '';
  position: absolute;
  top:0; left:0; right:0;
  height: 5px;
  background: linear-gradient(90deg,#fff 33.33%,rgba(249,115,22,.5) 33.33%,rgba(249,115,22,.5) 66.66%,#fff 66.66%);
}

/* ══ PAGE HEADER (pages intérieures) ══════════════════════════ */
.page-header {
  background: linear-gradient(135deg,#071B3B 0%,#0D2952 50%,#166534 100%) !important;
}
.page-header::after {
  content: '';
  display: block;
  position: absolute;
  bottom:0; left:0; right:0;
  height: 5px;
  background: linear-gradient(90deg,#F97316 33.33%,#fff 33.33%,#fff 66.66%,#16A34A 66.66%);
}
.page-header { position: relative; }

/* ══ FOOTER ════════════════════════════════════════════════════ */
.footer {
  background: #166534 !important;
  position: relative;
}
/* Bandeau drapeau en haut du footer */
.footer::before {
  content: '';
  display: block;
  height: 6px;
  background: linear-gradient(90deg,#F97316 33.33%,#fff 33.33%,#fff 66.66%,#16A34A 66.66%);
  position: absolute; top:0; left:0; right:0;
}
.footer { padding-top: 62px !important; }
.footer-list a:hover { color: #FED7AA !important; }
.social-btn:hover { background: #F97316 !important; color:#fff !important; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12) !important; }

/* ══ BOTTOM MOBILE NAV ═════════════════════════════════════════ */
.bottom-nav-item.active, .bottom-nav-item:hover { color: #F97316 !important; }
.bottom-nav { border-top: 2px solid transparent; border-image: linear-gradient(90deg,#F97316 33%,#fff 33%,#fff 66%,#16A34A 66%) 1; }

/* ══ SIDEBAR DASHBOARD ═════════════════════════════════════════ */
.sidebar {
  background: linear-gradient(180deg,#166534 0%,#1a7a3f 50%,#15803D 100%) !important;
}
.sidebar-link.active {
  background: rgba(249,115,22,.28) !important;
  color: #F97316 !important;
  font-weight: 700 !important;
}
.sidebar-link:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}
.sidebar-brand-name { color: #fff !important; }

/* Barre XP dans la sidebar — orange */
.sidebar-xp-fill { background: linear-gradient(90deg,#F97316,#FD8A3C) !important; }

/* ══ INPUTS FOCUS ══════════════════════════════════════════════ */
input:focus, textarea:focus, select:focus {
  border-color: #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.12) !important;
  outline: none !important;
}

/* ══ AVATAR initiale ═══════════════════════════════════════════ */
.avatar-sm { background: #F97316 !important; }

/* ══ BADGE PREMIUM ═════════════════════════════════════════════ */
.badge-premium { background: #F97316 !important; }

/* ══ FLASH / ALERT ═════════════════════════════════════════════ */
.flash-success { background: #F0FDF4 !important; color: #15803D !important; }
.alert-success { background: #F0FDF4 !important; color: #15803D !important; }

/* ══ SECTION TAG ═══════════════════════════════════════════════ */
.section-tag {
  background: #FFF3E6 !important;
  color: #F97316 !important;
  border: 1px solid #FED7AA !important;
}

/* ══ PÉDAGOGIE CHECK & CS NUM ══════════════════════════════════ */
.pedagogy-check { color: #F97316 !important; }
.cs-num { color: #F97316 !important; }

/* ══ BG-LIGHT sections alternées ══════════════════════════════ */
.section.bg-light { background: #FFF8F3 !important; }

/* ══ HOME CARDS HOVER ══════════════════════════════════════════ */
.home-teacher-card:hover { box-shadow: 0 8px 32px rgba(249,115,22,.18) !important; }
.home-shop-card:hover    { box-shadow: 0 8px 32px rgba(249,115,22,.18) !important; }

/* ══ FORUM & DOCUMENTS ═════════════════════════════════════════ */
.forum-card:hover { border-left-color: #F97316 !important; }
.doc-card:hover   { border-top-color: #F97316 !important; }

/* ══ QUIZ ITEMS ════════════════════════════════════════════════ */
.quiz-card:hover { box-shadow: 0 8px 28px rgba(249,115,22,.15) !important; }
.quiz-option:hover { border-color: #F97316 !important; }
.quiz-option.selected { border-color: #F97316 !important; background: #FFF3E6 !important; }
.quiz-option.correct  { border-color: #16A34A !important; background: #F0FDF4 !important; }

/* ══ MODAL OVERLAY ═════════════════════════════════════════════ */
.modal-overlay { background: rgba(22,101,52,.5) !important; }

/* ══ DASHBOARD TOPBAR ══════════════════════════════════════════ */
.dash-topbar { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg,#F97316 33%,#fff 33%,#fff 66%,#16A34A 66%) 1; }

/* ══ XP HERO DASHBOARD ═════════════════════════════════════════ */
.xp-hero { background: linear-gradient(135deg,#166534,#15803D) !important; }
.xp-bar-fill { background: linear-gradient(90deg,#F97316,#FD8A3C) !important; }
.xp-badge-pill { background: rgba(249,115,22,.22) !important; color: #F97316 !important; }

/* ══ LEADERBOARD / PODIUM ══════════════════════════════════════ */
.podium-1st .podium-rank { background: #F97316 !important; }
.podium-2nd .podium-rank { background: #16A34A !important; }
.podium-3rd .podium-rank { background: #EA6A0A !important; }

/* ══ HOME-SECTION-EMPTY ════════════════════════════════════════ */
.home-section-empty { border: 2px dashed #FED7AA !important; background: #FFFBF7 !important; }

/* ══ PRICING CARDS highlight ══════════════════════════════════ */
.pricing-card.featured { border: 2px solid #F97316 !important; }
.pricing-check { color: #F97316 !important; }

/* ══ HERO responsive mini-stats ════════════════════════════════ */
@media (max-width: 600px) {
  .hero-mini-stats { gap: 12px; }
  .hero-mini-stat-div { display: none; }
  .hero-mini-stat-num { font-size: .88rem; }
}

/* ══ Hamburger toujours orange même sur mobile ════════════════ */
@media (max-width: 899px) {
  .nav-toggle span { background: #F97316 !important; }
  .navbar { border-bottom: 1px solid rgba(249,115,22,.2) !important; }
}


/* ── Fix mini-stats hero : 1 ligne horizontale sur mobile ── */
.hero-mini-stats {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 12px !important;
  padding-bottom: 4px;
}
.hero-mini-stats::-webkit-scrollbar { display: none; }
.hero-mini-stat { flex-shrink: 0; }
@media (max-width: 480px) {
  .hero-mini-stat-num { font-size: .82rem !important; }
  .hero-mini-stat-lbl { font-size: .65rem !important; }
  .hero-mini-stat-icon { width: 28px; height: 28px; font-size: .85rem; }
  .hero-mini-stat { gap: 5px; }
  .hero-mini-stat-div { height: 26px !important; }
  .hero-mini-stats { gap: 8px !important; margin-top: 16px !important; }
}

/* ══ Fix lisibilité texte sur fond vert (footer + stats) ══════ */

/* Stats box — tout en blanc explicite */
.stats-box .stat-number { color: #fff !important; }
.stats-box .stat-label  { color: rgba(255,255,255,.9) !important; font-weight: 600 !important; }
.stats-box .stat-icon   { filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }

/* Footer — tous les textes en blanc lisible */
.footer                 { color: rgba(255,255,255,.88) !important; }
.footer-brand p         { color: rgba(255,255,255,.85) !important; }
.footer-title           { color: #fff !important; text-shadow: none !important; }
.footer-list a          { color: rgba(255,255,255,.82) !important; }
.footer-list a:hover    { color: #FED7AA !important; }
.footer-bottom          { color: rgba(255,255,255,.75) !important; }
.footer-bottom a        { color: rgba(255,255,255,.75) !important; }
.footer-bottom a:hover  { color: #FED7AA !important; }
/* Newsletter dans le footer */
.footer-newsletter p    { color: rgba(255,255,255,.85) !important; }


/* ══ Correction forcée lisibilité footer (fond vert #166534) ══ */
.footer * { color: rgba(255,255,255,.92) !important; }
.footer .footer-title { color: #fff !important; font-weight: 700 !important; letter-spacing: .02em; }
.footer .footer-list a { color: rgba(255,255,255,.85) !important; }
.footer .footer-list a:hover { color: #FED7AA !important; }
.footer .footer-bottom,
.footer .footer-bottom * { color: rgba(255,255,255,.65) !important; }
.footer .footer-bottom a:hover { color: #FED7AA !important; }
.footer .social-btn { color: rgba(255,255,255,.8) !important; background: rgba(255,255,255,.12) !important; }
.footer .social-btn:hover { color: #fff !important; background: #F97316 !important; }
.footer input[type="email"],
.footer input[type="text"] {
  color: var(--navy) !important;
  background: #fff !important;
}
/* Titres column footer bien blancs */
.footer h3, .footer h4, .footer strong { color: #fff !important; }

/* ══ Fix navbar boutons desktop toujours visibles ══════════════ */
/* Annule le font-weight:700 sur le lien actif qui élargissait le nav */
.nav-link.active { font-weight: 600 !important; }
/* Assure que nav-actions n'est jamais compressé */
.nav-actions { flex-shrink: 0 !important; }
/* Se connecter : texte visible (gris foncé sur fond blanc) */
.nav-btn-login, .btn-ghost { color: var(--navy) !important; }
/* S'inscrire : toujours affiché à partir de 600px */
@media (min-width: 600px) {
  .nav-actions .btn-orange { display: inline-flex !important; }
}
/* nav-link : couleur de repli si --gray-700 non défini */
.nav-link { color: #374151 !important; }

/* ══ Footer brand row — logo + nom texte ══════════════════════ */
.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
/* Logo footer visible sur fond vert foncé (#166534) : blanc net */
.footer .footer-logo,
.footer img.footer-logo {
  height: 40px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}
.footer-brand-name {
  font-family: 'Nunito', 'Poppins', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff !important;
  letter-spacing: -.01em;
  line-height: 1;
}
.footer-brand-a { color: #F97316 !important; }


/* ══════════════════════════════════════════════════════════════
   🇨🇮  THÈME IVOIRIEN — PANNEAUX DASHBOARD
   Sidebar/hamburger : fond blanc, texte navy — thème clair
   Accents : Orange #F97316 | Vert #16A34A partout
   Admin · Élève · Parent · Enseignant
══════════════════════════════════════════════════════════════ */

/* ── SIDEBAR — fond blanc, thème clair ────────────────────── */
.sidebar {
  background: #ffffff !important;
  border-right: 1px solid var(--border) !important;
}
/* Bandeau drapeau CI en bas du header */
.sidebar-header {
  background: #ffffff !important;
  border-bottom: 3px solid transparent !important;
  border-image: linear-gradient(90deg,#F97316 33%,#fff 33%,#fff 66%,#16A34A 66%) 1 !important;
  padding-bottom: 16px !important;
}
.sidebar-header .brand-name,
.sidebar-header span { color: var(--navy) !important; }
.sidebar-logo { filter: none !important; }

/* Bouton fermer sidebar — cercle arrondi clair */
.sidebar-close { background: var(--gray-100) !important; color: var(--text-muted) !important; }
.sidebar-close:hover { background: #FFF3E6 !important; color: #F97316 !important; }

/* Zone utilisateur dans la sidebar */
.sidebar-user {
  background: var(--gray-50) !important;
  border-bottom: 1px solid var(--border) !important;
}
.sidebar-username { color: var(--navy) !important; }
.sidebar-xp-bar   { background: var(--gray-200) !important; }
.sidebar-xp-fill  { background: linear-gradient(90deg,#F97316,#FD8A3C) !important; }
.sidebar-xp-label { color: var(--text-muted) !important; }
.sidebar-level-dot { border: 2px solid #fff !important; }

/* Liens du menu sidebar */
.sidebar-link { color: var(--text-muted) !important; }
.sidebar-link:hover {
  background: var(--gray-100) !important;
  color: var(--navy) !important;
}
.sidebar-link.active {
  background: #FFF3E6 !important;
  color: #F97316 !important;
  font-weight: 600 !important;
  border-left: 3px solid #F97316 !important;
  padding-left: 9px !important;
}

/* Labels de section */
.sidebar-section-label { color: var(--gray-400) !important; letter-spacing:.07em !important; }

/* Badges dans le menu */
.sidebar-xp-badge   { background: #FFF3E6 !important; color: #F97316 !important; }
.sidebar-badge-count{ background: #F0FDF4 !important; color: #16A34A !important; }
.sidebar-msg-badge  { background: #F97316 !important; color: #fff !important; }

/* Déconnexion */
.sidebar-logout { color: var(--text-muted) !important; }
.sidebar-logout:hover { background: #FEE2E2 !important; color: #EF4444 !important; }

/* Bloc premium dans sidebar */
.sidebar-premium {
  background: #FFF3E6 !important;
  border: 1px solid #FED7AA !important;
  border-radius: 10px !important;
}
.sidebar-premium strong { color: var(--navy) !important; }
.sidebar-premium p { color: var(--text-muted) !important; }

/* ── HAMBURGER (sidebar-open) — barres orange sur fond blanc ─ */
.sidebar-open span { background: #F97316 !important; }
.sidebar-open:hover span { background: #EA6A0A !important; }

/* ── TOPBAR DASHBOARD ─────────────────────────────────────── */
.dash-topbar {
  background: #fff !important;
  border-bottom: 3px solid transparent !important;
  border-image: linear-gradient(90deg,#F97316 33%,#fff 33%,#fff 66%,#16A34A 66%) 1 !important;
  box-shadow: 0 2px 8px rgba(7,27,59,.06) !important;
}
.topbar-user:hover { border-color: #F97316 !important; }
/* Avatar initiale — orange */
.sidebar-avatar,
.topbar-avatar {
  background: linear-gradient(135deg,#F97316,#EA6A0A) !important;
  color: #fff !important;
}

/* Cloche notifications */
.notif-btn:hover { color: #F97316 !important; }
.notif-count     { background: #F97316 !important; color: #fff !important; }

/* ── DASHBOARD BODY ───────────────────────────────────────── */
.dashboard-body { background: #FFFBF7 !important; }

/* ── XP HERO (élève) ─────────────────────────────────────── */
.xp-hero {
  background: linear-gradient(135deg,#071B3B 0%,#0D2952 50%,#166534 100%) !important;
  position: relative; overflow: hidden;
}
.xp-hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg,#F97316 33%,#fff 33%,#fff 66%,#16A34A 66%);
}
.xp-bar-fill { background: linear-gradient(90deg,#F97316,#FD8A3C) !important; }
.xp-badge-pill { background: rgba(249,115,22,.22) !important; color: #F97316 !important; }

/* ── ADMIN HERO ────────────────────────────────────────────── */
.admin-hero {
  background: linear-gradient(135deg,#071B3B 0%,#0D2952 45%,#166534 100%) !important;
  position: relative; overflow: hidden;
}
.admin-hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg,#F97316 33%,#fff 33%,#fff 66%,#16A34A 66%);
}
.admin-hero h1       { color: #fff !important; }
.admin-hero-stat-val { color: #F97316 !important; font-weight:800 !important; }
.admin-hero-stat-label { color: rgba(255,255,255,.78) !important; }

/* ── KPI CARDS ADMIN ─────────────────────────────────────── */
.akpi-card {
  background: #fff !important;
  border-top: 3px solid #F97316 !important;
  border-radius: 12px !important;
}
.akpi-card:nth-child(even) { border-top-color: #16A34A !important; }
.akpi-card:hover { box-shadow: 0 8px 32px rgba(249,115,22,.15) !important; transform: translateY(-2px) !important; }
.akpi-val         { color: #071B3B !important; font-weight:800 !important; }
.kpi-orange .akpi-icon { color: #F97316 !important; }
.kpi-green  .akpi-icon { color: #16A34A !important; }
.kpi-blue   .akpi-icon { color: #3B82F6 !important; }
.kpi-red    .akpi-icon { color: #EF4444 !important; }
.kpi-purple .akpi-icon { color: #8B5CF6 !important; }
.kpi-teal   .akpi-icon { color: #0EA5E9 !important; }
.badge-ok    { background: #F0FDF4 !important; color: #16A34A !important; }
.badge-alert { background: #FFF3E6 !important; color: #F97316 !important; }
.badge-info  { background: #EFF6FF !important; color: #3B82F6 !important; }

/* ── TEACHER STAT CARDS ──────────────────────────────────── */
.tstat-card {
  background: #fff !important;
  border-radius: 12px !important;
}
.tstat-card:hover {
  box-shadow: 0 8px 28px rgba(249,115,22,.16) !important;
  transform: translateY(-3px) !important;
}
.tstat-val   { color: #071B3B !important; font-weight:800 !important; }
.tstat-label { color: #6B7280 !important; }
.tstat-orange { border-left: 3px solid #F97316 !important; }
.tstat-orange svg { color: #F97316 !important; }
.tstat-green  { border-left: 3px solid #16A34A !important; }
.tstat-green  svg { color: #16A34A !important; }
.tstat-red    { border-left: 3px solid #EF4444 !important; }
.tstat-teal   { border-left: 3px solid #0EA5E9 !important; }

/* ── PARENT PANEL ────────────────────────────────────────── */
.parent-welcome {
  background: linear-gradient(135deg,#071B3B 0%,#0D2952 50%,#166534 100%) !important;
  position: relative; overflow: hidden;
}
.parent-welcome::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg,#F97316 33%,#fff 33%,#fff 66%,#16A34A 66%);
}
.parent-welcome-title { color: #fff !important; }
.parent-welcome-date  { color: rgba(255,255,255,.75) !important; }
.parent-welcome-badges .parent-alert-chip { background:#FFF3E6 !important; color:#F97316 !important; }
.parent-alert-chip--red { background:#FEF2F2 !important; color:#EF4444 !important; }
.parent-ok-chip { background:#F0FDF4 !important; color:#16A34A !important; }
.parent-child-dot { background: #F97316 !important; }
.parent-child-link:hover {
  background: rgba(249,115,22,.08) !important;
  color: #F97316 !important;
}

/* ── TABLES ADMIN / TEACHER ──────────────────────────────── */
.admin-table thead th,
.data-table thead th {
  background: #071B3B !important;
  color: #fff !important;
}
.admin-table tbody tr:hover,
.data-table tbody tr:hover { background: #FFF8F3 !important; }

/* ── BOUTONS ACTION DASHBOARD ────────────────────────────── */
.btn-sm.btn-primary,
.btn-xs.btn-primary  { background: #F97316 !important; color: #fff !important; border-color: #F97316 !important; }
.btn-sm.btn-primary:hover,
.btn-xs.btn-primary:hover { background: #EA6A0A !important; }
.btn-sm.btn-outline  { border-color: #16A34A !important; color: #16A34A !important; }
.btn-sm.btn-outline:hover { background: #F0FDF4 !important; }

/* ── PODIUM / LEADERBOARD ────────────────────────────────── */
.podium-1st .podium-rank { background: #F97316 !important; }
.podium-2nd .podium-rank { background: #16A34A !important; }
.podium-3rd .podium-rank { background: #EA6A0A !important; }

/* ── INPUTS focus dashboard ──────────────────────────────── */
.dash-main input:focus,
.dash-main textarea:focus,
.dash-main select:focus {
  border-color: #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.12) !important;
}

/* ── STAT CARDS élève (dash-card, stat-card) ─────────────── */
.stat-card:hover { box-shadow: 0 8px 28px rgba(249,115,22,.14) !important; }
.dash-card:hover { box-shadow: 0 8px 28px rgba(249,115,22,.12) !important; }

/* ── QUIZ RESULT PAGE ────────────────────────────────────── */
.result-hero { background: linear-gradient(135deg,#071B3B,#166534) !important; }
.result-score-circle { border-color: #F97316 !important; }
.result-score-num    { color: #F97316 !important; }


/* ══════════════════════════════════════════════════════════════
   NAVBAR — Tous les boutons visibles, brand jamais collé aux liens
══════════════════════════════════════════════════════════════ */

/* nav-actions ne rétrécit jamais, boutons toujours visibles */
.nav-actions {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* nav-links peut rétrécir pour céder la place aux boutons */
.nav-links { flex-shrink: 1 !important; }

/* ── 900px–1100px : logo seul + liens compacts ──────────────── */
@media (min-width: 900px) and (max-width: 1100px) {
  .brand-name  { display: none !important; }
  .brand-logo  { height: 38px !important; }
  .nav-link    { padding: 6px 8px !important; font-size: .8rem !important; }
  .nav-links   { gap: 0 !important; }
  .nav-inner   { gap: 6px !important; }
  .nav-actions { gap: 5px !important; }
  .nav-btn-login { padding: 6px 10px !important; font-size: .79rem !important; }
  .btn-orange  { padding: 6px 12px !important; font-size: .79rem !important; }
  .btn-icon    { padding: 6px !important; }
}

/* ── 1101px–1340px : nom court + liens compacts ─────────────── */
@media (min-width: 1101px) and (max-width: 1340px) {
  .brand-logo  { height: 40px !important; }
  .brand-name  { font-size: 1.1rem !important; }
  .nav-link    { padding: 6px 9px !important; font-size: .82rem !important; }
  .nav-links   { gap: 0 !important; }
  .nav-inner   { gap: 8px !important; }
  .nav-actions { gap: 6px !important; }
  .nav-btn-login { padding: 7px 11px !important; font-size: .8rem !important; }
  .btn-orange  { padding: 7px 13px !important; font-size: .8rem !important; }
  .btn-icon    { padding: 6px !important; }
}

/* ── ≥ 1341px : tailles normales ───────────────────────────── */
@media (min-width: 1341px) {
  .brand-logo  { height: 52px !important; }
  .brand-name  { font-size: 1.45rem !important; display: inline !important; }
  .nav-link    { padding: 7px 13px !important; font-size: .87rem !important; }
  .nav-links   { gap: 3px !important; }
  .nav-inner   { gap: 10px !important; }
  .nav-actions { gap: 8px !important; }
}

/* ── Bouton S'inscrire toujours visible sur desktop ─────────── */
@media (min-width: 900px) {
  .nav-actions .btn-orange { display: inline-flex !important; }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL SEARCH — dropdown temps réel
   ═══════════════════════════════════════════════════════════════ */
.gs-wrap {
  position: relative;
}
.gs-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(7,27,59,.18);
  border: 1px solid rgba(7,27,59,.08);
  z-index: 9999;
  overflow: hidden;
  max-height: 420px;
  overflow-y: auto;
}
.gs-dropdown.gs-open { display: block; }

.gs-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 6px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
  border-top: 1px solid #f1f5f9;
}
.gs-section-label:first-child { border-top: none; }

.gs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--navy, #071B3B);
  cursor: pointer;
  transition: background .15s;
}
.gs-item:hover, .gs-item.gs-active {
  background: #f0f9ff;
}
.gs-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gs-item-icon--course   { background: #eff6ff; color: #3b82f6; }
.gs-item-icon--video    { background: #fef3c7; color: #f59e0b; }
.gs-item-icon--quiz     { background: #f0fdf4; color: #10b981; }
.gs-item-icon--document { background: #fdf4ff; color: #a855f7; }

.gs-item-body { flex: 1; min-width: 0; }
.gs-item-title {
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-item-sub {
  font-size: .74rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-item-badge {
  font-size: .68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  flex-shrink: 0;
}
.gs-item-badge--course   { background: #dbeafe; color: #1d4ed8; }
.gs-item-badge--video    { background: #fef3c7; color: #b45309; }
.gs-item-badge--quiz     { background: #dcfce7; color: #166534; }
.gs-item-badge--document { background: #f3e8ff; color: #7e22ce; }

.gs-empty {
  padding: 24px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: .85rem;
}
.gs-loading {
  padding: 20px 16px;
  text-align: center;
  color: #64748b;
  font-size: .82rem;
}
.gs-footer {
  padding: 10px 16px;
  border-top: 1px solid #f1f5f9;
  text-align: center;
}
.gs-footer a {
  font-size: .78rem;
  color: var(--green, #10B981);
  font-weight: 600;
  text-decoration: none;
}
.gs-footer a:hover { text-decoration: underline; }

/* highlight du terme recherché */
.gs-hl { background: #fef9c3; border-radius: 3px; padding: 0 1px; }

/* Topbar search — extension pour accueillir le dropdown */
.topbar-search.gs-wrap { overflow: visible; }

/* ── Onglets de filtre ────────────────────────────────────────── */
.gs-filters {
  display: flex;
  gap: 6px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #f1f5f9;
  overflow-x: auto;
  scrollbar-width: none;
}
.gs-filters::-webkit-scrollbar { display: none; }
.gs-filter-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 11px;
  border-radius: 99px;
  border: 1.5px solid #e2e8f0;
  background: transparent;
  font-size: .72rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
  transition: background .13s, color .13s, border-color .13s;
  white-space: nowrap;
  line-height: 1.6;
}
.gs-filter-btn:hover { background: #f1f5f9; color: #1e293b; }
.gs-filter-btn.active {
  background: #071B3B;
  color: #fff;
  border-color: #071B3B;
}
.gs-filter-count { opacity: .65; font-weight: 500; }

/* ── Recherches récentes ──────────────────────────────────────── */
.gs-recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 4px;
}
.gs-recent-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
}
.gs-recent-clear {
  font-size: .72rem;
  font-weight: 600;
  color: #10B981;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background .12s;
}
.gs-recent-clear:hover { background: #f0fdf4; }
.gs-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: #374151;
  cursor: pointer;
  font-size: .84rem;
  transition: background .12s;
  user-select: none;
}
.gs-recent-item:hover { background: #f8fafc; }
.gs-recent-icon { color: #94a3b8; flex-shrink: 0; display: flex; }

/* ── Shimmer skeleton ─────────────────────────────────────────── */
.gs-shimmer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
}
.gs-shimmer-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #f1f5f9 25%, #e8edf3 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: gs-shimmer .9s infinite linear;
}
.gs-shimmer-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.gs-shimmer-line {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e8edf3 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: gs-shimmer .9s infinite linear;
  width: 72%;
}
.gs-shimmer-line--short { width: 42%; }
@keyframes gs-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════════════════════
   CORRECTIFS MOBILE GLOBAUX — DASHBOARD (admin / élève / parent)
   Corrige TOUS les débordements horizontaux sur mobile.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TABLES : scroll horizontal sur tous les écrans ──────── */
/* Toutes les tables du dashboard doivent pouvoir scroller */
.atable-wrap,
.atable-scroll,
.admin-table {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.atable,
.atable-wrap table,
.admin-table table {
  min-width: 600px;
  width: 100%;
}
/* Tables enseignant */
.tgrades-wrap,
.tattend-wrap,
.teacher-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tgrades-table,
.tattend-table,
.teacher-table {
  min-width: 560px;
  width: 100%;
}

@media (max-width: 768px) {
  /* Toutes les tables inline dans le dashboard */
  .dash-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ── 2. GRILLES KPI — correctifs breakpoints manquants ─────── */
@media (max-width: 600px) {
  /* Admin principal */
  .akpi-grid      { grid-template-columns: repeat(2,1fr) !important; }
  .quick-links-grid { grid-template-columns: repeat(2,1fr) !important; }
  /* Analytics */
  .akpi-grid3     { grid-template-columns: repeat(2,1fr) !important; }
  .akpi-row       { grid-template-columns: repeat(2,1fr) !important; }
  /* Finance / paiements */
  .akpi-grid4     { grid-template-columns: repeat(2,1fr) !important; }
  .pay-kpi        { grid-template-columns: repeat(2,1fr) !important; }
  /* Rapports */
  .export-grid    { grid-template-columns: repeat(2,1fr) !important; }
  .kpi-stat-row   { grid-template-columns: repeat(2,1fr) !important; }
  /* Rémunérations / placements */
  .rem-kpi        { grid-template-columns: repeat(2,1fr) !important; }
  .apl-kpi        { grid-template-columns: repeat(2,1fr) !important; }
  /* Boutique / listings enseignants */
  .ash-kpis       { grid-template-columns: repeat(2,1fr) !important; }
  .atl-kpis       { grid-template-columns: repeat(2,1fr) !important; }
  /* Contact filter */
  .acf-kpis       { grid-template-columns: repeat(2,1fr) !important; }
  /* Grilles 2 colonnes admin sans breakpoint */
  .admin-grid-2,
  .admin-grid-3   { grid-template-columns: 1fr !important; }
  .admin-charts-grid { grid-template-columns: 1fr !important; }
  .acf-grid       { grid-template-columns: 1fr !important; }
  /* Emails / notifications */
  .akpi-grid3     { grid-template-columns: repeat(2,1fr) !important; }
}

@media (max-width: 400px) {
  /* Tout en 1 colonne sur très petit écran */
  .akpi-grid,
  .akpi-grid3,
  .akpi-grid4,
  .akpi-row,
  .pay-kpi,
  .export-grid,
  .kpi-stat-row,
  .rem-kpi,
  .apl-kpi,
  .ash-kpis,
  .atl-kpis,
  .acf-kpis,
  .quick-links-grid { grid-template-columns: 1fr !important; }
}

/* ── 3. GRILLES INLINE (modaux / formulaires) ───────────────── */
/* Ciblage des grilles 1fr 1fr dans les modaux admin sur mobile */
@media (max-width: 600px) {
  .modal-overlay .modal > div[style*="grid-template-columns"],
  .modal-overlay .modal [style*="grid-template-columns: 1fr 1fr"],
  .modal-overlay .modal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Modaux admin génériques */
  [class*="modal"] [style*="grid-template-columns: 1fr 1fr"],
  [class*="modal"] [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Formulaires avec frow */
  .frow { grid-template-columns: 1fr !important; }
  /* Parent services form row */
  .ps-form-row { grid-template-columns: 1fr !important; }
}

/* ── 4. BARRE DE FILTRES ADMIN ──────────────────────────────── */
@media (max-width: 768px) {
  .afilter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .afilter-bar input,
  .afilter-bar select,
  .afilter-bar button,
  .afilter-bar .afilter-search {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .afilter-bar .btn,
  .afilter-bar button[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── 5. TOPBAR DASHBOARD — overflow protection ──────────────── */
@media (max-width: 640px) {
  .dash-topbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .dash-topbar > * { min-width: 0; }
  /* Recherche globale dans la topbar */
  .gs-wrap { flex: 1; min-width: 0; max-width: 100%; }
}

/* ── 6. TOPBAR HERO ADMIN — responsive ──────────────────────── */
@media (max-width: 640px) {
  .admin-hero,
  .dash-welcome {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .admin-hero-stats { display: none !important; }
  .dash-welcome h1 { font-size: 1.1rem !important; }
}

/* ── 7. CARTES STAT DASHBOARD ───────────────────────────────── */
@media (max-width: 480px) {
  /* Stats élève */
  .student-stats,
  .dash-stats-grid {
    grid-template-columns: repeat(2,1fr) !important;
  }
  .stat-card { padding: 12px 10px !important; }
  .stat-value { font-size: 1.3rem !important; }
  .stat-label { font-size: .72rem !important; }
}

/* ── 8. BADGES — barre XP min-width ────────────────────────── */
@media (max-width: 600px) {
  .xp-bar-wrap { min-width: 0 !important; flex: 1; }
  .badge-grid {
    grid-template-columns: repeat(2,1fr) !important;
  }
}

/* ── 9. LEADERBOARD — tableau podium ───────────────────────── */
@media (max-width: 640px) {
  .leaderboard-table { display: block; overflow-x: auto; }
  .lb-podium { gap: 8px !important; }
  .lb-podium-item { padding: 12px 8px !important; }
  .lb-rank-num { font-size: 1.8rem !important; }
}

/* ── 10. MESSAGERIE — panneaux côte à côte ──────────────────── */
@media (max-width: 640px) {
  .msg-layout {
    flex-direction: column !important;
    height: auto !important;
  }
  .msg-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    height: 240px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .msg-chat {
    width: 100% !important;
    height: 60vh !important;
  }
}

/* ── 11. ENSEIGNANT — grilles et tableaux ───────────────────── */
@media (max-width: 640px) {
  .teacher-kpi-grid,
  .tstat-grid {
    grid-template-columns: repeat(2,1fr) !important;
  }
  .tform-grid { grid-template-columns: 1fr !important; }
  .teacher-courses-grid { grid-template-columns: 1fr !important; }
  .teacher-stats-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 400px) {
  .teacher-kpi-grid,
  .tstat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 12. PARENT — layout et formulaires ────────────────────── */
@media (max-width: 640px) {
  .ps-layout { grid-template-columns: 1fr !important; }
  .ps-kpi    { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 400px) {
  .ps-kpi { grid-template-columns: 1fr !important; }
}

/* ── 13. BOUTONS D'ACTION dans les tableaux ─────────────────── */
@media (max-width: 640px) {
  /* Actions dans les cellules de tableau */
  td .btn, td a.btn {
    padding: 4px 8px !important;
    font-size: .72rem !important;
    white-space: nowrap;
  }
}

/* ── 14. MODAUX — pleine largeur sur mobile ──────────────────── */
@media (max-width: 600px) {
  .modal-overlay {
    padding: 12px !important;
    align-items: flex-end !important;
  }
  .modal-overlay .modal,
  [class*="modal-content"],
  [class*="modal-box"] {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 16px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}

/* ── 15. INPUTS & SELECTS — pas de débordement ──────────────── */
@media (max-width: 640px) {
  .dash-content input[type="text"],
  .dash-content input[type="email"],
  .dash-content input[type="number"],
  .dash-content input[type="date"],
  .dash-content input[type="month"],
  .dash-content select,
  .dash-content textarea {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ── 16. GÉNÉRAL — protection anti-overflow globale ─────────── */
.dash-content {
  overflow-x: hidden;
  min-width: 0;
}
.dash-content > * {
  max-width: 100%;
  box-sizing: border-box;
}
/* Toutes les cartes dashboard */
.dash-card,
.admin-card,
.kpi-card,
.stat-card {
  min-width: 0;
  overflow: hidden;
}
/* Textes longs qui débordent */
.dash-content td,
.dash-content th {
  word-break: break-word;
  overflow-wrap: break-word;
}



/* ═══════════════════════════════════════════════════════════════
   CORRECTIFS MOBILE — DEUXIÈME PASSE (exhaustive)
   Couvre tous les cas restants après analyse complète A→Z
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOUTES LES TABLES — scroll intégré sur l'élément ────── */
/* Technique : display:block sur la table elle-même (comme Bootstrap) */
.atable,
.tgrades-table,
.txn-table,
.wh-table,
.leaderboard-table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: nowrap;
}
/* Rétablir l'affichage interne table pour les lignes/cellules */
.atable thead, .atable tbody, .atable tfoot,
.tgrades-table thead, .tgrades-table tbody, .tgrades-table tfoot,
.txn-table thead, .txn-table tbody, .txn-table tfoot,
.wh-table thead, .wh-table tbody, .wh-table tfoot,
.leaderboard-table thead, .leaderboard-table tbody, .leaderboard-table tfoot {
  display: table;
  width: 100%;
}
.atable tr, .tgrades-table tr, .txn-table tr,
.wh-table tr, .leaderboard-table tr { display: table-row; }
.atable th, .atable td,
.tgrades-table th, .tgrades-table td,
.txn-table th, .txn-table td,
.wh-table th, .wh-table td,
.leaderboard-table th, .leaderboard-table td { display: table-cell; }

/* Tables sans classe dans le dashboard — tous les écrans */
.dash-content table:not(.atable):not(.tgrades-table):not(.txn-table):not(.wh-table):not(.leaderboard-table):not([class*="skip-"]) {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── 2. GRILLES CSS SANS BREAKPOINTS — admin_config / emails / notifications ── */
@media (max-width: 768px) {
  /* admin_config.php */
  .admin-grid-2 { grid-template-columns: 1fr !important; }
  /* admin_emails.php — .akpi-grid3 a besoin d'un 480px */
  .akpi-grid3 { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  .akpi-grid3 { grid-template-columns: 1fr !important; }
  .akpi-grid  { grid-template-columns: 1fr !important; }
  .akpi-grid4 { grid-template-columns: 1fr !important; }
  .quick-links-grid { grid-template-columns: repeat(2,1fr) !important; }
  .atl-kpis   { grid-template-columns: 1fr !important; }
  .ash-kpis   { grid-template-columns: 1fr !important; }
  .rem-kpi    { grid-template-columns: 1fr !important; }
  .apl-kpi    { grid-template-columns: 1fr !important; }
  .pay-kpi    { grid-template-columns: 1fr !important; }
  .export-grid{ grid-template-columns: 1fr !important; }
  .kpi-stat-row { grid-template-columns: 1fr !important; }
}

/* ── 3. GRILLES INLINE — override [style] avec !important ───── */
/* CSS !important > inline style (spec CSS2.1 §6.4.2) */
@media (max-width: 600px) {
  /* Toutes les grilles 1fr 1fr inline */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr auto auto"],
  [style*="grid-template-columns: 1fr auto auto"] {
    grid-template-columns: 1fr !important;
  }
  /* Grilles 2fr 1fr / 3fr 2fr / 320px 1fr / 380px 1fr */
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns: 3fr 2fr"],
  [style*="grid-template-columns:320px"],
  [style*="grid-template-columns:380px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 4. CALENDRIER 7 COLONNES ────────────────────────────────── */
@media (max-width: 640px) {
  #calendarRoot,
  #calendarContainer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Le grid 7col généré en JS */
  [style*="grid-template-columns:repeat(7,1fr)"],
  [style*="grid-template-columns: repeat(7, 1fr)"] {
    min-width: 560px;
  }
}

/* ── 5. MODAUX .amodal — taille et padding mobile ────────────── */
@media (max-width: 600px) {
  .amodal {
    max-width: 100% !important;
    width: calc(100vw - 24px) !important;
    padding: 18px 14px !important;
    border-radius: 16px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
  }
  .amodal-overlay.show {
    align-items: center !important;
    padding: 12px !important;
  }
  /* Grilles inline DANS les modaux */
  .amodal [style*="grid-template-columns"],
  .modal [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 6. .admin-table dans admin.php — wrapper scroll ─────────── */
.admin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.admin-table thead, .admin-table tbody, .admin-table tfoot {
  display: table; width: 100%;
}
.admin-table tr { display: table-row; }
.admin-table th, .admin-table td { display: table-cell; }

/* ── 7. .atable-wrap — forcer overflow-x scroll (pas hidden) ── */
.atable-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* ── 8. TEACHER — grilles vidéos 1fr 1fr ─────────────────────── */
@media (max-width: 600px) {
  /* teacher.php vidéos grid */
  .teacher-videos-grid,
  .recent-videos-grid {
    grid-template-columns: 1fr !important;
  }
  /* teacher_student_detail.php */
  .student-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 9. ENSEIGNANT — exam_edit flex rows ─────────────────────── */
@media (max-width: 600px) {
  .tform-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .tform-row .tform-input,
  .tform-row select,
  .tform-row input {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
}

/* ── 10. ENSEIGNANT GAINS — .tg-kpi 1col sur 400px ──────────── */
@media (max-width: 400px) {
  .tg-kpi { grid-template-columns: 1fr !important; }
}

/* ── 11. PARTENAIRES — grille stats inline ───────────────────── */
@media (max-width: 600px) {
  .partner-stats-grid {
    flex-wrap: wrap !important;
  }
  .partner-stats-grid > [style*="min-width:90px"],
  .partner-stats-grid > [style*="min-width: 90px"] {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 6px) !important;
  }
}

/* ── 12. .cfg-input — pas de min-width sur mobile ────────────── */
@media (max-width: 600px) {
  .cfg-input {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── 13. BADGES — xp-bar-wrap inline min-width ──────────────── */
[style*="min-width:200px"].xp-bar-wrap,
.xp-bar-wrap[style*="min-width: 200px"] {
  min-width: 0 !important;
  flex: 1 !important;
}

/* ── 14. AFILTER-SEARCH min-width:180px → 0 sur mobile ──────── */
@media (max-width: 768px) {
  .afilter-search[style*="min-width"],
  [class*="afilter"] [style*="min-width"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── 15. INPUT width fixe dans filtres (ex: width:120px) ──────── */
@media (max-width: 600px) {
  .dash-content input[style*="width:120px"],
  .dash-content input[style*="width: 120px"],
  .dash-content select[style*="width:120px"],
  .dash-content select[style*="width: 120px"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ── 16. SUPPORT — div min-width:120px ───────────────────────── */
@media (max-width: 600px) {
  [style*="min-width:120px"],
  [style*="min-width: 120px"] {
    min-width: 0 !important;
  }
}

/* ── 17. ADMIN LOGS — td max-width:250px ─────────────────────── */
@media (max-width: 600px) {
  .atable td[style*="max-width:250px"],
  .atable td[style*="max-width: 250px"] {
    max-width: 120px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── 18. ADMIN HERO — padding mobile ─────────────────────────── */
@media (max-width: 480px) {
  .admin-hero { padding: 16px 16px !important; }
  .admin-hero h1 { font-size: 1.1rem !important; }
  .akpi-card { padding: 14px 12px !important; }
  .akpi-card .akpi-value { font-size: 1.4rem !important; }
}

/* ── 19. QUICK LINKS — 2 colonnes sur mobile ─────────────────── */
@media (max-width: 480px) {
  .quick-links-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .qlink { padding: 12px 6px !important; font-size: .72rem !important; }
}

/* ── 20. WHITE-SPACE sur toutes les tables — textes longs ─────── */
.atable td, .atable th,
.tgrades-table td, .tgrades-table th,
.txn-table td, .txn-table th,
.wh-table td, .wh-table th,
.leaderboard-table td, .leaderboard-table th,
.admin-table td, .admin-table th {
  white-space: nowrap;
}
/* Mais certaines colonnes descriptives peuvent wrapper */
.atable td.wrap-cell,
.tgrades-table td.wrap-cell { white-space: normal !important; }


/* ═══════════════════════════════════════════════════════════════
   PWA — PUSH NOTIFICATIONS UI  (v4.4)
   ═══════════════════════════════════════════════════════════════ */

/* ── Bouton push dans la navbar ── */
.push-bell-btn {
  position: relative;
  color: var(--text-muted);
  transition: color .2s, transform .2s;
}
.push-bell-btn:hover { color: var(--green); transform: scale(1.08); }
.push-bell-btn.push-subscribed { color: var(--green); }
.push-bell-btn.push-subscribed svg { fill: rgba(16,185,129,.18); }

/* Point d'état push (vert = actif, gris = inactif) */
.push-dot {
  position: absolute;
  top: 3px; right: 3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gray-300);
  border: 1.5px solid #fff;
  display: none;
}
.push-subscribed .push-dot { display: block; background: var(--green); }

/* ── Banner d'invitation push ── */
.push-banner {
  position: fixed;
  bottom: 80px; left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--navy);
  color: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 8px 32px rgba(7,27,59,.35);
  max-width: 520px;
  width: calc(100% - 32px);
  animation: pushBannerIn .35s ease;
}
@keyframes pushBannerIn {
  from { opacity:0; transform: translateX(-50%) translateY(24px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}
.push-banner-icon { font-size: 1.5rem; flex-shrink: 0; }
.push-banner-text { flex: 1; font-size: .875rem; line-height: 1.4; }
.push-banner-text strong { display: block; margin-bottom: 2px; font-weight: 700; }
.push-banner-close {
  background: none; border: none; color: rgba(255,255,255,.6);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px;
  flex-shrink: 0;
  transition: color .15s;
}
.push-banner-close:hover { color: #fff; }

/* ── Toast push ── */
.push-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 9999;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 500;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  max-width: 380px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s, transform .35s;
}
.push-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.push-toast--success { background: var(--green); }
.push-toast--warn    { background: var(--orange); color: var(--navy); }
.push-toast--error   { background: #ef4444; }
.push-toast--info    { background: var(--navy); }

/* ── Mobile ── */
@media (max-width: 540px) {
  .push-banner { flex-wrap: wrap; bottom: 72px; gap: 8px; }
  .push-banner-text { font-size: .82rem; }
  .push-banner .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH BAR — améliorations visibilité & UX (v4.4)
   ═══════════════════════════════════════════════════════════════ */

/* Raccourci clavier affiché sur la loupe desktop */
@media (min-width: 1024px) {
  #searchToggle::after {
    content: '/';
    position: absolute;
    right: -18px; top: 50%;
    transform: translateY(-50%);
    font-size: .65rem;
    color: var(--text-muted);
    background: var(--gray-100);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 4px;
    pointer-events: none;
    display: none;
  }
}

/* Navbar search panel — transition plus fluide */
.nav-search {
  display: none;
  border-top: 2px solid var(--green);
  background: #fff;
  box-shadow: 0 6px 20px rgba(7,27,59,.1);
  animation: searchSlideDown .22s ease;
}
.nav-search.open { display: block; }
@keyframes searchSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Agrandir légèrement la zone de saisie */
.search-bar-nav {
  background: var(--gray-50, #f9fafb);
  border: 2px solid var(--border);
  border-radius: var(--radius-full);
  transition: border-color .2s, box-shadow .2s;
  padding: 10px 18px;
}
.search-bar-nav:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.search-bar-nav input { font-size: .97rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTION GLOBALE MOBILE v5.0 — Mentora
   Élimine TOUS les débordements horizontaux sur smartphone (320-768px)
   Breakpoints : 320px / 375px / 480px / 640px / 768px / 1024px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. RESET UNIVERSEL ANTI-DÉBORDEMENT ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }

/* Médias fluides */
img, video, iframe, canvas, embed, object {
  max-width: 100%;
  height: auto;
}
iframe { border: 0; }

/* Texte sans débordement */
p, h1, h2, h3, h4, h5, h6, li, td, th, span, label, a {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ── 2. OVERRIDE INLINE GRIDS — Sélecteurs d'attributs ───────────────── */
@media (max-width: 640px) {
  /* 2-colonnes → 1 colonne */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 3-colonnes → 1 colonne */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  /* Grilles asymétriques → 1 colonne */
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns: 3fr 2fr"],
  [style*="grid-template-columns:1fr auto auto"],
  [style*="grid-template-columns: 1fr auto auto"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:280px"],
  [style*="grid-template-columns:300px"],
  [style*="grid-template-columns:320px"],
  [style*="grid-template-columns:340px"],
  [style*="grid-template-columns:380px"] {
    grid-template-columns: 1fr !important;
  }
  /* Inputs larges fixes */
  [style*="width:120px"], [style*="width: 120px"],
  [style*="width:140px"], [style*="width: 140px"],
  [style*="width:160px"], [style*="width: 160px"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Grille 7 colonnes (calendrier) */
@media (max-width: 640px) {
  [style*="repeat(7,1fr)"],
  [style*="repeat(7, 1fr)"] {
    min-width: 560px;
  }
  #calendarRoot, #calendarContainer, .cal-grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
}

/* ── 3. FORMULAIRES GLOBAUX ────────────────────────────────────────────── */
@media (max-width: 768px) {
  form { width: 100%; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]):not(.otp-digit),
  select, textarea, .form-control, .form-input, .form-select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .form-row, .frow, .tform-grid, .tform-grid-2, .tform-grid-3 {
    grid-template-columns: 1fr !important;
    flex-direction: column;
  }
  /* #047 : :where() = spécificité nulle → toute classe de composant qui définit sa propre
     largeur (bouton rond de recherche, bouton d'envoi, petits boutons…) l'emporte.
     Avant, button[type="submit"] écrasait ces tailles et étirait les boutons à 100 %. */
  :where(button[type="submit"]:not(.btn-sm):not(.btn-xs):not(.btn-icon),
         input[type="submit"],
         .btn:not(.btn-sm):not(.btn-xs):not(.btn-icon)) {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ── 4. TABLEAUX GLOBAUX ───────────────────────────────────────────────── */
/* Tous les tableaux → scroll horizontal contenu */
/* #048 : les conteneurs défilants gardent le comportement partout ; en revanche les <table> brutes
   ne passent en display:block (défilement) que sur mobile : sur ordinateur, un tableau en
   display:block ne remplit plus la largeur et ses colonnes se tassent à gauche. */
.atable-wrap, .table-wrap, .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  display: block;
  width: 100%;
}
@media (max-width: 768px) {
  .dash-content table:not(.no-scroll) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block;
    width: 100%;
  }
}

@media (max-width: 768px) {
  /* Tables avec classe explicite */
  .atable, .admin-table, .tgrades-table, .txn-table,
  .wh-table, .leaderboard-table, .timetable-table,
  table.dash-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  /* Tables brutes dans .dash-content */
  .dash-content > table,
  .dash-content section table,
  .dash-card table,
  .acard table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }
  /* Cellules compactes */
  .atable td, .atable th,
  .admin-table td, .admin-table th {
    padding: 8px 10px !important;
    font-size: .8rem !important;
  }
  /* Assure que thead/tbody restent table-* */
  .atable thead, .atable tbody, .atable tfoot,
  .atable tr, .atable td, .atable th {
    display: revert;
  }
}

/* ── 5. IMAGES & VIDÉOS ────────────────────────────────────────────────── */
.course-thumb img, .video-thumb img, .doc-thumb img,
.card-img, .card-image, img.cover, .video-embed,
.video-embed iframe {
  max-width: 100%;
  width: 100%;
  height: auto;
}
/* Rétablir height:100% pour les thumbs qui utilisent object-fit:cover */
.video-thumb img { height: 100% !important; object-fit: cover !important; }
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

/* ── 6. SIDEBAR & TOPBAR DASHBOARD ────────────────────────────────────── */
@media (max-width: 960px) {
  .dash-layout { grid-template-columns: 1fr !important; }
  .sidebar { transform: translateX(-100%); position: fixed; z-index: 2000; height: 100vh; }
  .sidebar.open { transform: translateX(0); }
  .dash-topbar { padding: 10px 14px; gap: 8px; flex-wrap: nowrap; }
  .dash-content { padding: 14px 12px; min-width: 0; }
}
@media (max-width: 640px) {
  .dash-topbar { padding: 8px 10px; }
  .dash-content { padding: 12px 10px; }
  .topbar-search { display: none; }
  .user-name, .user-tag { display: none; }
  .topbar-user { padding: 4px 8px; gap: 0; }
  .topbar-user .sidebar-avatar { width: 30px; height: 30px; font-size: .75rem; }
}

/* ── 7. PANEL ÉLÈVE ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dash-grid { grid-template-columns: 1fr !important; }
  .dash-stats-row, .stats-row { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .dash-welcome h1 { font-size: 1.2rem; }
  .xp-hero { flex-direction: column; gap: 12px; text-align: center; }
  .xp-bar { width: 100%; }
  .podium { gap: 8px; }
  .podium-item { min-width: 80px; }
  .leaderboard-table { display: block; overflow-x: auto; }
}
@media (max-width: 480px) {
  .dash-stats-row, .stats-row { grid-template-columns: 1fr !important; }
  .dash-card { padding: 14px 12px; }
  .quiz-grid, .course-grid, .video-grid { grid-template-columns: 1fr !important; }
  .quiz-options { flex-direction: column; }
  .quiz-option { width: 100%; min-height: 52px; }
  .forum-item, .forum-post { padding: 12px; }
  .forum-meta { flex-wrap: wrap; gap: 4px; font-size: .75rem; }
  .badges-full-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .badge-card { padding: 14px 10px; }
  .certificate-card { padding: 20px 12px; }
  .tt-day { min-width: 120px; }
  .timetable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .daily-objective { padding: 14px 12px; }
  .msg-list { min-height: 0; }
}

/* ── 8. PANEL PARENT ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .parent-page-title { font-size: 1.2rem !important; }
  .parent-welcome-banner { flex-direction: column !important; gap: 10px; }
  .parent-child-profile-header { padding: 16px 12px !important; }
  .parent-child-profile-stats { grid-template-columns: 1fr 1fr !important; }
  .parent-pending-item { flex-wrap: wrap !important; gap: 8px; }
  .parent-pending-right { flex-direction: row !important; flex-wrap: wrap; }
  .parent-cal-event { flex-wrap: wrap !important; }
  .parent-grade-item { flex-wrap: wrap !important; }
  .parent-hw-full-item { flex-wrap: wrap !important; }
  .parent-tabs { overflow-x: auto; white-space: nowrap; gap: 0; }
  .parent-tab { flex-shrink: 0; }
}
@media (max-width: 480px) {
  .parent-child-profile-stats { grid-template-columns: 1fr 1fr !important; }
  .parent-subject-row { flex-direction: column !important; }
  /* Tables notes/bulletins → 3 colonnes max */
  .parent-notes-table td:nth-child(n+4),
  .parent-notes-table th:nth-child(n+4) { display: none !important; }
  .parent-absences-table td:nth-child(n+4),
  .parent-absences-table th:nth-child(n+4) { display: none !important; }
  .parent-payments-table td:nth-child(n+3),
  .parent-payments-table th:nth-child(n+3) { display: none !important; }
  .parent-cal-event-type { display: none !important; }
  .ps-form-row { grid-template-columns: 1fr !important; }
  .ps-kpi { grid-template-columns: 1fr 1fr !important; }
  .ps-hero { padding: 16px 12px !important; }
}

/* ── 9. PANEL ENSEIGNANT ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .teacher-hero, .teacher-dash-hero { flex-direction: column !important; gap: 12px; text-align: center; }
  .teacher-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .tcard { padding: 14px 12px !important; }
  .tlist-item { padding: 10px 12px !important; flex-wrap: wrap; gap: 8px; }
  .tlist-actions { flex-direction: row !important; flex-wrap: wrap; }
  .ttabs { overflow-x: auto; white-space: nowrap; gap: 0; }
  .ttab { flex-shrink: 0; }
  .tearnings-layout { grid-template-columns: 1fr !important; }
  .tearnings-sidebar { position: static !important; }
  .tstats-2col { grid-template-columns: 1fr !important; }
  .tvideo-row { flex-direction: column !important; }
  .tvideo-thumb { width: 100% !important; height: 140px !important; }
  .tstudent-card { flex-direction: column !important; }
  .tcal-event-grid { grid-template-columns: 1fr !important; }
  .texam-edit-grid { grid-template-columns: 1fr !important; }
  .g-2col { grid-template-columns: 1fr !important; }
  .teacher-grades-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .teacher-stats-grid { grid-template-columns: 1fr !important; }
  .tform-grid, .tform-grid-2, .tform-grid-3 { grid-template-columns: 1fr !important; }
  .tcard { padding: 12px 10px !important; }
  .tlist-item { padding: 10px !important; }
  .teacher-live-grid { grid-template-columns: 1fr !important; }
  /* Table notes enseignant → scroll */
  .tgrades-table { display: block; overflow-x: auto; }
}

/* ── 10. PANEL ADMIN ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Heroes admin */
  .apage-hero, .admin-hero, .pay-hero, .rem-hero, .admin-header {
    flex-direction: column !important;
    gap: 12px;
    align-items: flex-start !important;
  }
  .apage-hero h1, .admin-hero h1 { font-size: 1.2rem !important; }
  .apage-hero .btn, .admin-hero .btn { width: 100%; text-align: center; }

  /* KPI grids */
  .akpi-grid, .akpi-grid3 { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .akpi-grid4 { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .akpi-row { grid-template-columns: 1fr 1fr 1fr !important; }
  .pay-kpi, .rem-kpi, .atl-kpis, .ash-kpis { grid-template-columns: 1fr 1fr !important; }

  /* Content grids */
  .admin-grid-2, .admin-grid-3, .admin-charts-grid { grid-template-columns: 1fr !important; }
  .quick-links-grid { grid-template-columns: 1fr 1fr !important; }

  /* Tabs et filtres */
  .atab-bar { overflow-x: auto; white-space: nowrap; gap: 0; display: flex; }
  .atab { flex-shrink: 0; }
  .afilter-bar { flex-direction: column !important; gap: 8px; }
  .afilter-bar input, .afilter-bar select, .afilter-bar button { width: 100% !important; }
  .afilter-search { width: 100% !important; }

  /* Toutes les tables admin → scroll */
  .atable-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .atable, .admin-table, .txn-table, .wh-table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* YengaPay / finances */
  .yp-filters { flex-direction: column !important; gap: 8px; }
  .yp-filters input, .yp-filters select { width: 100% !important; }
  .pay-section-header, .rem-section-header { flex-direction: column !important; gap: 8px; }

  /* Schools / Partners */
  .schools-grid { grid-template-columns: 1fr 1fr !important; }
  .cfg-item { flex-direction: column !important; }
  .cfg-input { width: 100% !important; }

  /* Config sécurité */
  .akey-code { word-break: break-all !important; white-space: pre-wrap !important; }
  .role-stat-card { padding: 10px 8px !important; }
  .rate-card { padding: 14px 12px !important; }

  /* Analytics */
  .admin-charts-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .akpi-grid, .akpi-grid3, .akpi-grid4 { grid-template-columns: 1fr !important; }
  .akpi-row { grid-template-columns: 1fr 1fr !important; }
  .pay-kpi, .rem-kpi, .atl-kpis, .ash-kpis { grid-template-columns: 1fr 1fr !important; }
  .quick-links-grid { grid-template-columns: 1fr 1fr !important; }
  .schools-grid { grid-template-columns: 1fr !important; }
  .admin-charts-grid { grid-template-columns: 1fr !important; }
  /* Modaux → bottom-sheet */
  .amodal {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 16px 30px !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  .amodal .frow { grid-template-columns: 1fr !important; }
  /* Stats admin compact */
  .yp-stat, .akpi-sm-val { font-size: 1.1rem !important; }
}
@media (max-width: 375px) {
  .akpi-grid, .akpi-row, .pay-kpi, .rem-kpi { gap: 6px; }
  .atab { font-size: .75rem; padding: 6px 10px; }
}

/* ── 11. MODAUX GLOBAUX ────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box, .modal-content, .amodal, .fmodal {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 14px 28px !important;
    max-height: 88vh;
    overflow-y: auto;
  }
}

/* ── 12. MESSAGERIE ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .msg-layout { flex-direction: column !important; height: auto !important; }
  .msg-sidebar { width: 100% !important; max-height: 240px; overflow-y: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .msg-body { height: auto !important; min-height: 300px; }
  .msg-messages { max-height: 320px; }
  .msg-bubble { max-width: 90% !important; }
}

/* ── 13. WALLET / PAIEMENTS (élève & enseignant) ──────────────────────── */
@media (max-width: 640px) {
  .wallet-header { flex-direction: column !important; gap: 12px; }
  .wallet-kpi { grid-template-columns: 1fr 1fr !important; }
  .wallet-tabs { overflow-x: auto; white-space: nowrap; }
  .wallet-tab { flex-shrink: 0; }
  .wallet-table { display: block; overflow-x: auto; }
  .payout-form { flex-direction: column !important; }
  .payout-form input { width: 100% !important; }
}

/* ── 14. QUIZ & COURS ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .quiz-header { flex-direction: column !important; gap: 10px; }
  .quiz-progress { width: 100%; }
  .quiz-timer { align-self: flex-end; }
  .course-grid, .courses-grid { grid-template-columns: 1fr !important; }
  .course-card { width: 100%; }
  .course-hero { min-height: 180px; }
  .course-sections { padding: 0; }
}

/* ── 15. VIDÉOS ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .video-card { width: 100%; }
  .video-thumb { aspect-ratio: 16/9; height: auto !important; }
  .video-player-wrap { padding-bottom: 56.25%; position: relative; height: 0; overflow: hidden; }
  .video-player-wrap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
  /* Titres & stats compacts sur mobile 3 col */
  .video-body { padding: 6px 8px 8px; }
  .video-title { font-size: .72rem; line-height: 1.3; margin: 2px 0 4px; }
  .course-level { font-size: .6rem; }
  .video-stats { font-size: .6rem; gap: 4px; }
  .video-duration { font-size: .58rem; padding: 1px 4px; }
}
/* Placeholder coloré quand la miniature YouTube ne charge pas */
.vtc-thumb { position: relative; }
.vtc-thumb .vtc-subject-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; pointer-events: none;
  opacity: 1; transition: opacity .2s;
}
.vtc-thumb:not(.thumb-no-img) .vtc-subject-icon { opacity: 0; }
.vtc-thumb.thumb-no-img .vtc-subject-icon { opacity: 1; }
.vtc-thumb.thumb-no-img .video-play { background: rgba(0,0,0,.15); }
@media (max-width: 640px) {
  .vtc-thumb .vtc-subject-icon { font-size: 1.2rem; }
}

/* ── 16. FORUM ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .forum-layout { grid-template-columns: 1fr !important; }
  .forum-sidebar { display: none; }
  .forum-post-header { flex-wrap: wrap !important; gap: 8px; }
  .forum-actions { flex-wrap: wrap; gap: 6px; }
  .forum-reply-form textarea { width: 100%; }
}

/* ── 17. PAGES PAIEMENT YENGAPAY ───────────────────────────────────────── */
@media (max-width: 640px) {
  .checkout-layout { flex-direction: column !important; }
  .checkout-summary { width: 100% !important; }
  .payment-methods { grid-template-columns: 1fr 1fr !important; }
  .otp-group { flex-direction: column !important; gap: 8px; }
  .otp-group input { width: 100% !important; }
}

/* ── 18. BOUTIQUE / SHOP ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .shop-grid { grid-template-columns: 1fr 1fr !important; }
  .shop-product-card { min-width: 0; }
}
@media (max-width: 375px) {
  .shop-grid { grid-template-columns: 1fr !important; }
}

/* ── 19. NAVBAR PUBLIQUE ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions .btn-outline { display: none; }
}
@media (max-width: 640px) {
  .hero-title { font-size: 1.75rem !important; }
  .hero-sub { font-size: 1rem !important; }
  .hero-section { padding: 40px 16px 30px !important; }
  .hero-btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-btns .btn { text-align: center; width: 100%; }
  .section-title { font-size: 1.3rem !important; }
}

/* ── 20. CORRECTIONS SPÉCIFIQUES PETITS ÉCRANS (375px / 320px) ──────────── */
@media (max-width: 375px) {
  body { font-size: 14px; }
  .dash-content { padding: 10px 8px; }
  .dash-card { padding: 12px 10px; }
  .sidebar-avatar { width: 32px !important; height: 32px !important; font-size: .75rem !important; }
  .dash-topbar { padding: 6px 8px; }
  .apage-hero h1 { font-size: 1.1rem !important; }
  .akpi-grid, .akpi-grid3, .akpi-grid4, .akpi-row,
  .pay-kpi, .rem-kpi { gap: 6px; }
  button, .btn { font-size: .82rem; padding: 8px 12px; }
}
@media (max-width: 320px) {
  .sidebar { width: 260px !important; }
  .dash-content { padding: 8px 6px; }
  .dash-card { padding: 10px 8px; }
  h1 { font-size: 1.1rem !important; }
  h2 { font-size: 1rem !important; }
  .badge-card { padding: 10px 8px; }
}

/* ── 21. GRAPHIQUES & CANVAS ───────────────────────────────────────────── */
@media (max-width: 768px) {
  canvas { max-width: 100% !important; height: auto !important; }
  .chart-container, .chart-wrap, [id*="Chart"], [id*="chart"] {
    max-width: 100% !important;
    overflow-x: auto;
  }
}

/* ── 22. TEXTES LONGS & ELLIPSIS MOBILE ───────────────────────────────── */
@media (max-width: 640px) {
  .text-truncate-mobile {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }
  /* Colonnes tables trop larges */
  .atable td:nth-child(n+5), .admin-table td:nth-child(n+6) {
    display: none;
  }
}

/* ── 23. SCROLL HORIZONTAL INTERNE PROPRE ─────────────────────────────── */
@media (max-width: 768px) {
  .scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    width: 100%;
    padding-bottom: 4px;
  }
  .scroll-x::-webkit-scrollbar { height: 4px; }
  .scroll-x::-webkit-scrollbar-thumb { background: var(--border, #e2e8f0); border-radius: 2px; }
}

/* ── 24. CORRECTIFS FINAUX — éléments résiduels ──────────────────────── */
@media (max-width: 768px) {
  /* Notifications dropdown */
  .notif-dropdown { width: calc(100vw - 16px) !important; right: -8px !important; max-height: 70vh; overflow-y: auto; }
  /* Pagination */
  .pagination { flex-wrap: wrap; gap: 4px; }
  .page-link { min-width: 32px; min-height: 32px; font-size: .8rem; }
  /* Breadcrumbs */
  .breadcrumb { flex-wrap: wrap; gap: 4px; font-size: .8rem; }
  /* Alert/Flash banners */
  .flash, .alert { padding: 10px 12px; font-size: .85rem; }
  /* Push banner */
  .push-banner { padding: 10px 12px !important; flex-wrap: wrap; gap: 6px; }
  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 6px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BLOC FINAL v7.0 — CORRECTIFS RÉSIDUELS EXHAUSTIFS (zéro débordement)
   Cible : 320px – 640px. Tous les patterns non traités précédemment.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── A. MIN-WIDTH NON COUVERTS (160–260px) ───────────────────────────── */
@media (max-width: 640px) {
  [style*="min-width:160px"], [style*="min-width: 160px"],
  [style*="min-width:180px"], [style*="min-width: 180px"],
  [style*="min-width:200px"], [style*="min-width: 200px"],
  [style*="min-width:220px"], [style*="min-width: 220px"],
  [style*="min-width:240px"], [style*="min-width: 240px"],
  [style*="min-width:260px"], [style*="min-width: 260px"] {
    min-width: 0 !important;
  }
}

/* ── B. TABLES AVEC MIN-WIDTH INLINE → SCROLL ───────────────────────── */
/* admin_partners: table style="…min-width:520px" */
table[style*="min-width:"] {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
}
table[style*="min-width:"] thead,
table[style*="min-width:"] tbody,
table[style*="min-width:"] tfoot { display: table; width: 100%; }
table[style*="min-width:"] tr    { display: table-row; }
table[style*="min-width:"] th,
table[style*="min-width:"] td    { display: table-cell; }

/* ── C. FORMULAIRES FLEX SANS FLEX-WRAP → WRAP SUR MOBILE ───────────── */
@media (max-width: 640px) {
  form[style*="display:flex"]:not([style*="flex-wrap"]),
  form[style*="display: flex"]:not([style*="flex-wrap"]) {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Leurs inputs deviennent full-width */
  form[style*="display:flex"]:not([style*="flex-wrap"]) input,
  form[style*="display:flex"]:not([style*="flex-wrap"]) select,
  form[style*="display: flex"]:not([style*="flex-wrap"]) input,
  form[style*="display: flex"]:not([style*="flex-wrap"]) select {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  form[style*="display:flex"]:not([style*="flex-wrap"]) button,
  form[style*="display: flex"]:not([style*="flex-wrap"]) button {
    flex: 1 !important;
    min-width: 60px !important;
    text-align: center !important;
  }
}

/* ── D. TD AVEC DISPLAY:FLEX → wrappable ─────────────────────────────── */
@media (max-width: 640px) {
  td[style*="display:flex"], td[style*="display: flex"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  td[style*="display:flex"] > button,
  td[style*="display: flex"] > button,
  td[style*="display:flex"] > a,
  td[style*="display: flex"] > a { flex: 1 1 auto !important; text-align: center !important; min-width: 60px; }
}

/* ── E. INPUTS/SELECTS AVEC MIN-WIDTH INLINE ─────────────────────────── */
@media (max-width: 640px) {
  input[style*="min-width:"],  input[style*="min-width: "],
  select[style*="min-width:"], select[style*="min-width: "] {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── F. .tform-input AVEC STYLE FLEX/WIDTH FIXE ──────────────────────── */
@media (max-width: 640px) {
  .tform-input[style*="width:"],
  .tform-input[style*="flex:"],
  .tform-input[style*="flex: "] {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}

/* ── G. OVERFLOW-X SUR LES LAYOUTS RACINE ───────────────────────────── */
@media (max-width: 960px) {
  .dash-layout   { overflow-x: hidden !important; }
  .dash-main     { min-width: 0 !important; overflow-x: hidden !important; }
  .parent-layout { overflow-x: hidden !important; }
  .parent-main   { min-width: 0 !important; overflow-x: hidden !important; }
}

/* ── H. THUMBNAIL/AVATAR FLEX-SHRINK:0 AVEC WIDTH FIXE ─────────────── */
/* teacher_videos: div style="width:100px;flex-shrink:0" */
@media (max-width: 640px) {
  [style*="width:100px"][style*="flex-shrink:0"],
  [style*="width: 100px"][style*="flex-shrink: 0"] {
    width: 80px !important;
    min-width: 60px !important;
    flex-shrink: 1 !important;
  }
}

/* ── I. GRILLES repeat(auto-fit,minmax(X,1fr)) SUR 360px ─────────────── */
/* Sur 360px ces grilles ne débordent généralement pas, mais on force 1fr
   pour minmax > 150px pour garantir la lisibilité à 320px */
@media (max-width: 360px) {
  [style*="minmax(160px"], [style*="minmax(170px"],
  [style*="minmax(200px"], [style*="minmax(240px"],
  [style*="minmax(280px"], [style*="minmax(300px"] {
    grid-template-columns: 1fr !important;
  }
  /* minmax(140px) → 2 cols sur 320px : 140×2=280 < 320 → OK, garde 2 cols */
}

/* ── J. FLEX ITEMS DANS MODAUX → min-width:0 ─────────────────────────── */
@media (max-width: 600px) {
  .amodal [style*="flex:1"],    .amodal [style*="flex: 1"],
  .modal-box [style*="flex:1"], .modal-box [style*="flex: 1"],
  .fmodal [style*="flex:1"],    .fmodal [style*="flex: 1"] {
    min-width: 0 !important;
  }
}

/* ── K. OVERFLOW-WRAP SUR CELLULES TABLEAU ───────────────────────────── */
@media (max-width: 768px) {
  .dash-content td, .dash-content th,
  .atable td, .atable th {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ── L. COMPACT 360px — AJUSTEMENTS FINAUX ───────────────────────────── */
@media (max-width: 360px) {
  .akpi-grid, .akpi-grid3, .akpi-grid4 { grid-template-columns: 1fr !important; gap: 8px !important; }
  .akpi-row, .pay-kpi, .rem-kpi,
  .atl-kpis, .ash-kpis             { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .apage-hero h1                    { font-size: 1rem !important; }
  .apage-hero > div[style*="display:flex"] { flex-direction: column !important; align-items: stretch !important; }
  .apage-hero .btn                  { width: 100% !important; text-align: center; }
  .dash-topbar { padding: 5px 8px !important; }
  /* Réduire la topbar title */
  .topbar-title, .dash-topbar h2 { font-size: .85rem !important; }
}

/* ── M. DIVS FLEX;GAP SANS WRAP DANS DASH-CONTENT (480px) ───────────── */
/* Les action bars avec display:flex;gap sans flex-wrap peuvent déborder */
@media (max-width: 480px) {
  .dash-content div[style*="display:flex;gap:10px"]:not([style*="flex-wrap"]):not([style*="flex-direction"]):not([style*="align-items"]),
  .dash-content div[style*="display:flex;gap:8px"]:not([style*="flex-wrap"]):not([style*="flex-direction"]):not([style*="align-items"]) {
    flex-wrap: wrap !important;
  }
}

/* ── N. ADMIN SUPPORT — colonne status (min-width:120px div) ─────────── */
/* Couvert par règle A ci-dessus, mais aussi: */
@media (max-width: 480px) {
  [style*="display:flex;flex-direction:column;gap:6px"][style*="min-width:120px"],
  [style*="flex-direction:column"][style*="min-width:120px"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── O. PARENT SERVICES MODAL — correctif 480px ──────────────────────── */
@media (max-width: 480px) {
  .ps-form-row[style*="grid-template-columns"],
  [class*="ps-form"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── P. ADMIN YENGAPAY CONFIG — grilles 1rem gap ─────────────────────── */
@media (max-width: 640px) {
  [style*="grid-template-columns:1fr 1fr"][style*="gap:1rem"],
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 1rem"],
  [style*="grid-template-columns:1fr 1fr"][style*="gap:1rem"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Q. SÉCURITÉ ABSOLUE: aucun enfant direct de body ne dépasse 100vw ── */
@media (max-width: 640px) {
  body > * {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* ── R. BOUTONS RÔLE INSCRIPTION — compact 320px ─────────────────────── */
@media (max-width: 340px) {
  .role-select { gap: 4px !important; }
  .role-option span {
    font-size: .72rem !important;
    padding: 6px 4px !important;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── S. BOUTIQUE SEARCH INPUT min-width:160px ────────────────────────── */
/* Couvert par règle A, mais on force aussi via sélecteur classe */
@media (max-width: 640px) {
  .boutique-search input[style*="min-width"],
  .shop-filters input[style*="min-width"],
  form.boutique-filter input[style*="min-width"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── T. LIENS OVERFLOW-WRAP GLOBAL (évite les longues URLs qui cassent) ─ */
@media (max-width: 768px) {
  .dash-content a,
  .dash-content p,
  .dash-content span,
  .dash-content li {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ── U. FORMULAIRE COMMENTAIRE COURS — flex-wrap sur mobile ──────────── */
@media (max-width: 640px) {
  /* div flex sans wrap : textarea + bouton → passe en colonne */
  div[style*="display:flex"][style*="align-items:flex-end"]:not([style*="flex-wrap"]) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  div[style*="display:flex"][style*="align-items:flex-end"] textarea {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
  div[style*="display:flex"][style*="align-items:flex-end"] button,
  div[style*="display:flex"][style*="align-items:flex-end"] input[type="submit"] {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ── V. CARTE CALENDRIER PARENT — wrap sur 400px ─────────────────────── */
@media (max-width: 400px) {
  .parent-card div[style*="display:flex;align-items:center;gap:12px"]:not([style*="flex-wrap"]),
  .parent-card div[style*="display:flex; align-items:center; gap:12px"]:not([style*="flex-wrap"]) {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .parent-card div[style*="display:flex;align-items:center;gap:12px"] a[style*="margin-left:auto"] {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* ── W. OVERFLOW FINAL SAFETY — empêche tout débordement sur conteneurs ── */
@media (max-width: 640px) {
  /* Container max-width → full-width sur mobile */
  .container[style*="max-width:840px"],
  .container[style*="max-width:760px"],
  .container[style*="max-width:900px"] {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CORRECTIFS v8.0 — Bugs résiduels audit final (17 mai 2026)
   4 problèmes précis non couverts par les passes précédentes :
   1. .teacher-dash-grid jamais rendu responsive
   2. .parent-subject-row corrigé avec flex-direction (c'est un grid)
   3. Certificat : padding horizontal trop large sur mobile
   4. .cert-student-name : 2.2rem trop grand sur 320px
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TEACHER DASH GRID — 2 colonnes → 1 colonne ───────────────────── */
@media (max-width: 768px) {
  .teacher-dash-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ── 2. PARENT SUBJECT ROW — grid pas flex ────────────────────────────── */
/* Remplace le fix incorrect "flex-direction:column" des passes précédentes */
@media (max-width: 480px) {
  .parent-subject-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .parent-subject-row .parent-subject-avg,
  .parent-subject-row .parent-subject-name { font-size: .8rem; }
}

/* ── 3. CERTIFICAT — padding horizontal mobile ────────────────────────── */
@media (max-width: 640px) {
  .cert-body      { padding: 24px 16px !important; }
  .cert-footer    { padding: 16px 16px !important; }
  .cert-header    { padding: 24px 16px !important; }
  .cert-page-wrap { padding: 0 !important; }
}
@media (max-width: 400px) {
  .cert-body   { padding: 16px 12px !important; }
  .cert-footer { padding: 12px 12px !important; }
  .cert-header { padding: 20px 12px !important; }
}

/* ── 4. CERT STUDENT NAME — taille de police mobile ──────────────────── */
@media (max-width: 640px) {
  .cert-student-name { font-size: 1.6rem !important; padding-bottom: 14px !important; margin-bottom: 20px !important; }
  .cert-title        { font-size: 1.2rem !important; }
  .cert-brand-name   { font-size: 1.1rem !important; }
}
@media (max-width: 400px) {
  .cert-student-name { font-size: 1.3rem !important; }
  .cert-stats-row    { gap: 12px !important; }
}

/* ── 5. TSTAT-CARD compact sur 480px ─────────────────────────────────── */
/* (teacher stats : 4 cartes → 2 colonnes → padding trop grand) */
@media (max-width: 480px) {
  .tstat-card { padding: 14px 12px !important; gap: 10px !important; }
  .tstat-val  { font-size: 1.3rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   🇨🇮  UNIFORMISATION IVOIRIENNE — TOUS LES PANELS v2.0
   Orange ivoirien #F97316  |  Vert foncé premium #166534
   Texte blanc sur vert/navy  |  Texte noir sur orange/blanc
   Admin · Élève · Enseignant · Parent
   ═══════════════════════════════════════════════════════════════════════ */

/* ── VARIABLES IVOIRIENNES PANELS ─────────────────────────────────────── */
:root {
  --ci-orange:      #F97316;
  --ci-orange-dk:   #EA6A0A;
  --ci-orange-bg:   #FFF3E6;
  --ci-orange-bdr:  #FED7AA;
  --ci-green:       #166534;
  --ci-green-mid:   #15803D;
  --ci-green-bg:    #F0FDF4;
  --ci-green-bdr:   #BBF7D0;
  --ci-navy:        #071B3B;
}

/* ═══════════════════════════════
   PANEL ÉLÈVE  (.sp-*)
   ═══════════════════════════════ */

/* Hero — navy→vert foncé avec bandeau drapeau */
.sp-hero {
  background: linear-gradient(135deg,#071B3B 0%,#0C2248 60%,#166534 100%) !important;
  border-bottom: 3px solid transparent !important;
  border-image: none !important;
  position: relative;
  overflow: hidden;
}
.sp-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,#F97316 33.33%,#fff 33.33%,#fff 66.66%,#166534 66.66%);
}

/* Avatar élève → orange */
.sp-avatar { background: linear-gradient(135deg,#F97316,#EA6A0A) !important; color: #fff !important; }

/* Barre de progression cours → vert foncé */
.sp-pfill { background: linear-gradient(90deg,#166534,#15803D) !important; }

/* Cartes actions — hover orange */
.sp-action:hover { border-color: #F97316 !important; box-shadow: 0 6px 20px rgba(249,115,22,.18) !important; }

/* Liens "Voir tout" dans les section-titles → orange */
.sp-section-title a { color: #F97316 !important; }

/* Objectif du jour → orange-tinted au lieu de vert clair */
.sp-goal {
  background: linear-gradient(135deg,#FFF3E6,#FFF8F0) !important;
  border: 1px solid #FED7AA !important;
}
.sp-goal-title { color: #92400E !important; }
.sp-goal-text  { color: #78350F !important; }

/* Bouton dans objectif → orange */
.sp-goal .btn-primary,
.sp-goal a.btn { background: #F97316 !important; color: #fff !important; }
.sp-goal a.btn:hover { background: #EA6A0A !important; }

/* Quiz icon bg → orange léger */
.sp-quiz-icon { background: #FFF3E6 !important; }

/* Scores ok → vert foncé */
.sp-score-ok { background: #F0FDF4 !important; color: #166534 !important; }

/* Stat cards — top accent orange */
.sp-stat { border-top: 3px solid transparent !important; }
.sp-stat:nth-child(1) { border-top-color: #F97316 !important; }
.sp-stat:nth-child(2) { border-top-color: #166534 !important; }
.sp-stat:nth-child(3) { border-top-color: #F97316 !important; }
.sp-stat-val { color: #071B3B !important; }

/* Card base */
.sp-card { border-top: none !important; }

/* ═══════════════════════════════
   PANEL ENSEIGNANT  (.tp-*)
   ═══════════════════════════════ */

/* Hero → navy→vert foncé avec bandeau drapeau */
.tp-hero {
  background: linear-gradient(135deg,#071B3B 0%,#0C2248 60%,#166534 100%) !important;
  position: relative;
  overflow: hidden;
}
.tp-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,#F97316 33.33%,#fff 33.33%,#fff 66.66%,#166534 66.66%);
}

/* Avatar enseignant → orange */
.tp-avatar { background: linear-gradient(135deg,#F97316,#EA6A0A) !important; color: #fff !important; }

/* Liens "Voir tout" → orange */
.tp-section-title a   { color: #F97316 !important; }
.tp-card-header a     { color: #F97316 !important; }

/* Actions rapides — couleurs ivoiriennes */
.tp-action.tp-green   { border-top-color: #166534 !important; }
.tp-action.tp-orange  { border-top-color: #F97316 !important; }
.tp-action.tp-blue    { border-top-color: #F97316 !important; }   /* unifié orange */
.tp-action.tp-purple  { border-top-color: #166534 !important; }   /* unifié vert */
.tp-action.tp-teal    { border-top-color: #166534 !important; }
.tp-action:hover { border-color: #F97316 !important; box-shadow: 0 6px 20px rgba(249,115,22,.18) !important; }

/* Stats hover → orange */
.tp-stat:hover { border-color: #F97316 !important; }

/* Compteur devoirs → orange */
.tp-hw-count { color: #F97316 !important; }

/* Notes bonnes → vert foncé */
.tp-grade-good { background: #F0FDF4 !important; color: #166534 !important; }

/* Avatar notes (était bleu) → orange */
.tp-grade-avatar { background: #FFF3E6 !important; color: #F97316 !important; }

/* Bouton édition → orange léger */
.tp-btn-edit { background: #FFF3E6 !important; color: #F97316 !important; }

/* ═══════════════════════════════
   PANEL ADMIN  (.ap-*)
   ═══════════════════════════════ */

/* Hero → navy→vert foncé avec bandeau drapeau */
.ap-hero {
  background: linear-gradient(135deg,#071B3B 0%,#0C2248 55%,#166534 100%) !important;
  position: relative;
  overflow: hidden;
}
.ap-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,#F97316 33.33%,#fff 33.33%,#fff 66.66%,#166534 66.66%);
}

/* Hero icon → orange */
.ap-hero-icon {
  background: rgba(249,115,22,.2) !important;
  border: 2px solid rgba(249,115,22,.4) !important;
  color: #F97316 !important;
}

/* Hero tag → orange */
.ap-hero-tag {
  background: rgba(249,115,22,.18) !important;
  border: 1px solid rgba(249,115,22,.35) !important;
  color: #F97316 !important;
}
.ap-hero-tag::before { background: #F97316 !important; }

/* KPI cards — top borders ivoiriens */
.ap-kcard.kc-blue::before   { background: #F97316 !important; }   /* → orange */
.ap-kcard.kc-green::before  { background: #166534 !important; }   /* → vert foncé */
.ap-kcard.kc-orange::before { background: #F97316 !important; }
.ap-kcard.kc-purple::before { background: #166534 !important; }   /* → vert foncé */
.ap-kcard.kc-red::before    { background: #F97316 !important; }   /* → orange */
.ap-kcard.kc-teal::before   { background: #166534 !important; }
.ap-kcard:hover { box-shadow: 0 6px 20px rgba(249,115,22,.14) !important; }

/* Liens section → orange */
.ap-section-title a { color: #F97316 !important; }

/* Avatar utilisateur → orange */
.ap-user-avatar { background: #FFF3E6 !important; color: #F97316 !important; }

/* Badges rôle → couleurs ivoiriennes */
.ar-teacher  { background: #F0FDF4 !important; color: #166534 !important; }
.ar-student  { background: #FFF3E6 !important; color: #F97316 !important; }
.ar-parent   { background: #FFFBEB !important; color: #92400E !important; }
.ar-admin    { background: #071B3B !important; color: #fff     !important; }

/* Badges statut → gardés lisibles */
.ab-ok   { background: #F0FDF4 !important; color: #166534 !important; }
.ab-warn { background: #FFFBEB !important; color: #92400E !important; }

/* Log dots → ivoiriens */
.ap-log-dot.l-login  { background: #166534 !important; }  /* vert foncé */
.ap-log-dot.l-create { background: #F97316 !important; }  /* orange */
.ap-log-dot.l-update { background: #F97316 !important; }  /* orange */

/* Actions admin hover → orange */
.ap-action:hover { border-color: #F97316 !important; box-shadow: 0 6px 20px rgba(249,115,22,.16) !important; }

/* ═══════════════════════════════
   PANEL PARENT  (.pp-*)
   ═══════════════════════════════ */

/* Hero → navy→vert foncé (remplace le violet) */
.pp-hero {
  background: linear-gradient(135deg,#071B3B 0%,#0C2248 55%,#166534 100%) !important;
  position: relative;
  overflow: hidden;
}
.pp-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,#F97316 33.33%,#fff 33.33%,#fff 66.66%,#166534 66.66%);
}
.pp-hero-text h1 { color: #fff !important; }
.pp-hero-text p  { color: rgba(255,255,255,.75) !important; }

/* Avatar parent → blanc translucide (sur fond foncé) */
.pp-avatar { background: rgba(255,255,255,.2) !important; color: #fff !important; }

/* Stats — valeurs colorées ivoiriennes */
.pp-stat-val.green  { color: #166534 !important; }
.pp-stat-val.purple { color: #F97316 !important; }  /* violet → orange */

/* Stat cards top border */
.pp-stat { border-top: 3px solid transparent !important; }
.pp-stat:nth-child(1) { border-top-color: #F97316 !important; }
.pp-stat:nth-child(2) { border-top-color: #166534 !important; }
.pp-stat:nth-child(3) { border-top-color: #F97316 !important; }

/* Formulaires focus → orange (remplace violet) */
.pp-form-group input:focus,
.pp-form-group select:focus,
.pp-form-group textarea:focus {
  border-color: #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.12) !important;
  background: #fff !important;
}

/* Service types selected → orange (remplace violet) */
.pp-svc-type.selected,
.pp-svc-type:hover {
  border-color: #F97316 !important;
  background: #FFF3E6 !important;
}

/* Info box → orange (remplace violet) */
.pp-info-box {
  background: #FFF3E6 !important;
  border-left-color: #F97316 !important;
  color: #92400E !important;
}

/* Avatar enseignant dans placements → orange */
.pp-teacher-avatar {
  background: linear-gradient(135deg,#F97316,#EA6A0A) !important;
  color: #fff !important;
}

/* Status badges → gardés neutres pour lisibilité */
.pp-s-active { background: #F0FDF4 !important; color: #166534 !important; }

/* Comment ça marche — numéros étapes → orange */
.pp-how-num { background: #F97316 !important; color: #fff !important; }

/* Modal overlay → vert foncé translucide (comme homepage) */
.pp-modal-overlay { background: rgba(22,101,52,.5) !important; }

/* Stars rating → orange vif */
.pp-stars label { color: #E5E7EB !important; }
.pp-stars input:checked ~ label,
.pp-stars label:hover { color: #F97316 !important; }

/* Placement card hover → orange */
.pp-placement-card { border-color: #E2E8F0 !important; }
.pp-placement-card:hover { border-color: #F97316 !important; box-shadow: 0 4px 16px rgba(249,115,22,.12) !important; }

/* ═══════════════════════════════
   ÉLÉMENTS COMMUNS — TOUS PANELS
   ═══════════════════════════════ */

/* Boutons primaires dans les panels → orange, texte noir/blanc selon contexte.
   #047 : les boutons qui ont un sens/une couleur propre (valider vert, refuser/supprimer rouge,
   secondaire/contour) sont exclus : avant, TOUS les button[type=submit] devenaient orange
   et « Approuver » / « Rejeter » / « Supprimer » avaient la même couleur. */
.dash-content .btn-primary,
.dash-content button[type="submit"]:not(.abtn-danger):not(.abtn-success):not(.abtn-navy):not(.stg-btn-red):not(.stg-btn-out):not(.ps-yes):not(.ps-no):not(.as2-ok):not(.as2-ko):not(.vbtn-del):not(.btn-xs-validate):not(.btn-xs-navy):not(.btn-ghost):not(.afilter-btn):not(.ts-btn.ghost) {
  background: #F97316 !important;
  color: #fff !important;
}
.dash-content .btn-primary:hover,
.dash-content button[type="submit"]:not(.abtn-danger):not(.abtn-success):not(.abtn-navy):not(.stg-btn-red):not(.stg-btn-out):not(.ps-yes):not(.ps-no):not(.as2-ok):not(.as2-ko):not(.vbtn-del):not(.btn-xs-validate):not(.btn-xs-navy):not(.btn-ghost):not(.afilter-btn):not(.ts-btn.ghost):hover {
  background: #EA6A0A !important;
  box-shadow: 0 4px 16px rgba(249,115,22,.32) !important;
}

/* #047 : les liens dont la classe contient « btn » (btn, abtn, btn-xs-navy…) gardent leur propre couleur :
   avant, un lien bouton bleu nuit recevait un texte bleu nuit (illisible). */
/* Boutons secondaires/ghost dans panels → orange */
.dash-content .btn-ghost:hover { border-color: #F97316 !important; color: #F97316 !important; }
.dash-content .btn-navy { background: #071B3B !important; color: #fff !important; }
.dash-content .btn-navy:hover { background: #0C2248 !important; }

/* Liens actifs dans les formulaires des panels */
.dash-content a:not([class*="btn"]):not(.sidebar-link):not(.sp-action):not(.tp-action):not(.ap-action):not(.sp-course-card):not(.sp-video-card) {
  color: #071B3B;
}
.dash-content a:not([class*="btn"]):not(.sidebar-link):not(.sp-action):not(.tp-action):not(.ap-action):not(.sp-course-card):not(.sp-video-card):hover {
  color: #F97316 !important;
}

/* Pagination dans les panels */
.dash-content .pagination a:hover,
.dash-content .page-link:hover { border-color: #F97316 !important; color: #F97316 !important; }
.dash-content .pagination .active,
.dash-content .page-link.active { background: #F97316 !important; border-color: #F97316 !important; color: #fff !important; }

/* Tags / chips couleurs panels → ivoiriens */
.dash-content .tag-orange { background: #FFF3E6 !important; color: #F97316 !important; border: 1px solid #FED7AA !important; }
.dash-content .tag-green  { background: #F0FDF4 !important; color: #166534 !important; border: 1px solid #BBF7D0 !important; }

/* Focus inputs global panels → orange */
.dash-content input:focus,
.dash-content textarea:focus,
.dash-content select:focus {
  border-color: #F97316 !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.12) !important;
}

/* Flash messages succès → vert foncé */
.dash-content .flash-success,
.dash-content .alert-success {
  background: #F0FDF4 !important;
  color: #166534 !important;
  border-left: 4px solid #166534 !important;
}

/* Loaders/spinners → orange */
.dash-content .spinner,
.dash-content [class*="loader"] { border-top-color: #F97316 !important; }

/* ═══════════════════════════════
   SIDEBAR — REFONTE VERT FONCÉ
   (ACTIVE = fond orange, HOVER = vert foncé)
   ═══════════════════════════════ */

/* Fond sidebar → vert foncé premium */
.sidebar {
  background: linear-gradient(180deg,#071B3B 0%,#0C2248 40%,#166534 100%) !important;
  border-right: none !important;
}

/* Header sidebar → sans border blanche, bandeau drapeau CI */
.sidebar-header {
  background: rgba(0,0,0,.15) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  border-image: none !important;
}
/* Bandeau drapeau CI sous le header sidebar */
.sidebar-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,#F97316 33.33%,#fff 33.33%,#fff 66.66%,#166534 66.66%);
}
.sidebar-header { position: relative !important; }

/* Texte logo → blanc */
.sidebar-header .brand-name,
.sidebar-header span,
.sidebar-brand-name { color: #fff !important; }
.sidebar-header .brand-a { color: #F97316 !important; }

/* Logo image → blanc sur fond foncé */
.sidebar-logo,
.sidebar-header img { filter: brightness(0) invert(1) !important; }

/* Bouton fermer → cercle blanc translucide */
.sidebar-close {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}
.sidebar-close:hover { background: rgba(249,115,22,.35) !important; color: #F97316 !important; }

/* Zone utilisateur → translucide foncée */
.sidebar-user {
  background: rgba(0,0,0,.2) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
.sidebar-username { color: #fff !important; }
.sidebar-role     { color: rgba(255,255,255,.65) !important; }

/* XP bar → orange sur fond sombre */
.sidebar-xp-bar  { background: rgba(255,255,255,.2) !important; }
.sidebar-xp-fill { background: linear-gradient(90deg,#F97316,#FD8A3C) !important; }
.sidebar-xp-label { color: rgba(255,255,255,.7) !important; }

/* Liens sidebar → blancs, active = fond orange, hover = blanc translucide */
.sidebar-link { color: rgba(255,255,255,.78) !important; }
.sidebar-link:hover {
  background: rgba(249,115,22,.2) !important;
  color: #fff !important;
}
.sidebar-link.active {
  background: rgba(249,115,22,.3) !important;
  color: #F97316 !important;
  font-weight: 700 !important;
  border-left: 3px solid #F97316 !important;
  padding-left: 9px !important;
}
.sidebar-link svg { opacity: .75; }
.sidebar-link:hover svg,
.sidebar-link.active svg { opacity: 1; }

/* Labels de section → gris clair lisible sur fond foncé */
.sidebar-section-label { color: rgba(255,255,255,.45) !important; letter-spacing: .07em !important; }

/* Badges sidebar → orange / vert */
.sidebar-xp-badge    { background: rgba(249,115,22,.25) !important; color: #F97316 !important; }
.sidebar-badge-count { background: rgba(22,101,52,.4) !important; color: #86EFAC !important; }
.sidebar-msg-badge   { background: #F97316 !important; color: #fff !important; }

/* Déconnexion → rouge clair sur fond foncé */
.sidebar-logout { color: rgba(255,255,255,.6) !important; }
.sidebar-logout:hover { background: rgba(239,68,68,.25) !important; color: #FCA5A5 !important; }

/* Bloc premium → translucide orange */
.sidebar-premium {
  background: rgba(249,115,22,.15) !important;
  border: 1px solid rgba(249,115,22,.3) !important;
}
.sidebar-premium strong { color: #fff !important; }
.sidebar-premium p      { color: rgba(255,255,255,.7) !important; }

/* Hamburger → barres orange */
.sidebar-open span { background: #F97316 !important; }

/* Topbar → blanc avec bandeau drapeau CI */
.dash-topbar {
  background: #fff !important;
  border-bottom: 3px solid transparent !important;
  border-image: linear-gradient(90deg,#F97316 33%,#fff 33%,#fff 66%,#166534 66%) 1 !important;
  box-shadow: 0 2px 10px rgba(7,27,59,.07) !important;
}
.topbar-user:hover { border-color: #F97316 !important; }
.sidebar-avatar,
.topbar-avatar {
  background: linear-gradient(135deg,#F97316,#EA6A0A) !important;
  color: #fff !important;
}
.notif-btn:hover  { color: #F97316 !important; }
.notif-count      { background: #F97316 !important; color: #fff !important; }

/* Dashboard body → crème ivoirien */
.dashboard-body { background: #FFFBF7 !important; }

/* ═════════════════════════════════════════════════════════════════
   FIN UNIFORMISATION IVOIRIENNE v2.0
   ════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   🔧 CORRECTIF LISIBILITÉ TEXTE — HEROES COLORÉS (tous les panels)
   Cause : p { color: var(--text-muted) } global écrase le blanc sur fonds colorés
   Solution : forcer color blanc sur TOUS les paragraphes dans les heroes
   ═══════════════════════════════════════════════════════════════════════ */

/* ── .apage-hero (toutes les pages admin) ───────────────────────────── */
.apage-hero h1,
.apage-hero h2,
.apage-hero h3  { color: #fff !important; }
.apage-hero p,
.apage-hero span:not(.badge):not(.btn):not([class*="akpi"]) {
  color: rgba(255,255,255,.85) !important;
}

/* ── .pay-hero (Transactions & Paiements) — bleu → ivoirien ─────────── */
.pay-hero {
  background: linear-gradient(135deg,#071B3B 0%,#0C2248 55%,#166534 100%) !important;
  position: relative;
  overflow: hidden;
}
.pay-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,#F97316 33.33%,#fff 33.33%,#fff 66.66%,#166534 66.66%);
}
.pay-hero h1,
.pay-hero h2,
.pay-hero h3 { color: #fff !important; }
.pay-hero p,
.pay-hero > div > p,
.pay-hero * > p { color: rgba(255,255,255,.85) !important; }

/* ── .rem-hero (Rémunérations enseignants) — texte visible ─────────── */
.rem-hero {
  background: linear-gradient(135deg,#071B3B 0%,#0C2248 40%,#166534 100%) !important;
  position: relative;
  overflow: hidden;
}
.rem-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,#F97316 33.33%,#fff 33.33%,#fff 66.66%,#166534 66.66%);
}
.rem-hero h1,
.rem-hero h2,
.rem-hero h3 { color: #fff !important; }
.rem-hero p,
.rem-hero > div > p,
.rem-hero * > p { color: rgba(255,255,255,.85) !important; }

/* ── .admin-hero (admin dashboard principal) ─────────────────────────── */
.admin-hero h1,
.admin-hero h2,
.admin-hero h3 { color: #fff !important; }
.admin-hero p  { color: rgba(255,255,255,.85) !important; }

/* ── Heroes panels simplifiés (sp-, tp-, ap-, pp-) ──────────────────── */
/* Ces heroes ont déjà du texte blanc en inline CSS,
   mais on force le p au cas où le global l'écrase */
.sp-hero p,
.sp-hero-text p { color: rgba(255,255,255,.8) !important; }

.tp-hero p,
.tp-hero-text p { color: rgba(255,255,255,.8) !important; }

.ap-hero p,
.ap-hero-text p { color: rgba(255,255,255,.8) !important; }

.pp-hero p,
.pp-hero-text p { color: rgba(255,255,255,.8) !important; }

/* ── Règle de sécurité globale : tout p dans un fond coloré → blanc ── */
/* Ciblage des parents avec background coloré courant dans le dashboard */
[style*="background:linear-gradient"][style*="#071B3B"] p,
[style*="background:linear-gradient"][style*="#166534"] p,
[style*="background:linear-gradient"][style*="#1E40AF"] p,
[style*="background:linear-gradient"][style*="#065F46"] p,
[style*="background:linear-gradient"][style*="#047857"] p {
  color: rgba(255,255,255,.85) !important;
}

/* ══ FIN CORRECTIF LISIBILITÉ HEROES ══════════════════════════════════ */

/* ══ SYNCHRONISATION TEMPS RÉEL — Live & Devoirs ══════════════════════ */

/* Indicateur sync */
@keyframes syncPulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}

.sync-dot{width:8px;height:8px;background:#10B981;border-radius:50%;display:inline-block;margin-left:6px;animation:syncPulse 2s infinite}
.sync-dot-live{width:8px;height:8px;background:#10B981;border-radius:50%;animation:syncPulse 2s infinite}
.sync-indicator{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#10B981;font-weight:600}

/* Banner live dans les pages parent */
.parent-live-banner{background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;border-radius:14px;padding:14px 16px;margin-bottom:16px;display:flex;align-items:center;gap:12px;animation:livePulse 2s infinite;overflow:hidden}
.parent-live-banner h4{margin:0 0 2px;font-size:.9rem;font-weight:800;color:#fff!important}
.parent-live-banner p{margin:0;font-size:.76rem;color:rgba(255,255,255,.9)!important;opacity:1;white-space:normal;word-break:break-word}
.parent-live-banner>div:nth-child(2){flex:1;min-width:0;overflow:hidden}
.parent-live-banner a{background:#fff;color:#EF4444;border-radius:8px;padding:7px 14px;font-weight:800;font-size:.78rem;text-decoration:none;white-space:nowrap;flex-shrink:0}

/* Cartes lives parent */
.plive-card{background:#fff;border-radius:13px;padding:13px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 1px 6px rgba(0,0,0,.06);border:1px solid #FEE2E2;margin-bottom:8px}
.plive-card.is-live{border-color:#EF4444;background:#FFF5F5}
.plive-dot{width:38px;height:38px;border-radius:11px;background:#FEE2E2;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.plive-card.is-live .plive-dot{background:#EF4444;color:#fff}
.plive-meta{flex:1;min-width:0}
.plive-title{font-size:.86rem;font-weight:700;color:#071B3B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plive-sub{font-size:.73rem;color:#6B7280;margin-top:2px}
.plive-teacher{font-size:.72rem;color:#F97316;font-weight:600}
.plive-btn{background:#EF4444;color:#fff;border-radius:9px;padding:7px 13px;font-size:.76rem;font-weight:700;text-decoration:none;white-space:nowrap;flex-shrink:0}
.plive-btn.soon{background:#F97316}
.plive-btn.sched{background:#3B82F6}

/* Badge sidebar HW */
.sidebar-hw-badge{display:inline-block;background:#F97316;color:#fff;font-size:.65rem;font-weight:800;border-radius:99px;padding:1px 6px;margin-left:auto}
.sync-live-badge{display:inline-block}

/* ══ FIN SYNCHRONISATION ══════════════════════════════════════════════ */

/* ══ JITSI MEET INTEGRATION ══════════════════════════════════════════════ */

/* Bannière info dans le formulaire enseignant */
.jitsi-info-banner{display:flex;align-items:flex-start;gap:12px;background:linear-gradient(135deg,#EFF6FF,#DBEAFE);border:1px solid #BFDBFE;border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:.82rem;color:#1D4ED8;line-height:1.5}
.jitsi-info-banner span{font-size:1.3rem;flex-shrink:0;margin-top:1px}
.jitsi-info-banner strong{display:block;font-weight:700;margin-bottom:2px;font-size:.84rem}

/* Bouton "Copier le lien Jitsi" dans la card live enseignant */
.jitsi-link-row{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap}
.jitsi-link-badge{display:inline-flex;align-items:center;gap:5px;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:8px;padding:3px 10px;font-size:.73rem;font-weight:600;color:#2563EB;text-decoration:none;white-space:nowrap}
.jitsi-link-badge:hover{background:#DBEAFE}
.jitsi-copy-btn{background:none;border:none;cursor:pointer;font-size:.78rem;color:#6B7280;padding:2px 6px;border-radius:6px;transition:all .2s}
.jitsi-copy-btn:hover{background:#F1F5F9;color:#071B3B}
.jitsi-copy-btn.copied{color:#10B981;font-weight:700}

/* ══ FIN JITSI MEET ══════════════════════════════════════════════════════ */

/* ══ CORRECTIFS GLOBAUX — SESSION 2026-05-17 ═══════════════════════════════ */

/* 1. Bottom nav visible dans le dashboard layout (élève/prof/admin/parent) */
.dash-wrap ~ .bottom-nav,
body > .bottom-nav { display: flex; }

/* 2. Cloche notification — anti-débordement mobile (position:fixed) */
@media (max-width: 768px) {
  .notif-bell-wrap { position: static; }
  .notif-dropdown {
    position: fixed !important;
    top: 60px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    transform: none !important;
    z-index: 9999 !important;
    border-radius: 14px !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.18) !important;
  }
}

/* 3. Marge bottom pour le contenu du dashboard (évite chevauchement bottom nav) */
@media (max-width: 899px) {
  .dash-content { padding-bottom: 80px !important; }
  .dash-wrap { padding-bottom: 0 !important; }
}

/* ══ FIN CORRECTIFS 2026-05-17 ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   SYSTÈME DEVOIRS & EXERCICES — COMPLET v1.0
   ══════════════════════════════════════════════════════════════ */

/* ── Page header élève ── */
.hw-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.hw-page-title{font-size:1.4rem;font-weight:800;color:#071B3B;margin:0}
.hw-page-sub{font-size:.85rem;color:#6B7280;margin:4px 0 0}

/* ── KPI row ── */
.hw-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.hw-kpi{background:#fff;border-radius:14px;padding:16px 12px;text-align:center;box-shadow:0 1px 6px rgba(0,0,0,.06);border:1px solid #E2E8F0}
.hw-kpi.danger{border-color:#FCA5A5;background:#FFF5F5}
.hw-kpi-icon{font-size:1.4rem;margin-bottom:4px}
.hw-kpi-val{font-size:1.5rem;font-weight:800;color:#071B3B}
.hw-kpi.danger .hw-kpi-val{color:#EF4444}
.hw-kpi-label{font-size:.72rem;color:#6B7280;margin-top:2px;font-weight:500}

/* ── Tabs ── */
.hw-tabs{display:flex;gap:8px;margin-bottom:18px;overflow-x:auto;padding-bottom:4px}
.hw-tab{padding:8px 18px;border-radius:99px;font-size:.83rem;font-weight:600;cursor:pointer;border:none;background:#F1F5F9;color:#6B7280;white-space:nowrap;transition:all .2s}
.hw-tab.active{background:#F97316;color:#fff}
.hw-tab-count{background:rgba(255,255,255,.3);border-radius:99px;padding:1px 7px;font-size:.7rem;margin-left:4px}
.hw-tab:not(.active) .hw-tab-count{background:#E2E8F0;color:#6B7280}

/* ── Cards élève ── */
.hw-list{display:flex;flex-direction:column;gap:14px}
.hw-card{background:#fff;border-radius:16px;box-shadow:0 1px 8px rgba(0,0,0,.06);border:1px solid #E2E8F0;overflow:hidden;transition:box-shadow .2s}
.hw-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.hw-card.overdue{border-color:#FCA5A5;background:#FFFBFB}
.hw-card.urgent{border-color:#FED7AA}
.hw-card.done{border-color:#A7F3D0}
.hw-card.graded{border-color:#93C5FD;background:#F8FBFF}
.hw-card-header{padding:16px 18px;display:flex;align-items:flex-start;gap:14px}
.hw-card-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;background:#F0FDF4}
.hw-card.overdue .hw-card-icon{background:#FEE2E2}
.hw-card.done .hw-card-icon{background:#ECFDF5}
.hw-card.graded .hw-card-icon{background:#EFF6FF}
.hw-card-meta{flex:1;min-width:0}
.hw-card-title{font-size:.95rem;font-weight:700;color:#071B3B;margin:0 0 4px}
.hw-card-subject{font-size:.78rem;color:#6B7280;margin:0 0 4px}
.hw-card-teacher{font-size:.76rem;color:#F97316;font-weight:600;margin-bottom:4px}
.hw-card-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.hw-badge{font-size:.68rem;font-weight:700;padding:2px 9px;border-radius:99px;display:inline-block}
.hw-badge-due{background:#FEF3C7;color:#92400E}
.hw-badge-overdue{background:#FEE2E2;color:#DC2626}
.hw-badge-done{background:#ECFDF5;color:#059669}
.hw-badge-graded{background:#EFF6FF;color:#2563EB}
.hw-badge-subject{background:#F3F4F6;color:#374151}
.hw-badge-file-present{background:#F0FDF4;color:#166534}
.hw-desc{padding:0 18px 14px;font-size:.82rem;color:#4B5563;border-top:1px solid #F1F5F9;padding-top:12px}
.hw-desc p{margin:0}

/* ── Bouton télécharger fichier ── */
.hw-dl-section{padding:10px 18px;border-top:1px solid #F1F5F9}
.hw-dl-btn{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;font-size:.84rem;font-weight:600;text-decoration:none;border:1.5px dashed #E2E8F0;transition:all .2s;cursor:pointer}
.hw-dl-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.hw-dl-teacher{background:#F0FDF4;border-color:#86EFAC;color:#166534}
.hw-dl-student{background:#EFF6FF;border-color:#BFDBFE;color:#1E40AF}
.hw-dl-corrected{background:#FFFBEB;border-color:#FDE68A;color:#92400E}

/* ── Formulaire soumission élève ── */
.hw-submit-form{padding:14px 18px;background:#F8FAFC;border-top:1px solid #E2E8F0}
.hw-submit-label{font-size:.82rem;font-weight:600;color:#071B3B;margin-bottom:8px;display:block}
.hw-submit-textarea{width:100%;border:1.5px solid #E2E8F0;border-radius:10px;padding:10px 12px;font-size:.84rem;color:#111;resize:vertical;min-height:80px;transition:border-color .2s;box-sizing:border-box;font-family:inherit}
.hw-submit-textarea:focus{outline:none;border-color:#F97316}
.hw-submit-actions{display:flex;gap:10px;margin-top:10px;align-items:center;flex-wrap:wrap}
.hw-btn-submit{background:#F97316;color:#fff;border:none;border-radius:10px;padding:10px 22px;font-size:.85rem;font-weight:700;cursor:pointer;transition:transform .15s;text-align:center}
.hw-btn-submit:hover{transform:scale(1.02)}
.hw-btn-toggle{background:none;border:1.5px solid #E2E8F0;border-radius:10px;padding:9px 18px;font-size:.83rem;font-weight:600;cursor:pointer;color:#6B7280;transition:all .2s}
.hw-btn-toggle:hover{border-color:#F97316;color:#F97316}

/* ── Résultat / correction ── */
.hw-result{padding:14px 18px;background:#F0FDF4;border-top:1px solid #A7F3D0}
.hw-result.graded{background:#EFF6FF;border-color:#BFDBFE}
.hw-result-title{font-size:.82rem;font-weight:700;color:#065F46;margin:0 0 6px}
.hw-result.graded .hw-result-title{color:#1E40AF}
.hw-result-grade{font-size:1.3rem;font-weight:800;color:#2563EB;margin-bottom:4px}
.hw-result-appre{font-size:.78rem;font-weight:600;background:#FEF3C7;color:#92400E;border-radius:99px;padding:2px 10px;margin-left:8px;vertical-align:middle}
.hw-result-feedback{font-size:.82rem;color:#374151;margin-top:6px;font-style:italic}

/* ── Upload zones ── */
.hw-upload-zone{border:2px dashed #D1D5DB;border-radius:14px;padding:24px 20px;text-align:center;cursor:pointer;transition:all .2s;background:#FAFAFA;margin-top:6px}
.hw-upload-zone:hover{border-color:#F97316;background:#FFF7ED}
.hw-upload-icon{font-size:2rem;margin-bottom:8px}
.hw-upload-text{font-size:.85rem;color:#4B5563;margin-bottom:4px}
.hw-upload-link{color:#F97316;font-weight:600;text-decoration:underline}
.hw-upload-hint{font-size:.72rem;color:#9CA3AF}
.hw-upload-preview{margin-top:10px}
.hw-file-chosen{display:flex;align-items:center;gap:10px;justify-content:center;padding:10px 14px;background:#F0FDF4;border-radius:10px;border:1px solid #86EFAC}
.hw-upload-small{border:1.5px dashed #D1D5DB;border-radius:10px;padding:12px 16px;text-align:center;cursor:pointer;font-size:.83rem;color:#6B7280;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
.hw-upload-small:hover{border-color:#F97316;color:#F97316;background:#FFF7ED}

/* ── Empty state ── */
.hw-empty{text-align:center;padding:48px 20px;background:#fff;border-radius:16px;border:2px dashed #E2E8F0}
.hw-empty-icon{font-size:2.5rem;margin-bottom:12px}
.hw-empty h3{font-size:1rem;font-weight:700;color:#071B3B;margin:0 0 6px}
.hw-empty p{font-size:.84rem;color:#6B7280;margin:0}

/* ════ PAGE ENSEIGNANT ════════════════════════════════════════ */
.hw-teacher-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.hw-teacher-title{font-size:1.4rem;font-weight:800;color:#071B3B;margin:0}
.hw-teacher-sub{font-size:.85rem;color:#6B7280;margin:4px 0 0}

/* Formulaire création */
.hw-create-card{background:#fff;border-radius:20px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.07);border:1px solid #E2E8F0;margin-bottom:28px}
.hw-create-title{font-size:1.05rem;font-weight:700;color:#071B3B;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid #F0FDF4}
.hw-create-form{display:flex;flex-direction:column;gap:14px}
.hw-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.hw-form-group{display:flex;flex-direction:column;gap:6px}
.hw-full{grid-column:1/-1}
.hw-form-label{font-size:.8rem;font-weight:700;color:#374151}
.hw-form-input{border:1.5px solid #E2E8F0;border-radius:10px;padding:10px 12px;font-size:.85rem;color:#111;transition:border-color .2s;font-family:inherit;background:#fff}
.hw-form-input:focus{outline:none;border-color:#F97316}
textarea.hw-form-input{resize:vertical;min-height:80px}
.hw-students-grid{display:flex;flex-wrap:wrap;gap:8px;background:#F8FAFC;border-radius:10px;padding:10px 12px;border:1px solid #E2E8F0;max-height:130px;overflow-y:auto}
.hw-student-check{display:flex;align-items:center;gap:6px;font-size:.82rem;cursor:pointer;padding:4px 8px;border-radius:8px;transition:background .15s}
.hw-student-check:hover{background:#FEF3C7}
.hw-student-check input{accent-color:#F97316}
.hw-form-actions{display:flex;gap:10px;padding-top:6px}
.hw-submit-btn{min-width:180px}

/* Liste devoirs enseignant */
.hw-teacher-list{display:flex;flex-direction:column;gap:14px}
.hw-teacher-card{background:#fff;border-radius:16px;padding:18px 20px;box-shadow:0 1px 8px rgba(0,0,0,.06);border:1px solid #E2E8F0;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;transition:box-shadow .2s}
.hw-teacher-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.hw-tc-left{display:flex;gap:14px;flex:1;min-width:260px}
.hw-tc-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.hw-tc-info{flex:1;min-width:0}
.hw-tc-title{font-size:.95rem;font-weight:700;color:#071B3B;margin-bottom:4px}
.hw-tc-meta{font-size:.78rem;color:#6B7280;margin-bottom:6px;display:flex;flex-wrap:wrap;gap:6px}
.hw-tc-desc{font-size:.76rem;color:#9CA3AF;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:500px}
.hw-tc-badges{display:flex;flex-wrap:wrap;gap:6px}
.hw-badge-type{font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:99px;background:#EFF6FF;color:#2563EB}
.hw-badge-file{font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:99px;background:#F0FDF4;color:#166534}
.hw-badge-status{font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:99px}
.hw-tc-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.hw-tc-btn{white-space:nowrap;text-decoration:none}

/* ════ PAGE SOUMISSIONS ENSEIGNANT ════════════════════════════ */
.hw-sub-card{background:#fff;border-radius:16px;padding:18px 20px;box-shadow:0 1px 8px rgba(0,0,0,.06);border:1px solid #E2E8F0;margin-bottom:16px;transition:box-shadow .2s}
.hw-sub-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.09)}
.hw-sub-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.hw-sub-avatar{width:40px;height:40px;border-radius:50%;background:#F0FDF4;color:#166534;font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid #86EFAC}
.hw-sub-info{flex:1;min-width:150px}
.hw-sub-name{font-size:.93rem;font-weight:700;color:#071B3B}
.hw-sub-date{font-size:.72rem;color:#9CA3AF;margin-top:2px}
.hw-sub-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
.hw-grade-badge{padding:6px 16px;border-radius:12px;font-size:1.1rem;font-weight:800;border:2px solid}
.hw-status-pill{font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:99px}
.hw-sub-content{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:10px;padding:12px 14px;font-size:.84rem;color:#374151;line-height:1.6;white-space:pre-wrap;margin-top:8px;max-height:200px;overflow-y:auto}
.hw-feedback-box{margin-top:10px;background:#ECFDF5;border:1px solid #A7F3D0;border-radius:10px;padding:10px 14px;font-size:.82rem;color:#065F46}
.hw-sub-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.hw-toggle-btn{padding:8px 16px;border-radius:10px;font-size:.8rem;font-weight:700;cursor:pointer;border:none;transition:all .2s;background:#F1F5F9;color:#374151}
.hw-toggle-btn:hover{transform:scale(1.02)}
.hw-toggle-green{background:#ECFDF5;color:#059669}
.hw-toggle-blue{background:#EFF6FF;color:#2563EB}
.hw-toggle-orange{background:#FFF7ED;color:#C2410C}
.hw-panel{margin-top:14px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:16px}
.hw-grade-form{display:grid;grid-template-columns:120px 1fr 1fr auto;gap:12px;align-items:start}
.hw-grade-field{display:flex;flex-direction:column;gap:6px}
.hw-grade-field-grow{grid-column:span 1}

/* ════ PAGE DÉTAIL ÉLÈVE ════════════════════════════════════ */
.hw-detail-header{display:flex;gap:18px;align-items:flex-start;background:#fff;border-radius:20px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.07);border:1px solid #E2E8F0;margin-bottom:20px;flex-wrap:wrap}
.hw-detail-icon{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0}
.hw-detail-info{flex:1;min-width:200px}
.hw-detail-type{font-size:.8rem;font-weight:600;color:#6B7280;margin-bottom:6px}
.hw-detail-title{font-size:1.3rem;font-weight:800;color:#071B3B;margin:0 0 10px}
.hw-detail-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.82rem;color:#6B7280}
.hw-detail-section{background:#fff;border-radius:16px;padding:20px;box-shadow:0 1px 8px rgba(0,0,0,.06);border:1px solid #E2E8F0;margin-bottom:16px}
.hw-detail-section-title{font-size:.9rem;font-weight:700;color:#071B3B;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid #F0FDF4}
.hw-detail-desc{font-size:.88rem;color:#374151;line-height:1.7}
.hw-file-card{display:flex;align-items:center;gap:14px;background:#F0FDF4;border:1.5px solid #86EFAC;border-radius:14px;padding:16px 18px;flex-wrap:wrap}
.hw-file-card-icon{font-size:2rem;flex-shrink:0}
.hw-file-card-info{flex:1;min-width:120px}
.hw-file-card-name{font-size:.9rem;font-weight:700;color:#166534}
.hw-file-card-hint{font-size:.72rem;color:#4ADE80;margin-top:2px}
.hw-file-dl-btn{flex-shrink:0}
.hw-grade-result{background:linear-gradient(135deg,#071B3B,#0C2248);border-radius:16px;padding:24px;color:#fff;text-align:center}
.hw-grade-big{font-size:3rem;font-weight:900;color:#fff}
.hw-grade-big span{font-size:1.5rem;color:rgba(255,255,255,.6)}
.hw-grade-appre{display:inline-block;background:#F97316;color:#fff;border-radius:99px;padding:4px 14px;font-size:.82rem;font-weight:700;margin-top:10px}
.hw-grade-feedback{font-size:.85rem;color:rgba(255,255,255,.8);margin-top:12px;font-style:italic}
.hw-submitted-box{background:#F0FDF4;border:1.5px solid #86EFAC;border-radius:12px;padding:16px}
.hw-submitted-content{font-size:.84rem;color:#374151;line-height:1.6;white-space:pre-wrap;margin-top:8px;background:#fff;border-radius:8px;padding:10px}
.hw-submit-form-detail{display:flex;flex-direction:column;gap:14px}

/* ════ RESPONSIVE ════════════════════════════════════════════ */
@media(max-width:768px){
  .hw-kpi-row{grid-template-columns:repeat(2,1fr)}
  .hw-grade-form{grid-template-columns:1fr 1fr}
  .hw-grade-field:last-child{grid-column:1/-1}
}
@media(max-width:600px){
  .hw-kpi-row{grid-template-columns:repeat(2,1fr)}
  .hw-teacher-card{flex-direction:column}
  .hw-tc-actions{width:100%;justify-content:flex-start}
  .hw-sub-header{flex-wrap:wrap}
  .hw-sub-right{margin-left:0;width:100%}
  .hw-grade-form{grid-template-columns:1fr}
  .hw-detail-header{flex-direction:column}
  .hw-detail-icon{width:48px;height:48px;font-size:1.4rem}
  .hw-submit-actions{flex-direction:column;align-items:stretch}
  .hw-btn-submit,.hw-btn-toggle{width:100%;text-align:center}
  .hw-form-actions{flex-direction:column}
  .hw-submit-btn{width:100%}
}

/* ══ FIN SYSTÈME DEVOIRS v1.0 ══════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   LIVE / JITSI SIMPLE — Tableau de bord enseignant
   ══════════════════════════════════════════════════════════════ */

/* Bannière info */
.live-info-card{display:flex;align-items:flex-start;gap:12px;background:linear-gradient(135deg,#F0FDF4,#DCFCE7);border:1.5px solid #86EFAC;border-radius:14px;padding:14px 16px;margin-bottom:20px;font-size:.82rem;color:#166534;line-height:1.6}
.live-info-icon{font-size:1.6rem;flex-shrink:0}
.live-info-text strong{display:block;font-weight:700;margin-bottom:2px;font-size:.85rem;color:#166534}
.live-info-text span{color:#15803D}

/* Cards sessions live */
.live-session-card{background:#fff;border-radius:16px;padding:18px 20px;box-shadow:0 2px 10px rgba(0,0,0,.07);border:1.5px solid #E2E8F0;transition:box-shadow .2s}
.live-session-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.live-session-on{border-color:#FCA5A5;background:linear-gradient(135deg,#FFFBFB,#fff)}
.live-session-ended{border-color:#E2E8F0;opacity:.75}
.live-session-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.live-session-dot{width:44px;height:44px;border-radius:12px;background:#F0FDF4;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.live-session-on .live-session-dot{background:#FEE2E2}
.live-session-info{flex:1;min-width:0}
.live-session-title{font-size:.95rem;font-weight:700;color:#071B3B;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.live-session-badge{font-size:.65rem;font-weight:800;padding:2px 9px;border-radius:99px;white-space:nowrap}
.lbadge-live{background:#FEE2E2;color:#EF4444;animation:livePulse 2s infinite}
.lbadge-sched{background:#EFF6FF;color:#2563EB}
.lbadge-ended{background:#F1F5F9;color:#64748B}
.live-session-meta{font-size:.76rem;color:#6B7280;margin-bottom:4px}
.live-session-desc{font-size:.75rem;color:#9CA3AF;margin-top:2px}
.live-session-link{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.live-session-link-label{font-size:.72rem;font-weight:600;color:#6B7280;flex-shrink:0}
.live-session-link-url{font-size:.72rem;color:#2563EB;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.live-copy-mini{background:#EFF6FF;color:#2563EB;border:none;border-radius:6px;padding:3px 7px;font-size:.8rem;cursor:pointer;flex-shrink:0;transition:background .2s}
.live-copy-mini:hover{background:#DBEAFE}
.live-session-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-live-on{background:#10B981!important;color:#fff!important}
.btn-live-start{background:#EF4444!important;color:#fff!important}

@media(max-width:600px){
  .live-session-top{flex-direction:column}
  .live-session-link-url{max-width:160px}
  .live-session-actions{flex-direction:column}
  .live-session-actions .btn-sm{width:100%;text-align:center}
}

/* ══ FIN LIVE CSS ══════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   BOTTOM NAV — Espace Parent
   ══════════════════════════════════════════════════════════════ */

/* Couleur active : vert (thème parent) au lieu d'orange */
.parent-bottom-nav .bottom-nav-item.active,
.parent-bottom-nav .bottom-nav-item:hover {
  color: #10B981 !important;
}

/* Bandeau vert en haut de la barre */
.parent-bottom-nav {
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, #10B981 50%, #F97316 50%) 1;
}

/* ── Correctifs layout parent mobile ──────────────────────── */

/* Welcome banner : titre plus compact sur très petit écran */
@media (max-width: 380px) {
  .parent-welcome { padding: 16px; }
  .parent-welcome-title { font-size: 1.15rem; }
  .parent-alert-chip, .parent-ok-chip { font-size: .74rem; padding: 4px 10px; }
}

/* Cards enfants : forcer 1 colonne même sur tablette étroite */
@media (max-width: 700px) {
  .parent-children-grid { grid-template-columns: 1fr !important; }
  .parent-child-stats { grid-template-columns: repeat(3,1fr); }
}

/* Actions de la card enfant : boutons en pleine largeur sur mobile */
@media (max-width: 480px) {
  .parent-child-card-actions { flex-direction: column; gap: 6px; }
  .parent-child-card-actions .btn { width: 100%; text-align: center; }
  .parent-card { padding: 16px; }
  .parent-quick-actions { grid-template-columns: 1fr 1fr; }
  .parent-quick-btn { padding: 10px 8px; font-size: .8rem; }
}

/* Tableau sujets : colonnes fixes adaptées au mobile */
@media (max-width: 480px) {
  .parent-subject-row { grid-template-columns: 90px 1fr 50px; gap: 6px; }
  .parent-subject-name { font-size: .8rem; }
  .parent-subject-avg { font-size: .8rem; }
}

/* Topbar : avatar parent sans débordement */
@media (max-width: 480px) {
  .parent-sidebar-avatar.topbar-avatar { width: 30px !important; height: 30px !important; font-size: .78rem !important; }
}

/* ══ FIN PARENT NAV CSS ══════════════════════════════════════ */

/* ── Correctifs débordement horizontal — cartes parent dashboard ── */

/* 1. Contraindre la colonne flex dans la grille */
.parent-dash-grid { width: 100%; }
.parent-dash-col { width: 100%; max-width: 100%; }

/* 2. Cards : padding plus serré sur mobile, pas de débordement */
@media (max-width: 640px) {
  .parent-card { padding: 14px 12px !important; overflow: hidden; }
  .parent-card-header { overflow: visible; gap: 6px; }
  .parent-card-header .link-muted { font-size: .8rem; white-space: nowrap; flex-shrink: 0; }
  .parent-card-title { font-size: .88rem; }
}

/* 3. Homework items : supprimer l'overflow:hidden de l'item
      (la carte elle-même a overflow:hidden, c'est suffisant)
      + garantir que la date s'affiche toujours */
@media (max-width: 640px) {
  .parent-hw-item { overflow: visible; gap: 8px; }
  .parent-hw-body { min-width: 0; overflow: hidden; flex: 1 1 0; }
  .parent-hw-title { font-size: .84rem; }
  .parent-hw-meta { font-size: .74rem; }
  .parent-hw-due { font-size: .75rem; flex-shrink: 0; min-width: 0; }
}

/* 4. Sur très petits écrans (≤400px) : date sur la 2ème ligne */
@media (max-width: 400px) {
  .parent-hw-item { flex-wrap: wrap; row-gap: 2px; }
  .parent-hw-urgency { align-self: flex-start; margin-top: 3px; }
  .parent-hw-body { flex: 1 1 160px; }
  .parent-hw-due {
    flex: 0 0 auto;
    margin-left: calc(4px + 8px); /* urgency + gap */
    font-size: .74rem;
  }
}

/* 5. Announce items */
@media (max-width: 640px) {
  .parent-announce-title { font-size: .84rem; }
  .parent-announce-date { font-size: .72rem; }
}

/* 6. Event items */
@media (max-width: 640px) {
  .parent-event-item { overflow: visible; gap: 8px; }
  .parent-event-icon { width: 30px; height: 30px; font-size: .9rem; }
  .parent-event-title { font-size: .83rem; }
  .parent-event-date { font-size: .72rem; }
  .parent-event-type-badge { font-size: .68rem; padding: 2px 6px; max-width: 64px; }
}

/* 7. Payment items */
@media (max-width: 640px) {
  .parent-pay-label { font-size: .84rem; }
  .parent-pay-meta { font-size: .72rem; }
  .parent-pay-amount { font-size: .82rem; font-weight: 700; white-space: nowrap; }
}

/* 8. Quick actions */
@media (max-width: 400px) {
  .parent-quick-actions { grid-template-columns: 1fr 1fr; gap: 6px; }
  .parent-quick-btn { font-size: .78rem; padding: 10px 6px; }
}

/* ================================================================
   OPTIMISATIONS MOBILE & PERFORMANCE — Africa Low-Bandwidth
   Ajout 2026-05-18 : corrections ciblées sans modifier l'existant
   ================================================================ */

/* ── 1. VIDEOS-GRID : breakpoints mobiles manquants ─────────────
   Situation : .videos-grid et .videos-grid-lg n'avaient aucun
   breakpoint → 3 colonnes sur tout écran → illisible sur mobile */
@media (max-width: 599px) {
  .videos-grid,
  .videos-grid-lg {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
@media (max-width: 360px) {
  .videos-grid,
  .videos-grid-lg {
    grid-template-columns: 1fr;
  }
}

/* ── 2. NAV-DRAWER : correctif hauteur iOS Safari ───────────────
   Sur iOS Safari, 100vh inclut la barre d'adresse → drawer trop
   grand. 100dvh (dynamic viewport height) corrige ce problème. */
@supports (height: 100dvh) {
  .nav-drawer { height: 100dvh; }
}

/* ── 3. AUTH-SECTION : correctif hauteur iOS Safari ────────────
   min-height: 100vh peut provoquer un débordement vertical sur
   iOS quand la barre d'adresse est visible. */
@supports (min-height: 100dvh) {
  .auth-section { min-height: 100dvh; }
}

/* ── 4. DASH-LAYOUT : correctif min-height iOS Safari ──────────*/
@supports (min-height: 100dvh) {
  .dash-layout { min-height: 100dvh; }
}

/* ── 5. WILL-CHANGE sur éléments animés ─────────────────────────
   Promotion vers couche composite GPU → évite les repaints sur
   Android bas de gamme (Tecno, Itel, etc.) */
.hero-deco                { will-change: transform; }
.premium-graduates-img    { will-change: transform; }

/* ── 6. PREFERS-REDUCED-MOTION ──────────────────────────────────
   Désactive les animations pour :
   · utilisateurs ayant activé "Réduire les animations" (Android)
   · appareils lents : les animations coûtent CPU/GPU/batterie */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* AOS (Animate On Scroll) : forcer visibilité immédiate */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 7. VIDEO-CARD : taille min pour lisibilité sur 2 colonnes ──*/
@media (max-width: 599px) {
  .video-card .video-title { font-size: .8rem; }
  .video-card .video-meta  { font-size: .72rem; }
}

/* ── 8. BOTTOM-NAV : safe-area-inset pour iPhone X+ (notch) ────
   Empêche la barre de navigation d'être cachée par le home
   indicator sur les iPhones modernes */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
  @media (min-width: 900px) {
    body { padding-bottom: 0; }
  }
}

/* ── 9. PDF-MODAL-BOX : correctif hauteur iOS Safari ───────────*/
@supports (height: 100dvh) {
  .pdf-modal-box { height: 90dvh; }
  @media (max-width: 600px) {
    .pdf-modal-box { height: 95dvh; }
  }
}

/* ── 10. SCROLL HORIZONTAL GLOBAL : protection anti-débordement ─
   Évite le défilement horizontal sur tout navigateur mobile */
html, body {
  max-width: 100vw;
  overscroll-behavior-x: none;
}


/* ================================================================
   UNIFORMISATION GRILLES MOBILES — Android / iPhone / Chrome / Safari
   Règle absolue : petites cartes = 2 colonnes, vidéos = 3 colonnes
   ================================================================ */

/* ── A. VIDÉOS : TOUJOURS 3 colonnes sur tout écran ─────────────────────────
   Override les règles de la session précédente qui forçaient 2 cols / 1 col.
   Sur mobile 3 cols : cartes petites, titres compacts, thumbnails propres.   */
.videos-grid,
.videos-grid-lg {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

/* ── B. CARTES (cours, quiz, docs, shop) : TOUJOURS 2 colonnes sur mobile ───
   Annule les règles 1fr !important des lignes 8277 et 8470.                  */
@media (max-width: 640px) {
  .courses-grid,
  .courses-grid-lg,
  .courses-row,
  .course-grid,
  .quizzes-grid,
  .documents-grid,
  .home-shop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .courses-grid,
  .courses-grid-lg,
  .courses-row,
  .course-grid,
  .quizzes-grid,
  .documents-grid,
  .home-shop-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* quiz-grid et video-grid forcés à 1fr à la ligne 8277 → annuler */
  .quiz-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .video-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── C. MIN-WIDTH: 0 sur tous les éléments grid ─────────────────────────────
   BUG ANDROID CRITIQUE : sans min-width:0, les enfants d'une cellule grid
   avec du texte long forcent la cellule à être plus large que 1fr.
   Cela casse l'alignement sur Android Chrome mais pas sur iOS Safari.        */
.courses-grid > *,
.courses-grid-lg > *,
.courses-row > *,
.course-grid > *,
.quizzes-grid > *,
.documents-grid > *,
.videos-grid > *,
.videos-grid-lg > *,
.video-grid > *,
.home-shop-grid > *,
.shop-grid > * {
  min-width: 0;
  max-width: 100%;
}

/* ── D. VIDEO-CARD : texte adapté aux 3 colonnes sur petit écran ─────────────
   3 colonnes sur 360px = ~109px par carte. Les textes doivent être compacts.  */
@media (max-width: 599px) {
  .video-card {
    min-width: 0;
    overflow: hidden;
    width: 100% !important;
  }
  .video-body   { padding: 5px 6px 7px !important; }
  .video-title  { font-size: .69rem !important; line-height: 1.28 !important;
                  -webkit-line-clamp: 2; margin: 2px 0 3px !important; }
  .video-stats  { font-size: .58rem !important; gap: 3px !important; }
  .video-duration { font-size: .56rem !important; padding: 1px 3px !important; }
  .course-level { font-size: .56rem !important; }
}

@media (max-width: 400px) {
  /* Sur très petits écrans : masquer stats secondaires pour garder le titre */
  .video-stats  { display: none !important; }
  .video-title  { font-size: .64rem !important; -webkit-line-clamp: 3; }
}

/* ── E. COURSE-CARD / QUIZ-CARD : overflow propre sur 2 colonnes ────────────*/
@media (max-width: 640px) {
  .course-card,
  .course-card-v2 {
    min-width: 0;
    width: 100% !important;
    overflow: hidden;
  }
  .course-title-v2,
  .course-title {
    font-size: .78rem !important;
    -webkit-line-clamp: 2;
  }
  .course-body-v2,
  .course-body { padding: 8px 10px 10px !important; }

  .quiz-card {
    min-width: 0;
    overflow: hidden;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 10px !important;
    gap: 8px !important;
  }
  .quiz-icon { width: 40px !important; height: 40px !important; font-size: 1.1rem !important; }
  .quiz-card:hover { transform: none !important; }
}

/* ── F. DOCUMENTS GRID : 2 colonnes mobile ───────────────────────────────── */
@media (max-width: 640px) {
  .documents-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .doc-card       { min-width: 0; overflow: hidden; }
}

/* ── G. QUIZZES-GRID base : surclasser le 1fr initial ───────────────────────
   La règle de base .quizzes-grid définit grid-template-columns: 1fr (1 col).
   Sur tout écran < 600px c'est 1 colonne. On force 2 cols dès le départ.    */
@media (max-width: 599px) {
  .quizzes-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}


/* ── Animation slide-up (bannière notification push) ─── */
@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(24px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}

/* =====================================================================
   MENTORA FRONTEND FIXES — Audit UI/UX Complet
   Corrections : sidebar desktop, grilles responsive, flash, a11y, touch
   ===================================================================== */

/* ── 1. SIDEBAR DASHBOARD — Visible permanente sur desktop ≥1024px ──
   La sidebar passe de fixed hors-flux à sticky dans le flex-layout.
   dash-main prend le reste de l'espace. Aucun margin-left à forcer.  */
@media (min-width: 1024px) {
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    transform: translateX(0) !important;
    flex-shrink: 0;
    box-shadow: 1px 0 0 var(--border);
  }
  .sidebar-open { display: none !important; }
  /* Overlay inutile sur desktop */
  .overlay { display: none !important; }
}

/* ── 2. FLASH TYPES MANQUANTS (.flash-warning, .flash-info) ────────── */
.flash-warning { background: #FFFBEB; color: #92400E; border-left: 4px solid #F59E0B; }
.flash-info    { background: #EFF6FF; color: #1D4ED8; border-left: 4px solid #3B82F6; }

/* ── 3. GRILLE KPI ADMIN — 2 colonnes sur mobile ───────────────────── */
@media (max-width: 640px) {
  .ap-kpi { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 4. GRILLE STATS ENSEIGNANT — 2 colonnes sur mobile ────────────── */
@media (max-width: 640px) {
  .tp-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 5. ACTIONS RAPIDES ENSEIGNANT — 2 colonnes sur très petit écran ─ */
@media (max-width: 380px) {
  .tp-actions { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 6. DASH-CONTENT — padding-bottom pour bottom-nav sur mobile ───── */
@media (max-width: 899px) {
  .dash-content {
    padding-bottom: calc(20px + 64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── 7. FLASH dans dash-content — margin reset ─────────────────────── */
.dash-content > .flash { margin: 0 0 16px; }

/* ── 8. SKIP LINK — visible au focus clavier ───────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}
.skip-link:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100000;
  background: var(--navy);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}

/* ── 9. BTN-ICON — taille touch minimale 44×44px (WCAG 2.1 AA) ─────── */
.btn-icon {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── 10. SIDEBAR CLOSE BUTTON — zone touch suffisante ──────────────── */
.sidebar-close {
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

/* ── 11. TOAST — au-dessus de tout sur desktop ─────────────────────── */
.toast-container { z-index: 99999 !important; }

/* ── 12. NOTIF DROPDOWN — z-index sûr au-dessus sidebar ────────────── */
.notif-dropdown { z-index: 3000 !important; }

/* ── 13. SIDEBAR BOTTOM-ACTIONS — collée en bas, séparateur propre ─── */
.sidebar-bottom-actions {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ── 14. LEVEL PILLS HOME — wrapping propre sur mobile ─────────────── */
@media (max-width: 480px) {
  .level-pills {
    flex-wrap: wrap;
    gap: 6px;
    overflow-x: unset;
  }
}

/* ── 15. BOTTOM NAV — item actif : icône colorée ───────────────────── */
.bottom-nav-item.active svg { stroke: var(--green); }
.bottom-nav-item:hover  svg { stroke: var(--green); }

/* ── 16. PARENT BODY — padding-bottom avec bottom-nav parent ────────── */
.parent-body .dash-content {
  padding-bottom: calc(20px + 64px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (min-width: 900px) {
  .parent-body .dash-content { padding-bottom: 24px !important; }
}

/* ── 17. NAV SEARCH — z-index visible au-dessus du contenu ─────────── */
.nav-search { z-index: 999; position: relative; }

/* ── 18. SIDEBAR SECTION LABEL — cohérence typographique ────────────── */
.sidebar .sidebar-section-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 16px 12px 4px;
  user-select: none;
}

/* ── 19. TOPBAR SEARCH — cache proprement sur très petits écrans ────── */
@media (max-width: 380px) {
  .topbar-search { display: none !important; }
}

/* ── 20. FLASH SUCCESS — cohérence couleur (double règle supprimée) ─── */
.flash-success { background: #ECFDF5; color: #065F46; border-left: 4px solid #10B981; }
.flash-error   { background: #FEF2F2; color: #991B1B; border-left: 4px solid #EF4444; }

/* ── 21. HERO CTA — boutons full-width sur très petit écran ─────────── */
@media (max-width: 380px) {
  .hero-cta-row { flex-direction: column; gap: 10px; }
  .btn-hero-primary, .btn-hero-ghost { width: 100%; text-align: center; }
}

/* ── 22. SIDEBAR PARENT (white sidebar avec avatar vert) ────────────── */
.parent-sidebar .sidebar-user { background: linear-gradient(135deg, #ECFDF5, #F0FDF4); }
.parent-sidebar-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #10B981;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem;
  flex-shrink: 0;
}

/* ── 23. TOPBAR AVATAR — cohérence taille ───────────────────────────── */
.topbar-avatar {
  width: 34px !important;
  height: 34px !important;
  font-size: .85rem !important;
  flex-shrink: 0;
}

/* ── 24. GRILLE AS-GRID2 ADMIN — 1 col sur tablette ────────────────── */
@media (max-width: 900px) {
  .as-grid2 { grid-template-columns: 1fr !important; }
}

/* ── 25. SIDEBAR DARK — couleur du fond (dashboard) ─────────────────
   La sidebar de base est blanche. Sur admin on renforce la dark.        */
.admin-sidebar, .sidebar[data-role="admin"] {
  background: var(--navy);
}
.admin-sidebar .sidebar-username,
.admin-sidebar .sidebar-link,
.sidebar[data-role="admin"] .sidebar-link {
  color: rgba(255,255,255,.75);
}
.admin-sidebar .sidebar-link.active,
.sidebar[data-role="admin"] .sidebar-link.active {
  background: rgba(249,115,22,.15);
  color: #F97316;
}

/* ── 26. NAVBAR — z-index au-dessus du cookie overlay ───────────────── */
.navbar { z-index: 1000; }

/* ── 27. SCROLL PROGRESS BAR — ne pas interférer avec sticky topbar ── */
.scroll-progress { z-index: 1001; }

/* ── 28. DASH TOPBAR — shadow sur scroll ───────────────────────────── */
.dash-topbar { transition: box-shadow .2s; }
.dash-topbar.scrolled { box-shadow: 0 2px 12px rgba(7,27,59,.08); }

/* ══════════════════════════════════════════════════════════════════════
   PLACEMENT HERO SECTION — Système de réservation & placement Mentora
   ══════════════════════════════════════════════════════════════════════ */

/* ── Wrapper principal ───────────────────────────────────────────────── */
.placement-hero-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #071B3B 0%, #0D2952 40%, #0a1f45 70%, #071B3B 100%);
  padding: 80px 0 90px;
  isolation: isolate;
}

/* ── Fond animé — grille lumineuse ────────────────────────────────── */
.placement-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(16,185,129,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,.06) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 0;
}

/* ── Halo de lumière centrale ────────────────────────────────────── */
.placement-hero-section::after {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse at center,
    rgba(16,185,129,.18) 0%,
    rgba(245,158,11,.07) 35%,
    transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* ── Particles flottantes ────────────────────────────────────────── */
.ph-particle {
  position: absolute;
  border-radius: 50%;
  opacity: .35;
  animation: ph-float 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.ph-p1 { width:220px; height:220px; background:radial-gradient(circle,rgba(16,185,129,.25),transparent 70%); top:-60px; right:8%; animation-delay:0s; }
.ph-p2 { width:140px; height:140px; background:radial-gradient(circle,rgba(249,115,22,.3),transparent 70%); bottom:30px; left:5%; animation-delay:-3s; }
.ph-p3 { width:90px; height:90px; background:radial-gradient(circle,rgba(139,92,246,.35),transparent 70%); top:40%; right:20%; animation-delay:-5s; }
.ph-p4 { width:60px; height:60px; background:radial-gradient(circle,rgba(59,130,246,.4),transparent 70%); top:15%; left:15%; animation-delay:-2s; }
.ph-p5 { width:180px; height:180px; background:radial-gradient(circle,rgba(245,158,11,.15),transparent 70%); bottom:-40px; right:30%; animation-delay:-6s; }

@keyframes ph-float {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.06); }
}

/* ── Tout le contenu au-dessus des pseudo-éléments ─────────────── */
.placement-hero-section .container { position: relative; z-index: 1; text-align: center; }

/* ── Badge "Nouveau" ─────────────────────────────────────────────── */
.ph-badge-wrap { margin-bottom: 24px; }
.ph-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16,185,129,.15);
  border: 1px solid rgba(16,185,129,.4);
  color: #6EE7B7;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 16px 6px 10px;
  border-radius: 999px;
  position: relative;
}
.ph-badge-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  animation: ph-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ph-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.7); }
  50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}

/* ── Titre ───────────────────────────────────────────────────────── */
.ph-headline { max-width: 760px; margin: 0 auto 36px; }
.ph-title {
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
  margin-bottom: 18px;
}
.ph-title-accent {
  background: linear-gradient(90deg, #10B981, #34D399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ph-title-under {
  position: relative;
  color: #F97316;
  -webkit-text-fill-color: #F97316;
  display: inline-block;
}
.ph-title-under::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #F97316, #FBBF24);
  border-radius: 2px;
  opacity: .6;
}
.ph-subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,.7);
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto;
}

/* ── Boutons CTA ─────────────────────────────────────────────────── */
.ph-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 56px;
}
.ph-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.ph-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.1);
  transform: translateX(-100%);
  transition: transform .3s ease;
}
.ph-btn:hover::before { transform: translateX(0); }
.ph-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.15);
}

/* Bouton principal — orange doré */
.ph-btn-primary {
  background: linear-gradient(135deg, #F97316, #F59E0B);
  color: #fff;
  box-shadow: 0 8px 30px rgba(249,115,22,.45), 0 0 0 0 rgba(249,115,22,.3);
  animation: ph-glow-orange 3s ease-in-out infinite;
}
.ph-btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 40px rgba(249,115,22,.55);
  color: #fff;
}
@keyframes ph-glow-orange {
  0%,100% { box-shadow: 0 8px 30px rgba(249,115,22,.4); }
  50% { box-shadow: 0 8px 40px rgba(249,115,22,.7), 0 0 0 6px rgba(249,115,22,.1); }
}

/* Bouton secondaire — vert émeraude */
.ph-btn-secondary {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff;
  box-shadow: 0 8px 30px rgba(16,185,129,.35);
}
.ph-btn-secondary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 40px rgba(16,185,129,.5);
  color: #fff;
}

/* Bouton ghost — contour blanc */
.ph-btn-ghost {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.9);
  border: 1.5px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ph-btn-ghost:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.5);
  transform: translateY(-3px) scale(1.03);
  color: #fff;
}

/* ── Grille de 4 cartes feature ──────────────────────────────────── */
.ph-features-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

/* Carte de base */
.ph-feat-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: left;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
  position: relative;
  overflow: hidden;
}
.ph-feat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--fc, #10B981), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.ph-feat-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,.25); border-color: rgba(255,255,255,.2); }
.ph-feat-card:hover::before { opacity: 1; }

/* Carte accentuée (fond dégradé) */
.ph-feat-card-accent {
  background: linear-gradient(135deg, #10B981 0%, #059669 60%, #065f46 100%);
  border-color: rgba(255,255,255,.2);
}
.ph-feat-card-accent:hover { box-shadow: 0 20px 60px rgba(16,185,129,.35); }

/* Icône */
.ph-feat-icon-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.12);
}
.ph-feat-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  z-index: -1;
  filter: blur(14px);
}

/* Texte */
.ph-feat-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.ph-feat-desc {
  font-size: .88rem;
  color: rgba(255,255,255,.6);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Stats en bas de carte */
.ph-feat-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ph-stat-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--fc, #10B981);
}
.ph-stat-lbl {
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  font-weight: 500;
}

/* Badges mode (domicile/en ligne) */
.ph-feat-badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ph-mode-badge {
  font-size: .78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}

/* ── Bande de confiance ───────────────────────────────────────────── */
.ph-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ph-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  font-weight: 500;
}
.ph-trust-sep {
  color: rgba(255,255,255,.2);
  font-size: 1.1rem;
  line-height: 1;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ph-features-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .placement-hero-section { padding: 60px 0 70px; }
  .ph-title { font-size: 1.7rem; }
  .ph-subtitle { font-size: .95rem; }
  .ph-features-row { grid-template-columns: 1fr; }
  .ph-cta-row { flex-direction: column; align-items: center; }
  .ph-btn { width: 100%; max-width: 340px; justify-content: center; }
  .ph-trust-sep { display: none; }
  .ph-trust-row { gap: 10px; }
}


/* ══════════════════════════════════════════════════════════════════════
   ph-btn-teal — 4e bouton CTA (Cours à domicile)
   ══════════════════════════════════════════════════════════════════════ */
.ph-btn-teal {
  background: linear-gradient(135deg, #0D9488, #0F766E);
  color: #fff;
  box-shadow: 0 8px 30px rgba(13,148,136,.35);
}
.ph-btn-teal:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 40px rgba(13,148,136,.5);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════
   MODAL DE RÉSERVATION — Styles complets
   ══════════════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.resm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 27, 59, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.resm-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ── Panel ── */
.resm-panel {
  background: #fff;
  border-radius: 24px;
  width: 100%;
  max-width: 680px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(7,27,59,.3);
  transform: translateY(28px) scale(.97);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
  position: relative;
}
.resm-overlay.active .resm-panel {
  transform: translateY(0) scale(1);
}

/* ── Close button ── */
.resm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gray-100);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  transition: background .2s, color .2s, transform .2s;
  z-index: 10;
}
.resm-close:hover { background: var(--gray-200); color: var(--navy); transform: rotate(90deg); }

/* ── Header ── */
.resm-header {
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
}
.resm-header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: .9rem;
  color: var(--navy);
  margin-bottom: 10px;
}
.resm-header-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
  line-height: 1.25;
}
.resm-header-sub {
  font-size: .88rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── Progress ── */
.resm-progress-wrap {
  padding: 18px 32px 14px;
  border-bottom: 1px solid var(--gray-100);
  flex-shrink: 0;
}
.resm-progress-bar-outer {
  height: 5px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 14px;
}
.resm-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10B981, #059669);
  border-radius: 99px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.resm-steps-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.resm-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.resm-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-400);
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, color .3s;
}
.resm-step-dot.active .resm-step-num {
  background: var(--green);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(16,185,129,.15);
}
.resm-step-dot.done .resm-step-num {
  background: #D1FAE5;
  color: #065f46;
}
.resm-step-lbl {
  font-size: .7rem;
  font-weight: 600;
  color: var(--gray-400);
  transition: color .3s;
  white-space: nowrap;
}
.resm-step-dot.active .resm-step-lbl { color: var(--green); }
.resm-step-dot.done .resm-step-lbl { color: #065f46; }
.resm-step-line {
  flex: 1;
  height: 2px;
  background: var(--gray-200);
  margin: 0 6px;
  margin-bottom: 16px;
  border-radius: 1px;
}

/* ── Body (scrollable) ── */
.resm-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  -webkit-overflow-scrolling: touch;
}
.resm-body::-webkit-scrollbar { width: 5px; }
.resm-body::-webkit-scrollbar-track { background: transparent; }
.resm-body::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 99px; }

/* ── Step panels ── */
.resm-step-panel { display: none; animation: resmSlideIn .3s ease; }
.resm-step-panel.active { display: block; }
@keyframes resmSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.resm-panel-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.resm-panel-sub {
  font-size: .88rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* ── Field grid ── */
.resm-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.resm-field-group { display: flex; flex-direction: column; gap: 5px; }
.resm-field-group--full { grid-column: 1 / -1; }
.resm-label {
  font-size: .83rem;
  font-weight: 600;
  color: var(--navy);
}
.resm-req { color: var(--orange); }
.resm-input {
  padding: 10px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-size: .9rem;
  font-family: inherit;
  color: var(--text);
  background: var(--gray-50);
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none;
  width: 100%;
}
.resm-input:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.resm-input.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
.resm-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236B7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.resm-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.resm-field-error { font-size: .78rem; color: var(--red); min-height: 18px; font-weight: 500; }

/* ── Type selection cards (Step 1) ── */
.resm-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 8px;
}
.resm-type-card {
  position: relative;
  border: 2px solid var(--gray-200);
  border-radius: 16px;
  padding: 20px 16px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
  background: var(--gray-50);
}
.resm-type-card input { position: absolute; opacity: 0; pointer-events: none; }
.resm-type-card:hover { border-color: var(--green); background: #fff; }
.resm-type-card.selected {
  border-color: var(--green);
  background: #F0FDF4;
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
.resm-type-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.resm-type-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.resm-type-name { font-size: 1rem; font-weight: 700; color: var(--navy); }
.resm-type-desc { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
.resm-type-check {
  position: absolute;
  top: 10px; right: 10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  transform: scale(.7);
}
.resm-type-card.selected .resm-type-check { opacity: 1; transform: scale(1); }

/* ── Mode cards (Step 3) ── */
.resm-mode-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.resm-mode-card {
  position: relative;
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  padding: 14px 10px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
  background: var(--gray-50);
  text-align: center;
}
.resm-mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.resm-mode-card:hover { border-color: var(--orange); background: #fff; }
.resm-mode-card.selected {
  border-color: var(--orange);
  background: #FFF8EE;
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.resm-mode-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.resm-mode-emoji { font-size: 1.4rem; }
.resm-mode-inner strong { font-size: .88rem; color: var(--navy); font-weight: 700; }
.resm-mode-inner span { font-size: .72rem; color: var(--text-muted); line-height: 1.3; }

/* ── Children blocks (Step 4) ── */
.resm-child-block {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.resm-child-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.resm-child-num { font-size: .9rem; font-weight: 700; color: var(--navy); }
.resm-remove-child {
  font-size: .75rem; font-weight: 600; color: var(--red);
  background: none; border: none; cursor: pointer; padding: 0;
}
.resm-remove-child:hover { text-decoration: underline; }
.resm-add-child-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
  font-size: .88rem;
  font-weight: 700;
  background: #F0FDF4;
  border: 1.5px dashed var(--green);
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .2s;
  width: 100%;
  justify-content: center;
  font-family: inherit;
}
.resm-add-child-btn:hover { background: #D1FAE5; }

/* ── Success screen (Step 5) ── */
.resm-success-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 10px 10px;
}
.resm-success-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: #F0FDF4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  animation: resmPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes resmPop { from { transform: scale(0); } to { transform: scale(1); } }
.resm-success-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 10px;
}
.resm-success-msg {
  font-size: .95rem;
  color: var(--text-muted);
  max-width: 400px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.resm-success-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}
.resm-sbadge {
  background: #F0FDF4;
  color: #065f46;
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid #A7F3D0;
}
.resm-success-close {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 12px 28px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, transform .2s;
}
.resm-success-close:hover { background: var(--navy-dark); transform: scale(1.02); }

/* ── Modal footer ── */
.resm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-top: 1px solid var(--gray-100);
  flex-shrink: 0;
  gap: 12px;
}
.resm-step-info {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-400);
  flex: 1;
  text-align: center;
}
.resm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 99px;
  font-size: .9rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s ease;
  white-space: nowrap;
}
.resm-btn-ghost {
  background: var(--gray-100);
  color: var(--gray-700);
}
.resm-btn-ghost:hover { background: var(--gray-200); }
.resm-btn-primary {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff;
  box-shadow: 0 4px 16px rgba(16,185,129,.3);
}
.resm-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(16,185,129,.4); }
.resm-btn-submit {
  background: linear-gradient(135deg, #F97316, #F59E0B);
  color: #fff;
  box-shadow: 0 4px 16px rgba(249,115,22,.3);
}
.resm-btn-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(249,115,22,.4); }
.resm-btn:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .resm-panel { border-radius: 20px 20px 0 0; max-height: 95vh; position: fixed; bottom: 0; left: 0; right: 0; margin: 0; }
  .resm-overlay { align-items: flex-end; padding: 0; }
  .resm-header { padding: 22px 20px 16px; }
  .resm-progress-wrap { padding: 14px 20px 10px; }
  .resm-body { padding: 18px 20px; }
  .resm-footer { padding: 14px 20px; }
  .resm-fields-grid { grid-template-columns: 1fr; }
  .resm-type-grid { grid-template-columns: 1fr; }
  .resm-mode-row { grid-template-columns: 1fr; }
  .resm-header-title { font-size: 1.1rem; }
  .resm-step-info { display: none; }
}


/* ── Modal success — CTA création compte service (Part 3) ── */
.resm-account-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #071B3B 0%, #10B981 100%);
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none;
  margin-bottom: 10px;
  transition: opacity .2s, transform .15s;
  color: #fff;
}
.resm-account-cta:hover { opacity: .92; transform: translateY(-1px); }
.resm-account-cta-icon { font-size: 1.6rem; flex-shrink: 0; }
.resm-account-cta-text { flex: 1; text-align: left; }
.resm-account-cta-text strong { display: block; font-size: .9rem; font-weight: 800; margin-bottom: 2px; }
.resm-account-cta-text small  { font-size: .76rem; opacity: .8; }

/* ── Service registration page — spin animation ── */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL RÉSERVATION — Classes manquantes (Partie 1 — correctif audit)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header layout */
.resm-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding-right: 40px;
}
.resm-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #071B3B, #10B981);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Champs obligatoires / optionnels */
.resm-required { color: #EF4444; margin-left: 2px; }
.resm-optional { color: var(--gray-400); font-weight: 400; font-size: .78rem; margin-left: 4px; }

/* Alerte inline dans la modal */
.resm-alert {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: 14px;
  line-height: 1.4;
}
.resm-alert-error {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}
.resm-alert-success {
  background: #F0FDF4;
  color: #16A34A;
  border: 1px solid #BBF7D0;
}
.resm-alert-info {
  background: #EFF6FF;
  color: #2563EB;
  border: 1px solid #BFDBFE;
}

/* Bouton Annuler */
.resm-btn-cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 99px;
  font-size: .9rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s ease;
  background: var(--gray-100, #F3F4F6);
  color: var(--gray-700, #374151);
}
.resm-btn-cancel:hover { background: var(--gray-200, #E5E7EB); }

/* Panneau succès (remplace le formulaire dans la modal) */
.resm-success-panel {
  padding: 32px 24px;
  text-align: center;
}
.resm-success-panel .resm-success-icon {
  font-size: 3rem;
  margin-bottom: 14px;
  display: block;
}
.resm-success-panel .resm-success-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy, #071B3B);
  margin-bottom: 8px;
}
.resm-success-panel .resm-success-msg {
  font-size: .92rem;
  color: var(--text-muted, #6B7280);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Bouton fermeture panneau succès */
.resm-btn-close-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 99px;
  font-size: .9rem;
  font-weight: 700;
  border: 2px solid var(--gray-200, #E5E7EB);
  background: transparent;
  color: var(--gray-600, #4B5563);
  cursor: pointer;
  font-family: inherit;
  transition: all .2s ease;
  margin-top: 8px;
}
.resm-btn-close-success:hover {
  background: var(--gray-100, #F3F4F6);
  border-color: var(--gray-300, #D1D5DB);
}

/* Bouton submit — état disabled */
.resm-btn-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Assurer que le mode sélectionné soit visuellement indiqué via :checked */
.resm-mode-card input:checked ~ .resm-mode-inner,
.resm-type-card input:checked ~ .resm-type-inner {
  border-color: var(--orange, #F97316);
  background: #FFF7ED;
  box-shadow: 0 0 0 2px rgba(249,115,22,.15);
}
.resm-type-card input:checked ~ .resm-type-inner {
  border-color: var(--green, #10B981);
  background: #F0FDF4;
  box-shadow: 0 0 0 2px rgba(16,185,129,.15);
}


/* ── Bouton Déconnexion toujours visible dans la barre du haut (#009) ── */
.topbar-logout {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px;
  border-radius: 999px; border: 2px solid #FECACA;
  background: #FEF2F2; color: #DC2626 !important;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.topbar-logout:hover { background: #FEE2E2; border-color: #EF4444; }
@media (max-width: 640px) {
  .topbar-logout { padding: 0; width: 44px; justify-content: center; }
  .topbar-logout-label { display: none; }
}

/* ── Menu latéral : titre de groupe + compteur (correctif #019) ── */
.sidebar-group-title { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.sidebar-group-count { flex: 0 0 auto; white-space: nowrap; }

/* ── Messagerie : bouton d'envoi (#046) ──────────────────────────────────
   Sur mobile (≤ 768 px), la règle globale `button[type="submit"]{width:100%}`
   étirait le bouton rond sur toute la largeur du champ de saisie.
   Sélecteur plus spécifique + taille fixe pour qu'il reste un petit rond. */
.msg-composer { align-items: flex-end; }
.msg-composer .msg-input { min-width: 0; }
.msg-composer .msg-send-btn {
  width: 42px; min-width: 42px; max-width: 42px;
  height: 42px; flex: 0 0 42px;
  padding: 0; margin: 0;
  border-radius: 50%;
  box-sizing: border-box;
}
.msg-composer .msg-send-btn svg { width: 18px; height: 18px; }

/* ── #048 Structure : sticky, hauteur d'écran iOS ───────────────────────────
   1) html/body en overflow-x:hidden deviennent des conteneurs de défilement : la barre du haut
      (.navbar, .dash-topbar : position:sticky) ne reste alors pas collée. `overflow-x: clip`
      coupe le débordement SANS créer de conteneur de défilement. Repli : hidden (anciens navigateurs).
   2) 100vh dépasse la zone visible sur iPhone (barre d'adresse) : le bas du menu latéral
      (déconnexion…) était masqué ; 100dvh = hauteur réellement visible. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
  .dash-page, .dash-layout, .dash-main, .parent-layout, .parent-main { overflow-x: clip !important; }
}
@supports (height: 100dvh) {
  .sidebar { height: 100dvh; }
}

/* ── #048 Petits correctifs de structure ───────────────────────────────────
   - Sur mobile, la notification .push-toast (bas de l'écran, z-index 9999) recouvrait le menu du bas.
   - Un message sans espace (long lien, e-mail) débordait de la bulle de la messagerie. */
@media (max-width: 899px) {
  .push-toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
.msg-bubble, .msg-bubble-text { overflow-wrap: anywhere; min-width: 0; }