/* ===================================================================
   NACI2 - feuille de style unique
   Theme clair « ocean », mobile first, sans dependance externe.
   Sommaire :
     1. Jetons de design      5. Composants de contenu
     2. Base                  6. Formulaires
     3. Barre et navigation   7. Tableau de bord
     4. Cartes et grilles     8. Authentification
   =================================================================== */

/* ------------------------- 1. JETONS DE DESIGN --------------------- */
:root {
  /* surfaces */
  --bg: #f4f8fc;
  --bg-alt: #ffffff;
  --bg-soft: #eef4fa;
  --bg-voile: #f8fbfe;

  /* texte */
  --txt: #16233a;
  --txt-soft: #566b84;
  --txt-faint: #8ca0b5;

  /* traits */
  --bord: #e3ecf5;
  --bord-fort: #cfdcea;

  /* bleu ocean, couleur d'accent principale */
  --prim: #1875ce;
  --prim-fort: #125ca6;
  --prim-vif: #2e8be6;
  --prim-clair: #e8f1fc;
  --prim-voile: #f3f8fe;

  /* etats */
  --ok: #0f8a5f;        --ok-bg: #e6f7ef;
  --attn: #a87400;      --attn-bg: #fef4dc;
  --alerte: #c25410;    --alerte-bg: #fdeee0;
  --crit: #c0352f;      --crit-bg: #fdeceb;
  --info: #1875ce;      --info-bg: #e8f1fc;

  /* accents thematiques des cartes */
  --a-eau: #1e88e5;     --a-eau-bg: #e6f2fd;
  --a-pb: #e05a44;      --a-pb-bg: #fdecea;
  --a-poisson: #7335f8; --a-poisson-bg: #f0e9fe;
  --a-corail: #0f9d6b;  --a-corail-bg: #e6f9f0;
  --a-algue: #c08a09;   --a-algue-bg: #fef4dc;
  --a-biblio: #8d5cf1;  --a-biblio-bg: #f2e9fe;

  /* formes */
  --rayon-xs: 8px;
  --rayon-s: 10px;
  --rayon: 14px;
  --rayon-l: 20px;

  /* profondeur */
  --ombre-xs: 0 1px 2px rgba(22, 48, 82, .05);
  --ombre: 0 1px 2px rgba(22, 48, 82, .04), 0 4px 14px rgba(22, 48, 82, .05);
  --ombre-f: 0 2px 6px rgba(22, 48, 82, .06), 0 14px 34px rgba(22, 48, 82, .10);
  --ombre-haut: 0 1px 0 rgba(22, 48, 82, .06);

  /* gabarit */
  --nav-l: 232px;
  --barre-h: 60px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------ 2. BASE ---------------------------- */
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 16px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--prim); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--prim);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; color: var(--txt); }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; margin-top: 2rem; }
h3 { font-size: 1.05rem; margin-top: 1.4em; }
h4 { font-size: .9rem; margin-top: 1.2em; color: var(--txt-soft); }
p  { margin: 0 0 .9em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: .3em; }
hr { border: 0; border-top: 1px solid var(--bord); margin: 1.6em 0; }
small { font-size: .82rem; }
code, kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em;
  background: var(--bg-soft); padding: .1em .35em; border-radius: 5px; }

.ic { flex: 0 0 auto; vertical-align: -.15em; }

/* lien d'evitement : hors ecran, ramene au premier plan au focus clavier.
   Gere entierement en CSS, pour ne pas dependre de script en ligne. */
.lien-evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--prim); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 var(--rayon-s) 0; font-weight: 650; font-size: .9rem;
}
.lien-evitement:focus { left: 0; text-decoration: none; }

/* --------------------- 3. BARRE ET NAVIGATION ---------------------- */
.appbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .7rem;
  height: var(--barre-h); padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid var(--bord);
}

.burger {
  display: none;
  background: transparent; border: 0; color: var(--txt-soft); cursor: pointer;
  width: 40px; height: 40px; border-radius: var(--rayon-xs);
  align-items: center; justify-content: center;
}
.burger:hover { background: var(--bg-soft); color: var(--txt); }

/* marque */
.marque-bloc { display: inline-flex; align-items: center; gap: .55rem; color: var(--prim); }
.marque-mots { display: flex; flex-direction: column; line-height: 1.05; }
.marque-nom {
  font-weight: 800; letter-spacing: -.02em; color: var(--txt);
  font-size: 1.32rem;
}
.marque-nom i { font-style: normal; color: var(--prim-vif); }
.marque-sous { font-size: .68rem; color: var(--txt-faint); letter-spacing: .01em; font-weight: 500; }
.marque-lg .marque-nom { font-size: 2.3rem; }
.marque-lg .marque-sous { font-size: .85rem; }
a.marque-lien:hover { text-decoration: none; }

/* recherche — le selecteur porte le type pour passer devant la regle
   generique des champs de formulaire, declaree plus loin */
.recherche { flex: 1 1 auto; max-width: 480px; margin: 0 auto; position: relative; }
.appbar .recherche input[type=search] {
  width: 100%; height: 40px; padding: 0 1rem 0 2.6rem;
  background: var(--bg-soft); border: 1px solid transparent; border-radius: 999px;
  font-size: .9rem; color: var(--txt);
}
.recherche input::placeholder { color: var(--txt-faint); }
.appbar .recherche input[type=search]:focus {
  background: #fff; border-color: var(--prim); outline: none;
  box-shadow: 0 0 0 3px var(--prim-clair);
}
.recherche .ic { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--txt-faint); pointer-events: none; }

