/* CORE STYLES */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 64px;
  top: 0 !important;
  margin-top: 0 !important;
  /* Force la suppression du décalage Google */
}

body {
  overflow-x: hidden;
  top: 0 !important;
  position: static !important;
  padding-top: 0 !important;
  /* Empêche le décalage forcé */
}

/* Suppression radicale des éléments de traduction Google */
.goog-te-banner-frame,
.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
#google_translate_element {
  display: none !important;
  visibility: hidden !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

.flash-btn {
  transition: transform var(--t-phi-1), opacity var(--t-phi-1);
}

.flash-btn span {
  color: inherit;
}

.idx-tab,
.nav-links a,
.part-card,
.btn-primary,
.pdf-btn {
  transition: all var(--t-phi-1) ease;
}

.nav-highlight,
.reader-container,
.slide,
.flash-menu,
.tl-item {
  will-change: transform, opacity;
}

/* ==========================================================================
   VARIABLES GLOBALES (Dictionnaire des couleurs)
   ========================================================================== */
:root {
  /* 📐 SYSTÈME DIVIN (NOMBRE D'OR PHI ≈ 1.618) */
  --phi: 1.61803398875;

  /* Échelle d'espacement (Fibonacci / Phi Power) */
  --s-phi-1: 0.382rem;
  /* ~6px */
  --s-phi-2: 0.618rem;
  /* ~10px */
  --s-phi-3: 1rem;
  /* 16px */
  --s-phi-4: 1.618rem;
  /* ~26px */
  --s-phi-5: 2.618rem;
  /* ~42px */
  --s-phi-6: 4.236rem;
  /* ~68px */
  --s-phi-7: 6.854rem;
  /* ~110px */

  /* Échelle temporelle (Rhythm & Flow) */
  --t-phi-1: 0.236s;
  --t-phi-2: 0.382s;
  --t-phi-3: 0.618s;
  --t-phi-4: 1s;
  --t-phi-5: 1.618s;

  /* Échelle typographique (Modular Scale - Base 1rem) */
  --font-phi-0: 1rem;
  --font-phi-1: 1.618rem;
  /* Phi^1 */
  --font-phi-2: 2.618rem;
  /* Phi^2 */
  --font-phi-3: 4.236rem;
  /* Phi^3 */
  --font-phi-4: 6.854rem;
  /* Phi^4 */

  /* Couleurs de base (Thème Sombre par défaut) */
  --bg: #05080f;
  --bg2: #0b1120;
  --bg3: #101828;
  --border: #1e2d47;
  --text: #e2e8f0;

  /* Couleurs d'accentuation */
  --blue: #3b82f6;
  --blue-dim: #1d4ed8;
  --gold: #f59e0b;
  --gold-dim: #92400e;
  --teal: #06b6d4;
  --red: #f87171;
  --green: #34d399;

  /* Textes secondaires */
  --muted: #64748b;
  --muted-accessible: #94a3b8;
  --muted2: #94a3b8;

  /* NOUVEAU : Variables pour les éléments transparents (Glassmorphism) */
  --nav-bg: rgba(5, 8, 15, 0.85);
  --toolbar-bg: rgba(11, 17, 32, 0.65);
  --input-bg: rgba(0, 0, 0, 0.4);
  --gold-muted: rgba(245, 158, 11, 0.15);
  --gold-bright: #fbbf24;
  --content-bar-gradient: linear-gradient(180deg, var(--gold), var(--gold-bright));
  --btn-bg: rgba(255, 255, 255, 0.05);
  --btn-border: rgba(255, 255, 255, 0.1);
  --btn-hover: rgba(255, 255, 255, 0.15);
  --nav-active: var(--blue);
  --link-hover: var(--blue-dim);
}

/* ↀↀ LE THÈME CLAIR (Version Navy Professionnel) ↀↀ */
body.light-mode {
  --bg: #f1f5f9;
  --bg2: #ffffff;
  --bg3: #e2e8f0;
  --text: #0f172a;
  --border: #cbd5e1;

  /* Structure (barres, bordures) -> Navy */
  --gold: #1e3a8a;
  --gold-dim: #3b82f6;
  --content-bar-gradient: linear-gradient(180deg, var(--gold-dim), var(--gold));

  /* Interaction (Actif & Hover) -> Doré Ambré */
  --nav-active: #d97706;
  /* Ambré/Doré pour le texte en mode clair */
  --link-hover: #b45309;
  /* Un doré légèrement plus sombre pour le survol en mode clair */

  /* Textes secondaires (Surcharge pour contraste sur fond blanc) */
  --muted: #475569;
  /* slate-600 */
  --muted2: #334155;
  /* slate-700 */
  --muted-accessible: #1e293b;
  /* slate-800 pour un contraste maximal si besoin */

  /* Boutons purs et Barre contrastée (PDF Viewer & Inputs) */
  --nav-bg: rgba(241, 245, 249, 0.9);
  --toolbar-bg: rgba(226, 232, 240, 0.85);
  /* Un gris très léger pour faire ressortir les boutons */
  --input-bg: #ffffff;
  /* Champs de recherche blancs purs (au lieu du gris translucide sombre) */
  --btn-bg: #ffffff;
  --btn-border: #cbd5e1;
  --btn-hover: #f1f5f9;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Empêche la nav fixe (56px) de cacher la cible des ancres natives */
  scroll-padding-top: 64px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  /* Base pour le Modular Scale */
  line-height: var(--phi);
  /* Ratio d'or pour une lisibilité parfaite */
  overflow-x: hidden;
  top: 0 !important;
  position: static !important;
}

/* ↀↀ NOISE OVERLAY (CSS-only, pas de filtre SVG coûteux) ↀↀ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4t5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwma0btqkVqn1mOI0IKaAozsVMi5vrcTEfp5TCJ4WOFGNnRUeF03ZsMc8gI3hHiWi0sU3cMnFR7PkO0RRU7kTfpuRaIqB8JtOPz7VqB6pBRCkBVoZDMqPFpg0L1C49GdoZnpXe2x2IZmzp3Ry5cLBE0Gu1J4Xqq8BRkiSLVDqGSAIDAQABo4HSMIHPMIGMBgNVHREEgYQwgYGCEHd3dy5leGFtcGxlLm9yZ4IUd3d3LmV4YW1wbGUuaW5mb3JtYXRpb26CCHh4eC5jb22CDSoueHh4LmV4YW1wbGWCEiou");
  pointer-events: none;
  z-index: 0;
  opacity: .025;
  mix-blend-mode: overlay;
}

/* ↀↀ EFFET GLOW GLOBAL (Bords de page pulsants) ↀↀ */
@keyframes global-glow-dark {
  0% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}

@keyframes global-glow-light {
  0% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.4;
  }
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999;
  box-shadow: inset 0 0 50px rgba(59, 130, 246, 0.15);
  animation: global-glow-dark 4s infinite ease-in-out;
  will-change: opacity;
}

body.light-mode::after {
  box-shadow: inset 0 0 50px rgba(180, 83, 9, 0.2);
  animation: global-glow-light 4s infinite ease-in-out;
}

/* ↀↀ NAV ↀↀ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000000;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  height: 56px;
  contain: size layout;
  /* Empêche les reflows de se propager hors de la nav */
}

.nav-logo {
  font-family: 'Fira Code', monospace;
  font-size: .75rem;
  color: var(--gold);
  letter-spacing: .12em;
  text-transform: uppercase;
  flex: 0 0 auto;
  margin-right: 1.5rem;
}

.nav-links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 2rem;
  list-style: none;
  width: max-content;
  margin: 0;
  padding: 0 1rem;
  justify-content: flex-start;
}

.nav-links-wrapper {
  position: relative;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Effet de fondu organique sur la droite pour une transition élégante vers les outils */
  mask-image: linear-gradient(to right, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

.nav-links-wrapper::-webkit-scrollbar {
  display: none;
}

.nav-links a {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted-accessible);
  text-decoration: none;
  letter-spacing: -0.015em;
  transition: all .2s;
  white-space: nowrap;
}

.nav-links a:hover {
  color: #fbbf24 !important;
  /* Doré interactif */
}

body.light-mode .nav-links a:hover {
  color: #2563eb !important;
  /* Bleu électrique */
}

.nav-tip {
  font-family: 'Fira Code', monospace;
  font-size: .68rem;
  /* FIX CONTRASTE: #94a3b8 au lieu de #64748b → ratio ~7.8:1 ✓ */
  color: var(--muted-accessible);
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: .25rem .75rem;
  border-radius: 4px;
}

.nav-tip kbd {
  color: var(--gold);
}

/* ↀↀ NAV HIGHLIGHT ↀↀ */
.nav-highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  /* Base pour le transform scaleX */
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left center;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
  will-change: transform;
}

body.light-mode .nav-highlight {
  background: var(--blue);
}

/* ↀↀ HERO ↀↀ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 2rem 0;
  /* Suppression du padding-bas pour un arrêt net de la flèche */
  overflow: clip;
  /* Permet le Sticky tout en cachant le débordement des lueurs */
  /* contain: layout supprimé car il isolait le positionnement fixed */
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(59, 130, 246, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, .06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
  animation: gridPulse 8s ease-in-out infinite;
  will-change: opacity;
}

body.light-mode .hero-grid {
  background-image:
    linear-gradient(rgba(217, 119, 6, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 119, 6, .12) 1px, transparent 1px);
}

@keyframes gridPulse {

  0%,
  100% {
    opacity: .6;
  }

  50% {
    opacity: 1;
  }
}

.hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, .12) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: breathe 6s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

body.light-mode .hero-glow {
  background: radial-gradient(circle, rgba(59, 130, 246, .08) 0%, transparent 70%);
}

@keyframes breathe {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: .7;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
}

/* ↀↀ THEME TOGGLES (Rotation par le bas - 300°) ↀↀ */
#theme-toggle,
#hero-theme-toggle {
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: rotate(var(--spin, 0deg));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.3));
}

#hero-theme-toggle {
  margin-left: -30px;
  /* Ajustement précis : 16 carreaux à gauche vs 15 à droite -> décalage de 30px vers la gauche */
}

/* Lune avec visage en mode clair (On rajoute un glow mauve/violet) */
body.light-mode #theme-toggle,
body.light-mode #hero-theme-toggle {
  color: inherit;
  filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.5));
  /* Glow mauve */
}

.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(var(--font-phi-3), 15vw, var(--font-phi-4));
  font-weight: 700;
  text-align: center;
  line-height: 0.95;
  /* Gardé serré pour l'impact visuel */
  letter-spacing: -0.02em;
  margin-bottom: var(--s-phi-5);
  color: var(--text);
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  animation: fadeUp var(--t-phi-4) cubic-bezier(0.16, 1, 0.3, 1) both;
  position: relative;
  z-index: 10;
}

.hero-title .accent {
  color: var(--gold);
  font-style: italic;
  display: block;
}

body.light-mode .hero-title {
  color: #020617;
  text-shadow: 0 4px 10px rgba(2, 6, 23, 0.1);
}

body.light-mode .hero-title .accent {
  color: #1e3a8a;
  /* Bleu Navy */
}

/* Hover Sombre (-30°) */
#theme-toggle:hover,
#hero-theme-toggle:hover {
  transform: rotate(calc(var(--spin, 0deg) - 30deg)) scale(1.1) !important;
}

/* Hover Clair (+30°) */
body.light-mode #theme-toggle:hover,
body.light-mode #hero-theme-toggle:hover {
  transform: rotate(calc(var(--spin, 0deg) + 30deg)) scale(1.1) !important;
}

.hero-badge {
  font-family: 'Fira Code', monospace;
  font-size: 0.7rem;
  color: var(--blue);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: var(--s-phi-2) var(--s-phi-4);
  border-radius: 20px;
  background: rgba(59, 130, 246, 0.08);
  margin-bottom: var(--s-phi-4);
  position: relative;
  z-index: 10;
  animation: fadeUp var(--t-phi-3) ease both;
}

