/* Styles communs de l'interface d'administration. */
:root {
  --vert: #1d5c3a;
  --vert-clair: #e6f0ea;
  --fond: #f5f5f2;
  --texte: #222;
  --gris: #666;
  --bord: #d5d5d0;
  --erreur: #b00020;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.45;
}

h1 { font-size: 1.4rem; margin-top: 0; }
h2 { font-size: 1.15rem; }
a { color: var(--vert); }

/* Carte centrée : connexion, inscription, mot de passe */
.carte {
  max-width: 26rem;
  margin: 3rem auto;
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}
@media (max-width: 30rem) {
  .carte { margin: 1rem; }
}

/* Formulaires */
label { display: block; margin: .9rem 0 .3rem; font-weight: 600; }
input, select, textarea {
  width: 100%;
  padding: .55rem;
  font: inherit;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
}
button {
  margin-top: 1.2rem;
  width: 100%;
  padding: .7rem;
  font: inherit;
  border: 0;
  border-radius: 4px;
  background: var(--vert);
  color: #fff;
  cursor: pointer;
}
button:disabled { opacity: .6; cursor: wait; }
button.secondaire { background: transparent; color: var(--vert); border: 1px solid var(--vert); }

/* Messages */
.erreur { color: var(--erreur); }
.ok { color: var(--vert); }
.aide { color: var(--gris); font-size: .9rem; }
.liens { margin-top: 1.2rem; font-size: .9rem; display: flex; flex-direction: column; gap: .4rem; }

/* Barre de navigation des pages connectées */
.barre {
  background: var(--vert);
  color: #fff;
  padding: .7rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
}
.barre .titre { font-weight: 700; }
.barre nav { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; flex: 1; }
.barre a { color: #fff; text-decoration: none; }
.barre a.actif { text-decoration: underline; text-underline-offset: .3em; }
.barre .a-venir { opacity: .55; }
.barre .utilisateur { font-size: .85rem; opacity: .9; }
.barre button {
  width: auto;
  margin: 0;
  padding: .35rem .8rem;
  background: transparent;
  border: 1px solid #fff;
}

/* Tableaux modifiables */
.defilement { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { padding: .35rem .4rem; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: middle; }
th { font-size: .85rem; color: var(--gris); font-weight: 600; white-space: nowrap; }
td input { min-width: 6rem; padding: .35rem; }
td input[type="checkbox"], td input[type="color"] { min-width: 0; width: auto; }
td input[type="color"] { width: 3rem; height: 2rem; padding: .1rem; }
td input[type="number"] { min-width: 4rem; width: 5rem; }
tr.nouvelle td { background: var(--vert-clair); }
tr.a-supprimer td { background: #f3f3f3; }
tr.a-supprimer input:not([type="checkbox"]) { text-decoration: line-through; opacity: .5; }
tr.en-erreur td { background: #fde8eb; }
button.enregistrer { width: auto; padding: .55rem 1.6rem; margin-top: .8rem; }
section + section { margin-top: 2rem; }

/* Contenu des pages connectées */
.page { max-width: 60rem; margin: 1.5rem auto; padding: 0 1rem; }
.page.large { max-width: 80rem; }

/* Filtres de liste */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; margin-bottom: .5rem; }
.filtres label { margin: 0; font-weight: 600; font-size: .9rem; }
.filtres select, .filtres input { display: block; width: auto; min-width: 11rem; margin-top: .2rem; }
td select { padding: .35rem; min-width: 9rem; }
input:disabled, select:disabled { background: #f3f3f1; color: #444; border-color: #ddd; }

td.change { font-weight: 700; color: var(--vert); }
section.etape { background: #fff; border: 1px solid var(--bord); border-radius: 8px; padding: .2rem 1rem 1rem; }
section.etape + section.etape { margin-top: 1rem; }

/* Fiche */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1rem; }
.grille label { margin-top: .6rem; }
.grille .large { grid-column: 1 / -1; }
label.case { display: flex; gap: .5rem; align-items: center; font-weight: 400; grid-column: 1 / -1; }
label.case input { width: auto; }
fieldset { grid-column: 1 / -1; margin-top: 1rem; border: 1px solid var(--bord); border-radius: 6px; }
legend { font-weight: 600; padding: 0 .3rem; }
button.petit { width: auto; margin: 0; padding: .3rem .7rem; font-size: .9rem; }
button.secondaire:not(.petit) { width: auto; padding: .55rem 1.2rem; }
.encadre { background: #fff; border: 2px solid var(--vert); border-radius: 8px; padding: 1rem; margin-top: 1rem; }
.code-invitation {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.6rem;
  letter-spacing: .15em;
  color: var(--vert);
  margin: .3rem 0 1rem;
}
textarea { resize: vertical; font-family: inherit; }
button.danger { width: auto; background: var(--erreur); padding: .55rem 1.6rem; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.tuile {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 1rem;
}
a.tuile { display: block; color: inherit; text-decoration: none; }
a.tuile:hover, a.tuile:focus-visible { border-color: var(--vert); }
.tuile.a-venir { opacity: .55; }
.tuile h2 { margin: 0 0 .4rem; }
.tuile p { margin: 0; color: var(--gris); font-size: .92rem; }