/* ============================================================
   1. SECTION HERO
   ============================================================ */
.hero {
  width             : 100%;
  min-height        : 70vh;
  display           : grid;
  grid-template-columns: 1fr 1fr;
  align-items       : center;
  background-image  : url('../Image/Fond/Accueil_Part_1.png');
  background-size   : contain;
  background-repeat : no-repeat;
  background-position: center right;
  padding           : 40px var(--espace-lg);
}

.hero-gauche {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  text-align     : center;
}

.hero-titre {
  font-family: var(--font-hero);
  line-height: 1.2;
}

.hero-ligne {
  display    : block;
  font-size  : clamp(24px, 4vw, 64px);
  margin     : 1.5vw 0;
  color      : var(--bleu-titre);
}

.hero-de {
  font-size: clamp(18px, 2vw, 28px);
}

.hero-sous-titre {
  font-family: var(--font-hero-sub);
  font-size  : clamp(18px, 3vw, 35px);
  color      : var(--bleu-titre);
  margin-top : var(--espace-md);
}

.hero-droite {
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.hero-blason {
  width     : clamp(150px, 30vw, 450px);
  height    : auto;
  transition: transform var(--transition);
}

.hero-blason:hover {
  transform: scale(1.03);
}

/* ============================================================
   2. SECTION PROGRAMME
   ============================================================ */
.programme {
  width             : 100%;
  text-align        : center;
  background-image  : url('../Image/Fond/Accueil_Part_2.png');
  background-repeat : no-repeat;
  background-size   : cover;
  padding           : clamp(40px, 6vw, 120px) var(--espace-lg) var(--espace-xl);
}

.programme-titre {
  font-family  : var(--font-section);
  font-size    : clamp(24px, 3.5vw, 52px);
  color        : var(--bleu-titre);
  margin-bottom: var(--espace-sm);
}

.programme-sous {
  font-family  : var(--font-texte);
  font-size    : clamp(15px, 1.8vw, 22px);
  color        : #444;
  margin-bottom: var(--espace-lg);
}

.programme-cartes {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: center;
  gap            : var(--espace-lg);
  padding-bottom : var(--espace-md);
}

.programme-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  background   : rgba(255, 255, 255, 0.95);
  border       : 2px solid var(--gris-bordure);
  border-radius: var(--rayon-md);
  padding      : var(--espace-md);
  width        : 280px;
  box-shadow   : var(--ombre-carte);
  transition   : transform var(--transition), box-shadow var(--transition);
}

.programme-carte:hover {
  transform : translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

.programme-carte img {
  width        : clamp(50px, 5vw, 90px);
  margin-bottom: var(--espace-sm);
}

.programme-carte h3 {
  font-family  : var(--font-section);
  font-size    : clamp(18px, 1.8vw, 24px);
  color        : var(--bleu-titre);
  margin-bottom: var(--espace-xs);
}

.programme-carte p {
  font-family: var(--font-texte);
  font-size  : clamp(14px, 1.4vw, 18px);
  color      : #444;
  line-height: 1.6;
}

/* ============================================================
   3. SECTION HISTOIRE
   ============================================================ */
.histoire {
  display        : flex;
  align-items    : center;
  justify-content: space-around;
  gap            : var(--espace-lg);
  width          : 90%;
  margin         : var(--espace-xl) auto;
}

.histoire-texte {
  flex      : 1;
  max-width : 65%;
  text-align: center;
}

.histoire-texte h2 {
  font-family  : var(--font-section);
  font-size    : clamp(24px, 3.5vw, 52px);
  color        : var(--bleu-titre);
  margin-bottom: var(--espace-md);
}

.histoire-texte p {
  font-family  : var(--font-texte);
  font-size    : clamp(14px, 1.4vw, 20px);
  line-height  : 1.7;
  color        : #333;
  margin-bottom: var(--espace-sm);
}

.histoire-image {
  flex      : 0 0 auto;
  width     : 30%;
  display   : flex;
  align-items: center;
}

.histoire-image img {
  width        : 100%;
  max-width    : 320px;
  border-radius: var(--rayon-md);
  box-shadow   : var(--ombre-carte);
}

/* ============================================================
   4. SECTION SPONSORS
   ============================================================ */
.sponsors-section {
  width  : 90%;
  margin : 0 auto var(--espace-xl);
}

.sponsors-titre {
  font-family  : var(--font-section);
  font-size    : clamp(24px, 3.5vw, 52px);
  color        : var(--bleu-titre);
  margin-bottom: var(--espace-lg);
}

.sponsors-grille {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap                  : var(--espace-md);
}

.sponsor-carte {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: space-between;
  border         : 1px solid var(--gris-bordure);
  border-radius  : var(--rayon-md);
  padding        : var(--espace-md);
  background     : var(--blanc);
  box-shadow     : var(--ombre-carte);
  text-align     : center;
  transition     : transform var(--transition), box-shadow var(--transition);
  gap            : var(--espace-xs);
}

.sponsor-carte:hover {
  transform : translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.sponsor-logo {
  display        : flex;
  align-items    : center;
  justify-content: center;
  height         : 100px;
}

.sponsor-logo img {
  max-height  : 100px;
  max-width   : 100%;
  object-fit  : contain;
}

.sponsor-carte h3 {
  font-family: var(--font-sous-titre);
  font-size  : 16px;
  font-weight: 700;
  color      : var(--bleu-titre);
}

.sponsor-carte p {
  font-family: var(--font-texte);
  font-size  : 13px;
  color      : var(--gris-texte);
  line-height: 1.4;
}

.sponsor-btn {
  display        : inline-block;
  padding        : 8px 16px;
  border-radius  : 8px;
  background     : var(--bleu-bouton);
  color          : var(--blanc);
  font-family    : var(--font-sous-titre);
  font-weight    : 600;
  font-size      : 13px;
  text-decoration: none;
  transition     : background var(--transition);
  margin-top     : auto;
}

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

/* ============================================================
   5. RESPONSIVE MOBILE
   ============================================================ */
@media (max-width: 800px) {

  .hero {
    grid-template-columns: 1fr;
    grid-template-rows   : auto auto;
    min-height           : auto;
    padding              : 80px var(--espace-md) var(--espace-lg);
    background-position  : center top;
    background-size      : cover;
    overflow             : hidden;
  }

  .hero-gauche { order: 2; }
  .hero-droite { order: 1; }

  .hero-blason {
    width: clamp(120px, 50vw, 220px);
  }

  .programme {
    padding: var(--espace-lg) var(--espace-md);
  }

  .histoire {
    flex-direction: column;
    width         : 90%;
  }

  .histoire-texte { max-width: 100%; }
  .histoire-image { display: none; }

  .sponsors-grille {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .sponsors-grille {
    grid-template-columns: 1fr;
  }
}