/* 🠪 COOKIE CONSENT CMP (MODAL BLOQUANTE) */
.cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  z-index: 10000000;
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cookie-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  width: 90%;
  max-width: 540px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  z-index: 10000001;
  display: none;
  opacity: 0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.cookie-modal.active,
.cookie-overlay.active {
  display: block;
  opacity: 1;
}

.cookie-modal.active {
  transform: translate(-50%, -50%);
}

.cookie-content {
  padding: var(--s-phi-5);
}

.cookie-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cookie-icon {
  font-size: 2rem;
}

.cookie-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  margin: 0;
}

#cookie-desc,
.cookie-subset-desc {
  font-size: 0.95rem;
  color: var(--text);
  /* Évite le muted pour un meilleur contraste */
  line-height: 1.6;
  margin-bottom: 2rem;
}

.cookie-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cookie-btn {
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  text-align: center;
}

.cookie-btn.primary {
  background: var(--green);
  color: #05080f;
}

.cookie-btn.primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.cookie-btn.secondary {
  background: var(--btn-bg);
  border-color: var(--border);
  color: var(--text);
}

.cookie-btn.secondary:hover {
  background: rgba(248, 113, 113, 0.1);
  border-color: var(--red);
  color: var(--red);
}

.cookie-btn.ghost {
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  text-decoration: none;
  opacity: 0.8;
}

.cookie-btn.ghost:hover {
  opacity: 1;
  background: var(--btn-bg);
  color: var(--gold);
  text-decoration: underline;
}

/* Warnings */
.cookie-warning {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(245, 158, 11, 0.1);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--gold);
  animation: fadeIn 0.3s ease;
}

/* Switches para Customization */
.cookie-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.cookie-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--bg3);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.option-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.option-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.option-desc {
  font-size: 0.75rem;
  color: var(--muted);
}

.option-desc code {
  font-family: 'Fira Code', monospace;
  font-size: 0.7rem;
  background: rgba(59, 130, 246, 0.1);
  color: var(--blue);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

body.light-mode .option-desc code {
  background: rgba(30, 58, 138, 0.08);
  color: #1e3a8a;
  border-color: rgba(30, 58, 138, 0.15);
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--border);
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
}

input:checked+.slider {
  background-color: var(--green);
}

input:checked+.slider:before {
  transform: translateX(20px);
}

.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

@media (min-width: 640px) {
  .cookie-buttons {
    flex-direction: row;
    justify-content: flex-end;
  }

  .cookie-btn.ghost {
    margin-right: auto;
  }
}

body.light-mode .cookie-btn.primary {
  background: #10b981;
  color: white;
}

body.light-mode .hero-badge {
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.3);
  background: rgba(217, 119, 6, 0.08);
}



.hero-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem;
  color: var(--muted2);
  text-align: center;
  max-width: 700px;
  margin: var(--s-phi-4) auto 0;
  position: relative;
  z-index: 10;
  line-height: var(--phi);
  animation: fadeUp var(--t-phi-3) ease var(--t-phi-2) both;
}

.hero-stats {
  display: flex;
  gap: var(--s-phi-5);
  margin-top: var(--s-phi-6);
  position: relative;
  z-index: 10;
  animation: fadeUp var(--t-phi-3) ease var(--t-phi-3) both;
}

.stat {
  text-align: center;
}

.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--gold);
  display: block;
  line-height: 1;
}

.stat-label {
  font-family: 'Fira Code', monospace;
  font-size: .8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .15em;
}

.hero-scroll-link {
  position: sticky;
  /* Suit le viewport puis se bloque en bas du Hero (Structure du cours) */
  bottom: 0;
  /* Descend jusqu'à toucher la section suivante pour un arrêt net */
  margin-top: auto;
  /* Se pousse tout en bas du flux du Hero pour le sticky */
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 80px;
  z-index: 10;
  /* Derrière le contenu, devant le fond */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.4s ease, visibility 0.4s;
  pointer-events: auto;
}

.hero-scroll-link.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  animation: fadeIn 1.2s ease 1.2s both;
  pointer-events: none;
  /* Le clic est géré par le parent .hero-scroll-link */
}

.scroll-line {
  position: relative;
  width: 2px;
  height: 120px;
  border-radius: 2px;
  /* Dark mode: Coeur Bleu Électrique avec fondu */
  background: linear-gradient(to bottom, transparent, #3b82f6 30%, #3b82f6);
  opacity: 0;
  /* Halo Magique façon NOX / DBZ : Ambre / Feu sur Rayon Bleu */
  filter:
    drop-shadow(0 0 5px #fbbf24) drop-shadow(0 0 15px rgba(251, 191, 36, 0.6)) drop-shadow(0 0 30px rgba(251, 191, 36, 0.3));
  animation: scrollDown 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, opacity, filter;
}

/* ONDE DE CHOC FX (L'effet "Ripple" demandé) */
.scroll-line::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  /* Anneau d'énergie radial */
  background: radial-gradient(circle, transparent 40%, rgba(251, 191, 36, 0.8) 70%, transparent 100%);
  border: 1px solid rgba(251, 191, 36, 0.4);
  opacity: 0;
  animation: rippleFlash 3.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  will-change: transform, opacity;
}

body.light-mode .scroll-line::before {
  background: radial-gradient(circle, transparent 40%, rgba(59, 130, 246, 0.8) 70%, transparent 100%);
  border-color: rgba(59, 130, 246, 0.4);
}

/* POINT D'IMPACT FX (Le "Glow" demandé) */
.scroll-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 12px;
  /* Un peu plus large */
  height: 12px;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.5);
  /* Légèrement plus visible */
  box-shadow:
    0 0 20px rgba(251, 191, 36, 0.5),
    0 0 50px rgba(251, 191, 36, 0.3);
  opacity: 0;
  animation: impactFlash 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, opacity;
}

body.light-mode .scroll-line::after {
  background: rgba(59, 130, 246, 0.5);
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.5),
    0 0 50px rgba(59, 130, 246, 0.3);
}

/* Mode Clair : Coeur Doré avec fondu, Halo Bleu Foudre */
body.light-mode .scroll-line {
  background: linear-gradient(to bottom, transparent, #d97706 30%, #d97706);
  filter:
    drop-shadow(0 0 5px #3b82f6) drop-shadow(0 0 15px rgba(59, 130, 246, 0.6)) drop-shadow(0 0 30px rgba(59, 130, 246, 0.3));
}

@keyframes scrollDown {
  0% {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
  }

  20% {
    opacity: 0.8;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
  }
}

@keyframes impactFlash {

  0%,
  48% {
    opacity: 0;
    transform: translateX(-50%) scale(0);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(2.4, 1.2);
  }

  /* Rayon doublé en largeur (pas en hauteur) */
  85% {
    opacity: 0.8;
    transform: translateX(-50%) scale(2.6, 1.3);
  }

  99% {
    opacity: 0;
    transform: translateX(-50%) scale(2.8, 1.4);
  }

  100% {
    opacity: 0;
  }
}

@keyframes rippleFlash {

  0%,
  49% {
    opacity: 0;
    transform: translateX(-50%) scale(0);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(8, 2);
  }

  /* Onde plus large, aplatie */
  65% {
    opacity: 0;
    transform: translateX(-50%) scale(40, 5);
  }

  /* Diffusion massive */
  100% {
    opacity: 0;
  }
}

/* Surcharge Glow pour le mode clair dans l'animation */
body.light-mode .scroll-line {
  animation-name: scrollDownLight;
}

@keyframes scrollDownLight {
  0% {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
  }

  20% {
    opacity: 0.8;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }

  51% {
    transform-origin: bottom;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ↀↀ SECTIONS ↀↀ */
section {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  /* Augmenté de 1200px -> 1400px pour plus de confort */
  margin: 0 auto;
  padding: 6rem 3rem;
  /* Espacements augmentés */
  /* Aligner exactement sous la nav (56px) */
  scroll-margin-top: 56px;
}

#parts,
#course-reader,
#partie-1,
#partie-2,
#partie-3,
#partie-4,
#partie-5,
#index,
#articles,
#droits,
#concepts,
#flashcards {
  padding-top: 0 !important;
  /* On supprime l'espace pour que chaque section colle au menu lors du scroll */
}

/* Le hero n'a pas besoin de content-visibility (il est above-the-fold) */
.hero {
  content-visibility: visible;
  scroll-margin-top: 0;
}

.section-label {
  font-family: 'Fira Code', monospace;
  font-size: .68rem;
  color: var(--gold);
  /* Plus visible sur le bleu foncé */
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border), transparent);
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  /* Augmenté massivement */
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.section-desc {
  color: var(--muted2);
  max-width: 580px;
  margin-bottom: 3rem;
  font-size: .95rem;
}

/* ↀↀ PARTS GRID ↀↀ */
.parts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Force 3 colonnes sur PC (3x2) */
  gap: 1.25rem;
}

/* Tablette / Écran moyen -> 2 colonnes (2x3) */
@media (max-width: 1100px) {
  .parts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Smartphone -> 1 colonne (6 blocs alignés) */
@media (max-width: 680px) {
  .parts-grid {
    grid-template-columns: 1fr;
  }
}

.part-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  text-decoration: none;
  color: inherit;
  display: block;
  min-height: 280px;
}

.part-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--card-gradient, linear-gradient(135deg, rgba(59, 130, 246, .05), transparent));
  opacity: 0;
  transition: opacity .3s;
}

.part-card:hover {
  border-color: var(--card-accent, var(--blue));
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

.flashcard-nav-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  background: rgba(251, 191, 36, 0.05) !important;
  border: 2px dashed rgba(251, 191, 36, 0.4) !important;
  min-height: 280px;
  /* Même hauteur que les autres */
  overflow: visible !important;
}

.part-card:hover::before {
  opacity: 1;
}

.part-card[data-part="1"] {
  --card-accent: #3b82f6;
  --card-gradient: linear-gradient(135deg, rgba(59, 130, 246, .07), transparent);
}

.part-card[data-part="2"] {
  --card-accent: #a78bfa;
  --card-gradient: linear-gradient(135deg, rgba(167, 139, 250, .07), transparent);
}

.part-card[data-part="3"] {
  --card-accent: #f59e0b;
  --card-gradient: linear-gradient(135deg, rgba(245, 158, 11, .07), transparent);
}

.part-card[data-part="4"] {
  --card-accent: #34d399;
  --card-gradient: linear-gradient(135deg, rgba(52, 211, 153, .07), transparent);
}

.part-card[data-part="5"] {
  --card-accent: #f87171;
  --card-gradient: linear-gradient(135deg, rgba(248, 113, 113, .07), transparent);
}

.part-number {
  font-family: 'Fira Code', monospace;
  font-size: .7rem;
  color: var(--card-accent, var(--blue));
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: .75rem;
  opacity: .8;
}

.part-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--font-phi-1);
  font-weight: 700;
  margin-bottom: var(--s-phi-4);
  line-height: 1.25;
  /* Légèrement plus que 1 pour les titres condensés */
  color: var(--gold);
}

.part-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.25rem;
}

.tag {
  font-family: 'Fira Code', monospace;
  font-size: .62rem;
  padding: .2rem .6rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--muted2);
  background: var(--bg3);
  white-space: nowrap;
}

.part-slides {
  font-family: 'Fira Code', monospace;
  font-size: .65rem;
  /* FIX CONTRASTE: #94a3b8 au lieu de #64748b → ratio ~7.8:1 ✓ */
  color: var(--muted-accessible);
  letter-spacing: .08em;
}

.part-arrow {
  position: absolute;
  top: 1.75rem;
  right: 1.75rem;
  font-size: 1.2rem;
  color: var(--muted);
  transition: color .3s, transform .3s;
}

.part-card:hover .part-arrow {
  color: var(--card-accent, var(--blue));
  transform: translate(2px, -2px);
}

