/* Interface d'administration Ovide — charte du formulaire public.
   Aucune ressource externe : polices auto-hebergees, aucun appel a un tiers. */

:root{
  --bg: #F4F2F2;
  --surface: #FFFFFF;
  --ink: #14171A;
  --ink-soft: #55595C;
  --ink-faint: #93989B;
  --blue: #3274BA;
  --blue-deep: #245A94;
  --blue-pale: #E4EEF7;
  --line: #E3E0DF;
  --grille: #EDEBEA;
  --succes: #1B7F4B;
  --alerte: #8A2B2B;
  --alerte-fond: #FBEFEF;
  --avert-fond: #FFF7E6;
  --avert-bord: #E8C77A;
  --avert-ink: #6B4E00;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Fira Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3{ font-family: 'Space Grotesk', system-ui, sans-serif; margin:0; }
a{ color: var(--blue); }

.visuellement-cachee{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path: inset(50%); white-space:nowrap;
}

/* ---------- Barre superieure ---------- */

.bandeau{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 20;
}
.bandeau-interieur{
  max-width: 1240px; margin: 0 auto;
  padding: 0 24px;
  display:flex; align-items:center; gap:20px;
  height: 60px;
}
.marque{ font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:16px; }
.marque span{ color: var(--ink-faint); font-weight:500; }
.bandeau nav{ display:flex; gap:4px; margin-left: 12px; }
.onglet{
  appearance:none; border:none; background:none;
  font-family:'Fira Sans', sans-serif; font-size:14px; font-weight:500;
  color: var(--ink-soft);
  padding: 8px 14px; border-radius: 9px; cursor:pointer;
}
.onglet:hover{ background: var(--bg); color: var(--ink); }
.onglet[aria-current="page"]{ background: var(--blue-pale); color: var(--blue-deep); font-weight:600; }
.bandeau-fin{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.qui{ font-size:13px; color: var(--ink-faint); }
.qui strong{ color: var(--ink-soft); font-weight:600; }

/* ---------- Boutons ---------- */

.bouton{
  appearance:none; cursor:pointer;
  font-family:'Fira Sans', sans-serif; font-size:14px; font-weight:600;
  padding: 9px 15px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display:inline-flex; align-items:center; gap:7px;
  transition: background .12s ease, border-color .12s ease;
}
.bouton:hover{ background: var(--bg); }
.bouton--primaire{ background: var(--ink); border-color: var(--ink); color:#fff; }
.bouton--primaire:hover{ background: var(--blue-deep); border-color: var(--blue-deep); }
.bouton:disabled{ opacity:.5; cursor: not-allowed; }
.bouton--discret{ border-color: transparent; color: var(--ink-soft); }
.bouton--discret:hover{ background: var(--bg); color: var(--ink); }

/* ---------- Mise en page ---------- */

main{ max-width: 1240px; margin: 0 auto; padding: 26px 24px 60px; }
.vue[hidden]{ display:none; }
.entete-vue{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.entete-vue h1{ font-size: 24px; }
.entete-vue p{ margin:0; color: var(--ink-faint); font-size:13.5px; }

.carte{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
}
.carte + .carte{ margin-top: 18px; }
.carte h2{ font-size:15px; margin-bottom:2px; }
.carte .sous-titre{ margin:0 0 16px; font-size:13px; color: var(--ink-faint); }

/* ---------- Tuiles de mesure ---------- */

.mesures{
  display:grid; gap:14px; margin-bottom:18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.mesure{
  background: var(--surface); border:1px solid var(--line);
  border-radius: 14px; padding: 16px 18px;
}
.mesure .etiquette{ font-size:12.5px; color: var(--ink-faint); margin-bottom:4px; }
.mesure .valeur{
  font-family:'Space Grotesk', sans-serif;
  font-size: 30px; font-weight:700; line-height:1.1;
  font-variant-numeric: tabular-nums;
}
.mesure .precision{ font-size:12.5px; color: var(--ink-soft); margin-top:4px; }

/* ---------- Graphiques ---------- */

.duo{ display:grid; gap:18px; grid-template-columns: 1fr 1fr; }
.graphique{ position:relative; }
.graphique svg{ display:block; width:100%; height:auto; overflow:visible; }
.grille-ligne{ stroke: var(--grille); stroke-width:1; }
.axe-texte{ fill: var(--ink-faint); font-size:11px; font-family:'Fira Sans', sans-serif; }
.barre{ fill: var(--blue); }
.barre-zone:hover + .barre, .barre:hover{ fill: var(--blue-deep); }
.barre-zone{ fill: transparent; cursor: default; }
.valeur-directe{
  fill: var(--ink-soft); font-size:11.5px; font-weight:600;
  font-family:'Fira Sans', sans-serif; font-variant-numeric: tabular-nums;
}
.vide{ color: var(--ink-faint); font-size:13.5px; padding: 28px 0; text-align:center; }

.infobulle{
  position:fixed; pointer-events:none; opacity:0;
  background: var(--ink); color:#fff;
  font-size:12px; padding:6px 9px; border-radius:7px;
  transform: translate(-50%, -130%); white-space:nowrap;
  transition: opacity .1s ease; z-index:10;
}
.infobulle.visible{ opacity:1; }

details.donnees-brutes{ margin-top:14px; }
details.donnees-brutes summary{
  cursor:pointer; font-size:12.5px; color: var(--ink-faint);
  padding: 4px 0;
}
details.donnees-brutes summary:hover{ color: var(--ink-soft); }
details.donnees-brutes table{ margin-top:8px; }

/* Un champ de mot de passe etire sur toute la carte se lit mal : on borne le
   formulaire a une largeur de lecture confortable. */
#formulaire-mdp{ max-width: 420px; }

/* ---------- Filtres ---------- */

.filtres{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  margin-bottom:16px;
}
.filtre{ display:flex; flex-direction:column; gap:5px; }
.filtre label{ font-size:12px; font-weight:600; color: var(--ink-soft); }
.filtre input, .filtre select{
  font-family:'Fira Sans', sans-serif; font-size:14px;
  padding: 9px 11px; border:1px solid var(--line); border-radius:10px;
  background: var(--surface); color: var(--ink); min-width: 150px;
}
.filtre input:focus, .filtre select:focus{
  outline:none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-pale);
}
.filtre--large input{ min-width: 260px; }

/* ---------- Tableau ---------- */

.enveloppe-tableau{ overflow-x:auto; border-radius: 12px; border:1px solid var(--line); }
table{ width:100%; border-collapse: collapse; font-size:13.5px; background: var(--surface); }
thead th{
  text-align:left; font-family:'Space Grotesk', sans-serif;
  font-size:12px; font-weight:600; color: var(--ink-soft);
  background: var(--bg);
  padding: 10px 14px; white-space:nowrap;
  border-bottom:1px solid var(--line);
}
thead th button{
  appearance:none; border:none; background:none; padding:0; cursor:pointer;
  font: inherit; color: inherit; display:inline-flex; align-items:center; gap:4px;
}
thead th button:hover{ color: var(--ink); }
.fleche{ color: var(--blue); font-size:10px; }
tbody td{ padding: 11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr.cliquable{ cursor:pointer; }
tbody tr.cliquable:hover{ background: var(--blue-pale); }
td.date{ color: var(--ink-faint); white-space:nowrap; font-variant-numeric: tabular-nums; }
td.nom{ font-weight:600; }
.etiquette-oui{
  display:inline-block; font-size:11px; font-weight:600;
  background: var(--blue-pale); color: var(--blue-deep);
  padding: 2px 7px; border-radius: 6px;
}
.rien{ color: var(--ink-faint); }

.pagination{
  display:flex; align-items:center; gap:12px; margin-top:14px;
  font-size:13px; color: var(--ink-soft);
}
.pagination .compteur{ margin-right:auto; color: var(--ink-faint); }

/* ---------- Panneau de detail ---------- */

.voile{
  position:fixed; inset:0; background: rgba(20,23,26,.34);
  opacity:0; pointer-events:none; transition: opacity .16s ease; z-index:40;
}
.voile.visible{ opacity:1; pointer-events:auto; }
.panneau{
  position:fixed; top:0; right:0; bottom:0; width: min(460px, 100%);
  background: var(--surface); border-left:1px solid var(--line);
  transform: translateX(100%); transition: transform .2s ease;
  z-index:50; overflow-y:auto; padding: 22px 24px 40px;
}
.panneau.visible{ transform: none; }
.panneau-entete{ display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; }
.panneau-entete h2{ font-size:19px; }
.panneau-entete p{ margin:2px 0 0; font-size:13px; color: var(--ink-faint); }
.panneau dl{ margin:0; }
.panneau dt{
  font-size:12px; font-weight:600; color: var(--ink-faint);
  margin-top:16px; text-transform: uppercase; letter-spacing:.02em;
}
.panneau dd{ margin:3px 0 0; font-size:14.5px; overflow-wrap:anywhere; }
.panneau dd.message{ white-space: pre-wrap; background: var(--bg); padding:12px; border-radius:10px; font-size:14px; }

/* ---------- Messages ---------- */

.message{ padding: 11px 14px; border-radius:10px; font-size:13.5px; margin-bottom:16px; }
.message--erreur{ background: var(--alerte-fond); border:1px solid #E4B4B4; color: var(--alerte); }
.message--succes{ background: #EEF7F1; border:1px solid #B5DCC5; color: var(--succes); }
.message--avertissement{ background: var(--avert-fond); border:1px solid var(--avert-bord); color: var(--avert-ink); }
.message[hidden]{ display:none; }

/* ---------- Pages d'authentification ---------- */

.page-auth{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
.carte-auth{
  background: var(--surface); border:1px solid var(--line);
  border-radius: 18px; padding: 32px; width: min(420px, 100%);
}
.carte-auth h1{ font-size:22px; margin-bottom:6px; }
.carte-auth .intro{ margin:0 0 22px; font-size:13.5px; color: var(--ink-soft); }
.champ{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.champ label{ font-size:13px; font-weight:600; }
.champ input{
  font-family:'Fira Sans', sans-serif; font-size:15px;
  padding: 11px 13px; border:1px solid var(--line); border-radius:11px;
  background: var(--surface); color: var(--ink);
}
.champ input:focus{ outline:none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-pale); }
.champ .aide{ font-size:12px; color: var(--ink-faint); }
.carte-auth .bouton{ width:100%; justify-content:center; padding: 12px; }

/* ---------- Adaptation ---------- */

@media (max-width: 900px){
  .duo{ grid-template-columns: 1fr; }
  .bandeau-interieur{ height:auto; padding: 10px 16px; flex-wrap:wrap; gap:10px; }
  .bandeau nav{ order:3; width:100%; margin-left:0; overflow-x:auto; }
  main{ padding: 20px 16px 48px; }
}