/* ===== Couleurs du site (modifiables par l'admin) ===== */
:root {
  --fond: #d9d2b6;      /* fond de la page */
  --papier: #f3ecd6;    /* papier des fiches */
  --encre: #2b2a22;     /* texte sombre */
  --kaki: #5b5a3a;      /* bandeau, boutons, haut des fiches */
  --bord: #8a8460;      /* bordures */
  --rouge: #8b2a1d;     /* tampons, absent, supprimer */
  --vert: #2f6b2f;      /* disponible, présent */
  --orange: #9a5b00;    /* mission prise */
  --gris: #666666;      /* mission terminée */
  --champ: #fffdf5;     /* champs de saisie */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: "Courier New", Courier, monospace;
  line-height: 1.5;
}

/* ===== En-tête et menu ===== */
header {
  background: var(--kaki);
  color: var(--papier);
  padding: 16px;
  text-align: center;
  border-bottom: 4px double var(--papier);
}

header h1 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

header .logo-site {
  display: block;
  margin: 0 auto 8px;
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

nav a {
  color: var(--papier);
  text-decoration: none;
  border: 1px solid var(--papier);
  padding: 6px 12px;
  text-transform: uppercase;
  font-size: 0.9rem;
}

nav a:hover,
nav a.actif {
  background: var(--papier);
  color: var(--kaki);
}

/* ===== Contenu ===== */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

h2 {
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--kaki);
  padding-bottom: 6px;
}

/* ===== Fiches ===== */
.grille {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.fiche {
  background: var(--papier);
  border: 1px solid var(--bord);
  border-top: 8px solid var(--kaki);
  padding: 14px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.fiche h3 {
  margin: 0 0 8px;
  text-transform: uppercase;
}

.fiche p { margin: 4px 0; }

.etiquette {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--kaki);
}

.tampon {
  display: inline-block;
  border: 2px solid var(--rouge);
  color: var(--rouge);
  padding: 2px 8px;
  transform: rotate(-3deg);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.tampon.statut-disponible { color: var(--vert); border-color: var(--vert); }
.tampon.statut-prise      { color: var(--orange); border-color: var(--orange); }
.tampon.statut-terminee   { color: var(--gris); border-color: var(--gris); }

.abs {
  color: var(--rouge);
  font-weight: bold;
  font-size: 0.85em;
}

/* ===== Barre de connexion, champs et boutons ===== */
#barre-admin {
  background: var(--papier);
  border-bottom: 1px solid var(--bord);
  padding: 8px 16px;
  text-align: center;
  font-size: 0.9rem;
}

#form-connexion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

#message-connexion {
  width: 100%;
  margin: 0;
  color: var(--rouge);
}

input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 6px 8px;
  border: 1px solid var(--bord);
  background: var(--champ);
  color: var(--encre);
}

button {
  font-family: inherit;
  font-size: 0.9rem;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--kaki);
  background: var(--kaki);
  color: var(--papier);
  cursor: pointer;
}

button:hover { background: var(--encre); }

button:disabled {
  opacity: 0.4;
  cursor: default;
}

button.danger {
  background: var(--rouge);
  border-color: var(--rouge);
}

button.secondaire {
  background: transparent;
  color: var(--kaki);
}

button.mini {
  padding: 0 6px;
  font-size: 0.8rem;
  line-height: 1.3;
  background: transparent;
  color: var(--rouge);
  border: none;
}

button.mini:hover {
  background: var(--rouge);
  color: var(--papier);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.erreur { color: var(--rouge); }
.succes { color: var(--vert); }

.aide {
  font-size: 0.8rem;
  color: var(--kaki);
  margin: 4px 0 0;
}

/* Les liens qui ressemblent à des boutons */
.bouton-lien {
  display: inline-block;
  font-size: 0.9rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--kaki);
  background: var(--kaki);
  color: var(--papier);
}

.bouton-lien.secondaire {
  background: transparent;
  color: var(--kaki);
}

.lien-oubli {
  width: 100%;
  font-size: 0.8rem;
  color: var(--kaki);
}

/* ===== Formulaires ===== */
#form-escouade,
#form-mission,
#panneau-effectif,
#zone-chef,
#zone-presence,
#zone-reinit,
#form-accueil,
#form-mode-emploi {
  max-width: 720px;
}

