/*
body{
	background-color: #DBDBDB;  
	font-family: book antiqua;}
*/

/* Gestion du menu haut de navigation */
#wrap {
    width: 100%;
    height: 60px; /* Modification 11-02-2024 - Ancienne valeur 50px */
    z-index: 102;
    position: fixed;
	top: 0;
	left:0;
   	right:0;
    background-color: white;
	box-shadow: 0px 5px 5px grey;
      }
      
      .navbar {
        height: 50px;
        padding: 0;
        margin: 0;
        position: absolute;
      }
      .navbar li {
        height: auto;
        width: 20vw;
        float: left;
        text-align: center;
        list-style: none;
        font: normal bold 18px/1.1em Arial, Verdana, Helvetica;  /* Modification 11-02-2024 - Ancienne valeur 13px/1em */
        padding: 0;
        margin: 0;
        background-color: white;
      }
      .navbar a {
        padding: 18px 0;
        border-left: 1px solid #ccc9c9
	border-right: 1px solid #ccc9c9
	border-top: 1px solid #ccc9c9
	border-bottom: 1px solid white;
        text-decoration: none;
        color: black;
        display: block;
      }
      .navbar li:hover,
      a:hover {
        background-color: white;
      }
      .navbar li ul {
        display: none;
        height: auto;
        margin: 0;
        padding: 0;
      }
      .navbar li:hover ul {
        display: block;
      }
      .navbar li ul li {
        background-color: white;
	box-shadow: 10px 1px 2px 0px rgba(0, 0, 255, .6);
      }
      .navbar li ul li a {
        border-left: 1px solid #444444
        border-right: 1px solid #444444
        border-top: 1px solid #c9d4d8
        border-bottom: 1px solid #444444
      }
      .navbar li ul li a:hover {
        background-color: white
      }
      .navbar li ul li:hover {
	box-shadow: 10px 1px 2px 0px rgba(255, 0, 2, .6);
      }
	  .bloc_accueil .accueil {  /* Ajout du bloc 11-02-2024 */
		border-top: 3px solid #660066; 
		border-bottom: 3px solid #660066;  
      }
      .bloc_suscinio .suscinio {
		border-top: 3px solid blue; /* Ajout 11-02-2024 */
		border-bottom: 3px solid blue;
      }
      .navbar .bloc_suscinio ul li {
        background-color: white;
	box-shadow: 10px 1px 2px 0px rgba(0, 0, 255, .6);
      }
      .bloc_lasne .lasne {
		border-top: 3px solid green; /* Ajout 11-02-2024 */
		border-bottom: 3px solid green;
      }
      .navbar .bloc_lasne ul li {
        background-color: white;
	box-shadow: 10px 1px 2px 0px rgba(0, 255, 0, .6);
      }
      .bloc_duer .duer {
		border-top: 3px solid orange; /* Ajout 11-02-2024 */
		border-bottom: 3px solid orange;
      }
      .navbar .bloc_duer ul li {
        background-color: white;
	box-shadow: 10px 1px 2px 0px rgba(255, 255, 0, .6);
      }



/* Affichage de la page : centré et occupe un pourcentage de l'écran [un texte trop large devient difficile à lire] */
.blocpage 
{ display: block; 
    margin: auto;       /* centrage */
    padding:10px 20px;  /* vertical | horizontal */
    width: 70%;
}

#bloc_titre{
	margin-bottom: 30px;
}


/* Affichage du titre de la page en superposition du bandeau d'images défilantes */
.titre{
	position: absolute;
	z-index: 101;
	top: 50px;
	left: 60px;
	font-size: 2em;
	color: white;
}
	
/* Animation images défilantes du bandeau du haut */
figure{
	display: block;
	position: relative;
	top: 0px;
	left: 0px;
	margin: 0;
	width: 500%;
	animation: 30s animation_slide infinite;
}

figure img{
	pointer-events:none;
	width: 20%;
	height: 100vh;
	object-fit: cover;
	float: left;
}


@keyframes animation_slide {
0% {left:0}
20%{left:0}/*image1*/

25%{left:-100%}
45%{left:-100%}/*image2*/

50%{left:-200%}
70%{left:-200%}/*image3*/

75%{left:-300%}/*image4*/
95%{left:-300%}

100%{left:-400%}/*image1*/}