/* selecteur de bac */
.selbac-enveloppe { position: relative; display: inline-flex; align-items: center; }
.selbac-enveloppe > .ic { position: absolute; left: .65rem; color: var(--prim); pointer-events: none; }
.selbac {
  appearance: none;
  background: #fff; border: 1px solid var(--bord-fort); color: var(--txt);
  border-radius: 999px; padding: .45rem 2rem .45rem 2.3rem; font-size: .86rem; font-weight: 600;
  max-width: 230px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23566b84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center;
}
.selbac:hover { border-color: var(--prim); }

/* bloc compte */
.compte-bloc { display: flex; align-items: center; gap: .3rem; }
.compte-nom {
  display: flex; align-items: center; gap: .5rem; color: var(--txt); text-decoration: none;
  padding: .3rem .6rem .3rem .3rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
}
.compte-nom:hover { background: var(--bg-soft); text-decoration: none; }
.avatar {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  background: linear-gradient(140deg, #7c4ddb, #5b63d3);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}
.lien-sortie {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; color: var(--txt-soft); font: inherit; font-size: .86rem; font-weight: 600;
  cursor: pointer; padding: .45rem .7rem; border-radius: var(--rayon-xs);
}
.lien-sortie:hover { background: var(--bg-soft); color: var(--txt); }

/* coque et barre laterale */
.coque { display: flex; min-height: calc(100vh - var(--barre-h)); }

.nav {
  flex: 0 0 var(--nav-l); width: var(--nav-l);
  background: #fff; border-right: 1px solid var(--bord);
  padding: .55rem .6rem .45rem;
  position: sticky; top: var(--barre-h); height: calc(100vh - var(--barre-h)); overflow-y: auto;
  /* barre de defilement discrete : elle n'apparait que sur les ecrans trop
     courts pour afficher les 21 entrees d'un bloc */
  scrollbar-width: thin; scrollbar-color: var(--bord-fort) transparent;
}
.nav::-webkit-scrollbar { width: 7px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.nav:hover::-webkit-scrollbar-thumb { background: var(--bord-fort); }

.nav h5 {
  margin: .72rem .7rem .18rem; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--txt-faint); font-weight: 700;
}
.nav h5:first-child { margin-top: .1rem; }
.nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .7rem; border-radius: var(--rayon-s);
  color: var(--txt-soft); font-size: .89rem; font-weight: 500; text-decoration: none;
  line-height: 1.35;
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--bg-soft); color: var(--txt); text-decoration: none; }
.nav a .ic { color: var(--txt-faint); transition: color .15s; }
.nav a:hover .ic { color: var(--prim); }
.nav a.actif { background: var(--prim-clair); color: var(--prim-fort); font-weight: 650; }
.nav a.actif .ic { color: var(--prim); }
.nav .pastille {
  margin-left: auto; background: var(--crit); color: #fff; font-size: .68rem;
  min-width: 19px; height: 19px; padding: 0 .35rem; border-radius: 10px; font-weight: 700;
  display: grid; place-items: center;
}

.contenu { flex: 1 1 auto; min-width: 0; padding: 1.6rem 24px 4rem; max-width: 1480px; }

@media (max-width: 1000px) {
  .burger { display: inline-flex; }
  .coque { display: block; }
  .nav {
    position: fixed; top: var(--barre-h); left: 0; bottom: 0; width: 272px; z-index: 50;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--ombre-f);
    height: auto;
  }
  body.nav-ouvert .nav { transform: translateX(0); }
  body.nav-ouvert::after {
    content: ''; position: fixed; inset: var(--barre-h) 0 0 0; background: rgba(13, 38, 66, .4); z-index: 45;
  }
  .contenu { padding: 1.2rem 16px 3.5rem; }
  .recherche { max-width: none; }
  h1 { font-size: 1.45rem; }
}
@media (max-width: 720px) {
  .marque-sous { display: none; }
  .recherche { display: none; }
  .recherche.mobile-visible { display: block; }
  .compte-nom span:not(.avatar) { display: none; }
  .lien-sortie span { display: none; }
  .selbac { max-width: 130px; font-size: .8rem; }
}

