/* ═══════════════════════════════════════════════════════════
   style_native.css — appel.dynamisme.ga
   Override natif des ANCIENNES pages PHP (sans <meta yl-page>).
   Utilise les variables de thème globales (--bg, --surf, --t1…)
   définies par native_inject.php → support dark/light automatique.
   Objectif : rendre toute vieille page lisible, propre et native.
═══════════════════════════════════════════════════════════ */

/* Les variables (--bg, --surf, --bord, --t1, --t2, --t3, --blue, --b2, --b3,
   --ok, --err, --bg2) viennent de native_inject (theme-vars). On ne redéfinit
   QUE les manquantes utilisées localement. */
:root { --card: var(--surf); --r: 14px; }

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ── Fond global thème ── */
body {
  background: var(--bg) !important;
  color: var(--t1) !important;
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif !important;
  margin: 0 !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ════════════════════════════════════════════════
   MASQUER : navigation web, footer, décor superflu
════════════════════════════════════════════════ */
.navbar, #navbar, .mobile-menu, #mobileMenu, .hamburger, #hamburger,
.nav-inner, .nav-links, .nav-ctas, .nav-premium, .nav-container,
.hero-mesh, .hero-grid, .orb, .orb-1, .orb-2, .orb-3,
.hero-shapes, .shape, .bg-decoration, .particles,
.teachers-slider-section, .banner-image-card, .suggestion-card,
.logout-container, .footer, footer, .page-footer,
a[href="LFS.apk"], a[download*=".apk"] { display: none !important; }

/* Hero des vieilles landing -> contenu simple */
.hero { min-height: auto !important; padding: 14px !important; background: var(--bg) !important; }
.hero-inner { grid-template-columns: 1fr !important; max-width: 100% !important; gap: 14px !important; }

/* ════════════════════════════════════════════════
   NEUTRALISER les fonds clairs hérités (cartes blanches)
   Les vieilles pages utilisent souvent du blanc en dur.
════════════════════════════════════════════════ */
[style*="background:#fff"], [style*="background: #fff"],
[style*="background:white"], [style*="background: white"],
[style*="background-color:#fff"], [style*="background-color: #fff"],
[style*="background-color:white"], [style*="background-color: white"] {
  background: var(--surf) !important;
  color: var(--t1) !important;
}

/* ── Conteneurs / cartes ── */
.container, .main-content, .page-content, .content-wrapper,
main, .wrapper, .container-fluid, .content {
  max-width: 100% !important;
  padding: 14px !important;
  margin: 0 auto !important;
  background: transparent !important;
}

.card, .panel, .box, .widget, .note-card, .item-card,
.cours-card, .sujet-card, .astuce-card, .quiz-card,
[class*="-card"], [class*="card-"], .list-item, .list-group-item {
  background: var(--surf) !important;
  border: 1px solid var(--bord) !important;
  border-radius: var(--r) !important;
  color: var(--t1) !important;
  box-shadow: var(--shadow) !important;
}

/* ── Typographie ── */
h1, h2, h3, h4, h5, h6 { color: var(--t1) !important; }
p, span, li, label, td, th, div, small, strong, b, em, a:not(.btn) {
  color: var(--t2);
}
h1 { font-size: 22px !important; font-weight: 800 !important; }
h2 { font-size: 19px !important; font-weight: 700 !important; }
h3 { font-size: 16px !important; font-weight: 700 !important; }
strong, b { color: var(--t1) !important; }
a:not(.btn) { color: var(--blue3, var(--b2)) !important; text-decoration: none !important; }
.text-muted, .muted, .soft, .text-secondary { color: var(--t3) !important; }
hr { border: none !important; border-top: 1px solid var(--bord) !important; margin: 16px 0 !important; }

/* ── Titres de section ── */
.section-title, .section-header h3, .card-header h3, .page-title, .titre {
  color: var(--t1) !important; font-weight: 700 !important;
}
.section-header {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; margin-bottom: 12px !important;
}

/* ── Formulaires ── */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"],
input[type="date"], input[type="time"], input[type="url"],
textarea, select {
  background: var(--surf2, var(--surf)) !important;
  border: 1px solid var(--bord2, var(--bord)) !important;
  border-radius: 12px !important;
  color: var(--t1) !important;
  padding: 11px 14px !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 14px !important;
  outline: none !important;
  width: 100% !important;
  min-height: 46px !important;
  -webkit-appearance: none !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--b2) !important;
  box-shadow: 0 0 0 3px var(--b3) !important;
}
input::placeholder, textarea::placeholder { color: var(--t3) !important; }
select option { background: var(--bg2) !important; color: var(--t1) !important; }
label { color: var(--t2) !important; font-size: 13px !important; font-weight: 600 !important;
  margin-bottom: 6px !important; display: block !important; }

