/* ========================================================================= BASE + VARIABLES =======================================================================*/ /* Police maths pour tes 
 etc. */
@import url("https://fonts.googleapis.com/css2?family=STIX+Two+Math&display=swap");

pre.eq, pre.eq code, .eq, .eq code {
  font-family: "STIX Two Math","Cambria Math","Noto Sans Math","DejaVu Sans","Times New Roman",serif;
  font-variant-ligatures: none;
}

/* ---- Variables globales ----
   NB: --top-h et --menu-h seront surchargées dynamiquement par le JS
*/
:root{
  /* Header */
  --top-h: 64px;                 /* hauteur de la top-bar (valeur par défaut) */
  --menu-h: 56px;                /* hauteur du menu (valeur par défaut) */
  --menu-top: var(--top-h);      /* par défaut, le menu est sous la top-bar */

  --top-color: #0ABBF0; /* fallback couleur unie */
  --top-gradient:  linear-gradient(90deg, #47bcc4, #e6f2f1);

  --menu-color: #0ABBF0; /* fallback couleur unie */
  --menu-gradient:  linear-gradient(90deg, #47bcc4, #e6f2f1);

  /* Layout générique (2 colonnes configurables) */
  --left-col: 300px;   /* largeur colonne gauche */
  --right-col: 1fr;    /* largeur colonne droite */
  --col-gap: 20px;     /* espace entre colonnes */
  --col-left-pad: 0px; /* padding interne */
  --col-right-pad:0px; /* padding interne */
  --col-left-bg: #fff; /* couleurs de fond par défaut */
  --col-right-bg:#fff;
  --col-left-color: #000;
  --col-right-color: #000;

  /* Paramètres des encadrés */
  --card-bg: #fff;
  --card-pad: 16px;
  --card-gap: 0 0px; /* rows - col */

  /* Paramètres de texte */
  --texte-color: #fff;
  --texte-size: 1em;
  --texte-weight: bold;
  --texte-align: start;
  --texte-pad: 16px;
  --texte-hover-color: #1a73e8;
  --texte-hover-scale: scale(1.05);

  /* Valeurs utilitaires */
  --col-text: #fff;
  --text: #222;
  --panel: #fff;
  --elev: #f8fafc;
  --accent: #3a7bd5;
  --warn: #eab308;
  --size-text: 0.9em;
  --bg: #fff;

}

/* =========================================================================
   RESET + BASE
   =======================================================================*/
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  line-height: 1.6;
  background: #f6f7fb; 
  color: var(--text);
}

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

/* Transitions douces sur les surfaces fréquentes */
html, body, .card, header.site-header, .submenu, .side-menu {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Séparateur horizontal léger */
.hr{ height:1px; background: color-mix(in oklab, black 10%, transparent); margin: 25px 0; }

/* =========================================================================
   MODE SOMBRE (activé avec .theme-dark sur )
   =======================================================================*/
.theme-dark body { background-color: #0b0f14; color: #e6eef5; }
.theme-dark header.site-header { background: linear-gradient(90deg, #0f172a, #1f2a44); }
.theme-dark .card { background: #111720; border-color: #1e293b; color: #e6eef5; }
.theme-dark .highlight { background: #111720; border-color: #3a7bd5; }
.theme-dark .submenu { background: #111720; color: #e6eef5; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.theme-dark .submenu a:hover { background: #0f172a; }
.theme-dark .side-menu { background: #111720; color: #e6eef5; box-shadow: -8px 0 24px rgba(0,0,0,.5); }
.theme-dark .side-menu nav a:hover { background: #0f172a; }
.theme-dark .btn { background: #0f172a; color: #e6eef5; border-color: #263242; }
.theme-dark .btn:hover { background:#162032; }
.theme-dark .link { border-color:#263242; }
.theme-dark .link:hover { background:#0f172a; }

/* =========================================================================
   HEADER : TOP-BAR + MENU STICKY / COMPACT
   =======================================================================*/

/* Conteneur global du header */
.site-header{ width: 100%; }

/* Bandeau supérieur (logo + sélecteur langue, etc.) */
.header-top{
  width: 100%;
  background: var(--top-gradient, var(--top-color));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;         /* logo à gauche / langue à droite */
  padding: 10px 20px 10px 50px;           /* 4 valeurs avec unités */
  transition: height .15s ease, opacity .15s ease, transform .15s ease;
}

/* Barre de menu (fixée) : au chargement sous la top-bar, puis remonte à 0 en compact */
.header-menu{
  position: fixed;
  top: var(--menu-top);                   /* suit la top-bar tant qu’on est en haut */
  left: 0; right: 0;
  background: var(--menu-gradient, var(--menu-color));
  color: #fff;
  align-items: center;
  text: center;
  text-align: center;
  padding: 10px 10px;
  z-index: 999;
  display: flex; justify-content: space-between;
  transition: top .15s ease, box-shadow .15s ease;
}

/* Logo + titre */
.brand{ display:flex; align-items:center; gap:12px; }
.brand .logo{
  width:48px; height:48px;
  background: #f6f7fb url('/assets/flags/ile-reunion.png') center / cover no-repeat;
  box-shadow: 0 0 0 3px rgba(255,213,79,.35) inset;
}
.brand h1{ margin:0; font-weight:800; font-size:1.9rem; }

/* Quand on scrolle (classe .compact ajoutée par le JS) : top-bar se replie, menu remonte à 0 */
body.compact .header-top{
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
body.compact { --menu-top: 0px; }

/* Le contenu démarre sous (menu + top-bar) en haut, puis sous le menu en compact */
main{
  padding-top: var(--menu-top);
}
body.compact main{
  padding-top: calc(var(--menu-h)+var(--menu-top));
}

/* =========================================================================
   NAV PRINCIPALE (desktop) + SOUS-MENUS
   =======================================================================*/

/* Conteneur nav desktop (visible > 900px) */
nav.main {
  display: none;                      /* visible via media query */
  width: 100%;
  padding: 0 30px;                    /* marges intérieures droite/gauche */
/*  box-sizing: border-box; */
}
.menu{
  list-style:none; margin:0; padding:0; width:100%;  font-size: var(--size-text); align-items: center;
  color: var(--col-text);
}

.menu-horizontal {
  display: flex;
  justify-content: space-between;
}

.menu-vertical {
  display: flex;
  flex-direction: column;
}

.menu > li{ position:relative; }
.menu > li > a{
  font-weight:500; padding:10px 0; position:relative; cursor:pointer;
  transition: color .25s ease;
}
.menu > li > a::after{
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background: black;
  transition: width .25s ease;
}
.menu > li > a:hover,
/*.menu > li > a:focus{ color:#ffd54f; } */

.menu > li > a:hover::after,
.menu > li > a:focus::after{ width:100%; }

/* Sous-menu au survol */
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu{ display:block; }

.submenu{
  display:none; position:absolute; top:100%; left:0; min-width:230px;
  background:#fff; color:#222; border-radius:10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  padding:8px; margin-top:10px;
}
.submenu a{
  display:block; padding:10px 12px; border-radius:8px; transition: background .2s ease;
}
.submenu a:hover{ background:#f1f5f9; }

/* =========================================================================
   SÉLECTEUR DE LANGUE (dropdown dans le header)
   =======================================================================*/
.lang-switcher { position: relative; display: inline-block; margin-right:12px; }
.lang-btn{
  background:#fff; color:#1e293b; padding:6px 12px; border:1px solid #e2e8f0;
  border-radius:8px; cursor:pointer; font-size:.9rem;
  display:flex; align-items:center; gap:6px; transition: background .2s;
}
.lang-btn img{ width:20px; height:14px; border-radius:2px; object-fit:cover; }
.lang-btn:hover{ background:#f1f5f9; }
.lang-btn .arrow{ font-size:.7rem; opacity:.7; transition: transform .2s; }
.lang-btn[aria-expanded="true"] .arrow{ transform: rotate(180deg); }

/* Menu de langue */
.lang-menu{
  display:none; position:absolute; top:42px; left:0;
  min-width:160px; margin:0; padding:4px 0; list-style:none;
  background:#fff; border:1px solid #e2e8f0; border-radius:8px;
  box-shadow: 0 8px 16px rgba(0,0,0,.15); z-index:1000;
}
.lang-menu.open{ display:block; }
.lang-menu li{ list-style:none; }
.lang-menu li a{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  color:#333; text-decoration:none; transition: background .2s;
}
.lang-menu li a:hover{ background:#f1f5f9; }
.lang-menu img{ width:20px; height:14px; border-radius:2px; object-fit:cover; }

/* =========================================================================
   BURGER + MENU LATÉRAL (mobile)
   =======================================================================*/
.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; font-size:22px;
  border:1px solid rgba(255,255,255,.5); border-radius:10px;
  background:transparent; color:#fff; cursor:pointer;
}

.side-menu{
  position:fixed; inset:0 0 0 auto; width:min(88vw, 340px);
  background:#ffffff; color:#0f172a; transform: translateX(100%);
  transition: transform .25s ease; z-index:1200; padding:16px;
  box-shadow:-8px 0 24px rgba(0,0,0,.18);
  display:flex; flex-direction:column; gap:10px;
}
.side-menu.open{ transform: translateX(0); }
.side-menu .close-btn{
  align-self:flex-end; font-size:28px; border:0; background:transparent; cursor:pointer;
}
.side-menu nav a{ display:block; padding:10px 8px; border-radius:8px; }
.side-menu nav a:hover{ background:#f1f5f9; }



/* =========================================================================
   LAYOUT 2 COLONNES PARAMÉTRABLE (grid)
   =======================================================================*/
.twocol{
  display: grid;
  grid-template-columns: var(--left-col) var(--right-col);
  gap: var(--col-gap);
  align-items: start;
/*  box-sizing: border-box; */
}
.col-left{
  background: var(--col-left-bg);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
  min-height: 0;
  padding: var(--col-left-pad);
  color: var(--col-left-color);
}
.col-right{
  background: var(--col-right-bg);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
  min-height: 0;
  padding: var(--col-right-pad);
  color: var(--col-right-color);
}

/* Responsive : une seule colonne */
@media (max-width: 900px){
  nav.main { display:none; }     /* menu desktop masqué */
  .burger  { display:inline-flex; }
  .twocol  { grid-template-columns: 1fr; }
}

/* =========================================================================
   CARTES / BLOCS MISE EN AVANT / UTILITAIRES
   =======================================================================*/
.card{
  display: grid;
  background: var(--card-bg);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: var(--card-pad);
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
  gap: var(--card-gap);
}
/* .cardSctitle { padding: 16px; text-align:center; }*/

.texte{
  color:var(--texte-color); 
  margin:auto;
  text-align:var(--texte-align); padding:var(--texte-pad); font-size:var(--texte-size); font-weight:var(texte-weight);
  border-radius:8px; display:block; transition: all .3s ease;
}
.texte:hover{ var(--color:texte-hover-color); transform: var(--texte-hover-scale); }


.hSc1{
  color:#fff; margin:auto;
  background: var(--bg);
  text-align:center; padding:10px 0; font-size:2.2em; font-weight:bold;
  border-radius:8px; display:block; transition: all .3s ease;
}
.hSc1:hover{ color:#1a73e8; transform: scale(1.05); }

.hSc2{
  color:#6d1b1b; border-left:6px solid #b33a3a; padding-left:10px;
  margin-top:40px; font-size:1.8em; border-bottom:5px solid #4a0f0f;
}
.hSc3{ color:#8b4513; margin-top:25px; font-size:1.4em; }

p{ text-align:justify; margin-bottom:18px; }

.encadreSciences{
  background:#E0F7FA; border:1px solid #e0c097;
  padding:15px; margin:20px 0; border-radius:8px;
  box-shadow: 2px 2px 8px rgba(0,0,0,.1);
}

/* Bloc "highlight" interactif */
.highlight{
  background:#E0F7FA;
  border: 1px solid #e2e8f0;
  border-radius:8px;
  box-shadow:0 2px 7px rgba(0,0,0,.1);
  padding:5px; margin-bottom:20px;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.highlight:hover{
  transform: scale(1.02);
  background-color:#B3E5FC;
  box-shadow: 0 6px 15px rgba(0,0,0,.15);
}
.highlight h2{ color:#3a7bd5; margin-top:0; }

/* Liens sous forme de chips */
.links { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.link{ padding:6px 10px; border:1px solid #e2e8f0; border-radius:10px; }
.link:hover{ background:#f8fafc; }

/* Retour haut de page */
.backtop{ position:fixed; right:16px; bottom:16px; }

/* =========================================================================
   POPUPS (overlay + contenu + iframe)
   =======================================================================*/
.popup-link{ text-decoration:underline; color:blue; cursor:pointer; }

.popup-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display: none; align-items: center; justify-content: center;
  z-index: 9999;
}
.popup-overlay.open{ display: flex; }

.popup-content{
  position:relative; display:flex; flex-direction:column;
  background: var(--panel, #fff);
  color: var(--text, #222);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  /* fallback : écrasé par JS si data-width/height présents */
  width: min(90vw, 640px);
  height: min(85vh, 420px);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 16px 16px 12px 16px;
}
.popup-close{
  position:absolute; right:8px; top:8px;
  border:0; background:transparent; color:#000; font-size:30px; cursor:pointer;
}
#popupText{ flex:1; min-height:0; }
.popup-iframe{ width:100%; height:100%; display:block; border:0; background:transparent; }

/* =========================================================================
   RESPONSIVE NAV (afficher menu desktop > 900px)
   =======================================================================*/
@media (min-width: 900px){
  nav.main { display:block; }
  .burger  { display:none;  }
}

/* =========================================================================
   DÉBORDEMENTS/ROBUSTESSE
   =======================================================================*/
.layout{
  display:grid;
  grid-template-columns: 260px minmax(0,1fr);
  gap:24px;
}
.wrap{
  max-width:1100px; width:100%; margin-inline:auto; padding:20px;
}
.in, .card{
  overflow-wrap:anywhere; max-width:100%;
}
pre.eq{ max-width:100%; overflow:auto; }
html, body{ overflow-x:hidden; }