/* ============================================================
   global.css — CTT Brunoy v2
   Contient : variables, reset, typographie, utilitaires
   Inclus en PREMIER sur toutes les pages via <link>
   ============================================================ */


/* ============================================================
   1. VARIABLES CSS (palette + typo + espacements)
   ============================================================ */
:root {

  /* --- Couleurs principales (reprises de l'existant) --- */
  --bleu-nav-clair    : #7baad1;
  --bleu-nav-fonce    : #5784ae;
  --bleu-nav-mobile   : #4a7da8;
  --violet-footer     : #352d6d;
  --bleu-titre        : #032c64;
  --bleu-bouton       : #2563eb;
  --bleu-bouton-hover : #1e40af;

  /* --- Couleurs neutres --- */
  --blanc             : #ffffff;
  --gris-clair        : #f3f4f6;
  --gris-bordure      : #e5e7eb;
  --gris-texte        : #6b7280;
  --noir-texte        : #1a1a2e;

  /* --- Couleurs sémantiques (admin / alertes) --- */
  --vert-succes       : #1D9E75;
  --rouge-erreur      : #E24B4A;
  --orange-avertiss   : #EF9F27;

  /* --- Typographie --- */
  --font-titre        : 'Cinzel Decorative', cursive;
  --font-nav          : 'Ysabeau Infant', sans-serif;
  --font-section      : 'Comfortaa', cursive;
  --font-sous-titre   : 'Montserrat', sans-serif;
  --font-texte        : 'Open Sans', sans-serif;
  --font-hero         : 'Comfortaa', cursive;
  --font-hero-sub     : 'Laila', sans-serif;

  /* --- Tailles de police --- */
  --taille-h1         : clamp(28px, 4vw, 52px);
  --taille-h2         : clamp(22px, 3vw, 40px);
  --taille-h3         : clamp(18px, 2vw, 28px);
  --taille-texte      : 16px;
  --taille-petit      : 14px;

  /* --- Espacements --- */
  --espace-xs         : 8px;
  --espace-sm         : 16px;
  --espace-md         : 24px;
  --espace-lg         : 40px;
  --espace-xl         : 64px;

  /* --- Bordures & ombres --- */
  --rayon-sm          : 8px;
  --rayon-md          : 12px;
  --rayon-lg          : 20px;
  --ombre-carte       : 0 2px 8px rgba(0, 0, 0, 0.10);
  --ombre-nav         : 0 4px 6px rgba(0, 0, 0, 0.20);

  /* --- Transitions --- */
  --transition        : 0.3s ease;

  /* --- Largeur max du contenu --- */
  --largeur-max       : 1200px;
}


/* ============================================================
   2. RESET MODERNE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-texte);
  color      : var(--noir-texte);
  background-color: var(--blanc);
  line-height: 1.6;
  min-height : 100vh;
  display    : flex;
  flex-direction: column;
  overflow-x : hidden;  /* empêche tout scroll horizontal */
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}


/* ============================================================
   3. TYPOGRAPHIE GLOBALE
   ============================================================ */

/* Paragraphe standard */
p {
  font-family  : var(--font-texte);
  font-size    : var(--taille-texte);
  line-height  : 2;
  letter-spacing: 0.05em;
}


/* ============================================================
   4. LAYOUT — STRUCTURE DE PAGE
   ============================================================ */

/* Toutes les pages : nav en haut, footer en bas, contenu qui s'étire */
.page-wrapper {
  display       : flex;
  flex-direction: column;
  min-height    : 100vh;
}

.page-wrapper main {
  flex: 1;
}

/* Conteneur centré réutilisable */
.container {
  width    : 90%;
  margin   : 0 auto;
}


/* ============================================================
   5. COMPOSANTS RÉUTILISABLES
   ============================================================ */

/* --- Bouton principal --- */
.btn {
  display        : inline-block;
  padding        : 10px 20px;
  border-radius  : var(--rayon-sm);
  background     : var(--bleu-bouton);
  color          : var(--blanc);
  font-family    : var(--font-sous-titre);
  font-weight    : 600;
  font-size      : var(--taille-petit);
  text-align     : center;
  transition     : background var(--transition);
}

