/* CORE STYLES */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: var(--anchor-scroll-offset, 90px) !important;
  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é */
}

/* ── ACCESSIBILITÉ : RESPECT STRICT DE PREFERS-REDUCED-MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Masque totalement le bandeau supérieur natif Google Translate (iframe) */
iframe.goog-te-banner-frame,
.goog-te-banner-frame,
.VIpgJd-yDnbAf-bnQX2b,
iframe.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
}

#google_translate_element {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.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: transform var(--t-phi-1) ease, opacity 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: #080d16;
  --bg2: #0b1120;
  --bg3: #101828;
  --border: #1e2d47;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --text: #e2e8f0;

  /* Accentuation : Or Royal / Ambre Légal & Bleu Royal */
  --gold: #f59e0b;
  --gold-bright: #fbbf24;
  --gold-dim: #92400e;
  --gold-muted: rgba(245, 158, 11, 0.14);
  --blue: #3b82f6;
  --blue-dim: #1d4ed8;
  --navy: #0f2756;
  --red: #ef4444;
  --green: #10b981;

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

  --nav-bg: rgba(8, 13, 22, 0.96);
  --toolbar-bg: rgba(11, 17, 32, 0.9);
  --input-bg: rgba(0, 0, 0, 0.4);
  --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(--gold-bright);
  --link-hover: var(--gold);
  --card-radius: 8px;
  --btn-radius: 6px;
}

/* ── LE THÈME CLAIR (Version Fond Bleu Ciel / Ardoise & Contraste Élevé) ── */
body.light-mode {
  --bg: #f1f5f9;
  --bg2: #ffffff;
  --bg3: #e2e8f0;
  --text: #0f172a;
  --border: #cbd5e1;
  --border-subtle: rgba(15, 23, 42, 0.08);

  /* Structure & Titres -> Navy Profond & Noble */
  --gold: #1e3a8a;
  --gold-bright: #2563eb;
  --gold-dim: #3b82f6;
  --gold-muted: rgba(30, 58, 138, 0.08);
  --blue: #2563eb;
  --blue-dim: #1d4ed8;
  --navy: #0f172a;

  /* Interaction (Actif & Hover) -> Doré Lumineux */
  --nav-active: #d97706;
  --link-hover: #b45309;

  /* Textes secondaires (Contraste maximal sur fond clair) */
  --muted: #475569;
  --muted2: #334155;
  --muted-accessible: #1e293b;

  /* Barres, Navigation & Inputs */
  --nav-bg: rgba(248, 250, 252, 0.98);
  --toolbar-bg: rgba(226, 232, 240, 0.92);
  --input-bg: #ffffff;
  --btn-bg: #ffffff;
  --btn-border: #cbd5e1;
  --btn-hover: #f1f5f9;
}



/* Amélioration lisibilité Select / Inputs en Light Mode (Fond Blanc Pur) */
body.light-mode .pdf-input:focus {
  background-color: var(--bg2) !important;
  color: var(--text) !important;
}

*,
*::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: 90px;
}


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) */
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: -2;
  opacity: .025;
  mix-blend-mode: overlay;
}

/* EFFET GLOW GLOBAL */
@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: -1;
  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;
}

main {
  position: relative;
  z-index: 1;
}

/* NAV */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999 !important;
  background: var(--nav-bg) !important;
  backdrop-filter: blur(20px);
  -webkit-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;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}


.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: 1.8rem;
  list-style: none;
  width: max-content;
  margin: 0;
  padding: 0 4.5rem 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 doux à l'extrémité droite pour une lisibilité parfaite */
  mask-image: linear-gradient(to right, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 92%, transparent 100%);

  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.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;
  display: inline-block;
}

.nav-links a:hover {
  color: var(--gold) !important;
  transform: translateY(-1px);
}

.nav-links a:active {
  transform: scale(0.95);
  transition: all 0.1s;
}

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: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 195px 1.5rem 3.5rem;
  overflow: visible;

  overflow: hidden;
  position: relative;
}


.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(217, 119, 6, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 119, 6, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 95%);
  pointer-events: none;
}

body.light-mode .hero-grid {
  background-image:
    linear-gradient(rgba(180, 83, 9, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 83, 9, 0.06) 1px, transparent 1px);
}

.hero-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-muted) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.6;
}

.hero-badge {
  font-family: 'Fira Code', monospace;
  font-size: 0.68rem;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 5px 14px;
  border-radius: 4px;
  background: var(--gold-muted);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 10;
  font-weight: 600;
}

.hero-title {

  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(var(--font-phi-3), 12vw, var(--font-phi-4));
  font-weight: 700;
  text-align: center;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-phi-5);
  color: var(--text);
  position: relative;
  z-index: 10;
}

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

body.light-mode .hero-title {
  color: #0b1329;
  text-shadow: 0 4px 12px rgba(11, 19, 41, 0.08);
}

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


/* Theme Toggle */
#theme-toggle,
#hero-theme-toggle {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: rotate(var(--spin, 0deg));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}


/* 🠪 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;
  max-height: 90vh;
  max-height: 90dvh;
  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-y: auto;
  overflow-x: hidden;
}

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

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

#cookie-modal {
  max-width: 480px;
  top: auto;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 20px);
}

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

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

.modal-close-icon {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 99;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s ease;
  line-height: 1;
  padding: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  opacity: 0.6;
}

.modal-close-icon:hover {
  opacity: 1;
  color: var(--red);
  background-color: rgba(239, 68, 68, 0.1);
  transform: scale(1.1);
}

.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: #047857;
  color: #ffffff;
  font-weight: 700;
}

.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: #047857;
  color: #ffffff;
  font-weight: 700;
}

body.light-mode .hero-badge {
  color: #92400e;
  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);
  opacity: 1;
}

.hero-stats {
  display: flex;
  gap: var(--s-phi-5);
  margin-top: var(--s-phi-6);
  position: relative;
  z-index: 10;
  opacity: 1;
}

.stat {
  text-align: center;
}

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

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

/* ── INDICATEUR DE DÉFILEMENT ÉLÉGANT & FLUIDE ── */
.hero-scroll-link {
  position: sticky;
  bottom: 12px;
  margin-top: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.25s ease;
  pointer-events: auto;
  padding: 8px 16px;
}

.hero-scroll-link:hover {
  transform: translateX(-50%) translateY(3px);
}

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

.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.scroll-line {
  position: relative;
  width: 2px;
  height: 64px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.scroll-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  border-radius: 2px;
  animation: scrollGlider 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

body.light-mode .scroll-line {
  background: var(--border);
}

body.light-mode .scroll-line::before {
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
}

@keyframes scrollGlider {
  0% {
    transform: translateY(-28px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(64px);
    opacity: 0;
  }
}


@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(4px);
  }

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ── SECTIONS ── */
section {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 4.5rem var(--s-phi-5);
  scroll-margin-top: 100px;
}

#parts,
#course-reader,
#partie-1,
#partie-2,
#partie-3,
#partie-4,
#partie-5,
#index,
#articles,
#droits,
#concepts,
#outils-rgpd,
#legal-changelog,
#faq {
  scroll-margin-top: 100px;
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}

.anchor-scroll-materialized {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}


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


section {
  background: transparent;
  background-color: transparent;
  position: relative;
}

.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-navigation-link {
    grid-template-columns: 1.55rem minmax(0, 1fr);
  }

  .part-navigation-arrow {
    display: none;
  }
}

.part-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: 2px solid var(--card-accent, var(--gold));
  border-radius: 8px;
  padding: var(--s-phi-5);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s, box-shadow 0.25s;
  text-decoration: none;
  color: inherit;
  display: block;
  min-height: 260px;
}

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

.part-card:active {
  transform: translateY(-1px);
}

.part-navigation-hub {
  --card-accent: var(--blue);
  cursor: default;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .12), transparent 44%),
    var(--bg2);
}

.part-navigation-hub:hover {
  transform: none;
  border-color: var(--border);
  border-top-color: var(--card-accent);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
}

.part-navigation-hub .part-number {
  margin-bottom: .45rem;
}

.part-navigation-hub .part-title {
  margin-bottom: .2rem;
  font-size: 1.45rem;
}

.part-navigation-intro {
  margin: 0 0 .8rem;
  color: var(--muted2);
  font-size: .74rem;
  line-height: 1.45;
}

.part-navigation-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin-top: auto;
}

.part-navigation-link {
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: .62rem .55rem;
  color: var(--text);
  background: color-mix(in srgb, var(--bg3) 86%, transparent);
  border: 1px solid var(--border);
  border-radius: 7px;
  text-decoration: none;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), border-color .22s, background-color .22s, box-shadow .22s;
}

.part-navigation-link:hover,
.part-navigation-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, var(--bg2));
  box-shadow: 0 6px 14px rgba(37, 99, 235, .11);
  outline: none;
}

.part-navigation-icon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 6px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  font-size: .76rem;
  font-weight: 700;
}

.part-navigation-link strong,
.part-navigation-link small {
  display: block;
  min-width: 0;
}

.part-navigation-link strong {
  font-size: .7rem;
  line-height: 1.2;
}

.part-navigation-link small {
  margin-top: .15rem;
  color: var(--muted2);
  font-size: .58rem;
  line-height: 1.2;
}

.part-navigation-arrow {
  color: var(--muted);
  font-size: .8rem;
  transition: color .22s, transform .22s;
}

.part-navigation-link:hover .part-navigation-arrow,
.part-navigation-link:focus-visible .part-navigation-arrow {
  color: var(--blue);
  transform: translateX(2px);
}

.part-card[data-part="1"] {
  --card-accent: var(--blue);
}

.part-card[data-part="2"] {
  --card-accent: #8b5cf6;
}

body.light-mode .part-card[data-part="2"] {
  --card-accent: #7c3aed;
}

.part-card[data-part="3"] {
  --card-accent: var(--gold);
}

.part-card[data-part="4"] {
  --card-accent: #059669;
}

.part-card[data-part="5"] {
  --card-accent: #dc2626;
}


.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 rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.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-title {
  color: #0f172a !important;
}
body.light-mode .section-desc {
  color: #0f172a !important;
}
body.light-mode .section-label {
  color: #082f49 !important;
}

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: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted-accessible);
  padding: .75rem 1.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, .2);
}

/* FIX CONTRASTE P1 light-mode: <th> sur fond clair */
body.light-mode .index-table thead th {
  color: #1e293b;
  background: rgba(15, 23, 42, .06);
}


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

main section[id],
#parts,
#course-reader {
  scroll-margin-top: 0 !important;
}

.index-table tbody tr.index-row-alt {
  background: rgba(255, 255, 255, .045);
}

body.light-mode .index-table tbody tr:not(.hidden):not(.index-row-alt) {
  background: rgba(15, 23, 42, .065);
}

body.light-mode .index-table tbody tr.index-row-alt {
  background: rgba(15, 23, 42, .025);
}

.index-table tbody tr:hover,
.index-table tbody tr.index-row-alt:hover,
body.light-mode .index-table tbody tr:not(.hidden):not(.index-row-alt):hover,
body.light-mode .index-table tbody tr.index-row-alt:hover {
  background: rgba(59, 130, 246, .08);
}

.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: .72rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 4px;
  white-space: nowrap;
}

.index-reader-hint {
  width: fit-content;
  margin: -1.2rem auto 1.4rem;
  padding: .55rem .85rem;
  border: 1px solid rgba(59, 130, 246, .25);
  border-radius: 999px;
  background: rgba(59, 130, 246, .07);
  color: var(--muted-accessible);
  font-size: .82rem;
  text-align: center;
}

.index-table tbody tr[data-topic-index] {
  cursor: pointer;
}

.index-topic-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.index-topic-trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
  border-radius: 4px;
}

.index-topic-open-icon {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(59, 130, 246, .3);
  border-radius: 50%;
  color: var(--blue);
  font-weight: 800;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.index-table tbody tr[data-topic-index]:hover .index-topic-open-icon,
.index-topic-trigger:focus-visible .index-topic-open-icon {
  transform: rotate(90deg);
  background: var(--blue);
  color: #fff;
}

.index-table tbody tr.index-topic-row-open,
.index-table tbody tr.index-topic-row-open:hover,
body.light-mode .index-table tbody tr.index-topic-row-open,
body.light-mode .index-table tbody tr.index-topic-row-open:hover {
  background: rgba(59, 130, 246, .14);
  border-bottom-color: transparent;
}

.index-topic-row-open .index-topic-open-icon {
  transform: none !important;
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.index-table tbody tr.index-topic-detail-row,
.index-table tbody tr.index-topic-detail-row:hover,
body.light-mode .index-table tbody tr.index-topic-detail-row,
body.light-mode .index-table tbody tr.index-topic-detail-row:hover {
  background: transparent !important;
  border-bottom: 1px solid rgba(59, 130, 246, .3);
}

#indexBody {
  overflow-anchor: none;
}

.index-table tbody td.index-topic-detail-cell {
  padding: 0 !important;
  border: 0;
}

.index-topic-drawer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: .35;
  will-change: grid-template-rows, opacity;
  transition: grid-template-rows .44s cubic-bezier(.22, 1, .36, 1), opacity .26s ease;
}