@-webkit-keyframes animation_slide {
0% {left:0}
20%{left:0}/*image1*/

25%{left:-100%}
45%{left:-100%}/*image2*/

50%{left:-200%}
70%{left:-200%}/*image3*/

75%{left:-300%}/*image4*/
95%{left:-300%}

100%{left:-400%}/*image1*/}

/* -----------Fin de l'animation des images défilantes du bandeau du haut ----------------- */



/* Principales propriétés de texte */
h1{
	font-size: 300%;
	margin-top: 10px;
	font-family: book antiqua;
}

h2{
	text-align: center;
	font-size: 200%;
	margin-top: 30px;
	margin-bottom: 30px;
	font-family: book antiqua;
}

h3{
	font-size: 180%;
	margin-bottom: 5px;
	font-family: book antiqua;
}

h4{
	font-size: 140%;
	margin-bottom: 5px;
	font-family: book antiqua;
}

p{
	font-size: 120%;
	text-align: justify;
	font-family: book antiqua;
}


.center /* <span class="center"> */
{ 
	text-align: center;
}

.justify /* <span class="justify"> */
{ 
	text-align: justify;
}


.liste_espacement_20px /*  */
{
	margin-top: 20px;
	margin-bottom: 20px;	
}


.police12pt /* <span class="police12pt"> */
{ 
	font-size: 12pt;
	font-family: Arial, Helvetica, sans-serif;
}

.police14pt /* <span class="police14pt"> */
{ 
	font-size: 14pt;
	font-family: book antiqua;
}

.bleu /* <span class="bleu"> */
{ 
	color: blue;
}

.jaune /* <span class="jaune"> */
{ 
	color: yellow;
}

.orange /* <span class="orange"> */
{ 
	color: orange;
}

.rouge /* <span class="rouge"> */
{ 
	color: red;
}

.vert /* <span class="vert"> */
{ 
	color: green;
}

ol{
	font-size: 120%;
	font-family: book antiqua;
	text-align: justify;
}

a:hover{
   color: red;
}




/* Gestion des images */
img.centrer { /* <img class="centrer" : Pour centrer les images */
	display: block;
	margin: 0 auto;
}

img{
   max-width: 100%;

}


*{box-sizing: border-box }



/* Propriétés des tableaux de présentation des espèces */

#tableaux_especes {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#tableaux_especes td, #tableaux_especes th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tableaux_especes tr:nth-child(even){background-color: #f2f2f2;}

#tableaux_especes tr:hover {background-color: #ddd;}

#tableaux_especes th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

td.center{ /* class="center" */
	text-align: center;
}


/* Précédentes propriétés de tableaux
table {
      border-collapse: collapse;
}
*/


/* ------------------------ Propriétés du bloc Galerie --------------- */
div#galerie
{
  width: 810px ;
  background: #eed 
  border: 0px solid #dcb 
  padding: 15px ;
  margin: 15px 30px ;
  text-align: center ;
  font: 0.9em Georgia, serif ;
}

ul#galerie_mini
{
  margin: 0 ;
  padding: 0 ;
  list-style-type: none ;
}

ul#galerie_mini li
{
  float: left ;
}

ul#galerie_mini li a img
{
  margin: 2px 1px ;
  border: 0px solid #dcb 
}

/* ------------------------ Fin des propriétés du bloc Galerie --------------- */

/* ------------------------ Propriétés rattachées au bloc Galerie --------------- */

dl#photo
{
  clear: both ;
  margin: 0 auto ;
}

dl#photo dt
{
  font: italic 2.5em/1.5em Georgia, serif ;
  color: #dcb ;
}

dl#photo dd
{
  margin: 0 ;
}

dl#photo img
{
  border: 0px solid #dcb 
}
/* ------------------------ Fin des propriétés rattachées au bloc Galerie --------------- */




/* ----------------------------carrousel 3d avec navigation ------------------------ */

.caroussel_diapo input{
	position: absolute;
	left: -9999px
}

.caroussel_diapo{
	position: relative;
	text-align: center;
	margin: 0 auto
}

.contenu_carou {
	width: 500px;
	height: 332px;
	perspective: 4000px
}

.caroussel{
	transform-style: preserve-3d;
	position: relative;
	width: 500px;
	height: 332px;
	transition: 1s
	}

.caroussel img {
	position: absolute;
	top: 0;
	left: 0;
	outline: 1px solid transparent;
	backface-visibility: hidden;
	transition: 1s
	}

