.le-style-p {
  display: grid;
  grid-template-columns: repeat(5, 1fr); 
  gap: 25px;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%); 
  width: 90%;
}

/* Correction de la syntaxe pour cibler uniquement les éléments de la section */
.texte h1, 
.texte h2 {
  text-align: center;
  padding: 10px 20px;
  color: #000000;
}

/* Style des paragraphes et du texte brut */
.texte {
  text-align: justify;
  color: #000000;
  line-height: 1.6;

  /* POSITIONNEMENT ET SCROLL (Les lignes clés) */
  position: absolute;
  top: 40px; /* Laisse un peu d'espace en haut */
  bottom: 80px; /* Laisse de la place pour ta barre de boutons en bas */
  left: 40px;
  right: 40px;
  
  /* Active la barre de défilement verticale dès que le texte est trop long */
  overflow-y: auto; 
  padding-right: 20px; /* Évite que le texte ne colle à la barre de défilement */
}

/* --- DESIGN DE LA BARRE DE DÉFILEMENT (Style Tablette moderne) --- */
.texte::-webkit-scrollbar {
  width: 8px;
}

.texte::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.texte::-webkit-scrollbar-thumb {
  background: rgb(158 158 158); /* Reprend la couleur bleue de ton design */
  border-radius: 10px;
}

.texte::-webkit-scrollbar-thumb:hover {
  background: rgb(105 105 105);
}

/* --- Ajustements spécifiques pour la carte interactive --- */
.service-media iframe {
  display: block;
  position: absolute;
  left: 20%;
  margin: 50px;
  width: 50%;
  height: 45%;
  pointer-events: auto;
}

/* Style des sous-titres dans la zone texte */
.service-texte {
  color: rgb(255 255 255);
  font-size: 1.25em;
  line-height: 35px;
  position: absolute;
  left: 23%;
  bottom: 20%;
  margin: 20px;
  gap: 20px;
}

.service-icon-d img {
  width: 265px;
  transition: transform 0.3s ease;
}

.service-icon-p img {
  width: 180px;
  transition: transform 0.3s ease;
}

.service-icon-r img {
  width: 250px;
  transition: transform 0.3s ease;
}

/* --- PAGE : INFORMATIONS PRATIQUES --- */

.titre {
  color: #ffffff;
  text-align: center;
  display: flex;
  justify-content: center;
}

/* Conteneur principal de la zone de contenu (centré sur l'écran) */
.zone-informations {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 85%;
  display: flex;
  flex-direction: column;
  gap: 35px;
  pointer-events: auto; /* Indispensable pour que la zone réagisse si besoin */
}

/* Alignement des deux blocs côte à côte */
.grille-infos {
  display: flex;
  justify-content: center;
  gap: 40px;
  width: 100%;
}

/* Style individuel de chaque bloc (Gauche et Droite) */
.bloc-info {
  flex: 1; /* Donne la même largeur exacte aux deux blocs */
  padding: 30px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Titres internes des blocs */
.bloc-info h2 {
  color: rgb(255 255 255); /* Ton bleu Icone PC */
  font-size: 1.4rem;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 500;
  padding-bottom: 10px;
}

/* Contenu textuel des blocs */
.details-info {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}

.details-info ul {
  font-weight: 200;
  list-style: none; /* Enlève les puces de base */
  margin-top: 15px;
}

.details-info li {
  margin-bottom: 12px;
}

.taille-duo img {
  width: 270px;
}

.taille-r img {
  width: 255px;
}

.taille-t img {
  width: 240px;
}

.taille-s img {
  width: 270px;
}

.taille-f img {
  width: 265px;
}

@media (max-width: 1000px) {
 .grille-infos {
    display: initial;
  }
  
  .bloc-info h2 {
    color: rgb(255 255 255); 
    font-size: 2rem;
  }
  
  .details-info {
    font-size: 1.7rem;
  }
  
  .titre {
    font-size: 2.9rem;
  }
  .style-s {
    position: absolute;
    left: 42%;
  }

  .service-media iframe {
    top: 10%;
    left: 10%;
    width: 65%;
    height: 50%;
  }
  
  .service-texte {
    font-size: 1.5em;
    line-height: 40px;
    left: 10%;
    bottom: 20%;
  }

  .taille-r img {
    width: 350px;
  }
  
  .taille-t img {
    width: 350px;
  }
  
  .taille-s img {
    width: 450px;
  }

  .taille-d img {
    width: 270px;
  }

  .reseau img{
    width: 380px;
  }
  .t-r {
    font-size: 4em;
  }
}

/* --- MODE RESPONSIVE (Téléphone / Petits écrans) --- */
@media (max-width: 768px) {
  .grille-infos {
    flex-direction: column; /* Les blocs passent l'un sous l'autre sur petit écran */
    gap: 20px;
  }
  
  .zone-informations {
    width: 90%;
    top: 48%;
  }

  .bloc-info {
    padding: 20px;
  }
}