.btn:hover {
  background: var(--bleu-bouton-hover);
}

.btn:focus-visible {
  outline       : 3px solid var(--bleu-nav-clair);
  outline-offset: 3px;
}

/* --- Bouton secondaire (contour) --- */
.btn-outline {
  background  : transparent;
  border      : 2px solid var(--bleu-bouton);
  color       : var(--bleu-bouton);
}

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

/* ============================================================
   6. FORMULAIRES
   ============================================================ */
.form-groupe {
  display       : flex;
  flex-direction: column;
  gap           : var(--espace-xs);
  margin-bottom : var(--espace-sm);
}

.form-groupe label {
  font-family : var(--font-sous-titre);
  font-weight : 600;
  font-size   : var(--taille-petit);
  color       : var(--bleu-titre);
}

.form-groupe input,
.form-groupe textarea,
.form-groupe select {
  padding      : 10px 14px;
  border       : 1px solid var(--gris-bordure);
  border-radius: var(--rayon-sm);
  font-size    : var(--taille-texte);
  transition   : border-color var(--transition);
  width        : 100%;
}

.form-groupe input:focus,
.form-groupe textarea:focus,
.form-groupe select:focus {
  outline      : none;
  border-color : var(--bleu-nav-clair);
  box-shadow   : 0 0 0 3px rgba(123, 170, 209, 0.25);
}

/* Message d'erreur inline */
.form-erreur {
  font-size : var(--taille-petit);
  color     : var(--rouge-erreur);
}


/* ============================================================
   7. MESSAGES FLASH (succès / erreur)
   ============================================================ */
.alerte {
  padding      : var(--espace-sm) var(--espace-md);
  border-radius: var(--rayon-sm);
  font-size    : var(--taille-petit);
  font-weight  : 600;
  margin-bottom: var(--espace-sm);
}

.alerte-succes {
  background: #d1fae5;
  color     : #065f46;
  border    : 1px solid #6ee7b7;
}

.alerte-erreur {
  background: #fee2e2;
  color     : #991b1b;
  border    : 1px solid #fca5a5;
}

.alerte-info {
  background: #dbeafe;
  color     : #1e3a8a;
  border    : 1px solid #93c5fd;
}

/* Bandeau plein largeur affiché en haut des pages publiques quand on
   consulte un brouillon non publié (admin, via ?apercu=1&brouillon=1).
   Composant partagé par toutes les pages publiques : ne jamais le
   dupliquer/redéfinir dans un CSS de page. */
.bandeau-brouillon {
  background   : #dbeafe;
  color        : #1e3a8a;
  border-bottom: 1px solid #93c5fd;
  text-align   : center;
  font-family  : var(--font-sous-titre);
  font-weight  : 600;
  font-size    : var(--taille-petit);
  padding      : var(--espace-xs) var(--espace-md);
}


/* ============================================================
   8. ACCESSIBILITÉ
   ============================================================ */

/* Focus visible pour la navigation clavier */
:focus-visible {
  outline       : 3px solid var(--bleu-nav-clair);
  outline-offset: 2px;
}

/* Réduire les animations pour les utilisateurs qui le préfèrent */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration      : 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration     : 0.01ms !important;
  }
}


/* ============================================================
   9. UTILITAIRES
   ============================================================ */
/* (Section vidée lors du nettoyage : aucun utilitaire générique
   — .text-*, .mt-*n/.mb-*, .hidden/.visible, .grille, .flex-centre —
   n'était utilisé nulle part dans le projet, public comme admin.
   Chaque page définit ses propres classes de mise en page.) */

/* ============================================================
   10. COMPOSANTS PARTAGÉS ENTRE PAGES
   Règles identiques trouvées dupliquées dans 2 fichiers CSS de page
   ou plus (nettoyage du 08/07) : regroupées ici en un seul endroit,
   retirées des fichiers page-spécifiques correspondants.
   ============================================================ */

/* --- Titre de page (h1), variante AVEC marge basse ---------------
   contact / inscription / boutique / evenements / competition /
   creneaux / reglement (.reg-hero-titre) */
