/* ═══════════════════════════════════════════════════════════════════════════
   FREDBA SITE — FEUILLE DE STYLE PRINCIPALE
   ═══════════════════════════════════════════════════════════════════════════

   Architecture : 4 univers indépendants avec chartes visuelles distinctes
   - Pro (bleu nuit) : articles techniques .NET/WPF
   - Perso (vert/beige) : carnet agrumes, bricolage, jardin
   - Labo (cosmos violet/cyan) : simulations physiques, UAP
   - Lectures (crème/brun) : notes de lecture thématiques

   Structure du fichier :
   1. Variables & reset
   2. Chartes par site (body.site-*)
   3. Layout & navigation
   4. Composants partagés (cards, hero, buttons...)
   5. Composants spécialisés (univers, carrousel, fiches)
   6. Animations & responsive
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   01. VARIABLES CSS & RESET
   ═══════════════════════════════════════════════════════ */

/*
   Variables CSS globales (thème Pro — bleu nuit par défaut)
   ─────────────────────────────────────────────────────────
   Les variables CSS (custom properties) sont déclarées sur :root, ce qui
   les rend accessibles partout dans le fichier via var(--nom).
   Chaque site (Perso, Labo, Lectures) redéfinit ces mêmes variables
   pour changer l'aspect sans toucher au HTML ni aux composants.
*/
:root {
  /* ── Fonds ──
       Utilisés comme background des éléments.
       On distingue 3 niveaux de profondeur :
       --bg          = fond de la page elle-même
       --bg-soft     = fond légèrement surélevé (sections, zones grisées)
       --bg-card     = fond des cartes (translucide, laisse voir le bg derrière)
       --bg-card-strong = fond des cartes plus opaques (meilleure lisibilité) */
  --bg: #08111f;
  --bg-soft: #0f1b2d;
  --bg-card: rgba(255, 255, 255, 0.075); /* rgba = rouge, vert, bleu, alpha (transparence 0→1) */
  --bg-card-strong: rgba(255, 255, 255, 0.12);
  /* ── Texte ──
       --text  = couleur principale de tout le texte
       --muted = couleur atténuée pour les sous-titres, légendes, descriptions */
  --text: #edf4ff; /* Blanc légèrement bleuté, moins agressif que #ffffff */
  --muted: #a8b4c7; /* Gris-bleu pour le texte secondaire */
  /* ── Bordures ──
       Blanc très transparent (0.14 = 14% d'opacité) pour des séparateurs discrets */
  --line: rgba(255, 255, 255, 0.14);
  /* ── Accents (couleurs de mise en valeur) ──
       --accent   = orange chaud → boutons, puces, liens actifs
       --accent-2 = cyan → étiquettes, numéros, éléments secondaires */
  --accent: #f6a94d;
  --accent-2: #79d9ff;
  /* ── Ombre portée ──
       Syntaxe : offset-x | offset-y | blur-radius | couleur
       0 = pas de décalage horizontal
       24px = décalage vertical (ombre projetée vers le bas)
       80px = rayon de flou (ombre douce et étalée)
       rgba(0,0,0,0.28) = noir à 28% d'opacité */
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  /* ── Navigation ──
       Fond de la barre nav avec transparence, backdrop-filter fera le flou */
  --nav-bg: rgba(8, 17, 31, 0.72); /* 72% opaque = semi-transparent */
  /* ── Géométrie ──
       --radius = arrondi des coins (border-radius) utilisé comme référence
       --max    = largeur maximale du contenu, centrée sur la page */
  --radius: 24px;
  --max: 1160px;
}

/* Reset universel : box-sizing cohérent pour tous les éléments */
* {
  box-sizing: border-box;
}

/* Comportement de défilement fluide pour les ancres */
html {
  scroll-behavior: smooth;
}