.index-topic-drawer.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.index-topic-drawer-clip {
  min-height: 0;
  overflow: hidden;
}

.index-topic-panel {
  width: auto;
  max-width: none;
  margin: 0 .8rem 1rem;
  padding: 0;
  border: 1px solid rgba(59, 130, 246, .32);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 15px 15px;
  background: var(--bg2);
  color: var(--text);
  box-shadow: 0 18px 44px rgba(2, 6, 23, .24);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-12px);
  will-change: transform, opacity;
  transition: opacity .3s ease .04s, transform .42s cubic-bezier(.22, 1, .36, 1);
}

.index-topic-drawer.is-open .index-topic-panel {
  opacity: 1;
  transform: translateY(0);
}

.index-topic-drawer.is-switching .index-topic-panel {
  opacity: .76;
}

.index-topic-drawer.is-switching.is-next .index-topic-panel {
  transform: translateY(7px) scale(.997);
}

.index-topic-drawer.is-switching.is-prev .index-topic-panel {
  transform: translateY(-7px) scale(.997);
}

body.index-topic-reading:not(.index-topic-lexi-expanded) #mascot-widget {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.index-topic-reading:not(.index-topic-lexi-expanded) #mascot-docked-tab {
  display: inline-flex !important;
}

.index-topic-panel:focus {
  outline: none;
}

.index-topic-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}

.index-topic-heading {
  min-width: 0;
}

.index-topic-eyebrow {
  margin-bottom: .3rem;
  color: var(--gold);
  font-family: 'Fira Code', monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.index-topic-header h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1rem, 2vw, 1.32rem);
  line-height: 1.3;
}

.index-topic-close {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(148, 163, 184, .08);
  color: var(--text);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.index-topic-close:hover,
.index-topic-close:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

.index-topic-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .65rem;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(15, 23, 42, .35);
}

body.light-mode .index-topic-toolbar {
  background: rgba(226, 232, 240, .7);
}

.index-topic-nav-group,
.index-topic-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.index-topic-nav-group .reader-info {
  min-width: 74px;
}

.index-topic-resource[hidden] {
  display: none !important;
}

.index-topic-drawer-body {
  min-height: 250px;
  padding: 1.4rem;
  background: #e5eaf1;
  color: #152033;
}

body.light-mode .index-topic-drawer-body {
  background: #edf2f7;
}

.index-topic-loading {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: #475569;
  font-weight: 700;
  text-align: center;
}

.index-topic-load-error {
  align-content: center;
  gap: .8rem;
}

.index-topic-load-error p {
  margin: 0;
}

.index-topic-content {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  color: #152033;
}

.index-topic-content-badges,
.index-topic-legal-refs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.index-topic-content-badges {
  margin-bottom: 1rem;
}

.index-topic-content-badges span,
.index-topic-legal-refs span {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: .25rem .58rem;
  border: 1px solid rgba(37, 99, 235, .2);
  border-radius: 999px;
  background: rgba(37, 99, 235, .07);
  color: #1d4ed8;
  font-family: 'Fira Code', monospace;
  font-size: .68rem;
  font-weight: 700;
}

.index-topic-summary-card,
.index-topic-content-section,
.index-topic-example,
.index-topic-warning,
.index-topic-sources {
  border: 1px solid rgba(100, 116, 139, .2);
  border-radius: 12px;
  background: rgba(255, 255, 255, .88);
}

.index-topic-summary-card {
  margin-bottom: 1rem;
  padding: 1.2rem 1.3rem;
  border-left: 4px solid var(--gold);
  background: #fff;
}

.index-topic-content h3 {
  margin: 0 0 .7rem;
  color: #0f172a;
  font-size: .98rem;
  line-height: 1.35;
}

.index-topic-content p {
  margin: 0;
  line-height: 1.7;
}

.index-topic-content p + p {
  margin-top: .75rem;
}

.index-topic-content-section,
.index-topic-example,
.index-topic-warning,
.index-topic-sources {
  padding: 1.15rem 1.25rem;
}

.index-topic-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  margin: 1rem 0;
}

.index-topic-content ul,
.index-topic-content ol {
  margin: 0;
  padding-left: 1.25rem;
}

.index-topic-content li {
  padding-left: .2rem;
  line-height: 1.58;
}

.index-topic-content li + li {
  margin-top: .48rem;
}

.index-topic-example {
  border-color: rgba(14, 165, 233, .26);
  background: rgba(240, 249, 255, .94);
}

.index-topic-action-plan {
  border-color: rgba(16, 185, 129, .25);
}

.index-topic-warning {
  margin: 1rem 0;
  border-color: rgba(245, 158, 11, .38);
  background: #fffbeb;
}

.index-topic-warning strong {
  display: block;
  margin-bottom: .45rem;
  color: #92400e;
}

.index-topic-sources {
  display: grid;
  gap: 1.15rem;
  background: rgba(248, 250, 252, .96);
}

.index-topic-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .65rem;
}

.index-topic-source {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  padding: .8rem;
  border: 1px solid rgba(37, 99, 235, .2);
  border-radius: 9px;
  background: #fff;
  color: #334155;
  font-size: .74rem;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.index-topic-source:hover,
.index-topic-source:focus-visible {
  border-color: #2563eb;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
  transform: translateY(-1px);
}

.index-topic-source strong {
  color: #0f172a;
  font-size: .8rem;
  line-height: 1.4;
}

.index-topic-source-status {
  width: fit-content;
  padding: .15rem .4rem;
  border-radius: 4px;
  background: #dcfce7;
  color: #166534;
  font-family: 'Fira Code', monospace;
  font-size: .62rem;
  font-weight: 700;
}

.index-topic-source.is-draft {
  border-color: rgba(245, 158, 11, .35);
}

.index-topic-source.is-draft .index-topic-source-status {
  background: #fef3c7;
  color: #92400e;
}

.index-topic-reviewed {
  color: #64748b;
  font-family: 'Fira Code', monospace;
  font-size: .68rem;
}

@media (max-width: 700px) {
  .index-topic-panel {
    margin: 0 .3rem .7rem;
    border-radius: 0 0 11px 11px;
  }

  .index-topic-header {
    padding: .8rem;
  }

  .index-topic-toolbar {
    align-items: stretch;
    padding: .55rem;
  }

  .index-topic-actions {
    width: 100%;
    flex-direction: column;
  }

  .index-topic-actions > * {
    width: 100%;
    flex: none;
    justify-content: center;
    text-align: center;
  }

  .index-topic-nav-group {
    width: 100%;
    justify-content: center;
  }

  .index-topic-drawer-body {
    min-height: 210px;
    padding: .85rem;
  }

  .index-topic-content-grid {
    grid-template-columns: 1fr;
  }

  .index-topic-summary-card,
  .index-topic-content-section,
  .index-topic-example,
  .index-topic-warning,
  .index-topic-sources {
    padding: .9rem;
  }

  .index-topic-source-grid {
    grid-template-columns: 1fr;
  }

  .index-reader-hint {
    margin-top: -.8rem;
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .index-topic-drawer,
  .index-topic-panel {
    transition: none;
  }
}

/* ↀↀ 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: #92400e;
}

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

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));
  grid-auto-rows: 1fr;
  gap: var(--s-phi-4);
}

.art-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--s-phi-4) var(--s-phi-5);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.art-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.art-ref {
  font-family: 'Fira Code', monospace;
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  font-weight: 600;
}


.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 ── */
.sanctions-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 8px;
  padding: 2rem 2.5rem;
  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: 1.35rem;
  font-weight: 700;
  margin-bottom: var(--s-phi-2);
  color: var(--text);
}

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

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

.sanction-num.red {
  color: var(--red);
}

.sanction-num.amber {
  color: var(--gold);
}

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

.sanction-divider {
  width: 1px;
  height: 60px;
  background: var(--border);
}

body.light-mode .sanctions-box {
  background: var(--bg2);
  border-color: var(--border);
  border-left: 3px solid #b91c1c;
}

body.light-mode .sb-title {
  color: #14181f;
}

body.light-mode .sanction-num.red {
  color: #b91c1c;
}

body.light-mode .sanction-num.amber {
  color: var(--gold);
}

/* ── DROITS CARDS (Éditorial & Structure) ── */
.droits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}

.droit-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: left;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.droit-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

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

.droit-art {
  font-family: 'Fira Code', monospace;
  font-size: .68rem;
  color: var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.droit-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--s-phi-1);
  line-height: 1.25;
}

.droit-desc {
  font-size: 0.82rem;
  color: var(--muted2);
  line-height: 1.5;
  margin-top: auto;
}

/* ── TIMELINE DISCRÈTE (Filet sobre & Points nets) ── */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

body.light-mode .timeline::before {
  background: var(--border);
}


.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;
  }
}

/* --- REVEAL (contenu visible par défaut, animations activées par JS) --- */
/* Sans JS : tout le contenu est visible d'emblée */
.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Une fois que JS a chargé, on active les animations reveal */
body.js-loaded .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

body.js-loaded .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-block {
  background: var(--bg2);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.07));
  border-radius: 16px;
  padding: var(--s-phi-5);
  margin-bottom: var(--s-phi-6);
  position: relative;
  overflow: hidden; /* Épouse rigoureusement la courbure du cadre aux 4 coins */
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.25);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;
}

body.light-mode .content-block {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.content-block:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.35);
}

body.light-mode .content-block:hover {
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 12px 32px -6px rgba(15, 23, 42, 0.09), 0 2px 4px rgba(15, 23, 42, 0.04);
}

/* Filet latéral coloré raffiné & parfaitement biseauté */
.content-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--art-color, var(--blue));
  pointer-events: none;
  transition: width 0.25s ease, filter 0.25s ease;
}

.content-block:hover::before {
  width: 5px;
  filter: brightness(1.15);
}

/* Aura lumineuse subtile et soignée sur la gauche */
.content-block::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 48px;
  background: linear-gradient(90deg, var(--art-glow, rgba(59, 130, 246, 0.06)) 0%, transparent 100%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.28s ease;
}

.content-block:hover::after {
  opacity: 1;
}

/* Couleurs spécifiques par bloc (Dégradés subtils & auras) */
.content-block.color-blue {
  --art-color: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  --art-glow: rgba(59, 130, 246, 0.12);
}
body.light-mode .content-block.color-blue {
  --art-color: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  --art-glow: rgba(37, 99, 235, 0.07);
}