/* ↀↀ INDEX THÉMATIQUE ↀↀ */
.index-wrapper {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow-x: auto;
  /* Permet le défilement horizontal si le tableau est trop large */
  -webkit-overflow-scrolling: touch;
}

.index-header {
  padding: 1.2rem 1.5rem;
  /* Réduction du padding (compact) */
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.index-slider-group {
  position: relative;
  /* Pour positionner le tooltip */
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 90%;
  /* On occupe plus d'espace par défaut */
  max-width: 500px;
  /* Mais on bloque l'expansion sur PC */
  min-width: 260px;
  /* Plus compact pour les petits mobiles */
  margin: 2rem auto 1rem auto;
}

.idx-tooltip {
  position: absolute;
  top: -2.8rem;
  left: 0;
  transform: translateX(-50%) scale(0.8);
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  color: var(--gold);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s, left 0.1s ease-out;
  border: 1px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.idx-tooltip.visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.idx-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(15, 23, 42, 0.8) transparent transparent transparent;
}

body.light-mode .idx-tooltip {
  background: rgba(255, 255, 255, 0.95);
  color: #1e293b;
  border: 1px solid #cbd5e1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

body.light-mode .idx-tooltip::after {
  border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;
}

body.light-mode .section-label {
  color: var(--blue);
}

body.light-mode .section-label::after {
  background: linear-gradient(to right, #cbd5e1, transparent);
}

.slider-track-container {
  padding: 1px 2px;
  /* Largeur maximale par rapport au fond */
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 4px;
  /* Rectangulaire */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
}

body.light-mode .slider-track-container {
  background: rgba(255, 255, 255, 0.6);
  border-color: #cbd5e1;
}

#index-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
  height: 20px;
}

/* Webkit Track (Blocs de couleurs segmentés par paliers de 20%) */
#index-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg,
      #71717a 0%, #71717a 10%,
      /* Tout - Centré à 0% */
      #93c5fd 10%, #93c5fd 30%,
      /* Partie 1 - Centré à 20% */
      #c4b5fd 30%, #c4b5fd 50%,
      /* Partie 2 - Centré à 40% */
      #fcd34d 50%, #fcd34d 70%,
      /* Partie 3 - Centré à 60% */
      #6ee7b7 70%, #6ee7b7 90%,
      /* Partie 4 - Centré à 80% */
      #fca5a5 90%, #fca5a5 100%
      /* Partie 5 - Centré à 100% */
    );
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Webkit Thumb (Style iPhone - Hauteur) */
#index-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  width: 5px;
  border-radius: 2px;
  background: #ffffff;
  border: none;
  margin-top: -9px;
  /* Centrage vertical precis */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 0, 0, 0.2);
  transition: transform .2s cubic-bezier(var(--transition-phi));
  z-index: 10;
}

/* Firefox Track */
#index-range::-moz-range-track {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg,
      #71717a 0%, #71717a 10%,
      #93c5fd 10%, #93c5fd 30%,
      #c4b5fd 30%, #c4b5fd 50%,
      #fcd34d 50%, #fcd34d 70%,
      #6ee7b7 70%, #6ee7b7 90%,
      #fca5a5 90%, #fca5a5 100%);
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Firefox Thumb */
#index-range::-moz-range-thumb {
  height: 22px;
  width: 4px;
  border-radius: 3px;
  background: #ffffff;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

#index-range:active::-webkit-slider-thumb {
  transform: scale(1.2);
}

.index-slider-labels {
  position: relative;
  width: 100%;
  height: 1.2rem;
  margin-top: 0.4rem;
  padding: 0;
  /* Élargi à la largeur totale pour correspondre au nouveau fond */
}

.index-slider-labels span {
  position: absolute;
  top: 0;
  font-family: 'Fira Code', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: translateX(-50%);
  /* Centrage par défaut */
}

/* Positionnement millimétré par rapports aux arrêts du slider (0, 20, 40, 60, 80, 100%) */
.index-slider-labels span[data-val="0"] {
  left: 0;
  transform: none;
}

.index-slider-labels span[data-val="1"] {
  left: 20%;
}

.index-slider-labels span[data-val="2"] {
  left: 40%;
}

.index-slider-labels span[data-val="3"] {
  left: 60%;
}

.index-slider-labels span[data-val="4"] {
  left: 80%;
}

.index-slider-labels span[data-val="5"] {
  left: 100%;
  transform: translateX(-100%);
  /* Strictement bloqué à droite pour ne pas dépasser du bloc slider */
}

.index-slider-labels span.active {
  color: var(--gold);
  font-weight: bold;
  /* On combine le centrage X avec le décalage Y pour éviter le saut à droite */
  transform: translateX(-50%) translateY(-4px);
}

/* Cas particuliers pour les bords qui ont un translateX spécifique */
.index-slider-labels span[data-val="0"].active {
  transform: translateY(-4px);
  /* On enlève le translateX car le neutre est flash-left */
}

.index-slider-labels span[data-val="5"].active {
  transform: translateX(-100%) translateY(-4px);
}

.index-search {
  position: relative;
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.75rem;
  /* Plus compact (2rem -> 0.75rem) */
}

.index-search .search-input-wrapper {
  position: relative;
  width: 280px;
}

.index-search input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem 2.5rem .5rem 2.5rem;
  color: var(--text);
  font-family: inherit;
  font-size: .88rem;
  width: 100%;
  outline: none;
  transition: all 0.3s ease;
}

.index-search input:focus {
  outline: none;
  /* Retrait du glow doré pour éviter la confusion avec le vert/rouge de recherche */
  border-color: var(--border);
}

.index-search.has-matches input {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.05) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.1) !important;
}

.index-search.no-matches input {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.05) !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.1) !important;
}

.index-search .search-icon {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}

.index-search .clear-search-btn {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.1rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: opacity 0.2s, transform 0.2s;
  line-height: 1;
}

body.light-mode .index-search .clear-search-btn {
  color: rgba(0, 0, 0, 0.5) !important;
}

.index-search .clear-search-btn:hover {
  color: #ef4444;
  transform: translateY(-50%) scale(1.2);
}

.index-table {
  width: 100%;
  border-collapse: collapse;
}

.index-table thead th {
  font-family: 'Fira Code', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .75rem 1.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, .2);
}

.index-table tbody tr {
  border-bottom: 1px solid rgba(30, 45, 71, .5);
  transition: background .15s;
}

.index-table tbody tr:hover {
  background: rgba(59, 130, 246, .04);
}

.index-table tbody tr.hidden {
  display: none;
}

.index-table tbody td {
  padding: .75rem 1.5rem;
  vertical-align: middle;
}

.td-keyword {
  color: var(--text);
  font-size: .88rem;
  font-weight: 400;
}

.td-keyword mark {
  background: rgba(245, 158, 11, .25);
  color: var(--gold);
  border-radius: 2px;
  padding: 0 2px;
}

.td-ref {
  font-family: 'Fira Code', monospace;
  font-size: .78rem;
  color: var(--blue);
  white-space: nowrap;
}

.td-cat {
  display: inline-block;
  font-family: 'Fira Code', monospace;
  font-size: .6rem;
  padding: .15rem .5rem;
  border-radius: 4px;
  white-space: nowrap;
}

/* ↀↀ 8 DROITS BOXES (Nettoyage des styles inline pour gérer le mode clair) ↀↀ */
.right-box {
  border-radius: 8px;
  padding: 1rem;
}

.right-box .rb-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.right-box.blue {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.right-box.blue .rb-title {
  color: #93c5fd;
}

body.light-mode .right-box.blue .rb-title {
  color: #1d4ed8;
}

.right-box.violet {
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.3);
}

.right-box.violet .rb-title {
  color: #c4b5fd;
}

body.light-mode .right-box.violet .rb-title {
  color: #6d28d9;
}

.right-box.amber {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.right-box.amber .rb-title {
  color: #fcd34d;
}

body.light-mode .right-box.amber .rb-title {
  color: #b45309;
}

.right-box.emerald {
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.right-box.emerald .rb-title {
  color: #6ee7b7;
}

body.light-mode .right-box.emerald .rb-title {
  color: #047857;
}

.right-box.cyan {
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.right-box.cyan .rb-title {
  color: #a5f3fc;
}

body.light-mode .right-box.cyan .rb-title {
  color: #0891b2;
}

.right-box.red {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.right-box.red .rb-title {
  color: #fca5a5;
}

body.light-mode .right-box.red .rb-title {
  color: #b91c1c;
}

.right-box.orange {
  background: rgba(251, 146, 60, 0.08);
  border: 1px solid rgba(251, 146, 60, 0.3);
}

.right-box.orange .rb-title {
  color: #fed7aa;
}

body.light-mode .right-box.orange .rb-title {
  color: #c2410c;
}

.right-box.purple {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.right-box.purple .rb-title {
  color: #e9d5ff;
}

body.light-mode .right-box.purple .rb-title {
  color: #7e22ce;
}

.cat-1 {
  background: rgba(59, 130, 246, .12);
  color: #93c5fd;
}

.cat-2 {
  background: rgba(167, 139, 250, .12);
  color: #c4b5fd;
}

.cat-3 {
  background: rgba(245, 158, 11, .12);
  color: #fcd34d;
}

.cat-4 {
  background: rgba(52, 211, 153, .12);
  color: #6ee7b7;
}

.cat-5 {
  background: rgba(248, 113, 113, .12);
  color: #fca5a5;
}

/* ↀↀ Surcharge Mode Clair : Couleurs plus fortes pour meilleur contraste sur blanc ↀↀ */
body.light-mode .cat-1 {
  background: rgba(37, 99, 235, .15);
  color: #1d4ed8;
}

body.light-mode .cat-2 {
  background: rgba(124, 58, 237, .15);
  color: #6d28d9;
}

body.light-mode .cat-3 {
  background: rgba(217, 119, 6, .15);
  color: #b45309;
}

body.light-mode .cat-4 {
  background: rgba(5, 150, 105, .15);
  color: #047857;
}

body.light-mode .cat-5 {
  background: rgba(220, 38, 38, .15);
  color: #b91c1c;
}

/* ↀↀ COULEURS SÉMANTIQUES (Art-Cards & Timeline) ↀↀ */
.color-blue {
  --art-color: #3b82f6;
  --tl-color: #3b82f6;
}

.color-purple {
  --art-color: #a78bfa;
  --tl-color: #a78bfa;
}

/* Art utilise fbbf24 / Timeline f59e0b à l'origine, unifiés visuellement : */
.color-amber {
  --art-color: #f59e0b;
  --tl-color: #f59e0b;
}

.color-emerald {
  --art-color: #34d399;
  --tl-color: #34d399;
}

.color-cyan {
  --art-color: #06b6d4;
  --tl-color: #06b6d4;
}

.color-red {
  --art-color: #f87171;
  --tl-color: #f87171;
}

.color-fuchsia {
  --art-color: #e879f9;
  --tl-color: #e879f9;
}

/* Mode Clair : Intensification colorimétrique pour le texte sur fond blanc */
body.light-mode .color-blue {
  --art-color: #1d4ed8;
  --tl-color: #1d4ed8;
}

/* Blue-700 */
body.light-mode .color-purple {
  --art-color: #6d28d9;
  --tl-color: #6d28d9;
}

/* Purple-700 */
body.light-mode .color-amber {
  --art-color: #b45309;
  --tl-color: #b45309;
}

/* Amber-700 */
body.light-mode .color-emerald {
  --art-color: #047857;
  --tl-color: #047857;
}

/* Emerald-700 */
body.light-mode .color-cyan {
  --art-color: #0e7490;
  --tl-color: #0e7490;
}

/* Cyan-700 */
body.light-mode .color-red {
  --art-color: #b91c1c;
  --tl-color: #b91c1c;
}

/* Red-700 */
body.light-mode .color-fuchsia {
  --art-color: #a21caf;
  --tl-color: #a21caf;
}

/* Fuchsia-700 */

/* Héritage dynamique pour les textes en gras dans la timeline */
.tl-item strong {
  color: var(--tl-color);
}

.no-results {
  padding: 3rem;
  text-align: center;
  color: var(--muted);
  font-family: 'Fira Code', monospace;
  font-size: .8rem;
}

/* ↀↀ ARTICLES ESSENTIELS ↀↀ */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-phi-4);
}

.art-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--s-phi-4) var(--s-phi-5);
  transition: border-color var(--t-phi-2), transform var(--t-phi-2);
  position: relative;
  overflow: hidden;
}

.art-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--art-color, var(--blue));
  border-radius: 4px 0 0 4px;
}