#zone-admin { margin-bottom: 16px; }
#form-escouade, #form-mission { margin-top: 16px; }
#panneau-effectif { margin-top: 16px; }
#form-accueil, #form-mode-emploi { margin: 16px 0; }
#zone-chef .fiche { margin-bottom: 16px; }

#form-escouade label,
#form-mission label,
#form-chef label,
#form-annonce label,
#form-inscription label,
#form-code label,
#form-accueil label,
#form-mode-emploi label,
#form-demande label,
#form-nouveau label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--kaki);
}

#form-escouade input[type="text"],
#form-escouade input[type="number"],
#form-escouade input[type="file"],
#form-escouade textarea,
#form-mission input[type="text"],
#form-mission input[type="number"],
#form-mission input[type="date"],
#form-mission select,
#form-chef input[type="text"],
#form-chef input[type="number"],
#form-chef input[type="file"],
#form-chef textarea,
#form-annonce select,
#form-annonce textarea,
#form-inscription input[type="email"],
#form-inscription input[type="password"],
#form-code input,
#form-accueil textarea,
#form-mode-emploi textarea,
#form-demande input,
#form-nouveau input {
  width: 100%;
}

/* La case "J'ai lu le règlement" à l'inscription */
#form-inscription label.case-reglement {
  text-transform: none;
  font-weight: normal;
  font-size: 0.9rem;
  color: var(--encre);
}

/* ===== Filtres de la page Missions ===== */
#filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

#filtres button {
  background: transparent;
  color: var(--kaki);
}

#filtres button:hover {
  background: var(--bord);
  color: var(--papier);
}

#filtres button.actif {
  background: var(--kaki);
  color: var(--papier);
}

/* ===== Participants et comptes rendus de mission ===== */
.liste-participants { margin: 4px 0 8px; }

.participant {
  display: inline-block;
  margin: 2px 8px 2px 0;
  padding: 0 6px;
  border: 1px solid var(--bord);
  background: var(--champ);
  font-size: 0.9rem;
}

.rapport {
  margin: 8px 0;
  padding: 8px 10px;
  border-left: 4px solid var(--kaki);
  background: var(--champ);
}

.texte-rapport {
  white-space: pre-wrap;
  word-break: break-word;
}

.form-rapport label {
  display: block;
  margin-top: 8px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--kaki);
}

.form-rapport select,
.form-rapport textarea { width: 100%; }

/* ===== Page Agenda ===== */
.agenda-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.calendrier {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.jour-nom {
  text-align: center;
  font-weight: bold;
  font-size: 0.8rem;
  background: var(--kaki);
  color: var(--papier);
  padding: 4px 0;
}

.case {
  background: var(--papier);
  border: 1px solid var(--bord);
  min-height: 80px;
  padding: 4px;
  overflow: hidden;
}

.case.vide {
  background: transparent;
  border: none;
}

.case.aujourdhui { outline: 3px solid var(--rouge); }

.numero {
  display: block;
  font-weight: bold;
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.pastille {
  font-size: 0.7rem;
  padding: 1px 3px;
  margin-top: 2px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pastille.statut-disponible { background: var(--vert); }
.pastille.statut-prise      { background: var(--orange); }
.pastille.statut-terminee   { background: var(--gris); }

.ligne-mission {
  background: var(--papier);
  border: 1px solid var(--bord);
  padding: 8px 12px;
  margin-bottom: 8px;
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.8rem;
}

.legende .pastille {
  display: inline-block;
  width: 12px;
  height: 12px;
  padding: 0;
  vertical-align: middle;
}

/* Annonces des escouades */
.annonce {
  background: var(--papier);
  border: 1px solid var(--bord);
  border-left: 6px solid var(--rouge);
  padding: 8px 12px;
  margin-bottom: 8px;
}

.annonce small { color: var(--kaki); }

/* ===== Soldats, codes personnels et présence ===== */
.form-effectif {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.form-effectif input {
  flex: 1;
  min-width: 160px;
}

.form-deplacement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0 10px;
  border-bottom: 1px dashed var(--bord);
}

.barre-effectif {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.compteur { font-weight: bold; }

.ligne-soldat {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--bord);
}

.actions-soldat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.code {
  background: var(--champ);
  border: 1px solid var(--bord);
  padding: 2px 6px;
  letter-spacing: 1px;
  font-weight: bold;
}

.lie {
  color: var(--vert);
  font-weight: bold;
  font-size: 0.85rem;
}

.presence .tampon { font-size: 1rem; }

/* Heure du dernier changement de présence */
.ligne-membre { margin: 2px 0; }

.depuis {
  font-size: 0.8em;
  color: var(--kaki);
  margin-left: 6px;
}

/* ===== Logos d'escouade (en carré) ===== */
.logo-escouade {
  text-align: center;
  margin-bottom: 10px;
}

.logo-escouade img {
  width: 120px;
  height: 120px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid var(--kaki);
}

/* ===== Escouades : une ligne large par escouade ===== */
#liste-escouades.grille {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ligne-escouade {
  display: grid;
  grid-template-columns: 120px minmax(160px, 1.2fr) minmax(220px, 2fr) minmax(170px, 1fr);
  gap: 18px;
  align-items: center;
}

.ligne-escouade .logo-escouade { margin: 0; }

.logo-vide {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--bord);
  color: var(--bord);
  font-size: 2.5rem;
  font-weight: bold;
}

.le-actions { grid-column: 1 / -1; }

.membre { white-space: nowrap; }

/* ===== Page Statistiques ===== */
.choix-periode {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--kaki);
}

