/* ============================================================
   DIASPO'ACTIF — Design Upgrade Global
   S'applique à toutes les pages. Améliore l'existant sans casser.
   ============================================================ */

/* ── Variables enrichies ── */
:root {
  --du-blue: #2563EB;
  --du-blue-dark: #1d4ed8;
  --du-navy: #0D1B2A;
  --du-cyan: #38BDF8;
  --du-green: #10B981;
  --du-gradient: linear-gradient(135deg, #2563EB, #1d4ed8);
  --du-gradient-light: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  --du-shadow-sm: 0 1px 4px rgba(37,99,235,.08);
  --du-shadow-md: 0 4px 16px rgba(37,99,235,.12);
  --du-shadow-lg: 0 8px 32px rgba(37,99,235,.18);
  --du-radius-sm: 8px;
  --du-radius-md: 12px;
  --du-radius-lg: 16px;
  --du-radius-xl: 20px;
}

/* ── Topbar / Header — palette officielle Diaspo'Actif ── */
.topbar {
  background:#0D2B4E !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 2px 16px rgba(13,43,78,.25) !important;
}

/* Badge type de compte — encre bleue (spécificité maximale) */
.auth-area .role-tag,
.topbar .role-tag,
.role-tag {
  background: #1E4F8A !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 3px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}

/* Bouton Connexion / Déconnexion — encre bleue */
.topbar .btn-outline,
.topbar a.btn-outline,
.auth-area .btn-outline,
.auth-area a.btn-outline {
  background: #1E4F8A !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
}
.topbar .btn-outline:hover,
.auth-area .btn-outline:hover {
  background: #2E6BAD !important;
  color: #fff !important;
}

/* Sélecteur de langue dans la topbar
   Chrome/Windows ignore le background-color des <option> en thème clair —
   color-scheme:dark force le rendu natif du menu déroulant en sombre,
   seul moyen fiable de garantir un texte lisible sur toutes les plateformes. */
.topbar .lang-select,
.topbar select,
.lang-select {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 20px !important;
  color-scheme: dark;
}
.topbar .lang-select option,
.topbar select option,
.lang-select option {
  background: #0D2B4E !important;
  color: #fff !important;
}

/* Bouton Déconnexion et autres boutons dans la topbar */
.topbar .btn-deconnexion,
.topbar a[href*="logout"],
.topbar a[href*="deconnex"],
.topbar button[onclick*="logout"],
.topbar button[onclick*="deconnex"],
a.btn-deconnexion,
.btn-deconnexion {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}
.topbar .btn-deconnexion:hover,
.btn-deconnexion:hover {
  background: rgba(255,255,255,.2) !important;
}

/* Tous les textes dans la topbar en blanc — SAUF le contenu du menu déroulant des
   notifications (fond clair), qui doit garder ses propres couleurs sombres lisibles, ET
   SAUF le lien de nav actif (.nav a.active) depuis la refonte "onglets segmentés" : ce
   lien se détache sur un fond blanc plein, son texte doit rester en encre foncée. */
.topbar *:not(.btn-orange):not(.btn-primary):not(.pill):not(img):not(.notif-dropdown):not(.notif-item):not(.notif-titre):not(.notif-contenu):not(.notif-date):not(.notif-dd-title):not(.notif-empty):not(.active) {
  color: #fff !important;
}
.topbar .notif-dropdown, .topbar .notif-dropdown * { color: #0D1B2A !important; }
.topbar .notif-dropdown .notif-titre, .topbar .notif-dropdown .notif-dd-title { color: #0D1B2A !important; }
.topbar .notif-dropdown .notif-contenu { color: #4B5563 !important; }
.topbar .notif-dropdown .notif-date { color: #8A94A6 !important; }
.topbar .notif-dropdown .notif-empty { color: #9CA3AF !important; }
/* Exceptions : bouton S'inscrire reste orange */
.topbar .btn-orange,
.topbar .btn-primary {
  color: #fff !important;
}
/* Exceptions : Déconnexion et sélecteur de langue en encre noire */
.topbar #logout-link {
  color: #000 !important;
  background: #fff !important;
  /* "Déconnexion" se coupait/repassait à la ligne, compressé entre les autres boutons
     du bandeau — jamais rétréci, jamais de retour à la ligne du texte du bouton. */
  white-space: nowrap !important;
  flex: none !important;
  padding: 7px 16px !important;
}
.topbar #lang-select,
.topbar #lang-select option {
  color: #000 !important;
}
.topbar #lang-select {
  background: #fff !important;
}
.topbar-inner {
  padding: 12px 24px !important;
}
.logo {
  font-size: 15px !important;
  letter-spacing: .5px !important;
  color: #fff !important;
}
.logo-img {
  width: 36px !important;
  height: 36px !important;
}
/* ── Navigation en onglets segmentés ──
   Rail arrondi sur fond légèrement éclairci, lien courant détaché en pastille pleine
   blanche (posé en dur par page, <a class="active">, cf. annuaire.html — pas de JS ici).
   flex-wrap:nowrap + overflow-x:auto : le rail défile horizontalement dans son propre
   espace plutôt que de casser sur une 2e ligne ou de faire disparaître un lien, quelle que
   soit la largeur (tablette comprise) — jamais de dépassement, jamais de suppression. La
   bascule mobile (<=768px, .nav.nav-mobile-open en tiroir vertical) reste inchangée. */
.nav {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  /* flex:0 (jamais grow), pas flex:1 : le rail doit épouser son contenu, pas remplir tout
     l'espace flex disponible — sinon, sur les paliers .topbar-inner élargis (voir
     responsive.v2.css), la pastille arrondie s'étirait avec un grand vide navy vide à
     droite des 6 liens. L'espace libéré revient à .topbar-inner (justify-content:
     space-between, styles.v2.css) plutôt qu'au rail lui-même. */
  flex: 0 1 auto !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.nav::-webkit-scrollbar { display: none !important; }
.nav a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.75) !important;
  padding: 8px 15px !important;
  border-radius: 9px !important;
  border-bottom: none !important;
  white-space: nowrap !important;
  flex: none !important;
  transition: background .15s, color .15s !important;
}
.nav a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}
.nav a.active {
  background: #fff !important;
  color: #0D2B4E !important;
  font-weight: 700 !important;
}
.nav a.active:hover {
  background: #fff !important;
  color: #0D2B4E !important;
}

/* ── Boutons ── */
.btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: transform .15s, box-shadow .15s, background .15s !important;
}
.btn:hover:not([disabled]) {
  transform: translateY(-1px) !important;
}
.btn-orange,
.btn-primary {
  background: var(--du-gradient) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(37,99,235,.3) !important;
}
.btn-orange:hover,
.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(37,99,235,.4) !important;
}
.btn-navy {
  background: #0D1B2A !important;
  color: #fff !important;
  border: none !important;
}
.btn-outline {
  border: 1.5px solid #BFDBFE !important;
  color: #2563EB !important;
  background:var(--card) !important;
}
.btn-outline:hover {
  background: #EFF6FF !important;
  border-color: #2563EB !important;
}

