/* ==========================================================================
   style.css — feuille de style responsive
   - Mobile-first
   - Variables CSS (couleurs, polices, espacements)
   - Grille simple: container + flex pour l’intro
   - Finitions pour MathJax, listes, encadrés, etc.
   ========================================================================== */

/* 1) Reset & box-sizing universel pour des dimensions prévisibles */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2) Variables globales: modifie ici pour changer tout le thème */
:root {
  /* Couleurs */
  --color-bg: #ffffff;
  --color-text: #222222;
  --color-primary: #1a73e8;
  --color-secondary: #2c3e50;
  --color-muted: #666666;
  --color-eq-bg: #f9f9f9;
  --color-eq-border: #d0d0d0;

  /* Typographie */
  --font-sans: "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Georgia", serif;
  --font-mono: "Courier New", monospace;

  /* Rythme vertical & espacements */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Largeur max du contenu */
  --max-width: 960px;
}

/* 3) Base: taille par défaut, lissage du scroll et couleurs de fond/texte */
html { font-size: 90%; scroll-behavior: smooth; scrollbar-gutter: stable;}
body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  min-width: 320px; /* évite les layouts trop étroits */
}


/* 4) Médias: images et SVG fluides (jamais plus larges que leur conteneur) */
img, video, svg { max-width: 100%; height: auto; display: block; }

/* 5) Conteneur principal avec gouttières */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-md) 0;
}



/* 6) Typographies: tailles hiérarchisées, marge basse standard
      - Ajuste ici h1..h6 si tu veux des titres plus grands/petits */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--color-secondary);
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

/* Marge basse par défaut pour les blocs de texte/listes/citations/code */
p, ul, ol, blockquote, pre { margin-bottom: var(--spacing-md); }

/* Liens: couleur primaire + pas de soulignement (hover géré ailleurs) */
a { color: var(--color-primary); text-decoration: none; }

/* Accessibilité: focus visible clavier sur liens et boutons */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 7) Code & équations (fond gris clair + légère bordure colorée) */
code, kbd, var, samp {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  background-color: var(--color-eq-bg);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 3px;
}
pre {
  background-color: var(--color-eq-bg);
  padding: var(--spacing-md);
  overflow-x: auto; /* évite la casse en horizontal */
  border-left: 4px solid var(--color-eq-border);
}

/* Bloc équation (optionnel si tu veux encadrer des formules) */
.equation {
  font-family: var(--font-mono);
  background-color: var(--color-eq-bg);
  border-left: 3px solid var(--color-eq-border);
  padding: var(--spacing-sm) var(--spacing-md);
  margin: var(--spacing-md) 0;
  overflow-x: auto;
}