.caroussel img{
	filter: blur(3px);-------------------------------------------
opacity: .8
}	

.caroussel img:nth-child(1){transform:translate3d(0,0,540px) scale(.8)}
.caroussel img:nth-child(2){transform:rotateY(45deg) translateZ(540px) scale(.8)}
.caroussel img:nth-child(3){transform:rotateY(90deg) translateZ(540px) scale(.8)}
.caroussel img:nth-child(4){transform:rotateY(135deg) translateZ(540px) scale(.8)}
.caroussel img:nth-child(5){transform:rotateY(180deg) translateZ(540px) scale(.8)}
.caroussel img:nth-child(6){transform:rotateY(225deg) translateZ(540px) scale(.8)}
.caroussel img:nth-child(7){transform:rotateY(270deg) translateZ(540px) scale(.8)}
.caroussel img:nth-child(8){transform:rotateY(315deg) translateZ(540px) scale(.8)}

.caroussel_diapo input[type=radio] + label {
	cursor:pointer;
	background:hsl(203,77%,81%);
	display:inline-block;
	width:20px;
	border-radius:50%;
	height:20px
}
	
.caroussel_diapo input[type=radio]:checked + label{
	background:hsl(203,77%,61%)
}

.caroussel_diapo label{
background:hsl(203,77%,61%)
}

.caroussel_diapo input[name="rotation"]:checked ~ .contenu_carou .caroussel img:nth-child(n){
	filter: drop-shadow(12px 12px 7px hsla(0,0%,0%,.5))
}	

/*gauche*/
.caroussel_diapo #carou_un:checked ~ .contenu_carou .caroussel{transform:translateZ(-540px)}
.caroussel_diapo #carou_deux:checked ~ .contenu_carou .caroussel{transform:translateZ(-540px) rotateY(-45deg)}
.caroussel_diapo #carou_trois:checked ~ .contenu_carou .caroussel{transform:translateZ(-540px) rotateY(-90deg)}
.caroussel_diapo #carou_quatre:checked ~ .contenu_carou .caroussel{transform:translateZ(-540px) rotateY(-135deg)}
.caroussel_diapo #carou_cinq:checked ~ .contenu_carou .caroussel{transform:translateZ(-540px) rotateY(-180deg)}
.caroussel_diapo #carou_six:checked ~ .contenu_carou .caroussel{transform:translateZ(-540px) rotateY(-225deg)}
.caroussel_diapo #carou_sept:checked ~ .contenu_carou .caroussel{transform:translateZ(-540px) rotateY(-270deg)}
.caroussel_diapo #carou_huit:checked ~ .contenu_carou .caroussel{transform:translateZ(-540px) rotateY(-315deg)}


/*droite*/
.caroussel_diapo #carou_un:checked ~ .contenu_carou .caroussel img:nth-child(1){transform:translateZ(540px) scale(1);opacity:1}
.caroussel_diapo #carou_deux:checked ~ .contenu_carou .caroussel img:nth-child(2){transform:rotateY(45deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo #carou_trois:checked ~ .contenu_carou .caroussel img:nth-child(3){transform:rotateY(90deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo #carou_quatre:checked ~ .contenu_carou .caroussel img:nth-child(4){transform:rotateY(135deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo #carou_cinq:checked ~ .contenu_carou .caroussel img:nth-child(5){transform:rotateY(180deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo #carou_six:checked ~ .contenu_carou .caroussel img:nth-child(6){transform:rotateY(225deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo #carou_sept:checked ~ .contenu_carou .caroussel img:nth-child(7){transform:rotateY(270deg) translateZ(540px) scale(1);opacity:1}
.caroussel_diapo #carou_huit:checked ~ .contenu_carou .caroussel img:nth-child(8){transform:rotateY(315deg) translateZ(540px) scale(1);opacity:1}


*{box-sizing: border-box}

img{max-width: 100%}

input[type=radio]{
	position: absolute;
	left: -9999px
}/*on cache tous les input*/
	
.slider-input label{
	cursor:pointer/*on pointe tous les labels*/
}

.slider-input{
	overflow: hidden;
	position: relative;
	max-width: 600px;
	margin: 2rem auto
}

.photos-mini{
	padding-top: 66.67%;/* il s'agit du ratio pour le responsive*/
	display: flex;
}

.miniature{
	flex: 1; /*les photos occupent la même place selon la largeur du conteneur*/
	padding:.25rem;
}