.art-card:hover {
  border-color: var(--art-color, var(--blue));
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  box-shadow:
    0 12px 24px -10px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  z-index: 2;
}

body.light-mode .art-card:hover {
  background: rgba(255, 255, 255, 0.6);
  box-shadow:
    0 12px 24px -10px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.art-ref {
  font-family: 'Fira Code', monospace;
  font-size: .68rem;
  color: var(--art-color, var(--blue));
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .4rem;
  opacity: .9;
}

.art-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--font-phi-0);
  font-weight: 600;
  margin-bottom: var(--s-phi-1);
  line-height: 1.3;
}

.art-desc {
  font-size: .8rem;
  color: var(--muted2);
  line-height: 1.5;
}

/* ↀↀ SANCTIONS ↀↀ */
.sanctions-box {
  background: linear-gradient(135deg, rgba(248, 113, 113, .08), rgba(248, 113, 113, .03));
  border: 1px solid rgba(248, 113, 113, .25);
  border-radius: 16px;
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}



.sb-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--font-phi-0);
  font-weight: 600;
  margin-bottom: var(--s-phi-2);
  color: #ffffff;
}

.sb-desc {
  color: var(--muted2);
  font-size: .88rem;
  line-height: 1.6;
}

.sanction-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}

.sanction-num.red {
  color: #fca5a5;
}

.sanction-num.amber {
  color: #fcd34d;
}

/* Légèrement plus clair que l'ancien #f59e0b pour matcher avec 20M€ */

.sanction-label {
  font-size: .9rem;
  color: var(--muted2);
  margin-top: .4rem;
}

.sanction-divider {
  width: 1px;
  height: 60px;
  background: rgba(248, 113, 113, .2);
}

/* ↀↀ Surcharge Mode Clair : Sanctions ↀↀ */
body.light-mode .sanctions-box {
  background: linear-gradient(135deg, rgba(248, 113, 113, .15), rgba(248, 113, 113, .05));
  border-color: rgba(248, 113, 113, .4);
}

body.light-mode .sb-title {
  color: #991b1b;
}

/* Rouge très sombre */
body.light-mode .sanction-num.red {
  color: #b91c1c;
}

body.light-mode .sanction-num.amber {
  color: #b45309;
}

/* ↀↀ DROITS CARDS ↀↀ */
.droits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-phi-4);
}

.droit-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--s-phi-4);
  text-align: center;
  transition: opacity var(--t-phi-2), transform var(--t-phi-2);
  position: relative;
  overflow: hidden;
}

.droit-card:hover {
  border-color: var(--gold);
  background: rgba(245, 158, 11, .04);
  transform: translateY(-2px);
}

.droit-icon {
  font-size: 1.5rem;
  margin-bottom: .6rem;
  display: block;
}

.droit-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--font-phi-0);
  font-weight: 600;
  margin-bottom: var(--s-phi-1);
}

.droit-art {
  font-family: 'Fira Code', monospace;
  font-size: .62rem;
  color: var(--muted);
  letter-spacing: .08em;
}

.droit-desc {
  font-size: 0.76rem;
  color: var(--muted-accessible);
  line-height: 1.4;
  margin-top: 0.55rem;
}

/* ↀↀ TIMELINE ↀↀ */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #3b82f6, #a78bfa, #f59e0b, #34d399, #f87171);
  border-radius: 2px;
}

/* Surcharge Mode Clair : Le dégradé multicolor est maintenu pour la fidélité */
body.light-mode .timeline::before {
  background: linear-gradient(to bottom, #3b82f6, #a78bfa, #f59e0b, #34d399, #f87171);
}

.tl-item {
  position: relative;
  padding: 0 0 2.5rem 2rem;
}

.tl-dot {
  position: absolute;
  left: -2.45rem;
  top: .3rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tl-color, var(--blue));
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 3px var(--bg2);
}

.tl-label {
  font-family: 'Fira Code', monospace;
  font-size: .65rem;
  color: var(--tl-color, var(--blue));
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.tl-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.tl-body {
  color: var(--muted2);
  font-size: .85rem;
}

/* ↀↀ FOOTER ↀↀ */
footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 2rem;
  text-align: center;
  font-family: 'Fira Code', monospace;
  font-size: .65rem;
  /* FIX CONTRASTE: #94a3b8 au lieu de #64748b → ratio ~7.8:1 ✓ */
  color: var(--muted-accessible);
  letter-spacing: .08em;
}

/* ↀↀ DIVIDERS ↀↀ */
.hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 2rem;
}

/* ↀↀ SCROLLBAR ↀↀ */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--blue);
}

/* ↀↀ MOBILE ↀↀ */
@media (max-width: 768px) {
  .hero-stats {
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* 1. On cache l'astuce clavier qui est inutile sur mobile */
  .nav-tip {
    display: none !important;
  }

  /* 2. On réorganise la barre de navigation pour caler le menu défilant */
  nav {
    padding: 0 1rem;
    justify-content: flex-start;
    gap: 1rem;
  }

  /* 3. On transforme le menu en zone glissante au doigt */
  .nav-links {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    white-space: nowrap;
    flex: 1;
    padding-right: 1rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  /* Reste des ajustements */
  .index-header {
    flex-direction: column;
  }

  .index-search input {
    width: 100%;
  }

  /* On empile le bloc des sanctions proprement sur mobile */
  .sanctions-box {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    padding: 1.5rem;
  }

  .sanction-divider {
    display: none;
  }
}

/* Stagger animations on scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: transform, opacity;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 {
  transition-delay: .1s;
}

.reveal-delay-2 {
  transition-delay: .2s;
}

.reveal-delay-3 {
  transition-delay: .3s;
}

.reveal-delay-4 {
  transition-delay: .4s;
}

.reveal-delay-5 {
  transition-delay: .5s;
}

/* ── ACCESSIBILITÉ : respecte le paramètre système "Réduire les animations" ── */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ── CONTENT BLOCKS ── */
.content-block {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  /* Arrondi plus généreux */
  padding: 3rem;
  /* Espace intérieur augmenté */
  margin-bottom: 3rem;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.content-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  /* Plus visible */
  height: 100%;
  background: var(--art-color, var(--content-bar-gradient));
  /* Couleur dynamique par bloc */
  border-radius: 16px 0 0 16px;
}

/* Couleurs spécifiques par bloc (Restauration thématique) */
.content-block.color-blue::before {
  background: var(--blue);
}

.content-block.color-purple::before {
  background: #a78bfa;
}

.content-block.color-amber::before {
  background: var(--gold);
}

.content-block.color-emerald::before {
  background: #34d399;
}

.content-block.color-red::before {
  background: #f87171;
}

.content-block.color-cyan::before {
  background: #06b6d4;
}

.content-block.color-fuchsia::before {
  background: #e879f9;
}

/* --- 8 Droits : Grille Résumée --- */
.rights-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.right-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.right-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.right-box:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: var(--box-color, var(--blue));
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3),
    0 0 15px -3px var(--box-glow, rgba(59, 130, 246, 0.3));
}

.right-box:hover::after {
  opacity: 1;
}

.rb-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Couleurs spécifiques aux droits */
.right-box.blue {
  --box-color: #3b82f6;
  --box-glow: rgba(59, 130, 246, 0.4);
  border-left: 3px solid #3b82f6;
}

.right-box.violet {
  --box-color: #8b5cf6;
  --box-glow: rgba(139, 92, 246, 0.4);
  border-left: 3px solid #8b5cf6;
}

.right-box.amber {
  --box-color: #f59e0b;
  --box-glow: rgba(245, 158, 11, 0.4);
  border-left: 3px solid #f59e0b;
}

.right-box.emerald {
  --box-color: #10b981;
  --box-glow: rgba(16, 185, 129, 0.4);
  border-left: 3px solid #10b981;
}

.right-box.cyan {
  --box-color: #06b6d4;
  --box-glow: rgba(6, 182, 212, 0.4);
  border-left: 3px solid #06b6d4;
}

.right-box.red {
  --box-color: #ef4444;
  --box-glow: rgba(239, 68, 68, 0.4);
  border-left: 3px solid #ef4444;
}

.right-box.orange {
  --box-color: #f97316;
  --box-glow: rgba(249, 115, 22, 0.4);
  border-left: 3px solid #f97316;
}

.right-box.purple {
  --box-color: #a855f7;
  --box-glow: rgba(168, 85, 247, 0.4);
  border-left: 3px solid #a855f7;
}

/* ==========================================================================
   1. FLASH MENU (Cartes d'entraînement)
   ========================================================================== */
/* 1. FLASH MENU (Styles centralisés plus bas dans le fichier) */
/* Le menu est affiché via .active et les propriétés position/z-index du bloc #4 */

.flash-link {
  display: block;
  padding: 0.6rem;
  text-decoration: none;
  color: var(--text);
  border-radius: 6px;
  font-family: 'Fira Code', monospace;
  font-size: 0.75rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.flash-link:hover,
.flash-link:focus {
  background: rgba(59, 130, 246, .1);
  color: var(--blue);
  transform: translateX(4px);
  outline: none;
}

/* --- La barre de progression est pilotée par la règle principale en haut du fichier --- */

/* SUPPORT GOOGLE TRANSLATE - OPTIMISÉ : On ne décale plus la nav car la barre Google est masquée ou absente */
/* body.google-active nav {
  top: 0 !important;
} */

/* ==========================================================================
   3. RESPONSIVE DESIGN (Media Queries)
   ========================================================================== */
/* Bureau */
@media (min-width: 769px) {
  nav {
    padding: 0 2.5rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .nav-tip {
    display: none !important;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1rem auto 0;
    max-width: 320px;
    justify-items: center;
    order: 5;
  }

  .content-block {
    padding: 1.5rem !important;
    /* Réduction du padding pour gagner de l'espace sur mobile */
    margin-bottom: 2rem;
  }

  .rights-summary-grid {
    grid-template-columns: 1fr !important;
    /* Force l'empilement sur une colonne pour éviter le débordement */
    gap: 1rem;
  }

  .right-box {
    padding: 1rem;
  }

  .hero {
    padding-bottom: 0 !important;
    /* On supprime le padding bas spécifique mobile pour un arrêt net */
  }

  .hero-scroll-link {
    position: fixed;
    /* Retour au mode FIXED pour un suivi garanti du viewport mobile */
    bottom: 2rem;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 120px;
    /* Plus généreux pour l'impact visuel */
    margin: 0;
    z-index: 999;
    pointer-events: auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transition: opacity 0.4s ease, visibility 0.4s;
  }

  .scroll-line {
    height: 80px !important;
    /* Doublé par rapport à l'ancienne version réduite */
  }

  .stat-num {
    font-size: 2.2rem;
  }

  .stat-label {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
  }

  .index-header {
    flex-direction: column;
  }

  .index-search input {
    width: 100%;
  }

  .sanctions-box {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    padding: 1.5rem;
  }

  .sanction-divider {
    display: none;
  }
}

/* ==========================================================================
   4. LIENS DORÉS & ANIMATIONS
   ========================================================================== */
/* --- LIENS DORÉS DYNAMIQUES --- */
.lien-or {
  color: var(--gold);
  /* Navy en mode clair, Or en mode sombre */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
  text-underline-position: under;
}

.lien-or:visited {
  color: var(--gold);
}

/* On utilise la variable --link-hover pour éviter le blanc sur fond blanc */
.lien-or:hover {
  color: var(--link-hover) !important;
  text-decoration-thickness: 2px;
}

/* Consolidé avec html/body du haut */

/* ==========================================================================
   5. ICÔNE HERO (Animation au survol)
   ========================================================================== */
.hero-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  opacity: 0.2;
  transform: rotate(0deg) scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.hero-icon:hover {
  opacity: 1;
  transform: rotate(5deg) scale(1.1);
}

/* ==========================================================================
   VISUALISEUR PDF - UI DESIGN (Glassmorphism & Responsive)
   ========================================================================== */

/* La barre principale qui s'adapte à l'écran — COMPACTÉE */
.pdf-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  padding: 0.4rem 0.6rem;
  align-items: center;
  justify-content: space-between;
  background: var(--toolbar-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--btn-border);
}

.pdf-group {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  flex-wrap: nowrap !important;
}

#pdf-toc {
  width: auto !important;
  min-width: 100px !important;
  max-width: 180px !important;
  font-size: 0.8rem;
  padding: 0.25rem 0.4rem;
  height: 32px;
}

