body {
	background-color: #fcf9f6;
	margin-top: 5px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	font-size: 18px;
	font-weight: 400;
	color: #0a324b;
	max-width:100%;
	min-height:100vh;
	white-space:normal;
}

 }
 @media screen and (max-width: 1024px) {
.tab0 {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  border:0;
  background-color: #f3fafe;
  width: 100%; /* par défaut en mobile */
	max-width:100%;
 }
}
@media screen and (min-width: 1025px) {
  .tab0 {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	background-color: #f3fafe;
	border: 1px solid #0a324b;
    width: 80%; /* sur les grands écrans */
	max-width:80%;
  }
}
   

 .tab_entete {
	 min-width:0; max-width:100%;
      text-align: center;
      padding: 10px;
	  display:flex;
	  flex-wrap:wrap;
	  justify-content:space-around;
	  align-items:center;
}
@media screen and (max-width: 1024px) {
#logo1 {
  order:1; /* par défaut en mobile */
}
#tx_bienvenue{
	order:3;/* par défaut en mobile */
}
#logo2{
	order:2; /* par défaut en mobile */
	
}
hr{border:0;}
}

@media screen and (min-width: 1025px) {
 #logo1 {
  order:1; /* sur les grands écrans */
}
#tx_bienvenue{
	order:2;/* sur les grands écrans */
}
#logo2{
	order:3; /* sur les grands écrans */
	
}
}

    .td_navigation {
	min-width:0; max-width:100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      background-color: #0a324b;
      color: #fff;
    }

    .td_navigation a {
      color: #fff;
      font-weight: bold;
      padding: 8px 30px;
    }
   

@media screen and (max-width: 1024px) {
main.content {
	min-width:0;max-width:100%;
      display: flex;
      padding: 10px;
	  flex-wrap:wrap; /* petit écran à la ligne */

}
}
@media screen and (min-width: 1025px) {
	main.content {
		min-width:0; max-width:100%;
      display: flex;
      gap: 10px;
      padding: 10px;
	  flex-wrap:nowrap; /* grand écran */
	}
}