/*
   Corps de page (body)
   ────────────────────
   C'est l'élément racine visible. Tous les réglages globaux de
   typographie et de fond s'appliquent ici et sont hérités par tous
   les éléments enfants.
*/
body {
  /* margin: 0 supprime l'espace blanc par défaut que les navigateurs
       ajoutent autour du body. Sans ça, il y aurait un bord blanc visible. */
  margin: 0;
  /* min-height: 100vh garantit que le body occupe au moins toute la
       hauteur de la fenêtre (1vh = 1% de la hauteur visible).
       Sans ça, si la page est courte, le fond ne couvrirait pas tout. */
  min-height: 100vh;
  /* font-family : liste ordonnée de polices.
       Le navigateur essaie Inter en premier ; si indisponible, tente
       Segoe UI (Windows), puis Roboto (Android), etc.
       La chaîne se termine par 'sans-serif' = police sans empattement
       installée sur n'importe quel système. */
  font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  /* color : couleur par défaut de tout le texte de la page.
       Les éléments enfants héritent cette valeur sauf s'ils la redéfinissent. */
  color: var(--text);
  /* background : plusieurs couches empilées (la première déclarée
       est au-dessus, la dernière en dessous).

       Couche 1 — radial-gradient(circle at 12% 10%, ...):
         Halo lumineux cyan dans le coin supérieur gauche.
         'circle at 12% 10%' = centre du halo à 12% de la largeur, 10% de la hauteur.
         rgba(121,217,255,0.22) = cyan à 22% d'opacité (discret).
         'transparent 28rem' = le halo s'estompe jusqu'à 28rem du centre.

       Couche 2 — radial-gradient(circle at 78% 12%, ...):
         Même principe, mais halo orange dans le coin supérieur droit.

       Couche 3 — linear-gradient(145deg, ...):
         Dégradé linéaire incliné à 145° du bleu très sombre (#07101d)
         vers un bleu légèrement plus clair (#101827). */
  background: radial-gradient(circle at 12% 10%, rgba(121, 217, 255, 0.22), transparent 28rem), radial-gradient(circle at 78% 12%, rgba(246, 169, 77, 0.18), transparent 24rem), linear-gradient(145deg, #07101d 0%, #0b1424 45%, #101827 100%);
  /* line-height : hauteur de ligne = interligne.
       1.2 = 120% de la taille de police. Pour du corps de texte,
       1.5–1.7 est plus lisible, mais ici on cible un rendu compact. */
  line-height: 1.2;
}

  /*
   Grille décorative de fond (pseudo-élément ::before)
   ────────────────────────────────────────────────────
   ::before insère un élément visuel AVANT le contenu du body,
   sans ajouter de HTML. On l'utilise pour le fond en grille.
*/
  body::before {
    /* content: "" est obligatoire pour que ::before existe visuellement.
       On met une chaîne vide car on veut juste un fond graphique. */
    content: "";
    /* position: fixed = l'élément reste en place même si on scrolle.
       Contrairement à 'absolute', il ne bouge pas avec la page. */
    position: fixed;
    /* inset: 0 est un raccourci pour top:0, right:0, bottom:0, left:0.
       L'élément couvre donc toute la fenêtre. */
    inset: 0;
    /* pointer-events: none = l'élément est invisible aux clics et hover.
       Sans ça, la grille bloquerait toutes les interactions utilisateur. */
    pointer-events: none;
    /* opacity: 0.18 = 18% visible. La grille est volontairement discrète. */
    opacity: 0.18;
    /* background-image : deux dégradés superposés pour créer une grille :
       - Ligne 1 : trait horizontal blanc de 1px tous les 64px
       - Ligne 2 : même chose mais vertical (90deg = horizontal → vertical)
       Le résultat est une grille de cases de 64×64px. */
    background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    /* background-size : taille du motif qui se répète.
       64px 64px = chaque case de la grille fait 64×64 pixels. */
    background-size: 64px 64px;
    /* mask-image : masque progressif qui cache la grille vers le bas.
       'black' = zone visible, 'transparent 78%' = fondu entre 0% et 78%.
       La grille disparaît progressivement, évitant un effet trop chargé. */
    mask-image: linear-gradient(to bottom, black, transparent 78%);
  }


  /* ═══════════════════════════════════════════════════════
   02. CHARTES PAR SITE (body.site-*)
   ═══════════════════════════════════════════════════════

   Chaque site override les variables CSS root pour adapter
   couleurs, fonds et ombres tout en gardant la même structure HTML.
   ═══════════════════════════════════════════════════════ */

  /* ───────── Site Perso (naturel vert/beige) ───────── */
  body.site-perso {
    --bg: #f6ecd7;
    --bg-soft: #fff7e8;
    --bg-card: rgba(255, 250, 238, 0.78);
    --bg-card-strong: rgba(255, 247, 232, 0.92);
    --text: #24351f;
    --muted: #63735a;
    --line: rgba(82, 105, 58, 0.22);
    --accent: #d97f32; /* Orange terre cuite */
    --accent-2: #73a942; /* Vert jardin */
    --shadow: 0 22px 70px rgba(73, 61, 35, 0.18);
    --nav-bg: rgba(255, 247, 232, 0.78);
    background: radial-gradient(circle at 15% 12%, rgba(115, 169, 66, 0.28), transparent 24rem), radial-gradient(circle at 82% 18%, rgba(217, 127, 50, 0.22), transparent 24rem), linear-gradient(160deg, #f5ebd5 0%, #f7f0df 48%, #e4efcf 100%);
  }

  /* ───────── Site Labo (cosmos violet/cyan) ───────── */
  body.site-labo {
    --bg: #070719;
    --bg-soft: #111332;
    --bg-card: rgba(43, 50, 112, 0.35);
    --bg-card-strong: rgba(23, 25, 67, 0.72);
    --text: #f3f5ff;
    --muted: #b5b9e8;
    --line: rgba(130, 247, 255, 0.22);
    --accent: #ff4fd8; /* Magenta lumineux */
    --accent-2: #62f3ff; /* Cyan électrique */
    --shadow: 0 24px 90px rgba(22, 244, 255, 0.12);
    --nav-bg: rgba(7, 7, 25, 0.78);
    background: radial-gradient(circle at 18% 16%, rgba(98, 243, 255, 0.24), transparent 24rem), radial-gradient(circle at 80% 18%, rgba(255, 79, 216, 0.18), transparent 22rem), linear-gradient(145deg, #050511 0%, #0d0f2c 48%, #15133a 100%);
  }

  /* ───────── Site Lectures (crème/brun) ───────── */
  body.site-lectures {
    --bg: #f4e3c9;
    --bg-soft: #fbf0dc;
    --bg-card: rgba(255, 247, 232, 0.82);
    --bg-card-strong: rgba(255, 247, 232, 0.96);
    --text: #332215;
    --muted: #735d48;
    --line: rgba(107, 63, 37, 0.24);
    --accent: #8a4f2c; /* Brun chaud */
    --accent-2: #b9824f; /* Cuivre */
    --shadow: 0 22px 70px rgba(74, 45, 22, 0.18);
    --nav-bg: rgba(255, 247, 232, 0.82);
    background: linear-gradient(90deg, rgba(107, 63, 37, 0.055) 1px, transparent 1px), linear-gradient(#f7e8d0 0%, #efe0c7 100%);
    background-size: 28px 28px, auto; /* Grille subtile + dégradé */
  }


/* ═══════════════════════════════════════════════════════
   03. RESET LIENS & IMAGES
   ═══════════════════════════════════════════════════════ */

/* Liens : couleur héritée du parent, pas de soulignement par défaut */
a {
  color: inherit;
  text-decoration: none;
}

/* Images : toujours en bloc, largeur max 100% pour éviter les débordements */
img {
  display: block;
  max-width: 100%;
}


/* ═══════════════════════════════════════════════════════
   04. LAYOUT PRINCIPAL
   ═══════════════════════════════════════════════════════ */

/* Conteneur principal centré avec largeur maximale */
.site-shell {
  width: min(100%, 1440px);
  margin: 0 auto;
}

/*
   Barre de navigation (topbar)
   ─────────────────────────────
   Reste visible en haut de la page lors du défilement.
   Effet « verre givré » obtenu par backdrop-filter + fond semi-transparent.
*/
.topbar {
  /* position: sticky = reste collée en haut lors du scroll,
       contrairement à 'fixed' qui sort du flux du document. */
  position: sticky;
  /* top: 0 = distance depuis le haut de la fenêtre quand elle est sticky.
       Sans ça, sticky ne saurait pas où s'arrêter. */
  top: 0;
  /* z-index : couche d'empilement. Plus la valeur est haute, plus
       l'élément passe « devant » les autres. 20 garantit que la nav
       reste au-dessus des cartes, images et autres contenus. */
  z-index: 20;
  /* display: flex = les enfants directs (logo, nav, bouton) s'alignent
       horizontalement en ligne. C'est le modèle Flexbox. */
  display: flex;
  /* align-items: center = les enfants sont centrés verticalement. */
  align-items: center;
  /* justify-content: space-between = le logo va à gauche, le menu
       à droite, avec tout l'espace libre entre eux. */
  justify-content: space-between;
  /* gap: 1.5rem = espace entre chaque enfant direct (logo, liens, CTA). */
  gap: 1.5rem;
  /* width: min(calc(100% - 2rem), var(--max)) = prend la plus petite valeur
       entre (100% de l'écran moins 2rem de marges) et 1160px.
       Ainsi la nav ne dépasse jamais 1160px sur grand écran. */
  width: min(calc(100% - 2rem), var(--max));
  /* margin: 1rem auto 0 = 1rem en haut, auto gauche/droite (centrage), 0 en bas. */
  margin: 1rem auto 0;
  /* padding: 0.8rem 0.9rem = espace intérieur vertical / horizontal. */
  padding: 0.8rem 0.9rem;
  /* border : trait fin semi-transparent tout autour. */
  border: 1px solid var(--line);
  /* border-radius: 999px = valeur très grande qui arrondit complètement
       les coins courts → forme en « pilule » ou capsule. */
  border-radius: 999px;
  /* background : fond semi-transparent défini dans --nav-bg.*/
  background: var(--nav-bg);
  /* backdrop-filter: blur(20px) = flou l'arrière-plan visible DERRIÈRE
       l'élément. Crée l'effet « verre dépoli ».
       Fonctionne uniquement si background est semi-transparent. */
  backdrop-filter: blur(20px);
  /* box-shadow : ombre portée sous la nav pour la faire « flotter ». */
  box-shadow: var(--shadow);
}


/* ═══════════════════════════════════════════════════════
   05. NAVIGATION & MARQUE
   ═══════════════════════════════════════════════════════ */

/* Logo / marque :
   - Flex inline pour aligner l'avatar + texte
   - min-width: 0 pour permettre le text-overflow si besoin */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

/*
   Avatar / initiales de la marque
   ─────────────────────────────────
   Cercle coloré avec les initiales (ex: "FB").
*/
.brand-mark {
  /* display: grid + place-items: center = technique moderne pour centrer
       parfaitement le contenu (les initiales) dans le cercle,
       à la fois horizontalement et verticalement. */
  display: grid;
  place-items: center;
  /* Dimensions fixes pour maintenir la forme circulaire. */
  width: 44px;
  height: 44px;
  /* border-radius: 50% transforme un carré en cercle parfait. */
  border-radius: 50%;
  /* color : couleur du texte des initiales (sombre car le fond est clair). */
  color: #07101d;
  /* font-weight: 800 = très gras (échelle de 100 à 900). */
  font-weight: 800;
  /* letter-spacing: -0.05em = rapproche légèrement les lettres.
       em = unité relative à la taille de police courante.
       -0.05em sur de petites initiales = effet condensé. */
  letter-spacing: -0.05em;
  /* background: linear-gradient(135deg, ...) = dégradé diagonal
       partant du coin supérieur gauche (135°) en cyan vers l'orange. */
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}

/* Texte de la marque (titre + tagline empilés) */
.brand-text {
  display: grid;
  line-height: 1.05;
}

  .brand-text strong {
    font-size: 0.98rem;
  }

  .brand-text small {
    color: var(--muted);
    font-size: 0.74rem;
  }

/* Menu de navigation principal */
.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

  .nav a {
    padding: 0.65rem 0.85rem;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.92rem;
    transition: color .2s ease, background .2s ease;
  }

    .nav a:hover {
      color: var(--text);
      background: rgba(255,255,255,0.08);
    }

  /* Bouton CTA (Call-To-Action) distinct */
  .nav .nav-cta {
    color: #07101d;
    background: var(--accent);
    font-weight: 700;
  }

    .nav .nav-cta:hover {
      color: #07101d;
      background: #ffc277;
    }

/* Navigation entre univers (Home uniquement) */
.universe-nav {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  width: min(calc(100% - 2rem), var(--max));
  margin: 0.75rem auto 0;
}

  /*
   Liens de navigation inter-univers
   ─────────────────────────────────────────────
   Petites pilules cliquables affichées sous le menu sur la home.
*/
  .universe-nav a {
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px; /* Forme pilule */
    color: var(--muted);
    background: var(--bg-card); /* Fond translucide = léger relief */
    font-size: 0.86rem;
    font-weight: 800; /* Gras pour la lisibilité */
  }

    .universe-nav a:hover {
      color: var(--text); /* Texte plus lumineux au survol */
      border-color: var(--accent); /* Bord colorié à la couleur d'accent */
    }

/*
   Bouton « hamburger » pour menu mobile
   ──────────────────────────────────────
   Masqué par défaut (display: none), révélé via @media sur mobile.
   Les 3 lignes (span) forment l'icône hamburger (≡).
*/
.nav-toggle {
  /* display: none = caché sur bureau..
       Sur mobile (@media), il sera révélé avec display: block. */
  display: none;
  width: 44px;
  height: 44px;
  /* border: 0 supprime la bordure par défaut des boutons HTML.
       Par défaut, <button> a un bord gris visible. */
  border: 0;
  border-radius: 50%; /* Cercle parfait */
  background: rgba(255,255,255,0.08); /* Fond discret */
  cursor: pointer; /* Main au survol */
}

  /* Les 3 traits horizontaux du hamburger */
  .nav-toggle span {
    /* display: block = nécessaire pour qu'un <span> accepte width/height. */
    display: block;
    width: 18px;
    height: 2px; /* Trait fin */
    /* margin: 4px auto = 4px entre chaque trait, centré horizontalement. */
    margin: 4px auto;
    border-radius: 2px;
    background: var(--text);
  }


/* ═══════════════════════════════════════════════════════
   06. SECTIONS & TYPOGRAPHIE
   ═══════════════════════════════════════════════════════ */

/*
   Conteneur de section standard (.section-pad)
   ─────────────────────────────────────────────────
   Utilisé sur chaque <section> pour la cadrer proprement.
*/
.section-pad {
  /* min(A, B) = prend la plus petite des deux valeurs.
       calc(100% - 2rem) = largeur de la fenêtre moins 1rem de chaque côté.
       var(--max) = 1160px.
       Sur mobile étroit : la section prend toute la largeur moins 2rem.
       Sur grand écran : elle est bridée à 1160px. */
  width: min(calc(100% - 2rem), var(--max));
  /* margin: 0 auto = centré horizontalement (auto répartit l'espace également
       à gauche et à droite). Indispensable quand width < 100%. */
  margin: 0 auto;
  /* padding: 1rem 0 = espace intérieur de 1rem en haut et en bas,
       0 sur les côtés (les marges latérales sont gérées par width). */
  padding: 1rem 0;
}

.section-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 2rem;
}

.linkedin-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
}

  .linkedin-button:hover {
    text-decoration: underline;
  }

.linkedin-icon {
  width: 2rem;
  height: 2rem;
}
/*
   Section hero (bannière principale)
   ────────────────────────────────────
   Grille 2 colonnes : texte à gauche (~60%), visuel à droite (~40%).
*/
.hero {
  /* display: grid = mode de mise en page en grille CSS.
       Les enfants directs deviennent des cellules de la grille. */
  display: grid;
  /* grid-template-columns : définit les colonnes.
       minmax(0, 1.1fr) = colonne gauche : min 0px, max 1.1 fraction
       minmax(320px, 0.8fr) = colonne droite : min 320px, max 0.8 fraction
       'fr' = fraction de l'espace disponible (comme des parts de gâteau).
       1.1fr + 0.8fr = 1.9fr total → gauche = 1.1/1.9 ≈ 58%, droite ≈ 42% */
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.8fr);
  /* gap : espace entre les colonnes.
       clamp(min, préféré, max) = valeur fluide responsive :
       - minimum 2rem (jamais en dessous)
       - idéalement 5vw (5% de la largeur écran)
       - maximum 5rem (jamais au-dessus)
       Sur mobile étroit → 2rem, sur grand écran → 5rem. */
  gap: clamp(2rem, 5vw, 5rem);
  /* align-items: center = les 2 colonnes sont alignées verticalement
       par leur centre. Sans ça, elles s'étirent en hauteur. */
  align-items: center;
  /* min-height: calc(100vh - 90px) = au moins toute la hauteur de fenêtre
       moins 90px (hauteur approximative de la navbar sticky).
       Le hero remplit toujours l'écran sans masquer la nav. */
  min-height: 100px;
}

/* Eyebrow : surtitre en petites majuscules */
.eyebrow {
  margin: 0 0 0.9rem;
  color: var(--accent-2);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/*
   Titres (h1, h2, h3)
   ────────────────────
   Réglages communs d'abord, puis taille spécifique par niveau.
*/
h1, h2, h3 {
  /* margin: 0 supprime l'espace par défaut que les navigateurs ajoutent
       au-dessus et en dessous de chaque titre. */
  margin: 0;
  /* line-height: 1.06 = interligne très serré (106% de la taille de police).
       Pour les gros titres, l'interligne serré est plus élégant visuellement.
       Pour du texte courant (p), on préfère 1.5–1.7 pour la lisibilité. */
  line-height: 1.06;
  /* letter-spacing: -0.045em = espacement entre lettres légèrement négatif.
       Resserrer le tracking sur les gros titres est une convention typographique
       qui donne un aspect « condensé » et percutant. */
  letter-spacing: -0.045em;
  margin-bottom: 1rem;
}

h1 {
  max-width: 100%;
  /* clamp(2rem, 1vw, 3rem) = taille fluide :
       - 2rem = taille minimale (toujours au moins ça, même sur mobile)
       - 1vw  = taille préférée (1% de la largeur d'écran)
       - 3rem = taille maximale
       Note : ici 1vw est faible, donc h1 reste proche de 2rem sur la plupart des écrans.
       Ajusté davantage dans le @media pour mobile. */
  font-size: clamp(2rem, 1vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 1vw, 2rem);
}

h3 {
  font-size: 1.3rem;
}

/* Paragraphes : couleur atténuée par défaut */
p {
  color: var(--muted);
}

/* Paragraphes de présentation agrandis */
.hero-lead, .page-hero p, .section-heading p {
  max-width: 760px;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

/* Conteneur de boutons d'action */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}


/* ═══════════════════════════════════════════════════════
   07. BOUTONS
   ═══════════════════════════════════════════════════════ */

/*
   Boutons (.button)
   ──────────────────
   Classe de base + deux variantes : primaire et secondaire.
*/
.button {
  /* display: inline-flex = le bouton s'intègre dans le flux du texte
       (comme inline) mais ses enfants sont gérés en flexbox.
       Permet de centrer l'icône et le texte facilement. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* min-height: 48px = hauteur minimale pour respecter les standards
       d'accessibilité : une cible tactile doit faire au moins 44–48px. */
  min-height: 48px;
  /* padding: vertical horizontal = espace intérieur. */
  padding: 0.85rem 1.2rem;
  /* border: 1px solid transparent = une bordure invisible.
       Elle existe mais sans couleur → pas d'effet visuel.
       Pourquoi ? Pour que l'animation de transition soit douce :
       si on n'a pas de border au départ, ajouter une border via :hover
       ferait sauter la taille. Avec une border transparente, la taille
       est déjà réservée. */
  border: 1px solid transparent;
  border-radius: 999px; /* Forme capsule */
  font-weight: 800;
  /* transition : liste des propriétés à animer lors d'un changement.
       transform, background et border-color seront animés sur 0.2s. */
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

  .button:hover {
    /* translateY(-2px) = déplace l'élément de 2px vers le haut.
       Effet subtil d'élévation au survol, très courant en UI moderne. */
    transform: translateY(-2px);
  }

/* Bouton principal : fond coloré pour l'action principale */
.button-primary {
  color: #07101d; /* Texte sombre sur fond clair */
  background: linear-gradient(135deg, var(--accent), #ffd08d);
}

/* Bouton secondaire : fond très discret, juste une bordure */
.button-secondary {
  color: var(--text);
  border-color: var(--line); /* Bordure semi-transparente */
  background: rgba(255,255,255,0.06); /* Fond quasi invisible */
}


/* ═══════════════════════════════════════════════════════
   08. CARTES & COMPOSANTS GÉNÉRIQUES
   ═══════════════════════════════════════════════════════ */

/* Carte hero : utilisée pour encadrer du contenu dans la section hero */
.hero-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04));
  box-shadow: var(--shadow);
}

/* Carte d'orbit : affichage centré avec halos d'accent */
.orbit-card {
  place-items: center;
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 50%, rgba(246,169,77,0.2), transparent 45%), linear-gradient(145deg, rgba(121,217,255,0.14), rgba(255,255,255,0.03));
  overflow: hidden;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  overflow: hidden;
  padding: 0.75rem;
}

  .orbit-card img {
    display: block;
    width: 100%;
    height: auto;
  }