#goto-page {
  width: 40px !important;
  height: 32px !important;
  text-align: center;
  font-size: 0.85rem;
  padding: 0;
}

/* Boutons Design avec effet Néon au survol — COMPACTÉS */
.pdf-btn {
  padding: 0.3rem 0.6rem;
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.82rem;
  transition: opacity 0.2s, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}

.pdf-btn:hover {
  background: var(--btn-hover);
  border-color: var(--blue);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
  /* Néon bleu discret */
  transform: translateY(-1px);
}

/* Compteur de page */
#page-info {
  color: white;
}

body.light-mode #page-info {
  color: var(--text);
  font-weight: 700;
}

/* Boutons dorés (Chercher, Plein écran) */
.pdf-btn.gold {
  background: rgba(250, 204, 21, 0.1);
  color: var(--gold);
  border-color: rgba(250, 204, 21, 0.2);
}

.pdf-btn.gold:hover {
  background: rgba(250, 204, 21, 0.2);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.4);
  /* Néon or */
}

/* Modification du bouton doré en mode clair (Navy semi-transparent) */
body.light-mode .pdf-btn.gold {
  background: rgba(30, 58, 138, 0.08);
  /* Fini le jaune illisible ! */
  border-color: rgba(30, 58, 138, 0.2);
}

body.light-mode .pdf-btn.gold:hover {
  background: rgba(30, 58, 138, 0.15);
  box-shadow: 0 0 12px rgba(30, 58, 138, 0.3);
}

/* Bouton rouge/danger (Effacer) */
.pdf-btn.danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.2);
}

.pdf-btn.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--red);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
  /* Néon rouge */
}

/* Champs de texte (Inputs & Select) */
.pdf-input {
  padding: 0.5rem 0.6rem;
  background: var(--input-bg);
  border: 1px solid var(--btn-border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
  flex: 1;
  /* Largeur dynamique */
  min-width: 120px;
  /* Garantit la visibilité */
  text-overflow: ellipsis;
}

.pdf-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
  background: rgba(0, 0, 0, 0.6);
}

/* Container du groupe central (Plein écran) */
.pdf-group-center {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Animation de pulsation (Néon doré) */
@keyframes neonPulseSoft {
  0% {
    box-shadow:
      0 0 5px rgba(255, 221, 0, 0.2),
      inset 0 0 5px rgba(255, 255, 255, 0.05);
  }

  50% {
    box-shadow:
      0 0 12px rgba(255, 221, 0, 0.45),
      inset 0 0 8px rgba(255, 255, 255, 0.08);
  }

  100% {
    box-shadow:
      0 0 5px rgba(255, 221, 0, 0.2),
      inset 0 0 5px rgba(255, 255, 255, 0.05);
  }
}

/* --- LOGO RGPD DYNAMIQUE --- */
.rgpd-logo-container {
  text-align: center;
  margin: 3rem 0 -1.5rem 0;
}

.rgpd-logo-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: transform 0.3s ease;
}

.rgpd-logo-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 8px;
}

.rgpd-logo {
  max-height: 90px;
  width: auto;
  padding: 0;
  border-radius: 8px;
  transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
  background-color: #05080f;
  /* Fond Dark Version constant */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: inline-block;
  vertical-align: middle;
  opacity: 0.6;
  /* 60% d'opacité comme demandé */
  filter: grayscale(0.5);
  /* 50% de gris pour un effet plus doux, conservant un peu de couleur */
}

.rgpd-logo:hover {
  transform: scale(1.1);
  /* Effet de pop identique au footer */
  opacity: 1;
  filter: grayscale(0) brightness(1.2);
  /* Retour aux couleurs et éclat au survol */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

body.light-mode .rgpd-logo {
  background-color: #05080f;
  /* On garde le fond sombre même en mode clair */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* --- SECTION FOOTER LOGOS (Viewport iPhone SE Scroll Effect) --- */
.footer-logos {
  max-width: 650px;
  /* Élargi pour une apparition "plus loin, plus tôt" sur les bords */
  margin: 1rem auto 3rem auto;
  padding: 4rem 0;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: flex-start;
  /* CRITIQUE : Aligné au début pour un bouclage mathématiquement parfait */
  align-items: center;
  /* Masque de dégradé élargi (30%) pour une entrée/sortie ultra-douce sur un large viseur */
  -webkit-mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);
  mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);
}

.footer-track {
  display: flex;
  align-items: center;
  width: max-content;
  flex-shrink: 0;
  animation: scrollFooterRL 22s linear infinite;
  will-change: transform;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  transition: transform 0.5s ease-out;
}

.footer-logo-link {
  display: flex;
  align-items: center;
  margin-right: 3.5rem;
  /* Remplace le gap pour un bouclage mathématiquement parfait */
}

/* L'animation ne s'arrête plus au hover mais ralentit selon le nombre d'or (géré en JS) */

.footer-icon {
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.6;
  cursor: pointer;
  max-width: 100px;
  height: auto;
}

.footer-icon:hover {
  transform: scale(1.1);
  opacity: 1;
}

@keyframes scrollFooterRL {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100% / 4));
  }

  /* Boucle mathématique sur le set exact de 3 logos (sur 4 sets) */
}

.desktop-hide {
  display: none;
  /* Nettoyage si encore utilisé ailleurs, mais pas pour les logos */
}

/* --- FOOTER STYLES (Restaurés & Premium) --- */
footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 5rem 1.5rem;
  text-align: center;
  color: var(--text);
  margin-top: 5rem;
  position: relative;
  z-index: 10;
}

.footer-primary {
  font-size: 1.05rem;
  margin-bottom: 2rem;
  line-height: 1.6;
  color: var(--text);
  /* Suppression opacity pour meilleur contraste */
}

.footer-credits {
  font-size: 0.85rem;
  color: var(--muted-accessible);
  /* Utilisation d'une couleur pleine au lieu d'opacity 0.7 */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.footer-tip {
  display: block;
  font-size: 0.85rem;
  color: var(--muted-accessible);
  /* Couleur pleine pour audit AAA */
  margin-top: 1.2rem;
  font-family: inherit;
}

.footer-tip kbd {
  background: rgba(0, 0, 0, 0.4);
  /* Fond contrasté pour l'accessibilité */
  border: 1px solid var(--border);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}

body.light-mode .footer-tip kbd {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
}

/* Style du bouton "Paramètres des cookies" */
.footer-link {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.7rem 1.4rem;
  margin-top: 1.5rem;
  transition: all 0.3s ease;
  border-radius: 50px;
  /* Forme pilule Premium */
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.footer-link:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Liens Dorés (Standard Premium) */
.lien-or {
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

footer .lien-or {
  font-weight: 700;
  /* Plus de peps pour le contraste dans le footer */
}

.lien-or:hover {
  text-decoration: underline;
  filter: brightness(1.2);
}

.txt-gold {
  color: var(--gold);
}

/* 1. Centrage du bloc sur la page (Bouton section footer) */
.flashcards-section {
  position: relative;
  z-index: 9999;
  /* Premier plan absolu pour ne pas être masqué par le footer ou d'autres sections */
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 1rem 0 3rem 0;
  /* Remonté un petit peu */
}

/* Variante section centrée (utilisée dans la div cards) */
.flashcards-section-centered {
  position: relative;
  z-index: 9999;
  /* Au premier plan (résout le masquage par la section du dessous sur tel) */
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 2rem 0;
}

/* 2. L'ancre relative */
.flash-wrapper {
  position: relative;
  z-index: 9999;
  /* La clé est ici : On force le wrapper à avoir la taille exacte d'une carte */
  width: 100%;
  max-width: 400px;
  /* Ajuste cette valeur selon la largeur exacte de tes cartes (ex: 380px, 400px...) */
  display: flex;
  justify-content: center;
}

/* 3. Le Bouton (Parfaitement calibré) */
.flash-btn {
  position: relative;

  /* Couleur de base Or/Orange plus vibrante pour contraste max avec texte noir */
  background: #f59e0b;
  color: #000;

  width: 100%;
  box-sizing: border-box;

  min-height: 56px;
  padding: 0 1rem;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* GLASS EFFECT */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 221, 0, 0.2);

  /* Néon léger */
  box-shadow:
    0 0 6px rgba(255, 221, 0, 0.25),
    inset 0 0 6px rgba(255, 255, 255, 0.05);

  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform;
  white-space: nowrap;

  animation: neonPulseSoft 3s infinite ease-in-out;
}

.flash-btn:hover {
  transform: translateY(-2px);
  background: rgba(217, 119, 6, 0.9);

  box-shadow:
    0 0 14px rgba(255, 221, 0, 0.6),
    0 0 25px rgba(255, 221, 0, 0.25);
}

/* 4. LE MENU CENTRÉ ET DE MÊME LARGEUR */
/* 4. LE MENU DE BASE (Flashcards) */
.flash-menu {
  position: absolute;
  box-sizing: border-box;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
  z-index: 10000 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  min-width: 250px;
}

/* Modificateur pour le Header (tombe vers le BAS) */
.flash-menu.down {
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  transform: translateY(-10px);
}

/* Modificateur pour le Footer (monte vers le HAUT) */
.flash-menu.up {
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
}

/* Modificateur pour le mode "Carte" (centré sur le bouton) */
.flash-menu.overlay {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.flash-menu.overlay.active {
  transform: translate(-50%, -50%) scale(1);
}

.flash-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.overflow-visible {
  overflow: visible !important;
}

.flash-menu.up.active {
  transform: translateX(-50%) translateY(0);
}

/* 5. Les Liens (Corrigés contre le retour à la ligne) */
.flash-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.7rem 1rem;
  color: var(--text);
  text-decoration: none;
  font-family: 'Fira Code', monospace;
  font-size: 0.8rem;
  border-radius: 6px;
  transition: background-color 0.2s, color 0.2s, padding-left 0.2s;

  /* CRUCIAL : Interdit au texte de la Partie 3 de passer à la ligne */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Ajoute "..." si l'écran est vraiment trop petit */
}

.flash-link:hover {
  background: rgba(245, 158, 11, 0.1);
  color: var(--nav-active);
  padding-left: 1.2rem;
}

/* ==========================================================================
   FOCUS-VISIBLE — Navigation clavier (P3.2 Audit)
   Respecte le principe WCAG 2.4.7 : les éléments interactifs doivent avoir
   un indicateur de focus visible. On utilise :focus-visible pour ne pas
   afficher l'anneau lors des clics souris.
   ========================================================================== */

/* Réinitialisation générale : on gère nous-même */
*:focus {
  outline: none;
}

/* Part-cards (role=button, tabindex=0) */
.part-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18);
}

/* Liens de navigation */
.nav-links a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Boutons PDF */
.pdf-btn:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Onglets de l'index */
.idx-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Flash-btn */
.flash-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18);
}

/* Inputs (recherche, numéro de page) */
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* ==========================================================================
   LOGO HERO (hero-icon-link)
   Identique en dark et light — hover opposé selon le thème
   dark  : penche à GAUCHE  (-12deg)
   light : penche à DROITE  (+12deg)
   ========================================================================== */
