/* =====================================================================
   Authentification par commune — feuille de style
   Registre repris des applications existantes (projet) : institutionnel,
   sobre et lisible. Palette bleu profond sur papier légèrement teinté.
   ===================================================================== */

:root {
  color-scheme: light;
  --encre:        #1c2532;
  --encre-douce:  #5a6472;
  --papier:       #f7f6f2;
  --blanc:        #ffffff;
  --surface:      #ffffff;
  --bleu:         #1e3a6e;
  --bleu-fonce:   #16294f;
  --bleu-texte:   #16294f;
  --bleu-pale:    #e8edf6;
  --bleu-bord:    #c6d2e6;
  --rouge:        #b3352e;
  --rouge-pale:   #f9ebea;
  --rouge-bord:   #e3bdba;
  --vert:         #2f6b45;
  --vert-pale:    #e9f2ec;
  --vert-bord:    #bfd8c8;
  --ambre:        #8a6d1f;
  --ambre-pale:   #fdf3df;
  --ambre-bord:   #ecd9a8;
  --trait:        #d9d6cd;
  --champ-bord:   #b9b5aa;
  --focus:        #7fa1d8;
  --entete-fond:  linear-gradient(115deg, #182f5c, #1e3a6e 45%, #2b4c8c);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--encre);
  background: var(--papier);
}

h1 { font-size: 1.35rem; margin: 0 0 .75rem; color: var(--bleu-texte); }
h2 { font-size: 1.05rem; margin: 1rem 0 .5rem; color: var(--bleu-texte); }
a  { color: var(--bleu); }
.centre { text-align: center; }

/* ------------------------------------------------------------ en-tête */
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 1rem;
  background: var(--entete-fond);
  color: var(--blanc);
}
.entete-marque { display: flex; align-items: center; gap: .6rem; }
.entete-pastille {
  width: .9rem; height: .9rem; border-radius: 50%;
  background: linear-gradient(180deg, #4d70b3, #d8e2f4);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
  flex: none;
}
.entete-pastille.grande { width: 1.6rem; height: 1.6rem; display: inline-block; }
.entete-titre { color: var(--blanc); text-decoration: none; font-weight: 600; }
.entete-nav { display: flex; align-items: center; gap: 1rem; }
.entete-identite { opacity: .9; font-size: .95rem; }
.lien-bouton {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--blanc); text-decoration: underline; font: inherit; opacity: .9;
}
.lien-bouton:hover { opacity: 1; }

/* ------------------------------------------------------------- contenu */
.contenu { max-width: 62rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.contenu-centre { max-width: 62rem; padding-top: 8vh; }

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: .5rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 2px rgba(28, 37, 50, .06);
}
.carte-connexion {
  max-width: 26rem;
  margin: 0 auto;
  border-top: 3px solid var(--bleu);
}
.carte-connexion-entete { text-align: center; margin-bottom: 1rem; }
.carte-connexion h1 { font-size: 1.2rem; margin: .25rem 0; }
.sous-titre { color: var(--encre-douce); margin: 0; font-size: .95rem; }

.grille-deux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
  align-items: start;
}

/* --------------------------------------------------------- formulaires */
label { display: block; margin: .9rem 0 .3rem; font-weight: 600; font-size: .95rem; }
input[type="text"], input[type="password"], input[type="tel"] {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--champ-bord);
  border-radius: .3rem;
  font: inherit;
  background: var(--surface);
  color: var(--encre);
}
input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }

.champ-code {
  font-size: 1.4rem;
  letter-spacing: .35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bouton {
  display: inline-block;
  margin-top: 1rem;
  padding: .5rem 1.1rem;
  border: 1px solid transparent;
  border-radius: .3rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
form .bouton { width: 100%; }
.formulaire-secondaire { margin-top: .25rem; }
.bouton-principal { background: var(--bleu); color: var(--blanc); }
.bouton-principal:hover { background: var(--bleu-fonce); }
.bouton-discret {
  background: var(--bleu-pale);
  border-color: var(--bleu-bord);
  color: var(--bleu-texte);
}
.bouton-discret:hover { background: #dbe4f2; }

/* -------------------------------------------------------------- divers */
.flash {
  margin: 0 auto 1rem;
  max-width: 26rem;
  padding: .6rem .9rem;
  border: 1px solid;
  border-radius: .4rem;
  font-size: .95rem;
}
.contenu:not(.contenu-centre) .flash { max-width: none; }
.flash-info   { background: var(--bleu-pale);  border-color: var(--bleu-bord);  color: var(--bleu-texte); }
.flash-succes { background: var(--vert-pale);  border-color: var(--vert-bord);  color: var(--vert); }
.flash-erreur { background: var(--rouge-pale); border-color: var(--rouge-bord); color: var(--rouge); }
.flash-alerte { background: var(--ambre-pale); border-color: var(--ambre-bord); color: var(--ambre); }

.note { color: var(--encre-douce); font-size: .9rem; margin-top: 1rem; }

.fiche { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; margin: .5rem 0; }
.fiche dt { font-weight: 600; color: var(--encre-douce); }
.fiche dd { margin: 0; overflow-wrap: anywhere; }

.secret { font-size: 1.05rem; letter-spacing: .06em; }
.qr { border: 1px solid var(--trait); border-radius: .4rem; padding: .4rem; background: var(--blanc); }

.etat {
  display: inline-block;
  padding: .05rem .55rem;
  border: 1px solid;
  border-radius: 1rem;
  font-size: .85rem;
  font-weight: 600;
  vertical-align: middle;
}
.etat-actif   { background: var(--vert-pale);  border-color: var(--vert-bord);  color: var(--vert); }
.etat-inactif { background: var(--ambre-pale); border-color: var(--ambre-bord); color: var(--ambre); }

.choix-methode {
  border: 1px solid var(--trait);
  border-radius: .4rem;
  padding: .75rem 1rem;
  margin-top: 1rem;
}
.choix-methode h2 { margin-top: 0; }
.choix-methode .bouton { margin-top: .25rem; }

details { margin-top: .75rem; }
summary { cursor: pointer; color: var(--bleu-texte); }

/* ------------------------------------------------- navigation (connecté) */
.barre-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem;
  padding: .25rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
}
.barre-nav a {
  padding: .3rem .7rem;
  border-radius: .3rem;
  text-decoration: none;
  color: var(--bleu-texte);
  font-size: .95rem;
}
.barre-nav a:hover { background: var(--bleu-pale); }
.barre-nav a.nav-actif { background: var(--bleu-pale); font-weight: 600; }
.barre-nav-sep {
  width: 1px; height: 1.3rem; background: var(--trait); margin: 0 .5rem;
}

/* --------------------------------------------- écrans d'administration */
.entete-page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.entete-page h1 { margin: 0; }
.entete-page .bouton { margin-top: 0; }

.carte-etroite { max-width: 36rem; }
.carte-defilante { overflow-x: auto; }

.tableau { width: 100%; border-collapse: collapse; }
.tableau th {
  text-align: left;
  padding: .45rem .6rem;
  border-bottom: 2px solid var(--bleu-bord);
  color: var(--bleu-texte);
  font-size: .9rem;
  white-space: nowrap;
}
.tableau td {
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
.tableau tbody tr:hover td { background: var(--bleu-pale); }
.tableau-compact td, .tableau-compact th { padding: .3rem .5rem; font-size: .9rem; }
.tableau-journal td:first-child { white-space: nowrap; }
.tableau-journal .col-details { overflow-wrap: anywhere; font-size: .85rem; }
.col-actions { text-align: right; white-space: nowrap; }
.col-actions .bouton, .zone-danger .bouton { margin-top: .25rem; }
.ligne-inactive td { color: var(--encre-douce); }
.en-ligne { display: inline-block; margin: 0; }
.en-ligne .bouton, form.en-ligne .bouton { width: auto; }

.etat-ferme  { background: var(--rouge-pale); border-color: var(--rouge-bord); color: var(--rouge); }
.etat-verrou { background: var(--ambre-pale); border-color: var(--ambre-bord); color: var(--ambre); }

.zone-danger { border-top: 3px solid var(--rouge); }
.zone-danger form { display: block; }
.zone-danger .bouton { width: auto; }
.bouton-danger {
  background: var(--rouge-pale);
  border-color: var(--rouge-bord);
  color: var(--rouge);
}
.bouton-danger:hover { background: #f3ddda; }

/* ------------------------------------------ formulaires (compléments) */
textarea, select, input[type="number"], input[type="date"] {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--champ-bord);
  border-radius: .3rem;
  font: inherit;
  background: var(--surface);
  color: var(--encre);
}
textarea:focus, select:focus,
input[type="number"]:focus, input[type="date"]:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.choix-groupes {
  margin: .9rem 0 0;
  padding: .6rem .9rem .75rem;
  border: 1px solid var(--trait);
  border-radius: .4rem;
}
.choix-groupes legend { font-weight: 600; font-size: .95rem; padding: 0 .3rem; }
.case { display: block; margin: .25rem 0; font-weight: 400; }
.case input { margin-right: .4rem; }

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: end;
}
.filtres > div { flex: 1 1 10rem; }
.filtres label { margin-top: 0; }
.filtres .bouton { margin-top: 0; width: 100%; }

.pagination { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.pagination .bouton { margin-top: 0; width: auto; }

.courriel-contenu {
  margin: .5rem 0 0;
  padding: .6rem .8rem;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: .4rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: .9rem;
}

.separateur { border: none; border-top: 1px solid var(--trait); margin: 1.25rem 0 1rem; }

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}