/* --------------------- 4. CARTES ET GRILLES ------------------------ */
.carte {
  background: var(--bg-alt); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 1.15rem 1.25rem; margin-bottom: 1rem;
  box-shadow: var(--ombre-xs);
}
.carte > :first-child { margin-top: 0; }
.carte > :last-child { margin-bottom: 0; }
.carte.plat { box-shadow: none; }
.carte .ct { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.carte .ct h2, .carte .ct h3 { margin: 0; }
a.carte { display: block; color: inherit; transition: box-shadow .18s, transform .18s; }
a.carte:hover { text-decoration: none; box-shadow: var(--ombre-f); transform: translateY(-2px); }

.grille { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ------------------- 5. COMPOSANTS DE CONTENU ---------------------- */
/* tuiles de parametre */
.tuile {
  background: var(--bg-alt); border: 1px solid var(--bord); border-left: 4px solid var(--bord-fort);
  border-radius: var(--rayon); padding: .8rem .95rem; box-shadow: var(--ombre-xs);
  display: block; color: inherit;
}
.tuile:hover { text-decoration: none; box-shadow: var(--ombre); }
.tuile .nom { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--txt-faint); font-weight: 700; }
.tuile .val { font-size: 1.6rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tuile .val u { font-size: .78rem; font-weight: 600; color: var(--txt-soft); text-decoration: none; margin-left: .15rem; }
.tuile .meta { font-size: .75rem; color: var(--txt-faint); margin-top: .15rem; }
.tuile.z-ok    { border-left-color: var(--ok); }
.tuile.z-attn  { border-left-color: var(--attn); }
.tuile.z-alerte{ border-left-color: var(--alerte); }
.tuile.z-crit  { border-left-color: var(--crit); }
.tuile.z-vide  { border-left-color: var(--bord-fort); opacity: .75; }

.plage { position: relative; height: 6px; background: var(--bg-soft); border-radius: 3px; margin: .55rem 0 .2rem; }
.plage .zone-ok { position: absolute; top: 0; bottom: 0; background: var(--ok); opacity: .3; border-radius: 3px; }
.plage .curseur { position: absolute; top: -3px; width: 3px; height: 12px; background: var(--txt); border-radius: 2px; }
.plage-leg { display: flex; justify-content: space-between; font-size: .68rem; color: var(--txt-faint); }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
  background: var(--bg-soft); color: var(--txt-soft);
}
.badge.z-ok     { background: var(--ok-bg);     color: var(--ok); }
.badge.z-attn   { background: var(--attn-bg);   color: var(--attn); }
.badge.z-alerte { background: var(--alerte-bg); color: var(--alerte); }
.badge.z-crit   { background: var(--crit-bg);   color: var(--crit); }
.badge.z-neutre { background: var(--bg-soft);   color: var(--txt-faint); }
.badge.sev-info      { background: var(--info-bg);   color: var(--info); }
.badge.sev-conseil   { background: var(--info-bg);   color: var(--info); }
.badge.sev-attention { background: var(--attn-bg);   color: var(--attn); }
.badge.sev-alerte    { background: var(--alerte-bg); color: var(--alerte); }
.badge.sev-critique  { background: var(--crit-bg);   color: var(--crit); }
.badge.pleine { background: var(--prim); color: #fff; }

.puces { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* jauges */
.jauge { display: inline-flex; gap: 2px; vertical-align: middle; }
.jauge i { width: 7px; height: 7px; border-radius: 2px; background: var(--bord-fort); display: block; }
.jauge i.on { background: var(--prim); }
.jauge.danger i.on { background: var(--alerte); }

/* conseils */
.conseil {
  background: var(--bg-alt); border: 1px solid var(--bord); border-left: 4px solid var(--info);
  border-radius: var(--rayon); padding: 1.05rem 1.2rem; margin-bottom: .9rem; box-shadow: var(--ombre-xs);
}
.conseil.sev-critique  { border-left-color: var(--crit);   background: linear-gradient(100deg, var(--crit-bg) 0%, var(--bg-alt) 20%); }
.conseil.sev-alerte    { border-left-color: var(--alerte); background: linear-gradient(100deg, var(--alerte-bg) 0%, var(--bg-alt) 20%); }
.conseil.sev-attention { border-left-color: var(--attn); }
.conseil.sev-conseil   { border-left-color: var(--prim); }
.conseil.sev-info      { border-left-color: var(--bord-fort); }
.conseil h3 { margin: 0 0 .4rem; font-size: 1.04rem; }
.conseil .tete { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin-bottom: .45rem; }
.conseil p:last-child { margin-bottom: 0; }
a.conseil { display: block; color: inherit; transition: box-shadow .18s, transform .18s; }
a.conseil:hover { text-decoration: none; box-shadow: var(--ombre-f); transform: translateY(-2px); }

.actionbloc { background: var(--bg-voile); border: 1px solid var(--bord);
  border-radius: var(--rayon-s); padding: .8rem .95rem; margin-top: .8rem; }
.actionbloc h4 { margin: 0 0 .4rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--txt-faint); }
.actionbloc ul, .actionbloc ol { margin: 0; padding-left: 1.2rem; }

.correctif { border: 1px solid var(--bord); border-radius: var(--rayon-s); padding: .8rem .95rem;
  margin-top: .65rem; background: var(--prim-voile); }
.correctif .qte { font-size: 1.25rem; font-weight: 800; color: var(--prim); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.source { font-size: .78rem; color: var(--txt-faint); margin-top: .7rem;
  padding-top: .55rem; border-top: 1px dashed var(--bord); }

/* tableaux */
.tabwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem;
  border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--bg-alt); box-shadow: var(--ombre-xs); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { background: var(--bg-voile); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--txt-faint); font-weight: 700; white-space: nowrap; position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-voile); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* blocs depliables */
details.bloc { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--bg-alt);
  margin-bottom: .6rem; box-shadow: var(--ombre-xs); }
details.bloc > summary { padding: .8rem 1rem; cursor: pointer; font-weight: 600; list-style: none;
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; border-radius: var(--rayon); }
details.bloc > summary::-webkit-details-marker { display: none; }
details.bloc > summary::before { content: '▸'; color: var(--txt-faint); flex: 0 0 auto; }
details.bloc[open] > summary::before { content: '▾'; }
details.bloc > summary:hover { background: var(--bg-voile); }
details.bloc .corps { padding: .85rem 1rem 1rem; border-top: 1px solid var(--bord); }

/* divers */
.muet { color: var(--txt-soft); }
.faible { color: var(--txt-faint); }
.centre { text-align: center; }
.chapeau { font-size: 1.02rem; color: var(--txt-soft); margin-bottom: 1.5rem; max-width: 76ch; }
.filtres { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.2rem;
  background: var(--bg-alt); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .9rem; box-shadow: var(--ombre-xs); }