/* Grille de stats (2 colonnes) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}

  .stat-grid div, .mini-metric {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,0.055);
  }

    .stat-grid strong, .mini-metric strong {
      display: block;
      font-size: 1.15rem;
    }

    .stat-grid span, .mini-metric span {
      display: block;
      margin-top: 0.15rem;
      color: var(--muted);
      font-size: 0.88rem;
    }

/* Section avec fond atténué */
.section-muted {
  width: min(calc(100% - 2rem), var(--max));
  padding-inline: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 10px);
  background: rgba(255,255,255,0.045);
}

.section-heading {
  margin-bottom: 0rem;
}

/* Grilles de cartes génériques */
.card-grid {
  display: grid;
  gap: 1rem;
}

  .card-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

/*
   Composants de carte (base stylistique commune)
   ──────────────────────────────────────────────
   Plusieurs sélecteurs séparés par des virgules = mêmes règles pour tous.
   C'est le principe DRY (Don't Repeat Yourself).
*/
.card, .content-card, .side-panel, .project-card, .article-card, .section-contact {
  border: 1px solid var(--line); /* Bord semi-transparent */
  border-radius: var(--radius); /* Arrondi standard (24px) */
  background: var(--bg-card); /* Fond translucide */
  /* box-shadow : ombre douce sous la carte.
       0 = pas de décalage horizontal
       16px = décalage vertical
       60px = rayon de flou large (ombre très douce)
       rgba(0,0,0,0.16) = noir à 16% d'opacité */
  box-shadow: 0 16px 60px rgba(0,0,0,0.16);
}

