body {
  margin: 0; /* Supprime les marges par défaut du navigateur */
  min-height: 100vh;       /* Force le body à faire toute la hauteur de l'écran */
  display: flex;
  justify-content: center; /* Centre horizontalement */
  align-items: center;     /* Centre verticalement */
  /*background-color: #C21348; /* #f5f5f5   Optionnel : juste pour le fond */
  font-size: 12px;
  overflow-y: auto;  /* pour smartphone */
  font-family: 'Open sans'; 
/* Crée 3 bandes horizontales nettes et égales (33.33% chacune) */
  background-image: linear-gradient(
    to bottom,
    #FFFFFF 0%,
    #FFFFFF 17%,  /* 33.33% */
    #C21348 17%,  /* 33.33% */
    #C21348 83%,  /* 66.66% */
    #FFFFFF 83%,  /* 66.66% */
    #FFFFFF 100%  ); 
  background-attachment: fixed; /* Optionnel : empêche le fond de défiler si la page est longue */
}
/* ****************** Le CONTENEUR PRINCIPAL **********************/
/* Conteneur principal : empile le menu et les blocs verticalement */
.container-flex {
  z-index: 1; 
  display: flex; 
  flex-direction: row;
  gap: 40px;
  align-items: stretch; /* Aligne les blocs sur la même hauteur automatiquement */
  width: 90%;        /* Prend 90 % la largeur de la page */
  max-width: 1200px;  /* Max 1200px sur grand écran */
  background-color: transparent;
}

/* Le Menu : aligne les liens horizontalement */
.menu {
  display: flex;
  flex-direction: row; /* Aligné horizontalement */
  justify-content: center; /* Centre le menu (options: flex-start, space-between...) */
  gap: 30px; /* Espace entre les mots-clés */
  width: 90%;        /* Prend 90 % la largeur de la page */
  max-width: 1200px;  /* Max 1200px sur grand écran */
  background-color: #ffffff;/* blanc */
  padding: 10px;
  border: 1px solid white; 
  border-radius: 10px ; 

}

.menu a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}


/* 4. Fenêtres (index. accueil.) */
.div1, .div2, .div3, .div4, .div5, .div6 {
  display: flex; 
  flex-direction: column; /* Pour que le texte s'aligne bien à l'intérieur */
  flex: 1;                /* Répartition proportionnelle parfaite */
  min-height: 650px;      /* 650px		Hauteur minimale sur ordinateur au lieu de height: 700px */
  max-height: 750px;      /*   */ 
  background-color: #00000080; 
  border: 1px solid white; 
  border-radius: 15px ; 
}

.div1 p, .div2 p, .div3 p, .div4 p, .div5 p, .div6 p  {
  margin: 20px 10px 10px 10px ; /* Haut | Droite | Bas | Gauche */
  text-align: justify ; 
  color: #ffffff; 
  font-size: 12px; 
}

.div1 h3, .div2 h3, .div3 h3, .div4 h3, .div5 h3, .div6 h3 {
  margin: 20px 10px 10px 10px ; /* Haut | Droite | Bas | Gauche */
  text-align: justify ; 
  color: #ffffff; 
  font-size: 16px; 
}
.div2 h1  {
  margin: 20px 10px 10px 10px ; /* Haut | Droite | Bas | Gauche */
  text-align: center ; 
  color: #ffffff; 
  font-size: 24px; 
}


/* Autres utilitaires */
.align-droite { text-align: right; }
.align-center { text-align: center; font-size: 16px; color: white; }
.fond-rouge { background-color: #C21348; }
.fond-orange { background-color: orange; }
.fond-vert { background-color: green; }

.block-logo {
	position: absolute; 
	top: 0 ;
	left: 0 ;
  width: 100px;           /* 8%			Force l'image à prendre 10% de  la largeur de son bloc parent */
  height: auto;        /* 70px		Fixez la hauteur de votre choix pour l'uniformité */
  object-fit: cover;    /* cover  -  INDISPENSABLE : l'image se recadre proprement sans être déformée ou écrasée */
  /*object-position:left top ; */
  /*border-radius: 4px;   /* Optionnel : pour arrondir légèrement les angles du haut */
}

.block-img {
  width: 100%;          /* Force l'image à prendre toute la largeur de son bloc parent */
  height: 250px;        /* Fixez la hauteur de votre choix pour l'uniformité */
  object-fit: cover;    /* INDISPENSABLE : l'image se recadre proprement sans être déformée ou écrasée */
  border-radius: 5px;   /* Optionnel : pour arrondir légèrement les angles du haut */
}
.block-img2 {
  width: 100%;          /* Force l'image à prendre 90% de la largeur de son bloc parent */
  height: 250px;        /* Fixez la hauteur de votre choix pour l'uniformité */
  object-fit: contain;    /* INDISPENSABLE : l'image se recadre proprement sans être déformée ou écrasée */
  border-radius: 5px;   /* Optionnel : pour arrondir légèrement les angles du haut */
}
.block-img11 {
  width: 100%;          /* Force l'image à prendre 90% de la largeur de son bloc parent */
  height: auto;        /* 250px  - Fixez la hauteur de votre choix pour l'uniformité */
  object-fit: cover;    /* INDISPENSABLE : l'image se recadre proprement sans être déformée ou écrasée */
  /*border-radius: 5px;   /* Optionnel : pour arrondir légèrement les angles du haut */
}
/* -------------------- Afficher les photos en Galerie --------------------*/
.galerie {
  display: grid;
  /* Crée exactement 3 colonnes de largeur égale */
  grid-template-columns: repeat(3, 1fr); 
  /* Espace de 16px entre les photos */
  gap: 16px; 
}
.galerie img {
  width: 100%;       /* Force la photo à prendre toute la largeur de sa colonne */
  height: 250px;     /* Définit une hauteur fixe pour harmoniser la grille */
  object-fit: cover; /* Recadre proprement l'image sans la déformer */
  border-radius: 8px;/* Optionnel : arrondit les angles */
}

/* ==========================================================================
   CSS RESPONSIVE POUR TABLETTES ET SMARTPHONES
   ========================================================================== */
@media (max-width: 768px) {
  /* CORRECTION 1 : Ciblage explicite du body obligatoire ici */
  body {
    align-items: flex-start; /* Le scroll commence bien tout en haut de la page */
    padding: 40px 0;         /* Espace respirable en haut et bas de page */	
  }
  	
  .container-flex {
    flex-direction: column; /* Bascule en vertical */
    height: auto;           /* Permet au container de grandir à l'infini */
    align-items: center;    /* Centre les blocs sur l'écran du téléphone */
    width: 95%;             /* Donne un peu plus de place sur mobile */
  }

  /* CORRECTION 2 & 3 : On libère la largeur et la hauteur figée pour le mobile */
  .div1, .div2, .div3, .div4, .div5, .div6  {
    width: 100%;            /* S'adapte à la largeur du smartphone sans déborder */
    max-width: 400px;       /* Garde l'aspect visuel d'origine sans devenir géant */
    height: auto;           /* Devient fluide : s'adapte à la longueur du texte */
    min-height: unset;      /* Supprime la contrainte de hauteur minimale */
  }
  /* Version Responsive (Recommandée) */
  .galerie {
  display: grid;
  /* Crée des colonnes d'au moins 250px qui s'adaptent à l'écran */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 16px;
}
}