/* =========================================================================
   BASE + VARIABLES
   =======================================================================*/

/* Police maths pour tes <pre class="eq"> 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;
}



/* Retour haut de page */
.backtop{ position:fixed; right:16px; bottom:16px; }
/* ---- 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);
  --menu-pad: 0;
  --menu-align-items: start;

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




  --cell2-left: 250px;
  --cell2-right: 1fr;
  --cell2-gap: 20px;
  --col2-left-align: start;
  --col2-right-align: start;
  --col2-left-bg: #fff;
  --col2-right-bg: #fff;
  --col2-left-pad: 0;
  --col2-right-pad: 0;
  --col2-left-color: #000;
  --col2-right-color: #000;
  --col2-left-text-align: center;
  --col2-right-text-align: start;
  --col2-left-bd-width: 2px; 
  --col2-left-bd-color: #fff;
  --col2-left-bd-radius: 5px;
  --col2-right-bd-width: 2px; 
  --col2-right-bd-color: #fff;
  --col2-right-bd-radius: 5px;

  --cell-left: 250px;
  --cell-middle: 1fr;
  --cell-right: 250px;
  --cell-gap1: 20px;
  --cell-gap2: 20px;
  --col3-left-align: center;
  --col3-middle-align: center;
  --col3-right-align: center;
  --col3-left-bg: #fff;
  --col3-middle-bg: #fff;
  --col3-right-bg: #fff;
  --col3-left-pad: 0;
  --col3-middle-pad: 0;
  --col3-right-pad: 0;
  --col3-left-color: #000;
  --col3-middle-color: #000;
  --col3-right-color: #000;
  --col3-left-text-align: center;
  --col3-middle-text-align: start;
  --col3-right-text-align: start;
  --col3-left-bd-width: 2px; 
  --col3-left-bd-color: #fff;
  --col3-left-bd-radius: 5px;
  --col3-middle-bd-width: 2px; 
  --col3-middle-bd-color: #fff;
  --col3-middle-bd-radius: 5px;
  --col3-right-bd-width: 2px; 
  --col3-right-bd-color: #fff;
  --col3-right-bd-radius: 5px;




  /* Paramètres des encadrés */
  --card-direction: row;
  --card-gap: 0px;
  --card-pad 0;
  --card-width: 100%;
  --cardt-marge: 0px;
  --cardt-gap: 0;
  --cardt-bg: #fff;
  --cardt-width: 1px;
  --cardt-color: #000;
  --cardt-radius: 0;
  --cardt-pad: 5px;
  --card-bg-hl: blue;

  /* Paramètres de box: encaqdrement */
    --box-marg: 20px 0px 0 0px;
    --box-width: fit-content;
    --box-bd-width: 1px;
    --box-bg: inherit; 
    --box-color: #000;
    --box-pad: 0px;
    --box-rad: 0px;
    --box-fontsize: 1rem;
    --box-shad:  0 4px 10px rgba(0, 0, 0, 0.1);
    --box-cursor: default;
    --box-hover-bg: linear-gradient(135deg, #007BFF, #00C6FF);
    --box-hover-color: #000;
    --box-hover-scale: 1.05;
    --box-hover-cursor: default;

  /* 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);
  --h2-color: #000;
  --h2-text-align: start;
  --h2-pad: 35px 20px 20px 20px;
  --h2-size: 2em;
  --h2-weight: 700;
  --h4-color: #0;
  --h4-text-align: start;
  --h4-pad: 0px 20px 20px 20px;
  --h4-size: 1em;
  --h4-weight: 400;

  --txt-text-align: start; 
  --txt-color: #000;
  --txt-size: 1em;
  --txt-weight: 400; 
  --txt-pad: 20px 0px 0px 0px;
  --txt-e-text-align: start;
  --txt-e-color: #000;
  --txt-e-size: 1em;
  --txt-e-weight: 400; 
  --txt-e-pad: 20px 0px 20px 0px;
  --txt-s-text-align: start;
  --txt-s-color: #000;
  --txt-s-size: 1em;
  --txt-s-weight: 400; 
  --txt-s-pad: 0px 0px 0px 0px;
  --txt-bx-text-align: start;
  --txt-bx-color: #000;
  --txt-bx-size: 1em;
  --txt-bx-weight: 400; 
  --txt-bx-pad: 0px 0px 0px 10px;
  --h1-text-align: center; 
  --h1-color: #000;
  --h1-size: 2.8em;
  --h1-weight: 700; 
  --h1-pad: 50px 0px 50px 0px;
  --h1-hover-color: #1a73e8;
  --h1-hover-scale: scale(1.05);
  --h2-text-align: start; 
  --h2-color: #000;
  --h2-size: 1.5em;
  --h2-weight: 700; 
  --h2-pad: 20px 0px 0px 0px;
  --h3-text-align: start; 
  --h3-color: #000;
  --h3-size: 1.3em;
  --h3-weight: 600; 
  --h3-pad: 20px 0px 0px 0px;
  --h5-text-align: start; 
  --h5-color: #000;
  --h5-size: 0.9em;
  --h5-weight: 400; 
  --h5-pad: 20px 0 0 0px;


  /* Valeurs utilitaires */
  --bg: linear-gradient(90deg, #ededed, #fff);
  --col-text: #fff;
  --text: #222;
  --panel: #fff;
  --elev: #f8fafc;
  --accent: #3a7bd5;
  --warn: #eab308;
  --size-text: 0.9em;

}

/* =========================================================================
   RESET + BASE
   =======================================================================*/

*,
*::before,
*::after {
  box-sizing: border-box; /* largeur/hauteur incluent les bordures et paddings */
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
/* border: 10px solid magenta !important; */
}

body {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  color: var(--text, #222) !important;
  background: var(--bg) !important;
  -webkit-font-smoothing: antialiased; /* rend le texte plus net sur Mac et iPhone */
  text-rendering: optimizeLegibility;
}

/* --- LIENS PAR DÉFAUT --- */
a { color: inherit; text-decoration: none; }
a:hover {
  text-decoration: underline;
}

.container {
  width: 100%;
  max-width: max(80%, 1500px);
  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;
}

/* =========================================================================
   MODE SOMBRE (activé avec .theme-dark sur <html>)
   =======================================================================*/
.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-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: inset 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
   =======================================================================*/


/* Desktop */
@media (min-width: 900px){
  nav.main { display: block; width: 100%; }   /* montre le menu desktop */
  .burger   { display: none; }   /* cache l’icône burger */
  .side-menu{ display: none; }   /* par sécurité */
}

/* Mobile */
@media (max-width: 899px){
  nav.main { display: none; }    /* cache le desktop */
  .burger   { display: inline-flex; }
}



/* ===== Base ===== */
.menu{
  list-style: none;
  margin: 0;
  width: 100%;
  font-size: var(--size-text);
  color: var(--col-text); 
}
.menu a{
  color: inherit;               
  text-decoration: none;        /* pas de soulignement natif */
}

/* ===== Variantes ===== */
.menu-horizontal{
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
  justify-content: space-between;
  padding: var(--menu-pad);
}
.menu-vertical{
  display: flex;
  flex-direction: column;
  gap: var(--menu-gap);
  padding: var(--menu-pad);
  align-items: var(--menu-align-items);
}

/* ===== Items ===== */
.menu > li{ position: relative; }
.menu > li > a{
  display: inline-block;
  font-weight: 500;
  padding: 10px 0;
  position: relative;
  cursor: pointer;
  transition: color .25s ease;
}

/* Soulignement animé */
.menu > li > a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: currentColor;     /* même couleur que le texte */
  transition: width .25s ease;
}
.menu > li > a:hover::after,
.menu > li > a:focus::after{
  width: 100%;
}

/* État actif (via aria-current ou .is-active) */
.menu a[aria-current="page"],
.menu a.is-active{
  font-weight: 600;
}
.menu a[aria-current="page"]::after,
.menu a.is-active::after{
  width: 100%;
}

/* Libellés sur 2 lignes (optionnel) */
.menu a .lbl-top{ display:block; line-height:1.1; }
.menu a .lbl-bottom{ display:block; opacity:.85; line-height:1.1; font-size:.9em; }

/* ===== Sous-menu ===== */
.has-sub{ position: relative; }           /* <-- corrigé (pas de :) */

.submenu{
  /* IMPORTANT: pas de display:none pour laisser les transitions s’appliquer */
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 230px;
  background: #fff;
  color: #222;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  padding: 8px;
  z-index: 20;

  /* Anim propre (pas de margin-top qui crée un “trou de hover”) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  pointer-events: none;  /* ne capte pas la souris quand caché */
}
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
  pointer-events: auto;
}