.card {
  padding: 1.5rem;
}

/* Icône de carte : pastille ronde avec couleur d'accent */
.card-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  color: #07101d;
  font-weight: 900;
  background: var(--accent-2);
}

/* Section divisée (texte / visuel) */
.split-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
  gap: 2rem;
  align-items: center;
}

/* Lien texte avec flèche */
.text-link {
  display: inline-flex;
  margin-top: 1rem;
  color: var(--accent);
  font-weight: 800;
}

  .text-link::after {
    content: " →";
  }


/* ═══════════════════════════════════════════════════════
   09. TERMINAL / CODE
   ═══════════════════════════════════════════════════════ */

/* Fenêtre de terminal simulée */
.terminal {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #050a12;
  box-shadow: var(--shadow);
}

/* Barre supérieure du terminal (pastilles macOS style) */
.terminal-bar {
  display: flex;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

  .terminal-bar span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
  }

/* Bloc de code préformaté */
pre {
  margin: 0;
  padding: 1.2rem;
  overflow: auto;
  color: #d5efff;
  font-size: 0.94rem;
}


/* ═══════════════════════════════════════════════════════
   10. PAGES & LAYOUTS CONTENU
   ═══════════════════════════════════════════════════════ */

/* Hero de page compact (moins de hauteur que le hero principal) */
.page-hero.compact {
  padding-top: 5rem;
  padding-bottom: 3rem;
}

/* Layout article/sidebar : 2 colonnes (contenu principal + panneau latéral) */
.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1rem;
  align-items: start;
}

.content-card, .side-panel {
  padding: clamp(1.4rem, 3vw, 2rem);
}

  .content-card h2 + p {
    margin-top: 0.8rem;
  }

/*
   Listes à puces stylisées (.check-list, .feature-list)
   ──────────────────────────────────────────────
   Remplace les puces HTML natives par des points ronds colorés.
*/
.check-list, .feature-list {
  display: grid; /* Chaque <li> occupe une ligne de la grille */
  gap: 0.75rem; /* Espace entre chaque item */
  margin: 1rem 0 0;
  padding: 0;
  /* list-style: none supprime les puces/numéros HTML par défaut.
       On les remplace par ::before (ci-dessous). */
  list-style: none;
}

  .check-list li, .feature-list li {
    /* position: relative = nécessaire pour que ::before puisse
       être positionné de manière absolue PAR RAPPORT à ce li. */
    position: relative;
    /* padding-left: 1.55rem = crée de la place à gauche pour la puce. */
    padding-left: 1.55rem;
    color: var(--muted);
  }

    /*
   Puce ronde générée par CSS (pas de HTML supplémentaire)
   ::before insère un contenu AVANT le texte de chaque li.
*/
    .check-list li::before, .feature-list li::before {
      /* content: "" = élément vide, existera visuellement grâce aux propriétés
       de taille et de couleur ci-dessous. */
      content: "";
      /* position: absolute = positionné par rapport au li parent (position:relative). */
      position: absolute;
      /* left: 0 = collé à gauche du li (dans la zone de padding). */
      left: 0;
      /* top: 0.65em = légèrement sous le haut du texte, pour aligner
       la puce avec le milieu de la première ligne. */
      top: 0.65em;
      /* Petite pastille de 8×8px */
      width: 8px;
      height: 8px;
      border-radius: 50%; /* Cercle parfait */
      background: var(--accent); /* Couleur d'accent du site */
    }

/* Liste de projets et grille d'articles */
.project-list, .article-grid {
  display: grid;
  gap: 1rem;
}

.project-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2rem);
}

  .project-card p:last-of-type {
    max-width: 760px;
  }

.article-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.article-card {
  padding: 1.5rem;
}

  .article-card span {
    display: inline-flex;
    margin-top: 1rem;
    color: var(--accent);
    font-weight: 800;
    font-size: 0.9rem;
  }


/* ═══════════════════════════════════════════════════════
   11. UNIVERS — HUB & CARTES
   ═══════════════════════════════════════════════════════ */

/* Hub des 4 univers sur la page d'accueil */
.universe-hub {
  padding-top: 2rem;
}

.universe-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

/*
   Carte d'univers (.universe-card)
   ──────────────────────────────────
   Chaque univers (Pro, Perso, Labo, Lectures) a sa carte sur la home.
   L'effet de halo coloré vient du pseudo-élément ::after.
*/
.universe-card {
  /* position: relative = nécessaire pour que ::after
       (halo coloré) soit positionné par rapport à la carte. */
  position: relative;
  min-height: 260px;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* overflow: hidden = coupe tout ce qui dépasse des bords arrondis.
       Sans ça, le halo ::after déborderaient hors de la carte. */
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 18px 70px rgba(0,0,0,0.16);
  /* transition : anime 2 propriétés au survol en 200ms. */
  transition: transform .2s ease, border-color .2s ease;
}

  /* Survol : légère remontée + bord accenté */
  .universe-card:hover {
    transform: translateY(-4px); /* Monte de 4px */
    border-color: var(--accent); /* Bord coloré */
  }

  /*
   Halo décoratif en bas de la carte (::after)
   ───────────────────────────────────────────
   ::after insère un élément INVISIBLE après le contenu,
   mais visible grâce à background + filter: blur.
*/
  .universe-card::after {
    content: ""; /* Obligatoire pour exister */
    position: absolute;
    /* inset: auto -20% -28% 25% = top auto, right -20%, bottom -28%, left 25%.
       Le halo déborde intentionnellement des bords de la carte
       (valeurs négatives), overflow:hidden le coupe proprement. */
    inset: auto -20% -28% 25%;
    height: 150px;
    border-radius: 999px; /* Ellipse / bulle */
    opacity: 0.75;
    /* filter: blur(4px) = flou l'ellipse pour un effet halo lumineux doux.
       C'est différent de backdrop-filter : ici c'est l'élément lui-même
       qui est flou, pas l'arrière-plan. */
    filter: blur(4px);
  }

  /* Labels d'univers + lab-code + season-card span (style commun) */
  .universe-card span,
  .lab-code,
  .reading-label,
  .season-card span {
    display: inline-flex;
    margin-bottom: 1rem;
    color: var(--accent-2);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .universe-card p {
    position: relative;
    z-index: 1;
  }

/* Halos spécifiques par univers (dégradés selon la charte) */
.universe-card-pro::after {
  background: linear-gradient(135deg, rgba(121,217,255,0.45), rgba(246,169,77,0.3));
}

.universe-card-perso::after {
  background: linear-gradient(135deg, rgba(115,169,66,0.45), rgba(217,127,50,0.32));
}

.universe-card-labo::after {
  background: linear-gradient(135deg, rgba(98,243,255,0.46), rgba(255,79,216,0.35));
}

.universe-card-lectures::after {
  background: linear-gradient(135deg, rgba(185,130,79,0.46), rgba(107,63,37,0.34));
}


/* ═══════════════════════════════════════════════════════
   12. COMPOSANTS PERSO (agrumes, bricolage, maison)
   ═══════════════════════════════════════════════════════ */

/* Hero de sous-site : grid vertical compact */
.subsite-hero {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: clamp(0rem, 1vw, 1rem);
  align-items: center;
  min-height: 560px;
}

  .subsite-hero h1 {
    max-width: 980px;
  }

/* Hero Perso & Lectures : version compacte */
.perso-hero,
.lecture-hero {
  min-height: 180px;
}

/* Composants partagés : cartes avec effets spéciaux */
.season-card,
.radar-card,
.book-stack,
.note-card,
.lab-panel,
.reading-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

/* Carte saisonnière (Perso) : légère rotation pour effet post-it */
.season-card {
  padding: 1.6rem;
  transform: rotate(2deg);
}

  .season-card strong {
    display: block;
    color: var(--text);
    font-size: 1.8rem;
    line-height: 1.05;
  }

/* Board Perso & étagère de lectures */
.perso-board,
.reading-shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* Carte-note (Perso) : fond ligné comme un carnet */
.note-card {
  position: relative;
  padding: 1.5rem;
  background: linear-gradient(transparent 31px, rgba(115, 169, 66, 0.12) 32px), var(--bg-card-strong);
  background-size: 100% 32px;
}

/* Punaise ronde dans le coin */
.note-pin {
  position: absolute;
  right: 1.2rem;
  top: 1rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}


/* ═══════════════════════════════════════════════════════
   13. COMPOSANTS LABO (simulations, UAP, hypothèses)
   ═══════════════════════════════════════════════════════ */

/* Hero du labo avec ligne lumineuse horizontale */
.labo-hero {
  position: relative;
}

  .labo-hero::after {
    content: "";
    position: absolute;
    inset: 7rem 0 auto auto;
    width: 44%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
    box-shadow: 0 0 24px var(--accent-2);
  }

/* Carte radar avec cercles concentriques */
.radar-card {
  display: grid;
  place-items: center;
  min-height: 310px;
  padding: 0.5rem;
  text-align: center;
  background: repeating-radial-gradient(circle, rgba(98, 243, 255, 0.2) 0 1px, transparent 2px 32px), var(--bg-card-strong);
}

  .radar-card span {
    width: 150px;
    height: 150px;
    border: 1px solid var(--accent-2);
    border-radius: 50%;
    background: radial-gradient(circle at 62% 42%, var(--accent), transparent 8px);
    box-shadow: 0 0 28px rgba(98, 243, 255, 0.28);
  }

  .radar-card strong {
    color: var(--accent-2);
    font-size: 1.4rem;
    text-transform: uppercase;
  }

/* Grille du labo : 2 colonnes */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.lab-panel {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(135deg, rgba(98, 243, 255, 0.12), transparent 38%), var(--bg-card);
}

/* Galerie de placeholders (Labo) */
.placeholder-gallery div span {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0,0,0,0.12);
}


