/*
 * Charte graphique LFPL — feuille de style commune (public + administration)
 * Référence : docs/CHARTE-GRAPHIQUE.md
 * Chargée APRÈS Bootstrap pour en surcharger les couleurs.
 */

/* ---------- Polices (libres, SIL OFL — licences dans public/licences/) ---------- */
@font-face {
  font-family: "Heebo";
  src: url("../fonts/Heebo.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables de la charte ---------- */
:root {
  --lfpl-bleu-fonce: #2D427B;
  --lfpl-bleu: #325491;
  --lfpl-bleu-clair: #416EA9;
  --lfpl-bleu-vif: #5271FF;   /* décoratif / grands titres uniquement (contraste 4,1:1 sur blanc) */
  --lfpl-rouge: #D8171C;
  --lfpl-dore: #C19A2A;       /* décoratif uniquement, jamais de texte sur fond blanc */
  --lfpl-noir: #1A1A1A;
  --lfpl-blanc: #FFFFFF;
  --lfpl-fond: #F5F6FA;

  --font-texte: "Heebo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-titre: "Anton", "Heebo", Impact, "Arial Narrow", sans-serif;

  --rayon: 8px;
  --cible-tactile: 44px;
  --anneau-focus: 0 0 0 2px var(--lfpl-blanc), 0 0 0 5px var(--lfpl-bleu-fonce);

  /* Couleurs Bootstrap 5.1 réalignées sur la charte */
  --bs-primary: #325491;
  --bs-primary-rgb: 50, 84, 145;
  --bs-danger: #D8171C;
  --bs-danger-rgb: 216, 23, 28;
  --bs-body-font-family: var(--font-texte);
}

/* ---------- Base ---------- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-texte);
  color: var(--lfpl-noir);
  background-color: var(--lfpl-blanc);
}

h1, .h1,
.titre-lfpl {
  font-family: var(--font-titre);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  overflow-wrap: break-word;
}

h2, h3, h4, h5, .h2, .h3, .h4, .h5 {
  font-family: var(--font-texte);
  font-weight: 800;
}

a,
.link-primary {
  color: var(--lfpl-bleu);
}

a:hover,
.link-primary:hover {
  color: var(--lfpl-bleu-fonce);
}

/* Focus visible (clavier) : anneau blanc + bleu foncé, lisible sur fond clair comme foncé */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  outline: none;
  box-shadow: var(--anneau-focus);
}

/* ---------- Boutons ---------- */
.btn {
  min-height: var(--cible-tactile);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: var(--rayon);
}

.btn-primary {
  background-color: var(--lfpl-bleu);
  border-color: var(--lfpl-bleu);
  color: var(--lfpl-blanc);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--lfpl-bleu-clair);
  border-color: var(--lfpl-bleu-clair);
  color: var(--lfpl-blanc);
}

.btn-primary:focus,
.btn-primary:focus-visible {
  background-color: var(--lfpl-bleu-clair);
  border-color: var(--lfpl-bleu-clair);
  color: var(--lfpl-blanc);
  box-shadow: var(--anneau-focus);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: #666666;
  border-color: #666666;
}

.btn-danger {
  background-color: var(--lfpl-rouge);
  border-color: var(--lfpl-rouge);
  color: var(--lfpl-blanc);
}

.btn-danger:hover,
.btn-danger:active {
  background-color: #B51317;
  border-color: #B51317;
  color: var(--lfpl-blanc);
}

.btn-success {
  background-color: var(--lfpl-bleu-fonce);
  border-color: var(--lfpl-bleu-fonce);
}

.btn-success:hover {
  background-color: var(--lfpl-bleu);
  border-color: var(--lfpl-bleu);
}

/* ---------- Liseré tricolore de la charte (2/3 bleu foncé, 1/3 rouge) ---------- */
.lfpl-lisere {
  height: 6px;
  background: linear-gradient(90deg, var(--lfpl-bleu-fonce) 0 66.6%, var(--lfpl-rouge) 66.6% 100%);
}

/* ---------- En-tête ----------
 * Fond blanc : le logo « classique » (texte bleu foncé) est utilisé sur fond clair,
 * conformément à la page « Logo & usage » de la charte.
 */
.lfpl-entete {
  background-color: var(--lfpl-blanc);
  color: var(--lfpl-bleu-fonce);
}

.lfpl-entete__contenu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 150px;
  padding: 1rem;
}

.lfpl-entete__logo {
  height: 110px;
  width: auto;
}

.lfpl-entete--admin .lfpl-entete__contenu {
  min-height: 72px;
  justify-content: space-between;
}

.lfpl-entete--admin .lfpl-entete__logo {
  height: 48px;
}

.lfpl-entete__titre {
  font-family: var(--font-titre);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--lfpl-bleu-fonce);
  margin: 0;
}

.lfpl-entete__marque {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

/* ---------- Zone publique ---------- */
.lfpl-public #div-body {
  min-height: 70vh;
  background-color: var(--lfpl-bleu-fonce);
  background-image: url("../img/fond.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  color: var(--lfpl-blanc);
}

.lfpl-public #div-body h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
}

/* Tuiles de coupe */
.lfpl-public .zoom {
  transition: transform 0.25s ease;
}

.lfpl-public .zoom:hover,
.lfpl-public .zoom:focus-within {
  transform: scale(1.03);
}

.lfpl-public .border-white {
  border: 2px solid var(--lfpl-blanc);
  border-radius: var(--rayon);
  overflow: hidden;
}

/* Carte d'une rencontre (page coupe) */
.lfpl-public .table {
  background-color: var(--lfpl-blanc);
  border-radius: var(--rayon);
  overflow: hidden;
}