/* Liens du sous-menu */
.submenu a{
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background .2s ease, color .2s ease;
}
.submenu a:hover,
.submenu a:focus{
  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)
   =======================================================================*/
.col2{
  display: grid;
  grid-template-columns: var(--cell2-left) var(--cell2-right);
  gap: var(--cell2-gap);
  align-items: start;
  width: 100%;
}
.col2 .col2-left {
  border-style: solid;
  border-width: var(--col2-left-bd-width); 
  border-color: var(--col2-left-bd-color);
  border-radius: var(--col2-left-bd-radius);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;              /* centre le contenu horizontalement */
  align-items: var(--col2-left-align); /* centre verticalement par défaut */
  background: var(--col2-left-bg);
  min-height: 0;
  padding: var(--col2-left-pad);
  color: var(--col2-left-color);
  text-align: var(--col2-left-text-align);
}
.col2 .col2-right {
  border-style: solid;
  border-width: var(--col2-right-bd-width); 
  border-color: var(--col2-right-bd-color);
  border-radius: var(--col2-right-bd-radius);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;              /* centre le contenu horizontalement */
  align-items: flex-start; /* centre verticalement par défaut */
  background: var(--col2-right-bg);
  min-height: 0;
  align-items: var(--col2-right-align);
  padding: var(--col2-right-pad);
  color: var(--col2-right-color);
  text-align: var(--col2-right-text-align);
}