/* ═══════════════════════════════════════════════════════
   14. COMPOSANTS LECTURES (book-stack, reading-card...)
   ═══════════════════════════════════════════════════════ */

/* Pile de livres (Lectures) : 3 bandes empilées vers le bas */
.book-stack {
  display: grid;
  align-content: end;
  gap: 0.4rem;
  min-height: 120px;
  max-height: 120px;
  max-width: 150px;
  padding: 1.0rem;
  background: radial-gradient(circle at 20% 15%, rgba(185, 130, 79, 0.25), transparent 12rem), var(--bg-card-strong);
}

  .book-stack span {
    display: block;
    height: 24px;
    border-radius: 10px 16px 16px 10px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    box-shadow: 0 12px 24px rgba(74,45,22,0.16);
  }

    .book-stack span:nth-child(2) {
      width: 82%;
      margin-left: auto;
      background: linear-gradient(90deg, #3f2b1e, #8a4f2c);
    }

    .book-stack span:nth-child(3) {
      width: 92%;
      background: linear-gradient(90deg, #c09662, #6b3f25);
    }

/* Carte de lecture avec lignes verticales */
.reading-card {
  padding: 1.5rem;
  background: linear-gradient(90deg, rgba(107,63,37,0.09) 1px, transparent 1px), var(--bg-card-strong);
  background-size: 18px 100%;
}

/* Navigateur de lectures : contient carrousel + panneaux */
.reading-browser {
  display: grid;
  gap: 1.2rem;
}


/* ═══════════════════════════════════════════════════════
   15. CARROUSEL THÉMATIQUE (lectures, pro, perso, labo)
   ═══════════════════════════════════════════════════════

   Carrousel 3D avec perspective CSS pour afficher les thèmes.
   États possibles : .is-active, .is-before, .is-after, .is-far-*
   ═══════════════════════════════════════════════════════ */

/*
   Zone principale du carrousel (.theme-carousel-shell)
   ──────────────────────────────────────────────
   Bloc visuel englobant le carrousel (fond coloré + padding généreux).
   Le fond par défaut est jaune-crème ; chaque site l'override (section 22).
*/
.theme-carousel-shell {
  /* position: relative = les boutons < > (position:absolute) se positionnent
       par rapport à ce conteneur. */
  position: relative;
  /* display: grid = utilisé ici pour que le contenu (le carrousel)
       s'étire naturellement à l'intérieur. */
  display: grid;
  width: 100%;
  margin-inline: auto;
  padding: 1rem 3.5rem 0.0rem;
  border-radius: 1.25rem;
  min-height: 350px;
  /* padding avec clamp() sur 2 axes :
       - Vertical : de 2.5rem à 5rem selon l'écran
       - Horizontal : de 4rem à 8rem (espace pour les boutons < >) */
  /* Fond par défaut (crème/jaune pour Lectures) :
       Couche 1 : halo discret au centre.
       Couche 2 : dégradé linéaire jaune pâle. */
  background: radial-gradient(circle at 50% 46%, rgba(255, 247, 220, 0.28), transparent 22rem), linear-gradient(120deg, #f9ffc0 0%, #f7fadc 46%, #faffd2 100%);
  /* box-shadow inset : ombre à l'intérieur de l'élément (bord supérieur
       légèrement illuminé pour un effet de verre/relief). */
  box-shadow: inset 0 1px 0 rgba(255,220,170,0.22);
  border-radius: 1.5rem;
  overflow: hidden; /* Coupe les slides qui déborderait des bords */
}

.theme-carousel-wrapper {
  position: relative;
  width: min(calc(100% - 2rem), var(--max));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

/*
   Scène 3D du carrousel (.theme-carousel)
   ───────────────────────────────────────
   Ce conteneur active la perspective 3D pour ses enfants (.theme-slide).
   Les slides sont toutes position:absolute et se superposent.
   Le JS les déplace en modifiant leurs classes (is-active, is-before...).
*/
.theme-carousel {
  position: relative;
  width: 100%;
  min-height: 200px;
  /* perspective: 1400px = « distance » entre l'observateur et le plan 3D.
       Plus la valeur est petite, plus l'effet 3D est exagéré.
       1400px donne un effet discret et élégant. */
  perspective: 1800px;
  /* transform-style: preserve-3d = les éléments enfants (éléments
       intérieurs de .theme-carousel) participent à l'espace 3D.
       Sans ça, les rotateY des slides n'auraient aucun effet visible. */
  transform-style: preserve-3d;
}

/*
   Boutons de navigation < > du carrousel
   ────────────────────────────────────────────
   Positionnés en absolu dans .theme-carousel-shell (position:relative).
   Le signe « < » ou « > » est le contenu HTML du bouton.
*/
.theme-carousel-control {
  position: absolute;
  /* top: 40% + transform: translateY(-50%) = centrage vertical.
       top: 40% place le bord supérieur à 40% de la hauteur du conteneur.
       translateY(-50%) remonte le bouton de 50% de sa propre hauteur.
       Résultat : le centre du bouton est à 40% de la hauteur. */
  top: 30%;
  /* z-index: 8 = passe au-dessus des slides (z-index 2–6). */
  z-index: 8;
  display: grid;
  place-items: center; /* Centre le symbole « < » ou « > » */

  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 210, 150, 0.5);
  border-radius: 50%; /* Cercle */
  color: #fff;
  background: rgba(107, 63, 37, 0.45);
  box-shadow: 0 8px 24px rgba(60, 30, 10, 0.3);
  cursor: pointer;
  font-size: 2rem; /* Taille du symbole « ‹ » / « › » */
  line-height: 1; /* Évite un surplus de hauteur dû à l'interligne */
  backdrop-filter: blur(6px); /* Flou de l'arrière-plan derrière le bouton */
  transform: translateY(-50%);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

  /* Positionnement du bouton « précédent » à gauche */
  .theme-carousel-control[data-reading-carousel-previous] {
    /* clamp(1rem, 3vw, 2.5rem) = entre 1rem et 2.5rem selon la largeur écran. */
    left: clamp(1rem, 3vw, 2.5rem);
  }

  /* Positionnement du bouton « suivant » à droite */
  .theme-carousel-control[data-reading-carousel-next] {
    right: clamp(1rem, 3vw, 2.5rem);
  }

  .theme-carousel-control:hover {
    /* translateY(calc(-50% - 2px)) = conserve le centrage vertical (-50%)
       ET remonte de 2px supplémentaires pour l'effet d'élévation. */
    transform: translateY(calc(-50% - 2px));
    border-color: rgba(255, 210, 150, 0.9); /* Bord plus visible */
    background: rgba(107, 63, 37, 0.72); /* Plus opaque */
  }

  /* État désactivé (plus de slide précédente/suivante) */
  .theme-carousel-control:disabled {
    cursor: not-allowed; /* Curseur interdit */
    opacity: 0.45; /* Grisé à 45% d'opacité */
    transform: none; /* Supprime le transform pour ne pas décaler */
  }

/*
   Texte de position (ex : "2 / 5")
   ────────────────────────────────────────────
   Affiché sous le carrousel (généré par le JS).
*/
.theme-carousel-status {
  padding: 0.05rem 0.75rem; /* Espacements verticaux très faibles */
  color: var(--muted); /* Couleur secondaire (grisée) */
  font-size: 0.88rem; /* Légèrement plus petit que le texte courant */
  font-weight: 800; /* Gras pour le lire facilement */
  text-align: center; /* Centré sous le carrousel */
  max-height: 25px;
}

/*
   Points de pagination (dots)
   ────────────────────────────────────────────
   Un point = une slide. Le point actif est plus grand et coloré.
   Les overrides par site (section 22) changent leur couleur.
*/
.theme-carousel-dots {
  display: flex; /* Aligne les points horizontalement */
  justify-content: center; /* Centrés */
  gap: 0.5rem; /* Espace entre les points */
  margin-top: 0.0rem; /* Espace sous le carrousel */
  max-height: 25px;
}

.theme-carousel-dot {
  width: 16px;
  height: 16px;
  padding: 0;
  /* border transparent par défaut = invisible, mais réservé pour
     le mode is-active qui ajoute une bordure subtile. */
  border: 2px solid rgba(255, 255, 255, 0.0);
  border-radius: 50%; /* Cercle parfait */
  background: rgba(255, 0, 0, 0.5); /* Couleur de base (override par site) */
  cursor: pointer;
  /* transition = animation du transform et du fond en 200ms */
  transition: transform .2s ease, background .2s ease;
}

  /* Dot survolé : s'élargit légèrement */
  .theme-carousel-dot:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.25); /* 125% de la taille, soit 20px */
  }

  /* Dot actif (slide en cours) : encore plus grand + couleur vive */
  .theme-carousel-dot.is-active {
    background: #fbff9b; /* Jaune vif (override par site) */
    transform: scale(1.5); /* 150% de la taille, soit 24px */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Bord très discret */
  }

/*
   Slide thématique (.theme-slide)
   ═══════════════════════════════════════════════════════
   Chaque slide est positionnée en ABSOLU au centre du conteneur 3D.
   Le JS modifie les classes (is-active, is-before...) pour les déplacer.
   Toutes les slides existent dans le DOM en permanence.
*/
.theme-slide {
  /* position: absolute + top:50% + left:50% = point d'ancrage au centre
       du .theme-carousel. Le transform ci-dessous corrige le décalage. */
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid; /* Les 3 éléments internes (span, strong, small) en grille */
  gap: 0.55rem; /* Espace entre le surtitre, le titre et la description */
  /* width : min(380px, 82vw) = au maximum 380px, mais jamais plus
       que 82% de la largeur d'écran (pour les petits mobiles). */
  width: min(300px, 76vw);
  min-height: 200px;
  padding: 1.0rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: calc(var(--radius)); /* = 24px + 0px = 30px */
  color: var(--text);
  text-align: left;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.97), rgba(255, 247, 232, 0.9));
  box-shadow: 0 26px 60px rgba(28, 14, 54, 0.3);
  cursor: pointer;
  /* transform : état initial = translate + scale.
       translate(-50%, -50%) recentre la slide (annule top:50%/left:50%).
       scale(0.82) = 82% de la taille originale (slides non-actives sont plus petites). */
  transform: translate(-50%, -50%) scale(0.82);
  /* transform-style: preserve-3d = les éléments ENFANTS de la slide
       participent à l'espace 3D (pour les rotateY). */
  transform-style: preserve-3d;
  /* transition : animation des changements de transform/opacity.
       'transform 1.945s cubic-bezier(.2, .7, .2, 1)' :
         - 1.945s = durée longue pour un glissement fluide et élégant
         - cubic-bezier(.2, .7, .2, 1) = courbe personnalisée :
           démarre lentement, accélère au milieu, décélère en fin
           (plus expressif que 'ease' standard).
       'opacity .45s ease' = fondu plus rapide (450ms).
       'box-shadow .45s ease' = ombre animée. */
  transition: transform 0.545s cubic-bezier(.2, .7, .2, 1), opacity .8145s ease, box-shadow .8145s ease;
  /* will-change : indique au navigateur quelles propriétés vont changer.
       Permet une optimisation GPU en avance. À utiliser avec parcimonie. */
  will-change: transform, opacity;
}

  /* Slide active (celle affichée au centre) */
  .theme-slide.is-active {
    z-index: 6; /* Passe devant les slides adjacentes */
    opacity: 1; /* Pleinement visible */
    transform: translate(-50%, -50%) scale(1); /* Taille pleine */
    box-shadow: 0 34px 80px rgba(18, 9, 38, 0.42);
  }

  /* Slide à gauche de la slide active */
  .theme-slide.is-before {
    z-index: 4; /* Derrière la slide active (z-index 6) */
    opacity: 0.5; /* Légèrement transparente */
    /* translate(-50% - 235px) = déplacée de 235px à gauche du centre.
       rotateY(35deg) = inclinée vers l'arrière (effet coverflow/carousel 3D). */
    transform: translate(calc(-50% - 235px), -50%) rotateY(35deg) scale(0.582);
  }

  /* Slide à droite de la slide active (symétrique) */
  .theme-slide.is-after {
    z-index: 4;
    opacity: 0.5;
    transform: translate(calc(-50% + 235px), -50%) rotateY(-35deg) scale(0.582);
  }

  /* Slides lointaines (2 positions à gauche/droite) : invisibles */
  .theme-slide.is-far-before {
    z-index: 2; /* Derrière tout */
    opacity: 0; /* Complètement invisible */
    pointer-events: none; /* Ne peut pas être cliquée */
    transform: translate(calc(-50% - 360px), -50%) rotateY(40deg) scale(0.6);
  }

  .theme-slide.is-far-after {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transform: translate(calc(-50% + 360px), -50%) rotateY(-40deg) scale(0.6);
  }

  /* Accessibilité : bord visible quand la slide reçoit le focus clavier */
  .theme-slide:focus-visible {
    /* outline ≠ border : outline ne modifie pas la taille de l'élément.
       outline-offset = distance entre l'élément et le contour. */
    outline: 3px solid #fff;
    outline-offset: 4px;
  }

  /* Typographie interne des slides */
  .theme-slide span {
    color: var(--accent-2);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .theme-slide strong {
    font-size: 1.4rem;
    line-height: 1.1;
    color: var(--text);
  }

  .theme-slide small {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.45;
  }

/* Bordures thématiques (top) pour chaque thème */
.theme-slide-ia {
  border-top: 4px solid #7b5bf0;
}

.theme-slide-economie {
  border-top: 4px solid #1f9d72;
}

.theme-slide-ecologie {
  border-top: 4px solid #d98a2b;
}

.theme-slide-geopolitique {
  border-top: 4px solid #c0392b;
}

.theme-slide-politique {
  border-top: 4px solid #101010;
}

.theme-slide-sante {
  border-top: 4px solid #dddd20;
}

.theme-slide-education {
  border-top: 4px solid #ffaa80;
}

.theme-slide-sociologie {
  border-top: 4px solid #4080ff;
}

/* Thèmes Pro */
.theme-slide-dotnet {
  border-top: 4px solid #2563eb;
}

.theme-slide-wpf {
  border-top: 4px solid #7c3aed;
}

.theme-slide-qualite {
  border-top: 4px solid #0f766e;
}

/* Thèmes Perso */
.theme-slide-agrumes {
  border-top: 4px solid #d97f32;
}

.theme-slide-bricolage {
  border-top: 4px solid #73a942;
}

.theme-slide-maison {
  border-top: 4px solid #8b6f47;
}

/* Thèmes Labo */
.theme-slide-simulations {
  border-top: 4px solid #62f3ff;
}

.theme-slide-uap {
  border-top: 4px solid #ff4fd8;
}

.theme-slide-hypotheses {
  border-top: 4px solid #b5b9e8;
}

/* Panneaux de thèmes : conteneur pour les cartes de résumé */
.reading-theme-panels {
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 8px);
  background: rgba(255, 247, 232, 0.46);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.reading-theme-panel {
  padding: clamp(1rem, 3vw, 1.4rem);
}

  .reading-theme-panel[hidden] {
    display: none;
  }

.reading-entry {
  box-shadow: none;
}

.empty-reading-entry {
  border-style: dashed;
}

/* Liste des résumés d'articles */
.reading-summary-list {
  display: grid;
  gap: clamp(0.9rem, 2.5vw, 1.25rem);
}

/* Carte de résumé : bordure gauche colorée selon le thème */
.reading-summary-card {
  box-shadow: none;
  border-left: 4px solid var(--theme-accent, #8a4f2c);
}

  .reading-summary-card h3 {
    margin: 0.35rem 0 0.5rem;
  }

.reading-summary-meta {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--theme-accent, #8a4f2c);
}

.reading-summary-text {
  margin: 0.5rem 0 0.9rem;
}


/* ═══════════════════════════════════════════════════════
   16. PAGES DÉTAIL (lectures, articles...)
   ═══════════════════════════════════════════════════════ */

.reading-article-page {
  max-width: 1600px;
  margin-inline: auto;
}

/* Conteneur article détail : bordure top colorée selon thème */
.reading-article {
  border: 1px solid var(--line);
  border-top: 6px solid var(--theme-accent, #8a4f2c);
  border-radius: calc(var(--radius) + 8px);
  background: var( --bg-card);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}

.reading-article-header h1 {
  margin: 0.4rem 0 1rem;
}

.reading-article-header .eyebrow {
  color: var(--theme-accent, #8a4f2c);
}
/* Métadonnées de l'article (auteur, date, édition...) */
.reading-meta {
  display: grid;
  gap: 0.5rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0 0 1.5rem;
  padding: 0;
}

  .reading-meta div {
    margin: 0;
  }

  .reading-meta dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted, #6b6b6b);
  }

  .reading-meta dd {
    margin: 0.15rem 0 0;
    font-weight: 600;
  }

.reading-article-lead {
  font-size: 1.1rem;
  font-weight: 500;
}

.reading-article-back {
  margin-top: 1.75rem;
}
/* Contenu riche (Markdown rendu en HTML) */
.reading-rich > :first-child {
  margin-top: 0;
}

.reading-rich > :last-child {
  margin-bottom: 0;
}

.reading-rich p {
  margin: 0 0 1rem;
}

.reading-rich a {
  color: var(--theme-accent, #8a4f2c);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reading-rich img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

.reading-rich figure {
  margin: 1.25rem 0;
}

  .reading-rich figure img {
    margin-inline: auto;
  }

.reading-rich figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted, #6b6b6b);
  text-align: center;
}

.reading-rich ul,
.reading-rich ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.reading-rich li {
  margin-bottom: 0.35rem;
}

.reading-rich blockquote {
  margin: 1.25rem 0;
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 4px solid var(--theme-accent, #8a4f2c);
  color: var(--muted, #4a4a4a);
  font-style: italic;
}
/* ═══════════════════════════════════════════════════════
   17. EFFETS DÉCORATIFS SUPPLÉMENTAIRES
   ═══════════════════════════════════════════════════════ */
/* Halo orange sur le hero galactique (Home) */
.galaxy-hero {
  position: relative;
}

  .galaxy-hero::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246,169,77,0.24), transparent 62%);
    transform: translateY(-50%);
    pointer-events: none;
  }
/* Galerie de placeholders (grille 3 colonnes) */
.placeholder-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

  .placeholder-gallery div {
    display: grid;
    place-items: center;
    min-height: 220px;
    border: 1px dashed rgba(255,255,255,0.24);
    border-radius: var(--radius);
    color: var(--muted);
    background: radial-gradient(circle at 50% 50%, rgba(121,217,255,0.15), transparent 48%), rgba(255,255,255,0.035);
  }
/* ═══════════════════════════════════════════════════════
   18. FOOTER
   ═══════════════════════════════════════════════════════ */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(calc(100% - 2rem), var(--max));
  margin: 0 auto;
  padding: 1rem 0 2rem;
  border-top: 1px solid var(--line);
}

  .footer p {
    margin: 0.25rem 0 0;
  }

.footer-links {
  display: flex;
  gap: 1rem;
  color: var(--muted);
}
/* ═══════════════════════════════════════════════════════
   19. ANIMATIONS
   ═══════════════════════════════════════════════════════ */
/*
   Animation d'apparition (.reveal)
   ────────────────────────────────────────────
   Les éléments avec .reveal partent invisibles et légèrement décalés
   vers le bas, puis glissent en place à la fraicheur du chargement.
   Le JS peut aussi retirer la classe pour déclencher l'animation au scroll.
*/
.reveal {
  /* opacity: 0 = invisible à l'état initial. */
  opacity: 0;
  /* transform: translateY(16px) = l'élément est décalé de 16px vers le bas
       à l'état initial. L'animation le ramènera à sa position normale. */
  transform: translateY(16px);
  /* animation : raccourci pour définir l'animation.
       Syntaxe : nom | durée | fonction | remplissage.
       'reveal' = nom du @keyframes ci-dessous.
       '.7s' = durée de 700ms.
       'ease' = démarre vite, ralentit à la fin.
       'forwards' = l'élément garde l'état final (opacity:1, translateY(0)).
       Sans 'forwards', il reviendrait à opacity:0 après l'animation. */
  animation: reveal .7s ease forwards;
}
/* Délais d'animation pour décaler les éléments en cascade :
   .delay-1 attend 120ms avant de démarrer,
   .delay-2 attend 240ms. Crée un effet de « vague ». */
.delay-1 {
  animation-delay: .12s;
}

.delay-2 {
  animation-delay: .24s;
}
/*
   Définition de l'animation 'reveal'
   ──────────────────────────────
   @keyframes définit les étapes clés d'une animation.
   Ici une seule étape finale ('to') car le départ vient de .reveal elle-même.
   'from' = implicitement l'état de .reveal (opacity:0, translateY(16px)).
*/
@keyframes reveal {
  to {
    opacity: 1; /* Pleinement visible à la fin */
    transform: translateY(0); /* Retour à la position normale */
  }
}
/* ═══════════════════════════════════════════════════════
   20. RESPONSIVE — TABLETTE (max-width: 980px)
   ═══════════════════════════════════════════════════════

   Qu'est-ce qu'un @media ?
   @media (max-width: 980px) { ... } = « Ce bloc CSS ne s'applique
   QUE lorsque l'écran fait 980px de large ou moins ».
   C'est le mécanisme du Responsive Web Design : adapter la mise en
   page selon la taille de l'écran (PC, tablette, mobile).
   Les règles à l'intérieur écrasent (« override ») les règles normales.
   ═══════════════════════════════════════════════════════ */

@media (max-width: 980px) {
  /* grid-template-columns: 1fr = passage en 1 seule colonne.
       Sur tablette/mobile, les colonnes côte à côte deviennent
       des blocs empilés (l'un sous l'autre). */
  .hero, .split-section, .content-layout {
    grid-template-columns: 1fr;
  }
  /* Grilles multi-colonnes → 1 colonne */
  .card-grid.three, .article-grid, .placeholder-gallery {
    grid-template-columns: 1fr;
  }

  .universe-grid, .perso-board, .reading-shelf, .lab-grid {
    grid-template-columns: 1fr;
  }
  /* Carrousel : hauteur réduite et padding horizontal minimal.
       padding-inline = raccourci pour padding-left + padding-right. */
  .theme-carousel-shell {
    min-height: 390px;
    padding-inline: 0.5rem;
  }

  .theme-carousel {
    min-height: 285px;
  }
  /* Boutons < > légèrement plus petits */
  .theme-carousel-control {
    width: 42px;
    height: 42px;
  }
  /* Slides plus étroites (moins de largeur disponible) */
  .theme-slide {
    width: min(260px, 78vw);
    min-height: 230px;
  }
    /* Décalages 3D réduits (150px au lieu de 235px) pour éviter
       que les slides latérales sortent de l'écran. */
    .theme-slide.is-before {
      transform: translate(calc(-50% - 150px), -50%) rotateY(28deg) scale(0.74);
    }

    .theme-slide.is-after {
      transform: translate(calc(-50% + 150px), -50%) rotateY(-28deg) scale(0.74);
    }

    .theme-slide.is-far-before {
      transform: translate(calc(-50% - 220px), -50%) rotateY(32deg) scale(0.55);
    }

    .theme-slide.is-far-after {
      transform: translate(calc(-50% + 220px), -50%) rotateY(-32deg) scale(0.55);
    }
  /* Heroes de sous-site : mono-colonne */
  .subsite-hero {
    grid-template-columns: 1fr;
    min-height: auto; /* La hauteur s'adapte au contenu */
  }

  .card-grid.two {
    grid-template-columns: 1fr;
  }
  /* Menu mobile : le bouton hamburger devient visible.
       (display: none étant sa valeur par défaut) */
  .nav-toggle {
    display: block;
  }
  /* Le menu de navigation quitte le flux normal :
       - position: absolute = flotte hors du flux (relatif à .topbar)
       - top: calc(100% + 0.75rem) = juste en dessous de la topbar
       - display: none = caché par défaut (affiché via JS) */
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.75rem);
    display: none;
    flex-direction: column; /* Liens empilés verticalement */
    align-items: stretch; /* Chaque lien prend toute la largeur */
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--nav-bg);
    backdrop-filter: blur(18px);
  }
    /* Menu ouvert (classe ajoutée via JavaScript au clic sur le bouton) */
    .nav.is-open {
      display: flex;
    }

    .nav a {
      text-align: center;
    }
  /* Cacher le sous-titre du logo sur mobile (manque de place) */
  .brand-text small {
    display: none;
  }
}
/* ═══════════════════════════════════════════════════════
   21. RESPONSIVE — MOBILE (max-width: 640px)
   ═══════════════════════════════════════════════════════

   Second point de rupture (breakpoint) : écrans très étroits
   (smartphones). Ces règles s'appliquent en PLUS de celles
   du bloc 980px ci-dessus.
   ═══════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .section-pad {
    padding: 1rem 0;
  }
  /* Titre h1 encore plus grand en pourcentage de la largeur écran
       grâce à 13vw (13% de la largeur viewport). */
  h1 {
    font-size: clamp(2.55rem, 13vw, 4rem);
  }
  /* flex-direction: column = les éléments internes (texte + bouton)
       passent de côte-à-côte à empilés verticalement. */
  .project-card, .footer {
    text-align: center;
    margin-top: 2rem;
  }

  flex-direction: column;
  align-items: flex-start; /* Alignés à gauche */
}
/* Stats en une seule colonne sur petit écran */
.stat-grid {
  grid-template-columns: 1fr;
}
/* Les boutons de navigation des univers peuvent passer
       à la ligne si besoin (flex-wrap: wrap). */