.lfpl-public .search-input,
.lfpl-public .bootstrap-table .search input {
  min-height: var(--cible-tactile);
  font-size: 16px; /* évite le zoom automatique d'iOS */
}

/* ---------- Pied de page ---------- */
.lfpl-pied__reseaux {
  background-color: var(--lfpl-bleu);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
}

.lfpl-pied__reseaux a {
  display: inline-flex;
  border-radius: var(--rayon);
}

.lfpl-pied__reseaux img {
  height: 44px;
  width: 44px;
}

.lfpl-pied__mentions {
  background-color: var(--lfpl-bleu-fonce);
  color: var(--lfpl-blanc);
  text-align: center;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  margin: 0;
}

/* ---------- Zone administration ---------- */
.lfpl-admin {
  background-color: var(--lfpl-fond);
}

.lfpl-admin .container.lfpl-contenu {
  background-color: var(--lfpl-blanc);
  border-radius: var(--rayon);
  box-shadow: 0 1px 3px rgba(45, 66, 123, 0.12);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.lfpl-admin h1 {
  color: var(--lfpl-bleu-fonce);
}

.lfpl-admin h3 {
  color: var(--lfpl-bleu);
  font-weight: 600;
}

.lfpl-admin .table thead th {
  background-color: var(--lfpl-bleu-fonce);
  color: var(--lfpl-blanc);
}

.lfpl-admin .lfpl-entete a.btn {
  min-height: 40px;
}

/* ---------- Mobile (< 576 px) ---------- */
@media (max-width: 575.98px) {
  .lfpl-entete__contenu {
    min-height: 96px;
  }

  .lfpl-entete__logo {
    height: 72px;
  }

  .lfpl-entete--admin .lfpl-entete__titre {
    font-size: 1.1rem;
  }

  .lfpl-public #div-body > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Rangées « Retour | Titre | Action » : empilées sur mobile */
  .row.my-4 > .col-2,
  .row.my-4 > .col-8,
  .row.my-4 > .offset-2 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
  }

  /* Formulaires d'administration en pleine largeur */
  .row.justify-content-center > .col-8,
  .row > .offset-3.col-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .row.mt-4 > .btn.col-3 {
    flex: 1 1 100%;
    max-width: 100%;
    margin: 0.25rem 0 !important;
  }

  /* Boutons d'affiche de la page coupe */
  .lfpl-public .row.justify-content-center > a.btn.col-3 {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* Bloc rencontre */
  .lfpl-public .logo {
    height: 64px;
  }

  .lfpl-public .logo .image {
    height: 64px;
    width: auto;
  }

  .lfpl-public .equipes {
    font-size: 0.75rem;
  }

  .lfpl-public .equipe1,
  .lfpl-public .equipe2 {
    min-height: 110px;
  }

  .lfpl-public .datesMatch {
    margin-bottom: 1rem;
  }

  .lfpl-public .imageVS img {
    max-width: 100%;
    height: auto;
  }
}

/* ---------- Réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Accueil : choix espace clubs / espace administrateur ---------- */
.lfpl-accueil {
  max-width: 960px;
  margin: 0 auto;
}

.lfpl-accueil__intro {
  font-size: 1.125rem;
  max-width: 40rem;
  margin: 0 auto 2rem;
}

.lfpl-accueil__choix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .lfpl-accueil__choix {
    grid-template-columns: 3fr 2fr; /* l'espace clubs, le plus utilisé, domine */
    align-items: stretch;
  }
}

.lfpl-choix {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: var(--rayon);
  background-color: var(--lfpl-blanc);
  color: var(--lfpl-noir);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.lfpl-choix--principal {
  border-top: 6px solid var(--lfpl-rouge);
}

.lfpl-choix__icone {
  font-size: 2rem;
  color: var(--lfpl-bleu);
  line-height: 1;
}

.lfpl-choix__titre {
  font-family: var(--font-titre);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--lfpl-bleu-fonce);
  font-size: 1.75rem;
  margin: 0;
}

.lfpl-choix__texte {
  flex-grow: 1;
  margin: 0;
}

.lfpl-choix .btn-outline-primary {
  color: var(--lfpl-bleu);
  border-color: var(--lfpl-bleu);
}

.lfpl-choix .btn-outline-primary:hover {
  background-color: var(--lfpl-bleu);
  color: var(--lfpl-blanc);
}

/* ---------- Liste des coupes ---------- */
.lfpl-tuile {
  display: block;
  color: var(--lfpl-blanc);
  text-decoration: none;
  border-radius: var(--rayon);
}

.lfpl-tuile:hover {
  color: var(--lfpl-blanc);
}

.lfpl-tuile__nom {
  display: block;
  margin-top: 0.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.lfpl-tuile__tour {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background-color: var(--lfpl-rouge);
  color: var(--lfpl-blanc);
  font-size: 0.8rem;
  font-weight: 600;
}

/* État vide */
.lfpl-vide {
  max-width: 36rem;
  margin: 2rem auto;
  padding: 2rem 1.5rem;
  text-align: center;
  border: 2px dashed rgba(255, 255, 255, 0.5);
  border-radius: var(--rayon);
}

.lfpl-vide__icone {
  display: block;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

/* ---------- Navigation de l'administration ---------- */
.lfpl-nav-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
}

.lfpl-nav-admin__lien {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  padding: 0 0.25rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--lfpl-bleu);
  border-bottom: 3px solid transparent;
}

.lfpl-nav-admin__lien:hover,
.lfpl-nav-admin__lien.is-actif {
  color: var(--lfpl-bleu-fonce);
  border-bottom-color: var(--lfpl-rouge);
}

@media (max-width: 767.98px) {
  .lfpl-entete--admin .lfpl-entete__contenu {
    flex-direction: column;
    align-items: flex-start;
  }
}