/* ============================================================
   MAIN.CSS — Génome Réunion
   Feuille de style principale : variables, layout, composants,
   graphiques et responsive design.

   Structure :
     1. Variables de design (tokens)
     2. Reset & base
     3. Navigation fixe
     4. Barre de progression
     5. Deck de slides
     6. Typographie de slide
     7. Slide hero (slide 1 — titre)
     8. Slides d'intro de section
     9. Composants de contenu
        — Grilles
        — Cards
        — Table des matières
        — Formule mathématique
        — Barres de progression (composant)
        — Tableau HTML
        — Arm-card (composant 4 bras)
        — Callout (encadré note)
        — Level-card (carte à entête coloré)
        — Conclusion (liste à puces)
     10. Animation admixture (slide 1)
     11. Graphiques et animations SVG
     12. Responsive (breakpoints 900px / 600px / 380px)
     13. Hauteurs minimales fluides
     14. Accessibilité — Réduction des animations
   ============================================================ */


/* ============================================================
   1. VARIABLES DE DESIGN
   Modifier ici pour changer l'ensemble du thème visuel.
   Toutes les couleurs et valeurs partagées sont centralisées
   dans ce bloc :root pour éviter la duplication.
   ============================================================ */
:root {
  /* Palette principale */
  --navy:   #0B1F3A;   /* Fond sombre, textes importants, nav */
  --teal:   #0D7377;   /* Couleur d'accent principale */
  --tealL:  #14B8A6;   /* Teal clair — sous-titres hero, highlights */
  --cream:  #F4F1EC;   /* Fond des slides de contenu */
  --white:  #FFFFFF;

  /* Couleurs de texte — du plus sombre au plus discret */
  --text:   #1A2B3C;   /* Texte principal (titres, td) */
  --muted:  #4A5568;   /* Corps de texte */
  --light:  #8896A5;   /* Légendes, hints, textes secondaires */
  --border: #D1C9BC;   /* Bordures et séparateurs */

  /* Couleurs d'accent sémantiques */
  --coral:  #E05A4B;   /* Danger, absence, alerte */
  --amber:  #D97706;   /* Avertissement, fondateur */
  --purple: #7C3AED;   /* Section 03 Design, ADMIXTURE */
  --blue:   #0369A1;   /* Section 04 Algorithme, PCA */
  --green:  #059669;   /* Section 05 WGS, succès, sélection */
  --orange: #EA580C;   /* Effet fondateur, parenté */
  --gray:   #6B7280;   /* DNAQ, éléments neutres */

  /* Couleurs des 5 sections — utilisées sur les slides d'intro
     et les pills de navigation actives */
  --s01: #E05A4B;   /* Section 01 — Angle mort */
  --s02: #0D7377;   /* Section 02 — Singularité */
  --s03: #7C3AED;   /* Section 03 — Design */
  --s04: #0369A1;   /* Section 04 — Algorithme */
  --s05: #059669;   /* Section 05 — WGS */
}


/* ============================================================
   2. RESET & BASE
   Supprime les marges/paddings par défaut du navigateur.
   overflow:hidden sur html/body est intentionnel : c'est le
   deck (#deck) qui gère le défilement via transform translateX.
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden; /* Le scroll est géré par le deck, pas le navigateur */
  font-family: 'Segoe UI', system-ui, sans-serif;
}


/* ============================================================
   3. NAVIGATION FIXE
   Barre fixe en haut, z-index 300 pour rester au-dessus du deck.
   Trois zones : logo | pills de section | boutons précédent/suivant
   ============================================================ */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 46px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 0; /* pas de padding à gauche — le logo colle au bord */
  z-index: 300;
  gap: 10px;
}

#nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

#nav-logo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  /* Pleine hauteur de la nav, collé au bord gauche */
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  /* Arrondi : haut-gauche, haut-droit, bas-droit — droit en bas-gauche */
  border-radius: 8px 20px 20px 0;
}
#nav-logo:hover { opacity: .8; }

/* Zone centrale : pills de navigation par section.
   Masquée sous 900px (trop étroite pour afficher toutes les pills). */
#nav-center {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  overflow: hidden;
}

/* Pill de section — état inactif par défaut, actif via .on
   ajouté dynamiquement par SECTION_MAP dans app.js */
.sec-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--muted);
  transition: .2s;
  white-space: nowrap;
  font-family: inherit;
}
.sec-pill:hover,
.sec-pill.on { background: var(--navy); color: var(--white); }

#nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Boutons Préc./Suiv. et compteur de slide */
.nbtn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: .2s;
}
.nbtn:hover    { background: var(--navy); color: var(--white); border-color: var(--navy); }
.nbtn:disabled { opacity: .3; cursor: default; }