/* ── Cards ── */
.card {
  border-radius: var(--du-radius-md) !important;
  border: 1.5px solid #E8EFFE !important;
  box-shadow: var(--du-shadow-sm) !important;
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
}
.card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--du-shadow-md) !important;
  border-color: #BFDBFE !important;
}

/* ── Sections / Titres ── */
.section h2,
.section-title,
h1.page-title {
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  color: #0D1B2A !important;
}
.section .sub,
.section-sub {
  color: #64748b !important;
  line-height: 1.7 !important;
}

/* ── Hero générique (pages intérieures) ── */
.hero {
  background: linear-gradient(135deg, #060e1a 0%, #0c1e38 40%, #0F2A50 100%) !important;
  padding: 52px 0 60px !important;
}
.hero h1 {
  font-size: clamp(24px, 3.5vw, 42px) !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
}
.hero p {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,.7) !important;
}

/* ── Formulaires ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
  border: 1.5px solid #DDE3EC;
  border-radius: 10px !important;
  transition: border-color .15s, box-shadow .15s !important;
  font-family: inherit !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}

/* ── Badges / Tags ── */
.badge, .tag, .chip {
  border-radius: 99px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
}

/* ── Tableaux ── */
table {
  border-collapse: collapse !important;
  width: 100%;
}
thead th {
  background: #F0F4FF !important;
  color: #0D1B2A !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid #DBEAFE !important;
}
tbody tr {
  border-bottom: 1px solid #F1F5F9 !important;
  transition: background .1s !important;
}
tbody tr:hover {
  background: #F8FAFF !important;
}
tbody td {
  padding: 12px 16px !important;
  font-size: 14px !important;
}