.filtres > * { flex: 0 1 auto; }
.filtres .champ { margin-bottom: 0; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.chip { display: inline-block; padding: .35rem .8rem; border-radius: 999px; font-size: .84rem; font-weight: 500;
  background: var(--bg-alt); border: 1px solid var(--bord-fort); color: var(--txt-soft); }
.chip:hover { background: var(--bg-soft); text-decoration: none; color: var(--txt); }
.chip.actif { background: var(--prim); border-color: var(--prim); color: #fff; font-weight: 650; }

.score { display: flex; align-items: center; gap: 1.1rem; }
.score .anneau {
  --p: 0;
  width: 92px; height: 92px; flex: 0 0 auto; border-radius: 50%;
  background: conic-gradient(var(--c, var(--ok)) calc(var(--p) * 1%), var(--bg-soft) 0);
  display: grid; place-items: center; position: relative;
}
.score .anneau::before { content: ''; position: absolute; inset: 10px; background: var(--bg-alt); border-radius: 50%; }
.score .anneau b { position: relative; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }

.barre { height: 8px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--prim-vif), var(--prim)); border-radius: 999px; }

.liste-def { margin: 0; }
.liste-def dt { font-weight: 650; margin-top: .8rem; }
.liste-def dd { margin: 0 0 .2rem; color: var(--txt-soft); }

.etape { border-left: 3px solid var(--bord); padding: 0 0 1.2rem 1.2rem; margin-left: .4rem; position: relative; }
.etape::before { content: ''; position: absolute; left: -7px; top: .45rem; width: 11px; height: 11px;
  border-radius: 50%; background: var(--bg-alt); border: 2px solid var(--bord-fort); }
.etape.fait { border-left-color: var(--ok); }
.etape.fait::before { background: var(--ok); border-color: var(--ok); }
.etape.courante { border-left-color: var(--prim); }
.etape.courante::before { background: var(--prim); border-color: var(--prim); box-shadow: 0 0 0 4px var(--prim-clair); }
.etape h3 { margin-top: 0; }

.graphe { width: 100%; height: 190px; display: block; }

.confiance { display: flex; align-items: center; gap: .5rem; min-width: 140px; }
.confiance .b { flex: 1 1 auto; height: 7px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.confiance .b i { display: block; height: 100%; background: var(--prim); }
.confiance b { font-variant-numeric: tabular-nums; font-size: .88rem; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: .9rem; }
.kv dt { color: var(--txt-faint); font-weight: 600; font-size: .8rem; white-space: nowrap; }
.kv dd { margin: 0; }

/* --------------------------- 6. FORMULAIRES ------------------------ */
label { display: block; font-size: .82rem; font-weight: 600; color: var(--txt-soft); margin-bottom: .3rem; }
input[type=text], input[type=number], input[type=date], input[type=datetime-local],
input[type=search], input[type=email], input[type=password], select, textarea {
  width: 100%; padding: .55rem .7rem; font: inherit; font-size: .92rem;
  background: #fff; color: var(--txt);
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-xs);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--prim); box-shadow: 0 0 0 3px var(--prim-clair);
}
textarea { min-height: 74px; resize: vertical; }
.champ { margin-bottom: 1rem; }
.champ .aide { font-size: .76rem; color: var(--txt-faint); margin-top: .25rem; font-weight: 400; }
.aide.erreur { color: var(--crit); font-weight: 600; }
input[aria-invalid="true"] { border-color: var(--crit); }
.inline { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.inline > * { flex: 1 1 150px; }
.coche { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; font-size: .9rem;
  color: var(--txt); margin-bottom: .6rem; cursor: pointer; }
.coche input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .2rem; accent-color: var(--prim); }

.btn {
  display: inline-flex; align-items: center; gap: .45rem; justify-content: center;
  padding: .6rem 1.1rem; font: inherit; font-size: .92rem; font-weight: 650;
  background: var(--prim); color: #fff; border: 1px solid var(--prim);
  border-radius: var(--rayon-xs); cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
}
.btn:hover { background: var(--prim-fort); border-color: var(--prim-fort); text-decoration: none; color: #fff;
  box-shadow: 0 4px 14px rgba(24, 117, 206, .28); }