.content-block.color-purple {
  --art-color: linear-gradient(180deg, #a855f7 0%, #7e22ce 100%);
  --art-glow: rgba(168, 85, 247, 0.12);
}
body.light-mode .content-block.color-purple {
  --art-color: linear-gradient(180deg, #9333ea 0%, #7e22ce 100%);
  --art-glow: rgba(147, 51, 234, 0.07);
}

.content-block.color-amber {
  --art-color: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  --art-glow: rgba(245, 158, 11, 0.12);
}
body.light-mode .content-block.color-amber {
  --art-color: linear-gradient(180deg, #d97706 0%, #b45309 100%);
  --art-glow: rgba(217, 119, 6, 0.07);
}

.content-block.color-emerald {
  --art-color: linear-gradient(180deg, #10b981 0%, #047857 100%);
  --art-glow: rgba(16, 185, 129, 0.12);
}
body.light-mode .content-block.color-emerald {
  --art-color: linear-gradient(180deg, #059669 0%, #047857 100%);
  --art-glow: rgba(5, 150, 105, 0.07);
}

.content-block.color-red {
  --art-color: linear-gradient(180deg, #f43f5e 0%, #be123c 100%);
  --art-glow: rgba(244, 63, 94, 0.12);
}
body.light-mode .content-block.color-red {
  --art-color: linear-gradient(180deg, #e11d48 0%, #be123c 100%);
  --art-glow: rgba(225, 29, 72, 0.07);
}

.content-block.color-cyan {
  --art-color: linear-gradient(180deg, #06b6d4 0%, #0e7490 100%);
  --art-glow: rgba(6, 182, 212, 0.12);
}

.content-block.color-fuchsia {
  --art-color: linear-gradient(180deg, #d946ef 0%, #a21caf 100%);
  --art-glow: rgba(217, 70, 239, 0.12);
}

/* --- 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: 120px 1rem 3rem !important;
    min-height: auto;
  }

  .hero-scroll-link {
    position: relative !important;
    margin: 2.5rem auto 0 !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hero-scroll-link:hover {
    transform: translateY(3px) !important;
  }

  .scroll-line {
    height: 48px !important;
    width: 2px !important;
  }


  .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;
}



/* --- LOGO RGPD DYNAMIQUE --- */
.rgpd-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  margin: 3.5rem auto 1.5rem auto;
  text-align: center;
  position: relative;
  z-index: 5;
}


.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;
}

.footer-shield-container {
  position: relative;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, filter 0.3s ease;
  opacity: 0.75;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.footer-shield-container .nav-shield-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}

.rgpd-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  border-radius: 0;
  display: inline-block;
  vertical-align: middle;
  transition: opacity 0.25s ease;
}

.footer-shield-container[data-shield-webgl-status="active"] .rgpd-logo {
  display: none;
}

.rgpd-logo-btn:hover .footer-shield-container,
.footer-shield-container:hover {
  transform: scale(1.1) translateY(-2px);
  opacity: 1;
  filter: drop-shadow(0 8px 22px rgba(37, 99, 235, 0.55)) drop-shadow(0 0 12px rgba(245, 158, 11, 0.45));
}

body.light-mode .footer-shield-container {
  background: transparent;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

body.light-mode .rgpd-logo-btn:hover .footer-shield-container,
body.light-mode .footer-shield-container:hover {
  filter: drop-shadow(0 8px 20px rgba(37, 99, 235, 0.45)) drop-shadow(0 0 10px rgba(245, 158, 11, 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);

  overflow: hidden;
  max-width: 100%;
}

.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);
}

#open-rgpd-footer-btn:hover {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(245, 158, 11, 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: 100;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 1rem 0 3rem 0;
}

/* Variante section centrée (utilisée dans la div cards) */
.flashcards-section-centered {
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 2rem 0;
}

/* 2. L'ancre relative */
.flash-wrapper {
  position: relative;
  z-index: 100;
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: center;
}


/* 3. Le Bouton (Parfaitement calibré) */
.flash-btn {
  position: relative;
  background: var(--gold);
  color: #ffffff;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 0 1.25rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

body.light-mode .flash-btn {
  background: var(--gold);
  color: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.2);
}

.flash-btn:hover {
  transform: translateY(-2px);
  background: var(--gold-bright);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}


/* 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 (descend sous le bouton) */
.flash-menu.down-center {
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
}

/* Modificateur pour ouvrir vers le haut (Adaptatif) */
.flash-menu.up-center {
  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.down-center.active,
.flash-menu.up-center.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: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 1.2rem;
  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: 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%);
  position: relative; /* Base pour le pseudo-élément */
  z-index: 1;
}

/* Effet spécifique pour le logo FIJ : fond blanc circulaire au hover */
.footer-logo-link[href*="fij.be"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

.footer-logo-link[href*="fij.be"]:hover::before {
  width: 100px;
  height: 64px;
  opacity: 1;
}

.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;
  position: relative;
  z-index: 2; /* Garde l'image au-dessus du fond blanc */
}

/* ==========================================================================
   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 */
}

/* ── PDF VIEWER — Bouton Plein Écran Institutionnel ── */
.pdf-btn-glow {
  padding: 0.6rem 1.6rem !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  border-radius: 6px;
  background: var(--gold) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}



.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;
  touch-action: none;
  user-select: none;
}

@keyframes pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.nav-scroll-play.is-pressing {
  background: rgba(251, 191, 36, 0.3) !important;
  transform: scale(0.95);
}

.nav-scroll-play.is-active {
  background: var(--gold) !important;
  color: var(--bg) !important;
  transform: scale(1.3);
  box-shadow: 0 0 20px var(--gold);
  animation: pulse-gold 1s infinite;
}

.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 */
}

/* --- ICONES DE NAVIGATION --- */
.sun-icon, .moon-icon { display: block; }

  



.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;
}

.hero-title-three-canvas {
  position: absolute;
  left: -9%;
  top: -9%;
  width: 118%;
  height: 118%;
  z-index: 1;
  pointer-events: none;
}

.hero-title--webgl-ready,
.hero-title--webgl-ready *,
.hero-title--webgl-ready::selection,
.hero-title--webgl-ready *::selection {
  color: transparent !important;
  background: transparent !important;
  text-shadow: none !important;
  -webkit-text-fill-color: transparent !important;
  user-select: none;
  -webkit-user-select: none;
}

/* Coins de page interactifs — visibles uniquement avec une souris précise. */
.reader-page-corner {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .reader-page-corner {
    position: absolute;
    z-index: 12;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: end;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: #92400e;
    cursor: pointer;
    isolation: isolate;
  }

  .reader-page-corner.is-prev { left: 0; }
  .reader-page-corner.is-next { right: 0; }
  .reader-page-corner.is-top { top: var(--reader-page-top, 58px); place-items: start; }
  .reader-page-corner.is-bottom { bottom: 0; }

  .reader-page-corner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(135deg, #fffdf7 0 40%, rgba(217, 119, 6, .82) 41% 48%, #dbe3ec 49% 100%);
    box-shadow: -12px -12px 26px rgba(15, 23, 42, .3), inset 8px 8px 16px rgba(255, 255, 255, .78);
    transition: transform .38s cubic-bezier(.22, 1, .36, 1), filter .38s ease;
  }

  .reader-page-corner.is-next.is-bottom::before {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    transform-origin: 100% 100%;
    transform: perspective(220px) rotateY(-28deg) scale(.34);
  }

  .reader-page-corner.is-prev.is-bottom::before {
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    transform-origin: 0 100%;
    transform: perspective(220px) rotateY(28deg) scale(.34);
  }

  .reader-page-corner.is-next.is-top::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    transform-origin: 100% 0;
    transform: perspective(220px) rotateY(-28deg) scale(.34);
    box-shadow: -12px 12px 26px rgba(15, 23, 42, .3), inset 8px -8px 16px rgba(255, 255, 255, .78);
  }

  .reader-page-corner.is-prev.is-top::before {
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform-origin: 0 0;
    transform: perspective(220px) rotateY(28deg) scale(.34);
    box-shadow: 12px 12px 26px rgba(15, 23, 42, .3), inset -8px -8px 16px rgba(255, 255, 255, .78);
  }

  .reader-page-corner span {
    margin: 0 16px 10px;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    transform: translateY(8px) scale(.75);
    transition: opacity .22s ease, transform .38s cubic-bezier(.22, 1, .36, 1);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
  }

  .reader-page-corner.is-prev span {
    justify-self: start;
  }

  .reader-page-corner.is-next.is-top span {
    justify-self: end;
  }

  .reader-page-corner.is-top span {
    margin: 10px 16px 0;
    transform: translateY(-8px) scale(.75);
  }

  .reader-page-corner:hover::before,
  .reader-page-corner:focus-visible::before,
  .reader-container.reader-edge-prev-hover.reader-edge-top-hover .reader-page-corner.is-prev.is-top::before,
  .reader-container.reader-edge-prev-hover.reader-edge-bottom-hover .reader-page-corner.is-prev.is-bottom::before,
  .reader-container.reader-edge-next-hover.reader-edge-top-hover .reader-page-corner.is-next.is-top::before,
  .reader-container.reader-edge-next-hover.reader-edge-bottom-hover .reader-page-corner.is-next.is-bottom::before {
    transform: perspective(220px) rotateY(0) scale(1);
    filter: saturate(1.12) brightness(1.03);
  }

  .reader-page-corner:hover span,
  .reader-page-corner:focus-visible span,
  .reader-container.reader-edge-prev-hover.reader-edge-top-hover .reader-page-corner.is-prev.is-top span,
  .reader-container.reader-edge-prev-hover.reader-edge-bottom-hover .reader-page-corner.is-prev.is-bottom span,
  .reader-container.reader-edge-next-hover.reader-edge-top-hover .reader-page-corner.is-next.is-top span,
  .reader-container.reader-edge-next-hover.reader-edge-bottom-hover .reader-page-corner.is-next.is-bottom span {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .reader-page-corner:active::before {
    transform: perspective(220px) rotateY(0) scale(.92);
  }

  .reader-page-corner.is-next:hover::before,
  .reader-container.reader-edge-next-hover.reader-edge-top-hover .reader-page-corner.is-next.is-top::before,
  .reader-container.reader-edge-next-hover.reader-edge-bottom-hover .reader-page-corner.is-next.is-bottom::before {
    animation: readerPageCurlNext 1.25s ease-in-out infinite;
  }

  .reader-page-corner.is-prev:hover::before,
  .reader-container.reader-edge-prev-hover.reader-edge-top-hover .reader-page-corner.is-prev.is-top::before,
  .reader-container.reader-edge-prev-hover.reader-edge-bottom-hover .reader-page-corner.is-prev.is-bottom::before {
    animation: readerPageCurlPrev 1.25s ease-in-out infinite;
  }

  .reader-page-corner:disabled {
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes readerPageCurlNext {
  0%, 100% { transform: perspective(220px) rotateY(-4deg) scale(.96); }
  50% { transform: perspective(220px) rotateY(-16deg) scale(1); }
}

@keyframes readerPageCurlPrev {
  0%, 100% { transform: perspective(220px) rotateY(4deg) scale(.96); }
  50% { transform: perspective(220px) rotateY(16deg) scale(1); }
}

@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,
table.data-table th {
  background: #d97706;
  color: #05080f;
  font-weight: 700;
  padding: 0.75rem;
  text-align: left;
}

body.light-mode .slides-viewport th,
body.light-mode table.data-table th {
  background: #1e3a8a;
  color: #ffffff;
  font-weight: 700;
}

.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 {
    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 .part-navigation-hub {
    min-height: 250px !important;
  }

  #parts .part-navigation-hub .part-title {
    margin-bottom: .25rem;
  }

  #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 supprimée pour composited layer */
  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;
  }
}

/* Retour en haut : capsule discrète, progression et révélation par proximité. */
.back-to-top {
  --scroll-progress: 0deg;
  --scroll-progress-ratio: 0%;
  position: fixed;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  right: max(1.5rem, env(safe-area-inset-right));
  width: 50px;
  height: 50px;
  padding: 5px;
  gap: 8px;
  background: color-mix(in srgb, var(--bg2) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--border));
  color: var(--gold);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transform: translateY(20px) scale(0.8);
  transition: width .32s cubic-bezier(.22, 1, .36, 1), opacity .28s ease,
    visibility .28s ease, transform .32s cubic-bezier(.22, 1, .36, 1),
    border-color .24s ease, box-shadow .24s ease;
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
}

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

.back-to-top.is-near,
.back-to-top:hover,
.back-to-top:focus-visible {
  width: 152px;
  border-color: color-mix(in srgb, var(--gold) 70%, var(--border));
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .36), 0 0 22px rgba(245, 158, 11, .16);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.back-to-top-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  color: var(--text);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .025em;
  transform: translateX(8px);
  transition: max-width .32s cubic-bezier(.22, 1, .36, 1), opacity .2s ease,
    transform .32s cubic-bezier(.22, 1, .36, 1);
}

.back-to-top.is-near .back-to-top-label,
.back-to-top:hover .back-to-top-label,
.back-to-top:focus-visible .back-to-top-label {
  max-width: 92px;
  opacity: 1;
  transform: translateX(0);
}

.back-to-top-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--gold) var(--scroll-progress), rgba(148, 163, 184, .22) 0);
  box-shadow: inset 0 0 0 3px var(--bg2);
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), filter .24s ease;
  position: relative;
  color: var(--blue);
}

.back-to-top-chevron {
  position: absolute;
  inset: 9px;
  width: 20px;
  height: 20px;
}

.back-to-top-chevron-base {
  color: var(--blue);
}

.back-to-top-chevron-progress {
  color: var(--nav-active);
  clip-path: inset(0 0 0 calc(100% - var(--scroll-progress-ratio)));
  transition: clip-path .12s linear;
}