.stat-chiffre {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
}

.ligne-stat {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--bord);
}

.ls-barre {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ls-valeur {
  min-width: 70px;
  text-align: right;
  font-weight: bold;
}

.barre {
  flex: 1;
  height: 14px;
  background: var(--champ);
  border: 1px solid var(--bord);
}

.barre-remplie {
  height: 100%;
  background: var(--kaki);
}

/* ===== Page Journal ===== */
.filtres-journal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.filtres-journal label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--kaki);
}

.case-journal {
  display: block;
  margin: 6px 0;
}

.evenement {
  background: var(--papier);
  border: 1px solid var(--bord);
  border-left: 6px solid var(--kaki);
  padding: 8px 12px;
  margin-bottom: 8px;
}

.evenement.role-admin   { border-left-color: var(--rouge); }
.evenement.role-chef    { border-left-color: var(--orange); }
.evenement.role-soldat  { border-left-color: var(--vert); }
.evenement.role-compte  { border-left-color: var(--gris); }

.ev-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}

.ev-date { font-weight: bold; }
.ev-qui { color: var(--kaki); }
.ev-action { text-transform: uppercase; font-size: 0.75rem; }

.badge {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--kaki);
  color: var(--kaki);
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: bold;
}

.ev-resume { margin: 4px 0; }

.evenement details summary {
  cursor: pointer;
  color: var(--kaki);
  font-size: 0.85rem;
}

.evenement pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--champ);
  border: 1px solid var(--bord);
  padding: 8px;
  font-family: inherit;
  font-size: 0.8rem;
  margin: 6px 0 0;
}

/* ===== Accueil, règlement et mode d'emploi ===== */
.texte-riche h4 {
  margin: 14px 0 4px;
  text-transform: uppercase;
  color: var(--kaki);
}

.texte-riche p { margin: 6px 0; }

.texte-riche ul {
  margin: 4px 0 8px;
  padding-left: 22px;
}

/* ===== Page Admin ===== */
.ligne-couleur {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.ligne-couleur input[type="color"] {
  width: 48px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--bord);
  cursor: pointer;
}

.case-reglage {
  display: block;
  margin: 8px 0;
}

.champ-heure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 220px;
  margin: 8px 0;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--kaki);
}

/* ===== Captcha (inutilisé pour l'instant) ===== */
.zone-captcha {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 8px 0;
}

.zone-captcha:empty { margin: 0; }

/* ===== Téléphone ===== */
@media (max-width: 600px) {
  .case { min-height: 44px; padding: 2px; }
  .pastille {
    display: inline-block;
    width: 8px;
    height: 8px;
    padding: 0;
    margin: 1px;
    border-radius: 50%;
    font-size: 0;
  }
}