.contact-titre,
.inscription-titre,
.boutique-titre,
.evenements-titre,
.comp-titre,
.creneaux-titre,
.reg-hero-titre {
  font-family   : var(--font-titre);
  font-size     : var(--taille-h1);
  color         : var(--bleu-titre);
  letter-spacing: 1px;
  margin-bottom : var(--espace-sm);
  position      : relative;
  display       : inline-block;
}

/* --- Titre de page (h1), variante SANS marge basse ---------------
   calendrier / galerie : le conteneur flex gère déjà l'espacement */
.cal-titre,
.gal-titre {
  font-family   : var(--font-titre);
  font-size     : var(--taille-h1);
  color         : var(--bleu-titre);
  letter-spacing: 1px;
  position      : relative;
  display       : inline-block;
}

/* --- Barre de soulignement du titre de page (::after), les 2 variantes ci-dessus + article */
.contact-titre::after,
.inscription-titre::after,
.boutique-titre::after,
.evenements-titre::after,
.comp-titre::after,
.creneaux-titre::after,
.reg-hero-titre::after,
.article-titre::after,
.cal-titre::after,
.gal-titre::after {
  content      : "";
  display      : block;
  width        : 64px;
  height       : 3px;
  margin       : var(--espace-sm) auto 0;
  background   : var(--bleu-bouton);
  border-radius: 2px;
}

/* --- Paragraphe d'intro sous le titre de page --- */
.creneaux-texte,
.inscription-texte,
.boutique-texte,
.comp-texte {
  font-family: var(--font-texte);
  font-size  : var(--taille-texte);
  color      : var(--gris-texte);
  line-height: 1.7;
}

/* --- Section d'intro de page, variante "76% centrée" --- */
.contact-intro,
.evenements-intro,
.comp-intro,
.inscription-intro,
.boutique-intro,
.creneaux-intro {
  max-width : 76%;
  margin    : 0 auto;
  padding   : var(--espace-xl) var(--espace-sm) var(--espace-lg);
  text-align: center;
}

/* --- Section d'intro de page, variante "pleine largeur en colonne" ---
   calendrier / galerie : pas de max-width, contenu empilé en flex */
.cal-intro,
.gal-intro {
  padding       : var(--espace-xl) var(--espace-sm) var(--espace-lg);
  text-align    : center;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : var(--espace-sm);
}

/* --- Sous-titre de section (h2/h3 secondaire) --- */
.creneaux-soustitre,
.annonce-detail-titre {
  font-family  : var(--font-sous-titre);
  font-size    : var(--taille-h3);
  color        : var(--noir-texte);
  margin-bottom: var(--espace-sm);
}

/* --- Effet de survol "carte qui se soulève" --- */
.carte-encadrant:hover,
.comp-tournois-carte:hover {
  transform : translateY(-2px);
  box-shadow: var(--ombre-carte);
}

/* --- Tableau de données (base) : créneaux + compétition --- */
.creneaux-tableau,
.comp-tableau {
  width          : 100%;
  border-collapse: collapse;
  font-family    : var(--font-texte);
  font-size      : 14px;
}

.creneaux-tableau thead th,
.comp-tableau thead th {
  background    : var(--bleu-titre);
  color         : var(--blanc);
  font-family   : var(--font-sous-titre);
  font-size     : 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align    : left;
  padding       : 14px var(--espace-sm);
}

/* --- Texte visuellement masqué mais accessible aux lecteurs d'écran ---
   Version la plus robuste des 3 variantes trouvées (cal-sr-only /
   gal-sr-only avaient déjà cette version complète ; comp-sr-only avait
   une version incomplète sans le "clip trick" margin:-1px, alignée ici). */
.cal-sr-only,
.gal-sr-only,
.comp-sr-only {
  position  : absolute;
  width     : 1px;
  height    : 1px;
  padding   : 0;
  margin    : -1px;
  overflow  : hidden;
  clip      : rect(0, 0, 0, 0);
  white-space: nowrap;
  border    : 0;
}