.back-to-top:hover .back-to-top-icon,
.back-to-top:focus-visible .back-to-top-icon {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

body.light-mode .back-to-top {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(37, 99, 235, .24);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
}

body.light-mode .back-to-top-icon {
  background: conic-gradient(var(--blue) var(--scroll-progress), rgba(37, 99, 235, .14) 0);
  box-shadow: inset 0 0 0 3px #fff;
}

body.light-mode .back-to-top:is(.is-near, :hover, :focus-visible) {
  border-color: rgba(37, 99, 235, .62);
  box-shadow: 0 16px 34px rgba(37, 99, 235, .18);
}

@media (max-width: 768px) {
  .back-to-top {
    width: 44px;
    height: 44px;
    bottom: max(1rem, env(safe-area-inset-bottom));
    right: max(1rem, env(safe-area-inset-right));
  }

  .back-to-top:is(.is-near, :hover, :focus-visible) {
    width: 44px;
  }

  .back-to-top-label {
    display: none;
  }

  .back-to-top-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}

/* 📏 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: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: var(--star-field-opacity, 1);
  transform: scale(var(--star-field-scale, 1));
  transform-origin: center center;
  will-change: transform, opacity;
}

.eu-stars-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.65s ease;
}

.star-field--webgl .eu-stars-canvas {
  opacity: 0.92;
}

.star-field--webgl::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle min(300px, 36vw) at 50% 42%,
    rgba(0, 51, 153, 0.28) 0%,
    rgba(0, 51, 153, 0.14) 42%,
    transparent 76%
  );
  filter: blur(10px);
  pointer-events: none;
}

body.light-mode .star-field--webgl .eu-stars-canvas {
  opacity: 0.78;
}

body.light-mode .star-field--webgl::before {
  background: radial-gradient(
    circle min(280px, 34vw) at 50% 42%,
    rgba(0, 51, 153, 0.055) 0%,
    transparent 72%
  );
  filter: none;
}

.star-field--webgl .star-container-rotate {
  opacity: 0;
  animation-play-state: paused;
  transition: opacity 0.35s ease;
}

.star-container-rotate {
  position: absolute;
  top: 42%;
  left: 50%;
  width: min(520px, 80vw);
  height: min(520px, 80vw);
  transform: translate(-50%, -50%);
  animation: euRotation 180s infinite linear;
  pointer-events: none;
}

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

.star {
  position: absolute;
  width: 10px;
  height: 10px;
  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%);
  opacity: 0.55;
  animation: twinkle var(--duration, 4s) infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.75; transform: translate(-50%, -50%) scale(1.08); }
}

/* Étoiles en mode clair */
body.light-mode .star {
  background: #f59e0b;
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .star-container-rotate,
  .star {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .star-container-rotate {
    width: min(320px, 85vw);
    height: min(320px, 85vw);
    top: 36%;
  }

  .star {
    width: 7px;
    height: 7px;
    opacity: 0.4;
  }
}


/* 🧠 FLASHCARDS NATIF MODAL */
.fc-card-container {
  perspective: 1000px;
  width: 100%;
  min-height: 200px;
  cursor: pointer;
}
.fc-card-inner {
  position: relative;
  width: 100%;
  display: grid;
  min-height: 200px;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.fc-card-inner.is-flipped {
  transform: rotateY(180deg);
}
.fc-card-front, .fc-card-back {
  grid-area: 1 / 1 / 2 / 2; /* Place les deux faces sur la même case de grille */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Safari */
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}
body.light-mode .fc-card-front, body.light-mode .fc-card-back {
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.fc-card-back {
  transform: rotateY(180deg);
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.3);
}
.fc-hint-wrapper {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fc-bulb-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: transform 0.3s, filter 0.3s;
}
.fc-bulb-btn:hover {
  transform: scale(1.1) translateY(-2px);
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
}
.fc-hint-text {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gold);
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 10px;
  width: 100%;
  animation: fadeIn 0.3s ease;
}

/* MCQ Buttons */
.fc-mcq-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
  white-space: normal;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.fc-mcq-btn:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--text-muted);
}
.fc-mcq-btn.correct {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--green);
  color: var(--green);
}
.fc-mcq-btn.incorrect {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--red);
  color: var(--red);
}

/* Bouton ? Progression Globale */
.fc-progress-btn {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 99;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: var(--blue);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0.7;
}
.fc-progress-btn:hover {
  opacity: 1;
  background: rgba(59, 130, 246, 0.2);
  transform: scale(1.1);
}
.fc-progress-tooltip {
  display: none;
  position: absolute;
  top: 52px;
  left: 15px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  z-index: 100;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text);
  text-align: left;
}
.fc-progress-btn:hover + .fc-progress-tooltip,
.fc-progress-tooltip:hover {
  display: block;
  animation: fadeIn 0.2s ease;
}
.fc-progress-tooltip .fc-prog-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
}
.fc-progress-tooltip .fc-prog-row.total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 700;
}
.fc-prog-bar-mini {
  width: 100%;
  height: 4px;
  background: var(--surface-2);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.fc-prog-bar-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--blue));
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Mobile: Flashcard card padding + font */
@media (max-width: 480px) {
  .fc-card-front, .fc-card-back {
    padding: 1rem;
  }
  .fc-card-container {
    min-height: 160px;
  }
  .fc-card-inner {
    min-height: 160px;
  }
  #fc-question {
    font-size: 1rem !important;
  }
  .fc-mcq-btn {
    font-size: 0.85rem;
    padding: 8px 12px;
  }
  .fc-progress-tooltip {
    min-width: 200px;
    font-size: 0.78rem;
  }
}

/*  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;
  }
}

/* Stylisation fine de la barre de défilement dans la modale d'information */
.rgpd-info-body::-webkit-scrollbar {
  width: 6px;
}
.rgpd-info-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
.rgpd-info-body::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.5);
  border-radius: 4px;
}
.rgpd-info-body::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* Visibilité immédiate pour Googlebot, Lighthouse et le premier écran pour garantir des captures nettes */
html.is-bot .cookie-overlay:not(.active),
html.is-bot .cookie-modal:not(.active),
html.is-bot #cookie-overlay:not(.active),
html.is-bot #cookie-modal:not(.active),
html.is-bot #rgpd-info-overlay:not(.active),
html.is-bot #rgpd-info-modal:not(.active),
html.is-bot #flashcard-overlay:not(.active),
html.is-bot #flashcard-modal:not(.active),
html.is-bot #lang-menu:not(.active),
html.is-bot .flash-menu:not(.active),
body.is-bot .cookie-overlay:not(.active),
body.is-bot .cookie-modal:not(.active),
body.is-bot #cookie-overlay:not(.active),
body.is-bot #cookie-modal:not(.active),
body.is-bot #rgpd-info-overlay:not(.active),
body.is-bot #rgpd-info-modal:not(.active),
body.is-bot #flashcard-overlay:not(.active),
body.is-bot #flashcard-modal:not(.active),
body.is-bot #lang-menu:not(.active),
body.is-bot .flash-menu:not(.active) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html.is-bot .hero,
html.is-bot .hero-title,
html.is-bot .hero-subtitle,
html.is-bot .hero-badge,
html.is-bot .hero-stats,
html.is-bot .stat,
html.is-bot .reveal,
html.is-bot .part-card,
html.is-bot section,
html.is-bot main,
html.is-bot .section-label,
html.is-bot .section-title,
html.is-bot .section-desc,
html.is-bot .parts-grid,
html.is-bot .droits-grid,
html.is-bot .concept-card,
body.is-bot .hero,
body.is-bot .hero-title,
body.is-bot .hero-subtitle,
body.is-bot .hero-badge,
body.is-bot .hero-stats,
body.is-bot .stat,
body.is-bot .reveal,
body.is-bot .part-card,
body.is-bot section,
body.is-bot main,
body.is-bot .section-label,
body.is-bot .section-title,
body.is-bot .section-desc,
body.is-bot .parts-grid,
body.is-bot .droits-grid,
body.is-bot .concept-card {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
}


.hero .reveal,
header .reveal,
.hero-title,
.hero-subtitle,
.hero-badge,
.hero-stats {
  opacity: 1;
  transform: none;
}

/* ── FAQ SECTION STYLES ── */
.faq-section {
  position: relative;
  z-index: 2;
}

.faq-item {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.faq-item:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.faq-item[open] {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.08);
}

body.light-mode .faq-item[open] {
  border-color: rgba(30, 58, 138, 0.35);
  box-shadow: 0 8px 24px rgba(30, 58, 138, 0.06);
}

.faq-item[open] .faq-icon {
  transform: rotate(180deg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-icon {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-summary::-webkit-details-marker {
  display: none;
}

body.is-bot .faq-section,
body.is-bot .faq-item,
body.is-bot .faq-body {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* === FOCUS-VISIBLE COMPLEMENTAIRES (P2 Audit) ============================= */

/* Bouton langue */
.lang-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Boutons de fermeture des modales */
.modal-close-icon:focus-visible,
.fc-progress-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Liens flashcards */
.flash-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Boutons cookie */
.cookie-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* === SKIP LINK (Lien d'evitement - WCAG 2.4.1) ============================ */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 99999;
  padding: .6rem 1.2rem;
  background: var(--gold);
  color: #05080f;
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top .2s ease;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #05080f;
  outline-offset: 3px;
}

body.light-mode .skip-link {
  background: #1e3a8a;
  color: #ffffff;
}

body.light-mode .skip-link:focus {
  outline-color: #ffffff;
}



/* ==========================================================================
   NIVEAU 2 (11/10) : BASE DOCUMENTAIRE JURIDIQUE OPÉRATIONNELLE
   ========================================================================== */

/* ── BADGES DE TRAÇABILITÉ JURIDIQUE ── */
.slide-header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.2rem;
  align-items: center;
}

.legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.legal-badge.binding {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.legal-badge.cjue {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.legal-badge.edpb-final {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.legal-badge.edpb-draft {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.legal-badge.national-be {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.legal-badge.practical {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

body.light-mode .legal-badge.binding { background: rgba(37, 99, 235, 0.1); color: #1d4ed8; border-color: rgba(37, 99, 235, 0.3); }
body.light-mode .legal-badge.cjue { background: rgba(126, 34, 206, 0.1); color: #7e22ce; border-color: rgba(126, 34, 206, 0.3); }
body.light-mode .legal-badge.edpb-final { background: rgba(5, 150, 105, 0.1); color: #047857; border-color: rgba(5, 150, 105, 0.3); }
body.light-mode .legal-badge.edpb-draft { background: rgba(217, 119, 6, 0.1); color: #b45309; border-color: rgba(217, 119, 6, 0.35); }
body.light-mode .legal-badge.national-be { background: rgba(220, 38, 38, 0.1); color: #b91c1c; border-color: rgba(220, 38, 38, 0.3); }

/* ── DOUBLE VUE DE LECTURE (30s vs Pro) ── */
.reading-toggle-box {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.summary-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
}

.summary-header {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.summary-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text);
}

/* ── MINI-BLOC STANDARD EN BAS DE CHAQUE FICHE ── */
.slide-footer-minibloc {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  background: rgba(15, 23, 42, 0.4);
  border-radius: 10px;
  padding: 1.2rem;
}

body.light-mode .slide-footer-minibloc {
  background: rgba(241, 245, 249, 0.7);
}

.minibloc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.minibloc-item {
  font-size: 0.88rem;
  line-height: 1.55;
}

.minibloc-item strong {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}

.minibloc-item.takeaways strong { color: var(--blue); }
.minibloc-item.pitfall strong { color: #f87171; }
.minibloc-item.action strong { color: #34d399; }

.minibloc-item ul {
  padding-left: 1.2rem;
  margin: 0;
}

.minibloc-item p {
  margin: 0;
}

.minibloc-sources {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted-accessible);
  padding-top: 0.8rem;
  border-top: 1px dashed var(--border-subtle);
}

.minibloc-sources .review-date {
  color: #34d399;
  font-weight: 600;
}

/* ── BANDEAU DE STATISTIQUES & MÉTRIQUES DYNAMIQUES ── */
.legal-metrics-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 1.5rem auto 2rem auto;
  max-width: 1100px;
  padding: 0 1rem;
}

.metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.84rem;
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: border-color 0.2s, transform 0.2s;
}

.metric-pill:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.metric-pill strong {
  color: var(--gold);
  font-weight: 800;
}

/* ── SECTION ARBRES DE DÉCISION & MICRO-OUTILS ── */
.tools-section {
  padding: 4rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.ui-icon {
  display: inline-block;
  vertical-align: -0.15em;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  transition: stroke 0.2s ease, transform 0.2s ease;
}

.fc-part-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'Fira Code', monospace;
  background: rgba(245, 158, 11, 0.15);
  color: var(--gold);
  border: 1px solid rgba(245, 158, 11, 0.3);
  margin-right: 6px;
}

.tools-nav-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2rem;
}

.tool-tab-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.tool-tab-btn:hover {
  background: var(--bg3);
  border-color: var(--border-hover);
  color: var(--text);
}

.tool-tab-btn.active {
  background: var(--gold-muted);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
}

.tool-tab-btn.active .ui-icon {
  stroke: var(--gold);
}

body.light-mode .tool-tab-btn {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #475569;
}

body.light-mode .tool-tab-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

body.light-mode .tool-tab-btn.active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
}

body.light-mode .tool-tab-btn.active .ui-icon {
  stroke: #1d4ed8;
}

.tools-container-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-xl);
}

/* ── ARBRES DE DÉCISION INTERACTIFS ── */
.decision-tree-view {
  display: none;
}

.decision-tree-view.active {
  display: block;
}

.tree-question-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.8rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.tree-question-text {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 1.5rem;
}

.tree-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.tree-btn {
  min-height: 40px;
  padding: 0.55rem 1rem;
  border-radius: 7px;
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease, border-color 0.18s ease,
    background-color 0.18s ease, box-shadow 0.18s ease;
}

.tree-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.tree-btn.yes {
  background: rgba(16, 185, 129, 0.13);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.42);
}
.tree-btn.no {
  background: rgba(239, 68, 68, 0.13);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.42);
}
.tree-btn.reset {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
  box-shadow: none;
}

.tree-btn.reset:hover {
  background: var(--bg3);
  color: var(--text);
}

.tree-result-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(59, 130, 246, 0.08) 100%);
  border: 2px solid #10b981;
  border-radius: 10px;
  padding: 1.8rem;
  text-align: center;
}

.tree-result-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #34d399;
  margin-bottom: 0.8rem;
}

.tree-result-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 1.2rem;
}

/* ── MICRO-OUTILS RGPD ── */
.micro-tool-panel {
  display: none;
}

.micro-tool-panel.active {
  display: block;
}

.tool-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.tool-input-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--text);
}

.tool-input-group input,
.tool-input-group select,
.tool-input-group textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  box-sizing: border-box;
}

.tool-input-group textarea {
  min-height: 80px;
  font-family: inherit;
  resize: vertical;
}