li {  margin-top: 5px;}
a:hover {  text-decoration: underline; color: #bc9d6b;}
a {  color: #0a324b; text-decoration: none;}
h1 {  font-family: Garamond; font-size: 36px; font-weight: bold; text-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);}
h2 {  font-family: "Comic Sans MS"; font-size: 36px; font-style: italic; font-weight: 700; color: #bc9d6b; text-decoration: underline;}
h3 {  font-family: "Comic Sans MS"; font-weight: bold; color: #0a324b;}
h4 {  font-family: "Comic Sans MS"; font-weight: bold; color: #bc9d6b;font-size: 20px;}
h1,h2,h3,h4,h5,h6{margin:20px 0 20px 0;}
ul{margin : 5px 5px;}

.tx_renvoi {  font-family: Arial; font-size: 13px; font-weight: 700; background-color:#0a324b; border-radius:10px;padding:2px 5px;white-space: nowrap;}
a:hover > .tx_renvoi {  color: #bc9d6b;text-decoration: underline;}
a  > .tx_renvoi {  color: #fff;text-decoration: none;}
.tx_majuscule {  font-family: Garamond; font-size: 30px; font-weight: bold; color: #0a324b;}
.tx_affiliation { font-family: Garamond;text-align :center;  }
#tx_bienvenue { font-family: Garamond; font-weight: bold; color: #0a324b;max-width:760px;}
.tx_formulaire {  font-family: "Comic Sans MS"; font-weight: bold; color: #bc9d6b; text-align: left; }
.boite_lien {min-width:0; max-width:100%; display:flex;flex-direction:column; justify-content:center;align-items:center;background-color: #0a324b; border-radius: 50px; padding :10px 50px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); margin:20px auto;font-size:24px;text-align:center;color:#fff;}
.boite_lien a{color:#fff;}
.boite_lien a:hover {color:#bc9d6b;text-decoration:underline;}
.boite_info { min-width:0; max-width:100%;display:flex;flex-direction:column; justify-content:center;align-items:stretch;background-color: #f3fafe; border-radius: 50px; padding :10px 50px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); margin:20px auto;}
.par_centre{margin:0 auto;}
.metier{display:flex;flex-direction:row;justify-content:center;align-items:stretch;gap:10px;flex-wrap:wrap;}
.boite_galerie{min-width:0; max-width:100%; display:flex;flex-direction:row; justify-content:flex-start;align-items:stretch;flex-wrap:wrap;background-color: #f3fafe; border-radius: 50px; padding :10px 30px; 
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);text-align:left;}
.par_galerie{padding:10px;margin:10px;background-color: #f1f1f1; border-radius: 10px;max-width:40%;transform: translateY(0);}
.par_galerie:hover {transform: translateY(-2px);box-shadow:1px 1px 5px rgba(0, 0, 0, 0.2);}

 #resultat{
	 min-width:0;
max-width:100%;
text-align:left;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
 /* Adaptations Flexbox */

	
	.tab_photo {
      display:flex;
	  flex-direction:row;
	  justify-content:space-around;
	  flex-wrap:wrap;
	  align-items:flex-end;
	  padding:20px;

}
/* coté gauche */
.cote_gauche{
	min-width:auto;
	max-width:350px;
      padding: 10px;
	text-align :left;
	margin:0 auto;
}

.bas_gauche{
	text-align:center;
}
.bas_gauche img{
	border: 1px solid #000;
}
 /* page milieu */

    .td_journal{
	
	  min-width:0; width:100%;
	  display:flex;
	  flex-direction:column;
	  justify-content:flex-start;
	  align-items:stretch;
      padding: 10px;
	  font-family: Garamond;
	  background: linear-gradient(to right, #d8edfa, #e0f1fb50);
	  text-align: justify;
	  margin-top:10px;
	  border-radius:10px;
}
 /* formulaire */
#recherche{
	min-width:0; max-width:100%;
	padding :20px;
}
input[type="text"]{
border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
	padding:10px;
	outline: none;
	width:180px;
}
select{
	min-width:0;
	max-width:300px;
	overflow:auto;
	border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
	padding:10px;
	outline: none;
	background-color:#fff;
	box-sizing:border-box;
}
#recherche select{max-width:200px;}
input[type="text"]:focus{
	border: 1px solid #0a324b;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
	
}
input[type="submit"] {
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
	padding:10px;
	margin:10px;
	border-radius: 10px 2px;
	background-color:#0a324b;
	color:#fff;
	font-weight:700;
	outline: none;
	border: 2px solid #0a324b;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.2s ease;
	white-space: nowrap;
}
input[type="submit"]:hover {
	transform: translateY(-2px);
	
}

input[type="submit"]:active {
      transform: translateY(0);
    }
.validation{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex-wrap:wrap;}

	/* tableau de recherche */
table{
	border-collapse:collapse;
	border:1px solid #0a324b;
	margin-left: auto;
	margin-right: auto;
	min-width:0; max-width:100%;
	}
.tableau_simple{
	
	border: 1px solid #0a324b;
	margin-bottom:20px;
}
.tableau_simple td{
	border: 1px solid #0a324b;
	padding:3px;
	font-size:16px;
}
.tableau_simple tr:nth-child(even) {
            background-color: #f3fafe;
}
.tableau_simple th{
	background-color: #0a324b;
	border: 1px solid #fff;
    color: white;
	padding:3px;
}
	/* bas de page */
	footer{min-width:0; max-width:100%;}
    footer.tx_basdepage {
      padding: 10px;
	  font-weight:700;
      font-size: 16px;
      border-top: 1px solid #0a324b;
    }

    /* Menus gauche */
@media screen and (min-width: 1025px) {
  #menugauche {
    transform: none; /* toujours visible */
  background: linear-gradient(to right, #fcf9f6, #f1f1f1);
  border-radius: 12px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  padding: 10px;
  font-family: Garamond, serif;
  
}
#menugauche a{text-decoration: none;}
#menugauche a:hover{color :#bc9d6b;text-decoration: underline;}
.hamburger {
    display: none;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  margin: 10px auto;
  

	}
}
/* Menu principal gauche*/
.menu1 {
  display: block;
  margin: 12px 0 6px 0;
  background-color: #d8edfa; 
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), 1px 1px 3px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight:700;
  white-space: nowrap;
}

/* Niveaux de sous-menus */
.menu1_1 {
	
  font-family: Garamond, serif;
  font-size: 15px;
  font-weight: bold;
  text-indent: 20px;
  margin: 3px 0;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.menu1_1:hover {
  color: #bc9d6b;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  #menugauche {
    position: fixed;
    top: 2px;
    left: 2px;
    height: 75vh;
    transform: translateX(-100%); /* caché par défaut */
    z-index: 1000;
	overflow-y: scroll; /* active le défilement vertical */
    scrollbar-width: thin;
    scrollbar-color: #bc9d6b #f7f7f7; /* pour Firefox */
	scrollbar-gutter: stable;
  background: linear-gradient(to right, #fcf9f6, #f1f1f1);
  border-radius: 12px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  padding: 10px;
  font-family: Garamond, serif;
  
}
#menugauche a{text-decoration: none;}
#menugauche a:hover{color :#bc9d6b;text-decoration: underline;}
 

  #menugauche::-webkit-scrollbar {
    width: 10px;
  }
  #menugauche::-webkit-scrollbar-track {
    background: #f7f7f7;
    border-radius: 10px;
  }
  #menugauche::-webkit-scrollbar-thumb {
    background-color: #bc9d6b;
    border-radius: 10px;
  }

  #menugauche.open {
    transform: translateX(0);
  }

  .hamburger {
    display: block;
    position: relative;
    z-index: 1100;
	background-color: pink;
	border:none;
	margin: 10px auto;
  }
}


/* lire la revue en ligne */
.boite_revue{
	width:25%;
	margin:15px;
	padding:15px;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
	font-weight:700;
	border-radius: 5px;

}
.tx_revue{
	text-shadow:1px 1px 2px rgba(0, 0, 0, 0.2);
	text-indent:20px;
	background: linear-gradient(to right,#fcf9f6, #f3fafe);
	margin-bottom:15px;
	border-radius: 10px;
}
/* ouvrage d'auteur */

.etagere{
	min-width:0; max-width:100%;
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items: flex-start;
	flex-wrap:wrap;
}
details{
	cursor: pointer;
}
summary{
	list-style:none;
}
details > summary::-webkit-details-marker {
  display: none;
}
.theme{
width:300px;
height:250px;
background-repeat:no-repeat;
background-size:cover;
border:1px solid #0a324b;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items: stretch;
margin:20px;
color:#0a324b;
}
details[open=""] .cadre_fin {
animation-name: couvre1;
			animation-duration: 1s;
			animation-iteration-count: 1;
			height:240px;
			border-radius: 150px 150px 0;
			
		}
		@keyframes couvre1 {
			0%    { height:70px;}
			100%  { height:240px;border-radius: 150px 150px 0;}
}
.cadre_fin{
border:1px solid #0a324b;
height:70px;
background-color:#fff;
opacity:0.80;
display:flex;
flex-direction:row;
justify-content:center;
align-items: center;
margin:5px;
text-align:center;
font-variant:small-caps;
	font-weight:bold;
	font-size:18px;
	letter-spacing:1px;
}
/* tableau famille étudiées */
        .miniature {
            width: 60px;
            height: auto;
            border-radius: 50%;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
			text-align:center;
        }

        .btn-choisir {
            background-color: #0a324b;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
			margin:auto auto;
        }

        .btn-choisir:hover {
            transform: translateY(-2px);
        }
/* formulaire des bases */
fieldset{
	display:inline-block;
	border:none;
	margin:5px;}
legend{font-weight:700;}
#annule {
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
	padding:10px;
	margin:10px;
	border-radius: 10px 2px;
	background-color:#bc9d6b;
	color:#fff;
	font-weight:bold;
	outline: none;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.2s ease;
	font-size :16px;

}
.pos_champs{display:flex;flex-wrap:wrap;min-width:0; max-width:100%;}
#annule:hover {
	transform: translateY(-2px);
	text-decoration: none;
}

#annule:active {
      transform: translateY(0);
	  text-decoration: none;
    }
/* resultat des bases */
 .resultat_bases {
	 min-width:0; max-width:100%;
      display: flex;
	  flex-direction:column;
      justify-content: flex-start;
      align-items:stretch;
	 background-color: #f3fafe; border-radius: 50px; padding :10px 10px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); margin:20px;
    }
	.resultat_bases div{
		margin: 2px 10px;
	}
		.p_titre {
  background-color: #d8edfa;
  color:#fff;
  font-weight: bold;
  border-radius:20px;
  padding:2px 10px;
  min-width:0;
  max-width:200px;
  color:#bc9d6b;
  font-size:16px;
  text-align:left;
}
.bases{
		text-indent: 20px;
	}

/* Texte spécial */
.p_dore {
  font-family: "Comic Sans MS", cursive;
  font-size: 13px;
  color: #bc9d6b;
}
.p_bleu {
  font-family: "Comic Sans MS", cursive;
  font-size: 13px;
}
.p_fonce {
  background-color: #0a324b;
  color:#fff;
  font-weight: bold;
  border-radius:5px;padding:2px 5px;
}
.tx_petit {  font-family: Garamond; font-size: 14px; font-weight: 400;}

.liste_dates {
  list-style: none;
  padding: 0;
  margin: 0;
}

.liste_dates li.important{
 background: #0a324b;
  color: white;
  margin: 7px 0;
 
}

.liste_dates li{
  background: #d8edfa;
  padding: 5px 10px;
 border-radius: 20px;
 font-weight: bold;
 margin-left:30px;
}
nav{min-width:0; max-width:100%;}
#rond{width:50px;height:50px;border-radius:25px;background-color:#0a324b;color:#f3fafe;position:fixed; bottom: 10px;right:10px;font-weight:bold;font-size:32px}
/* popup */
.overlay {
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0, 0, 0, 0.7);
 visibility: hidden;
 opacity: 0;
}
.overlay:target{
 visibility: visible;
 opacity: 1;
}
.popup {
 margin: 70px auto;
 padding: 20px;
 background-color: #f3fafe;
 border-radius: 5px;
 width: 30%;
 position: relative;
 color:#0a324b;
}
.popup .contenu {
 max-height: 30%;
 overflow: auto;
}
.note{
	
	font-weight:700; text-decoration: underline;
}
.popup .close {
 position: absolute;
 bottom: 0px;
 right: 10px;
 text-decoration: none;
}
/* fin popup */

/* gestion */
.tab_gestion {
	 min-width:0; max-width:100%;
      text-align: center;
      padding: 10px;
	  display:flex;
	  flex-wrap:wrap;
	  justify-content:space-between;
	  align-items:center;
	  font-weight: bold;
	  color: #0a324b;
}
.resultat_bases input[type="text"], .resultat_bases select, .resultat_bases textarea {
	width: 95%;
}

.rev { direction: rtl; unicode-bidi: bidi-override; font-size: 24px;}
.hide { display:none; }