.hero-icon-link {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20; /* Plus élevé que les titres (10) pour rester cliquable */
  display: inline-block;
  /* On repasse en inline-block pour autocentrer sur l'image */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center bottom;
}

.hero-icon-link .hero-icon {
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

/* ── Dark mode : hover vers la GAUCHE ── */
.hero-icon-link:hover {
  transform: translateX(-50%) rotate(-12deg) scale(1.08);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

/* ── Light mode : hover vers la DROITE ── */
body.light-mode .hero-icon-link:hover {
  transform: translateX(-50%) rotate(12deg) scale(1.08);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
}

/* --- LUEURS THÉMATIQUES LOGO HERO (Spécificité Haute) --- */
#hero-theme-toggle .hero-sun {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  filter: drop-shadow(0 0 15px rgba(255, 230, 0, 0.95)) !important;
  opacity: 1 !important;
  transition: filter 0.35s ease, opacity 0.3s ease;
}

#hero-theme-toggle .hero-moon {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  filter: none !important;
  opacity: 0 !important;
  transition: filter 0.35s ease, opacity 0.3s ease;
}

/* Light mode overrides */
body.light-mode #hero-theme-toggle .hero-sun {
  filter: none !important;
  opacity: 0 !important;
}

body.light-mode #hero-theme-toggle .hero-moon {
  filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.95)) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   FOOTER LOGOS (Bannière partenaires de bas de page)
   ========================================================================== */
.footer-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 3rem;
  margin: 5rem auto 3rem;
  padding: 0 2rem;
  max-width: 800px;
}

.footer-logo-link {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
  /* Premium touch: semi-transparent and desaturated when inactive */
  opacity: 0.6;
  filter: grayscale(80%);
}

.footer-logo-link:hover,
.footer-logo-link:focus-visible {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-4px);
  /* Léger rebond au survol */
}

/* Fix proportionnel : la largeur s'adapte automatiquement à la hauteur (58px) */
.footer-icon {
  display: block;
  max-height: 58px;
  width: auto;
  /* Empêche l'écrasement ou l'étirement !!! */
  object-fit: contain;
}

/* ==========================================================================
   GOOGLE TRANSLATE WIDGET OVERRIDES
   ========================================================================== */
/* Stratégie officielle : La barre Google est désormais gérée sans décalage de la navigation */
html.translated-ltr nav,
html.translated-rtl nav {
  top: 0 !important;
}

/* Ajuster les ancres normalement (conserver l'offset de 104px souhaité par l'utilisateur) */
html.translated-ltr {
  scroll-padding-top: 104px !important;
}

/* Styliser le menu déroulant natif de façon robuste */
.goog-te-combo {
  background-color: var(--bg3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 0.4rem 0.6rem !important;
  font-family: inherit !important;
  font-size: 0.85rem !important;
  outline: none !important;
  cursor: pointer !important;
  transition: opacity 0.2s, transform 0.2s ease !important;
}

.goog-te-combo:hover,
.goog-te-combo:focus {
  border-color: var(--blue) !important;
}

/* Cache uniquement l'excédent de marque (le petit logo) pour rester sobre */
.goog-logo-link {
  display: none !important;
}

.goog-te-gadget {
  color: transparent !important;
}

.goog-te-gadget .goog-te-combo {
  color: var(--text) !important;
  margin: 0 !important;
}

/* ==========================================================================
   SELECTEUR DE LANGUE (Menu Drapeaux Glassmorphism)
   ========================================================================== */
.lang-wrapper {
  position: relative;
  display: inline-block;
}

.lang-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.lang-btn:hover {
  transform: scale(1.1);
}

.flag-icon {
  width: 24px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  /* Réduction de 11% demandée par l'utilisateur */
  transform: scale(0.89);
  transition: transform 0.2s ease;
}

.flag-icon:hover {
  transform: scale(1);
}

/* Le menu déroulant en mode Verre Givré */
.lang-menu {
  position: absolute;
  top: calc(100% + 15px);
  /* Un peu d'espace sous le drapeau principal */
  left: 50%;
  transform: translateX(-50%) translateY(-10px);

  /* Effet Glassmorphism assorti à ton header */
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

  /* Grille pour ranger les drapeaux proprement (4 colonnes) */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;

  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.lang-menu.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.lang-option {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
  transition: background 0.2s, transform 0.2s;
  display: flex;
  justify-content: center;
}

.lang-option:hover {
  background: rgba(255, 255, 255, 0.1);
  /* Surbrillance douce */
  transform: translateY(-2px);
}

/* ==========================================================================
   VISUALISEUR PDF - LOGO TECH / PC (Style KBD/Givré)
   ========================================================================== */
.nav-logo-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  /* Espace entre le texte or et la touche */
  text-decoration: none;
  /* Enlève le soulignement du lien */
  font-family: 'DM Sans', sans-serif;
  /* Police globale */
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Partie Or : GEN 26 */
.logo-accent {
  color: var(--gold);
}

/* Partie KBD Givrée : It / PC Tech */
.logo-kbd-style {
  /* --- EFFET VERRE GIVRÉ (Givré) --- */
  background-color: rgba(255, 255, 255, 0.08);
  /* Teinte légère */
  backdrop-filter: blur(10px);
  /* Givre l'arrière-plan */
  -webkit-backdrop-filter: blur(10px);
  /* iOS */
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* Bordure douce */
  border-radius: 4px;
  /* Coins arrondis discrets */
  /* ------------------------------- */

  color: #ffffff;
  /* Texte blanc pur */
  padding: 0.2rem 0.6rem;
  /* Micro-padding pour l'aspect touche */
  font-family: 'Fira Code', monospace;
  /* Police Mono pour le look code */
  font-weight: 400;
  /* Moins gras pour le mono */
  font-size: 0.75rem;
  /* Un poil plus petit pour l'équilibre */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  /* Petite lumière interne */
}

/* Visibilité en Mode Clair : RGPD - FIJ */
body.light-mode .logo-kbd-style {
  background-color: rgba(0, 0, 0, 0.08);
  /* Fond sombre subtil */
  color: #1e293b;
  /* Ardoise foncée pour le texte */
  border-color: rgba(0, 0, 0, 0.1);
}

/* ── CLASSES UTILITAIRES (MIGRATION STYLES INLINE) ── */
.flex-center {
  display: flex;
  align-items: center;
}

.gap-1-5 {
  gap: 1.5rem;
}

.txt-gold {
  color: var(--gold);
}

.theme-toggle-nav {
  font-size: 1.2rem;
  cursor: pointer;
  margin-left: 0.8rem;
  /* Espacement après le texte du raccourci à gauche */
  border: 1px solid transparent;
  background: none;
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s;
  transform: rotate(var(--spin, 0deg));
}

.nav-controls-right {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 3.2rem;
  /* Espace équilibré pour le bouton flottant sur le masque */
}

.theme-toggle-nav:hover {
  border-color: var(--gold);
  border-radius: 4px;
}

.theme-toggle-hero {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: rotate(var(--spin, 0deg));
}

/* --- BOUTON NAV SCROLL & PLAY (DORÉ) --- */
.nav-scroll-play {
  background: rgba(251, 191, 36, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1002;
  flex-shrink: 0;
  position: absolute;
  left: 0.8rem;
}

.nav-scroll-play:hover {
  transform: scale(1.2);
  background: rgba(251, 191, 36, 0.15);
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.3);
}

.nav-scroll-play.can-play .icon-arrow {
  display: none !important;
}

.nav-scroll-play.can-play .icon-play {
  display: block !important;
}

/* État Actif (Mode Projection/Présentation) */
.nav-scroll-play.is-playing {
  color: #ef4444 !important;
  /* Rouge pour le bouton de fermeture */
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.1) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

.nav-scroll-play.is-playing .icon-arrow,
.nav-scroll-play.is-playing .icon-play {
  display: none !important;
}

.nav-scroll-play.is-playing .icon-close {
  display: block !important;
}

/* Mode Présentation */
body.presentation-mode {
  cursor: cell;
  /* Curseur spécial pour indiquer le mode auto */
}

/* --- LUEURS DE NAVIGATION --- */
.sun-icon {
  filter: drop-shadow(0 0 8px rgba(255, 230, 0, 0.9)) !important;
}

.moon-icon {
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.9)) !important;
}

/* ── PDF VIEWER — Bouton Plein Écran (Glow Pulsé, identique Flashcards) ── */
.pdf-btn-glow {
  padding: 0.6rem 1.8rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  animation: neonPulseSoft 3s infinite ease-in-out;
  border-color: rgba(250, 204, 21, 0.35) !important;
}

.pdf-btn-glow:hover {
  animation-play-state: paused;
  box-shadow:
    0 0 16px rgba(255, 221, 0, 0.65),
    0 0 30px rgba(255, 221, 0, 0.3) !important;
  transform: translateY(-2px);
}

/* ── PDF VIEWER — Bouton ✖ Quitter (Phase 2 : plein écran actif) ── */
.pdf-btn-exit {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: opacity 0.25s, transform 0.25s ease;
  letter-spacing: 0.03em;
  order: 3;
}

.pdf-btn-exit:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
}

body.pdf-fullscreen-active .pdf-btn-exit {
  display: flex;
}

/* ── PDF VIEWER — Icône Phase 3 (après sortie plein écran) ── */
.pdf-phase3-icon {
  display: none;
  font-size: 1.3rem;
  order: 3;
  opacity: 0.6;
  cursor: default;
  transition: opacity 0.3s;
}

.pdf-phase3-icon:hover {
  opacity: 1;
}

body.pdf-used-fullscreen .pdf-phase3-icon {
  display: block;
}

body.pdf-fullscreen-active .pdf-phase3-icon {
  display: none;
}

/* ── PDF VIEWER — Bouton Plein Écran (Positionnement & Intro) ── */
.pdf-btn-floating {
  position: absolute !important;
  top: 15% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.2) !important;
  z-index: 1000 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px var(--gold) !important;
  padding: 1rem 2rem !important;
  font-size: 1.2rem !important;
  opacity: 0;
  animation: pdf-floating-intro 0.8s ease-out forwards, neonPulseSoft 3s infinite ease-in-out;
}

@keyframes pdf-floating-intro {
  from {
    opacity: 0;
    transform: translate(-50%, -60%) scale(1.1);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

.pdf-btn-stowing {
  transition: opacity 0.8s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  pointer-events: none;
}

/* Positionnement final dans le toolbar */
#btn-fullscreen-pdf {
  order: 2;
  /* Entre search (1) et lang (3+) */
  margin: 0 0.5rem;
}

/* ── PDF VIEWER — Effet Glow Pulsé Internes Port-viewport ── */
#pdf-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-top: 1rem;
  /* Glow pulsé par défaut (Dark) */
  animation: pdf-glow-dark 3s infinite ease-in-out;
}

body.light-mode #pdf-container {
  animation: pdf-glow-light 3s infinite ease-in-out;
}

@keyframes pdf-glow-dark {
  0% {
    box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.15);
  }

  50% {
    box-shadow: inset 0 0 25px rgba(59, 130, 246, 0.3);
  }

  100% {
    box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.15);
  }
}

@keyframes pdf-glow-light {
  0% {
    box-shadow: inset 0 0 10px rgba(180, 83, 9, 0.15);
  }

  50% {
    box-shadow: inset 0 0 25px rgba(180, 83, 9, 0.35);
  }

  100% {
    box-shadow: inset 0 0 10px rgba(180, 83, 9, 0.15);
  }
}

/* ── PDF VIEWER — Bouton section footer ── */
.pdf-group-center {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 0.25rem;
  order: 5;
}

/* En plein écran : masquer le bouton Plein Écran */
/* body.pdf-fullscreen-active .pdf-group-center { display: none; } <-- Supprimé pour laisser voir le bouton Quitter */