.tool-output-report {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.2rem;
  margin-top: 1.5rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.86rem;
  line-height: 1.6;
  white-space: pre-wrap;
  color: #e2e8f0;
}

/* ── LEGAL CHANGELOG ── */
.changelog-section {
  padding: 4rem 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

.changelog-timeline {
  position: relative;
  padding-left: 2rem;
  border-left: 2px solid var(--border);
  margin-top: 2rem;
}

.changelog-item {
  position: relative;
  margin-bottom: 2.5rem;
}

.changelog-dot {
  position: absolute;
  left: -2.55rem;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--bg);
}

.changelog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.changelog-date {
  font-weight: 700;
  color: var(--gold);
  font-size: 0.95rem;
}

.changelog-version {
  font-size: 0.8rem;
  background: var(--bg3);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.changelog-badge-tag {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  font-weight: 600;
}

.changelog-body ul {
  padding-left: 1.2rem;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
}


/* ── ACCESSIBILITÉ & CONTRASTE STRICT WCAG AA/AAA (LIGHT & DARK MODES) ── */
.tree-question-badge {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 700;
  margin-bottom: 0.6rem;
}

body.light-mode .tree-question-badge {
  color: #1e3a8a; /* Contraste > 12:1 sur fond blanc */
}

body.light-mode .changelog-badge-tag {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8; /* Contraste > 7.5:1 sur fond clair */
  border: 1px solid rgba(29, 78, 216, 0.25);
  font-weight: 700;
}

body.light-mode .changelog-date {
  color: #1e3a8a;
  font-weight: 800;
}

body.light-mode .changelog-version {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
}

body.light-mode .tree-question-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

body.light-mode .tree-question-text {
  color: #0f172a; /* Contraste > 15:1 */
}

body.light-mode .tree-btn.reset {
  background: #f1f5f9;
  border: 1px solid #94a3b8;
  color: #0f172a; /* Contraste > 12:1 */
  font-weight: 700;
}

body.light-mode .tree-result-box {
  background: #f8fafc;
  border: 2px solid #059669;
}

body.light-mode .tree-result-title {
  color: #047857; /* Contraste > 5.5:1 */
}

body.light-mode .tree-result-desc {
  color: #0f172a;
}

body.light-mode .legal-badge.practical {
  background: rgba(51, 65, 85, 0.1);
  color: #1e293b;
  border-color: rgba(51, 65, 85, 0.3);
  font-weight: 700;
}

body.light-mode .tool-output-report {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}

body.light-mode .tool-input-group label,
body.light-mode .tool-form-grid label {
  color: #0f172a;
  font-weight: 600;
}

body.light-mode .tool-input-group input,
body.light-mode .tool-input-group select,
body.light-mode .tool-input-group textarea {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}

body.light-mode .minibloc-item.takeaways strong { color: #1d4ed8; }
body.light-mode .minibloc-item.pitfall strong { color: #b91c1c; }
body.light-mode .minibloc-item.action strong { color: #047857; }
body.light-mode .minibloc-sources .review-date { color: #047857; }
body.light-mode .metric-pill strong { color: #1e3a8a; }


/* ── MODAL HISTORIQUE DU CHANGELOG & BOUTON ── */
.changelog-history-btn {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid var(--gold);
  color: var(--gold);
  transition: all var(--t-phi-1) ease;
}

.changelog-history-btn:hover {
  background: var(--gold);
  color: #05080f;
  box-shadow: 0 0 16px var(--gold-glow);
  transform: translateY(-2px);
}

body.light-mode .changelog-history-btn {
  background: rgba(30, 58, 138, 0.08);
  border: 1px solid #1e3a8a;
  color: #1e3a8a;
  font-weight: 700;
}

body.light-mode .changelog-history-btn:hover {
  background: #1e3a8a;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);
}

.changelog-modal-tabs .tool-tab-btn {
  font-size: 0.88rem;
  padding: 8px 16px;
}

body.light-mode #changelog-modal {
  background: #ffffff;
  color: #0f172a;
}


/* ── ONGLETS DE SÉLECTION DE DECK & OUTILS FLASHCARD ── */
.fc-deck-tab {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: 'Fira Code', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.fc-deck-tab:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}

.fc-deck-tab.active {
  background: var(--gold-muted);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 700;
}

body.light-mode .fc-deck-tab {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

body.light-mode .fc-deck-tab.active {
  background: rgba(30, 58, 138, 0.1);
  border-color: #1e3a8a;
  color: #1e3a8a;
}

.fc-util-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--muted-accessible);
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.fc-util-btn:hover, .fc-util-btn.active {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(59, 130, 246, 0.1);
}

body.light-mode .fc-util-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #1e293b;
}

body.light-mode .fc-util-btn:hover, body.light-mode .fc-util-btn.active {
  border-color: #1d4ed8;
  color: #1d4ed8;
  background: rgba(29, 78, 216, 0.08);
}

.fc-kbd-hint {
  font-family: 'Fira Code', monospace;
  font-size: 0.72rem;
  color: var(--muted-accessible);
  background: var(--bg3);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px dashed var(--border);
  display: inline-flex;
  align-items: center;
}

body.light-mode .fc-kbd-hint {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}


/* ── 🤖 CHATBOT IA RGPD (NEMOTRON 3 ULTRA) ── */
.chatbot-container {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.chatbot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 10px;
}

.chatbot-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chatbot-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.chatbot-chips-wrapper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 8px 12px;
  background: var(--bg3);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.chat-chip {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.76rem;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}

.chatbot-messages {
  max-height: 420px;
  min-height: 250px;
  overflow-y: auto;
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 1rem;
  scroll-behavior: smooth;
}

.chat-msg {
  display: flex;
  gap: 10px;
  max-width: 88%;
}

.chat-msg.ai {
  align-self: flex-start;
}

.chat-msg.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-bubble-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.chat-msg.user .chat-bubble-avatar {
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
}

.chat-bubble-content {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-msg.user .chat-bubble-content {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--text);
}

.chat-bubble-content p {
  margin: 0 0 0.5rem 0;
}

.chat-bubble-content p:last-child {
  margin-bottom: 0;
}

.chat-bubble-content ul,
.chat-bubble-content ol {
  margin: 0.4rem 0 0.4rem 1.2rem;
  padding: 0;
}

.chat-bubble-content li {
  margin-bottom: 0.3rem;
}

.chat-bubble-content .lexi-heading {
  margin: 0.75rem 0 0.35rem;
  color: inherit;
  font-size: 0.98rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.chat-bubble-content .lexi-heading:first-child {
  margin-top: 0;
}

.chat-bubble-content h4.lexi-heading {
  font-size: 0.92rem;
}

.chat-bubble-content code {
  padding: 0.08em 0.3em;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.18);
  font-size: 0.88em;
  white-space: normal;
  overflow-wrap: anywhere;
}

.chat-bubble-content .lexi-structured-list {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.chat-bubble-content .lexi-structured-list > li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.chat-bubble-content .lexi-structured-list > li:last-child {
  border-bottom: 0;
}

.chatbot-input-form {
  display: flex;
  gap: 10px;
}

.chatbot-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.2s;
}

.chatbot-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 8px var(--gold-glow);
}

.chat-typing-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin: 0 2px;
  animation: chatDotPulse 1.4s infinite ease-in-out both;
}

.chat-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.chat-typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes chatDotPulse {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

body.light-mode .chatbot-container {
  background: #ffffff;
}

body.light-mode .chatbot-messages {
  background: #f8fafc;
}

body.light-mode .chat-bubble-content {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
}

body.light-mode .chat-msg.user .chat-bubble-content {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e3a8a;
}



/* Animations de lévitation et de respiration */
@keyframes mascotFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-9px) rotate(-1.5deg);
  }
  50% {
    transform: translateY(-16px) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) rotate(1.5deg);
  }
}

@keyframes mascotSway {
  0% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1.025, 0.985) rotate(1deg);
  }
}

@keyframes mascotShadowScale {
  0%, 100% {
    transform: scale(1);
    opacity: 0.65;
  }
  50% {
    transform: scale(0.65);
    opacity: 0.25;
  }
}

@keyframes ctaPop {
  0% { transform: scale(0.75); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes speechPop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes tabSlideIn {
  0% { transform: translateX(50px); }
  100% { transform: translateX(0); }
}

@keyframes drawerPop {
  0% {
    transform: translateX(-50%) scale(0.92) translateY(-8px);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) scale(1) translateY(0);
    opacity: 1;
  }
}

body.light-mode .mascot-avatar-circle {
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 18px rgba(30, 58, 138, 0.4)) drop-shadow(0 0 8px rgba(37, 99, 235, 0.3));
}

body.light-mode .mascot-avatar-circle:hover {
  filter: drop-shadow(0 14px 24px rgba(30, 58, 138, 0.5)) drop-shadow(0 0 16px #2563eb);
}

body.light-mode .mascot-shadow-spot {
  background: radial-gradient(ellipse at center, rgba(30, 58, 138, 0.35) 0%, rgba(30, 58, 138, 0) 75%);
}

body.light-mode .mascot-speech-bubble {
  background: #ffffff;
  border-color: #1e3a8a;
  color: #0f172a;
}

body.light-mode .mascot-speech-bubble::after {
  background: #ffffff;
  border-color: #1e3a8a;
}

body.light-mode .mascot-docked-tab {
  background: linear-gradient(135deg, #ffffff, #f1f5f9) !important;
  border-color: #d97706 !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .24), 0 2px 7px rgba(15, 23, 42, .18), 0 0 0 1px rgba(217, 119, 6, .08) !important;
}

body.light-mode .mascot-docked-tab:hover {
  transform: translateX(-50%) translateY(-2px) scale(1.03);
  box-shadow: 0 13px 30px rgba(15, 23, 42, .3), 0 4px 10px rgba(15, 23, 42, .2), 0 0 16px rgba(217, 119, 6, .24) !important;
}

body.light-mode .mascot-docked-tab .dock-text {
  color: #0f172a !important;
}

body.light-mode .mascot-chat-drawer {
  background: #ffffff;
  border-color: #cbd5e1;
}

body.light-mode .mascot-drawer-header, body.light-mode .mascot-drawer-footer {
  background: #f8fafc;
}












/* ── ⚖️ DESIGN SYSTEM MASCOTTE LEXI (HERO, BULLE, CONTRÔLES & CHAT) ── */
.hero-mascot-widget,
.mascot-widget {
  position: fixed;
  top: 75px;
  left: calc(50% + clamp(30px, 4vw, 60px));
  transform: translateX(-50%);
  bottom: auto !important;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  pointer-events: auto;
}

.mascot-widget.folded {
  transform: translateX(-50%) translateY(-90px) scale(0.5);
  opacity: 0;
  pointer-events: none;
}

/* Bulle de dialogue supérieure (Grande bulle blanche avec bordure bleue) */
.mascot-speech-bubble {
  position: relative;
  background: #ffffff !important;
  border: 1.5px solid #0066ff !important;
  color: #0f172a !important;
  padding: 8px 32px 8px 18px;
  border-radius: 24px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 12px;
  max-width: 340px;
  text-align: center;
  cursor: pointer;
  display: block;
  z-index: 99999;
}

.mascot-speech-bubble span {
  color: #0f172a !important;
}

.mascot-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  background: #ffffff !important;
  border-right: 1.5px solid #0066ff !important;
  border-bottom: 1.5px solid #0066ff !important;
  transform: rotate(45deg);
}

.mascot-speech-x {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  transition: color 0.2s ease;
}

.mascot-speech-x:hover {
  color: #0066ff;
}

/* Body wrapper et Avatar Lexi */
.mascot-body-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  margin: 0 auto;
}

/* Zone d'activation hover élargie pour éliminer tout risque de flicker */
.mascot-body-wrapper::before {
  content: '';
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: -160px;
  right: -160px;
  pointer-events: none;
  z-index: 20;
}

.mascot-body-wrapper:hover::before,
.mascot-body-wrapper:focus-within::before {
  pointer-events: auto;
}

.mascot-avatar-circle {
  --lexi-tilt-x: 0deg;
  --lexi-tilt-y: 0deg;
  --lexi-shift-x: 0px;
  --lexi-shift-y: 0px;
  width: 86px;
  height: 86px;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 21;
  animation: mascotFloat 3.8s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 12px rgba(245, 158, 11, 0.35));
}

.mascot-avatar-circle:hover {
  transform: scale(1.12) rotate(3deg) translateY(-4px);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 20px var(--gold));
}

.mascot-avatar-circle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 50%;
}

.mascot-img {
  pointer-events: none;
  position: relative;
  z-index: 2;
  width: 86px;
  height: 86px;
  object-fit: contain;
  display: block;
  transition: opacity .22s ease;
}

.mascot-inline-svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 86px;
  height: 86px;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .12s linear;
}

.mascot-avatar-circle.lexi-inline-svg-ready .mascot-img {
  opacity: 0;
}

.mascot-avatar-circle.lexi-inline-svg-ready .mascot-inline-svg {
  opacity: 1;
}

.lexi-three-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 134px;
  height: 134px;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity .5s ease;
}