.universe-nav {
  flex-wrap: wrap;
}
/* ═══════════════════════════════════════════════════════
   22. CARROUSEL THÉMATIQUE — DÉCLINAISONS PAR SITE
   ═══════════════════════════════════════════════════════

   Principe : le carrousel « de base » (sections précédentes) a un fond
   crème/jaune (charte Lectures). Pour chaque autre site, on « surcharge »
   (override) uniquement les propriétés de couleur en utilisant un
   sélecteur plus spécifique : body.site-pro .theme-carousel-shell { ... }

   body.site-pro .theme-carousel-shell = « ce règle ne s'applique QUE
   lorsque le <body> a la classe site-pro ET que l'élément est dans
   un .theme-carousel-shell ».

   Ce mécanisme s'appelle la « spécificité CSS » : un sélecteur plus
   spécifique gagne toujours sur un sélecteur générique.
   ═══════════════════════════════════════════════════════ */
/* ───────── Site Pro (bleu nuit) ───────── */
body.site-pro .theme-carousel-shell {
  background: radial-gradient(circle at 50% 46%, rgba(121, 217, 255, 0.1), transparent 22rem), linear-gradient(120deg, #0d1e38 0%, #091629 48%, #0b1c35 100%);
  box-shadow: inset 0 1px 0 rgba(121, 217, 255, 0.1);
}

body.site-pro .theme-carousel-control {
  border-color: rgba(121, 217, 255, 0.32);
  color: #edf4ff;
  background: rgba(15, 40, 80, 0.6);
  box-shadow: 0 8px 24px rgba(0, 30, 80, 0.4);
}

  body.site-pro .theme-carousel-control:hover {
    border-color: rgba(121, 217, 255, 0.75);
    background: rgba(15, 40, 80, 0.88);
  }

body.site-pro .theme-carousel-dot {
  background: rgba(121, 217, 255, 0.28);
}

  body.site-pro .theme-carousel-dot:hover {
    background: rgba(121, 217, 255, 0.75);
  }

  body.site-pro .theme-carousel-dot.is-active {
    background: #79d9ff;
    border-color: rgba(255, 255, 255, 0.08);
  }

body.site-pro .theme-slide {
  background: linear-gradient(140deg, rgba(13, 30, 58, 0.96), rgba(9, 22, 45, 0.92));
  border-color: rgba(121, 217, 255, 0.2);
  color: #edf4ff;
  box-shadow: 0 26px 60px rgba(0, 10, 40, 0.55);
}

  body.site-pro .theme-slide strong {
    color: #edf4ff;
  }

  body.site-pro .theme-slide small {
    color: #a8b4c7;
  }

  body.site-pro .theme-slide.is-active {
    box-shadow: 0 34px 80px rgba(0, 10, 40, 0.7);
  }

body.site-pro .reading-theme-panels {
  background: rgba(9, 22, 45, 0.5);
  border-color: rgba(121, 217, 255, 0.14);
}
/* ───────── Site Perso (naturel vert/beige) ───────── */
body.site-perso .theme-carousel-shell {
  background: radial-gradient(circle at 50% 46%, rgba(115, 169, 66, 0.16), transparent 22rem), linear-gradient(120deg, #e5f3cc 0%, #edf7d8 48%, #e2efca 100%);
  box-shadow: inset 0 1px 0 rgba(115, 169, 66, 0.2);
}

body.site-perso .theme-carousel-control {
  border-color: rgba(82, 120, 45, 0.42);
  color: #24351f;
  background: rgba(115, 169, 66, 0.32);
  box-shadow: 0 8px 24px rgba(56, 80, 28, 0.18);
}

  body.site-perso .theme-carousel-control:hover {
    border-color: rgba(82, 120, 45, 0.82);
    background: rgba(115, 169, 66, 0.58);
  }

body.site-perso .theme-carousel-dot {
  background: rgba(115, 169, 66, 0.38);
}

  body.site-perso .theme-carousel-dot:hover {
    background: rgba(115, 169, 66, 0.82);
  }

  body.site-perso .theme-carousel-dot.is-active {
    background: #73a942;
    border-color: rgba(255, 255, 255, 0.2);
  }

body.site-perso .theme-slide {
  background: linear-gradient(140deg, rgba(245, 255, 234, 0.97), rgba(236, 248, 220, 0.92));
  border-color: rgba(115, 169, 66, 0.32);
  color: #24351f;
  box-shadow: 0 26px 60px rgba(56, 80, 28, 0.18);
}

  body.site-perso .theme-slide strong {
    color: #24351f;
  }

  body.site-perso .theme-slide small {
    color: #63735a;
  }

  body.site-perso .theme-slide.is-active {
    box-shadow: 0 34px 80px rgba(56, 80, 28, 0.28);
  }

body.site-perso .reading-theme-panels {
  background: rgba(237, 248, 220, 0.58);
  border-color: rgba(82, 105, 58, 0.2);
}
/* ───────── Site Labo (cosmos violet/cyan) ───────── */
body.site-labo .theme-carousel-shell {
  background: radial-gradient(circle at 50% 46%, rgba(98, 243, 255, 0.1), transparent 22rem), radial-gradient(circle at 82% 68%, rgba(255, 79, 216, 0.07), transparent 18rem), linear-gradient(120deg, #09091e 0%, #0c0e2a 48%, #0f1032 100%);
  box-shadow: inset 0 1px 0 rgba(98, 243, 255, 0.14);
}

body.site-labo .theme-carousel-control {
  border-color: rgba(98, 243, 255, 0.32);
  color: #f3f5ff;
  background: rgba(20, 22, 60, 0.62);
  box-shadow: 0 8px 24px rgba(22, 244, 255, 0.14);
}

  body.site-labo .theme-carousel-control:hover {
    border-color: rgba(98, 243, 255, 0.82);
    background: rgba(20, 22, 60, 0.88);
  }

body.site-labo .theme-carousel-dot {
  background: rgba(98, 243, 255, 0.28);
}

  body.site-labo .theme-carousel-dot:hover {
    background: rgba(98, 243, 255, 0.78);
  }

  body.site-labo .theme-carousel-dot.is-active {
    background: #62f3ff;
    border-color: rgba(255, 255, 255, 0.08);
  }

body.site-labo .theme-slide {
  background: linear-gradient(140deg, rgba(16, 17, 52, 0.96), rgba(10, 12, 40, 0.92));
  border-color: rgba(98, 243, 255, 0.16);
  color: #f3f5ff;
  box-shadow: 0 26px 60px rgba(0, 5, 30, 0.6);
}

  body.site-labo .theme-slide strong {
    color: #f3f5ff;
  }

  body.site-labo .theme-slide small {
    color: #b5b9e8;
  }

  body.site-labo .theme-slide.is-active {
    box-shadow: 0 34px 80px rgba(22, 244, 255, 0.12), 0 12px 40px rgba(0, 5, 30, 0.7);
  }

body.site-labo .reading-theme-panels {
  background: rgba(10, 12, 38, 0.52);
  border-color: rgba(98, 243, 255, 0.14);
}
/* ───────── Site Lectures (crème/brun — base par défaut) ───────── */
body.site-lectures .theme-carousel-dot {
  background: rgba(138, 79, 44, 0.35);
}

  body.site-lectures .theme-carousel-dot:hover {
    background: rgba(138, 79, 44, 0.78);
  }

  body.site-lectures .theme-carousel-dot.is-active {
    background: #8a4f2c;
    border-color: rgba(255, 255, 255, 0.15);
  }

body.site-lectures .theme-carousel-control {
  border-color: rgba(138, 79, 44, 0.42);
  color: #332215;
  background: rgba(138, 79, 44, 0.28);
  box-shadow: 0 8px 24px rgba(74, 45, 22, 0.22);
}

  body.site-lectures .theme-carousel-control:hover {
    border-color: rgba(138, 79, 44, 0.82);
    background: rgba(138, 79, 44, 0.52);
  }