/* ── MODE TEXTE PDF ── */
#btn-text-mode {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  order: 3;
  white-space: nowrap;
  font-size: 0.82rem;
}

/* ── Lecteur de Cours (Support HTML) ── */
.reader-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  margin-top: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 600px;
}

.reader-toolbar {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  padding: 0.5rem 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  /* Permet le passage à la ligne si trop serré */
  border-bottom: 1px solid var(--border-color);
  z-index: 10;
  gap: 0.5rem;
}

.reader-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.reader-info {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gold);
  min-width: 80px;
  text-align: center;
}

.slides-viewport {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  color: #1a1a1a;
  scroll-behavior: smooth;
  padding: 2rem;
}

body.dark-mode .slides-viewport {
  background: #111;
  color: #eee;
}

.slide-wrapper {
  display: none;
  animation: fadeInReader 0.4s ease-out;
  max-width: 900px;
  margin: 0 auto;
}

.slide-wrapper.active {
  display: block;
}

@keyframes fadeInReader {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Contenu des Slides (Générique) */
.slide-wrapper h1,
.slide-wrapper h2 {
  color: var(--text-primary);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.slide-wrapper h3 {
  color: var(--gold);
  margin: 1.5rem 0 1rem;
}

.slide-wrapper p {
  margin-bottom: 1rem;
  line-height: 1.8;
}

.slide-wrapper ul,
.slide-wrapper ol {
  margin: 1rem 0 1.5rem 2rem;
}

.slide-wrapper li {
  margin-bottom: 0.5rem;
}

/* Callouts & Special Boxes */
.callout {
  background: rgba(100, 100, 100, 0.1);
  border-left: 4px solid var(--gold);
  padding: 1.25rem;
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
}

.callout.green {
  border-left-color: #2d9e7e;
  background: rgba(45, 158, 126, 0.1);
}

.exercice {
  background: rgba(255, 152, 0, 0.1);
  border-left: 4px solid #ff9800;
  padding: 1.25rem;
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
}

.exercice strong {
  color: #ff9800;
  display: block;
  margin-bottom: 0.5rem;
}

.article-cite {
  background: rgba(150, 150, 150, 0.05);
  border: 1px dashed var(--border-color);
  padding: 1rem;
  font-style: italic;
  margin: 1rem 0;
  border-radius: 8px;
}

/* Table styles inside slides */
.slides-viewport table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.slides-viewport th {
  background: var(--gold);
  color: #000;
  padding: 0.75rem;
  text-align: left;
}

.slides-viewport td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.slides-viewport tr:hover td {
  background: rgba(255, 215, 0, 0.05);
}

/* Fullscreen Reader */
.reader-container:fullscreen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}

.reader-container:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
}

/* Search Group in Reader */
.search-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.6rem !important;
  min-width: 320px;
  position: relative;
}

.search-input {
  flex: 1;
  width: 100%;
  min-width: 100px;
  /* Largeur dynamique */
  background-color: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.5rem 4rem 0.5rem 0.6rem;
  border-radius: 8px;
  font-size: 0.88rem;
  transition: opacity 0.3s, transform 0.3s ease;
}

.clear-search-btn {
  position: absolute;
  right: 0.8rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1rem;
  cursor: pointer;
  display: none;
  /* Cache par défaut */
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: opacity 0.2s, transform 0.2s;
}

.clear-search-btn:hover {
  color: #ef4444;
  transform: scale(1.2);
}

body.light-mode .search-input {
  background-color: #fff;
  color: #1a1a1a;
  border-color: var(--border);
}

body.light-mode .clear-search-btn {
  color: rgba(0, 0, 0, 0.5) !important;
}

.search-input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 215, 0, 0.05);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
}

.search-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.6rem !important;
  min-width: 280px;
}

.search-input-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.search-count {
  position: absolute;
  right: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--text);
  font-weight: 700;
  pointer-events: none;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

/* --- EFFET RECHERCHE TROUVÉE (VERT) --- */
.search-group.has-matches .search-input {
  background: #d1fae5 !important;
  /* Vert émeraude très clair */
  color: #064e3b !important;
  /* Texte vert foncé */
  border-color: #10b981 !important;
}

.search-group.has-matches .search-count,
.search-group.has-matches .clear-search-btn {
  color: #064e3b !important;
}

/* --- EFFET AUCUN RÉSULTAT (ROUGE) --- */
.search-group.no-matches .search-input {
  background: #fee2e2 !important;
  /* Rouge clair */
  color: #7f1d1d !important;
  /* Texte rouge foncé */
  border-color: #ef4444 !important;
}

.search-group.no-matches .search-count,
.search-group.no-matches .clear-search-btn {
  color: #7f1d1d !important;
}

body.light-mode .search-count {
  color: #1e293b !important;
  /* Gris très foncé (Ardoise) */
  opacity: 1 !important;
}

/* Highlight in slides */
mark.search-match {
  background: rgba(255, 215, 0, 0.4);
  color: inherit;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
  transition: opacity 0.3s, transform 0.3s ease;
}

mark.search-match.current-focus {
  background: #f59e0b !important;
  /* Orange/Or vif */
  color: #000 !important;
  box-shadow: 0 0 15px #f59e0b, 0 0 30px rgba(245, 158, 11, 0.3);
  transform: scale(1.1);
  font-weight: 800;
  border-radius: 4px;
}

.search-focus {
  animation: search-pulse 1s ease-out;
}

@keyframes search-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  }

  70% {
    transform: scale(1.02);
    box-shadow: 0 0 0 15px rgba(245, 158, 11, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.search-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  border: 1px solid var(--border-color);
}

.search-nav-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 0.9rem !important;
  min-width: 32px !important;
}

.search-nav-btn:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .slides-viewport {
    padding: 1.5rem 1rem;
  }

  /* --- HARMONISATION TOTALE DES SECTIONS & BLOCS (MOBILE) --- */
  section {
    padding: 4rem 1.5rem 2rem !important;
    /* Marge identique pour tout le site */
  }

  #parts .part-card,
  .flashcard-nav-card {
    padding: 1.5rem !important;
    /* Espace interne harmonisé */
    width: 100% !important;
    /* Occupation totale de la section */
    max-width: 100% !important;
    margin: 0 0 1.25rem 0 !important;
    /* Espacement vertical entre cartes */
    min-height: 220px !important;
    /* Hauteur préservée pour l'élégance */
    box-sizing: border-box !important;
  }

  #parts .part-title {
    font-size: 1.5rem !important;
    margin-bottom: 1rem;
  }

  #parts .tag {
    white-space: normal !important;
    /* Empêche le débordement horizontal */
    height: auto;
  }

  .reader-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 0.4rem 0.5rem !important;
    gap: 0.4rem;
  }

  /* --- FIX TABLEAU INDEX (COLONNE 3 VISIBLE) --- */
  .index-table th,
  .index-table td {
    padding: 0.75rem 0.6rem !important;
    /* Réduction drastique du padding pour faire tenir les 3 colonnes */
    font-size: 0.8rem;
  }

  .td-ref {
    font-size: 0.7rem !important;
  }

  .td-cat {
    font-size: 0.55rem !important;
    padding: 0.1rem 0.3rem !important;
  }

  /* --- FIN FIX TABLEAU INDEX --- */

  .reader-group {
    justify-content: center;
    width: 100%;
    gap: 0.35rem;
    /* Espace réduit */
  }

  .reader-info {
    min-width: 60px;
    /* Moins large sur mobile */
  }

  .search-group {
    min-width: 0 !important;
    /* TRÈS IMPORTANT : permet au groupe de ne pas déborder */
    width: 100% !important;
  }

  /* --- LOGOS ANIMÉS UNIFIÉS (Désormais gérés globalement avec viseur SE) --- */
}

/* ── PDF SLIDE VIEW ── */
#pdf-text-view {
  padding: 0;
  min-height: 560px;
  display: flex;
  flex-direction: column;
}

/* Slide de présentation Premium (Taille fixe 16:9 comme le PDF) */
.pdf-slide {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  border-radius: 12px;
  width: 100%;
  max-width: 860px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  padding: 2.5rem 3.5rem;
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  transition: opacity 0.3s, transform 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Barre de navigation discrète */
.pdf-slide-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding: 0.6rem 1rem;
  background: rgba(59, 130, 246, 0.04);
  border-radius: 8px;
  border: 1px dashed rgba(59, 130, 246, 0.1);
}

.pdf-slide-num {
  font-size: 0.7rem;
  color: var(--blue);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pdf-slide-hint {
  font-size: 0.65rem;
  color: var(--muted2);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Titre de slide MAGISTRAL */
.pdf-slide-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.25;
  margin: 0 0 1.8rem;
  text-align: center;
  position: relative;
  padding-bottom: 1.2rem;
}

.pdf-slide-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0.4;
}

/* Sous-titre élégant */
.pdf-slide-sub {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--blue);
  margin: 1.5rem 0 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Paragraphe avec grande lisibilité */
.pdf-slide-para {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 1rem;
  text-align: justify;
  opacity: 0.95;
}

/* Puces personnalisées (remplaçant les >) */
.pdf-slide-bullet {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0.6rem 0;
  padding-left: 1.8rem;
  position: relative;
}

.pdf-slide-bullet::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: bold;
  font-size: 1.1rem;
  top: -2px;
}

/* Tableaux Modernes sans fioritures */
.pdf-table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.pdf-table-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}

.pdf-table-row:last-child {
  border-bottom: none;
}

.pdf-table-row:hover {
  background: rgba(59, 130, 246, 0.03);
}

.pdf-table-row:first-child {
  background: rgba(250, 204, 21, 0.05);
  font-weight: 700;
  color: var(--gold);
}

.pdf-table-cell {
  flex: 1;
  padding: 0.8rem 1rem;
  font-size: 0.85rem;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pdf-table-cell:last-child {
  border-right: none;
}

/* Slide vide */
.pdf-text-empty {
  color: var(--muted2);
  font-style: italic;
  text-align: center;
  padding: 3rem;
  font-size: 0.88rem;
}

/* ── Light Mode overrides ── */
body.light-mode .pdf-slide-title {
  color: #92400e;
  border-bottom-color: rgba(180, 83, 9, 0.25);
}

body.light-mode .pdf-slide-bullet {
  border-left-color: var(--blue);
  background: rgba(37, 99, 235, 0.04);
}

body.light-mode .pdf-table-row:first-child .pdf-table-cell {
  color: #92400e;
  background: rgba(180, 83, 9, 0.06);
}

body.light-mode .pdf-slide-nav {
  background: rgba(37, 99, 235, 0.04);
}

/* Hide RGPD - FIJ on mobile just like the Ctrl + F hint */
@media (max-width: 768px) {
  .logo-kbd-style {
    display: none !important;
  }
}

/* 
  FIX Z-INDEX : Les animations (reveal) ou les structures HTML créent des contextes d'empilement. 
  Pour que le menu déroulant de la section div.parts-grid puisse déborder et couvrir le <section id="pdf-viewer">,
  il faut donner à la section parente entière une profondeur Z plus élevée que ses frères suivants.
*/
#parts,
.flashcards-section,
.flashcards-section-centered {
  position: relative;
  z-index: 1100 !important;
  /* Force le bloc "Cards" à être devant le visualiseur PDF */
  transform: translateZ(0);
  /* Force un contexte d'empilement propre */
}

#pdf-viewer {
  position: relative;
  z-index: 10 !important;
  transform: translateZ(0);
}

/* ── TOOLBAR PDF RESPONSIVE (Compacté) ── */
.pdf-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.35rem 0.75rem !important;
  /* Gap vertical réduit */
  background: var(--toolbar-bg);
  backdrop-filter: blur(12px);
  padding: 0.4rem 0.6rem !important;
}

.pdf-group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 0.25rem !important;
  /* Resseré selon demande */
}

.pdf-group-left {
  order: 1;
}

.pdf-group-right {
  order: 2;
}

