body {
font-family: Arial, sans-serif;
color: #000;
font-size : 1em;
margin : 0;
padding : 0;
text-align : center;
/* ? Meilleure compatibilité */
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto; /* joli découpage automatique si ton HTML est en lang="fr" */
}
}
#master {
margin : auto;
width : 100%;
}
#contenu {
background-color: #FFFFFF;
margin-left : 12px;
margin-right : 12px;
margin-top : 5px;
line-height: 24px;
word-break: break-word; /* Couper les mots longs */
}
i {
  color: #555;
}
a {
color : #333366;
text-decoration : none;

}
a:hover {
background-color : #583F09;
text-decoration : none;
color : #FFFFFF;
width: auto;
height: auto;
}
a:active {
color : #cc9933;
text-decoration : none;
}
li {
list-style-type : none;
display : inline-block;
list-style : none;
text-decoration : none;
float : left;
color : #FFFFE5;
}
ul li a {
display : inline-block;
float : left;
width : auto;
padding : 18px;
color : #F7F7F7;
text-decoration : none;
text-align : center;
background : transparent;
}
ul li a:hover {
background : transparent;
text-decoration : none;
color : #99CCCC;
}
#frameHeader {
background-image : url(images/bollog_titre.gif);
background-repeat : no-repeat;
background-position : center 0%;
margin : 2px;
height : 40px;
}
h1 {
color : #FFFFFF;
background-image : linear-gradient(to right, #616161, #EEEEEE);
height : auto;
width : 97%;
font-size : 250%;
font-weight : bold;
text-align : center;
text-shadow: 1px 1px 4px #262626;
line-height : 120%;
padding : 8px;
border-radius : 6px;
box-shadow : 5px 12px 29px 1px #808080;
}
h2 {
color : #069BA2;
text-align : center;
font-size : 2em;
font-weight : bold;
margin-bottom : 16px;
}

h3 {
  color: #330000;
  font-size: 1.6em;
  text-align: center;
  border-bottom: 2px solid #330000;
  border-top: 1px solid #330000;
  margin-bottom: 12px;
  margin-top: 12px;
  padding: 6px 0; /* optionnel : espace entre texte et bordures */
}

h4 {
color : #2C353F;
font-weight : normal;
font-size : 1.2em;
text-align : center;
margin-bottom : 12px;
margin-top : 12px;
}
h5 {
color : #006666;
font-size : 1em;
font-weight : bold;
text-align : justify;
margin-bottom : 6px;
margin-top : 12px;
}
h6 {
color : #990000;
font-size : 1em;
font-weight : normal;
text-align : justify;
margin-bottom : 20px;
margin-top : 12px;
}
p {
color : #006666;
font-size : 0.9em;
margin : 0;
}
.bloc1 {
float : left;
width : 97%;
background-color : #F8F8F8;
padding : 8px;
margin-bottom : 32px;
font-size : 12pt;
line-height : 24px;
color : #000000;
text-align : justify;
border-radius : 6px;
box-shadow : 5px 10px 26px 1px #808080;
}
menu {
margin : 0 auto;
text-align : center;
}
.nav-link {
  display: inline-block;
  margin-right: 8px; /* Ajuste l'espace entre les flèches selon tes besoins */
}

.presentation {
color : #004242;
padding-left : 10%;
font-size : 18px;
line-height : 26px;
text-align : justify;
}


.text1 {
color : #5C1F00;
text-align : justify;
font-size : 1.4em;
font-weight : bold;
line-height : 28px;
}

hr {
color : #546578;
width : 100%;

}
.bloc2 {
margin : auto;
line-height : 22px;
color : #001C8A;
text-align : justify;
font-style: italic;
}
.bloc3 {
width : auto;
margin : auto;
line-height : 26px;
color : #0D0D0D;
text-align : justify;
padding: 16px;

}
.heb {
direction : rtl;
padding : 0;
margin : 0;
}
.icone {
 float : right;
 margin: 6px;
 border: none;
 }
.lettrine {
float : left;
line-height : 52px;
font-size : 78px;
color : #7A7A52;
font-family : Times New Roman, serif;
text-shadow : 1px 1px 3px #808080;
margin : 8px 2px 0 0;
padding : 0 8px 0 0;
}
img {
  display: block;
  margin-bottom: 20px; /* Augmente la valeur pour plus d'espace */
}

.imgbollog {
float : right;
width : auto;
margin-right : 30px;
margin-top : 20px;
color : #5E5E5E;
text-align : center;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11pt;
}
.imagegauche {
float : left;
width : auto;
margin-right : 20px;
margin-bottom : 5px;
margin-top : 5px;
color : #5E5E5E;
text-align : center;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11pt;
border-radius :12px;

}
.imagedroite {
    float: right;
    width: auto;
    max-width: 100%;  /* empêche de dépasser la largeur du bloc parent */
    height: auto;     /* garde les proportions naturelles de l'image */
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #5E5E5E;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11pt;
    border-radius: 16px;
    overflow: hidden;
    }
 .imagedroite img {
    border-radius: 16px;
    display: block; /* facultatif mais souvent utile pour éviter des mini-marges */
    width: 100%; /* ou auto selon ton besoin */
    height: auto;

}

.imagedroite2 {
float : right;
width : auto;
margin-left : 20px;
margin-bottom : 5px;
margin-right: 30px;
margin-top : 5px;
color : #5E5E5E;
text-align : center;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11pt;
border-radius : 12px;
box-shadow : 5px 12px 29px 1px #808080;
}
li {
list-style-type : none;
display : inline-block;
list-style : none;
float : left;
color : #FFFFE5;
}
ul li a {
display : inline-block;
float : left;
width : auto;
padding : 18px;
color : #F7F7F7;
text-decoration : none;
text-align : center;
background : transparent;
}
ul li a:hover {
background : transparent;
color : #99CCCC;
}
/* --- Ajustement harmonieux largeur & marges --- */

/* Équilibre général : ni trop large sur ordi, ni trop resserré sur mobile */
#contenu {
  max-width: 850px;         /* limite la largeur sur grand écran */
  margin: 0 auto;           /* centre parfaitement le bloc */
  padding: 0 2vw;           /* marges latérales fluides selon la taille d’écran */
}

/* Lecture confortable sur téléphones */
@media (max-width: 768px) {
  #contenu {
    max-width: 95%;         /* garde un petit cadre de respiration */
    margin: 0 auto;
    padding: 0 4vw;         /* réduit l’espace inutile sur les bords */
  }
  .bloc2, .bloc3 {
    width: 100%;
    font-size: 1em;         /* légèrement plus petit sur petit écran */
    line-height: 1.5em;
    padding: 10px 0;
  }
  body {
    text-align: left;       /* pour éviter le centrage du texte complet */
  }
}

/* --- Ajustements doux pour lecture mobile --- */
@media (max-width: 768px) {
  body {
    margin: 0;
    padding: 0;
    font-size: 1.05em; /* un tout petit peu plus grand pour les yeux fatigués */
    line-height: 1.6;
  }

  #contenu {
    padding: 0 5vw;  /* marges latérales douces */
    max-width: 100%;
    box-sizing: border-box;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
  }

  p, i, b, font {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  a {
    word-break: break-all;
  }
}