.lexi-three-canvas--foreground {
  z-index: 3;
  mix-blend-mode: screen;
}

.mascot-avatar-circle.lexi-three-active .lexi-three-canvas {
  opacity: .92;
}

.mascot-avatar-circle.lexi-three-active :is(.mascot-img, .mascot-inline-svg) {
  transform: perspective(360px)
    translate3d(var(--lexi-shift-x), var(--lexi-shift-y), 7px)
    rotateX(var(--lexi-tilt-x)) rotateY(var(--lexi-tilt-y)) scale(1.012);
  transform-style: preserve-3d;
  transition: transform .12s linear;
  filter: saturate(1.035) contrast(1.015);
}

body.light-mode .mascot-avatar-circle.lexi-three-active .lexi-three-canvas {
  opacity: .72;
}

body.light-mode .mascot-avatar-circle.lexi-three-active .lexi-three-canvas--foreground {
  opacity: .56;
  mix-blend-mode: multiply;
}

/* Indice conversationnel : petite bulle BD pointant vers la bouche de Lexi. */
.mascot-talk-cue {
  position: absolute;
  top: 18px;
  left: 77px;
  z-index: 60;
  width: 38px;
  height: 27px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1.5px solid #2563eb;
  border-radius: 55% 50% 54% 48%;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .22), 0 0 12px rgba(37, 99, 235, .18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: left bottom;
  transform: translate(-8px, 7px) rotate(-7deg) scale(.55);
  overflow: hidden;
  transition: width .32s cubic-bezier(.22, 1, .36, 1), height .32s cubic-bezier(.22, 1, .36, 1),
    border-radius .28s ease, opacity .18s ease, visibility .18s ease,
    transform .32s cubic-bezier(.2, 1.45, .35, 1);
}

.mascot-talk-cue::before {
  content: '';
  position: absolute;
  left: -5px;
  bottom: 3px;
  width: 10px;
  height: 10px;
  border-left: 1.5px solid #2563eb;
  border-bottom: 1.5px solid #2563eb;
  background: #fff;
  transform: skew(-16deg) rotate(24deg);
}

.mascot-talk-cue-lines {
  width: 18px;
  flex: 0 0 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.mascot-talk-cue-line {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #d97706);
  transform-origin: left center;
}

.mascot-talk-cue-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  color: #0f172a;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .015em;
  line-height: 1.08;
  text-align: left;
  white-space: normal;
  transform: translateX(-5px);
  transition: max-width .32s cubic-bezier(.22, 1, .36, 1), opacity .18s ease,
    transform .3s cubic-bezier(.22, 1, .36, 1);
}

.mascot-talk-cue-line:nth-child(2) {
  width: 14px;
  animation-delay: .08s;
}

.mascot-talk-cue-line:nth-child(3) {
  width: 10px;
  animation-delay: .16s;
}

.mascot-body-wrapper:hover .mascot-talk-cue,
.mascot-body-wrapper:focus-within .mascot-talk-cue,
.mascot-avatar-circle:focus-visible .mascot-talk-cue {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, 0) rotate(-3deg) scale(1);
}

.mascot-talk-cue:hover {
  width: 122px;
  height: 43px;
  border-radius: 15px 17px 16px 14px;
  justify-content: flex-start;
  transform: translate(0, -2px) rotate(-1deg) scale(1.02) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .27), 0 0 16px rgba(37, 99, 235, .24);
}

.mascot-talk-cue:hover .mascot-talk-cue-label {
  max-width: 70px;
  opacity: 1;
  transform: translateX(0);
}

.mascot-body-wrapper:hover .mascot-talk-cue-line,
.mascot-body-wrapper:focus-within .mascot-talk-cue-line,
.mascot-avatar-circle:focus-visible .mascot-talk-cue-line {
  animation: mascotTalkLine 1.15s ease-in-out infinite;
}

@keyframes mascotTalkLine {
  0%, 100% { opacity: .55; transform: scaleX(.72); }
  45% { opacity: 1; transform: scaleX(1); }
}

body:not(.light-mode) .mascot-talk-cue {
  background: rgba(10, 18, 33, .96);
  border-color: #60a5fa;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .42), 0 0 14px rgba(96, 165, 250, .22);
}

body:not(.light-mode) .mascot-talk-cue::before {
  background: #0a1221;
  border-color: #60a5fa;
}

body:not(.light-mode) .mascot-talk-cue-label {
  color: #f8fafc;
}

.mascot-shadow-spot {
  width: 46px;
  height: 8px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 75%);
  border-radius: 50%;
  margin-top: -5px;
  pointer-events: none;
  animation: mascotShadowScale 3.8s ease-in-out infinite;
}

.mascot-status-dot {
  position: absolute;
  z-index: 3;
  bottom: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #05080f;
  box-shadow: 0 0 6px #10b981;
}

/* ── CONTRÔLES SYMÉTRIQUES OUTWARD (REVEAL SUR HOVER & FOCUS-WITHIN) ── */
.mascot-control {
  position: absolute;
  top: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 40;
  white-space: nowrap;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s;
}

/* Côté Gauche : [Ranger Lexi] [Bouton ↑] */
.mascot-control-hide {
  right: calc(100% + 12px);
  transform: translateX(10px) scale(0.95);
}

/* Même colonne à gauche : thème juste au-dessus de Ranger Lexi. */
.mascot-control-theme {
  top: -4px;
  right: calc(100% + 12px);
  left: auto;
  flex-direction: row-reverse;
  transform: translateX(10px) scale(0.95);
}

/* Déclenchement Hover & Focus-within sur Desktop */
.mascot-body-wrapper:hover .mascot-control,
.mascot-body-wrapper:focus-within .mascot-control,
.mascot-control:hover,
.mascot-control:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mascot-body-wrapper:hover .mascot-control-hide,
.mascot-body-wrapper:focus-within .mascot-control-hide,
.mascot-control-hide:hover,
.mascot-control-hide:focus-within {
  transform: translateX(0) scale(1);
}

.mascot-body-wrapper:hover .mascot-control-theme,
.mascot-body-wrapper:focus-within .mascot-control-theme,
.mascot-control-theme:hover,
.mascot-control-theme:focus-within {
  transform: translateX(0) scale(1);
}

/* Boutons d'action compacts avec hit area confortable */
.mascot-hide-btn,
.mascot-theme-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  position: relative;
  outline: none;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease,
              color 0.2s ease;
}

.mascot-hide-btn:focus-visible,
.mascot-theme-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Style Mode Sombre par défaut */
.mascot-hide-btn {
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  color: var(--gold) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 8px rgba(245, 158, 11, 0.15);
  backdrop-filter: blur(6px);
}

.mascot-hide-btn:hover {
  transform: scale(1.15);
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: var(--gold) !important;
  color: #fbbf24 !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}

/* Lampe en Mode Sombre : ÉTEINTE (Hollow outline turquoise cyan) */
.mascot-theme-btn {
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1.5px solid rgba(34, 211, 238, 0.45) !important;
  color: #67e8f9 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 8px rgba(34, 211, 238, 0.15);
  backdrop-filter: blur(6px);
}

.mascot-theme-btn .mascot-bulb-svg,
.mascot-theme-btn .mascot-bulb-svg path {
  fill: none !important;
  stroke: #67e8f9 !important;
  filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.45));
  transition: filter 0.2s ease, stroke 0.2s ease, fill 0.2s ease;
}

.mascot-theme-btn:hover {
  transform: scale(1.15);
  background: rgba(34, 211, 238, 0.2) !important;
  border-color: #22d3ee !important;
  color: #a5f3fc !important;
  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.35);
}

/* Style Mode Clair (body.light-mode) */
body.light-mode .mascot-hide-btn {
  background: #ffffff !important;
  border: 1.5px solid #f59e0b !important;
  color: #d97706 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 8px rgba(245, 158, 11, 0.2);
}