.fenetre{/*grande photo*/
	position: absolute;
	top: 0;
	left: 0;
	transition:transform .6s,opacity .6s;
	transform:translatex(-100%);
	opacity: 0
	}

.fen:checked~ .fenetre{
	transform:translatex(0%);
	opacity: 1
}

.figcaption{/*optionnel*/
	position: absolute;
	top: 0;
	left: 0;
	padding: .25rem;
	transition: opacity .4s;
	opacity: 0;
	display: flex;
	justify-content: center;
	color: white;
	background: hsla(0,0%,0%,.8)
}

.fen:checked~.figcaption{
	opacity: 1
}





/*
article0 {
      display: block;
		margin-left: 7%;     
		background-color: white;
		font-family: book antiqua
		font-size: 1000%;
		width: 86%;
}


article4 {
	display: block;
	margin-left: 4%;
	margin-right: 4%;
	margin-top: 4%;
	background-color: white;
}
*/


/* ---------------------------- animation photos haut de pages ------------------------ */

*{box-sizing:border-box}
	


	
		
.cadre-slideshow-grid{
	

width: 100%;
margin: 2rem auto;
background-color: grey;
list-style-type: none;
padding:0;
margin:0;
	}	


	

.slideshow-grid{
	 
  display: grid;
  list-style-type: none;
padding:0;
margin:0;
}

.slideshow-grid li {

border: 10px solid white
box-shadow:0 0 10px rgba(0, 0, 0, 0.2);
grid-column: 1;
grid-row: 1;
opacity: 0;
animation: slide 9s linear infinite;
	
}

	.slideshow-grid li img{width:100%}
	
.slideshow-grid li:nth-child(2)	{
	
	animation-delay: 3s
	
	}
	
.slideshow-grid li:nth-child(3)	{
	
	animation-delay: 6s
	
	}
	
@keyframes slide{

0%{

opacity: 0;

}

12%{

opacity: 1;


}

25%{

opacity: 1;


}

37% {

opacity: 0;


}

100% {

opacity: 0;

}

}

/* ---------------------------- galerie photo ------------------------ */
.milieu{
	margin-left: 15%;
	margin-right: 15%;
}

.mySlides {
        display: none;
      }
      img {
        vertical-align: middle;
      }
      .slideshow-container {
        max-width: 1000px;
        position: relative;
        margin: auto;
      }
      /* Boutons next & previous */
      .prev,
      .next {
        cursor: pointer;
        position: absolute;
        top: 26vw;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
	background-color: rgba(0, 0, 0, 1.0);
      }
      /* Position de "next button" à la droite */
      .next {
        right: 10px;
        border-radius: 3px 0 0 3px;
      }
      .prev {
	left: 10px;
	border-radius: 3px 0 0 3px;
      }
      /* En survol, ajoutez la couleur noire de l'arrière-plan avec un peu see-through */
      .prev:hover,
      .next:hover {
	font-size: 30px;
      }
      
	 .text {
        color: #ffffff;
        font-size: 220%;
        padding: 8px 12px;
        position: absolute;
        top: 5%;
		right: 27%;
        width: 100%;
        text-align: center;
      }
	  
      /* The dots/bullets/indicators */
      .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #999999;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
      }
      .active,
      .dot:hover {
        background-color: #999999;
      }
      
      @-webkit-keyframes fade {
        from {
          opacity: 0.4;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes fade {
        from {
          opacity: 0.4;
        }
        to {
          opacity: 1;
        }
      }
      /* On smaller screens, decrease text size */
      @media only screen and (max-width: 300px) {
        .prev,
        .next,
        .text {
          font-size: 11px;
        }
      }
      .modal {
        display: none;
        position: fixed;
        z-index: 110;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
      }
      .modal-content {
        margin: 50px auto;
        border: none;
        width: 60%;
      }
      
      .close {
	z-index: 110;
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
	width: 30px;
	text-align: center;
	background-color: rgba(0, 0, 0, 1.0);
      }
      .close:hover,
      .close:focus {
     	color: grey;
        text-decoration: none;
        cursor: pointer;
      }
      button.button {
        background: none;
        border-top: none;
	border-bottom: none;
        outline: none;
        border-right: none;
        border-left: none;
        padding: 0 0 3px 0;
        font-size: 16px;
        cursor: pointer;
      }
      button.button:hover {
        color: red;
      }
      td {
	width: 25%;
      }