#ctr {
  font-size: 12px;
  color: var(--muted);
  min-width: 44px;
  text-align: center;
}

/* Focus visible homogène pour la navigation et les cibles enrichies au clavier */
.nbtn:focus-visible,
.sec-pill:focus-visible,
.js-slide-jump:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}


/* ── Burger button (visible < 900px) ─────────────────────── */
#burger-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(11,31,58,.35);
  border-radius: 5px;
  padding: 6px 8px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#burger-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}

#burger-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#burger-btn.open span:nth-child(2) { opacity: 0; }
#burger-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   4. BARRE DE PROGRESSION
   Fine ligne de 3px sous la nav, mise à jour en temps réel
   par app.js (progressBar.style.width) à chaque changement de slide.
   ============================================================ */
#prog {
  position: fixed;
  top: 46px; left: 0; right: 0; /* Collée sous la nav */
  height: 3px;
  background: #E8E4DC;
  z-index: 300;
}

#pf {
  width: 0;                   /* Valeur initiale ; app.js fixe la largeur dès goToSlide(0) */
  height: 100%;
  background: var(--teal);
  transition: width .4s ease; /* Transition fluide entre slides */
}


/* ============================================================
   5. DECK DE SLIDES
   Le deck est un flex horizontal contenant toutes les slides
   côte à côte. La navigation déplace le deck via translateX.
   inset: 49px 0 0 0  = commence juste sous nav (46px) + barre (3px).
   ============================================================ */
#deck {
  position: fixed;
  inset: 49px 0 0 0;
  display: flex;
  transition: transform .46s cubic-bezier(.4, 0, .2, 1); /* Easing naturel */
}

/* Chaque slide occupe exactement 100vw — garantit l'alignement
   même si le contenu déborde verticalement. */
.slide {
  min-width: 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Conteneur de contenu centré, scrollable si nécessaire.
   clamp() adapte le padding selon la hauteur/largeur disponible
   sans media queries supplémentaires. */
.inner {
  width: min(1280px, 92vw);
  height: calc(100vh - 68px); /* 68px = nav 46px + barre 3px + marge 19px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(16px, 3vh, 48px) clamp(24px, 3.5vw, 56px);
  overflow-y: auto;
}

/* Slides trop denses : alignement en haut pour éviter que le titre soit coupé */
.inner--top { justify-content: flex-start; }

/* Scrollbar discrète pour les slides dont le contenu dépasse */
.inner::-webkit-scrollbar       { width: 3px; }
.inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Animation d'entrée des enfants directs de .inner.
   Chaque élément entre en fondu + translateY quand la slide
   reçoit la classe .on (ajoutée par goToSlide() dans app.js).
   Les delays échelonnés créent un effet de cascade visuelle. */
.inner > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
}
.slide.on .inner > *                { opacity: 1; transform: none; }
.slide.on .inner > *:nth-child(1)   { transition-delay: .04s; }
.slide.on .inner > *:nth-child(2)   { transition-delay: .10s; }
.slide.on .inner > *:nth-child(3)   { transition-delay: .16s; }
.slide.on .inner > *:nth-child(4)   { transition-delay: .22s; }
.slide.on .inner > *:nth-child(5)   { transition-delay: .28s; }
.slide.on .inner > *:nth-child(6)   { transition-delay: .34s; }
.slide.on .inner > *:nth-child(7)   { transition-delay: .40s; }
.slide.on .inner > *:nth-child(n+8) { transition-delay: .46s; } /* 8e enfant et au-delà : délai max */


/* ============================================================
   6. TYPOGRAPHIE DE SLIDE
   Classes partagées par toutes les slides de contenu.
   ============================================================ */

/* Titre principal de chaque slide */
.slide-title {
  font-family: Georgia, serif;
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: clamp(4px, 0.8vh, 12px);
  line-height: 1.12;
}

/* Règle colorée sous le titre — la couleur est définie
   en inline style sur chaque slide selon sa section */
.slide-rule {
  height: 4px;
  width: 110px;
  border-radius: 2px;
  margin-bottom: clamp(10px, 2vh, 28px);
}

/* Corps de texte standard */
.text-body {
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.75;
  color: var(--muted);
}

/* Légende — texte discret en majuscules espacées,
   utilisé dans les footers de slide et les sous-titres */
.caption {
  font-size: clamp(10px, 1.1vw, 13px);
  color: var(--light);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Les titres peuvent recevoir le focus par JS pour l'annonce lecteur d'écran,
   mais on neutralise le focus natif visible afin de préserver le design du deck. */
.hero-title:focus,
.slide-title:focus,
.section-title:focus {
  outline: none;
}



/* ============================================================
   8. SLIDES D'INTRO DE SECTION
   Chaque grande section commence par une slide pleine couleur
   avec un grand numéro à gauche et le titre à droite.
   La couleur de fond est définie via .slide.slide--s0X
   (voir classes modificatrices plus bas dans ce fichier).
   ============================================================ */
.section-slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: .92fr 1.48fr; /* Réduit le vide à droite, laisse plus de place au texte */
  overflow: hidden;
}

/* Voiles décoratifs discrets pour casser l'aplat plein :
   halo radial en haut à gauche + assombrissement diagonal léger. */
.section-slide::before,
.section-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.section-slide::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at 78% 70%, rgba(11, 31, 58, .14) 0%, rgba(11, 31, 58, 0) 34%);
  opacity: .9;
}

