body{font-family: Arial,Sans-Serif;line-height: 1.6rem;background-color:#DEF2DC;box-sizing: border-box;}

.container {
  width: 95%; /* Un peu plus large sur mobile */
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.banniere {
  width: 100%; /* Pleine largeur */
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 1rem 0;
  overflow-x: auto; /* Permet le scroll horizontal sur mobile */
}

.banniere > table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.col-left, .col-right {width: 25%; /* 25% pour la première et la troisième colonne */    }
.col-middle {width: 50%; /* 50% pour la colonne du milieu */}



.banniere.col-left { width: 25%; /* 25% pour la première */  }
.banniere.col-right { width: 25%;font-size:60px; /* 25% pour la troisième colonne */  }
.banniere.col-middle { width: 50%; /* 50% pour la colonne du milieu */    }

/* Style de base pour tous les écrans */
.conteneur {
  display: flex;
  flex-direction: column; /* Par défaut, les blocs sont empilés verticalement */
  gap: 10px; /* Espace entre les blocs */
  padding: 10px;
}

.bloc { padding: 20px;  border: 1px solid #ccc;  text-align: left;
}

/* Sur les écrans de 768px et plus (tablettes et ordinateurs) */
@media (min-width: 768px) {
  .conteneur {
    flex-direction: row; /* Les blocs s'affichent horizontalement */
  }
}

.mon-image {
  width: 100%; /* Occupe toute la largeur du conteneur */
  height: auto; /* Hauteur automatique pour conserver les proportions */
  display: block; /* Évite les espaces indésirables sous l'image */
  max-width: 100%;
}

.disclaimer {padding: 5px 5px 0 5px; text-align: center;}

.liens {display: flex; flex-direction: row;align-content: space-around; margin: 0 auto;}

.chapters {
  width: 100%; /* Pleine largeur sur mobile */
  height: auto;
  margin-bottom: 0.5rem;
}
.chapters > .summary {
  margin-left: 0; /* Pas de marge à gauche sur mobile */
  width: 100%;
  padding: 5px;
}


.chapters > ol > li { line-height:2.0rem; padding-left:0.1rem; /* Taille relative */}

.chapters > ol > li > a { text-decoration: none;}

/* Pour desktop */
@media (min-width: 768px) {.chapters {width: 70%; } .chapters > ol > li { font-size: 1.2rem; } }
@media (min-width: 768px){.misc {width: 30%; } .liens {display: flex; flex-direction: row; justify-content: space-around; } }

.liens {display: flex; flex-direction: row;align-content: space-around; margin: 0 auto;}

.misc {width:30%;height:auto;}

.misc > .summary {width: 100%;text-align:center;  padding: 10px 40px 10px 0; }

.misc > ul > li {line-height: 1.8rem; padding-left: 1rem; font-size: 1.5rem;}

.misc > ol > li > a {text-decoration: none; }

    
    
    
#chapter-delimiter { font-weight: bold; text-align: left; }

p,a {font-size: 1rem; padding-right: 0; /* Pas de padding à droite sur mobile */ }

ol.general-list { padding-top: 1rem; padding-left: 2rem; font-size:1.7rem; }

ol, ul { line-height: 2rem;  }

li {font-size:20px;line-height:auto}

/* Pour desktop */
@media (min-width: 768px)  {  p { font-size: 1.2rem;padding-right: 3rem; } ol.general-list { padding-left: 1rem; }
}

/* Mobile (par défaut) */
@media (max-width: 767px) { h1 { font-size: 1.5rem; } h2 { font-size: 1.3rem; } a { font-size: 1.2rem; }}

/* Tablette et desktop */
@media (min-width: 768px) { h1 { font-size: 2rem; } h2 { font-size: 1.7rem; } a { font-size: 1.3rem; } }

td { border: 1px solid black;  padding: 0.5em;  margin: 0; /* margin n'a pas d'effet sur les td */}

tr {border: none; /* Évite les doublons */}