/* ==========================================================================
   ESI Trainer — Neumorphic / Soft UI Design Theme 2026
   Palette: Rose (#E85D8A) & Violet (#7C3AED / #8A2BE2) -> Bleu (#1E5FBF)
   Fond: Soft Off-White (#F8F9FA)
   ========================================================================== */

:root {
  --primary: #FF3366;
  --primary-light: #FB7185;
  --primary-gradient: linear-gradient(135deg, #FF3366 0%, #E11D48 40%, #7C3AED 100%);
  --primary-soft: rgba(255, 51, 102, 0.12);
  --secondary: #7C3AED;
  --secondary-dark: #6D28D9;
  --secondary-gradient: linear-gradient(135deg, #8B5CF6 0%, #6366F1 50%, #4F46E5 100%);
  --secondary-soft: rgba(124, 58, 237, 0.12);
  --bg-main: #F0F2F6; /* Fond soutenu ultra-lisible */
  --card-bg: #FFFFFF;
  --text-dark: #090D16; /* Noir ardoise profond ultra-lisible */
  --text-muted: #475569; /* Gris foncé lisible */
  --text-light: #64748B;
  --border-color: #E2E8F0; /* Bordures nettes */
  --border-subtle: #CBD5E1;

  /* Les deux composants de fiche qui étaient peints en dur dans le moteur de
     rendu — et qui restaient donc en couleurs de JOUR la nuit (registre n° 48).
     Les valeurs ci-dessous sont EXACTEMENT celles qui étaient écrites dans
     shared/fiche-renderer.js : le mode jour est inchangé par construction.
     ⚠️ Les mêmes noms existent dans admin/style.css, avec les mêmes valeurs —
     le moteur est partagé, une variable manquante d'un côté effacerait le fond. */
  /* ══ Jetons de l'écran des fiches — posés le 2026-09-22 (registre n° 26) ══
     Chaque valeur de JOUR est exactement celle qui était écrite dans
     app/js/screen-fiches.js : le mode jour est inchangé par construction, et
     c'est ce qui rend la bascule sûre. La valeur de NUIT est celle que les
     règles de rattrapage `[style*="couleur"]` produisaient déjà — sauf deux
     pastilles qu'aucune règle n'attrapait, et qui restaient claires la nuit.
     ⛔ Le but n'est pas d'avoir moins de couleurs : c'est que la nuit cesse de
     dépendre de la RECONNAISSANCE d'une couleur écrite à la main. */
  --texte-titre: #0F172A;
  --texte-corps: #334155;
  /* Textes saturés que le code écrivait à la main — posés le 2026-09-22 pour
     les quiz et les calculs de doses. Le même fond de pastille y portait
     jusqu'à trois textes différents selon l'écran : impossible de les ranger
     sous un seul jeton sans changer le mode jour. */
  --texte-vert-fonce: #065F46;
  --texte-rouge: #DC2626;
  --texte-ambre-fonce: #92400E;
  /* Texte des encadrés « Point clé » et des listes à puces des fiches
     (shared/fiche-renderer.js) : écrits à la main, ils restaient foncés sur
     fond noir la nuit — mesuré le 2026-09-29, contraste 2,0 et 1,3. */
  --texte-rouge-fonce: #991B1B;
  --texte-liste: #1E293B;
  --score-moyen-bordure: #FDE68A;
  /* L'encadré bleu de l'avertissement médical (modale « Sécurité & Mentions »). */
  --encadre-info-fond: #EFF6FF;
  --encadre-info-bordure: #BFDBFE;
  --encadre-info-titre: #1D4ED8;
  --encadre-info-texte: #1E40AF;
  --succes-bordure-vive: #6EE7B7;
  /* Le pied de page « EsiPédia · v2.x » : même gris le jour et la nuit.
     Le ranger sous un jeton de thème l'assombrissait la nuit — mesuré. */
  --texte-tres-discret: #94A3B8;
  /* Le chiffre de la série sur l'écran Statistiques : #EA580C tombait à 3,6
     sur la carte blanche (registre n° 77). */
  --texte-serie: #C2410C;
  /* Le lien « Consulter » de la carte Sécurité du profil. Écrit à la main en
     #0369A1, il tombait à un contraste de 2,85 sur la carte de nuit. */
  --texte-lien-info: #0369A1;
  --surface-pale: #F8FAFC;
  --pastille-violet-fond: #EDE9FE;
  --pastille-violet-texte: #7C3AED;
  --pastille-violet-bordure: rgba(167, 139, 250, 0.3);
  --pastille-danger-fond: #FEE2E2;
  --pastille-danger-texte: #B91C1C;
  --pastille-danger-bordure: rgba(248, 113, 113, 0.3);
  --pastille-allergie-fond: #FEF2F2;
  --pastille-allergie-texte: #DC2626;
  --pastille-allergie-bordure: #FECACA;
  --reponse-juste-fond: #ECFDF5;
  --reponse-juste-bordure: #A7F3D0;
  --reponse-juste-accent: #059669;
  --reponse-juste-texte: #065F46;
  --reponse-fausse-fond: #FEF2F2;
  --reponse-fausse-bordure: #FECACA;
  --reponse-fausse-accent: #DC2626;
  --reponse-fausse-texte: #991B1B;
  --texte-gris-fort: #475569;
  --texte-gris-doux: #64748B;
  --surface-carte: #FFFFFF;
  --surface-douce: #F1F5F9;
  --surface-bordure: #E2E8F0;
  --surface-trait: #CBD5E1;

  /* Le sélecteur « Piliers / Domaines UE » ne change PAS la nuit, et c'est
     voulu : sa pastille blanche EST le signal de sélection (décision de
     l'utilisateur, 2026-09-21). Les jetons le disent au lieu de le laisser
     au hasard de ce que les règles de rattrapage n'attrapaient pas. */
  --segment-fond: #E2E8F0;
  --segment-fond-actif: #FFFFFF;
  --segment-texte-actif: #0F172A;
  --segment-texte: #475569;
  --segment-icone: #7C3AED;

  /* Les pastilles d'état : fond pâle, texte saturé. Pas de bordure le jour.
     Textes foncés d'un cran le 2026-09-29 (registre n° 77, audit QA) : ils
     tombaient entre 1,9 et 3,6 sur leur fond ; tous au-dessus de 4,5 désormais,
     même teinte. La nuit n'est pas touchée. */
  --pastille-info-fond: #E0F2FE;
  --pastille-info-texte: #0369A1;
  --pastille-info-bordure: rgba(56, 189, 248, 0.3);
  --pastille-succes-fond: #D1FAE5;
  --pastille-succes-texte: #047857;
  --pastille-succes-bordure: rgba(52, 211, 153, 0.3);
  --pastille-alerte-fond: #FEF3C7;
  --pastille-alerte-texte: #B45309;
  --pastille-alerte-bordure: rgba(251, 191, 36, 0.3);
  --pastille-ambre-fond: #FEF3C7;
  --pastille-ambre-texte: #B45309;
  --pastille-rose-fond: #FDF2F8;
  --pastille-rose-texte: #DB2777;
  --pastille-rose-bordure: rgba(219, 39, 119, 0.25);
  --pastille-indigo-fond: #EEF2FF;
  --pastille-indigo-texte: #4F46E5;
  --pastille-indigo-bordure: rgba(79, 70, 229, 0.25);

  /* La carte d'une fiche verrouillée : fond crème, cadre pointillé ambre. */
  --verrou-fond: #FFFBEB;
  --verrou-bordure: #F59E0B;

  --fiche-code-bg: #F1F5F9;
  --fiche-code-text: #475569;
  --fiche-formule-bg: #FAF5FF;
  --fiche-formule-border: #E9D5FF;
  --fiche-formule-accent: #7C3AED;
  --fiche-formule-text: #4C1D95;

  /* La pastille grise d'un badge non débloqué — même histoire que ci-dessus :
     écrite en dur dans l'écran des badges, et invisible la nuit (registre n° 48). */
  --pastille-verrou-bg: #F1F5F9;
  --pastille-verrou-text: #475569;
  --pastille-verrou-icone: #94A3B8;
  --pastille-verrou-bordure: #E2E8F0;
  --success: #059669; /* Émeraude saturé */
  --success-soft: rgba(5, 150, 105, 0.12);
  --success-gradient: linear-gradient(135deg, #10B981 0%, #059669 60%, #047857 100%);
  --warning: #F59E0B;
  --warning-soft: rgba(245, 158, 11, 0.14);
  --warning-gradient: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);
  --danger: #F43F5E;
  --danger-soft: rgba(244, 63, 94, 0.12);
  --danger-gradient: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
  
  /* Standardisation des 6 Piliers Référentiel EsiPédia (Finition Blanc Satiné Premium) */
  --pilier-1: #7C3AED;
  --pilier-1-gradient: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
  --pilier-1-soft: rgba(124, 58, 237, 0.12);
  --pilier-1-bg: #FFFFFF;
  --pilier-1-border: rgba(124, 58, 237, 0.24);

  --pilier-2: #EC4899;
  --pilier-2-gradient: linear-gradient(135deg, #F472B6 0%, #EC4899 50%, #DB2777 100%);
  --pilier-2-soft: rgba(236, 72, 153, 0.12);
  --pilier-2-bg: #FFFFFF;
  --pilier-2-border: rgba(236, 72, 153, 0.24);

  --pilier-3: #059669;
  --pilier-3-gradient: linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%);
  --pilier-3-soft: rgba(5, 150, 105, 0.12);
  --pilier-3-bg: #FFFFFF;
  --pilier-3-border: rgba(5, 150, 105, 0.24);

  --pilier-4: #0284C7;
  --pilier-4-gradient: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 50%, #0284C7 100%);
  --pilier-4-soft: rgba(2, 132, 199, 0.12);
  --pilier-4-bg: #FFFFFF;
  --pilier-4-border: rgba(2, 132, 199, 0.24);

  --pilier-5: #D97706;
  --pilier-5-gradient: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%);
  --pilier-5-soft: rgba(245, 158, 11, 0.14);
  --pilier-5-bg: #FFFFFF;
  --pilier-5-border: rgba(217, 119, 6, 0.24);

  --pilier-6: #DC2626;
  --pilier-6-gradient: linear-gradient(135deg, #F87171 0%, #EF4444 50%, #DC2626 100%);
  --pilier-6-soft: rgba(220, 38, 38, 0.12);
  --pilier-6-bg: #FFFFFF;
  --pilier-6-border: rgba(220, 38, 38, 0.24);

  /* Ombres Sculptées Haut Contraste & Douces */
  --shadow-sm: 0 1px 4px -1px rgba(15, 23, 42, 0.05), 0 1px 2px 0 rgba(15, 23, 42, 0.03);
  --shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.06), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 14px 30px -10px rgba(255, 51, 102, 0.18);
  --shadow-phone: 0 40px 90px -15px rgba(18, 35, 91, 0.25);
  
  --radius-sm: 16px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-pill: 9999px;
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}

html, body {
  touch-action: manipulation;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  -webkit-user-select: none;
  user-select: none;
}

input, textarea {
  touch-action: auto;
  -webkit-user-select: auto;
  user-select: auto;
}

body {
  font-family: var(--font-sans);
  background-color: #CBD5E1;
  background-image: radial-gradient(#94A3B8 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--text-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Mobile Simulator Frame (Desktop-Centered Phone Look inspired by iPhone 15 Pro)
   -------------------------------------------------------------------------- */
.phone-simulator {
  width: 100%;
  max-width: 412px;
  height: 840px;
  max-height: calc(100vh - 28px);
  background-color: var(--bg-main);
  border-radius: 50px;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 11px solid #1E293B;
  /* Barre d'état simulée : l'écran commence sous la fausse Dynamic Island, comme sur un
     vrai téléphone. Sans elle, les titres passaient dessous (audit QA du 2026-09-26).
     Remise à 0 sur vrai mobile, où `env(safe-area-inset-top)` fait ce travail. */
  padding-top: 40px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dynamic Island (Desktop Simulator uniquement) */
.phone-simulator::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 26px;
  background: #000000;
  border-radius: 20px;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Home Indicator Bar (Desktop Simulator uniquement) */
.phone-simulator::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background: rgba(15, 23, 42, 0.3);
  border-radius: 4px;
  z-index: 1000;
  pointer-events: none;
}

body.dark-mode .phone-simulator::after {
  background: rgba(255, 255, 255, 0.35);
}

/* Responsive : Plein écran natif pour tous les smartphones et tablettes */
@media (max-width: 540px), (hover: none) and (pointer: coarse) and (max-width: 768px) {
  html, body {
    padding: 0;
    margin: 0;
    background: var(--bg-main);
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  .phone-simulator {
    max-width: 100%;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding-top: 0;
  }
  /* Ne pas afficher la fausse Dynamic Island ni la fausse barre Home sur vrai mobile */
  .phone-simulator::before,
  .phone-simulator::after,
  .status-bar, 
  .home-indicator {
    display: none !important;
  }
}

/* App Main Container */
.app-viewport {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(86px + env(safe-area-inset-bottom, 16px)) 16px;
}

.app-viewport::-webkit-scrollbar { display: none; }
.app-viewport { -ms-overflow-style: none; scrollbar-width: none; }

/* --------------------------------------------------------------------------
   Screen Sections & Transitions (Micro-glissement fluide / Native App Feel)
   -------------------------------------------------------------------------- */
.screen {
  display: none;
  padding: 16px;
  opacity: 0;
  transform: translateY(10px);
}

.screen.active {
  display: block;
  animation: screenSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
}

@keyframes screenSlideIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.995);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header Component Sticky Glassmorphic Fluide 60fps (Coins arrondis haut & bas 22px) */
.app-header {
  position: sticky;
  top: max(6px, env(safe-area-inset-top, 6px));
  z-index: 90;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  /* -18 px à gauche et à droite : le texte du titre retombe exactement sur
     l'alignement des tuiles et des cartes en dessous, alors que la matière
     (état scrollé) déborde de part et d'autre pour masquer le contenu. */
  margin: 0 -18px 18px -18px;
  padding: 10px 18px 12px 18px;
  background: transparent;
  border-radius: 22px;
  /* Bordure transparente présente dès le repos : `.shrunken` ne change que sa
     couleur, jamais son épaisseur — aucun décalage de mise en page. */
  border: 1.5px solid transparent;
  box-shadow: none;
  transform: translateZ(0);
  will-change: background, box-shadow, border-color;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* État scrollé : le titre passe au-dessus du contenu, il lui faut une matière
   opaque. Le seuil de bascule est calé sur le moment où l'en-tête se colle
   (cf. `ui.js`, ~8 px) et non plus 35 px, sinon le texte transparaît dessous. */
.app-header.shrunken {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: rgba(226, 232, 240, 0.95);
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.12);
}

body.dark-mode .app-header.shrunken {
  background: rgba(21, 29, 42, 0.98);
  border-color: rgba(30, 41, 59, 0.9);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.65);
}

/* Un seul réglage typographique pour les neuf en-têtes de l'app : les tailles
   allaient de 20 à 22 px et les graisses de 700 à 900 d'un écran à l'autre.
   La couleur passe par `--text-dark` au lieu du #0F172A codé en dur, qui
   obligeait le correctif fourre-tout `body.dark-mode h1 { !important }`. */
.app-header h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.025em;
  margin: 0 0 2px 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* Bloc titre (h1 + p) : peut rétrécir, ne pousse pas la pastille de niveau */
.app-header > div:first-child { min-width: 0; flex: 1 1 auto; }

.app-header p {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
  margin: 0;
}

.user-greeting h1 { font-size: 20px; font-weight: 700; color: var(--text-dark); }
.user-greeting p { font-size: 13px; color: var(--text-muted); }

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: var(--card-bg);
  border: 1.5px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.icon-btn:hover {
  background-color: #F1F5F9;
  border-color: #CBD5E1;
  transform: translateY(-1px);
}

.icon-btn:active {
  transform: scale(0.93) !important;
}

body.dark-mode .icon-btn {
  background-color: #151D2A !important;
  border-color: #1E293B !important;
  color: #F8FAFC !important;
}

body.dark-mode .icon-btn:hover {
  background-color: #1E293B !important;
  border-color: #334155 !important;
}

/* Header Profile Avatar Button */
.profile-avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.profile-avatar-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: white;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.level-badge-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--secondary);
  white-space: nowrap;
}