.section-slide::after {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 24%, rgba(11, 31, 58, .10) 100%);
}

.section-slide-left {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, .12);
  padding: 40px;
}

.section-slide-right {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px) clamp(28px, 5vw, 64px);
}

/* Le texte des slides de section doit toujours rester au-dessus
   des motifs décoratifs SVG placés en absolu dans la colonne droite. */
.section-copy {
  position: relative;
  z-index: 1;
}

/* Grand numéro décoratif semi-transparent */
.section-number {
  font-family: Georgia, serif;
  font-size: clamp(180px, 26vw, 380px);
  font-weight: 700;
  color: rgba(255, 255, 255, .19);
  line-height: .85;
  letter-spacing: -10px;
  text-shadow: 0 12px 30px rgba(255, 255, 255, .05);
}

.section-tag {
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 700;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-bottom: 18px;
}

.section-title {
  font-family: Georgia, serif;
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin-bottom: 20px;
  max-width: 13ch;
}

.section-subtitle {
  font-size: clamp(14px, 1.45vw, 19px);
  color: rgba(255, 255, 255, .82);
  line-height: 1.62;
  font-style: italic;
  max-width: 50ch;
}

/* Motif expérimental pour la section 01 :
   une cartographie de points lacunaire qui suggère un espace
   de données incomplet sans recourir à une image bitmap.
   Le motif est accroché à la colonne texte pour éviter qu'il
   soit traité comme un item de grille selon les navigateurs. */
.section-graphic {
  position: absolute;
  inset: 4% -8% 4% 30%;
  pointer-events: none;
  opacity: .72;
  z-index: 0;
}

.section-graphic svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* ============================================================
   9. COMPOSANTS DE CONTENU
   ============================================================ */

/* ── Grilles ────────────────────────────────────────────────
   Grilles CSS à 2, 3 ou 4 colonnes égales.
   Les gaps et hauteurs minimales s'adaptent à la hauteur
   d'écran via clamp() pour rester dans les limites du .inner. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr;          gap: clamp(10px, 2vh, 24px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr);   gap: clamp(8px, 1.6vh, 20px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr);   gap: clamp(6px, 1.4vh, 16px); }

/* ── Card générique ─────────────────────────────────────────
   Fond blanc, bordure crème, coins arrondis.
   Utilisée sur toutes les slides de contenu pour regrouper
   visuellement des informations. La couleur de bordure et
   d'accent est souvent surchargée en inline style. */
.card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: clamp(10px, 1.8vh, 24px) clamp(14px, 1.8vw, 24px);
}

/* Variante fond coloré — utilisée pour les badges de statut */
.card-colored {
  border-radius: 8px;
  padding: 16px 18px;
  color: var(--white);
}

/* ============================================================
   Variantes de slides et composants — classes modificatrices
   Ces classes remplacent tous les inline style="background:..."
   présents dans le HTML. Ajouter ici toute nouvelle couleur.
   ============================================================ */

/* ── Fonds de slides ─────────────────────────────────────── */
/* Sélecteurs composés (.slide.slide--*) pour garantir la priorité
   sur la règle de base .slide sans dépendre de l'ordre cascade. */
.slide.slide--cream { background: var(--cream); }
.slide.slide--navy  { background: var(--navy); }
.slide.slide--hero  { background: var(--navy); justify-content: flex-start; }
.slide.slide--s01   { background: var(--s01); }
.slide.slide--s02   { background: var(--s02); }
.slide.slide--s03   { background: var(--s03); }
.slide.slide--s04   { background: var(--s04); }
.slide.slide--s05   { background: var(--s05); }

/* ── Règles colorées sous les titres ─────────────────────── */
.accent-bar--coral,
.slide-rule--coral  { background: var(--coral); }
.slide-rule--teal   { background: var(--teal); }
.slide-rule--orange { background: var(--orange); }
.slide-rule--purple { background: var(--purple); }
.slide-rule--blue   { background: var(--blue); }
.slide-rule--amber  { background: var(--amber); }
.slide-rule--green  { background: var(--green); }

