/* ==========================================================================
   STRUCTURE : BLOC DEUX COLONNES (IMAGE A GAUCHE / TEXTE A DROITE)
   ========================================================================== */

.bloc-image-texte {
  display: flex;
  align-items: center; /* Centre verticalement le texte par rapport à l'image */
  gap: 40px;           /* Espace entre la colonne image et la colonne texte */
  margin-top: 20px;
  margin-bottom: 40px;
  width: 100%;
  box-sizing: border-box;
}

/* Colonne Image : Prend 50% de la largeur */
.colonne-image {
  flex: .8;
  padding: 15px;
}

.colonne-image img {
  width: 60%;
  height: auto;
  display: block;
  border-radius: 10px; /* Optionnel : un léger arrondi propre sur les coins */
  /* L'OMBRE PORTÉE (Box-shadow) :
     - 10px : Décalage vers la droite
     - 10px : Décalage vers le bas
     - 25px : Floutage de l'ombre (effet diffus et moderne)
     - rgba(...) : Couleur noire avec une opacité de 25% pour éviter l'effet "gros pâté"
  */
  box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.25); 
  
  /* Petite marge externe optionnelle tout autour de l'image elle-même */
  margin: 10px auto;
}

/* Colonne Texte : Prend 50% de la largeur */
.colonne-texte {
  flex: 1;
  text-align: left; /* Aligne le texte à gauche sur PC */
  padding: 100px;
}

.colonne-texte h2 {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  margin-top: 0;
  margin-bottom: 15px;
  color: #118eef !important; /* Ton bleu */
  text-transform: uppercase;
}

.colonne-texte p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;

}

/* ==========================================================================
   VERSION RESPONSIVE : BASCOULE SUR UNE COLONNE (MOBILE / TABLETTE)
   ========================================================================== */
@media (max-width: 991px) {
  .bloc-image-texte {
    flex-direction: column; /* Aligne l'image au-dessus et le texte en dessous */
    gap: 25px;              /* Réduit l'espace entre l'image et le texte */
  }

  .colonne-image, 
  .colonne-texte {
    width: 100%;            /* Les deux colonnes prennent tout l'écran */
  }

  .colonne-texte {
    text-align: center;     /* Centre le texte pour un rendu plus propre sur smartphone */
    padding: 0 10px;
  }
}


/* --- TAILLE DE BASE (PC ET TABLETTE) --- */
h2 {
    font-size: 60px !important; /* Change 46px par la taille voulue sur ordinateur */
}

/* --- TAILLE ADAPTATIVE (TÉLÉPHONE) --- */
@media (max-width: 767px) {
    h2 {
        font-size: 44px !important; /* Change 28px par la taille voulue sur smartphone */
    }
}