/* ==========================================================
   FORMULAIRE (fenêtre modale)
   ========================================================== */
dialog {
  width: 100%; max-width: min(580px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem);
  padding: 0; border: 0; border-top: 8px solid var(--orange); overflow: auto;
}
dialog::backdrop { background: rgba(0, 0, 0, .72); }
.dlg-body         { padding: 1.5rem; }
.dlg-body h2      { font-family: var(--display); font-weight: 700; font-size: 2rem; margin: 0 0 .5rem; }

.field            { display: grid; gap: .3rem; margin-bottom: 1rem; }
.field label      { font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; padding: .65rem .75rem;
  border: 2px solid #000; border-radius: 0; background: #fff; color: #000;
}
.field textarea   { min-height: 110px; resize: vertical; }
.field--check     { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; }
.field--check input  { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: #000; }
.field--check label  { font-weight: 400; font-size: .95rem; }

/* Champ piège anti-robots : caché de l'écran */
.hp { position: absolute; left: -9999px; }

.form-actions             { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.form-actions .btn--ghost { color: #000; border-color: #000; }
.form-actions .btn--ghost:hover { background: #000; color: #fff; }

.form-status { padding: .75rem 1rem; margin: 0 0 1rem; background: var(--paper); border-left: 6px solid #000; }
.form-status[data-state="success"] { border-left-color: var(--orange); }
.form-status[data-state="error"]   { border-left-color: #b00020; }
.form-status:empty { display: none; }


/* ==========================================================
   PIED DE PAGE
   ========================================================== */
.site-footer { background: #000; color: #fff; }

/* Deux colonnes : liens rapides + réseaux sociaux */
.footer-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem; padding: 3rem 0 2rem;
}
.footer-extras h2 { font-size: 1.1rem; margin: 0 0 1rem; font-family: var(--display); }

.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.footer-links a {
  text-decoration: none; color: #ddd; font-size: .95rem;
  font-family: var(--display);
}
.footer-links a:hover { color: var(--orange); }

/* Icônes des réseaux sociaux */
.footer-social       { display: flex; gap: 1rem; align-items: center; }
.footer-social a     { width: 44px; height: 44px; border: 1px solid #555; border-radius: 50%; display: grid; place-items: center; }
.footer-social img   { width: 23px; height: 23px; }
.footer-social a:hover { border-color: var(--orange); background: rgba(255,106,0,.1); }

/* Ligne de bas de page (copyright + courriel) */
.footer-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  padding: 1.5rem 0; font-size: .95rem; border-top: 1px solid #333;
}
.footer-inner p   { margin: 0; }
.footer-email a   {
  color: var(--orange); font-weight: 600;
  text-decoration: none;
}
.footer-email a:hover { text-decoration: underline; }


/* ==========================================================
   ACCESSIBILITÉ : mouvement réduit
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ==========================================================
   IMAGES DE SECOURS (avant chargement de JS)
   Pour changer les images / choisir vidéo : data/site.json (champ covers)
   ========================================================== */
body[data-page="home"]         { --cover-image: none; }
body[data-page="history"]      { --cover-image: url("../images/header/history.jpg"); }
body[data-page="team"]         { --cover-image: url("../images/header/team.jpg"); }
body[data-page="competitions"] { --cover-image: url("../images/header/competitions.jpg"); }
body[data-page="partners"]     { --cover-image: url("../images/header/partners.jpg"); }

/* Affichage d'erreur clair en cas de JSON manquant ou invalide. */
.load-error {margin:1rem auto;padding:1rem;width:min(100% - 2.5rem,1100px);border-left:4px solid #c24a14;background:#fff0e6;color:#242424;}
/* L'attribut hidden a priorité sur .btn. */
[hidden] {display:none!important;}