@media (max-width: 700px) {
  .ligne-stat { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 800px) {
  .ligne-escouade {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .le-logo { justify-self: center; }
}
/* ===== Inscription par prénom et nom ===== */
#form-inscription input[type="text"] { width: 100%; }
/* ===== Recherche des inscrits (barre avec flèche) ===== */
.zone-recherche { margin-bottom: 10px; }

.recherche-champ { display: flex; }

.recherche-champ input {
  flex: 1;
  min-width: 0;
}

.fleche-recherche {
  border-left: none;
  padding: 6px 12px;
}

.resultats-recherche {
  max-height: 240px;
  overflow-y: auto;
  margin-top: 2px;
  border: 1px solid var(--bord);
  background: var(--papier);
}

.resultats-recherche p { margin: 0; padding: 8px 10px; }

.resultats-recherche .resultat {
  display: block;
  width: 100%;
  text-align: left;
  text-transform: none;
  padding: 8px 10px;
  background: transparent;
  color: var(--encre);
  border: none;
  border-bottom: 1px dashed var(--bord);
}

.resultats-recherche .resultat:hover {
  background: var(--kaki);
  color: var(--papier);
}

.form-liaison {
  padding: 6px 0 10px;
  border-bottom: 1px dashed var(--bord);
}
/* ===== Soldat sans compte ===== */
.sans-compte {
  color: var(--kaki);
  font-size: 0.85rem;
}
/* ===== Changer mon mot de passe ===== */
#form-mdp label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--kaki);
}

#form-mdp input { width: 100%; }
/* ===== Devise, présentation et briefing ===== */
.devise {
  margin: 0 0 6px;
  font-style: italic;
  color: var(--kaki);
}

details.presentation { margin: 6px 0; }

details.presentation summary {
  cursor: pointer;
  color: var(--kaki);
  font-size: 0.85rem;
  text-transform: uppercase;
  font-weight: bold;
}

#form-mission textarea { width: 100%; }
/* ===== Fiche d'un soldat : historique et notes ===== */
.fiche-soldat {
  margin: 4px 0 10px;
  padding: 8px 12px 12px;
  background: var(--champ);
  border: 1px solid var(--bord);
}

.fiche-soldat h4 {
  margin: 10px 0 4px;
  text-transform: uppercase;
  color: var(--kaki);
}

.liste-historique {
  margin: 4px 0 10px;
  padding-left: 20px;
}

.note {
  margin: 6px 0;
  padding: 4px 8px;
  border-left: 3px solid var(--kaki);
  background: var(--papier);
}

.note p { margin: 2px 0; }
.note small { color: var(--kaki); }

.form-note textarea { width: 100%; }
/* ===== Candidatures ===== */
#zone-candidature { max-width: 720px; }

#form-candidature label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--kaki);
}

#form-candidature label.case-reglement {
  text-transform: none;
  font-weight: normal;
  font-size: 0.9rem;
  color: var(--encre);
}

#form-candidature input[type="text"],
#form-candidature textarea { width: 100%; }

/* Le champ piège pour les robots : sorti de l'écran */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.candidature {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--papier);
  border: 1px solid var(--bord);
  border-left: 6px solid var(--orange);
}

.candidature.acceptee { border-left-color: var(--vert); }
.candidature.refusee { border-left-color: var(--gris); }

.candidature p { margin: 4px 0; }
.candidature textarea { width: 100%; }
/* ===== Tableau de bord ===== */
.tableau-bord {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.tuile {
  padding: 8px 10px;
  background: var(--champ);
  border: 1px solid var(--bord);
  border-top: 6px solid var(--vert);
}

.tuile.alerte { border-top-color: var(--rouge); }

.tuile p { margin: 2px 0; }
.tuile .stat-chiffre { font-size: 1.8rem; }
/* ===== Mode sombre ===== */
:root[data-theme="sombre"] {
  --fond: #1b1c16;
  --papier: #26271f;
  --encre: #e9e4cc;
  --kaki: #8f8e5c;
  --bord: #5c5a42;
  --rouge: #e07a62;
  --vert: #7cc67c;
  --orange: #e6a94a;
  --gris: #a0a0a0;
  --champ: #1f2019;
  color-scheme: dark;
}

:root[data-theme="sombre"] .pastille { color: #1b1c16; }

/* Sans choix de la personne : on suit le réglage de son appareil */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #1b1c16;
    --papier: #26271f;
    --encre: #e9e4cc;
    --kaki: #8f8e5c;
    --bord: #5c5a42;
    --rouge: #e07a62;
    --vert: #7cc67c;
    --orange: #e6a94a;
    --gris: #a0a0a0;
    --champ: #1f2019;
    color-scheme: dark;
  }

  :root:not([data-theme="clair"]) .pastille { color: #1b1c16; }
}

/* Le bouton ☾ / ☀ */
.bouton-theme {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 50;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  text-transform: none;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}