/* ── Boutons ── */
button, .btn, input[type="submit"], input[type="button"], .button, a.btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  min-height: 46px !important;
  border: none !important;
  transition: opacity .15s, transform .12s !important;
  font-family: 'Sora', sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
button:active, .btn:active { opacity: .85 !important; transform: scale(.98) !important; }
.btn-primary, button[type="submit"], input[type="submit"],
.btn-success, .btn-add, .btn-save, .btn-blue {
  background: linear-gradient(135deg, var(--blue), var(--b2)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px var(--b3) !important;
}
.btn-secondary, .btn-ghost, .btn-light, .btn-default {
  background: var(--surf) !important; color: var(--t1) !important;
  border: 1px solid var(--bord) !important;
}
.btn-danger, .btn-delete, .btn-remove { background: var(--err) !important; color: #fff !important; }
.btn-warning { background: var(--gold, #F59E0B) !important; color: #fff !important; }

/* ── Tables ── */
table { width: 100% !important; border-collapse: collapse !important;
  background: transparent !important; }
thead, thead tr { background: var(--b3) !important; }
th { color: var(--b2) !important; padding: 11px 10px !important; font-size: 11px !important;
  font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .5px !important;
  text-align: left !important; }
td { color: var(--t2) !important; padding: 11px 10px !important;
  border-bottom: 1px solid var(--bord) !important; font-size: 13px !important;
  background: transparent !important; }
tr:hover td { background: var(--surf) !important; }

/* ── Badges / chips / tags ── */
.badge, .tag, .chip, .label, .pill, [class*="badge"], [class*="chip"], [class*="tag-"] {
  border-radius: 20px !important; padding: 3px 10px !important;
  font-size: 11px !important; font-weight: 700 !important;
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
}
.badge-blue, .tag-blue { background: var(--b3) !important; color: var(--b2) !important; }
.badge-green { background: rgba(16,185,129,.15) !important; color: var(--ok) !important; }
.badge-red { background: rgba(239,68,68,.15) !important; color: var(--err) !important; }

/* ── Alertes / messages ── */
.alert, .message, .flash, .success-message, .error-message, .notice {
  border-radius: 12px !important; padding: 11px 14px !important;
  font-size: 13px !important; display: flex !important; align-items: center !important;
  gap: 8px !important; margin-bottom: 12px !important;
}
.alert-success, .success-message, .success {
  background: rgba(16,185,129,.12) !important; border: 1px solid rgba(16,185,129,.28) !important;
  color: var(--ok) !important; }
.alert-danger, .alert-error, .error-message, .error {
  background: rgba(239,68,68,.12) !important; border: 1px solid rgba(239,68,68,.28) !important;
  color: var(--err) !important; }
.alert-warning, .warning {
  background: rgba(245,158,11,.12) !important; border: 1px solid rgba(245,158,11,.28) !important;
  color: #D97706 !important; }
.alert-info, .info {
  background: var(--b3) !important; border: 1px solid var(--bord2, var(--bord)) !important;
  color: var(--b2) !important; }

/* ── Grilles génériques ── */
.grid, .cards-grid, .notes-grid, .items-grid, .row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}
[class*="col-"] { padding: 6px !important; }

/* ── Modales ── */
.modal-content, .modal-box, .popup-content {
  background: var(--bg2) !important; border: 1px solid var(--bord2, var(--bord)) !important;
  border-radius: 20px !important; color: var(--t1) !important;
}
.modal-header { border-bottom: 1px solid var(--bord) !important; }
.modal-footer { border-top: 1px solid var(--bord) !important; }
.modal-header .modal-title, .modal-title { color: var(--t1) !important; }
.btn-close, .close, .modal-close { filter: var(--close-filter, invert(1)) !important; opacity: .7 !important; }
html.yl-light .btn-close, html.yl-light .close { filter: none !important; }

/* ── Images / avatars ── */
img { max-width: 100% !important; height: auto !important; }
.avatar, .profile-pic, [class*="avatar"] { border-radius: 50% !important; object-fit: cover !important; }

/* ── Liens fichiers / téléchargement ── */
.download-btn, .file-link, [class*="download"], [class*="telecharger"] {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  background: var(--b3) !important; color: var(--b2) !important;
  border-radius: 10px !important; padding: 8px 14px !important;
  font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important;
}

/* ── Scrollbar fine ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bord2, rgba(15,30,56,.14)); border-radius: 3px; }

/* ── FAB / boutons flottants courants ── */
.fab, .floating-btn, .btn-float, .add-btn-float {
  position: fixed !important;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  right: 18px !important;
  width: 54px !important; height: 54px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--blue), var(--b2)) !important;
  color: #fff !important; font-size: 22px !important;
  box-shadow: 0 4px 20px var(--b3) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  z-index: 90 !important; border: none !important;
}

/* ── Empty states ── */
.empty, .empty-state, .no-data, .aucun {
  text-align: center !important; padding: 40px 20px !important;
  color: var(--t3) !important; font-size: 13px !important;
}