/* ── Badges numérotés du sommaire ────────────────────────── */
.toc-number--s01 { background: var(--s01); }
.toc-number--s02 { background: var(--s02); }
.toc-number--s03 { background: var(--s03); }
.toc-number--s04 { background: var(--s04); }
.toc-number--s05 { background: var(--s05); }

/* ── En-têtes des level-cards ────────────────────────────── */
.level-header--teal   { background: var(--teal); }
.level-header--purple { background: var(--purple); }
.level-header--coral  { background: var(--coral); }
.level-header--amber  { background: var(--amber); }
.level-header--blue   { background: var(--blue); }




/* ── Footer de slide (OPTION 5 — Design Mixte Moderne) ──────────────
   - Barre d'accent colorée en haut (couleur de section)
   - Séparation claire du corps
   - Hiérarchie : Projet · Numéro | Références
   - Icônes aux couleurs du design
   - Responsive et élégant

   Structures HTML supportées :
   1. Simple (pas de sources) :
      <div class="slide-footer">
        <span class="caption">Génome Réunion</span>
        <span class="caption">35</span>
      </div>

   2. Avec citations (via slide-footer-meta) :
      <div class="slide-footer slide-footer-citations">
        <div class="slide-footer-meta">
          <span class="caption">Génome Réunion</span>
          <div class="slide-footer-sources">...</div>
        </div>
        <span class="caption">35</span>
      </div> */

.slide-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 0;
  margin-top: clamp(16px, 2.4vh, 32px);
  padding: 0;
  border: none;
  width: 100%;
  align-items: start;
}

/* Barre d'accent colorée — s'étend sur toute la largeur (haut) */
.slide-footer::before {
  content: '';
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: 2px;
  background: var(--teal);
  margin-bottom: clamp(14px, 2vh, 20px);
  border-radius: 1px;
}

/* Adaptation couleur barre par section */
.slide.slide--s01 .slide-footer::before { background: var(--coral); }
.slide.slide--s02 .slide-footer::before { background: var(--teal); }
.slide.slide--s03 .slide-footer::before { background: var(--purple); }
.slide.slide--s04 .slide-footer::before { background: var(--blue); }
.slide.slide--s05 .slide-footer::before { background: var(--green); }

/* ─ Structure simple (pas de sources) ─
   Premier caption (Génome Réunion) — devient breadcrumb */