.btn:active { transform: translateY(1px); }
.btn.sec { background: #fff; color: var(--txt); border-color: var(--bord-fort); }
.btn.sec:hover { background: var(--bg-soft); color: var(--txt); box-shadow: var(--ombre); }
.btn.danger { background: #fff; color: var(--crit); border-color: var(--crit); }
.btn.danger:hover { background: var(--crit-bg); color: var(--crit); box-shadow: none; }
.btn.petit { padding: .35rem .7rem; font-size: .82rem; }
.btn.large { padding: .8rem 1.4rem; font-size: 1rem; width: 100%; }
.btns { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }

.flash { padding: .8rem 1.05rem; border-radius: var(--rayon-s); margin-bottom: 1.2rem; font-size: .92rem; font-weight: 500;
  border: 1px solid transparent; }
.flash.ok   { background: var(--ok-bg); color: var(--ok); border-color: rgba(15, 138, 95, .22); }
.flash.warn { background: var(--attn-bg); color: var(--attn); border-color: rgba(168, 116, 0, .22); }
.flash.err  { background: var(--crit-bg); color: var(--crit); border-color: rgba(192, 53, 47, .22); }

/* ------------------------ 7. TABLEAU DE BORD ----------------------- */
/* banniere recifale */
.hero {
  position: relative; border-radius: var(--rayon-l); overflow: hidden; margin-bottom: 1.8rem;
  background: linear-gradient(104deg, #eaf3fd 0%, #e2eefb 38%, #cfe6fa 58%, #9fcdf2 100%);
  box-shadow: var(--ombre);
  isolation: isolate;
}
.hero-photo {
  position: absolute; inset: 0 0 0 auto; width: 62%; height: 100%;
  object-fit: cover; object-position: 72% 50%;
  z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
}
.hero-contenu { padding: 2.2rem 2rem; max-width: 620px; }
.hero-sur { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--prim); margin-bottom: .5rem; }
.hero h1 { font-size: 2.6rem; letter-spacing: -.035em; margin-bottom: .25rem; }
.hero h1 i { font-style: normal; color: var(--prim-vif); }
.hero .accroche { font-size: 1.12rem; font-weight: 600; color: var(--txt); margin-bottom: .6rem; }
.hero p { color: var(--txt-soft); max-width: 48ch; }
.hero .btns { margin-top: 1.3rem; }

.hero-carte {
  position: absolute; right: 1.6rem; top: 50%; transform: translateY(-50%);
  width: 310px; padding: 1.1rem 1.2rem;
  background: rgba(255, 255, 255, .17);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--rayon);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff; text-shadow: 0 1px 10px rgba(6, 30, 56, .45);
}
.hero-carte .rond {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); margin-bottom: .7rem; color: #fff;
}
.hero-carte h3 { color: #fff; margin: 0 0 .35rem; font-size: 1.02rem; line-height: 1.35; }
.hero-carte p { color: rgba(255, 255, 255, .9); font-size: .85rem; margin: 0; }

/* variante « bac en cours » : bandeau plus compact */
.hero-bac .hero-contenu { padding: 1.7rem 2rem; }
.hero-bac h1 { font-size: 2rem; margin-bottom: .6rem; }
.hero-puces { margin-bottom: .2rem; }
.hero-puces .badge { background: rgba(255, 255, 255, .78); color: var(--txt-soft); }
.hero-puces .badge.pleine { background: var(--prim); color: #fff; }

@media (max-width: 1180px) { .hero-carte { display: none; } .hero-photo { width: 48%; } }
@media (max-width: 780px) {
  .hero { background: linear-gradient(170deg, #eaf3fd 0%, #d7e9fb 100%); }
  .hero-photo { position: relative; inset: auto; width: 100%; height: 150px;
    -webkit-mask-image: none; mask-image: none; display: block; }
  .hero-contenu { padding: 1.4rem 1.2rem; max-width: none; }
  .hero h1 { font-size: 1.9rem; }
  .hero .btns .btn { flex: 1 1 100%; }
}

/* cartes statistiques du referentiel */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 1rem; }
.stat {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  overflow: hidden; color: inherit; box-shadow: var(--ombre-xs);
  transition: box-shadow .2s, transform .2s;
  min-height: 190px;
}
.stat:hover { text-decoration: none; box-shadow: var(--ombre-f); transform: translateY(-3px); }
.stat-haut { padding: 1rem 1.1rem .6rem; display: flex; gap: .75rem; align-items: flex-start; }
.stat-rond { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; }
.stat-haut > span:last-child { min-width: 0; }
.stat-chiffre { display: block; font-size: 1.85rem; font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.stat-nom { display: block; font-weight: 700; font-size: .95rem; margin-top: .2rem; line-height: 1.25; }
.stat-desc { padding: 0 1.1rem; font-size: .79rem; color: var(--txt-faint); line-height: 1.45; }
.stat-img { margin-top: auto; width: 100%; height: 74px; object-fit: cover; object-position: center 62%;
  display: block; opacity: .95; }
.stat-chiffre small { font-size: .9rem; font-weight: 700; color: var(--txt-faint); margin-left: 1px; }

/* rangee d'indicateurs du tableau de bord : pas d'illustration, donc plus basse */
.stats-kpi { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: 1.4rem; }
.stats-kpi .stat { min-height: 0; }
.stats-kpi .stat-desc { padding-bottom: 1rem; }

.stat.a-eau     .stat-rond { background: var(--a-eau-bg); color: var(--a-eau); }
.stat.a-pb      .stat-rond { background: var(--a-pb-bg); color: var(--a-pb); }
.stat.a-poisson .stat-rond { background: var(--a-poisson-bg); color: var(--a-poisson); }
.stat.a-corail  .stat-rond { background: var(--a-corail-bg); color: var(--a-corail); }
.stat.a-algue   .stat-rond { background: var(--a-algue-bg); color: var(--a-algue); }
.stat.a-biblio  .stat-rond { background: var(--a-biblio-bg); color: var(--a-biblio); }

/* parcours en trois etapes */
.etapes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.etape-carte {
  display: flex; gap: .9rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 1.1rem 1.2rem; box-shadow: var(--ombre-xs); position: relative; overflow: hidden;
}
.etape-num {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .95rem;
}
.etape-carte:nth-child(1) .etape-num { background: var(--a-eau-bg); color: var(--a-eau); }
.etape-carte:nth-child(2) .etape-num { background: var(--a-biblio-bg); color: var(--a-biblio); }
.etape-carte:nth-child(3) .etape-num { background: var(--a-corail-bg); color: var(--a-corail); }
.etape-carte h3 { margin: 0 0 .3rem; font-size: 1rem; }
.etape-carte p { margin: 0; font-size: .87rem; color: var(--txt-soft); }
.etape-img { position: absolute; right: -10px; bottom: -14px; width: 108px; opacity: .5;
  pointer-events: none; border-radius: 10px; }

/* duo diagnostic / conseils */
.duo { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.duo-bloc {
  position: relative; overflow: hidden; border-radius: var(--rayon);
  border: 1px solid var(--bord); padding: 1.3rem 1.4rem; min-height: 158px;
  display: flex; gap: 1rem; align-items: flex-start;
}
.duo-bloc.bleu  { background: linear-gradient(100deg, #e4f0fc 0%, #d4e8fb 100%); }
.duo-bloc.ambre { background: linear-gradient(100deg, #fef3dd 0%, #fde9c6 100%); }
.duo-bloc .rond { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(255, 255, 255, .8); display: grid; place-items: center; }
.duo-bloc.bleu  .rond { color: var(--a-eau); }
.duo-bloc.ambre .rond { color: var(--a-algue); }
.duo-bloc h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.duo-bloc p { color: var(--txt-soft); font-size: .9rem; max-width: 44ch; }
.duo-img { position: absolute; right: 0; top: 0; height: 100%; width: 42%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
          mask-image: linear-gradient(90deg, transparent, #000 60%);
  opacity: .9; pointer-events: none; }
.duo-bloc > * { position: relative; }

/* --------------------------- videos YouTube ------------------------ */
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(232, 48, 42, .92); color: #fff;
  display: grid; place-items: center; font-size: .9rem; padding-left: 3px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3); transition: transform .18s, background .18s;
}

.video-une {
  display: flex; gap: 1.3rem; align-items: stretch;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 1rem; box-shadow: var(--ombre-xs); color: inherit; margin-bottom: 1rem;
  transition: box-shadow .2s, transform .2s;
}
.video-une:hover { text-decoration: none; box-shadow: var(--ombre-f); transform: translateY(-2px); }
.video-une:hover .video-play { transform: scale(1.1); background: #e8302a; }
.video-une-img { position: relative; flex: 0 0 300px; border-radius: var(--rayon-s); overflow: hidden; }
.video-une-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-une-txt { display: flex; flex-direction: column; gap: .4rem; justify-content: center; min-width: 0; }
.video-une-txt strong { font-size: 1.2rem; line-height: 1.3; }
.video-resume { font-size: .88rem; line-height: 1.5; }

.videos-grille { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.video-carte { display: flex; flex-direction: column; gap: .45rem; color: inherit; }
.video-carte:hover { text-decoration: none; }
.video-carte:hover .video-titre { color: var(--prim); }
.video-carte:hover .video-play { transform: scale(1.1); background: #e8302a; }
.video-vignette {
  position: relative; display: block; border-radius: var(--rayon-s); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--bg-soft); box-shadow: var(--ombre-xs);
}
.video-vignette img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s; }
.video-carte:hover .video-vignette img { transform: scale(1.04); }
.video-titre { font-weight: 650; font-size: .92rem; line-height: 1.35; transition: color .15s; }

/* bandeau « nouvelle video » en tete du tableau de bord */
.video-bandeau {
  display: flex; align-items: center; gap: 1rem;
  background: #fff; border: 1px solid var(--bord); border-left: 4px solid #e8302a;
  border-radius: var(--rayon); padding: .7rem .9rem; margin-bottom: 1.1rem;
  color: inherit; box-shadow: var(--ombre-xs);
  transition: box-shadow .2s, transform .2s;
}
.video-bandeau:hover { text-decoration: none; box-shadow: var(--ombre-f); transform: translateY(-2px); }
.video-bandeau:hover .video-play { transform: scale(1.1); background: #e8302a; }
.video-bandeau .video-vignette { flex: 0 0 168px; aspect-ratio: 16 / 10; }
.video-bandeau .video-play { width: 36px; height: 36px; font-size: .72rem; }
.video-bandeau-txt { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 auto; }
.video-bandeau-txt strong { font-size: 1.04rem; line-height: 1.3; }
.video-bandeau:hover .video-bandeau-txt strong { color: var(--prim); }
.video-bandeau-fleche { flex: 0 0 auto; color: var(--txt-faint); padding-right: .3rem; }
.video-bandeau-pied { margin: -.4rem 0 1.4rem; font-size: .86rem; }
.video-bandeau-pied a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.badge.rouge { background: #fdeceb; color: #c0352f; }

@media (max-width: 620px) {
  .video-bandeau { flex-direction: column; align-items: stretch; gap: .7rem; }
  .video-bandeau .video-vignette { flex: none; }
  .video-bandeau-fleche { display: none; }
}

/* encart « derniere video » du tableau de bord */
.video-encart { display: flex; gap: .9rem; align-items: center; color: inherit; }
.video-encart:hover { text-decoration: none; }
.video-encart .video-vignette { flex: 0 0 132px; aspect-ratio: 16 / 10; }
.video-encart .video-play { width: 34px; height: 34px; font-size: .7rem; }
.video-encart-txt { min-width: 0; }
.video-encart strong { display: block; font-size: .93rem; line-height: 1.35; }
.video-encart:hover strong { color: var(--prim); }

@media (max-width: 620px) {
  .video-une { flex-direction: column; gap: .8rem; }
  .video-une-img { flex: none; aspect-ratio: 16 / 10; }
  .video-une-txt strong { font-size: 1.05rem; }
}

/* en-tete de section */
.section-tete { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 2rem 0 1rem; }
.section-tete h2 { margin: 0; }
.section-tete .pousse { margin-left: auto; }
.section-ic {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px;
  background: var(--prim-clair); color: var(--prim); display: grid; place-items: center;
}

/* ------------------------- administration -------------------------- */
.histo { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.histo-barre {
  flex: 1 1 auto; min-width: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--prim-vif), var(--prim));
  transition: opacity .15s;
}
.histo-barre:hover { opacity: .7; }
.histo-leg { display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .5rem; font-size: .76rem; color: var(--txt-faint); }

.tab-nu { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tab-nu td { padding: .45rem .3rem; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tab-nu tr:last-child td { border-bottom: 0; }
.mini-barre { display: block; height: 7px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.mini-barre i { display: block; height: 100%; background: var(--prim); border-radius: 999px; }

.liste-nue { list-style: none; margin: 0; padding: 0; }
.liste-nue li { display: flex; gap: .6rem; align-items: center; padding: .45rem 0;
  border-bottom: 1px solid var(--bord); }
.liste-nue li:last-child { border-bottom: 0; }
.avatar-s { width: 26px; height: 26px; font-size: .75rem; }

.actions-compte { display: flex; gap: .3rem; flex-wrap: wrap; }

/* carte de rappel en pied de page */
.carte-rappel { background: var(--prim-voile); border-color: var(--bord); margin-top: 2rem; }
.carte-rappel h3 { display: flex; align-items: center; gap: .5rem; color: var(--prim-fort); }

/* ------------------------- en-tete de page ------------------------- */
.entete { margin-bottom: 1.4rem; }
.entete-retour { margin: 0 0 .7rem; font-size: .88rem; }
.entete-retour a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--txt-soft); }
.entete-retour a:hover { color: var(--prim); }
.ic-retour { transform: rotate(180deg); }

.entete-ligne { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.entete-rond {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--prim-clair); color: var(--prim);
}
.entete.a-eau     .entete-rond { background: var(--a-eau-bg);     color: var(--a-eau); }
.entete.a-pb      .entete-rond { background: var(--a-pb-bg);      color: var(--a-pb); }
.entete.a-poisson .entete-rond { background: var(--a-poisson-bg); color: var(--a-poisson); }
.entete.a-corail  .entete-rond { background: var(--a-corail-bg);  color: var(--a-corail); }
.entete.a-algue   .entete-rond { background: var(--a-algue-bg);   color: var(--a-algue); }
.entete.a-biblio  .entete-rond { background: var(--a-biblio-bg);  color: var(--a-biblio); }

.entete-texte { min-width: 0; flex: 1 1 auto; }
.entete-texte h1 { margin: 0; }
.entete-sous { margin: .15rem 0 0; color: var(--txt-faint); font-size: .92rem; }
.entete-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.entete .chapeau { margin: .9rem 0 0; }
.entete-puces { margin-top: .9rem; }

@media (max-width: 620px) {
  .entete-rond { width: 40px; height: 40px; border-radius: 11px; }
  .entete-actions { margin-left: 0; width: 100%; }
  .entete-actions .btn { flex: 1 1 auto; }
}

/* ---------------------- 8. AUTHENTIFICATION ------------------------ */
.page-auth { min-height: 100vh; position: relative; }
.page-auth::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 420px at 50% -6%, rgba(255,255,255,.5), transparent 62%),
    linear-gradient(180deg, #2a86c9 0%, #1b6bb0 30%, #11518d 62%, #0d3f71 100%);
}
.page-auth::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: min(46vh, 420px); z-index: -1;
  background-image: image-set(url("../img/banniere-recif.webp") type("image/webp"));
  background-image: url("../img/banniere-recif.webp");
  background-size: cover; background-position: center 42%; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
}

.auth-coque { min-height: 100vh; display: grid; place-items: center; padding: 2.5rem 16px; }
.auth-boite {
  width: 100%; max-width: 468px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--rayon-l);
  padding: 2rem 2rem 1.6rem;
  box-shadow: 0 20px 60px rgba(5, 32, 60, .35);
  backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
.auth-marque { display: block; text-align: center; margin-bottom: 1.6rem; }
.auth-marque .marque-bloc { justify-content: center; }
.auth-boite h1 { font-size: 1.9rem; margin-bottom: .35rem; }
.auth-boite > p.muet { font-size: .96rem; margin-bottom: 1.4rem; }

.auth-liens {
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--bord);
  font-size: .9rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; justify-content: center;
}
.auth-liens a { font-weight: 600; }

/* champ encadre : icone, libelle et saisie sur une meme ligne flex, ce qui
   centre l'icone sur la hauteur reelle du champ */
.champ-boite {
  display: flex; align-items: center; gap: .85rem;
  background: var(--bg-voile); border: 1px solid var(--bord-fort);
  border-radius: 12px; padding: .5rem .9rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.champ-boite:focus-within { background: #fff; border-color: var(--prim); box-shadow: 0 0 0 3px var(--prim-clair); }
.champ-boite.en-erreur { border-color: var(--crit); }
.champ-ic-g { flex: 0 0 auto; display: flex; align-items: center; color: var(--prim); }
.champ-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.champ-corps label { margin: 0; font-size: .78rem; font-weight: 700; color: var(--txt-soft); }
.champ-boite input {
  width: 100%; border: 0; background: transparent; padding: 0;
  height: 24px; font-size: .95rem; color: var(--txt); border-radius: 0;
}
.champ-boite input:focus { outline: none; box-shadow: none; border: 0; }
.champ-boite input::placeholder { color: var(--txt-faint); }
.bouton-oeil {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer; color: var(--txt-faint);
  padding: .4rem; border-radius: 50%; display: grid; place-items: center;
}
.bouton-oeil:hover { background: var(--bg-soft); color: var(--txt); }

.separateur { display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0 .2rem;
  color: var(--txt-faint); font-size: .84rem; }
.separateur::before, .separateur::after { content: ''; flex: 1; border-top: 1px solid var(--bord); }

.auth-credit {
  margin-top: 1.2rem; padding: .75rem .9rem;
  background: var(--prim-voile); border: 1px solid var(--bord); border-radius: var(--rayon-s);
  display: flex; gap: .65rem; align-items: flex-start;
}
.auth-credit p { margin: 0; font-size: .84rem; color: var(--txt-soft); line-height: 1.5; }
.auth-credit strong { color: var(--txt); }
.auth-credit-pastille {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
  background: #e8302a; color: #fff; display: grid; place-items: center;
  font-size: .6rem; margin-top: .05rem;
}

@media (max-width: 520px) {
  .auth-boite { padding: 1.5rem 1.25rem 1.2rem; border-radius: var(--rayon); }
  .auth-boite h1 { font-size: 1.55rem; }
  .marque-lg .marque-nom { font-size: 1.9rem; }
}

/* ------------------------------ impression ------------------------- */
@media print {
  .appbar, .nav, .btns, .filtres, .hero-carte { display: none !important; }
  .contenu { max-width: none; padding: 0; }
  .carte, .conseil, .stat { break-inside: avoid; box-shadow: none; }
  body { background: #fff; }
}

/* ------------------------------------------------------------------ *
 * 9. Ecrans courts : menu lateral compact
 *
 * Avec la section Administration, le menu compte 23 entrees et 6
 * intertitres, soit ~925 px : plus que les 708 px visibles d'un
 * ecran 1366x768. Plutot qu'un ascenseur, on resserre les entrees
 * jusqu'a ce que le menu tienne d'un seul regard. Ne s'applique qu'au
 * menu fixe (au-dela de 1000 px), le tiroir mobile defilant tres bien.
 * ------------------------------------------------------------------ */
@media (min-width: 1001px) and (max-height: 880px) {
  .nav { padding: .35rem .5rem .22rem; }
  .nav h5 {
    margin: .36rem .6rem .07rem; font-size: .62rem; letter-spacing: .08em;
  }
  .nav h5:first-child { margin-top: 0; }
  .nav a {
    padding: .17rem .6rem; gap: .5rem; font-size: .855rem; line-height: 1.3;
  }
  .nav .pastille { min-width: 17px; height: 17px; font-size: .64rem; }
}

/* Ecrans vraiment courts (ordinateurs portables 1280x720 et moins) :
   on retire aussi la place perdue par les icones. */
@media (min-width: 1001px) and (max-height: 740px) {
  .nav h5 { margin: .3rem .6rem .06rem; }
  .nav a { padding: .14rem .6rem; font-size: .84rem; }
  .nav a .ic { width: 16px; height: 16px; }
}

/* ------------------------------------------------------------------ *
 * 10. Mentions legales, pied de page et consentement
 * ------------------------------------------------------------------ */

/* Pages consultables sans compte : barre reduite, lecture confortable */
.appbar-nue { justify-content: space-between; }
.contenu-lecture { max-width: 980px; margin: 0 auto; }

/* Pied de page commun */
.pied-legal {
  margin: 3rem 0 0; padding: 1.1rem 0 .3rem;
  border-top: 1px solid var(--bord);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.4rem;
  font-size: .84rem; color: var(--txt-faint);
}
.pied-legal-mention { margin: 0; flex: 1 1 22rem; }
.pied-legal-mention strong { color: var(--txt-soft); }
.pied-legal-liens { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.pied-legal-liens a { color: var(--txt-soft); text-decoration: none; }
.pied-legal-liens a:hover { color: var(--prim); text-decoration: underline; }
.pied-legal-choix { display: inline; }
.pied-legal-choix button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--txt-faint); text-decoration: underline dotted;
}
.pied-legal-choix button:hover { color: var(--prim); }

/* Liens legaux sous la carte de connexion */
.auth-legal {
  margin: 1.1rem 0 0; text-align: center;
  font-size: .78rem; color: rgba(255, 255, 255, .72);
  display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .5rem;
}
.auth-legal a { color: rgba(255, 255, 255, .92); text-decoration: none; }
.auth-legal a:hover { text-decoration: underline; }

/* Bandeau de consentement */
.bandeau-rgpd {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #fff; border-top: 2px solid var(--prim);
  box-shadow: 0 -8px 28px rgba(13, 38, 66, .18);
  padding: .9rem 24px; display: flex; flex-wrap: wrap;
  align-items: center; gap: .7rem 1.5rem;
}
.bandeau-rgpd-texte { flex: 1 1 28rem; min-width: 0; }
.bandeau-rgpd-texte strong { display: block; font-size: .95rem; margin-bottom: .15rem; }
.bandeau-rgpd-texte p { margin: 0; font-size: .84rem; color: var(--txt-soft); line-height: 1.45; }
.bandeau-rgpd-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }

/* Vignette distante non chargee, faute de consentement */
.vignette-bloquee {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; width: 100%; height: 100%; min-height: 86px;
  background: var(--bg-soft); color: var(--txt-faint);
  border: 1px dashed var(--bord-fort); border-radius: var(--rayon-s);
  font-size: .72rem; text-align: center; padding: .4rem;
}
.vignette-bloquee .ic { opacity: .55; }

/* Encadre d'action dans les pages d'information */
.encadre {
  margin-top: 1rem; padding: .85rem 1rem;
  background: var(--bg-soft); border: 1px solid var(--bord);
  border-radius: var(--rayon-s);
}
.encadre p:first-child { margin-top: 0; }
.encadre .btns { margin-bottom: 0; }

@media (max-width: 720px) {
  .bandeau-rgpd { padding: .8rem 16px; }
  .bandeau-rgpd-actions { width: 100%; }
  .bandeau-rgpd-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Liste a puces de texte courant, dans les pages d'information */
.liste-points { margin: .4rem 0 0; padding-left: 1.15rem; }
.liste-points li { margin: .35rem 0; line-height: 1.55; }
.liste-points li::marker { color: var(--prim); }

/* Le bandeau de consentement est fixe : on lui reserve sa hauteur pour
   qu'il ne recouvre jamais la fin de la page. */
body.avec-bandeau { padding-bottom: 7.5rem; }
@media (max-width: 720px) { body.avec-bandeau { padding-bottom: 12rem; } }

/* La carte de connexion est centree dans toute la hauteur : sans cette
   reserve, le bandeau fixe recouvrirait les liens legaux. */
body.page-auth.avec-bandeau { padding-bottom: 0; }
body.page-auth.avec-bandeau .auth-coque { padding-bottom: 9rem; }
@media (max-width: 720px) { body.page-auth.avec-bandeau .auth-coque { padding-bottom: 13rem; } }