/* ============================================================
   STYLE COMMUN À TOUT LE SITE
   Les couleurs, ombres et arrondis sont définis une seule fois ici
   (variables CSS) : pour changer une teinte partout, change-la ici.
   ============================================================ */

:root {
  /* Couleurs principales */
  --fougere: #4f7942;        /* vert fougère */
  --fougere-fonce: #3a5a30;
  --fougere-nuit: #1f3319;   /* vert très foncé : titres, bandeau */
  --mousse: #8fae6b;         /* vert clair pour les accents */
  --fougere-pale: #e2ebd6;   /* fonds verts légers */
  --beige: #f3ecd8;          /* fond du site */
  --beige-clair: #fbf8ef;    /* fond des cartes et des champs */
  --beige-fonce: #e3d8ba;    /* bordures */
  --ocre: #c9962c;           /* or des victoires */
  --ocre-pale: #f6e7c1;
  --texte: #233020;
  --texte-doux: #6b6655;
  --rouge: #b5452f;

  /* Formes */
  --arrondi: 14px;
  --arrondi-petit: 8px;
  --ombre: 0 1px 2px rgba(31, 51, 25, 0.06), 0 8px 24px rgba(31, 51, 25, 0.08);
  --ombre-forte: 0 2px 4px rgba(31, 51, 25, 0.08), 0 18px 40px rgba(31, 51, 25, 0.16);

  /* Polices : Fraunces pour les titres, Outfit pour le texte
     (si Google Fonts ne charge pas, les polices du système prennent le relais) */
  --police-titre: "Fraunces", Georgia, serif;
  --police-texte: "Outfit", system-ui, "Segoe UI", Roboto, sans-serif;
}

/* Sans ça, un "display: flex/grid" ferait réapparaître un élément qui a l'attribut hidden */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texte);
  background-color: var(--beige);
  /* Taches de lumière douces dans le fond */
  background-image:
    radial-gradient(circle at 8% 0%, rgba(143, 174, 107, 0.18), transparent 35%),
    radial-gradient(circle at 100% 30%, rgba(201, 150, 44, 0.10), transparent 30%);
  background-attachment: fixed;
}

h1, h2, h3 { font-family: var(--police-titre); color: var(--fougere-nuit); line-height: 1.15; margin: 0; }
a { color: var(--fougere-fonce); }
p { margin: 0; }