/* 8) Figures & tables: styles sobres et lisibles */
figure { margin-bottom: var(--spacing-md); text-align: center; }
figcaption { font-size: 0.875rem; color: var(--color-muted); margin-top: var(--spacing-xs); }
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-md);
}
th, td { border: 1px solid #ddd; padding: var(--spacing-sm); text-align: left; }
th { background-color: #f5f5f5; }

/* 9) En-tête & nav: fond sombre, texte clair. Menu mobile masqué par défaut */
header 
{ background-color: var(--color-secondary); color: #fff; padding: var(--spacing-sm) var(--spacing-md); 
}




.navbar { display: flex; justify-content: space-between; align-items: center; }
.navbar-brand { font-size: 1.25rem; font-weight: bold; }

/* Bouton burger visible seulement en mobile (caché ensuite via @media) */
.navbar-toggle {
  font-size: 1.5rem;
  background: none; border: none; color: #fff; cursor: pointer; display: block;
}

/* Menu: caché en mobile, .open (ajoutée via JS) le rend visible */
.navbar-menu {
  display: none;            /* mobile: masqué par défaut */
  flex-direction: column;
  margin-top: var(--spacing-sm);
  font-size: 1.1rem;
  font-weight: 600;
}
.navbar-menu.open { display: flex; }
.navbar-menu a { color: #fff; padding: var(--spacing-xs) var(--spacing-md); text-decoration: none; transition: background-color .15s ease, color .15s ease; }

/* 10) Intro: pile verticale en mobile, 2 colonnes en ≥600px */
.intro { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); }
@media (min-width: 600px) {
  .intro { flex-direction: row; align-items: flex-start; }
  .intro #about { flex: 1; margin-right: var(--spacing-md); }
  .intro #photo { flex: 0 0 auto; max-width: 400px; }
}
.intro #about { font-size: 1rem; line-height: 1.6; }
#photo img { border-radius: 6px; } /* juste une petite touche visuelle */

/* 11) Main & footer: padding standard; footer sobre et gris clair */
main { padding: var(--spacing-md) var(--spacing-md); }
footer {
  background-color: #f5f5f5;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-muted);
  padding: var(--spacing-md) 0;
  border-top: 1px solid #ddd;
}



/* 12) Points de rupture (responsive)
      - ≥600px: menu horizontal, burger caché
      - ≥900px / ≥1200px: container un peu plus large */
@media (min-width: 600px) {
  .navbar-menu { display: flex; flex-direction: row; margin-top: 0; }
  .navbar-toggle { display: none; }
  .navbar-menu a + a { margin-left: 0.4rem; }
}
@media (min-width: 900px) { .container { width: 85%; } }
@media (min-width: 1200px) { .container { width: 75%; } }

/* 13) État actif/hover des liens du menu */
.navbar-menu a.active {
  background-color: orange; color: #fff;
  border-radius: 4px;
}
.navbar-menu a:hover { background-color: orange; color: #fff; text-decoration: none; border-radius: 4px;}

/* ===== Styles “Research-like” pour encadrés/listes de papiers ===== */
.paper-block {
  background: #f3f5f7;
  border: 1px solid #e1e5ea;
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  margin: 0.6rem 0 0.9rem;
}
.paper-title { color: #1d6f1d; font-weight: 700; text-decoration: none; }
.paper-title:hover { text-decoration: underline; }
.paper-meta { color: var(--color-muted); }
.paper-links a { margin-right: .6rem; }
ol.paper-list { padding-left: 1.5rem; }
ol.paper-list > li { margin-bottom: .6rem; }
ol.paper-list {
  list-style-type: none;  /* supprime les numéros */
  padding-left: 0;        /* enlève l’espace réservé aux numéros */
}



details.paper-abs > summary { cursor: pointer; margin-top: .25rem; font-weight: 600; }
details.paper-abs > div { margin-top: .4rem; }
pre.codebox {
  background:#f9f9f9; border-left:4px solid #d0d0d0;
  padding:.75rem; overflow:auto; font-size: .95rem;
}
.section-kicker { margin:.25rem 0; } /* petit intertitre sobre */

/* ===== Finitions MathJax (ne change pas le rendu mathématique) ===== */
mjx-container[display="false"] { display: inline !important; margin: 0 .15em !important; vertical-align: middle; }
mjx-container[display="true"]  { margin: .6em 0 !important; }
mjx-container svg { display: inline !important; }

/* ===== People: réduit l’espace entre les paragraphes des entrées ===== */
#people .paper-block p { margin-bottom: 0.3rem; }

/* ===== Colonne étroite: limites visuelles pour sections après l’intro =====
       Astuce: en ≥600px, on borne la largeur pour s’aligner avec #about
*/
.content-narrow { width: 100%; }
@media (min-width: 600px) {
  .content-narrow { max-width: calc(100% - 400px - var(--spacing-md)); }
}

/* ===== Liste bullets + blocs <details> (même style que .paper-block) ===== */
.research-bullets { list-style: none; padding-left: 0; }
.research-bullets li { margin-bottom: 0.5rem; }

/* <details> = identique à .paper-block */
.research-bullets details {
  background: #f3f5f7;
  border: 1px solid #e1e5ea;
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  margin: 0.6rem 0 0.9rem;
}

/* Titre cliquable du bloc */
.research-bullets summary {
  cursor: pointer;
  color: var(--color-secondary);
  list-style: none;
  position: relative;
  padding-left: 1.2rem; /* espace pour l’icône ►/▼ */
  font-weight: 400;
}

/* Petite flèche */
.research-bullets summary::before {
  content: "►";
  position: absolute; left: 0;
  color: var(--color-primary);
  transition: transform 0.2s;
}
.research-bullets details[open] summary::before { content: "▼"; }

/* Contenu interne: aérer un peu sous le summary */
.research-bullets details > *:not(summary) {
  margin-top: 0.8rem;
  color: var(--color-text);
}



/* === Dark mode: mêmes tons que .paper-block en sombre === */
html.theme-dark .research-bullets details {
  background: #121826;
  border-color: #1f2a3a;
}

/* Si aucun thème n’est forcé et que l’OS est sombre */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(.theme-dark) .research-bullets details {
    background: #121826;
    border-color: #1f2a3a;
  }
}

/* ===== Liens externes en ligne (arXiv/HAL/…) =====
   - centrés, séparés par un point médian
   - ajuste margin si besoin de plus d’air avant la section suivante
*/
.inline-links {
  list-style: none;
  padding-left: 0;
  margin: 0.2rem 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
}
.inline-links li::after { content: "·"; margin-left: 0.5rem; }
.inline-links li:last-child::after { content: ""; }

/* ===== Contact: contraste h3 vs h2 + rythme vertical fin =====
   - Si tu veux encore plus petit: passe à 1.1rem ou 1.05rem
*/
#contact h3 {
  font-size: 1.2rem;      /* plus petit que h2 = 1.75rem */
  margin-top: 0.8rem;     /* espace AVANT chaque sous-section (Email/Office/…) */
  margin-bottom: 0.3rem;  /* espace APRÈS le h3 (colle le texte) */
  color: var(--color-secondary);
}

/* Un peu d’espace après la liste de liens externes (avant “Students and Postdocs”) */
.inline-links { margin-bottom: 1.3rem; }
















/* ====== Toggle switch clair/sombre (façon Petrov) ====== */
.theme-switch {
  position: relative;
  display: inline-block;
  width: 46px;          /* largeur du switch */
  height: 26px;         /* hauteur du switch */
  margin-left: .5rem;   /* petit écart après le burger */
  flex: 0 0 auto;
}
.theme-switch input {
  opacity: 0; width: 0; height: 0; /* cache la checkbox native */
}
.theme-switch .slider {
  position: absolute; inset: 0;
  background: #cfcfcf;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  cursor: pointer;
  transition: background .25s ease;
}
.theme-switch .slider::before {
  /* pastille + icône */
  content: "🌙";
  position: absolute;
  left: 2px; top: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.theme-switch input:checked + .slider {
  background: #86b7ff;            /* fond du switch en mode sombre activé */
}
.theme-switch input:checked + .slider::before {
  transform: translateX(20px);     /* pastille à droite */
  content: "☀️";
}

/* Lisibilité sur header sombre : léger trait clair pour le contour */
header .theme-switch .slider {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* Alignement propre dans la barre */
.navbar { gap: .5rem; }  /* espace entre brand, burger, switch et menu */

/* (Option) état focus clavier accessible */
.theme-switch input:focus-visible + .slider {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ===== Thèmes forcés par classes sur <html> (si pas déjà ajouté) ===== */
/* Mode sombre (variables) */
html.theme-dark {
  --color-bg: #0f1115;
  --color-text: #e7eaf0;
  --color-primary: #86b7ff;
  --color-secondary: #dbe7ff;
  --color-muted: #a3adbd;
  --color-eq-bg: #161b22;
  --color-eq-border: #2a3446;
}
html.theme-dark header { background-color: #121826; }
html.theme-dark footer { background-color: #111827; border-top-color: #1f2937; }
html.theme-dark .paper-block { background: #121826; border-color: #1f2a3a; }
html.theme-dark pre { background: var(--color-eq-bg); border-left-color: var(--color-eq-border); }
html.theme-dark table th { background-color: #121826; }

/* Mode clair forcé (pour repasser du sombre au clair) */
html.theme-light {
  --color-bg: #ffffff;
  --color-text: #222222;
  --color-primary: #1a73e8;
  --color-secondary: #2c3e50;
  --color-muted: #666666;
  --color-eq-bg: #f9f9f9;
  --color-eq-border: #d0d0d0;
}
html.theme-light header { background-color: var(--color-secondary); }
html.theme-light footer { background-color: #f5f5f5; border-top-color: #ddd; }
html.theme-light .paper-block { background: #f3f5f7; border-color: #e1e5ea; }
html.theme-light pre { background: var(--color-eq-bg); border-left-color: var(--color-eq-border); }
html.theme-light table th { background-color: #f5f5f5; }

/* (Option) Dark auto quand l’OS est sombre — seulement si aucun thème n’est forcé */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(.theme-dark) {
    --color-bg: #0f1115;
    --color-text: #e7eaf0;
    --color-primary: #86b7ff;
    --color-secondary: #dbe7ff;
    --color-muted: #a3adbd;
    --color-eq-bg: #161b22;
    --color-eq-border: #2a3446;
  }
  :root:not(.theme-light):not(.theme-dark) header { background-color: #121826; }
}



.paper-links {
  display: inline-flex;
}

.paper-links a {
  white-space: nowrap;
}

/* Point après chaque lien sauf le dernier */
.paper-links a:not(:last-child)::after {
  content: "•";
  margin-left: 0.8rem;   /* espace avant le point */
  margin-right: 0.1rem;   /* espace après le point (plus serré) */
  color: var(--color-muted);
}


point::before {
  content: "•";
  margin: 0 0.35rem;
  color: var(--color-muted);
}













html.no-anim .theme-switch .slider,
html.no-anim .theme-switch .slider::before {
  transition: none !important;
  animation: none !important;
}





html.theme-dark .theme-switch .slider { background: #86b7ff; }
html.theme-dark .theme-switch .slider::before { transform: translateX(20px); content: "☀️"; }

html.no-anim .theme-switch .slider,
html.no-anim .theme-switch .slider::before { transition: none !important; animation: none !important; }



/* Teaching : aligner la largeur sur Research en desktop */
@media (min-width: 992px) {
  .content-narrow {
    max-width: 100%;
  }
  /* bonus: les vidéos occupent toute la largeur du bloc */
  .content-narrow iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}




/* Espace supplémentaire sous le résumé */
#formations { margin-bottom: 2.5rem; } /* ajuste 2.5rem à ta convenance */


article:not(:last-child) {
  margin-bottom: 1rem;
}






/* Rend les vidéos YouTube intégrées 100% fluides (iframe) */
.responsive-video-container {
  position: relative;
  padding-bottom: 56.25%; /* Ratio 16:9 (56.25% = 9 / 16) */
  height: 0;
  overflow: hidden;
}

.responsive-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Bloc spécifique pour la section People (index) */
.people-block {
  background: #f3f5f7;
  border: 1px solid #e1e5ea;
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  margin: 0.6rem 0 0.9rem;
  width: 100%;
}

/* Alignement cohérent avec la colonne de gauche de l'intro */
@media (min-width: 600px) {
  #people .people-block {
    max-width: calc(100% - 400px - var(--spacing-md));
  }
}

/* Espacement vertical des paragraphes dans #people */
#people .people-block p {
  margin-bottom: 0.3rem;
}




/* === Dark mode: variantes pour .people-block === */
html.theme-dark .people-block {
  background: #121826;
  border-color: #1f2a3a;
}

/* Si aucun thème n’est forcé et que l’OS est sombre */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(.theme-dark) .people-block {
    background: #121826;
    border-color: #1f2a3a;
  }
}




























/* ==================== Menu mobile ==================== */
.navbar {
  position: relative; /* contexte pour le positionnement absolu */
}

.navbar-menu {
  display: none;
  position: fixed;     /* ancré à la fenêtre */
  top: 60px;           /* hauteur de la barre (ajuste si besoin) */
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--color-secondary); /* fond clair/sombre géré par variables */
  flex-direction: column;
  align-items: flex-start;
  padding: 0.5rem 0;
  z-index: 999;
}

.navbar-menu.open {
  display: flex;
}

.navbar-menu a {
  display: block;
  width: 100%;
  color: #fff; /* toujours blanc, comme ton nom */
  padding: 0.8rem var(--spacing-md);
  border-top: 1px solid rgba(255,255,255,0.2);
  text-decoration: none;
}

/* ==================== Menu desktop ==================== */
@media (min-width: 600px) {
  .navbar-menu {
    position: static;
    display: flex !important;
    flex-direction: row;
    width: auto;
    background: none;
    padding: 0;
  }
  .navbar-menu a {
    border: none;
    width: auto;
    padding: var(--spacing-xs) var(--spacing-md);
  }
}

html.theme-dark .navbar-menu {
  background-color: #121826; /* même couleur que ton header sombre */
}