body.light-mode .mascot-hide-btn:hover {
  background: #fffbeb !important;
  border-color: #d97706 !important;
  color: #b45309 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

/* Lampe en Mode Clair : ALLUMÉE (Warm yellow fill) */
body.light-mode .mascot-theme-btn {
  background: #ffffff !important;
  border: 1.5px solid #f59e0b !important;
  color: #d97706 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 8px rgba(245, 158, 11, 0.2);
}

body.light-mode .mascot-theme-btn .mascot-bulb-svg,
body.light-mode .mascot-theme-btn .mascot-bulb-svg path {
  fill: #f59e0b !important;
  stroke: #d97706 !important;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.45));
}

body.light-mode .mascot-theme-btn:hover {
  background: #fffbeb !important;
  border-color: #d97706 !important;
  color: #b45309 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

.mascot-hide-btn .ctrl-icon,
.mascot-theme-btn .ctrl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ── TOOLTIPS / LÉGENDES COMPACTES (.mascot-control-label) ── */
.mascot-control-label {
  font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.01em;
  background: rgba(10, 15, 29, 0.92);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

body.light-mode .mascot-control-label {
  background: rgba(255, 255, 255, 0.96);
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Révélation de la légende UNIQUEMENT au survol ou focus de son propre bouton */
.mascot-control:has(button:hover) .mascot-control-label,
.mascot-control:has(button:focus-visible) .mascot-control-label,
.mascot-control:has(button:focus) .mascot-control-label,
.mascot-control:focus-within .mascot-control-label,
.mascot-theme-btn:hover + .mascot-control-label,
.mascot-theme-btn:focus-visible + .mascot-control-label,
.mascot-theme-btn:focus + .mascot-control-label {
  opacity: 1;
  visibility: visible;
}

/* ── FALLBACK TOUCH & MOBILE (@media hover: none) ── */
@media (hover: none), (pointer: coarse) {
  .mascot-control {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    top: 34px !important;
  }
  .mascot-control-hide {
    right: calc(100% + 6px);
    transform: none !important;
  }
  .mascot-control-theme {
    top: -4px !important;
    right: calc(100% + 6px);
    left: auto;
    transform: none !important;
  }
  .mascot-control-label {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-control,
  .mascot-hide-btn,
  .mascot-theme-btn,
  .mascot-avatar-circle {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ── NOUVELLE BULLE CTA INCLINÉE EXACTE (POINTANT SUR LEXI À DROITE) ── */
.mascot-cta-bubble {
  position: absolute;
  left: 132px;
  bottom: 30px;
  background: #ffffff !important;
  border: 1.5px solid #0066ff !important;
  border-radius: 20px;
  padding: 6px 14px 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  white-space: nowrap;
  z-index: 30;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease,
    opacity .18s ease, visibility .18s ease;
  animation: ctaPop 0.4s ease-out;
}

.mascot-cta-bubble:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.25), 0 0 12px rgba(0, 102, 255, 0.3);
}

/* Petite flèche / pointeur vers Lexi (à gauche de la bulle CTA) */
.mascot-cta-bubble::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #ffffff !important;
  border-left: 1.5px solid #0066ff !important;
  border-bottom: 1.5px solid #0066ff !important;
}

.mascot-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mascot-cta-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.25;
}

.mascot-cta-text .cta-main-title {
  color: #0066ff !important;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mascot-cta-text .cta-sub-title {
  color: #475569 !important;
  font-size: 0.72rem;
  font-weight: 500;
}

/* ── LANGUETTE DE RAPPEL DISCRÈTE ET ÉLÉGANTE QUAND RANGÉE ── */
.mascot-docked-tab {
  position: fixed;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  bottom: auto !important;
  right: auto !important;
  width: auto !important;
  max-width: max-content !important;
  height: auto !important;
  min-height: unset !important;
  max-height: 44px !important;
  z-index: 99999;
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
  border: 1.5px solid var(--gold);
  border-radius: 9999px;
  color: var(--text) !important;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 14px 5px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  box-shadow: 0 9px 24px rgba(0, 0, 0, .48), 0 3px 8px rgba(0, 0, 0, .3), 0 0 13px rgba(245, 158, 11, .2);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, border-color .2s ease, background .2s ease;
  line-height: 1;
  white-space: nowrap;
}

.mascot-docked-tab:hover {
  border-color: var(--gold);
  transform: translateX(-50%) translateY(-2px) scale(1.03);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .56), 0 5px 12px rgba(0, 0, 0, .34), 0 0 18px rgba(245, 158, 11, .34);
}

.mascot-body-wrapper:has(.mascot-talk-cue:hover) .mascot-cta-bubble {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(8px) scale(.96);
}

.mascot-docked-tab:active {
  transform: translateX(-50%) translateY(0) scale(.98);
}

.mascot-docked-tab .dock-avatar {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
}

.mascot-docked-tab .dock-text {
  color: var(--text) !important;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ── TIROIR QUICK-CHAT FLOTTANT (CENTRÉ SOUS LEXI) ── */
.mascot-chat-drawer {
  position: fixed;
  top: 185px;
  left: calc(50% + clamp(30px, 4vw, 60px));
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  transform-origin: top center;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 210px);
  height: 480px;
  background: var(--bg2);
  border: 1.5px solid var(--gold);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(245, 158, 11, 0.25);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: drawerPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mascot-chat-drawer::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  background: var(--bg3);
  border-left: 1.5px solid var(--gold);
  border-top: 1.5px solid var(--gold);
  transform: rotate(45deg);
  z-index: 10;
}

.mascot-drawer-header {
  padding: 12px 16px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 12;
}

.mascot-drawer-title-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mascot-drawer-mini-avatar img {
  border-radius: 50%;
}

.drawer-ctrl-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.drawer-ctrl-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.mascot-drawer-body {
  flex: 1;
  padding: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mascot-quick-chips {
  padding: 6px 12px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  background: var(--bg3);
  border-top: 1px solid var(--border);
  scrollbar-width: none;
}

.mascot-quick-chips::-webkit-scrollbar {
  display: none;
}

.m-chip {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}

.m-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.mascot-drawer-footer {
  padding: 10px 12px;
  background: var(--bg3);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}

.mascot-drawer-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
}

.mascot-drawer-input:focus {
  border-color: var(--gold);
}

/* ── RESPONSIVE MOBILE : FIX HAUTEUR ET POSITIONNEMENT ── */
@media (max-width: 768px) {
  .hero-mascot-widget,
  .mascot-widget {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .mascot-chat-drawer {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .mascot-widget {
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
    bottom: auto !important;
    height: auto !important;
  }
  
  .mascot-speech-bubble {
    font-size: 0.82rem;
    max-width: 270px;
    padding: 6px 26px 6px 14px;
    margin-bottom: 8px;
  }
  
  .mascot-cta-bubble {
    left: 106px;
    bottom: 22px;
    padding: 4px 10px 4px 8px;
    transform: scale(0.74);
    transform-origin: left center;
  }
  
  .mascot-docked-tab {
    top: 68px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: max-content !important;
    transform: translateX(-50%) !important;
    height: auto !important;
    min-height: unset !important;
    max-height: 42px !important;
    font-size: 0.76rem;
    padding: 5px 12px 5px 6px;
    white-space: nowrap;
  }

  .mascot-docked-tab .dock-avatar {
    width: 30px;
    height: 30px;
  }
  
  .mascot-chat-drawer {
    top: 140px;
    bottom: auto;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 150px);
    height: 440px;
  }
}

@media (max-width: 480px) {
  .mascot-speech-bubble {
    font-size: 0.78rem;
    max-width: 240px;
  }
  .mascot-cta-bubble {
    left: 78px;
    transform: scale(0.82);
  }
}


/* ── ♿ ACCESSIBILITÉ & POLISH VISUEL GLOBAL (A11Y & FOCUS) ── */
:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
}

body.light-mode :focus-visible {
  outline: 2px solid var(--blue) !important;
}

/* Modales adaptatives sur smartphones récents (100dvh) */
.cookie-modal,
.modal-content,
.fc-card-container {
  max-height: calc(100dvh - 32px);
}

/* Prise en compte stricte des préférences utilisateur de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mascot-avatar-circle,
  .mascot-shadow-spot {
    animation: none !important;
  }
  .lexi-three-canvas {
    display: none !important;
  }
}


/* ── LECTEUR DE DOCUMENTS / SLIDER RGPD (PAPIER CLAIR, ADOUCI EN MODE SOMBRE) ── */
.slides-viewport {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff !important;
  color: #0f172a !important;
  scroll-behavior: smooth;
  padding: 2rem;
  border-radius: 0 0 12px 12px;
}

body.dark-mode .slides-viewport,
body:not(.light-mode) .slides-viewport {
  background: #e8edf2 !important;
  color: #0f172a !important;
}

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

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

/* Titres des Slides (Toujours sombre sur fond blanc) */
.slide-wrapper h1,
.slide-wrapper h2 {
  color: #0f172a !important;
  font-weight: 700;
  border-bottom: 2px solid #d97706 !important;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.slide-wrapper h3 {
  color: #b45309 !important;
  font-weight: 700;
  margin: 1.5rem 0 1rem;
}

.slide-wrapper p {
  color: #1e293b !important;
  margin-bottom: 1rem;
  line-height: 1.8;
}

.slide-wrapper strong {
  color: #0f172a !important;
}

.slide-wrapper ul,
.slide-wrapper ol {
  color: #1e293b !important;
  margin: 1rem 0 1.5rem 2rem;
}

.slide-wrapper li {
  color: #1e293b !important;
  margin-bottom: 0.5rem;
}

/* ── Encadré Synthèse 30s (Contraste élevé sur fond blanc) ── */
.summary-card {
  background: #fefce8 !important;
  border: 1px solid #fde047 !important;
  border-left: 5px solid #d97706 !important;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
}

.summary-header {
  font-size: 0.85rem;
  font-weight: 800;
  color: #b45309 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.summary-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #1e293b !important;
}

.summary-card strong {
  color: #0f172a !important;
}

/* ── Mini-bloc en bas de fiche (Contraste élevé sur fond blanc) ── */
.slide-footer-minibloc {
  margin-top: 2rem;
  padding: 1.2rem;
  border: 1px solid #e2e8f0 !important;
  border-top: 2px solid #cbd5e1 !important;
  background: #f8fafc !important;
  border-radius: 10px;
}

body:not(.light-mode) .slide-footer-minibloc,
body.dark-mode .slide-footer-minibloc {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.minibloc-item {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #334155 !important;
}

.minibloc-item strong {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}

.minibloc-item.takeaways strong { color: #075985 !important; }
.minibloc-item.pitfall strong { color: #dc2626 !important; }
.minibloc-item.action strong { color: #047857 !important; }

.minibloc-item ul {
  padding-left: 1.2rem;
  margin: 0;
  color: #334155 !important;
}

.minibloc-item li {
  color: #334155 !important;
}

.minibloc-item p {
  margin: 0;
  color: #334155 !important;
}

.minibloc-sources {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: #64748b !important;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid #e2e8f0 !important;
}

/* ── Callouts, Encadrés et Tableaux ── */
.callout {
  background: #f8fafc !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #d97706 !important;
  padding: 1.25rem;
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
}

.callout.green {
  border-left-color: #059669 !important;
  background: #f0fdf4 !important;
}

.exercice {
  background: #fffbeb !important;
  color: #1e293b !important;
  border: 1px solid #fde68a !important;
  border-left: 4px solid #f59e0b !important;
  padding: 1.25rem;
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
}

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

.article-cite {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px dashed #cbd5e1 !important;
  padding: 1rem;
  font-style: italic;
  margin: 1rem 0;
  border-radius: 8px;
}

/* Tableaux à l'intérieur des slides */
.slides-viewport table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  color: #0f172a !important;
}

.slides-viewport th,
table.data-table th {
  background: #d97706 !important;
  color: #111827 !important;
  font-weight: 700;
  padding: 0.75rem;
  text-align: left;
}

.slides-viewport td {
  padding: 0.75rem;
  color: #1e293b !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.slides-viewport tr:hover td {
  background: #fef3c7 !important;
}



/* ── HOTFIX FLASHCARDS CTA FOOTER POSITIONING & STACKING ── */
#flashcards,
.flashcards-section-centered {
  position: relative;
  z-index: 1000 !important;
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 3rem 0;
  overflow: visible !important;
  content-visibility: visible !important;
  contain: none !important;
}

.flash-wrapper {
  position: relative;
  z-index: 1000 !important;
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: center;
  overflow: visible !important;
}

.flash-menu {
  z-index: 99999 !important;
}

.flash-menu.up-center {
  bottom: calc(100% + 14px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px);
}

.flash-menu.up-center.active {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}



/* ── V3.0.6 : STRUCTURE DES SLIDES TRANSLATABLE (ACCESSIBLE AU DOM SANS DISPLAY:NONE) ── */
.slide-wrapper {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  max-width: 900px;
  animation: none !important;
}

.slide-wrapper.active {
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  animation: fadeInReader 0.4s ease-out !important;
}



/* ── GOOGLE TRANSLATE HEADLESS RESETS (Anti-Layout Shift) ── */
#google_translate_element,
.goog-te-banner-frame,
.skiptranslate.goog-te-gadget {
  display: none !important;
  visibility: hidden !important;
}
body {
  top: 0 !important;
  position: static !important;
}
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
  display: none !important;
}


/* ── NOUVELLE EXPÉRIENCE OUTILS RGPD (V3.2 TASK-ORIENTED HUB) ── */
.tools-hub-view {
  margin-top: 1rem;
}

.tools-hub-header {
  text-align: center;
  margin-bottom: 2rem;
}

.tools-hub-prompt {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.tools-hub-subtext {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 700px;
  margin: 0 auto;
}

.tools-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tool-task-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.3rem 1.35rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  text-align: left;
}

.tool-task-card:hover, .tool-task-card:focus {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 7px 18px rgba(245, 158, 11, 0.1);
  outline: none;
}

.task-card-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: 0.7rem;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg3);
}

.task-card-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'Fira Code', monospace;
  background: rgba(245, 158, 11, 0.12);
  color: var(--gold);
  border: 1px solid rgba(245, 158, 11, 0.25);
  margin-bottom: 0.65rem;
}

.task-card-title {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 0.6rem 0;
}

.task-card-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 1rem 0;
  flex-grow: 1;
}

.task-card-cta {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}

.tool-task-card:hover .task-card-cta {
  gap: 10px;
}

.tools-secondary-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 1rem;
}

.tool-secondary-pill {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  min-height: 40px;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.tool-secondary-pill:hover {
  background: var(--bg2);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
}

/* ── NAVIGATION DE LA VUE ACTIVE ── */
.tools-active-view {
  margin-top: 1rem;
}

.tool-view-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 1.25rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.tool-back-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  min-height: 38px;
  padding: 0.45rem 0.75rem;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.tool-back-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--bg3);
  transform: translateX(-1px);
}

.tool-switcher-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tool-switcher-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  min-height: 36px;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tool-switcher-btn:hover {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--blue);
  transform: translateY(-1px);
}

.tool-switcher-btn.active {
  background: var(--gold-muted);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.08);
}

.tool-task-card:focus-visible,
.tool-secondary-pill:focus-visible,
.tool-back-btn:focus-visible,
.tool-switcher-btn:focus-visible,
.tree-btn:focus-visible,
.tools-container-box .tool-primary-action:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.tools-container-box .tool-primary-action {
  width: auto;
  min-height: 40px;
  height: auto;
  padding: 0.55rem 0.95rem;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.tools-container-box .tool-primary-action:hover {
  box-shadow: 0 5px 12px rgba(245, 158, 11, 0.16);
}

/* ── CARTE DE RÉSULTAT DIAGNOSTIQUE UNIFIÉE ── */
.diagnostic-result-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(59, 130, 246, 0.04) 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 1.8rem;
  text-align: left;
  animation: fadeInResult 0.3s ease-out;
}

@keyframes fadeInResult {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.diagnostic-result-header {
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border-subtle);
}

.diagnostic-result-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gold);
  margin: 0.5rem 0 0 0;
  line-height: 1.35;
}

.diagnostic-result-section {
  background: var(--bg2);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}

.diagnostic-section-heading {
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.diagnostic-explanation {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

.diagnostic-actions-list {
  margin: 0;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
}

.diagnostic-actions-list li {
  margin-bottom: 0.4rem;
}

.diagnostic-result-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.diagnostic-source-info {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.diagnostic-source-info strong {
  color: var(--text);
}

.diagnostic-result-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.diagnostic-fiche-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.diagnostic-fiche-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--bg2);
}

.diagnostic-restart-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diagnostic-restart-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Mode clair */
body.light-mode .tool-task-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

body.light-mode .tool-task-card:hover {
  border-color: #d97706;
  box-shadow: 0 7px 18px rgba(217, 119, 6, 0.1);
}

body.light-mode .task-card-icon {
  background: #f8fafc;
  border-color: #dbe3ee;
}

body.light-mode .task-card-title {
  color: #0f172a;
}

body.light-mode .task-card-desc {
  color: #475569;
}

body.light-mode .tool-secondary-pill {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
}

body.light-mode .tool-secondary-pill:hover {
  background: #ffffff;
  border-color: #d97706;
  color: #b45309;
}

body.light-mode .tree-btn.yes {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
}

body.light-mode .tree-btn.no {
  background: #fff1f2;
  border-color: #fda4af;
  color: #b91c1c;
}

body.light-mode .tree-btn.reset {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
}

@media (max-width: 768px) {
  .tool-secondary-pill,
  .tool-back-btn,
  .tool-switcher-btn,
  .tree-btn,
  .tools-container-box .tool-primary-action {
    min-height: 44px;
  }

  .tool-switcher-nav {
    gap: 7px;
  }
}

body.light-mode .diagnostic-result-card {
  background: #fffbeb;
  border-color: #f59e0b;
}

body.light-mode .diagnostic-result-section {
  background: #ffffff;
  border-color: #fde68a;
  border-left-color: #d97706;
}

body.light-mode .diagnostic-result-title {
  color: #b45309;
}

body.light-mode .diagnostic-section-heading {
  color: #b45309;
}

body.light-mode .diagnostic-explanation,
body.light-mode .diagnostic-actions-list {
  color: #1e293b;
}

/* Styles Grille & Éléments de Checklist WP248 */
.wp248-checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-bottom: 1.4rem;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .wp248-checklist-grid {
    grid-template-columns: 1fr !important;
  }
  .wp248-checklist-item {
    padding: 0.65rem 0.75rem;
  }
}