.col3{
  display: grid;
  grid-template-columns: var(--cell-left) var(--cell-gap1) minmax(0, 1fr) var(--cell-gap2) var(--cell-right);
  align-items: start;
  width: 100%;
}
.col3 .col3-left{
  border-style: solid;
  border-width: var(--col3-left-bd-width); 
  border-color: var(--col3-left-bd-color);
  border-radius: var(--col3-left-bd-radius);
  display: flex;
  flex-direction: column;
  align-items: flex-center;                  /* ou center si tu veux centrer les menus */
  justify-content: flex-start;
  align-items: var(--col3-left-align); /* centre verticalement par défaut */
  background: var(--col3-left-bg);
  min-height: 0;
  align-items: var(--col3-left-align);
  padding: var(--col3-left-pad);
  color: var(--col3-left-color);
  text-align: var(--col3-left-text-align);
}
.col3 .col3-middle{
  border-style: solid;
  border-width: var(--col3-middle-bd-width); 
  border-color: var(--col3-middle-bd-color);
  border-radius: var(--col3-middle-bd-radius);
  display: flex;                        /* permet l'alignement horizontal/vertical */
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
/*  justify-content: space-between;  */            /* centre le contenu horizontalement */
/*  align-items: var(--col-middle-align);  centre verticalement par défaut */
  min-width: 0;
  background: var(--col3-middle-bg);
  min-height: 0;
  padding: var(--col3-middle-pad);
  color: var(--col3-middle-color);
/*  text-align: var(--col3-middle-text-align); */
  word-wrap: break-word;
}
.col3 .col3-right{
  border-style: solid;
  border-width: var(--col3-right-bd-width); 
  border-color: var(--col3-right-bd-color);
  border-radius: var(--col3-right-bd-radius);
  display: flex;
  justify-content: center;              /* centre le contenu horizontalement */
  align-items: var(--col3-middle-align); /* centre verticalement par défaut */
  background: var(--col3-right-bg);
  min-height: 0;
  align-items: var(--col3-right-align);
  padding: var(--col3-right-pad);
  color: var(--col3-right-color);
  text-align: var(--col3-right-text-align);
}

.col-gap1, col3-gap2{
  background: transparent;
}

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

}

/* =========================================================================
   CARTES / BLOCS MISE EN AVANT / UTILITAIRES
   =======================================================================*/
.card{
  background: inherit !important;
  display: flex;
  justify-content: center; /* centre horizontalement */
  flex-direction: var(--card-direction);       /* les éléments s’empilent verticalement ou horiztlmt*/
  gap: var(--card-gap);
  pad: var(--card-pad);
  width: var(--card-width);
}
.card-marge-left{
}
.card-true{
  border-style: solid;
  background: var(--cardt-bg);
  border-width: var(--cardt-width); 
  border-color: var(--cardt-color);
  border-radius: var(--cardt-radius);
  padding: var(--cardt-pad);
  margin: var(--cardt-gap);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.card-marge-right{
}
.card-highlight{
  display: flex;             /* l’image et le texte s’alignent côte à côte */
  align-items: center;       /* centre verticalement l’image et le texte */
  gap: 20px;                 /* espace entre photo et texte */
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  border-radius: inherit;
}
.card-highlight:hover{
  transform: scale(1.02);
  background-color: var(--card-bg-hl);
  box-shadow: 0 6px 15px rgba(0,0,0,.15);
}
/* Image dans la carte */
.card-highlight img {
  width: 150px;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0,0,0,.2);
  flex-shrink: 0;                 /* évite que l’image rapetisse */
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .card-marge-left{
  }
  .card-true {
    padding: 16px;
    border-radius: 10px;
  }
.card-marge-right{
  }
  .card-highlight {
    flex-direction: column;   /* photo au-dessus du texte */
    align-items: stretch;
    gap: 12px;
  }
  .card-highlight img {
    width: 120px;             /* image un peu plus petite */
    margin: 0 auto;           /* centrée */
  }
}