/* ── Sidebar / Dashboard ── */
.sidebar {
  background: #0D2B4E !important;
  border-right: none !important;
  box-shadow: 3px 0 20px rgba(13,43,78,.25) !important;
}
.sidebar-link,
.sidebar a,
.side-nav a {
  border-radius: 8px !important;
  transition: background .15s, color .15s !important;
  font-weight: 600 !important;
  background: #fff !important;
  color: #0D2B4E !important;
}
.sidebar-link:hover,
.sidebar a:hover,
.side-nav a:hover {
  filter: brightness(0.96);
}
.sidebar-link.active,
.sidebar a.active,
.side-nav a.active {
  background: #F26422 !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.sidebar a.premium-locked,
.sidebar a.premium-locked:hover {
  background: linear-gradient(135deg,#c8960c,#f2c94c) !important;
  color: #2a1e00 !important;
}
.sidebar .sb-group-lbl {
  color: rgba(255,255,255,.55) !important;
}

/* ── Notifications / Alertes ── */
.alert, .notif-bar {
  border-radius: var(--du-radius-md) !important;
  border: none !important;
  font-weight: 500 !important;
}
.alert-success { background: #F0FDF4 !important; color: #15803d !important; border-left: 4px solid #22C55E !important; }
.alert-error, .alert-danger { background: #FEF2F2 !important; color: #dc2626 !important; border-left: 4px solid #EF4444 !important; }
.alert-info { background: #EFF6FF !important; color: #2563EB !important; border-left: 4px solid #3B82F6 !important; }
.alert-warning { background: #FFFBEB !important; color: #d97706 !important; border-left: 4px solid #F59E0B !important; }

/* ── Pagination ── */
.pagination a,
.page-btn {
  border-radius: 8px !important;
  border: 1.5px solid #E2E8F0 !important;
  font-weight: 700 !important;
  transition: all .15s !important;
}
.pagination a.active,
.page-btn.active {
  background: #2563EB !important;
  border-color: #2563EB !important;
  color: #fff !important;
}
.pagination a:hover:not(.active),
.page-btn:hover:not(.active) {
  border-color: #2563EB !important;
  color: #2563EB !important;
}

/* ── Modal ── */
.modal, .modal-box, [role="dialog"] > div {
  border-radius: var(--du-radius-xl) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.22) !important;
}
.modal-header {
  border-radius: var(--du-radius-xl) var(--du-radius-xl) 0 0 !important;
}

/* ── Avatars ── */
.avatar {
  border: 2px solid #DBEAFE !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.1) !important;
}

/* ── Scrollbar : voir responsive.v2.css (source unique de verite) ──
   Ce fichier etant charge en dernier, son pouce #CBD5E1 sur piste #F1F5F9
   ecrasait les autres et rendait les barres pratiquement invisibles. */

/* ── Page Login / Inscription ── */
.auth-page,
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #060e1a 0%, #0D1B2A 50%, #0F2A50 100%);
}
.auth-card,
.login-card {
  border-radius: var(--du-radius-xl) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}
.auth-card h2,
.login-card h2 {
  font-weight: 900 !important;
  color: #0D1B2A !important;
}

/* ── Stat cards ── */
.stat-card, .kpi-card, .metric-card {
  border-radius: var(--du-radius-md) !important;
  border: 1.5px solid #E8EFFE !important;
  transition: transform .2s, box-shadow .2s !important;
}
.stat-card:hover, .kpi-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--du-shadow-md) !important;
}
.stat-value, .kpi-value {
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  background: linear-gradient(135deg, #2563EB, #38BDF8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Fil d'actualité ── */
.post-card, .fil-card {
  border-radius: var(--du-radius-md) !important;
  border: 1.5px solid #E8EFFE !important;
  transition: box-shadow .2s !important;
}
.post-card:hover, .fil-card:hover {
  box-shadow: var(--du-shadow-md) !important;
}

/* ── Annuaire / Initiative cards ── */
.init-card, .member-card, .talent-card {
  border-radius: var(--du-radius-md) !important;
  border: 1.5px solid #E8EFFE !important;
  transition: transform .2s, box-shadow .2s !important;
}
.init-card:hover, .member-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--du-shadow-lg) !important;
}

/* ── Section eyebrow (label au-dessus titre) ── */
.section-eyebrow,
.eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #2563EB !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

/* ── Footer (si présent) ── */
footer, .footer {
  border-top: 1px solid rgba(37,99,235,.08) !important;
  background: #0D1B2A !important;
  color: rgba(255,255,255,.7) !important;
}

/* ── Mobile nav ── */
.mobile-bottom-nav {
  border-top: 1px solid rgba(37,99,235,.08) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08) !important;
}
.mobile-bottom-nav__item.active {
  color: #2563EB !important;
}

/* ── Animation d'apparition douce ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .section, .hero-inner, .auth-card {
  animation: fadeInUp .4s ease both;
}

/* ── Dashboard layout ── */
.dashboard-layout, .dash-layout {
  display: grid;
  gap: 0;
}
.dash-header, .dashboard-header {
  background: linear-gradient(135deg, #0D1B2A 0%, #1B3A6B 100%) !important;
  color: #fff !important;
  padding: 32px 32px 40px !important;
}
.dash-header h1, .dashboard-header h1 {
  font-weight: 900 !important;
  font-size: clamp(20px, 2.5vw, 30px) !important;
  letter-spacing: -.02em !important;
}
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: -24px 24px 24px;
}
.dash-kpi {
  background:var(--card);
  border-radius: 14px;
  padding: 20px;
  border: 1.5px solid #E8EFFE;
  box-shadow: 0 4px 16px rgba(37,99,235,.1);
}
.dash-kpi-value {
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(135deg, #2563EB, #38BDF8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 4px;
}
.dash-kpi-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Annuaire / Recherche ── */
.search-bar, .annuaire-search {
  background:var(--card);
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(37,99,235,.06);
  transition: box-shadow .2s, border-color .2s;
}
.search-bar:focus-within, .annuaire-search:focus-within {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.filter-bar {
  background: #F8FAFF;
  border: 1.5px solid #E8EFFE;
  border-radius: 12px;
  padding: 16px;
}
.filter-tag, .filter-chip {
  background: #EFF6FF;
  color: #2563EB;
  border: 1.5px solid #BFDBFE;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  cursor: pointer;
  transition: all .15s;
}
.filter-tag:hover, .filter-chip:hover,
.filter-tag.active, .filter-chip.active {
  background: #2563EB;
  color: #fff;
  border-color: #2563EB;
}

/* ── Profil page ── */
.profil-banner, .profile-banner {
  background: linear-gradient(135deg, #0D1B2A, #1B3A6B) !important;
  border-radius: 16px 16px 0 0 !important;
}
.profil-card, .profile-card {
  border-radius: 16px !important;
  border: 1.5px solid #E8EFFE !important;
  box-shadow: 0 8px 32px rgba(37,99,235,.1) !important;
  overflow: hidden;
}
.profil-avatar, .profile-avatar {
  border: 4px solid #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
}

/* ── Fil d'actualité ── */
.post-composer, .new-post-box {
  border-radius: 14px !important;
  border: 1.5px solid #E8EFFE !important;
  background:var(--card) !important;
}
.post-composer input, .new-post-box input,
.post-composer textarea, .new-post-box textarea {
  border-radius: 10px !important;
}
.post-action-btn {
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: all .15s !important;
}

/* ── Événements ── */
.event-card {
  border-radius: 14px !important;
  overflow: hidden;
  border: 1.5px solid #E8EFFE !important;
  transition: transform .2s, box-shadow .2s !important;
}
.event-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(37,99,235,.14) !important;
}
.event-date-badge {
  background: linear-gradient(135deg, #2563EB, #1d4ed8) !important;
  border-radius: 10px !important;
  color: #fff !important;
}

/* ── Messagerie ── */
.conv-list-item {
  border-radius: 10px !important;
  transition: background .15s !important;
}
.conv-list-item:hover, .conv-list-item.active {
  background: #EFF6FF !important;
}
.msg-bubble {
  border-radius: 16px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.msg-bubble.sent {
  background: linear-gradient(135deg, #2563EB, #1d4ed8) !important;
  color: #fff !important;
}
.msg-bubble.received {
  background: #F1F5F9 !important;
  color: #0D1B2A !important;
}

/* ── Pages légales / FAQ / Statiques ── */
.prose h1, .content h1, .page-content h1 {
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 900 !important;
  color: #0D1B2A !important;
  letter-spacing: -.02em !important;
}
.prose h2, .content h2, .page-content h2 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0D1B2A !important;
  margin-top: 32px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #EFF6FF !important;
}
.prose p, .content p {
  line-height: 1.75 !important;
  color: #374151 !important;
}

/* ── Notifications ── */
.notif-item {
  border-radius: 10px !important;
  border: 1.5px solid #E8EFFE !important;
  transition: background .15s !important;
}
.notif-item:hover { background: #F8FAFF !important; }
.notif-item.unread { border-left: 3px solid #2563EB !important; background: #EFF6FF !important; }
/* La cloche de notifications est dans la topbar : `.topbar a{color:#fff}` teintait le
   texte en blanc → invisible sur fond bleu clair. On force des couleurs lisibles. */
.notif-dropdown .notif-item { color: #0D1B2A !important; }
.notif-dropdown .notif-titre { color: #0D1B2A !important; }
.notif-dropdown .notif-contenu { color: #4B5563 !important; }
.notif-dropdown .notif-date { color: #8A94A6 !important; }
.notif-dropdown .notif-dd-title { color: #0D1B2A !important; }

/* ── Formulaires étendus ──
   `label` sans restriction visait AUSSI les pastilles à choix multiple .da-pill, qui sont
   des <label>. Avec !important, ce gris battait le blanc que .da-pill.checked applique sur
   fond orange : toute pastille sélectionnée affichait du gris foncé sur orange, soit un
   contraste d'environ 2,4:1, très en dessous du minimum lisible de 4,5:1. Le défaut
   touchait toutes les pages utilisant ce composant, pas une seule.
   La règle est donc restreinte aux libellés de formulaire ; la pastille garde la sienne. */
.form-label, label:not(.da-pill) {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #374151 !important;
}
.form-hint, .hint {
  font-size: 12px !important;
  color: #94A3B8 !important;
  margin-top: 4px !important;
}
.checkbox-label, .radio-label {
  cursor: pointer !important;
  transition: color .15s !important;
}
.checkbox-label:hover, .radio-label:hover {
  color: #2563EB !important;
}

/* ── Tabs ── */
.tabs, .tab-bar {
  border-bottom: 2px solid #E8EFFE !important;
  gap: 0 !important;
}
.tab, .tab-btn {
  padding: 10px 20px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #64748b !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: all .15s !important;
  cursor: pointer !important;
}
.tab.active, .tab-btn.active,
.tab:hover, .tab-btn:hover {
  color: #2563EB !important;
  border-bottom-color: #2563EB !important;
}

/* ── Responsive général ── */
@media (max-width: 768px) {
  .hero h1 { font-size: 26px !important; }
  .btn { padding: 10px 16px !important; font-size: 14px !important; }
  .card { padding: 16px !important; }
  .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); margin: -16px 16px 16px; }
  /* Le rail d'onglets segmentés (.nav{display:flex!important} ci-dessus) écraserait sinon
     le masquage mobile existant (.nav{display:none}, sans !important, assets/styles.v2.css)
     qui laisse place au tiroir #sidebar / à .nav.nav-mobile-open piloté par
     initSidebarMobile() dans assets/app.js — jamais touché par cette refonte. */
  .nav:not(.nav-mobile-open) { display: none !important; }
}