/* Menu de Langues spécifique au Toolbar PDF (Bande horizontale au-dessus) */
.pdf-lang-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  /* Apparaît AU-DESSUS du bouton */
  right: 0;
  background: var(--toolbar-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--btn-border);
  border-radius: 12px;
  padding: 12px 25px;
  /* Élargissement du padding latéral pour plus de confort */
  display: grid;
  grid-template-columns: repeat(24, auto);
  justify-content: center;
  gap: 10px;
  z-index: 99999 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: opacity 0.4s, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  width: max-content;
  max-width: min(1250px, calc(100vw - 40px));
  /* Supporte confortablement les 24 drapeaux */
}

/* 2 lignes de 12 */
@media (max-width: 1100px) {
  .pdf-lang-menu {
    grid-template-columns: repeat(12, auto);
    max-width: 650px;
    /* Élargi pour contenir les 12 drapeaux par ligne */
    padding: 15px 25px;
  }
}

/* 3 lignes de 8 */
@media (max-width: 600px) {
  .pdf-lang-menu {
    grid-template-columns: repeat(8, auto);
    max-width: 450px;
    /* Élargi pour les 8 drapeaux par ligne sur mobile */
    padding: 12px 20px;
  }
}

.pdf-lang-menu::-webkit-scrollbar {
  display: none;
  /* Cache la scrollbar sur Chrome/Safari */
}

.pdf-lang-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pdf-lang-menu .lang-option {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.2s;
}

.pdf-lang-menu .lang-option:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--gold);
  transform: scale(1.2) rotate(5deg);
}

.pdf-lang-menu .flag-icon {
  width: 22px;
  height: auto;
  border-radius: 2px;
}

.pdf-lang-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pdf-lang-menu .lang-option {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.2s;
}

.pdf-lang-menu .lang-option:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--gold);
  transform: scale(1.1);
}

.pdf-lang-menu .flag-icon {
  width: 24px;
  height: auto;
  border-radius: 2px;
}

/* Nouveau style flottant pour le plein écran */
.pdf-floating-controls {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 100;
  display: flex;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.45);
  padding: 6px;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 1px solid var(--btn-border);
  width: fit-content;
  /* On évite qu'il prenne toute la largeur */
}

.pdf-floating-controls .pdf-btn,
.pdf-floating-controls .pdf-btn-exit {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* On réduit un peu la taille de certains éléments sur petit écran */
@media (max-width: 800px) {
  .pdf-toolbar {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 0.3rem !important;
    padding: 0.4rem !important;
  }

  /* Ligne 1 : Navigation */
  .pdf-group-left {
    flex: 1 0 100% !important;
    justify-content: center !important;
    margin-bottom: 0.2rem;
  }

  /* Ligne 2 : Recherche (flexible) */
  .pdf-group-right {
    order: 2 !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-width: 0;
    gap: 0.2rem !important;
  }

  #search-pdf {
    flex-shrink: 1 !important;
    min-width: 80px !important;
  }

  #pdf-toc {
    min-width: 140px !important;
    flex-grow: 1;
  }

  .pdf-floating-controls {
    top: 5px;
    right: 5px;
    padding: 4px;
    transform: scale(0.9);
  }
}

/* ── OPTIMISATION TOOLBAR PDF (Désormais dès 1200px+) ── */
@media (min-width: 1200px) {
  .pdf-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    /* On passe de 3 à 2 colonnes car plein écran flottant */
    align-items: center;
    gap: 1.5rem !important;
    flex-wrap: nowrap !important;
    padding: 0.8rem 1.5rem !important;
  }

  /* On force l'alignement dans chaque colonne de la grille */
  .pdf-group-left {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    order: 1 !important;
  }

  .pdf-group-right {
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    order: 2 !important;
  }

  /* Pour éviter que le champ de recherche ne déforme tout */
  #search-pdf {
    min-width: 150px;
    max-width: 250px;
  }
}

/* ── REVOIR LE PLEIN ÉCRAN ── */
body.pdf-fullscreen-active .pdf-toolbar {
  display: flex !important;
  justify-content: center !important;
  gap: 3rem !important;
  grid-template-columns: none !important;
  /* On annule la grille pour tout centrer */
}

/* On cache SEULEMENT le bouton d'entrée en plein écran, pas le groupe entier */
body.pdf-fullscreen-active #btn-fullscreen-pdf {
  display: none !important;
}

/* Feedback visuel au scroll - ciblé sur la zone de texte */
#pdf-text-view {
  transition: background 0.4s ease, filter 0.4s ease;
  border-radius: 12px;
}

#pdf-text-view.is-scrolling {
  background: rgba(255, 255, 255, 0.03) !important;
  filter: brightness(1.2);
}

/* ==========================================================================
   UTILITY CLASSES (REMOVING INLINE STYLES)
   ========================================================================== */
.content-h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.content-p {
  color: var(--muted2);
  line-height: 1.8;
}

.content-p-mt {
  color: var(--muted2);
  line-height: 1.8;
  margin-top: 1rem;
}

.content-ul {
  color: var(--muted2);
  line-height: 1.8;
  list-style-position: inside;
}

.pdf-placeholder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  height: 120px;
  color: var(--muted2);
  font-family: 'Fira Code', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  gap: 0.75rem;
}

.pdf-inner-box {
  position: relative;
  z-index: 10000;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.search-pdf-wrapper {
  position: relative;
  flex-grow: 1;
  max-width: 300px;
  display: flex;
  align-items: center;
}

.search-clear-btn {
  display: none;
  position: absolute;
  right: 5px;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 5px;
  border-radius: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
   MENUS INTERACTIFS (LANGUES & FLASHCARDS)
   ────────────────────────────────────────────────────────────────────────── */

/* Menu des Langues */
.lang-menu {
  display: grid;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px;
  z-index: 1001;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  min-width: 160px;
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.lang-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Menu Flashcards */

.flash-link {
  display: block;
  padding: 12px 15px;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.2s, color 0.2s;
  font-family: 'Fira Code', monospace;
  font-size: 0.82rem;
  border: 1px solid transparent;
}

/* ── Toast de Confirmation de Copie ── */
.copy-toast {
  position: absolute;
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 700;
  z-index: 10001;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  border: 2px solid var(--gold);
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.6);
  animation: toastPulse 2s infinite ease-in-out;
  transform: translate(-50%, -100%) scale(0.5);
}

@keyframes toastPulse {

  0%,
  100% {
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.6);
  }

  50% {
    box-shadow: 0 0 30px rgba(250, 204, 21, 0.9);
  }
}

.copy-toast.show {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

.flash-link:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--blue);
  border-color: rgba(59, 130, 246, 0.2);
}

/* Classes d'accessibilité et de style (Audit) */
.txt-accent-purple {
  color: #a78bfa;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   ULTRAPRO & 4K OPTIMIZATION (Widescreen Experience)
   Agrandissement de la structure de 50% sur les écrans haute performance
   ========================================================================== */

@media (min-width: 1400px) {
  section {
    max-width: 1600px;
    /* On scale à partir du nouveau 1400px */
  }

  .slide-wrapper {
    max-width: 1200px;
  }

  /* Limitation à 4 colonnes pour la section Droits (Les 8 droits) dès 1400px pour éviter le 5+3 */
  .droits-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 1400px;
    margin: 2rem auto;
  }
}

@media (min-width: 2000px) {

  /* Site "Wide" pour écrans Haute Résolution */
  section {
    max-width: 1950px;
    /* Optimisé pour lisibilité immersive */
    padding: 10rem 6rem;
  }

  .hero-title {
    font-size: clamp(5rem, 18vw, 10rem);
  }

  .hero-subtitle {
    max-width: 1000px;
    font-size: 1.4rem;
  }

  .hero-stats {
    gap: 8rem;
  }

  .stat-num {
    font-size: 5rem;
  }

  .slide-wrapper {
    max-width: 1600px;
    font-size: 1.3rem;
  }

  .reader-container {
    min-height: 900px;
  }

  .nav-links {
    gap: 4.5rem;
  }
}

/* 🚀 BOUTON RETOUR EN HAUT (BACK TO TOP) */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background: var(--gold);
  color: #05080f;
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 15px 30px rgba(251, 191, 36, 0.4);
}

body.light-mode .back-to-top {
  color: var(--blue);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

body.light-mode .back-to-top:hover {
  background: var(--blue);
  color: white;
  box-shadow: 0 15px 30px rgba(37, 99, 235, 0.3);
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
  }
}

/* 📏 BARRE DE PROGRESSION DU LECTEUR */
.reader-progress-container {
  width: 100%;
  height: 4px;
  background: var(--border);
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
}

.reader-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.light-mode .reader-progress-bar {
  background: var(--blue);
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
}






/*  INTERFACE D'ERREUR (Oups !) */
.reader-error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-phi-6) var(--s-phi-4);
  background: var(--bg2);
  border: 1px dashed var(--border);
  border-radius: 16px;
  margin: 3rem 0;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.reader-error-container .error-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
}

.reader-error-container h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.reader-error-container p {
  color: var(--text);
  opacity: 0.7;
  max-width: 400px;
}

/* Lien cookies dans modale RGPD */
.rgpd-cookies-link {
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 20px;
  color: var(--blue);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 1rem;
}

.rgpd-cookies-link:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.rgpd-cookies-link:active {
  transform: translateY(0);
}

.rgpd-cookies-link .shield-icon {
  font-size: 1rem;
}

/*  OPTIMISATION IMPRESSION (Ctrl + P) */
/* --- ANIMATION FOND D'ÉCRAN (ÉTOILES EUROPÉENNES) --- */
.star-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.star-container-rotate {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  animation: euRotation 180s infinite linear;
}

@keyframes euRotation {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.star {
  position: absolute;
  width: 12px; /* Taille légèrement affinée */
  height: 12px;
  background: var(--gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.4)); /* Lueur beaucoup plus discrète */
  opacity: 0.7;
  animation: twinkle var(--duration, 4s) infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.05); } /* "Bounce" très léger (5%) */
}

/* Étoiles forcées en Jaune/Doré même en mode clair */
body.light-mode .star {
  background: #f59e0b; /* Doré original */
  filter: drop-shadow(0 0 3px rgba(180, 83, 9, 0.4)); /* Ombre plus chaude pour contraste sur fond clair */
}

@media (max-width: 768px) {
  .star-container-rotate {
    width: 320px;
    height: 320px;
  }
}

/*  OPTIMISATION IMPRESSION ET EXPORT PDF (Module Complet) */
@media print {

  nav,
  footer,
  #back-to-top,
  .cookie-overlay,
  .course-controls,
  .reader-nav,
  #reader-toc,
  #slide-search,
  .pdf-btn,
  .hero-glow,
  .hero-grid,
  .hero-scroll,
  .section-label,
  .hr,
  #parts,
  #index,
  #articles,
  #droits,
  #concepts,
  #partie-1,
  #partie-2,
  #partie-3,
  #partie-4,
  #partie-5,
  .flashcards-section-centered,
  .footer-logos {
    display: none !important;
  }

  .hero {
    height: auto !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: white !important;
    color: black !important;
    page-break-after: always !important;
    padding: 2rem !important;
  }

  .hero h1 {
    color: #000 !important;
    text-shadow: none !important;
    font-size: 3.5rem !important;
    margin-top: 2rem !important;
  }

  .hero-icon-link {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    pointer-events: none !important;
    transform: scale(1.5) !important;
  }

  .hero-sun,
  .hero-moon {
    display: none !important;
  }

  .reader-container {
    border: none !important;
    box-shadow: none !important;
    background: white !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #slides-viewport {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  .slide-wrapper {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    min-height: auto !important;
    page-break-after: always !important;
    page-break-inside: avoid !important;
    margin-bottom: 0 !important;
    padding: 40px !important;
    border: none !important;
  }

  .slide {
    box-shadow: none !important;
    border: 1px solid #eee !important;
    background: white !important;
    color: black !important;
    max-width: 100% !important;
  }

  body {
    background: white !important;
    color: black !important;
    overflow: visible !important;
  }
}