/* Réduction de mouvement si préférence utilisateur */
@media (prefers-reduced-motion: reduce) {
  .card-highlight {
    transition: none;
  }
  .card-highlight:hover {
    transform: none;
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
}

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



/* =========================================================================
   TEXTES
   =======================================================================*/

.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); }
/* ----------titre--------- */
.h2{ color:var(--h2-color); margin:auto; text-align:var(--h2-text-align); padding:var(--h2-pad); font-size:var(--h2-size); 
     font-weight:var(--h2-weight);}
.h4{ display: inline-block; margin-right: 10px; color:var(--h4-color); margin:auto; text-align:var(--h4-text-align); padding:var(--h4-pad); font-size:var(--h4-size); 
     font-weight:var(--h4-weight);}
.h4.right {
  text-align: right;
}
.h-row{
  display: flex;
  gap: 10px;           /* espace horizontal entre les deux */
/*  align-items: center;*/ /* aligne verticalement */
  justify-content: space-between;
}

.txt{
  text-align:var(--txt-text-align); color: var(--txt-color); font-size: var(--txt-size); font-weight: var(--txt-weight); padding: var(--txt-pad);
}
.txt-e{
  text-align:var(--txt-e-text-align); color: var(--txt-e-color); font-size: var(--txt-e-size); font-weight: var(--txt-e-weight); padding: var(--txt-e-pad);
}
.txt-s{
  text-align:var(--txt-s-text-align); color: var(--txt-s-color); font-size: var(--txt-s-size); font-weight: var(--txt-s-weight); padding: var(--txt-s-pad);
}
.txt-bx{
  text-align:var(--txt-bx-text-align); color: var(--txt-bx-color); font-size: var(--txt-bx-size); font-weight: var(--txt-bx-weight); padding: var(--txt-bx-pad);
}
.txt-h1{
  text-align:var(--h1-text-align); color: var(--h1-color); font-size: var(--h1-size); font-weight: var(--h1-weight); padding: var(--h1-pad);
}
.txt-h1-hover{ transition: all .3s ease;}
.txt-h1-hover:hover{ var(--color:h1-hover-color); transform: var(--h1-hover-scale); }
.txt-h2{
  text-align:var(--h2-text-align); color: var(--h2-color); font-size: var(--h2-size); font-weight: var(--h2-weight); padding: var(--h2-pad);
}
.txt-h3{
  text-align:var(--h3-text-align); color: var(--h3-color); font-size: var(--h3-size); font-weight: var(--h3-weight); padding: var(--h3-pad);
}
.txt-h5{
  text-align:var(--h5-text-align); color: var(--h5-color); font-size: var(--h5-size); font-weight: var(--h5-weight); padding: var(--h5-pad);
}

.box{
    display: block;
    border-style: solid;
    margin: var(--box-marg); 
    width: var(--box-width); 
    border-width: var(--box-bd-width);
    background: var(--box-bg);
    border-color: var(--box-color);
    border-width: var(--box-width);
    padding: var(--box-pad);
    border-radius: var(--box-rad);
    font-size: var(--box-fontsize);
    cursor: var(--box-cursor);
}
.box box-shad{
    box-shadow: var(--box-shad); 
}
.box box-hover{
    transition: all 0.3s ease;
}

.box box-hover:hover{
    background: var(--box-hover-bg);
    color: var(--box-hover-color);
    transform: scale(var(--box-hover-scale));
    box-shadow: var(--box-hover-shad);
    cursor: var(--box-hover-cursor);
}
.centered{ 
  margin: 0 auto; /* centre horizontalement */
  display: block; /* nécessaire pour que margin:auto fonctionne */
}


.tableau {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 colonnes par ex. */
  border: 1px solid #333;
}

.tableau > div {
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 8px 12px;
  text-align: center;
}

/* dernière colonne : pas de bordure droite */
.tableau > div:nth-child(3n) {
  border-right: none;
}

/* dernière ligne → pas de bordure en bas (ici les cases 3 et 4) */
.tableau > div:nth-last-child(-n+2) {
  border-bottom: none;
}

@media (max-width: 700px) {
  .tableau {
    grid-template-columns: 1fr;  /* 1 seule colonne sur petit écran */
  }
}


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



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