/* ================================================================
   CEE-ENSA — charte graphique v2 (septembre 2026)
   À charger AVANT les feuilles de page dans base.html.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --marine:#001C31;           --turquoise:#09A38C;
  --turquoise-fonce:#067264;  --ardoise:#516B8F;
  --bleu-clair:#869ECE;       --jaune:#FFF59D;
  --menthe:#C5FCEE;           --menthe-texte:#00544A;
  --creme:#F0EEE9;            --aplat:#F7F6F3;
  --filet:#E8E0DC;            --bord-champ:#C9C2B4;
  --marine-panneau:#00253F;

  --titre:'Space Grotesk',sans-serif;
  --texte:'Public Sans',system-ui,sans-serif;
  --donnee:'JetBrains Mono',monospace;

  --pas:4px; --rayon:4px; --largeur-contenu:1180px;
}

body{
  margin:0;
  background:var(--creme);
  color:var(--marine);
  font-family:var(--texte);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--titre);text-wrap:pretty}
a{color:var(--turquoise-fonce);text-decoration:none}
a:hover{color:var(--marine)}
img{max-width:100%}

/* --- sous-menus de la barre de navigation --- */
.sousmenu{
  position:absolute;top:100%;left:0;z-index:60;min-width:262px;
  background:var(--marine-panneau);border-top:2px solid var(--turquoise);
  box-shadow:0 14px 30px rgba(0,0,0,.32);padding:7px 0;display:none;
}
[data-sousmenu]:hover .sousmenu,
[data-sousmenu].ouvert .sousmenu{display:block}
[data-onglet].actif{color:var(--turquoise) !important;box-shadow:inset 0 -2px 0 var(--turquoise)}

/* --- drive : dépliage du volet de droite --- */
.drive-enfants[hidden]{display:none}
[data-bascule]{cursor:pointer}

/* --- états de survol repris du prototype --- */
.sv1:hover{
  color:#FFF59D !important;
}
.sv2:hover{
  background:rgba(9,163,140,.18) !important;
  color:#FFF59D !important;
}
.sv3:hover{
  background:#067264 !important;
  color:#fff !important;
}
.sv4:hover{
  background:rgba(255,245,157,.16) !important;
  color:#FFF59D !important;
}
.sv5:hover{
  background:#F7F6F3 !important;
  color:#001C31 !important;
}
.sv6:hover{
  border-color:#09A38C !important;
  color:#001C31 !important;
}
.sv7:hover{
  background:#C5FCEE !important;
  color:#001C31 !important;
}
.sv8:hover{
  background:#FFF59D !important;
  color:#001C31 !important;
}
.sv9:hover{
  background:#fff !important;
  color:#001C31 !important;
}
.sv10:hover{
  background:rgba(9,163,140,.22) !important;
  color:#FFF59D !important;
}