html, body {

  margin: 0;
  padding: 0;
  /*overflow: auto;  Active un défilement global si nécessaire */
}
/* ============================
   Organisation des blocs
============================= */
.ligne1, .ligne2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: -5px; /* Remonte encore plus les blocs */
}

/* ============================
   En-tête : Titre + Date
============================= */
.politique-confidentialite .hero-2 {
  text-align: center;
  margin-bottom: 10px; /* Réduction de l’espace */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  bottom: 31px; /* Remonte un peu plus */
}

.politique-confidentialite h1 {
  font-size: 1.5rem;
  color: var(--text-color);
  margin-bottom: 37px;
}
/* Organisation des lignes */
.ligne1 {
  display: flex; /* Active Flexbox */
  flex-wrap: wrap; /* Permet aux blocs de passer à la ligne si nécessaire */
  gap: 15px; /* Espacement entre les blocs */
  margin-bottom: 7px; /* Espace entre les lignes */
  min-height: 200px; /* Chaque ligne occupe au moins 400px */
}.ligne2 {
  display: flex; /* Active Flexbox */
  flex-wrap: wrap; /* Permet aux blocs de passer à la ligne si nécessaire */
  gap: 15px; /* Espacement entre les blocs */
  margin-bottom: 15px; /* Espace entre les lignes */
  min-height: 200px; /* Chaque ligne occupe au moins 400px */

}

/* ============================
   Conteneur principal
============================= */
.politique-confidentialite {
  width: 74%;
  max-width: 1138px;
  margin: 29px auto;
  padding: 19px;
  background:  var(--bg-color);
  border-radius: 20px;
  min-height: 64vh;
  max-height: 29px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  top: 21px;
}

/* ============================
   En-tête : Titre + Date
============================= */
.politique-confidentialite .hero-2 {
  text-align: center;
  margin-bottom: 5px; /* Encore moins d’espace */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  
}

.politique-confidentialite h1 {
  font-size: 2rem;
  color: #f29c38;
  position: relative;
  left: 0px;
  top: 42px;
}

.politique-confidentialite p {
  font-size: 1rem;
  color: var(--text-color);
}
/* Organisation des blocs */
.politique-confidentialite section {

  flex-wrap: wrap;
  margin-top: -13px;
}

.general {
  position: relative;
  bottom: 92px;
}


/* ============================
   Style des blocs
============================= */
.bloc {
  flex: 1;
  min-width: 300px;
  max-width: 226px;
  padding: 15px;
  background: var(--bg-color);
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #F29C38;
  text-align: center;
}

.bloc-reduit {
  min-height: 139px;
  max-height: 143px;
  overflow: hidden;
  position: relative;
  bottom: 17px;
}


/* Titres des blocs */
.bloc h2 {
  font-size: 1.4rem;
  color: var(--text-color);
  border-bottom: 2px solid #F29C38;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

/* Contenu des blocs */
.bloc p {
  font-size: 0.9rem;
}
.bloc ul li {
 
  font-size: 0.9rem; /* Taille du texte */
}


/* Suppression des puces */
.bloc ul {
  margin-left: 0; /* Retirer l'indentation */
  padding-left: 0; /* Retirer l'espace à gauche */
  list-style: none; /* Retirer les puces */
}


/* Liens */
.politique-confidentialite a {
  color: #F29C38;
  text-decoration: none;
  font-size: small;
}

.politique-confidentialite a:hover {
  text-decoration: underline;
}




/* Responsive Design */

/* 2) Mobile */


  /* .ligne1, .ligne2 {
    gap: 5px; 
    margin-bottom: 5px;
  } */

  @media (max-width: 768px) {
    .politique-confidentialite {
      width: 83%;
      max-width: 1138px;
      margin: 6px auto;
      padding: 6px;
      background: var(--bg-color);
      border-radius: 20px;
      min-height: 261px;
      max-height: 494px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      position: relative;
      top: 20px;
  }
  .politique-confidentialite section {
    flex-wrap: wrap-reverse;
    gap: 7px;
    top: 80px;
    position: relative;
}
.politique-confidentialite .hero-2 {
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 0px;
  flex-direction: column;
  top: 1px;

  }

  .hero-2 h1 {
    color: #f29c38;
    font-size: 1.6rem;
    top: 2px;
    margin: auto 0px 0px 25px;
}

  /* A) Mise en colonne */
  .bloc, .bloc-reduit {
    width: 100%;
    /* On force un min-height plus petit ou nul */
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 5px; /* On réduit aussi le padding */
  }
  p {
    margin: 0px 0;
    font-size: 0.7rem;
}

  /* B) Blocs réduits : enlève le max-height pour éviter de couper le texte */
  .bloc-reduit {
    max-height: none;
    overflow: visible;
  }

  /* C) Ajustement des titres et textes */
/* Ajuster la taille du texte */
.politique-confidentialite h1 {
  font-size: 1.5rem;
  margin-top: 0px;
  top: 0px;
}
.bloc h2 {
  font-size: 1rem;
  margin-bottom: 10px;
}
.bloc p, .bloc ul li {
  font-size: 0.6rem;
  margin: 1px 0;
}

.bloc p {
  margin: 5px 0;
}
.bloc {
  flex: 2;
  min-width: 16px;
  max-width: 442px;
  padding: 3px;
  background: var(--bg-color);
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #F29C38;
  text-align: center;
  bottom: 75px;
  position: relative;
}
.politique-confidentialite section {
  flex-wrap: wrap;
  margin-top: 0px;
}

.ligne2 {
  min-height: 172px;
  top: 80px;
  position: relative;
}
.politique-confidentialite .general {
  position: relative;
  top: 19px;
}
}


/* ==============================
   3) Tablette : (min-width: 768px) and (max-width: 1200px)
   ============================== */
   @media (min-width: 768px) and (max-width: 1200px) {
    /* Ex : Ajuster le conteneur */
    .politique-confidentialite {
      width: 84%;
      color: var(--text-color);
      background: var(--bg-color);
      box-sizing: border-box;
      min-height: 463px;
      max-height: 461px;
      position: relative;
      top: 18px;
  }

  .general {
    position: relative;
    top: 19px;
}
    .bloc h2 {
      font-size: 1rem; /* Deja par defaut */
      margin-bottom: 6px;
    }
    /* Ajuster la taille du texte */
.politique-confidentialite h1 {
  font-size: 2rem;
  margin: 10px;
  text-align: center;


}
.politique-confidentialite section {
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 15px;
}

.politique-confidentialite .hero {
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 0px;
  flex-direction: column;

  }

.politique-confidentialite .hero-2 {
  text-align: center;
  margin-top: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  bottom: 29px;
}
  .hero-2 h1 {
    color: #f29c38;
    font-size: 1.6rem;
    top: 2px;
    margin: auto 0px 0px 25px;
}
p {
  margin: 5px 0; /* Marges plus grandes entre les paragraphes */
  font-size: 0.9rem;
}
.ligne1, .ligne2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 1px;
}
.bloc {
  flex: 1;
  min-width: 190px;
  /* max-width: 300px; */
  padding: 15px;
  background: var(--bg-color);
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  border: 1px solid #F29C38;
  text-align: center;
}
/* Contenu des blocs */
.bloc p {
  font-size: 0.8rem;
}
.bloc ul li {
 
  font-size: 0.8rem; /* Taille du texte */
}

}