.slide-footer:not(.slide-footer-citations) > .caption:first-of-type {
  grid-column: 1;
  grid-row: 2;
  font-size: clamp(10px, 0.95vw, 12px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.3px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ajouter le séparateur "·" après le projet (simple) */
.slide-footer:not(.slide-footer-citations) > .caption:first-of-type::after {
  content: '·';
  margin-left: 8px;
}

/* Dernier caption (numéro de slide) — stylisé en badge (simple) */
.slide-footer:not(.slide-footer-citations) > .caption:last-of-type {
  grid-column: 2;
  grid-row: 2;
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 600;
  color: var(--white);
  background: var(--teal);
  border-radius: 4px;
  padding: 6px 12px;
  margin: 0;
  line-height: 1;
}

/* Adaptation couleur badge par section (simple) */
.slide.slide--s01 .slide-footer:not(.slide-footer-citations) > .caption:last-of-type { background: var(--coral); }
.slide.slide--s02 .slide-footer:not(.slide-footer-citations) > .caption:last-of-type { background: var(--teal); }
.slide.slide--s03 .slide-footer:not(.slide-footer-citations) > .caption:last-of-type { background: var(--purple); }
.slide.slide--s04 .slide-footer:not(.slide-footer-citations) > .caption:last-of-type { background: var(--blue); }
.slide.slide--s05 .slide-footer:not(.slide-footer-citations) > .caption:last-of-type { background: var(--green); }

/* ─ Structure avec citations (slide-footer-meta wrapper) ─
   Le meta wrapper contient breadcrumb + sources, occupe col 1 */
.slide-footer-citations .slide-footer-meta {
  grid-column: 1;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Breadcrumb dans le meta wrapper (citations) */
.slide-footer-citations .slide-footer-meta > .caption:first-of-type {
  font-size: clamp(10px, 0.95vw, 12px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.3px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(8px, 1.2vh, 12px);
}

/* Ajouter le séparateur "·" (citations) */
.slide-footer-citations .slide-footer-meta > .caption:first-of-type::after {
  content: '·';
  margin-left: 8px;
}

/* Dernier caption — numéro badge (citations, col 2) */
.slide-footer-citations > .caption:last-of-type {
  grid-column: 2;
  grid-row: 2;
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 600;
  color: var(--white);
  background: var(--teal);
  border-radius: 4px;
  padding: 6px 12px;
  margin: 0;
  line-height: 1;
  align-self: start;
}

/* Adaptation couleur badge (citations) */
.slide.slide--s01 .slide-footer-citations > .caption:last-of-type { background: var(--coral); }
.slide.slide--s02 .slide-footer-citations > .caption:last-of-type { background: var(--teal); }
.slide.slide--s03 .slide-footer-citations > .caption:last-of-type { background: var(--purple); }
.slide.slide--s04 .slide-footer-citations > .caption:last-of-type { background: var(--blue); }
.slide.slide--s05 .slide-footer-citations > .caption:last-of-type { background: var(--green); }

/* ─ Bloc références (sources) ─
   Affiche dans le meta ou directement dans footer selon structure */
.slide-footer-sources {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.6vh, 7px);
}

/* Label "RÉFÉRENCES" avec icône */
.slide-footer-sources::before {
  content: '📚 RÉFÉRENCES';
  display: block;
  font-size: clamp(8px, 0.88vw, 10px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text);
  margin-bottom: clamp(4px, 0.8vh, 8px);
}

/* Chaque source — compact mais lisible */
.slide-footer-source {
  font-size: clamp(8px, 0.92vw, 10px);
  line-height: clamp(1.4, 1.5, 1.65);
  color: var(--text-muted);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Journal en italique */
.slide-footer-source em {
  color: var(--text);
  font-style: italic;
}

/* Variante citations — augmente l'espace vertical global */
.slide-footer-citations {
  margin-top: clamp(24px, 3.2vh, 40px) !important;
}

/* Ajuste spacing des sources dans le meta */
.slide-footer-citations .slide-footer-meta .slide-footer-sources {
  gap: clamp(4px, 0.8vh, 9px);
  margin-top: clamp(8px, 1.2vh, 12px);
}

.slide-footer-citations .slide-footer-source {
  font-size: clamp(9.5px, 1.02vw, 11.5px);
  line-height: 1.55;
}

/* ── Table des matières (slide 2) ───────────────────────────
   Chaque entrée du sommaire est cliquable via .js-slide-jump
   et un attribut data-target-slide lu par app.js.
   L'indentation au hover donne un retour visuel d'interactivité. */
.toc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(8px, 1.5vh, 18px) 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: padding-left .2s;
}
.toc-row:hover      { padding-left: 8px; }
.toc-row:last-child { border: none; }

/* Variante de .toc-row avec bouton toggle à droite (S04 Expert/Résumé).
   La structure HTML est : .toc-row--with-button > (js-slide-jump + button).
   Le js-slide-jump doit être flex pour aligner nombre + texte. */
.toc-row--with-button {
  justify-content: space-between;
}

.toc-row--with-button .js-slide-jump {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.toc-row--with-button button {
  flex-shrink: 0;
  padding: clamp(6px, 0.8vh, 10px) clamp(12px, 1.5vw, 16px);
  border: 1px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  border-radius: 4px;
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.toc-row--with-button button:hover {
  background: var(--navy);
  color: var(--white);
}

/* Badge numéroté coloré à gauche de chaque entrée du sommaire.
   La couleur de fond est définie via .toc-number--s0X (voir variantes CSS). */
.toc-number {
  min-width: clamp(36px, 4.5vh, 52px);
  height: clamp(36px, 4.5vh, 52px);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(14px, 1.8vh, 20px);
  color: var(--white);
  flex-shrink: 0;
}

/* Titre et description dans chaque entrée du sommaire.
   Remplacent les inline style="color/font-size" répétés sur chaque .toc-row. */
.toc-title {
  color: var(--navy);
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 700;
}

.toc-desc {
  font-size: clamp(15px, 1.7vw, 24px); /* Plus grand que le .text-body de base */
}

/* ── Formule mathématique ───────────────────────────────────
   Bloc monospace sur fond bleu très clair, utilisé pour
   afficher les équations du score S_div, F_ROH, H_i, etc. */
.formula {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 5px;
  padding: clamp(8px, 1.2vh, 14px) 16px;
  font-family: 'Courier New', monospace;
  font-size: clamp(11px, 1.2vw, 14px);
  color: var(--navy);
  margin: clamp(6px, 1vh, 12px) 0;
  line-height: 1.7;
}

.formula--score {
  border-color: #BFDBFE;
  font-size: clamp(15px, 1.7vw, 24px);
}

/* ── Barres de progression (composant) ──────────────────────
   Composant pour afficher des métriques sous forme de barres
   horizontales animées. Utilisé sur les slides de statistiques.
   Structure : .progress-bar > .progress-label + .progress-track
               > .progress-fill  +  .progress-value  +  .progress-desc */
.progress-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: clamp(7px, 1.2vh, 14px);
}
.progress-label {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: 700;
  min-width: 96px;
  color: var(--navy);
}
.progress-track {
  flex: 1;
  height: clamp(10px, 1.4vh, 16px);
  background: #E8E4DC;
  border-radius: 7px;
  overflow: hidden;
}
/* La largeur de .progress-fill est animée via JS (width 0 → valeur cible) */
.progress-fill {
  height: 100%;
  border-radius: 7px;
  width: 0;
  transition: width 1s ease;
}
.progress-value {
  font-weight: 700;
  font-size: 15px;
  min-width: 36px;
  text-align: right;
}
/* Description textuelle — masquée sous 900px (trop étroite) */
.progress-desc {
  font-size: 13px;
  color: var(--muted);
  min-width: 180px;
}

/* ── Tableau HTML ────────────────────────────────────────────
   Style appliqué à tous les <table> du document.
   .hi marque une ligne mise en évidence (résultat sélectionné). */
table            { width: 100%; border-collapse: collapse; font-size: 15px; }
th               { background: var(--navy); color: var(--white); padding: clamp(7px, 1.2vh, 14px) 14px; font-weight: 600; text-align: left; }
td               { padding: clamp(7px, 1.2vh, 14px) 14px; border-bottom: 1px solid var(--border); color: var(--text); }
tr:last-child td { border: none; }
.hi td           { background: #F0FDF4; font-weight: 600; } /* Ligne "Patient C sélectionné" */

/* ── Callout : encadré note / citation ──────────────────────
   Barre colorée à gauche sur fond crème clair.
   Utilisé pour les notes de bas de slide et les résumés clés. */
.callout {
  background: #F8F5F0;
  border-left: 4px solid var(--teal);
  padding: clamp(8px, 1.2vh, 14px) 16px;
  margin-top: clamp(8px, 1.4vh, 18px);
  border-radius: 0 5px 5px 0;
  font-size: clamp(13px, 1.3vw, 15px);
  color: var(--muted);
}
.callout--amber { border-left-color: var(--amber); }

/* ── Level-card : carte à en-tête coloré (slide 16) ─────────
   Utilisée pour les trois variables génomiques (PCA, ADMIXTURE,
   Entropie). Structure : .level-card > .level-header + .level-body
   La couleur du .level-header est définie via .level-header--* (voir variantes CSS). */
.level-card   { background: var(--white); border: 2px solid var(--border); border-radius: 8px; overflow: hidden; }
.level-header { padding: clamp(8px, 1.2vh, 14px) clamp(10px, 1.2vw, 16px); color: var(--white); font-weight: 700; font-size: clamp(12px, 1.3vw, 15px); }
.level-body   { padding: clamp(8px, 1.4vh, 18px); }


/* Hint de navigation — visible uniquement sur desktop */
#hint {
  position: fixed;
  bottom: 10px; right: 14px;
  font-size: 10px;
  color: var(--light);
}


/* ============================================================
   12. RESPONSIVE
   Trois breakpoints :
   — 900px : tablette paysage / laptop étroit
             → masque les pills de nav, simplifie les grilles
   — 600px : tablette portrait / mobile large
             → passe tout en colonne unique
   — 380px : mobile étroit
             → grid-4 passe en colonne unique
   ============================================================ */
@media (max-width: 900px) {
  #burger-btn                       { display: flex; }
  #nav-center                       { display: none; }
  #presenter-btn                    { display: none; }
  #nav-center.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 46px;
    left: 0;
    width: 260px;                        /* Largeur limitée, aligné à gauche */
    background: var(--cream);
    border-top: 2px solid var(--teal);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0;
    gap: 0;
    z-index: 998;
    box-shadow: 4px 6px 16px rgba(0,0,0,.15);
    border-radius: 0 0 8px 0;
  }
  #nav-center.open .sec-pill {
    width: 100%;
    text-align: left;
    padding: 12px 18px;
    font-size: 13px;
    border-radius: 0;
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  #nav-center.open .sec-pill:last-child { border-bottom: none; }
  #nav-center.open .sec-pill:hover,
  #nav-center.open .sec-pill.on        { background: var(--navy); color: var(--white); }
  .section-slide                    { grid-template-columns: 1fr !important; }
  .section-slide-left               { display: none; }             /* Grand numéro masqué */
  .section-slide-right              { padding: clamp(28px, 5vw, 48px); }
  .grid-4                           { grid-template-columns: 1fr 1fr; }
  .grid-3                           { grid-template-columns: 1fr 1fr; }
  .grid-3 > *:last-child:nth-child(odd) { grid-column: span 2; }  /* Dernier élément impair = pleine largeur */
  .inner                            { padding: 20px 22px; justify-content: flex-start; } /* flex-start évite le clip du titre quand le contenu déborde */
  .section-slide                    { padding: 24px 26px 36px; }
  .progress-desc                    { display: none; }             /* Description trop large */
  .section-graphic                  { display: none; }             /* SVG décoratif masqué sur mobile */
  table                             { display: block; overflow-x: auto; max-width: 100%; }
}

@media (max-width: 600px) {
  #nav-logo    { font-size: 9px; letter-spacing: 1px; }
  .nbtn        { padding: 4px 9px; font-size: 11px; }
  #ctr         { min-width: 36px; font-size: 11px; }
  .grid-2,
  .grid-3      { grid-template-columns: 1fr; }
  .grid-3 > *:last-child:nth-child(odd) { grid-column: auto; }
  /* Typographie des slides section — plus lisible sur mobile */
  .section-title    { font-size: clamp(36px, 9vw, 44px); }
  .section-subtitle { font-size: clamp(16px, 4vw, 18px); }
  .section-tag      { font-size: 12px; }
  .grid-4      { grid-template-columns: 1fr 1fr; }
  .slide-title { font-size: clamp(20px, 4vw, 28px); }
  .inner       { padding: 22px 14px 28px; max-height: calc(100vh - 70px); justify-content: flex-start; }
  table        { font-size: 11px; }
  th, td       { padding: 6px 7px; }
  .progress-label { min-width: 58px; font-size: 10px; }
  .progress-value { min-width: 24px; font-size: 10px; }
  .toc-number  { min-width: 34px; height: 34px; font-size: 12px; }
  #hint        { display: none; }
}

@media (max-width: 380px) {
  .grid-4 { grid-template-columns: 1fr; } /* Mobile très étroit : tout en colonne */
}




/* ============================================================
   13. HAUTEURS MINIMALES FLUIDES
   Garantit que les cellules de grille et les composants
   ont une hauteur décente sur tous les écrans, même quand
   le contenu est court. Les valeurs clamp() sont calibrées
   pour couvrir du mobile (120px) au grand écran (240px).
   ============================================================ */
.grid-2 > *,
.grid-3 > *  { min-height: clamp(120px, 16vh, 240px); }
.grid-4 > *  { min-height: clamp(140px, 18vh, 260px); }
.card        { min-height: clamp(100px, 12vh, 180px); }
.level-card  { min-height: clamp(180px, 22vh, 320px); }

/* ============================================================
   13b. TOGGLE BUTTON S04
   ============================================================ */
#s04-toggle-btn {
  background: var(--blue);
  border: 2px solid var(--blue);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#s04-toggle-btn.is-resume {
  background: #fff;
  color: var(--blue);
  border-color: var(--blue);
}

/* ============================================================
   Responsive Margin Utilities
   ============================================================ */
.mb-responsive-sm { margin-bottom: clamp(8px, 1.5vh, 16px); }
.mb-responsive-md { margin-bottom: clamp(8px, 1.5vh, 18px); }
.mt-responsive-sm { margin-top: clamp(8px, 1.5vh, 16px); }
.mt-responsive-md { margin-top: clamp(10px, 1.8vh, 20px); }
.mt-responsive-lg { margin-top: clamp(12px, 2vh, 24px); }

/* ============================================================
   Typography Utilities
   ============================================================ */
.text-small { font-size: clamp(13px, 1.4vw, 16px); }
.text-tiny { font-size: clamp(12px, 1.3vw, 15px); }
.text-muted { font-size: 0.9em; color: var(--gray); }
.text-problem { font-size: clamp(14px, 1.6vw, 20px); color: #F87171; }
.text-italic { font-style: italic; }

/* ============================================================
   Pipeline & Animation
   ============================================================ */
.pipeline-box.muted { opacity: 0.85; }

/* ============================================================
   Table Utilities
   ============================================================ */
table.table-compact { font-size: clamp(11px, 1vw, 13px); }
table.table-tiny { font-size: clamp(10px, 0.95vw, 12px); line-height: 1.5; }

/* ============================================================
   Validation/Criteria Lists
   ============================================================ */
ul.criteria-list,
ul.validation-list {
  list-style: none;
  padding: 0;
  font-size: clamp(11px, 1vw, 13px);
  line-height: 1.6;
}

ul.criteria-list li,
ul.validation-list li {
  margin-bottom: 10px;
}

/* ============================================================
   13d. FOOTER RESPONSIVE ADAPTATIONS
   Adapte le layout du footer pour mobile et tablette.
   — 900px : réduit espacements et font sizes
   — 600px : passe breadcrumb + badge en colonne, ou les empile
   ============================================================ */
@media (max-width: 900px) {
  .slide-footer {
    margin-top: clamp(12px, 1.8vh, 24px);
  }

  .slide-footer:not(.slide-footer-citations) > .caption:first-of-type {
    font-size: clamp(9px, 0.85vw, 11px);
  }

  .slide-footer:not(.slide-footer-citations) > .caption:last-of-type,
  .slide-footer-citations > .caption:last-of-type {
    font-size: clamp(10px, 0.95vw, 12px);
    padding: 5px 10px;
  }

  .slide-footer-sources::before {
    font-size: clamp(7px, 0.75vw, 9px);
  }

  .slide-footer-source {
    font-size: clamp(7px, 0.8vw, 9px);
  }
}

@media (max-width: 600px) {
  /* Sur mobile, le deck reste en position fixed et horizontal.
     On rend .inner scrollable verticalement avec le contenu aligné en haut,
     ce qui garantit que le titre est toujours visible en premier. */
  .inner {
    height: calc(100vh - 49px);
    justify-content: flex-start;
    padding: clamp(12px, 2vh, 24px) clamp(16px, 2.5vw, 32px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Passe la grille en colonne unique pour petit écran mobile */
  .slide-footer {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    margin-top: clamp(10px, 1.4vh, 16px);
  }

  /* Barre d'accent — reste full-width */
  .slide-footer::before {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: clamp(10px, 1.4vh, 14px);
  }

  /* Breadcrumb — colonne unique */
  .slide-footer:not(.slide-footer-citations) > .caption:first-of-type {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(8px, 0.8vw, 10px);
  }

  /* Badge — passe sous le breadcrumb en mobile — style compact coloré */
  .slide-footer:not(.slide-footer-citations) > .caption:last-of-type {
    grid-column: 1;
    grid-row: 3;
    font-size: clamp(8px, 0.8vw, 10px);
    padding: 4px 8px;
    border-radius: 3px;
    background: var(--teal);
    color: var(--white);
    margin-top: clamp(4px, 0.6vh, 6px);
    align-self: start;
    width: fit-content;
    font-weight: 600;
  }

  .slide.slide--s01 .slide-footer:not(.slide-footer-citations) > .caption:last-of-type { background: var(--coral); }
  .slide.slide--s02 .slide-footer:not(.slide-footer-citations) > .caption:last-of-type { background: var(--teal); }
  .slide.slide--s03 .slide-footer:not(.slide-footer-citations) > .caption:last-of-type { background: var(--purple); }
  .slide.slide--s04 .slide-footer:not(.slide-footer-citations) > .caption:last-of-type { background: var(--blue); }
  .slide.slide--s05 .slide-footer:not(.slide-footer-citations) > .caption:last-of-type { background: var(--green); }

  /* Breadcrumb + badge en line (citations) */
  .slide-footer-citations .slide-footer-meta {
    grid-column: 1;
    grid-row: 2;
  }

  .slide-footer-citations > .caption:last-of-type {
    grid-column: 1;
    grid-row: 3;
    font-size: clamp(8px, 0.8vw, 10px);
    padding: 4px 8px;
    border-radius: 3px;
    background: var(--teal);
    color: var(--white);
    margin-top: clamp(4px, 0.6vh, 6px);
    align-self: start;
    width: fit-content;
    font-weight: 600;
  }

  .slide.slide--s01 .slide-footer-citations > .caption:last-of-type { background: var(--coral); }
  .slide.slide--s02 .slide-footer-citations > .caption:last-of-type { background: var(--teal); }
  .slide.slide--s03 .slide-footer-citations > .caption:last-of-type { background: var(--purple); }
  .slide.slide--s04 .slide-footer-citations > .caption:last-of-type { background: var(--blue); }
  .slide.slide--s05 .slide-footer-citations > .caption:last-of-type { background: var(--green); }

  /* References — pleine largeur sous le contenu */
  .slide-footer-sources {
    grid-column: 1;
    grid-row: 4;
    margin-top: clamp(8px, 1vh, 10px);
  }

  .slide-footer-sources::before {
    font-size: clamp(7px, 0.7vw, 8px);
    margin-bottom: clamp(3px, 0.6vh, 6px);
  }

  .slide-footer-source {
    font-size: clamp(7px, 0.75vw, 8px);
    line-height: 1.4;
  }

  .slide-footer-citations {
    margin-top: clamp(16px, 2.2vh, 24px) !important;
  }
}


/* ============================================================
   14. ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS
   Respecte le réglage système "Réduire les animations".
   Désactive l'animation admixture et simplifie les transitions.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #deck      { transition: none; }
  #pf        { transition: none; }
  .inner > * { transition: none; }
}