/* --- Styles Généraux Universels --- */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #002366; /* Bleu plus moderne pour le fond royal */
  color: #ffffff;
  line-height: 1.6;
  padding: 20px;
}
/* --- Menu de Navigation Responsif --- */
.navigation-principale {
  background-color:#ffffff;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 25px;
}
.menu-principal {
  display: flex;
  flex-wrap: wrap; /* Permet au menu de passer à la ligne sur petit écran */
  justify-content: space-around;
  list-style: none;
}
.deroulant {
  position: relative;
  padding: 10px 15px;
}
.deroulant > a {
  color:#002366;
  text-decoration: none;
  font-size: 16px;
}
/* Système de sous-menu au survol */
.sous {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #222;
  list-style: none;
  min-width: 180px;
  border-radius: 4px;
  z-index: 100;
}
.sous li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}
.sous li a:hover {
  background-color: #d21034; /* Rouge drapeau Haïti au survol */
}
.deroulant:hover .sous {
  display: block;
}
/* --- En-tête Titre --- */
.entete-titre {
  text-align: center;
  margin: 2px 0;
}
.p1 {
  font-size: 3.3rem;
  font-weight: bold;
  color:white; /* Or/Jaune pour faire ressortir */
  text-shadow: 5px 3px 4px rgba(219, 21, 21, 0.5); /* Ombre pour un effet de profondeur */
}
/* --- Section Contacts --- */
.bloc-contacts {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
/* 1. Le conteneur principal */
.galerie-heros {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;  /* Aligne les éléments horizontalement */
    justify-content: space-between;
    align-items: stretch;     /* Force toutes les boîtes à avoir exactement la même hauteur */
    width: 100%;
    gap: 10px;                /* Espace agréable entre chaque bloc */
    box-sizing: border-box;
    padding: 10px 0;
}
/* 2. Chaque boîte contenant une photo (On remet votre ombre !) */
.galerie-heros .carte-photo {
    flex: 1;
  overflow: hidden;  /* Coupe ce qui dépasse si l'image est trop grande */
    min-width: 0;
    background: #ffffff;      /* Fond blanc pour faire ressortir l'ombre si nécessaire */
    border-radius: 7px;       /* Coins arrondis (à ajuster selon vos goûts) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Réactivation de votre superbe effet d'ombre */
    padding: 7px;             /* Espace intérieur dans la boîte */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}
/* 3. L'image à l'intérieur de la boîte */
.galerie-heros .carte-photo img {
    width: 100%;
    max-width:100%;
    height:auto;            /* ⚠️ FORCE une hauteur identique pour toutes vos images (Ajustez ce chiffre selon votre besoin) */
    object-fit: cover;        /* Coupe proprement l'image pour qu'elle remplisse sa boîte sans être déformée */
    border-radius: 6px;       /* Coins arrondis sur l'image */
    display: block;
}
/* --- Zone de Contenu Principale --- */
.section-contenu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}
.bloc-actu, .bloc-pub, .bloc-flash {
  background: rgba(255, 255, 255, 0.05);
  padding: 25px;
  border-radius: 10px;
  border-left: 5px solid #d21034;
}

.image-placeholder {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-top: 15px;
}
/* Badges Publicitaires */
.badge-pub, .badge-flash {
  display: inline-block;
  background-color: #d21034;
  color: white;
  padding: 5px 12px;
  font-weight:bold;
  border-radius: 4px;
  margin-bottom: 15px;
  text-align: justify;
}
.badge-flash {
  background-color: #ffcc00;
  color: #111;
  text-align: justify;
}
/* Zone Logos des partenaires */
.zone-logos {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.zone-logos img {
  height: 40px;
  width: auto;
  background: white;
  padding: 5px;
  border-radius: 4px;
}
/* --- Bandeau Défilant Bas de Page --- */
.bandeau-defilant {
  background-color: #d21034;
  padding: 15px;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
}
/* ==========================================================================
   3. CODE POUR LES TRÈS GRANDS ÉCRANS PC
   ========================================================================== */
@media (min-width: 1400px) {
  body {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto; /* Centre la page pour éviter qu'elle s'étale à l'infini */
  }
}

/* ==========================================================================
   1. CODE POUR LES SMARTPHONES (Mode Portrait)
   ========================================================================== */
@media (max-width: 600px) {
  /* Aligne tes éléments vers le bas sur les petits écrans */
  .flex-container, .conteneur-heros {
    flex-direction: column;
  }
  
  /* Force les images des héros à ne pas dépasser et à s'adapter */
  .flex-container img, .conteneur-heros img {
    width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   2. CODE POUR LES TABLETTES (Optionnel, si tu veux une transition à 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Sécurité si ton conteneur s'appelle .conteneur-heros */
  .conteneur-heros {
    flex-direction: column; 
  }
}

/* ==========================================================================
   DESIGN DES HÉROS (FOND BLANC, OMBRES ET ALIGNEMENT)
   ========================================================================== */

/* Ton conteneur principal */
.galerie-heros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centre la ligne de héros sur les grands écrans */
  gap: 15px;               /* Espace régulier entre chaque carte */
  padding: 20px;
}

/* Style de tes cartes blanches */
.galerie-heros .carte-photo {
  background-color: #ffffff; /* Fond blanc propre */
  border-radius: 8px;        /* Arrondit les coins */
  width: 130px;              /* Ajuste la largeur de chaque carte */
  height: 200px;             /* FORCE TOUTES LES CARTES À LA MÊME HAUTEUR */
  overflow: hidden;          /* Empêche l'image de dépasser des bords arrondis */
  
  /* L'OMBRE (SHADOW) : Donne le relief moderne sur le fond bleu */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); 
  
  /* Effet de transition douce au survol */
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

/* Effet très cool quand on passe la souris dessus sur PC */
.galerie-heros .carte-photo:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

/* Ajustement magique pour que les images remplissent toute la carte */
.galerie-heros .carte-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Coupe et ajuste l'image sans la déformer */
  display: block;
}

/* ==========================================================================
   CORRECTION MOBILE (MODE PORTRAIT)
   ========================================================================== */
@media (max-width: 600px) {
  .galerie-heros {
    flex-direction: column;   /* Aligne les héros verticalement vers le bas */
    align-items: center;      /* Centre les cartes sur l'écran du téléphone */
  }

  .galerie-heros .carte-photo {
    width: 85%;               /* Donne une belle largeur sur mobile */
    height: 250px;            /* Hauteur plus généreuse et confortable pour les téléphones */
  }
}