/* ---------- Bandeau du haut ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 28px;
  background: linear-gradient(90deg, var(--fougere-nuit), var(--fougere-fonce));
  color: var(--beige);
  box-shadow: 0 2px 12px rgba(31, 51, 25, 0.25);
}
.logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--beige); text-decoration: none;
  font-family: var(--police-titre); font-weight: 800; font-size: 1.35em; letter-spacing: -0.3px;
}
.logo img { width: 26px; height: 40px; transform: rotate(-20deg); }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--beige); text-decoration: none; opacity: 0.85; font-weight: 500; }
.nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.nav a.bouton { opacity: 1; text-decoration: none; }
.nav a.actif { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* Zone compte du bandeau : "Se connecter", ou avatar + pseudo */
#zoneCompte { display: flex; align-items: center; min-width: 120px; justify-content: flex-end; }
.lien-compte {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border-radius: 999px;
  background: rgba(243, 236, 216, 0.12); color: var(--beige) !important;
  opacity: 1 !important; text-decoration: none !important; font-weight: 600;
}
.lien-compte:hover { background: rgba(243, 236, 216, 0.25); }
.lien-compte span:last-child { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-avatar {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ocre); color: var(--fougere-nuit); font-weight: 800;
}
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Boutons ---------- */
button, .bouton {
  font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  background: var(--fougere); color: var(--beige-clair);
  border: none; border-radius: 999px;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 0 var(--fougere-nuit);
  transition: transform 0.12s, background 0.15s, box-shadow 0.12s;
}
button:hover, .bouton:hover { background: var(--fougere-fonce); }
button:active, .bouton:active { transform: translateY(2px); box-shadow: 0 0 0 var(--fougere-nuit); }
button:disabled { background: #b3bca9; box-shadow: none; cursor: not-allowed; transform: none; }
.bouton-grand { padding: 14px 26px; font-size: 1.1em; }
.bouton-or { background: var(--ocre); color: var(--fougere-nuit); box-shadow: 0 2px 0 #8f6a1c; }
.bouton-or:hover { background: #b98824; }
/* Bouton fantôme : contour seulement */
.bouton-fantome { background: transparent; color: var(--fougere-fonce); box-shadow: inset 0 0 0 2px var(--fougere); }
.bouton-fantome:hover { background: var(--fougere-pale); }
/* Bouton clair, pour le bandeau vert */
.bouton-clair { background: rgba(243, 236, 216, 0.12); color: var(--beige); box-shadow: inset 0 0 0 1px rgba(243, 236, 216, 0.5); }
.bouton-clair:hover { background: rgba(243, 236, 216, 0.25); }
/* Petites icônes dessinées au trait */
.icone {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.bouton-icone { padding: 8px; width: 38px; height: 38px; }
.bouton-icone svg { width: 18px; height: 18px; }

/* ---------- Champs de saisie ---------- */
input[type="text"], input:not([type]) {
  font: inherit;
  padding: 11px 14px;
  background: var(--beige-clair); color: var(--texte);
  border: 2px solid var(--beige-fonce); border-radius: var(--arrondi-petit);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="text"]:focus, input:not([type]):focus {
  outline: none; border-color: var(--fougere);
  box-shadow: 0 0 0 4px rgba(79, 121, 66, 0.15);
}
button:focus-visible, .bouton:focus-visible, a:focus-visible { outline: 3px solid var(--ocre); outline-offset: 2px; }
input[type="range"], input[type="radio"], input[type="checkbox"] { accent-color: var(--fougere); }

/* ---------- Blocs (encadrés) ---------- */
.bloc {
  background: var(--beige-clair);
  border: 1px solid var(--beige-fonce); border-radius: var(--arrondi);
  padding: 22px;
  box-shadow: var(--ombre);
}
.bloc-titre { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 1.25em; }
.erreur { color: var(--rouge); font-weight: 600; min-height: 1.4em; }
.discret { color: var(--texte-doux); }

/* Petite étiquette arrondie */
.pastille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 0.85em; font-weight: 600;
  background: var(--fougere-pale); color: var(--fougere-fonce);
}
.pastille-or { background: var(--ocre-pale); color: #7a5813; }
.pastille-grise { background: var(--beige-fonce); color: var(--texte); }
.pastille-vive { background: var(--fougere); color: var(--beige-clair); }

/* Point qui clignote doucement ("en direct") */
.point-direct {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mousse);
  box-shadow: 0 0 0 0 rgba(143, 174, 107, 0.7);
  animation: pulsation 1.8s infinite;
}
@keyframes pulsation {
  70% { box-shadow: 0 0 0 8px rgba(143, 174, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 174, 107, 0); }
}

/* Message flottant ("Lien copié !") */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 50;
  transform: translate(-50%, 20px); opacity: 0;
  padding: 10px 20px; border-radius: 999px;
  background: var(--fougere-nuit); color: var(--beige);
  font-weight: 600; box-shadow: var(--ombre-forte);
  transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Pages simples (profil, contribuer, admin) ---------- */
.page { max-width: 1000px; margin: 0 auto; padding: 36px 24px 64px; display: flex; flex-direction: column; gap: 24px; }
.page-titre { display: flex; flex-direction: column; gap: 10px; }
.page-titre h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; }
.page-titre p { max-width: 680px; font-size: 1.05em; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

/* Formulaires : un champ par ligne, avec son titre au-dessus */
.formulaire { display: flex; flex-direction: column; gap: 14px; }
.formulaire label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.formulaire label small { font-weight: 400; }
.formulaire label.case { flex-direction: row; align-items: center; gap: 8px; }
.formulaire button { align-self: flex-start; }
.formulaire .erreur:empty { display: none; }
input[type="password"], textarea, select {
  font: inherit; padding: 11px 14px;
  background: var(--beige-clair); color: var(--texte);
  border: 2px solid var(--beige-fonce); border-radius: var(--arrondi-petit);
}
textarea { resize: vertical; min-height: 80px; }
input[type="password"]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--fougere); box-shadow: 0 0 0 4px rgba(79, 121, 66, 0.15);
}
.bouton-danger { background: var(--rouge); box-shadow: 0 2px 0 #7d2e1f; }
.bouton-danger:hover { background: #9a3a27; }
.succes { color: var(--fougere); font-weight: 600; }
.succes:empty { display: none; }

/* Statut d'une demande (en attente / acceptée / refusée) */
.statut-en_attente { background: var(--ocre-pale); color: #7a5813; }
.statut-acceptee { background: var(--fougere-pale); color: var(--fougere-fonce); }
.statut-refusee { background: #f3d9d2; color: var(--rouge); }

@media (max-width: 760px) {
  .deux-colonnes { grid-template-columns: 1fr; }
  .page { padding: 24px 16px 48px; }
}

/* ---------- Pied de page ---------- */
.pied {
  padding: 28px; text-align: center; color: var(--texte-doux);
  border-top: 1px solid var(--beige-fonce);
}

/* Moins d'animations pour ceux qui l'ont demandé dans leur système */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Téléphone : le menu se range derrière le bouton ☰ ---------- */
.burger { display: none; } /* bouton ajouté par commun.js, visible seulement sur téléphone */
@media (max-width: 700px) {
  .entete { padding: 10px 16px; }
  .burger { display: inline-flex; }
  .burger .icone { width: 22px; height: 22px; }
  /* Le menu : un panneau qui se déplie sous le bandeau */
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 8px 16px 18px;
    background: var(--fougere-fonce); box-shadow: 0 12px 24px rgba(31, 51, 25, 0.3);
  }
  .nav.ouverte { display: flex; animation: deplie 0.15s ease-out; }
  .nav a:not(.bouton):not(.lien-compte) { padding: 12px 4px; font-size: 1.1em; border-bottom: 1px solid rgba(243, 236, 216, 0.12); }
  .nav .bouton { margin-top: 10px; }
  #zoneCompte { min-width: 0; justify-content: stretch; margin-top: 8px; }
  #zoneCompte > * { flex: 1; justify-content: center; }
}
@keyframes deplie { from { opacity: 0; transform: translateY(-8px); } }

/* Lien "← retour" en haut des sous-pages (Contribuer, Admin) */
.retour { align-self: flex-start; font-weight: 600; text-decoration: none; }
.retour:hover { text-decoration: underline; }
/* Statuts des signalements de bugs */
.statut-ouvert { background: var(--ocre-pale); color: #7a5813; }
.statut-resolu { background: var(--fougere-pale); color: var(--fougere-fonce); }