.wp248-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.75rem 0.9rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.wp248-checklist-item:hover {
  border-color: var(--gold);
  background: var(--bg3);
}

.wp248-checklist-item:has(.wp248-cb:checked) {
  border-color: var(--gold);
  background: rgba(245, 158, 11, 0.08);
  box-shadow: 0 0 0 1px var(--gold);
}

body.light-mode .wp248-checklist-item {
  background: #ffffff;
  border-color: #e2e8f0;
}

body.light-mode .wp248-checklist-item:hover {
  border-color: #d97706;
  background: #f8fafc;
}

body.light-mode .wp248-checklist-item:has(.wp248-cb:checked) {
  border-color: #d97706;
  background: #fffbeb;
  box-shadow: 0 0 0 1px #d97706;
}

@media (max-width: 768px) {
  .wp248-checklist-grid {
    grid-template-columns: 1fr;
  }
}

/* ── MASCOTTE : MASQUAGE DES BULLES AU DÉFILEMENT (PRESERVE AVATAR & CONTRÔLES) ── */
.mascot-widget.page-scrolled .mascot-speech-bubble,
.mascot-widget.page-scrolled .mascot-cta-bubble {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* ── HERO DESTINATIONS NAVIGATION GRID ── */
.hero-destinations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 1100px;
  margin: 2.2rem auto 0.8rem auto;
  position: relative;
  z-index: 10;
}

.hero-dest-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.hero-dest-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.hero-dest-card:hover,
.hero-dest-card:focus-visible {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 15px rgba(245, 158, 11, 0.15);
}

.hero-dest-card:hover::before,
.hero-dest-card:focus-visible::before {
  opacity: 1;
}

.hero-dest-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.hero-dest-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  flex: 1;
  min-width: 0;
}

.hero-dest-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-dest-card:hover .hero-dest-title {
  color: var(--gold);
}

.hero-dest-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.hero-dest-arrow {
  color: var(--gold);
  font-size: 1.1rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.hero-dest-card:hover .hero-dest-arrow,
.hero-dest-card:focus-visible .hero-dest-arrow {
  transform: translateX(4px);
}

.hero-trust-line {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0.8rem auto 1.5rem auto;
  opacity: 0.85;
}

@media (max-width: 1024px) {
  .hero-destinations-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
  }
}

@media (max-width: 600px) {
  .hero-destinations-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    gap: 10px;
  }
  .hero-dest-card {
    padding: 10px 14px;
  }
}

/* ── LIENS SOURCES OFFICIELLES DANS VEILLE JURIDIQUE ── */
.changelog-footer-source {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.82rem;
}

.changelog-source-link {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.2s;
}

.changelog-source-link:hover,
.changelog-source-link:focus-visible {
  text-decoration: underline;
  opacity: 0.9;
}

.changelog-internal-link {
  color: var(--cyan, #06b6d4);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.2s;
}

.changelog-internal-link:hover,
.changelog-internal-link:focus-visible {
  text-decoration: underline;
  opacity: 0.9;
}

body.light-mode .changelog-internal-link {
  color: #0e7490;
}

#flash-menu-footer.down-center {
  top: calc(100% + 14px) !important;
  bottom: auto !important;
}

#flash-menu-footer.down-center.active {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#flash-trigger-footer:hover {
  transform: none;
}

/* ── V3.2.9 — Cartes documentaires liées (Articles / Droits) ──────────────
   Lien sémantique <a> enveloppant toute la carte. Affordances sobres :
   bordure dorée + flèche qui glisse (150ms), focus clavier visible. */
a.doc-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  position: relative;
}

.articles-grid > a.doc-card-link .art-card,
.droits-grid > a.doc-card-link .droit-card {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
}

/* La carte hérite visuellement de .art-card / .droit-card ; le lien ajoute
   uniquement le focus visible et l'affordance CTA. */
a.doc-card-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.doc-card-cta {
  display: block;
  margin-top: 0.6rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

a.doc-card-link:hover .doc-card-cta,
a.doc-card-link:focus-visible .doc-card-cta {
  opacity: 1;
  transform: translateX(0);
}

@media (hover: none) {
  /* Tactile : pas d'état hover — le CTA reste discret mais lisible */
  .doc-card-cta {
    opacity: 0.75;
    transform: none;
  }
}

/* ── V3.2.9 — Liens des nœuds timeline (Concepts) ───────────────────────── */
.tl-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin-top: 0.8rem;
}

a.tl-link {
  font-family: 'Fira Code', monospace;
  font-size: 0.72rem;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

a.tl-link:hover,
a.tl-link:focus-visible {
  border-bottom-color: var(--gold);
  opacity: 0.9;
}

a.tl-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-bottom-color: transparent;
}

/* ══ V3.2.7 — zoom focal du hero + footer borné ═════════════════════ */
.zoom-stage {
  --zoom-progress: 0;
  position: relative;
  min-height: 125svh;
}

.zoom-stage__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: block;
  overflow: hidden;
  perspective: 1200px;
  isolation: isolate;
}

.zoom-stage__inner {
  min-height: 100svh;
  will-change: transform;
}

.zoom-stage .hero-grid,
.zoom-stage .hero-glow {
  opacity: calc(1 - var(--zoom-progress) * 1.6);
  transform: scale(calc(1 + var(--zoom-progress) * 0.18));
  transition: none;
  pointer-events: none;
}

/* .star-field est fixed et animé globalement */

.zoom-stage .hero-glow {
  filter: blur(calc(var(--zoom-progress) * 14px));
}

.zoom-stage .hero-badge,
.zoom-stage .hero-title,
.zoom-stage .hero-subtitle,
.zoom-stage .hero-trust-line {
  opacity: calc(1 - var(--zoom-progress) * 1.45);
  transform: translateY(calc(var(--zoom-progress) * -34px)) scale(calc(1 - var(--zoom-progress) * 0.08));
  filter: blur(calc(var(--zoom-progress) * 3px));
}

.zoom-stage .hero-badge,
.zoom-stage .hero-title,
.zoom-stage .hero-trust-line,
.zoom-stage.is-subtitle-inert .hero-subtitle {
  pointer-events: none;
}

.zoom-stage .hero-scroll-link {
  display: none;
}

.zoom-stage .hero-destinations-grid {
  transform-origin: center center;
  transform:
    translateY(calc(var(--zoom-progress) * -4vh))
    scale(calc(0.8 + var(--zoom-progress) * 0.2));
  box-shadow: 0 calc(20px + var(--zoom-progress) * 30px) calc(50px + var(--zoom-progress) * 60px)
    rgba(0, 0, 0, calc(0.25 + var(--zoom-progress) * 0.15));
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(4px);
  padding: clamp(10px, 1.4vw, 22px);
  will-change: transform;
}

.zoom-stage .hero-dest-card {
  pointer-events: auto;
}

body.home-fade-ready #parts.home-fade-target {
  position: relative;
  z-index: 2;
  margin-top: var(--home-parts-overlap, -20svh);
  opacity: var(--home-parts-opacity, 1);
  transform: translate3d(0, var(--home-parts-y, 0), 0) scale(var(--home-parts-scale, 1));
  transform-origin: 50% 0;
  transition: none;
  will-change: transform, opacity;
}

@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  body.home-fade-ready #parts.home-fade-target {
    padding-top: 0;
  }
}

.home-footer-stage {
  position: relative;
  min-height: 118svh;
  margin-top: 0;
}

.home-footer-stage__pin {
  position: sticky;
  top: 56px;
  min-height: calc(100svh - 56px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  padding-top: clamp(0.75rem, 2svh, 1.5rem);
}

body.home-fade-ready #home-footer-stage .rgpd-logo-container {
  opacity: 1;
  transform: translate3d(0, var(--home-footer-seal-y, 0), 0) scale(var(--home-footer-seal-scale, 1));
  transform-origin: 50% 0;
  transition: none;
  will-change: transform;
}

body.home-fade-ready #home-footer-stage .footer-logos {
  opacity: 1;
  transform: translate3d(0, var(--home-footer-logos-y, 0), 0) scale(var(--home-footer-logos-scale, 1));
  transform-origin: 50% 50%;
  transition: none;
  will-change: transform;
}

body.home-fade-ready #home-footer-stage #home-primary-footer {
  opacity: 1;
  transform: translate3d(0, var(--home-footer-y, 0), 0) scale(var(--home-footer-scale, 1));
  transform-origin: 50% 100%;
  transition: none;
  will-change: transform;
}

body.home-fade-ready #home-footer-stage .home-site-footer {
  opacity: 1;
  transform: translate3d(0, var(--home-site-footer-y, 0), 0) scale(var(--home-site-footer-scale, 1));
  transform-origin: 50% 0;
  transition: none;
  will-change: transform;
}

.home-footer-stage .rgpd-logo-container {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}

.home-footer-stage .footer-logos {
  width: 100%;
  max-width: 800px;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 auto;
}

.home-footer-stage .home-footer-target {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.75rem;
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.home-footer-stage .home-site-footer {
  width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  /* L'index peut dépasser 7 000 px sur mobile : une hauteur intrinsèque
     générique ferait chevaucher ses lignes avec les sections suivantes. */
  #index {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }

  .zoom-stage {
    min-height: auto;
  }

  .home-footer-stage {
    min-height: auto;
  }

  .zoom-stage__pin,
  .home-footer-stage__pin {
    position: static;
    height: auto;
    min-height: auto;
    overflow: visible;
    padding-top: 0.75rem;
  }

  .zoom-stage .star-field,
  .zoom-stage .hero-grid,
  .zoom-stage .hero-glow,
  .zoom-stage .hero-badge,
  .zoom-stage .hero-title,
  .zoom-stage .hero-subtitle,
  .zoom-stage .hero-trust-line,
  .zoom-stage .hero-scroll-link,
  .zoom-stage .hero-destinations-grid,
  body.home-fade-ready #parts.home-fade-target,
  body.home-fade-ready #home-footer-stage .rgpd-logo-container,
  body.home-fade-ready #home-footer-stage .footer-logos,
  body.home-fade-ready #home-footer-stage #home-primary-footer,
  body.home-fade-ready #home-footer-stage .home-site-footer {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    will-change: auto;
  }

  body.home-fade-ready #parts.home-fade-target {
    margin-top: 0;
  }

  .home-footer-stage .home-footer-target {
    padding: 2rem 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zoom-stage {
    min-height: auto;
  }

  .zoom-stage__pin {
    position: static;
    height: auto;
    overflow: visible;
    perspective: none;
  }

  .zoom-stage .star-field,
  .zoom-stage .hero-grid,
  .zoom-stage .hero-glow,
  .zoom-stage .hero-badge,
  .zoom-stage .hero-title,
  .zoom-stage .hero-subtitle,
  .zoom-stage .hero-trust-line,
  .zoom-stage .hero-scroll-link,
  .zoom-stage .hero-destinations-grid,
  body.home-fade-ready #parts.home-fade-target,
  body.home-fade-ready #home-footer-stage .rgpd-logo-container,
  body.home-fade-ready #home-footer-stage .footer-logos,
  body.home-fade-ready #home-footer-stage #home-primary-footer,
  body.home-fade-ready #home-footer-stage .home-site-footer {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    will-change: auto;
  }

  body.home-fade-ready #parts.home-fade-target {
    margin-top: 0;
  }

  .home-footer-stage {
    min-height: auto;
  }

  .home-footer-stage__pin {
    position: static;
    min-height: auto;
    overflow: visible;
  }
}

/* ==========================================================================
   NAVBAR - LOGO DE MARQUE & BOUCLIER 3D INTERACTIF
   ========================================================================== */
.nav-brand-wrapper {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.nav-logo-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--text-primary);
  padding: 2px 4px;
  border-radius: 8px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.nav-logo-brand:hover {
  transform: translateY(-1px) scale(1.02);
}

.nav-shield-container {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 9px;
  filter: drop-shadow(0 2px 8px rgba(37, 99, 235, 0.45)) drop-shadow(0 0 5px rgba(245, 158, 11, 0.35));
}

.nav-shield-fallback {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.25s ease;
}

.nav-shield-container[data-shield-webgl-status="active"] .nav-shield-fallback {
  display: none;
}

.nav-shield-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
  text-align: left;
}

.nav-brand-title {
  font-family: 'Fira Code', monospace;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.nav-brand-title .brand-accent {
  color: var(--gold);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: normal;
}

.nav-brand-sub {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1px;
}

body.light-mode .nav-brand-title {
  color: #0f172a;
}

body.light-mode .nav-brand-title .brand-accent {
  color: #d97706;
}

body.light-mode .nav-brand-sub {
  color: #64748b;
}

/* ── #parts TRANSPARENT BACKGROUND (Les étoiles restent visibles au-dessus du fond global sans découpe) ── */
#parts,
body.home-fade-ready #parts.home-fade-target {
  background: transparent !important;
  background-color: transparent !important;
}