/* ============================================================
   BAD'ITT — Surcharges graphiques légères
   Objectif : meilleure lisibilité, sections plus compactes,
   navigation plus nette. Inclure APRÈS style.css.
   ============================================================ */


/* ============================================================
   1. VARIABLES GLOBALES — ajustements fins
      • Ombre de carte plus nette
      • Shadow légère unifiée
   ============================================================ */
:root {
  --shadow:    0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 6px 28px rgba(26, 50, 120, 0.13);
}


/* ============================================================
   2. TEXTE PRINCIPAL — meilleur contraste & respiration
      • Paragraphes : line-height 1.6 → 1.8
      • Texte muet (muted) rendu plus lisible
   ============================================================ */
body {
  line-height: 1.8;
}

p {
  line-height: 1.8;
}

/* Texte secondaire : contraste renforcé (#5E6E9C → #4a5878) */
.section-desc,
.page-hero__desc,
.hero__subtitle {
  color: #4a5878;
}

/* Texte sur fond sombre — rester lisible */
.page-hero__desc {
  color: rgba(255, 255, 255, 0.72);
}
.hero__subtitle {
  color: rgba(255, 255, 255, 0.75);
}


/* ============================================================
   3. HERO PRINCIPAL (page d'accueil)
      • Titre h1 réduit : clamp(2.8rem,7.5vw,5.8rem) → clamp(2.2rem,5.5vw,4.2rem)
      • Sous-titre légèrement remonté
   ============================================================ */
.hero__title {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  margin-bottom: 1.2rem;
}

.hero__subtitle {
  margin-bottom: 2rem;
}


/* ============================================================
   4. PAGE HERO (bannières des pages intérieures)
      • padding-top et padding-bottom réduits
      • Titre h1 intérieur réduit : clamp(2.2rem,5vw,3.8rem) → clamp(1.8rem,4vw,3rem)
      • margin-bottom de la section réduit
   ============================================================ */
.page-hero {
  padding: calc(var(--nav-h) + 1.5rem) 0 1.75rem;
  margin-bottom: -0.5rem; /* rapproche le contenu suivant */
}

.page-hero__title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: 0.75rem;
}

.page-hero__desc {
  font-size: 1rem;
}


/* ============================================================
   5. TITRES DE SECTION h2 (.section-title)
      • Taille réduite : clamp(1.8rem,4vw,2.6rem) → clamp(1.5rem,3vw,2.2rem)
      • margin-bottom réduit pour coller au contenu
   ============================================================ */
.section-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 0.65rem;
}

/* En-tête de section : marge inférieure réduite (4rem → 2.75rem) */
.section-header {
  margin-bottom: 2.75rem;
}

/* Étiquette au-dessus des titres : espacement réduit */
.section-label {
  margin-bottom: 0.5rem;
}

/* Ligne décorative sous le label : espacement réduit */
.section-line {
  margin-bottom: 1rem;
}


/* ============================================================
   6. SECTIONS GÉNÉRIQUES
      • padding vertical légèrement réduit : 6rem → 5rem
      • Sur mobile, déjà à 4rem via media query existante
   ============================================================ */
.section {
  padding: 5rem 0;
}


/* ============================================================
   7. CARTES / BLOCS D'INFORMATION
      • border-radius harmonisé à 12px (var(--r) est déjà 12px,
        on force les cas où --r-lg ou valeurs en dur étaient utilisées)
      • Ombre légère mais nette
   ============================================================ */

/* Cards articles */
.article-card {
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.article-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Cards événements */
.event-card {
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* Cards valeurs */
.value-card {
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.value-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Cards équipe */
.team-card {
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.team-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Carte identité club */
.club-id-card {
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* Blocs génériques avec fond clair */
[class*="-card"],
[class*="-block"],
[class*="-box"] {
  box-shadow: var(--shadow);
}


/* ============================================================
   8. NAVIGATION — meilleur contraste & lien actif plus net
   ============================================================ */

/* Liens sur fond sombre (hero visible) : légèrement plus lisibles */
.navbar__links a {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
}

/* Survol + lien actif sur fond sombre : fond légèrement plus marqué */
.navbar__links a:hover,
.navbar__links a.active {
  color: var(--c-yellow);
  background: rgba(26, 110, 255, 0.12);
  font-weight: 600;
}

/* Navbar après scroll (fond blanc) : liens plus contrastés */
.navbar.scrolled .navbar__links a {
  color: rgba(27, 37, 89, 0.85);
}

.navbar.scrolled .navbar__links a:hover,
.navbar.scrolled .navbar__links a.active {
  color: var(--c-yellow);
  background: var(--c-yellow-bg);
  font-weight: 600;
}

/* Lien actif sur mobile (menu déroulant) */
.navbar__mobile a.active {
  color: var(--c-yellow);
  border-color: var(--c-yellow-bd);
  background: var(--c-yellow-bg);
  font-weight: 600;
}


/* ============================================================
   9. RESPONSIVE — ajustements mobile (≤ 768 px)
      Complète les règles existantes sans les écraser
   ============================================================ */
@media (max-width: 768px) {

  /* Hero principal : titre encore un peu plus compact */
  .hero__title {
    font-size: clamp(1.9rem, 8vw, 3rem);
    margin-bottom: 1rem;
  }

  /* Page hero intérieure : padding mobile réduit */
  .page-hero {
    padding: calc(var(--nav-h) + 1rem) 0 1.25rem;
  }

  .page-hero__title {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }

  /* Titres de section sur mobile */
  .section-title {
    font-size: clamp(1.4rem, 5vw, 1.9rem);
  }

  /* Sections : padding mobile (déjà 4rem dans style.css, on préserve) */
  .section {
    padding: 3.5rem 0;
  }

  .section-header {
    margin-bottom: 2rem;
  }
}