/* Lateral Action Pill for Quiz & Cas cliniques */
.action-pill-btn {
  width: 44px;   /* Audit 2026-09-06 (Lot C) : 36 -> 44 (cible tactile min.) */
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-pill-primary {
  background: linear-gradient(135deg, rgba(255, 51, 102, 0.1) 0%, rgba(236, 72, 153, 0.1) 45%, rgba(124, 58, 237, 0.12) 100%);
  color: #EC4899;
  border: 1px solid rgba(236, 72, 153, 0.25);
}

.action-pill-success {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.action-pill-muted {
  background: #F1F5F9;
  color: #64748B;
  border: 1px solid #E2E8F0;
}

.action-pill-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.card-3d:hover .action-pill-primary,
.card:hover .action-pill-primary {
  background: linear-gradient(135deg, #FF3366 0%, #EC4899 45%, #7C3AED 100%);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(255, 51, 102, 0.35);
  transform: scale(1.08);
}

.card-3d:hover .action-pill-muted,
.card:hover .action-pill-muted {
  background: #E2E8F0;
  color: #0F172A;
  transform: scale(1.06);
}

body.dark-mode .action-pill-primary {
  background: linear-gradient(135deg, rgba(255, 51, 102, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%) !important;
  color: #F472B6 !important;
  border-color: rgba(244, 114, 182, 0.35) !important;
}

body.dark-mode .action-pill-success {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #6EE7B7 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

body.dark-mode .action-pill-muted {
  background: #1E293B !important;
  color: #94A3B8 !important;
  border-color: #334155 !important;
}

body.dark-mode .action-pill-warning {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #FCD34D !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

/* --------------------------------------------------------------------------
   Cards & UI Components
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--card-bg);
  border-radius: 22px;
  padding: 18px; 
  margin-bottom: 14px;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  border: 1px solid var(--border-color);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-clickable { cursor: pointer; }
.card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.09);
  border-color: rgba(232, 93, 138, 0.25);
}
.card-clickable:active { transform: scale(0.98); }

.card-primary {
  background: var(--primary-gradient);
  color: white; border: none;
  box-shadow: 0 14px 32px -6px rgba(255, 51, 102, 0.4);
  position: relative;
  overflow: hidden;
}
.card-primary h2, .card-primary p, .card-primary span { color: white !important; }

.progress-bar-bg {
  width: 100%; height: 8px; background-color: rgba(226, 232, 240, 0.8);
  border-radius: var(--radius-pill); overflow: hidden; margin: 10px 0;
}
.progress-bar-fill {
  height: 100%;
  background: var(--primary-gradient);
  border-radius: var(--radius-pill);
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 12px rgba(255, 51, 102, 0.45);
}
.progress-bar-fill-white { background: white; box-shadow: 0 0 8px rgba(255,255,255,0.6); }
.progress-bar-fill-blue { background: linear-gradient(90deg, #06B6D4 0%, #2563EB 100%); box-shadow: 0 0 10px rgba(37, 99, 235, 0.4); }
.progress-bar-fill-success { background: var(--success-gradient); box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 24px; border-radius: 16px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; border: none; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; user-select: none;
}

.btn-primary {
  background: #E11D48;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.10);
}
.btn-primary:hover { background: #C81E42; }
.btn-primary:active { transform: scale(0.98); background: #BE185D; box-shadow: none; }
.btn-secondary { 
  background: var(--secondary-gradient); 
  color: white; 
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.4), 0 6px 20px rgba(124, 58, 237, 0.35); 
}
.btn-secondary:hover { transform: translateY(-2px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.45), 0 8px 24px rgba(124, 58, 237, 0.45); }
.btn-outline { background-color: transparent; border: 1.5px solid var(--border-color); color: var(--text-dark); }
.btn-white { background-color: white; color: var(--primary); font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Section Header */
.section-title { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 14px 0; }
.section-title h2 { font-size: 16px; font-weight: 800; color: var(--text-dark); letter-spacing: -0.2px; }
.section-title a { font-size: 13px; color: var(--primary); text-decoration: none; font-weight: 700; }

/* Pilier Cards */
.pilier-card {
  display: flex; gap: 14px; align-items: center; margin-bottom: 16px; padding: 18px;
}
.pilier-icon {
  width: 50px; height: 50px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform 0.2s ease;
}
.pilier-card:hover .pilier-icon { transform: scale(1.05); }
.pilier-stats {
  font-size: 12px; font-weight: 800; color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Quick Access Grid (Accueil)
   -------------------------------------------------------------------------- */
.quick-access-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.quick-tile {
  background-color: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-sm);
}
.quick-tile:hover {
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.05), 0 10px 28px -16px rgba(11, 13, 18, 0.26);
  border-color: rgba(203, 213, 225, 0.9);
}
.quick-tile:active { transform: scale(0.985); }
.quick-tile-icon {
  width: 46px; height: 46px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
  transition: transform 0.2s ease;
}

.quick-tile span { font-size: 11px; font-weight: 700; color: var(--text-dark); line-height: 1.25; }

/* --------------------------------------------------------------------------
   Gamification / Animations
   -------------------------------------------------------------------------- */
.streak-banner {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1.5px solid #FDBA74; border-radius: var(--radius-md); padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.12);
}
.streak-fire-icon { width: 44px; height: 44px; background: linear-gradient(135deg, #F97316 0%, #EA580C 100%); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); }
.streak-info h3 { font-size: 14px; font-weight: 800; color: #9A3412; }
.streak-info p { font-size: 12px; color: #C2410C; font-weight: 500; }
.streak-reminder {
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
  animation: pulse-reminder 2.2s ease-in-out infinite;
}

@keyframes pulse-reminder {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
}

@keyframes confetti-fall {
  0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.confetti-piece {
  position: absolute; width: 8px; height: 8px; top: -10px; border-radius: 2px;
  animation: confetti-fall 1.5s ease-out forwards; z-index: 1000;
}

@keyframes float-xp {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-80px) scale(1.2); opacity: 0; }
}
.floating-xp {
  position: absolute; font-size: 18px; font-weight: 800; color: var(--primary);
  z-index: 200; pointer-events: none; animation: float-xp 1.2s ease-out forwards;
}

@keyframes pulse-success {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
}
.pulse-success { animation: pulse-success 0.6s ease; }

.session-end {
  background: linear-gradient(135deg, var(--primary-soft), rgba(30,95,191,0.08)) !important;
  border: 2px solid var(--primary-soft) !important;
}

/* --------------------------------------------------------------------------
   Deck Course Cards (Style Moderne Minimaliste / Références 2026)
   -------------------------------------------------------------------------- */
.deck-course-card {
  background: var(--card-bg);
  border-radius: 24px;
  padding: 18px 20px;
  box-shadow: 0 6px 20px -3px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  border: 1.5px solid var(--border-color);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.deck-course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -5px rgba(15, 23, 42, 0.12), 0 6px 12px -2px rgba(255, 51, 102, 0.08);
  border-color: rgba(255, 51, 102, 0.35);
}

.deck-course-card:active {
  transform: scale(0.98);
}

.deck-circle-avatar {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.deck-course-card:hover .deck-circle-avatar {
  transform: scale(1.06);
}

.deck-card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.deck-card-subtitle {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
  margin: 2px 0 0 0;
  line-height: 1.35;
}

.deck-more-dots {
  display: flex;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.deck-course-card:hover .deck-more-dots {
  opacity: 1;
}

.deck-count-text {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dark);
}

.deck-percent-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.deck-progress-bar {
  width: 100%;
  height: 5px;
  border-radius: 99px;
  background: #E2E8F0;
  margin-top: 8px;
  overflow: hidden;
}

.deck-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Flashcard 3D Flip Component (Mobile-First Thumb-Zone)
   -------------------------------------------------------------------------- */
.flashcard-container {
  perspective: 1200px;
  width: 100%;
  margin: 0 0 16px 0;
}
.flashcard-inner {
  width: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.52s cubic-bezier(0.34, 1.25, 0.64, 1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.flashcard-container.flipped .flashcard-inner {
  transform: rotateY(180deg);
}
.flashcard-face {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 360px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 26px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.08), 0 4px 14px -2px rgba(15, 23, 42, 0.04);
  border: 1.5px solid var(--border-color);
  background: #FFFFFF;
  box-sizing: border-box;
}
/* Seule la face VISIBLE reste dans le flux : c'est elle qui dicte la hauteur de
   la carte. Une reponse longue fait donc grandir la carte au lieu de deborder
   par-dessus les boutons d'auto-evaluation. La face cachee reste en absolu,
   superposee, et ne pese pas sur la mise en page. */
.flashcard-container:not(.flipped) > .flashcard-inner > .flashcard-front,
.flashcard-container.flipped > .flashcard-inner > .flashcard-back {
  position: relative;
  inset: auto;
  height: auto;
}
.flashcard-back {
  transform: rotateY(180deg);
  background: #FFFFFF;
  border: 1.5px solid rgba(124, 58, 237, 0.3);
}
.flashcard-tag {
  display: none;
}
.flashcard-text {
  font-size: 17px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.55;
  text-align: center;
  margin: auto 0;
  padding: 14px 0;
  white-space: pre-line;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Verso : la reponse est du HTML mis en forme, on neutralise le pre-line herite
   du recto pour eviter les doubles sauts de ligne. */
.flashcard-answer {
  white-space: normal;
}
.flashcard-answer > *:first-child { margin-top: 0; }
.flashcard-answer > *:last-child { margin-bottom: 0; }
.flashcard-answer p {
  margin: 0 0 10px 0;
}
.flashcard-formula {
  background: #FAF5FF;
  border: 1.5px solid #E9D5FF;
  border-left: 4px solid #7C3AED;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  text-align: center;
  overflow-wrap: anywhere;
}
.flashcard-formula-label {
  font-size: 10px;
  font-weight: 800;
  color: #7C3AED;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.flashcard-formula-body {
  font-size: 13.5px;
  font-weight: 800;
  color: #4C1D95;
  line-height: 1.5;
}
.flashcard-hint {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  padding: 6px 16px;
  background: #F8FAFC;
  border-radius: 50px;
  margin: 0 auto;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.feedback-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.feedback-btn { padding: 13px 10px; border-radius: var(--radius-md); border: none; font-size: 13px; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: var(--shadow-sm); }
.feedback-btn:hover { transform: translateY(-2px); }
.feedback-btn:active { transform: scale(0.96); }
.feedback-btn-dontknow { background-color: #FEE2E2; color: #991B1B; }
.feedback-btn-hard { background-color: #FEF3C7; color: #92400E; }
.feedback-btn-good { background-color: #E0F2FE; color: #075985; }
.feedback-btn-mastered { background-color: #D1FAE5; color: #065F46; }

/* --------------------------------------------------------------------------
   Quiz Screen Styling
   -------------------------------------------------------------------------- */
.quiz-option { width: 100%; padding: 15px 18px; border-radius: var(--radius-md); background-color: var(--card-bg); border: 1.5px solid var(--border-color); font-size: 14px; font-weight: 600; color: var(--text-dark); text-align: left; margin-bottom: 10px; cursor: pointer; display: flex; align-items: flex-start; gap: 12px; transition: all 0.22s ease; box-shadow: var(--shadow-sm); }
.quiz-option:hover { border-color: rgba(232, 93, 138, 0.3); transform: translateX(3px); }
.quiz-option-letter { width: 26px; height: 26px; border-radius: 50%; background-color: #F1F5F9; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; transition: all 0.2s ease; }
.quiz-option.selected { border-color: var(--primary); background-color: var(--primary-soft); box-shadow: 0 4px 14px rgba(232, 93, 138, 0.15); }
.quiz-option.selected .quiz-option-letter { background-color: var(--primary); color: white; }
.quiz-option.correct { border-color: var(--success); background-color: var(--success-soft); }
.quiz-option.correct .quiz-option-letter { background-color: var(--success); color: white; }
.quiz-option.incorrect { border-color: var(--danger); background-color: var(--danger-soft); }
.quiz-option.incorrect .quiz-option-letter { background-color: var(--danger); color: white; }
.explanation-box { background-color: #F8FAFC; border-left: 4px solid var(--secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 16px; font-size: 13px; color: #334155; margin-top: 14px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Clinical Case Runner & Vitals
   -------------------------------------------------------------------------- */
.vitals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.vital-item { background-color: #F8FAFC; border-radius: var(--radius-sm); padding: 8px 12px; border: 1px solid #E2E8F0; }
.vital-label { font-size: 11px; color: var(--text-muted); font-weight: 600; display: block; }
.vital-value { font-size: 13px; font-weight: 700; color: var(--secondary-dark); }

/* --------------------------------------------------------------------------
   Custom On-Screen Numeric Keypad
   -------------------------------------------------------------------------- */
.display-input-box { background-color: var(--card-bg); border: 2px solid var(--primary); border-radius: var(--radius-md); padding: 16px; text-align: right; font-size: 28px; font-weight: 800; color: var(--secondary-dark); margin: 16px 0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04); letter-spacing: 1px; min-height: 64px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.unit-label { font-size: 16px; font-weight: 600; color: var(--text-muted); }
.keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.keypad-btn { height: 54px; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 21px; font-weight: 800; color: var(--text-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; box-shadow: var(--shadow-sm); transition: all 0.15s ease; }
.keypad-btn:active { background-color: #E2E8F0; transform: scale(0.95); }
.keypad-btn-del { color: var(--danger); background-color: #FEF2F2; }

/* --------------------------------------------------------------------------
   Badges Grid & Squircle 3D Medals
   -------------------------------------------------------------------------- */
.badges-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.badge-card {
  background-color: var(--card-bg);
  border-radius: 20px;
  padding: 20px 14px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(226, 232, 240, 0.75);
  position: relative;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.05), 0 8px 24px -16px rgba(11, 13, 18, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.badge-card:hover {
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.05), 0 10px 28px -16px rgba(11, 13, 18, 0.26);
  border-color: rgba(203, 213, 225, 0.9);
}
.badge-card.locked {
  opacity: 1;
  background-color: var(--card-bg);
  border-style: solid;
  border-color: rgba(226, 232, 240, 0.6);
  box-shadow: none;
}
.badge-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(245, 158, 11, 0.12);
  color: #B45309;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border: none;
  box-shadow: none;
  transition: transform 0.18s ease;
}
.badge-card.locked .badge-icon-wrap {
  background: rgba(100, 116, 139, 0.10);
  color: #94A3B8;
}
.badge-card h4 { font-size: 13.5px; font-weight: 700; color: var(--text-dark); margin: 0 0 4px 0; letter-spacing: -0.015em; }
.badge-card p { font-size: 11px; color: #64748B; line-height: 1.35; margin: 0; font-weight: 600; }
.badge-lock-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  font-size: 11px;
}

body.dark-mode .badge-icon-wrap { background: rgba(245, 158, 11, 0.16); color: #FCD34D; }
body.dark-mode .badge-card.locked .badge-icon-wrap { background: rgba(148, 163, 184, 0.12); color: #64748B; }

body.dark-mode .badge-card {
  background: #151D2A !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .badge-card h4 { color: #F8FAFC !important; }
body.dark-mode .badge-card.locked { background: #0F172A !important; }

/* --------------------------------------------------------------------------
   Navigation & Overlays (Glassmorphic Polish)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Navigation Inférieure Ancrée (Bottom Bar avec coins supérieurs arrondis)
   -------------------------------------------------------------------------- */
.bottom-nav {
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  width: 100%; 
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 0 6px env(safe-area-inset-bottom, 0px) 6px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1.5px solid rgba(226, 232, 240, 0.9);
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 24px 24px 0 0 !important;
  display: flex; 
  justify-content: space-around; 
  align-items: center;
  z-index: 500;
  box-shadow: 0 -8px 28px -4px rgba(15, 23, 42, 0.08);
}

@media (max-width: 540px), (hover: none) and (pointer: coarse) {
  .bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    z-index: 500 !important;
  }
}

body.dark-mode .bottom-nav {
  background: rgba(15, 23, 42, 0.96);
  border-top-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 -8px 28px -4px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   EFFETS TACTILES NATIVE APP & SKELETON SHIMMERS
   -------------------------------------------------------------------------- */
.card, .btn, .btn-3d, .card-3d, .option-3d, .quiz-option, .fiche-card, .cas-card, .kpi-card, .quick-tile, .deck-course-card, .key-3d, .feedback-btn, .nav-item {
  transition: transform 0.14s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.14s ease;
}
.card:active, .btn:active, .btn-3d:active, .card-3d:active, .option-3d:active, .quiz-option:active, .fiche-card:active, .cas-card:active, .quick-tile:active, .deck-course-card:active, .key-3d:active, .feedback-btn:active, .nav-item:active {
  transform: scale(0.96) !important;
}

/* En-tête Sticky Glassmorphic */
.sticky-glass-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(240, 242, 246, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  padding: 12px 16px;
  margin: -16px -16px 16px -16px;
}

/* Mode Garde de Nuit Complete Overrides (OLED Dark Mode) - v1.8.83 */
body.dark-mode {
  --bg-main: #0B0F17;
  --card-bg: #151D2A;
  --text-dark: #F8FAFC;
  --text-muted: #94A3B8;
  --text-light: #94A3B8; /* #64748B tombait à 3,6 sur les cartes de nuit (n° 77) */
  --border-color: #1E293B;
  --border-subtle: #334155;
  /* ⛔ Vu à l'écran le 2026-09-21 sur la fiche de démonstration, en mode nuit :
     les 31 badges de code et les DEUX encadrés « Formule Médicale » restaient
     en blanc cassé au milieu d'une page noire. Les badges étaient lisibles
     (contraste 6,9) mais éclatants ; les encadrés de formule, eux, sont ce
     qu'une fiche de dose a de plus important. Ils ne passaient par AUCUNE
     règle : le rattrapage du mode sombre ne vise que des `div`, or un badge de
     code est un `code` — et le fond lilas des formules n'était pas dans la
     liste des onze couleurs énumérées (registre n° 48). */
  /* ══ Jetons de l'écran des fiches, valeurs de NUIT (2026-09-22) ══
     Reprises des règles de rattrapage qu'elles remplacent, pour que la nuit
     soit identique à ce qu'elle était — À DEUX EXCEPTIONS, signalées :
     les pastilles « 🎬 Vidéo » et « 🎙️ MP3 » n'étaient attrapées par AUCUNE
     règle et restaient deux taches claires sur fond noir. Elles suivent
     désormais leurs voisines. */
  --texte-titre: #F8FAFC;
  --texte-corps: #CBD5E1;
  --texte-vert-fonce: #A7F3D0;
  --texte-rouge: #F87171;
  --texte-ambre-fonce: #FDE68A;
  --texte-rouge-fonce: #FCA5A5;
  --texte-liste: #CBD5E1;
  --score-moyen-bordure: rgba(251, 191, 36, 0.35);
  --encadre-info-fond: rgba(37, 99, 235, 0.18);
  --encadre-info-bordure: rgba(59, 130, 246, 0.35);
  --encadre-info-titre: #93C5FD;
  --encadre-info-texte: #BFDBFE;
  --succes-bordure-vive: rgba(52, 211, 153, 0.4);
  --texte-tres-discret: #94A3B8;
  --texte-serie: #FDBA74;
  --texte-lien-info: #38BDF8;
  --surface-pale: #151D2A;
  --pastille-violet-fond: rgba(139, 92, 246, 0.25);
  --pastille-violet-texte: #A78BFA;
  --pastille-danger-fond: rgba(220, 38, 38, 0.25);
  --pastille-danger-texte: #F87171;
  --pastille-allergie-fond: rgba(220, 38, 38, 0.18);
  --pastille-allergie-texte: #FCA5A5;
  --pastille-allergie-bordure: rgba(248, 113, 113, 0.35);
  --reponse-juste-fond: rgba(5, 150, 105, 0.16);
  --reponse-juste-bordure: rgba(52, 211, 153, 0.35);
  --reponse-juste-accent: #34D399;
  --reponse-juste-texte: #A7F3D0;
  --reponse-fausse-fond: rgba(220, 38, 38, 0.16);
  --reponse-fausse-bordure: rgba(248, 113, 113, 0.35);
  --reponse-fausse-accent: #F87171;
  --reponse-fausse-texte: #FCA5A5;
  --texte-gris-fort: #CBD5E1;
  --texte-gris-doux: #CBD5E1;
  --surface-carte: #151D2A;
  --surface-douce: #151D2A;
  --surface-bordure: #1E293B;
  --surface-trait: #334155;

  /* Le sélecteur garde ses couleurs de jour — voir la note du bloc :root. */
  --segment-fond: #E2E8F0;
  --segment-fond-actif: #FFFFFF;
  --segment-texte-actif: #0F172A;
  --segment-texte: #475569;
  --segment-icone: #7C3AED;

  --pastille-info-fond: rgba(2, 132, 199, 0.25);
  --pastille-info-texte: #38BDF8;
  --pastille-succes-fond: rgba(5, 150, 105, 0.25);
  --pastille-succes-texte: #34D399;
  --pastille-alerte-fond: rgba(217, 119, 6, 0.25);
  --pastille-alerte-texte: #FBBF24;
  --pastille-ambre-fond: rgba(217, 119, 6, 0.25);
  --pastille-ambre-texte: #FBBF24;
  --pastille-rose-fond: rgba(219, 39, 119, 0.25);
  --pastille-rose-texte: #F9A8D4;
  --pastille-rose-bordure: rgba(249, 168, 212, 0.3);
  --pastille-indigo-fond: rgba(79, 70, 229, 0.25);
  --pastille-indigo-texte: #A5B4FC;
  --pastille-indigo-bordure: rgba(165, 180, 252, 0.3);

  --verrou-fond: rgba(217, 119, 6, 0.12);
  --verrou-bordure: #B45309;

  --fiche-code-bg: #1E293B;
  --fiche-code-text: #CBD5E1;
  --fiche-formule-bg: #1B1731;
  --fiche-formule-border: #4C1D95;
  --fiche-formule-accent: #A78BFA;
  --fiche-formule-text: #E9D5FF;
  /* ⛔ Vu à l'écran : les DOUZE pastilles « 🔒 0/3 » de l'écran des badges
     étaient du gris clair sur gris clair — contraste 1,3. Le texte, lui, suivait
     bien le thème ; c'est le FOND qui ne le suivait pas, parce que la pastille
     est un `span` et que le rattrapage ne vise que des `div`. Un demi-thème est
     pire qu'un thème absent : il rend le texte illisible au lieu de le laisser
     seulement trop clair. */
  --pastille-verrou-bg: #1E293B;
  --pastille-verrou-text: #94A3B8;
  --pastille-verrou-icone: #64748B;
  --pastille-verrou-bordure: #334155;
  background-color: #030712 !important;
  color: #F8FAFC !important;
}

body.dark-mode .phone-simulator {
  background: #0B0F17 !important;
  border-color: #1E293B !important;
  box-shadow: 0 40px 90px -15px rgba(0, 0, 0, 0.95);
}

body.dark-mode .app-viewport {
  background: #0B0F17 !important;
  color: #F8FAFC !important;
}

/* Flashcard 3D Flip Component en Mode Nuit (OLED Dark Mode) */
body.dark-mode .flashcard-face {
  background: #151D2A !important;
  border-color: #1E293B !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.6) !important;
  color: #F8FAFC !important;
}

body.dark-mode .flashcard-back {
  background: #1E293B !important;
  border: 2px solid rgba(236, 72, 153, 0.4) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .flashcard-text {
  color: #F8FAFC !important;
}
/* Le verso (la réponse) reste un cran plus doux que la question, la nuit comme
   le jour. C'était jusqu'au 2026-09-23 l'effet d'une règle de rattrapage
   `div[style*="color:#334155"]`, plus précise que celle du dessus ; elle est
   retirée, la nuance est donc écrite ici. */
body.dark-mode .flashcard-text.flashcard-answer {
  color: var(--texte-corps) !important;
}

/* La pastille « Touchez pour révéler » ne changeait que de couleur de texte : elle gardait
   son fond clair (#F8FAFC) et sa bordure claire, soit un gris sur blanc à 2,45:1 en mode
   sombre. Le fond et la bordure suivent maintenant le thème — 6,6:1. */
body.dark-mode .flashcard-hint {
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #94A3B8 !important;
  box-shadow: none !important;
}

/* Le libellé « Réponse Clinique » prend la couleur du pilier telle quelle : trop sombre sur
   la carte (3,45:1 pour le violet). On remonte sa luminosité en conservant la teinte, donc
   l'identité du pilier ; les six piliers repassent entre 5,1 et 12,1. */
body.dark-mode .flashcard-answer-label {
  filter: brightness(1.5);
}

body.dark-mode .flashcard-formula {
  background: rgba(124, 58, 237, 0.14) !important;
  border-color: rgba(167, 139, 250, 0.35) !important;
  border-left-color: #A78BFA !important;
}

body.dark-mode .flashcard-formula-label {
  color: #C4B5FD !important;
}

body.dark-mode .flashcard-formula-body {
  color: #EDE9FE !important;
}

body.dark-mode .flashcard-tag {
  background: rgba(236, 72, 153, 0.2) !important;
  color: #F472B6 !important;
  border: 1px solid rgba(236, 72, 153, 0.3) !important;
}

/* Cartes, Bento Grids & Modales en Mode Nuit */
body.dark-mode .bento-card:not(.bento-hero),
body.dark-mode .bento-card.bento-wide,
body.dark-mode .card,
body.dark-mode .card-3d,
body.dark-mode .modal-sheet,
body.dark-mode .fiche-card,
body.dark-mode .cas-card,
body.dark-mode .kpi-card {
  background: #151D2A !important;
  color: #F8FAFC !important;
  border-color: #1E293B !important;
}

body.dark-mode .deck-course-card {
  background: #151D2A !important;
  border-color: #1E293B !important;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .deck-course-card:hover {
  background: #1E293B !important;
  border-color: #334155 !important;
}

body.dark-mode .deck-card-title {
  color: #F8FAFC !important;
}

body.dark-mode .deck-card-subtitle {
  color: #94A3B8 !important;
}

body.dark-mode .deck-count-text {
  color: #F8FAFC !important;
}

body.dark-mode .deck-percent-text {
  color: #94A3B8 !important;
}

body.dark-mode .deck-progress-bar {
  background: #0B0F17 !important;
}

/* Pavé Numérique 3D & Calcul de Doses en Mode Nuit */
body.dark-mode .key-3d {
  background: #151D2A !important;
  border-color: #1E293B !important;
  border-bottom-color: #0F172A !important;
  color: #F8FAFC !important;
}

body.dark-mode .key-3d:active {
  background: #1E293B !important;
}

body.dark-mode .key-3d.action-key {
  background: #1E293B !important;
  color: #94A3B8 !important;
}

/* Feedback Drawer (Tiroir Duolingo) en Mode Nuit */
body.dark-mode .feedback-drawer.correct-drawer {
  background: #064E3B !important;
  border-top-color: #10B981 !important;
  color: #D1FAE5 !important;
}

body.dark-mode .feedback-drawer.wrong-drawer {
  background: #7F1D1D !important;
  border-top-color: #EF4444 !important;
  color: #FEE2E2 !important;
}

body.dark-mode .feedback-header,
body.dark-mode .feedback-body {
  color: inherit !important;
}

/* Progression Sub-Box sur les Piliers de révision */
.progress-sub-box {
  background: #F8FAFC;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid #F1F5F9;
}
body.dark-mode .progress-sub-box {
  background: #0B0F17 !important;
  border-color: #1E293B !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   PASTILLES D'ÉTAT — posées le 2026-09-22 (registre n° 26)
   ──────────────────────────────────────────────────────────────────────────
   Elles ne portent QUE la couleur : la géométrie (taille, marge intérieure,
   rayon) reste dans l'écran, parce qu'elle change d'un emplacement à l'autre.
   ⛔ Pas de bordure le jour, une bordure la nuit : c'est exactement ce que
   faisaient les règles `span[style*="background:#…"]` qu'elles remplacent.
   Ajouter une bordure transparente le jour ferait grandir la pastille de 2 px.
   ══════════════════════════════════════════════════════════════════════════ */
.pastille-info    { background: var(--pastille-info-fond);    color: var(--pastille-info-texte); }
.pastille-succes  { background: var(--pastille-succes-fond);  color: var(--pastille-succes-texte); }
.pastille-alerte  { background: var(--pastille-alerte-fond);  color: var(--pastille-alerte-texte); }
/* Le niveau « Moyen » d'un cas : même fond que « Premium », mais son texte est
   #F59E0B et non #D97706. Deux jetons, parce que deux valeurs de jour — les
   confondre aurait changé le mode jour, ce que la mesure a vu tout de suite. */
.pastille-ambre   { background: var(--pastille-ambre-fond);   color: var(--pastille-ambre-texte); }
.pastille-rose    { background: var(--pastille-rose-fond);    color: var(--pastille-rose-texte);   border: 1px solid var(--pastille-rose-bordure); }
.pastille-indigo  { background: var(--pastille-indigo-fond);  color: var(--pastille-indigo-texte); border: 1px solid var(--pastille-indigo-bordure); }

body.dark-mode .pastille-info   { border: 1px solid var(--pastille-info-bordure); }
body.dark-mode .pastille-succes { border: 1px solid var(--pastille-succes-bordure); }
body.dark-mode .pastille-alerte { border: 1px solid var(--pastille-alerte-bordure); }
body.dark-mode .pastille-ambre  { border: 1px solid var(--pastille-alerte-bordure); }


/* ══════════════════════════════════════════════════════════════════════════
   TUILES DE CONSTANTES VITALES — posées le 2026-09-22 (registre n° 26 et 48)
   ──────────────────────────────────────────────────────────────────────────
   ⛔ C'est le trou le plus visible trouvé jusqu'ici : sur un cas clinique
   ouvert, les DOUZE tuiles du moniteur (PA, FC, FR, T°, GLYCÉMIE, DOULEUR…)
   restaient en couleurs de jour la nuit — pastel sur fond noir. Aucune règle
   de rattrapage ne les visait : leurs fonds (#EFF6FF, #FFF7ED, #ECFDF5…) ne
   figuraient dans aucune des onze couleurs énumérées. Mesuré à l'écran sur
   `f3008cc9…` : 12 éléments clairs. 9 des 19 cas portent des constantes.
   ──────────────────────────────────────────────────────────────────────────
   Chaque famille ne définit que trois variables ; la tuile et la ligne s'en
   servent. Les valeurs de JOUR sont exactement celles qui étaient écrites
   dans `app/js/screen-cas.js`. Celles de NUIT sont nouvelles — c'est le seul
   endroit de cette passe où la nuit change, et c'est le but.
   ══════════════════════════════════════════════════════════════════════════ */
.constante-tuile,
.constante-ligne {
  background: var(--constante-fond);
  border: 1.5px solid var(--constante-bordure);
}
.constante-valeur { color: var(--constante-texte); }
.constante-libelle { color: var(--texte-gris-doux); }
.constante-puce {
  color: var(--constante-texte);
  background: var(--constante-puce-fond);
  border: 1px solid var(--constante-bordure);
}

.constante-defaut  { --constante-texte: #0F172A; --constante-fond: #F8FAFC; --constante-bordure: #E2E8F0; --constante-puce-fond: rgba(255, 255, 255, 0.7); }
.constante-pa      { --constante-texte: #1E3A8A; --constante-fond: #EFF6FF; --constante-bordure: #DBEAFE; --constante-puce-fond: rgba(255, 255, 255, 0.7); }
.constante-fc      { --constante-texte: #9A3412; --constante-fond: #FFF7ED; --constante-bordure: #FFEDD5; --constante-puce-fond: rgba(255, 255, 255, 0.7); }
.constante-spo2    { --constante-texte: #065F46; --constante-fond: #ECFDF5; --constante-bordure: #D1FAE5; --constante-puce-fond: rgba(255, 255, 255, 0.7); }
.constante-temp    { --constante-texte: #991B1B; --constante-fond: #FEF2F2; --constante-bordure: #FEE2E2; --constante-puce-fond: rgba(255, 255, 255, 0.7); }
.constante-glyc    { --constante-texte: #6B21A8; --constante-fond: #FAF5FF; --constante-bordure: #F3E8FF; --constante-puce-fond: rgba(255, 255, 255, 0.7); }
.constante-douleur { --constante-texte: #C2410C; --constante-fond: #FFF7ED; --constante-bordure: #FFEDD5; --constante-puce-fond: rgba(255, 255, 255, 0.7); }
.constante-fr      { --constante-texte: #0369A1; --constante-fond: #F0F9FF; --constante-bordure: #BAE6FD; --constante-puce-fond: rgba(255, 255, 255, 0.7); }
.constante-poids   { --constante-texte: #475569; --constante-fond: #F8FAFC; --constante-bordure: #E2E8F0; --constante-puce-fond: rgba(255, 255, 255, 0.7); }

body.dark-mode .constante-defaut  { --constante-texte: #E2E8F0; --constante-fond: rgba(100, 116, 139, 0.18); --constante-bordure: #334155; }
body.dark-mode .constante-pa      { --constante-texte: #93C5FD; --constante-fond: rgba(37, 99, 235, 0.22);   --constante-bordure: rgba(59, 130, 246, 0.35); }
body.dark-mode .constante-fc      { --constante-texte: #FDBA74; --constante-fond: rgba(234, 88, 12, 0.22);   --constante-bordure: rgba(251, 146, 60, 0.35); }
body.dark-mode .constante-spo2    { --constante-texte: #6EE7B7; --constante-fond: rgba(5, 150, 105, 0.22);   --constante-bordure: rgba(52, 211, 153, 0.35); }
body.dark-mode .constante-temp    { --constante-texte: #FCA5A5; --constante-fond: rgba(220, 38, 38, 0.22);   --constante-bordure: rgba(248, 113, 113, 0.35); }
body.dark-mode .constante-glyc    { --constante-texte: #D8B4FE; --constante-fond: rgba(139, 92, 246, 0.22);  --constante-bordure: rgba(167, 139, 250, 0.35); }
body.dark-mode .constante-douleur { --constante-texte: #FDBA74; --constante-fond: rgba(234, 88, 12, 0.22);   --constante-bordure: rgba(251, 146, 60, 0.35); }
body.dark-mode .constante-fr      { --constante-texte: #7DD3FC; --constante-fond: rgba(2, 132, 199, 0.22);   --constante-bordure: rgba(56, 189, 248, 0.35); }
body.dark-mode .constante-poids   { --constante-texte: #CBD5E1; --constante-fond: rgba(100, 116, 139, 0.18); --constante-bordure: #334155; }
body.dark-mode .constante-puce    { --constante-puce-fond: rgba(255, 255, 255, 0.08); }

/* Les deux pastilles ajoutées par l'écran des cas, et le bandeau d'allergie. */
.pastille-violet   { background: var(--pastille-violet-fond);   color: var(--pastille-violet-texte); }
.pastille-danger   { background: var(--pastille-danger-fond);   color: var(--pastille-danger-texte); }
.pastille-allergie { background: var(--pastille-allergie-fond); color: var(--pastille-allergie-texte); border: 1px solid var(--pastille-allergie-bordure); }
body.dark-mode .pastille-violet { border: 1px solid var(--pastille-violet-bordure); }
body.dark-mode .pastille-danger { border: 1px solid var(--pastille-danger-bordure); }

/* Le bloc d'explication d'une étape de cas : juste ou faux. */
/* ⚠️ `.card-3d` est définie PLUS BAS dans ce fichier : à spécificité égale,
   c'est elle qui l'emporterait et le bloc redeviendrait une carte blanche.
   Vu à l'écran en le mesurant. D'où les deux classes dans le sélecteur. */
.reponse-juste,
.card-3d.reponse-juste  { background: var(--reponse-juste-fond);  border: 1.5px solid var(--reponse-juste-bordure); }
.reponse-fausse,
.card-3d.reponse-fausse { background: var(--reponse-fausse-fond); border: 1.5px solid var(--reponse-fausse-bordure); }
.reponse-juste .reponse-verdict  { color: var(--reponse-juste-texte); }
.reponse-fausse .reponse-verdict { color: var(--reponse-fausse-texte); }

/* ⛔ La nuit, ce bloc perdait SON SENS. La règle de rattrapage des cartes
   (`body.dark-mode .card-3d`) impose fond, texte et bordure en `!important` :
   le vert du « bien répondu » et le rouge de l'alerte clinique disparaissaient
   tous les deux derrière le même gris. Seuls l'émoji et le texte restaient
   pour distinguer une bonne décision d'une erreur. Il faut donc `!important`
   ici aussi — c'est le prix du rattrapage tant qu'il est là. */
body.dark-mode .reponse-juste,
body.dark-mode .card-3d.reponse-juste {
  background: var(--reponse-juste-fond) !important;
  border-color: var(--reponse-juste-bordure) !important;
}
body.dark-mode .reponse-fausse,
body.dark-mode .card-3d.reponse-fausse {
  background: var(--reponse-fausse-fond) !important;
  border-color: var(--reponse-fausse-bordure) !important;
}
/* Le verdict aussi : `body.dark-mode strong` le repeint en blanc avec
   `!important`, et le « bien répondu » perdait sa couleur. */
body.dark-mode .reponse-juste .reponse-verdict  { color: var(--reponse-juste-texte) !important; }
body.dark-mode .reponse-fausse .reponse-verdict { color: var(--reponse-fausse-texte) !important; }

/* Les pastilles d'état ne sont plus rattrapées par la couleur écrite dans leur
   attribut style : elles portent les classes .pastille-* (plus haut), dont
   les jetons ont leur valeur de nuit. Les cinq règles span[style*="background:#…"]
   qui vivaient ici ont été retirées le 2026-09-23 : plus aucun écran ne les
   déclenchait (registre n° 48). */

/* Boutons 3D & Actions en Mode Nuit */
/* Les fonds pleins des boutons tiennent tels quels sur fond sombre : le texte
   blanc y garde son contraste. Seule la variante neutre change de teinte. */
body.dark-mode .btn-3d-secondary {
  background: #1E293B !important;
  color: #E2E8F0 !important;
  border-color: #334155 !important;
}
body.dark-mode .btn-3d-secondary:active,
body.dark-mode .btn-3d-secondary.pressed {
  background: #0F172A !important;
}

/* Barre de Gamification & Streaks en Mode Nuit */
body.dark-mode .top-gamification-bar {
  background: #151D2A !important;
  border-bottom-color: #1E293B !important;
}

body.dark-mode .streak-banner {
  background: linear-gradient(135deg, #431407 0%, #1C0A00 100%) !important;
  border-color: #9A3412 !important;
}
body.dark-mode .streak-info h3 {
  color: #FDBA74 !important;
}
body.dark-mode .streak-info p {
  color: #FB923C !important;
}

body.dark-mode .progress-bar-bg {
  background-color: #1E293B !important;
}

/* Titres, Textes & Typographie en Mode Nuit */
/* ⛔ Les 24 règles `div[style*="color:#0F172A"]`, `span[style*="color:#64748B"]`…
   qui complétaient ces deux listes ont été retirées le 2026-09-23 : les écrans
   écrivent désormais var(--texte-titre), var(--texte-corps) ou
   var(--texte-gris-doux), qui ont leur valeur de nuit. N'en rajoutez pas : une
   couleur de texte neuve se prend dans les jetons (CHARTE_GRAPHIQUE.md §1.A ter). */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode strong:not([style*="color:"]) {
  color: #F8FAFC !important;
}

body.dark-mode p {
  color: #CBD5E1 !important;
}

body.dark-mode blockquote {
  background: rgba(30, 41, 59, 0.75) !important;
  color: #E2E8F0 !important;
  border-left-color: var(--primary) !important;
}

body.dark-mode blockquote strong {
  color: #F8FAFC !important;
}

body.dark-mode .sticky-glass-header {
  background: rgba(11, 15, 23, 0.88) !important;
  border-bottom: 1px solid #1E293B !important;
}

body.dark-mode .status-bar {
  color: #F8FAFC;
}

/* Quiz Option Cards (.option-3d) en Mode Nuit */
body.dark-mode .option-3d {
  background: #151D2A !important;
  border-color: #1E293B !important;
  border-bottom-color: #0F172A !important;
  color: #F8FAFC !important;
}

body.dark-mode .option-3d:hover {
  background: #1E293B !important;
  border-color: #334155 !important;
}

body.dark-mode .option-badge-num {
  border-color: #334155 !important;
  background: #0B0F17 !important;
  color: #94A3B8 !important;
}

body.dark-mode .option-3d.selected {
  background: rgba(2, 132, 199, 0.25) !important;
  border-color: #38BDF8 !important;
  border-bottom-color: #0284C7 !important;
  color: #38BDF8 !important;
}

body.dark-mode .option-3d.selected .option-badge-num {
  border-color: #38BDF8 !important;
  background: #0284C7 !important;
  color: #FFFFFF !important;
}

body.dark-mode .option-3d.correct {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #10B981 !important;
  border-bottom-color: #059669 !important;
  color: #34D399 !important;
}

body.dark-mode .option-3d.correct .option-badge-num {
  border-color: #10B981 !important;
  background: #059669 !important;
  color: #FFFFFF !important;
}

body.dark-mode .option-3d.wrong {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #EF4444 !important;
  border-bottom-color: #DC2626 !important;
  color: #F87171 !important;
}

body.dark-mode .option-3d.wrong .option-badge-num {
  border-color: #EF4444 !important;
  background: #DC2626 !important;
  color: #FFFFFF !important;
}

/* Fiches de Révision en Mode Nuit */
body.dark-mode .fiche-reader-body {
  color: #CBD5E1 !important;
}

body.dark-mode .fiche-hero-card {
  background: #151D2A !important;
  border-color: #1E293B !important;
}

body.dark-mode .fiche-hero-card h1 {
  color: #F8FAFC !important;
}

body.dark-mode #podcast-audio-card {
  background: #151D2A !important;
  border-color: #1E293B !important;
}

body.dark-mode #podcast-status-text {
  color: #F8FAFC !important;
}

body.dark-mode #podcast-speed-btn,
body.dark-mode #btn-fiche-fontsize {
  background: #1E293B !important;
  color: #94A3B8 !important;
  border-color: #334155 !important;
}

body.dark-mode #podcast-timeline-track {
  background: #1E293B !important;
}

body.dark-mode .fiche-reading-progress-track {
  background: #1E293B !important;
}

body.dark-mode .fiche-anchor-pill {
  background: #1E1A2E !important;
  border-color: #3B2D54 !important;
  color: #F472B6 !important;
}

body.dark-mode .fiche-anchor-pill:active {
  background: #3B2D54 !important;
}

body.dark-mode .fiche-section-header {
  background: #151D2A !important;
  border-radius: 0 14px 14px 0 !important;
}

body.dark-mode .fiche-section-header h2 {
  color: #F8FAFC !important;
}

body.dark-mode .fiche-subsection-header {
  color: #38BDF8 !important;
}

body.dark-mode .number-card-3d {
  background: #151D2A !important;
  border-color: #1E293B !important;
  border-bottom-color: #0F172A !important;
  color: #F8FAFC !important;
}

body.dark-mode .number-badge-3d {
  background: #0B0F17 !important;
  border-color: #334155 !important;
}

body.dark-mode .bullet-item-clean {
  color: #CBD5E1 !important;
}

/* Mini-Cartes 3D de Tableaux Mobiles */
body.dark-mode .fiche-stack-card {
  background: #151D2A !important;
  border-color: #1E293B !important;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .fiche-stack-header {
  border-bottom-color: #1E293B !important;
}

body.dark-mode .fiche-stack-colonne {
  color: #94A3B8 !important;
}

body.dark-mode .fiche-stack-title {
  color: #F8FAFC !important;
}

body.dark-mode .fiche-stack-body {
  background: transparent !important;
}

body.dark-mode .fiche-stack-label {
  color: #94A3B8 !important;
}

body.dark-mode .fiche-stack-val {
  color: #CBD5E1 !important;
}

/* Cartes Questions & Corrigés d'Examen IFSI */
body.dark-mode .fiche-exam-card {
  background: #151D2A !important;
  border-color: #1E293B !important;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .fiche-exam-badge {
  background: #1E1B4B !important;
  color: #A5B4FC !important;
  border-color: #3730A3 !important;
}

body.dark-mode .fiche-exam-num {
  color: #94A3B8 !important;
}

body.dark-mode .fiche-exam-question {
  color: #F8FAFC !important;
}

body.dark-mode .fiche-exam-solution {
  background: #0B0F17 !important;
  border-color: #1E293B !important;
  border-left-color: #6366F1 !important;
}

body.dark-mode .fiche-exam-sol-title {
  color: #A5B4FC !important;
}

body.dark-mode .fiche-exam-step {
  color: #CBD5E1 !important;
}

body.dark-mode .fiche-exam-step-num {
  background: #4F46E5 !important;
  color: #FFFFFF !important;
}

/* Pack Pédagogique (3 Boutons en bas de fiche) */
body.dark-mode .fiche-pack-btn-flash {
  background: #062313 !important;
  border-color: #047857 !important;
  color: #34D399 !important;
}

body.dark-mode .fiche-pack-btn-flash .fiche-pack-icon {
  background: #047857 !important;
  color: #FFFFFF !important;
}

body.dark-mode .fiche-pack-btn-quiz {
  background: #1A0D30 !important;
  border-color: #6D28D9 !important;
  color: #C084FC !important;
}

body.dark-mode .fiche-pack-btn-quiz .fiche-pack-icon {
  background: #6D28D9 !important;
  color: #FFFFFF !important;
}

body.dark-mode .fiche-pack-btn-cas {
  background: #0A1B38 !important;
  border-color: #1D4ED8 !important;
  color: #60A5FA !important;
}

body.dark-mode .fiche-pack-btn-cas .fiche-pack-icon {
  background: #1D4ED8 !important;
  color: #FFFFFF !important;
}

/* Alertes Markdown GFM en Mode Sombre */
body.dark-mode blockquote.markdown-alert-note {
  background: #0C1929 !important;
  border-left-color: #38BDF8 !important;
  color: #BAE6FD !important;
}

body.dark-mode blockquote.markdown-alert-warning {
  background: #24180A !important;
  border-left-color: #F59E0B !important;
  color: #FDE68A !important;
}

body.dark-mode blockquote.markdown-alert-important {
  background: #1D1530 !important;
  border-left-color: #A855F7 !important;
  color: #E9D5FF !important;
}

body.dark-mode blockquote.markdown-alert-caution {
  background: #270D14 !important;
  border-left-color: #EF4444 !important;
  color: #FECACA !important;
}

body.dark-mode .fiche-table-container {
  border-color: #1E293B !important;
  box-shadow: 0 4px 0 #1E293B !important;
}

body.dark-mode .fiche-table-3d {
  background: #151D2A !important;
}

body.dark-mode .fiche-table-3d th {
  background: #0B0F17 !important;
  color: #F8FAFC !important;
  border-bottom-color: #1E293B !important;
}

body.dark-mode .fiche-table-3d td {
  color: #E2E8F0 !important;
  border-bottom-color: #1E293B !important;
}

body.dark-mode .fiche-table-3d tr:nth-child(even) {
  background: #1E293B !important;
}

/* Inputs, Textareas, Selects & Boutons d'Icônes */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background: #151D2A !important;
  color: #F8FAFC !important;
  border-color: #1E293B !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #64748B !important;
}

body.dark-mode .icon-btn {
  background: #151D2A !important;
  border-color: #1E293B !important;
  color: #F8FAFC !important;
}

/* Squelettes de Chargement Animés */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.skeleton-box {
  background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 37%, #E2E8F0 63%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 12px;
}

/* Pull-To-Refresh Indicator (v1.8.25) */
.pull-to-refresh-box {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFFFFF;
  color: #0F172A;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  border: 1px solid #E2E8F0;
  z-index: 250;
  transition: top 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}
.pull-to-refresh-box.active {
  top: 14px;
  opacity: 1;
}
.pull-to-refresh-box.refreshing #ptr-icon {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}
.nav-item {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
  gap: 3px;
  color: #64748B; /* Audit 2026-09-06 (Lot C) : #94A3B8 (2.9:1) -> #64748B (4.6:1) */
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1); 
  flex: 1; 
  height: 100%;
  text-align: center;
  position: relative;
  border-radius: 18px;
  -webkit-tap-highlight-color: transparent;
}

.nav-icon-wrap {
  width: 40px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-icon-wrap svg { 
  width: 20px; 
  height: 20px; 
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

.nav-item span {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  max-width: 100%;
  transition: all 0.2s ease;
}

/* État Actif Vibré */
.nav-item.active { 
  color: #EC4899; 
}

.nav-item.active .nav-icon-wrap { 
  background: linear-gradient(135deg, rgba(255, 51, 102, 0.18) 0%, rgba(236, 72, 153, 0.20) 45%, rgba(124, 58, 237, 0.18) 100%);
  color: #EC4899;
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(255, 51, 102, 0.25);
}

.nav-item.active .nav-icon-wrap svg {
  stroke-width: 2.5;
  transform: scale(1.12);
  filter: drop-shadow(0 2px 6px rgba(255, 51, 102, 0.4));
}

.nav-item.active span {
  color: #EC4899;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Mode Nuit */
body.dark-mode .nav-item {
  color: #64748B;
}

body.dark-mode .nav-item.active {
  color: #FB7185;
}

body.dark-mode .nav-item.active .nav-icon-wrap {
  background: linear-gradient(135deg, rgba(255, 51, 102, 0.25) 0%, rgba(124, 58, 237, 0.25) 100%);
  color: #FB7185;
}

body.dark-mode .nav-item.active .nav-icon-wrap svg {
  filter: drop-shadow(0 2px 8px rgba(255, 51, 102, 0.5));
}

body.dark-mode .nav-item.active span {
  color: #FB7185;
}

.nav-item:active { 
  transform: scale(0.92); 
}

.home-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; background-color: #0F172A; border-radius: 100px; z-index: 200; pointer-events: none !important; }
body.dark-mode .home-indicator { background-color: #475569; }

.modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.4); backdrop-filter: blur(2px); z-index: 300; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-sheet { background-color: var(--card-bg); width: 100%; border-radius: 28px 28px 0 0; padding: 24px; box-shadow: 0 -10px 25px rgba(0,0,0,0.1); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.modal-overlay.active .modal-sheet { transform: translateY(0); }
.modal-handle { width: 40px; height: 5px; background-color: #E2E8F0; border-radius: 10px; margin: 0 auto 20px auto; }
body.dark-mode .modal-handle { background-color: #334155; }

.ios-install-hint {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
   Écran d'Authentification — Design Minimaliste & Épuré (Full-Bleed 100%)
   ========================================================================== */
#ecran-auth {
  padding: 0 !important;
  margin: 0 !important;
}

#ecran-auth.active {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-height: 100dvh;
  z-index: 200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #F8FAFC;
}

/* ⛔ L'ÉCRAN DE CONNEXION NE SUIT PAS LE THÈME — ses textes non plus.
   Son fond (#F8FAFC ci-dessus) et sa carte (`.auth-card`, #FFFFFF) sont clairs
   dans les DEUX modes : aucune règle `dark-mode` ne les vise, et c'est voulu.
   Ses textes doivent donc rester sombres la nuit. Deux jetons dédiés, définis
   ici et JAMAIS redéfinis sous `body.dark-mode` — même principe que les jetons
   du sélecteur de segment (2026-09-21).
   Vu à l'écran le 2026-09-23, en mode nuit : « EMAIL », « MOT DE PASSE »,
   « Prénom & nom » et « Essayer sans compte » étaient devenus illisibles
   (#CBD5E1 sur blanc, contraste 1,5) depuis leur passage aux jetons de thème
   en v2.0.66 — une couleur identique à un jeton n'a pas le même rôle que lui.
   Le titre « EsiPédia » et son sous-titre, eux, étaient invisibles DEPUIS BIEN
   PLUS LONGTEMPS : ils sont blanchis par les correctifs fourre-tout
   `body.dark-mode h1` et `body.dark-mode p`, d'où les deux `!important`
   ci-dessous, qui ne visent que cet écran. */
#ecran-auth {
  --auth-titre: #0F172A;
  --auth-texte-doux: #64748B;
}

body.dark-mode #ecran-auth h1 { color: var(--auth-titre) !important; }
body.dark-mode #ecran-auth p  { color: var(--auth-texte-doux) !important; }

.auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: auto 0;
  padding: max(24px, calc(16px + env(safe-area-inset-top, 16px))) 20px max(32px, calc(16px + env(safe-area-inset-bottom, 16px)));
  width: 100%;
  box-sizing: border-box;
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.auth-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 22px 20px;
  width: 100%;
  border: 1.5px solid #E2E8F0;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 2px 8px -2px rgba(15, 23, 42, 0.04);
}

.auth-tabs {
  display: flex;
  background: #F1F5F9;
  border-radius: 50px;
  padding: 4px;
  margin-bottom: 20px;
  border: 1px solid #E2E8F0;
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 50px;
  font-size: 12.5px;
  font-weight: 700;
  color: #64748B;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-tab.active {
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: #0F172A;
  outline: none;
  transition: all 0.2s ease;
  background: #F8FAFC;
  box-sizing: border-box;
}

.auth-input:focus {
  border-color: #EC4899;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.12);
}

/* Neutralisation du fond jaune disgracieux de l'autofill navigateur */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #F8FAFC inset !important;
  -webkit-text-fill-color: #0F172A !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Bouton afficher / masquer le mot de passe — Audit 2026-09-06 (Lot D) */
.pw-toggle {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: #64748B;
  cursor: pointer;
}
.pw-toggle:hover { color: #0F172A; }
.pw-toggle[aria-pressed="true"] { color: #6D28D9; }
body.dark-mode .pw-toggle { color: #94A3B8; }
body.dark-mode .pw-toggle:hover { color: #F8FAFC; }

/* ==========================================================================
   Bento Grid & Neo-Tactile Design Theme (Ultra-Modern 2026)
   ========================================================================== */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.bento-card {
  background: var(--card-bg);
  border-radius: 22px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bento-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.1);
  border-color: rgba(124, 58, 237, 0.3);
}

/* --- Séance de 5 minutes (accueil, 2026-10-07) ------------------------------
   UN composant, deux états, même géométrie : texte à gauche, disque ▶ à droite
   (sous le pouce), même hauteur, même rayon. Seul le remplissage s'inverse.
   · .seance-a-faire : carte au dégradé de la marque, disque blanc, onde lente —
     la seule tache de couleur forte de l'accueil, tant que la séance du jour
     n'est pas faite.
   · .seance-faite : carte blanche comme les autres, disque au dégradé, aucune
     onde — la séance est faite, le bouton reste pour en refaire une.
   Choisi avec l'utilisateur sur trois maquettes (« AC, avec de la cohérence »).
   L'onde s'arrête d'elle-même avec « réduire les animations » (règle globale). */
.seance-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  margin: 0 0 18px 0;
  padding: 14px 16px 14px 20px;
  border-radius: 20px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.seance-cta:active { transform: scale(0.98); }
.seance-cta:focus-visible { outline: 3px solid #7C3AED; outline-offset: 3px; }
.seance-cta:disabled { cursor: progress; opacity: 0.85; }

.seance-texte { flex: 1; min-width: 0; }
.seance-titre { font-size: 16.5px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }

.seance-disque {
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.seance-disque svg { margin-left: 2px; }   /* le triangle ▶ paraît décentré sans ça */

.seance-a-faire {
  background: var(--primary-gradient);
  color: #FFFFFF;
  box-shadow: 0 8px 20px -8px rgba(225, 29, 72, 0.55);
}
.seance-a-faire .seance-disque { background: #FFFFFF; color: #E11D48; }
.seance-a-faire .seance-disque::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: seanceOnde 2.8s ease-out infinite;
}
@keyframes seanceOnde {
  0%        { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}

.seance-faite {
  background: var(--surface-carte);
  color: var(--texte-titre);
  border-color: var(--surface-bordure);
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.06);
}
.seance-faite .seance-disque { background: var(--primary-gradient); color: #FFFFFF; }

/* --- Véritable Paquet de Cartes Physiques Superposées 3D (Stacked Deck of Cards) --- */
.stacked-deck-wrap {
  position: relative;
  height: 168px;
  /* 34 et non 22 : les cartes fantômes du paquet remontent de 26 px
     (`translateY(-26px)` sur `.pos-hidden`), donc elles mangent la marge et
     venaient toucher la ligne de série juste au-dessus. */
  margin-top: 34px;
  margin-bottom: 12px;
  perspective: 1000px;
  touch-action: pan-y;
}

/* Carte du paquet — alignée sur `.tuile` en v2.0.23 : plus de fond teinté par
   pilier ni de bordure colorée, la couleur ne reste que sur le trait de
   l'icône. Le paquet détonnait avec les tuiles juste en dessous. */
.stacked-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  padding: 18px;
  cursor: pointer;
  box-sizing: border-box;
  background: var(--card-bg);
  border: 1px solid rgba(226, 232, 240, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  user-select: none;
  transform-origin: top center;
  transition: transform 0.38s cubic-bezier(0.34, 1.25, 0.64, 1), opacity 0.35s ease, box-shadow 0.3s ease;
  will-change: transform, opacity;
}

/* Positions dans le paquet superposé (3D Deck Stack) */
.stacked-card.pos-0 {
  transform: translateY(0) scale(1);
  z-index: 10;
  opacity: 1;
  box-shadow: 0 14px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  pointer-events: auto;
}

.stacked-card.pos-0:active {
  transform: scale(0.985) translateY(1px);
}

.stacked-card.pos-1 {
  transform: translateY(-10px) scale(0.94);
  z-index: 9;
  opacity: 0.88;
  box-shadow: 0 8px 20px -3px rgba(15, 23, 42, 0.06);
  pointer-events: none;
}

.stacked-card.pos-2 {
  transform: translateY(-20px) scale(0.88);
  z-index: 8;
  opacity: 0.65;
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.04);
  pointer-events: none;
}

.stacked-card.pos-hidden {
  transform: translateY(-26px) scale(0.82);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}

/* ⛔ L'état qui manquait, et qui rendait le glissement bancal dans un seul sens
   (v2.0.23). Le paquet n'avait que des places « derrière » : `pos-1`, `pos-2`,
   puis `pos-hidden` à `opacity: 0`. Vers l'avant, la carte qui monte au premier
   plan était déjà visible en `pos-1` : elle glissait. **Vers l'arrière, elle
   sortait de `pos-hidden`, donc de nulle part : elle apparaissait d'un coup.**

   `pos-prev` est la place « devant » : la carte qui vient de partir y est garée,
   sortie par la gauche, là où le doigt l'a poussée. Les deux sens deviennent
   symétriques — une carte part à gauche, et revient par la gauche. */
.stacked-card.pos-prev {
  transform: translateX(-64%) rotate(-7deg) scale(0.96);
  z-index: 11;                 /* au-dessus de pos-0 : elle se repose SUR le paquet */
  opacity: 0;
  pointer-events: none;
}

/* Le reflet exact de `pos-prev`, pour le glissement vers la droite (2026-10-07) : la carte
   poussée sort par la droite avec le même mouvement, puis va se ranger derrière. Les deux
   sens sont symétriques : la carte part dans le sens du doigt, celle de derrière monte. */
.stacked-card.pos-sortie-droite {
  transform: translateX(64%) rotate(7deg) scale(0.96);
  z-index: 11;
  opacity: 0;
  pointer-events: none;
}

.stacked-deck-nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 22px;
  padding: 0 4px;
  min-height: 24px;
}

.stacked-deck-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0; /* Lot C : l'écart visuel est désormais porté par le padding des points. */
  margin-left: -9px; /* compense le padding du 1er point : alignement inchangé */
}

.stacked-dot {
  /* Audit 2026-09-06 (Lot C) : point visible 6px, mais zone tactile 24x24
     (WCAG 2.2 AA) via padding transparent + background-clip. */
  box-sizing: content-box;
  width: 6px;
  height: 6px;
  padding: 9px;
  border-radius: 50%;
  background: #CBD5E1;
  background-clip: content-box;
  cursor: pointer;
  transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease;
}

.stacked-dot.active {
  width: 18px;
  border-radius: 10px;
  background: #7C3AED;
  background-clip: content-box;
}

.stacked-link-subtle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--texte-corps); /* #94A3B8 tombait à 2,3 sur le fond de l'accueil (n° 77) */
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
  letter-spacing: -0.01em;
}
.stacked-link-subtle:hover, .stacked-link-subtle:active {
  color: #7C3AED;
}

body.dark-mode .stacked-card {
  background: #151D2A;
  border-color: #28334A;
}
body.dark-mode .stacked-nav-arrow {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #94A3B8 !important;
}

.bento-card.bento-hero {
  grid-column: span 2;
  background: linear-gradient(135deg, #FF3366 0%, #EC4899 45%, #7C3AED 100%);
  color: white;
  border: none;
  padding: 22px;
  box-shadow: 0 18px 40px -6px rgba(255, 51, 102, 0.38);
}

.bento-card.bento-wide {
  grid-column: span 2;
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.bento-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

.glass-pill {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 800;
  color: white;
}

:root {
  --duo-green: #10B981;
  --duo-green-dark: #047857;
  --duo-green-soft: #D1FAE5;
  --duo-pink: #FF3366;
  --duo-pink-dark: #BE185D;
  --duo-blue: #0EA5E9;
  --duo-blue-dark: #0284C7;
  --duo-blue-soft: #E0F2FE;
  --duo-yellow: #F59E0B;
  --duo-yellow-dark: #D97706;
  --duo-red: #F43F5E;
  --duo-red-dark: #E11D48;
  --duo-red-soft: #FFE4E6;
  --duo-purple: #8B5CF6;
  --duo-purple-dark: #6D28D9;
  --duo-border: #E2E8F0;
}

/* --- Boutons 3D Tactiles (Pressable Buttons - Option A Vibrante) --- */
.btn-3d {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 24px;
  border-radius: 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  width: 100%;
  text-align: center;
}

.btn-3d-primary {
  background: #E11D48;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.10);
}
.btn-3d-primary:active, .btn-3d-primary.pressed {
  transform: scale(0.98);
  background: #BE185D;
  box-shadow: none;
}

.btn-3d-success {
  background: #047857;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.10);
}
.btn-3d-success:active, .btn-3d-success.pressed {
  transform: scale(0.98);
  background: #065F46;
  box-shadow: none;
}

.btn-3d-danger {
  background: #E11D48;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.10);
}
.btn-3d-danger:active, .btn-3d-danger.pressed {
  transform: scale(0.98);
  background: #BE185D;
  box-shadow: none;
}

.btn-3d-sky {
  background: #0369A1;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.10);
}
.btn-3d-sky:active, .btn-3d-sky.pressed {
  transform: scale(0.98);
  background: #075985;
  box-shadow: none;
}

.btn-3d-warning {
  background: #B45309;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.10);
}
.btn-3d-warning:active, .btn-3d-warning.pressed {
  transform: scale(0.98);
  background: #92400E;
  box-shadow: none;
}

.btn-3d-secondary {
  background: var(--card-bg);
  color: var(--text-muted);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.05);
}
.btn-3d-secondary:active, .btn-3d-secondary.pressed {
  transform: scale(0.98);
  background: #F1F5F9;
  box-shadow: none;
}

/* --- Barre de Gamification Supérieure (Top Stats Bar) --- */
.top-gamification-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #FFFFFF;
  border-bottom: 2px solid var(--duo-border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 20px;
  user-select: none;
}

.stat-pill.streak {
  color: #FF9600;
  background: rgba(255, 150, 0, 0.1);
}
.stat-pill.xp {
  color: #FFC800;
  background: rgba(255, 200, 0, 0.12);
}
.stat-pill.level {
  color: #CE82FF;
  background: rgba(206, 130, 255, 0.12);
}

.flame-anim {
  display: inline-block;
  animation: flameBounce 1.2s ease-in-out infinite alternate;
}
@keyframes flameBounce {
  from { transform: scale(1); }
  to { transform: scale(1.18) rotate(-4deg); }
}

/* --- Cartes 3D & Pastilles Squircle Tactiles (Design 2026) --- */
.card-3d {
  background: var(--card-bg);
  border: 1px solid rgba(226, 232, 240, 0.75);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.05), 0 8px 24px -16px rgba(11, 13, 18, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  overflow: hidden;
}

.card-3d:hover {
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.05), 0 10px 28px -16px rgba(11, 13, 18, 0.26);
  border-color: rgba(203, 213, 225, 0.9);
}

.card-3d:active {
  transform: scale(0.985);
}


body.dark-mode .card-3d {
  background: #151D2A !important;
  border-color: #28334A !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px -18px rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .option-3d {
  background: #151D2A;
  border-color: #28334A;
  color: #F8FAFC;
}
body.dark-mode .option-3d.selected { background: rgba(14, 165, 233, 0.16); border-color: #38BDF8; color: #BAE6FD; }
body.dark-mode .option-3d.correct  { background: rgba(16, 185, 129, 0.16); border-color: #34D399; color: #A7F3D0; }
body.dark-mode .option-3d.wrong    { background: rgba(244, 63, 94, 0.16);  border-color: #FB7185; color: #FECDD3; }
body.dark-mode .option-badge-num { border-color: #28334A; color: #94A3B8; }

body.dark-mode .card-3d h3 {
  color: #F8FAFC !important;
}

.option-3d {
  background: var(--card-bg);
  border: 1.5px solid var(--duo-border);
  border-radius: 16px;
  padding: 15px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  user-select: none;
}

.option-3d:hover {
  border-color: var(--duo-blue);
}

.option-3d:active, .option-3d.pressed {
  transform: scale(0.99);
}

.option-3d.selected {
  border-color: var(--duo-blue);
  background: var(--duo-blue-soft);
  color: var(--duo-blue-dark);
}

.option-3d.correct {
  border-color: var(--duo-green-dark);
  background: var(--duo-green-soft);
  color: #14532D;
}

.option-3d.wrong {
  border-color: var(--duo-red-dark);
  background: var(--duo-red-soft);
  color: #881337;
}

.option-badge-num {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  border: 1.5px solid var(--duo-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.option-3d.selected .option-badge-num {
  border-color: var(--duo-blue);
  background: var(--duo-blue);
  color: white;
}

.option-3d.correct .option-badge-num {
  border-color: var(--duo-green);
  background: var(--duo-green);
  color: white;
}

.option-3d.wrong .option-badge-num {
  border-color: var(--duo-red);
  background: var(--duo-red);
  color: white;
}

/* --- Feedback Drawer (Tiroir Duolingo Bas d'Écran) --- */
.feedback-drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 20px 24px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
}

.feedback-drawer.active {
  transform: translateY(0);
}

.feedback-drawer.correct-drawer {
  background: var(--duo-green-soft);
  border-top: 3px solid var(--duo-green);
  color: #2B6600;
}

.feedback-drawer.wrong-drawer {
  background: var(--duo-red-soft);
  border-top: 3px solid var(--duo-red);
  color: #990000;
}

.feedback-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 900;
  margin-bottom: 8px;
}

.feedback-body {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 16px;
  opacity: 0.95;
}

/* --- Pavé Numérique 3D pour Calcul de Doses --- */
.keypad-grid-3d {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.key-3d {
  background: #FFFFFF;
  border: 2px solid var(--duo-border);
  border-bottom: 4px solid var(--duo-border);
  border-radius: 16px;
  padding: 16px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  cursor: pointer;
  text-align: center;
  user-select: none;
  transition: all 0.1s ease;
}

.key-3d:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

.key-3d.action-key {
  background: #F3F4F6;
  color: #4B5563;
}

/* Containers système pour confettis et XP */
#confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

#floating-xp-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
}

/* ==========================================================================
   Fiche Reader 3D & Ergonomics
   ========================================================================== */

.fiche-reader-body {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.68;
  color: #1E293B;
  font-weight: 450;
  letter-spacing: -0.01em;
}

.fiche-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 12px 16px;
  margin: 24px 0 14px 0;
  border: 1px solid #E2E8F0;
  border-left: 4.5px solid var(--primary);
  box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.04);
}

.fiche-section-header h2 {
  font-size: 15px;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.fiche-subsection-header {
  font-size: 13.5px;
  font-weight: 700;
  color: #1E293B;
  margin: 18px 0 10px 0;
  display: flex;
  align-items: center;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.number-card-3d {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.04);
}

.number-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.number-badge-3d {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: var(--texte-titre);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.number-card-title {
  flex: 1;
  font-weight: 700;
  color: var(--texte-titre);
  font-size: 14px;
  line-height: 1.5;
}

.number-card-sublist {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.number-card-subitem {
  font-size: 13.5px;
  color: var(--texte-corps);
  line-height: 1.55;
  padding-left: 2px;
}

.bullet-item-clean {
  margin-bottom: 8px;
  font-size: 14px;
  color: #1E293B;
  line-height: 1.65;
  font-weight: 450;
}

/* Composant Spécial : Cartes Questions & Corrigés IFSI / DE */
.fiche-exam-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 16px;
  margin: 16px 0;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
}

.fiche-exam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fiche-exam-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #4F46E5;
  background: #EEF2FF;
  border: 1px solid rgba(79, 70, 229, 0.2);
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: 0.03em;
}

.fiche-exam-num {
  font-size: 12px;
  font-weight: 800;
  color: #64748B;
}

.fiche-exam-question {
  font-size: 14px;
  font-style: normal !important;
  font-weight: 600;
  color: #0F172A;
  line-height: 1.55;
  margin-bottom: 12px;
}

.fiche-exam-solution {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-left: 3.5px solid #4F46E5;
  border-radius: 12px;
  padding: 12px 14px;
}

.fiche-exam-sol-title {
  font-size: 11px;
  font-weight: 800;
  color: #4338CA;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fiche-exam-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fiche-exam-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #1E293B;
  line-height: 1.5;
}

.fiche-exam-step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4F46E5;
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Mini-Cartes Médicales Mobiles (Remplacement des Tableaux étriqués) */
.fiche-stack-cards-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  width: 100%;
}

.fiche-stack-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04);
}

.fiche-stack-header {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid #F1F5F9;
}

/* Intitulé de la première colonne du tableau, au-dessus du titre de la carte.
   Même traitement que les intitulés des autres colonnes (.fiche-stack-label) :
   c'est la même chose, et il manquait. Cf. docs/POINTS_A_REGLER.md n° 33. */
.fiche-stack-colonne {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748B;
  margin-bottom: 3px;
}

.fiche-stack-title {
  font-size: 14px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
  display: block;
}

.fiche-stack-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fiche-stack-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fiche-stack-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748B;
}

.fiche-stack-val {
  font-size: 13px;
  color: #334155;
  line-height: 1.5;
  font-weight: 450;
}

/* Fallback Tableau Desktop / Grand Écran */
.fiche-table-container {
  width: 100%;
  overflow-x: hidden;
  margin: 16px 0;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.03);
  background: #FFFFFF;
}

.fiche-table-3d {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.45;
  background: #FFFFFF;
}

.fiche-table-3d th {
  background: #F8FAFC;
  color: #475569;
  font-weight: 800;
  font-size: 10.5px;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1.5px solid #E2E8F0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.fiche-table-3d td {
  padding: 8px 10px;
  border-bottom: 1px solid #F1F5F9;
  color: #334155;
  vertical-align: top;
  font-size: 12px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.fiche-table-3d tr:last-child td {
  border-bottom: none;
}

.fiche-table-3d tr:nth-child(even) {
  background: #FAFAFC;
}


/* ==========================================================================
   STYLE PREMIUM 💎
   ========================================================================== */
.card-premium-locked {
  opacity: 0.72 !important;
  filter: grayscale(0.2) !important;
  border: 1.5px dashed #F59E0B !important;
  background: #FFFBEB !important;
  position: relative;
  cursor: pointer !important;
}

.card-premium-locked::after {
  content: '🔒 Premium';
  position: absolute;
  top: 12px;
  right: 12px;
  background: #FEF3C7;
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
  z-index: 5;
}

.badge-premium-unlocked {
  background: #FEF3C7;
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   Fiche Reader Ergonomics & Quick Navigation (Axe 2)
   ========================================================================== */
.fiche-reading-progress-track {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: rgba(226, 232, 240, 0.6);
  z-index: 95;
  margin: -14px -16px 12px -16px;
  overflow: hidden;
}

.fiche-reading-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FF3366 0%, #EC4899 45%, #7C3AED 100%);
  transition: width 0.1s linear;
}

.fiche-anchor-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px 2px;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.fiche-anchor-scroll::-webkit-scrollbar {
  display: none;
}

.fiche-anchor-pill {
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 50px;
  font-size: 11.5px;
  font-weight: 800;
  border: 1.5px solid rgba(124, 58, 237, 0.2);
  background: #FAF5FF;
  color: #7C3AED;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.05);
}

.fiche-anchor-pill:hover,
.fiche-anchor-pill:active {
  background: #7C3AED;
  color: #FFFFFF;
  border-color: #7C3AED;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.2);
}

/* Mode Zoom Typographique / Confort de lecture */
.fiche-reader-body.fiche-large-text p {
  font-size: 16px !important;
  line-height: 1.8 !important;
}

.fiche-reader-body.fiche-large-text .bullet-item-3d,
.fiche-reader-body.fiche-large-text .number-card-3d {
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.fiche-reader-body.fiche-large-text blockquote {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   ACCESSIBILITÉ — Audit UX/UI 2026-09-06 (Lot B)
   Focus visible + respect du réglage système « Réduire les animations ».
   ========================================================================== */

/* --- 1. Anneau de focus visible ---------------------------------------------
   Uniquement au clavier / Switch Access / clavier Bluetooth (pas au tap),
   grâce à :focus-visible. Contraste de l'anneau ≥ 3:1 sur fond clair ET foncé. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.nav-item:focus-visible,
.stacked-dot:focus-visible,
.card-3d:focus-visible,
.quiz-option:focus-visible,
.option-3d:focus-visible,
.fiche-card:focus-visible,
.cas-card:focus-visible,
.quick-tile:focus-visible,
.key-3d:focus-visible,
.keypad-btn:focus-visible,
.feedback-btn:focus-visible {
  outline: 3px solid #7C3AED !important;
  outline-offset: 2px !important;
  border-radius: 12px;
}

body.dark-mode a:focus-visible,
body.dark-mode button:focus-visible,
body.dark-mode input:focus-visible,
body.dark-mode [role="button"]:focus-visible,
body.dark-mode [tabindex]:focus-visible,
body.dark-mode .nav-item:focus-visible,
body.dark-mode .stacked-dot:focus-visible,
body.dark-mode .card-3d:focus-visible,
body.dark-mode .quiz-option:focus-visible,
body.dark-mode .key-3d:focus-visible {
  outline-color: #C4B5FD !important;
}

/* La bottom-nav est en overflow:hidden côté conteneur : anneau vers l'intérieur
   pour qu'il ne soit pas rogné. */
.nav-item:focus-visible {
  outline-offset: -3px !important;
}

/* Tout élément rendu cliquable garde le curseur main (cohérent avec le rôle). */
[role="button"] { cursor: pointer; }

/* La section d'écran reçoit le focus par programme au changement de vue
   (annonce TalkBack) — pas d'anneau visuel pour ce focus non-clavier. */
.screen[tabindex]:focus { outline: none !important; }

/* --- 2. prefers-reduced-motion --------------------------------------------
   Android : Paramètres › Accessibilité › « Supprimer les animations ».
   iOS : Réglages › Accessibilité › Animation › « Réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* L'écran doit apparaître dans son état final, pas figé à mi-animation. */
  .screen.active {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Le tap ne « rebondit » plus (scale 0.96). */
  .card:active, .btn:active, .btn-3d:active, .card-3d:active,
  .option-3d:active, .quiz-option:active, .fiche-card:active,
  .cas-card:active, .quick-tile:active, .deck-course-card:active,
  .key-3d:active, .feedback-btn:active, .nav-item:active,
  .icon-btn:active {
    transform: none !important;
  }

  /* Pulsations purement décoratives : coupées. */
  .streak-reminder { animation: none !important; }

  /* Indicateurs de chargement : on garde une rotation lente pour que le
     « en cours… » reste lisible, sans effet stroboscopique. */
  .pull-to-refresh-box.refreshing #ptr-icon {
    animation: spin 1.2s linear infinite !important;
  }
  .skeleton-box {
    animation: shimmer 2s ease infinite !important;
  }
}

/* --- 3. Sélection du texte sur les écrans de lecture (Lot C) ---------------
   `user-select: none` est posé globalement sur <body> (confort « app native »).
   Sur les écrans où l'étudiant a besoin de copier un énoncé, une définition,
   une consigne, on la réautorise. Les boutons restent non sélectionnables. */
#ecran-fiches,
#ecran-cas-cliniques,
#ecran-quiz,
#ecran-calcul-doses {
  -webkit-user-select: text;
  user-select: text;
}
#ecran-fiches button,
#ecran-cas-cliniques button,
#ecran-quiz button,
#ecran-calcul-doses button,
#ecran-fiches [role="button"],
#ecran-cas-cliniques [role="button"],
#ecran-quiz [role="button"],
#ecran-calcul-doses [role="button"] {
  -webkit-user-select: none;
  user-select: none;
}



/* ==========================================================================
   RETOUR UTILISATEUR — « Signaler une erreur » (v2.0.16)
   Préfixe `sig-` et non `feedback-` : `.feedback-drawer` / `.feedback-btn`
   désignent déjà le tiroir d'auto-évaluation des flashcards.
   Le lien et la modale sont posés par app/js/feedback.js.
   Focus visible : hérité du bloc :focus-visible du Lot B (vrais <button>,
   <input>, <textarea> — aucun `role=button` bricolé ici).
   ========================================================================== */

/* --- Le lien, en fin de contenu ------------------------------------------- */
.sig-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 44px;                 /* cible tactile (Lot C) */
  margin: 0;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 14px;
  color: var(--text-muted);         /* #475569 — 8,6:1 sur fond clair */
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.sig-link:hover { background: #F1F5F9; color: #0F172A; }
.sig-link:active { background: #E2E8F0; }
.sig-link svg { flex-shrink: 0; opacity: 0.75; }

body.dark-mode .sig-link:hover { background: #1E293B; color: #F8FAFC; }
body.dark-mode .sig-link:active { background: #334155; }

/* --- Rappel du contenu concerné ------------------------------------------- */
.sig-ctx {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 14px;
  padding: 9px 11px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  line-height: 1.4;
  text-align: left;
}
.sig-ctx svg { flex-shrink: 0; margin-top: 1px; }
.sig-ctx strong { color: #0F172A; font-weight: 800; }

body.dark-mode .sig-ctx { background: #151D2A; border-color: #334155; color: #94A3B8; }
body.dark-mode .sig-ctx strong { color: #F8FAFC; }

/* --- Les trois types ------------------------------------------------------ */
.sig-fieldset { border: none; margin: 0 0 16px 0; padding: 0; }

.sig-legend,
.sig-label {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  color: #0F172A;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.dark-mode .sig-legend,
body.dark-mode .sig-label { color: #F8FAFC; }

.sig-type {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;                 /* cible tactile confortable */
  margin-bottom: 8px;
  padding: 9px 12px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.sig-type:last-child { margin-bottom: 0; }
.sig-type input[type="radio"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--fb-c, #EC4899);
  cursor: pointer;
}
.sig-type-icon { display: inline-flex; flex-shrink: 0; }

/* Les trois natures d'un signalement (app/js/feedback.js). Elles posaient
   leurs trois couleurs en ligne depuis un tableau de données ; la nuit, le
   fond pâle restait tel quel. Posées le 2026-09-22. */
.retour-erreur { --fb-c: #DC2626; --fb-bg: #FEF2F2; --fb-bd: #FECACA; }
.retour-bug    { --fb-c: #D97706; --fb-bg: #FFFBEB; --fb-bd: #FDE68A; }
.retour-idee   { --fb-c: #059669; --fb-bg: #ECFDF5; --fb-bd: #A7F3D0; }
body.dark-mode .retour-erreur { --fb-c: #F87171; --fb-bg: rgba(220, 38, 38, 0.16); --fb-bd: rgba(248, 113, 113, 0.35); }
body.dark-mode .retour-bug    { --fb-c: #FBBF24; --fb-bg: rgba(217, 119, 6, 0.16);  --fb-bd: rgba(251, 191, 36, 0.35); }
body.dark-mode .retour-idee   { --fb-c: #34D399; --fb-bg: rgba(5, 150, 105, 0.16);  --fb-bd: rgba(52, 211, 153, 0.35); }

.sig-type-txt { display: flex; flex-direction: column; min-width: 0; }
.sig-type-txt strong {
  font-size: 13.5px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
}
.sig-type-txt em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;                   /* 4,76:1 sur blanc (Lot C) */
  line-height: 1.3;
}

/* État sélectionné. `:has()` n'est qu'un renfort visuel : le bouton radio natif
   reste visible, donc le choix se lit même si le sélecteur n'est pas supporté. */
.sig-type:has(input:checked) {
  background: var(--fb-bg, #FDF2F8);
  border-color: var(--fb-bd, #FBCFE8);
}

body.dark-mode .sig-type { background: #151D2A; border-color: #334155; }
body.dark-mode .sig-type-txt strong { color: #F8FAFC; }
body.dark-mode .sig-type-txt em { color: #94A3B8; }
body.dark-mode .sig-type:has(input:checked) { background: #1E293B; border-color: var(--fb-c, #EC4899); }

/* --- Le message ----------------------------------------------------------- */
#fb-message {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;                  /* ≥ 16px évite le zoom iOS, mais casse la
                                       maquette : 14px + viewport verrouillé */
  font-weight: 600;
  color: #0F172A;
  line-height: 1.45;
  resize: vertical;
  -webkit-user-select: text;
  user-select: text;
}
#fb-message::placeholder { color: #94A3B8; font-weight: 500; }

body.dark-mode #fb-message { background: #0B0F17; border-color: #334155; color: #F8FAFC; }

.sig-help {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  text-align: right;
}
body.dark-mode .sig-help { color: #94A3B8; }

.sig-error {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #DC2626;                   /* 4,83:1 sur blanc */
  text-align: left;
  line-height: 1.4;
}
.sig-error:empty { display: none; }
body.dark-mode .sig-error { color: #FCA5A5; }

.sig-submit { width: 100%; margin-top: 16px; padding: 14px; font-weight: 800; }
.sig-submit:disabled { opacity: 0.6; cursor: default; }

/* ==========================================================================
   BARRE D'ACTION ANCRÉE EN BAS (v2.0.20)
   --------------------------------------------------------------------------
   Problème résolu : dans un quiz ou un cas clinique, dès qu'une réponse est
   validée, l'explication s'insère et pousse le bouton « Suivant » hors de
   l'écran. L'étudiant devait faire défiler à CHAQUE question — cinq fois par
   quiz, sur un écran tenu d'une seule main.

   `position: sticky` + `bottom: 0` : le bouton reste posé juste au-dessus de la
   barre de navigation, sans jamais la recouvrir. La marge latérale négative
   annule le `padding: 16px` de `.screen` pour que la barre aille d'un bord à
   l'autre.

   ⚠️ `bottom: 0` et **pas** la hauteur de `.bottom-nav` : les décalages d'un
   élément collant se mesurent depuis le bord intérieur du conteneur de
   défilement, et `.app-viewport` réserve déjà `padding-bottom: 86px` pour la
   navigation. Y ajouter 64 px faisait flotter la barre à 150 px du bas de
   l'écran, en plein milieu de l'explication (mesuré le 2026-09-10 : barre à
   589-662 px pour une explication qui allait jusqu'à 631 px).
   ========================================================================== */
.sticky-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 80;                      /* sous .app-header (90), au-dessus du contenu */
  /* -32 px : il faut annuler DEUX paddings de 16 px empilés, celui de `.screen`
     et celui de `.app-viewport`. Avec -16 px la barre restait en retrait des
     bords et se voyait comme un rectangle blanc posé au milieu de l'écran. */
  margin: 18px -32px 0 -32px;
  padding: 12px 32px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 -6px 20px -6px rgba(15, 23, 42, 0.10);
}

/* La barre est collante : le contenu doit pouvoir défiler entièrement au-dessus
   d'elle. 24 px suffisent — la réserve de 100 px d'avant servait à compenser
   l'absence de barre, elle n'a plus lieu d'être. */
.sticky-action-bar + .sticky-action-spacer,
.sticky-action-spacer { height: 24px; }

/* Pastille « Question ↓ » d'un cas clinique (audit QA du 2026-09-26) : collée en bas de
   l'écran tant que la question n'est pas visible, cachée ensuite (screen-cas.js).
   `pointer-events` sur le seul bouton : la bande transparente autour ne bloque pas les clics. */
.cas-vers-question {
  position: sticky;
  bottom: 12px;
  z-index: 70;
  display: flex;
  justify-content: center;
  margin: -2px 0 12px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.cas-vers-question--cachee { opacity: 0; }
.cas-vers-question--cachee .cas-vers-question-btn { pointer-events: none; }
.cas-vers-question-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--pastille-violet-texte);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px -4px rgba(124, 58, 237, 0.45);
}
body.dark-mode .cas-vers-question-btn { background: #7C3AED; }

body.dark-mode .sticky-action-bar {
  background: rgba(21, 29, 42, 0.94);
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 -6px 20px -6px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   BANDEAU DE SÉRIE QUOTIDIENNE (v2.0.20)
   --------------------------------------------------------------------------
   La série existait en base et alimentait trois badges, mais rien ne
   l'incrémentait et aucun écran d'accueil ne l'affichait. Voir
   `enregistrerActiviteDuJour()` dans app/js/gamification.js.

   Contrastes mesurés sur le fond #FFF7ED : le nombre est en #EA580C (3,43:1,
   conforme car ≥ 24 px en graisse 900 — seuil « grand texte » à 3:1) ; tout le
   petit texte est en #9A3412 (9,45:1).
   ========================================================================== */
/* Version épurée (v2.0.22) : une ligne posée sur le fond, plus un bandeau orange.
   Le bandeau pesait autant qu'une carte pour une information qui se lit en un
   dixième de seconde. Arbitrage utilisateur du 2026-09-10, sur maquette. */
.streak-band {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 22px 2px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.streak-flamme { line-height: 0; flex-shrink: 0; }
.streak-flamme.active svg { animation: streakPulse 2.4s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes streakPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.13); }
}

/* Contraste : #0B0D12 sur le fond de l'app (#F0F2F6) → 17,4:1 pour le nombre,
   et --text-muted (#475569) → 7,5:1 pour le reste. */
.streak-texte {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}
.streak-texte span { color: var(--text-muted); font-weight: 500; }

.streak-week { display: flex; gap: 5px; margin-left: auto; flex-shrink: 0; }

.streak-day {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.14);
}
.streak-day.done { background: #E4600A; }
.streak-day.today { box-shadow: 0 0 0 3px rgba(228, 96, 10, 0.18); }

body.dark-mode .streak-day { background: rgba(255, 255, 255, 0.18); }
body.dark-mode .streak-day.done { background: #FB923C; }
body.dark-mode .streak-day.today { box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.26); }

/* ==========================================================================
   SQUELETTES DE CHARGEMENT (v2.0.20)
   --------------------------------------------------------------------------
   `.skeleton-box` existait depuis longtemps dans cette feuille mais n'était
   appelé par aucun écran : l'onglet Quiz restait vide pendant le chargement du
   corpus et l'aller-retour réseau. Il manquait aussi sa variante sombre — le
   dégradé clair d'origine faisait un flash blanc en mode nuit.
   ========================================================================== */
body.dark-mode .skeleton-box {
  background: linear-gradient(90deg, #1E293B 25%, #334155 37%, #1E293B 63%);
  background-size: 400px 100%;
}

.skeleton-card {
  padding: 14px 16px;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  margin-bottom: 10px;
}
body.dark-mode .skeleton-card { background: #151D2A; border-color: #334155; }

.skeleton-line { height: 12px; margin-bottom: 9px; }
.skeleton-line:last-child { margin-bottom: 0; }

/* ==========================================================================
   TUILES ÉPURÉES (v2.0.22) — « option B », arbitrage utilisateur du 2026-09-10
   --------------------------------------------------------------------------
   Trois doses de couleur avaient été maquettées ; celle retenue met la couleur
   sur le TRAIT de l'icône, et rien derrière. Ce qui disparaît par rapport aux
   tuiles précédentes :

   - la pastille pastel de 44 px et sa bordure teintée : deux formes et deux
     fonds empilés dans chaque tuile, c'est ça qui chargeait l'écran, plus que
     les couleurs elles-mêmes ;
   - le sur-titre en capitales colorées (« RÉFÉRENTIEL », « MÉMORISATION »…) :
     six teintes qui criaient au même volume que les titres ;
   - le relief de `.card-3d`, remplacé par une ombre portée basse.

   ⚠️ Classe NOUVELLE et non un remplacement de `.card-3d` : seules les grilles
   de l'accueil et des fiches s'en servent. Les autres écrans gardent le style
   actuel tant que la direction n'est pas tranchée pour toute l'app.
   ========================================================================== */
/* Puces de filtre (écrans Quiz et Cas) — v2.0.25.
   Le style était écrit en ligne quatre fois, avec un dégradé trois couleurs et
   un halo rosé pour la puce active. Une seule couleur pleine suffit à dire
   laquelle est choisie ; #E11D48 tient le 4,5:1 avec le texte blanc, ce que le
   #FF3366 de la marque ne fait pas à cette taille. */
.filtre-puce {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  background: var(--card-bg);
  color: var(--text-muted);
  border: 1px solid rgba(226, 232, 240, 0.9);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filtre-puce.active {
  background: #E11D48;
  color: #FFFFFF;
  border-color: #E11D48;
}
.filtre-puce .compte { font-size: 10.5px; opacity: 0.8; margin-left: 2px; }

body.dark-mode .filtre-puce {
  background: #151D2A;
  color: #94A3B8;
  border-color: #28334A;
}
body.dark-mode .filtre-puce.active {
  background: #E11D48;
  color: #FFFFFF;
  border-color: #E11D48;
}

.grille-tuiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Trois rangées qui occupent la hauteur restante au lieu de laisser un vide en
   bas d'écran. `clamp` borne le résultat : ni tuiles écrasées sur un petit
   téléphone, ni tuiles étirées sur une tablette. */
.grille-tuiles.hauteur-pleine {
  grid-auto-rows: minmax(clamp(152px, 20.5vh, 198px), auto);
}

.tuile {
  background: var(--card-bg);
  border: 1px solid rgba(226, 232, 240, 0.75);
  border-radius: 20px;
  padding: 18px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.05), 0 8px 24px -16px rgba(11, 13, 18, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tuile:active { transform: scale(0.985); }

.tuile-icone { line-height: 0; margin-bottom: 14px; }

.tuile h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-dark);
}

.tuile p {
  margin: 3px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Pied de tuile : barre de progression + compteur, collés en bas quelle que
   soit la longueur du titre (d'où `margin-top: auto`). */
.tuile-bas {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.tuile-barre {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.07);
  overflow: hidden;
}
.tuile-barre i {
  display: block;
  height: 100%;
  border-radius: 99px;
  transition: width 0.3s ease;
}
.tuile-compte {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Variante sur une ligne (Calculs de doses) */
.tuile-large {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 16px;
}
.tuile-large .tuile-icone { margin-bottom: 0; flex-shrink: 0; }
.tuile-large .tuile-texte { flex: 1; min-width: 0; }

/* Intitulé de section, gris et discret — il situe, il n'annonce pas. */
.titre-section {
  margin: 0 0 12px 2px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-light);
}

body.dark-mode .tuile {
  background: #151D2A;
  border-color: #28334A;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px -18px rgba(0, 0, 0, 0.7);
}
body.dark-mode .tuile-barre { background: rgba(255, 255, 255, 0.10); }