/* Style général */
*{
	margin:1px;
	padding:0px;
}
.entete
{
    display: flex;
    flex-direction: row;
    background-image: url("../images/IMG_20221207_175504.jpg");
    align-items: center;
    background-position: center;
    background-attachment: fixed;
	/* background-size: cover; */
	height: 20%;
	overflow: hidden;
}
.EnTete2
{
    display: flex;
    flex-direction: column;
    width: 70%;
	margin-top: 0px;
	padding: 0px;
	margin: 0;
}
.EnTete2 h1
{  
    font-size: 80px;
    color: rgb(199, 180, 70);
    font-weight: bold;
	text-align: center;
	text-shadow: 3px 3px rgba(255,255,255,0.2);
	margin: 0px;
}
.EnTete2 h2
{
	font-size: 60px;
    color: #c7b446;
    font-weight: bold;
	text-align: right;
	text-shadow: 3px 3px rgba(255,255,255,0.2);
	margin: 0px;
	padding: 0px;
	margin-right: 10px;
}
.EnTete2 p
{
    font-size: 30px;
    font-weight: bold;
    color: #f8f8f4;
	text-align: center;
}
.Slogan
{
	font-size: 40px;
	text-align: center;
	color: #f8f8f4;
}
.EnTete1
{
	width: 30%;
}
.EnTete1 img
{
    display: flex;
    width:50%;
    border-radius: 50%;
    margin: 20px;
    padding: 0px;
	border: #c7b446 5px solid;
	/* animation: rotation 5s ease 0s 1 normal none;
	animation: Blink 2s ease 5s 5 normal none; */
	animation: swirl 6s ease 0s 1 normal none;
}	
  @keyframes slidein {
	from {
	  margin-top: 400px;
	}
	50% {
	  margin-top: 200px;

	}
  
	to {
	  margin-top: 0%;

	}
  }
  @keyframes rotation {
		0% {
		  transform: rotate(0);
		}
		100% {
		  transform: rotate(360deg);
		}
}
@keyframes Blink {
  0% {
	opacity: 1;
  }
  50% {
	opacity: 0.2;
  }
  100% {
	opacity: 1;
  }
}
@keyframes swirl {
  0% {
	opacity: 0;
	transform : rotate(-540deg) scale(0);
  	}
  100% {
	opacity: 1;transform: rotate(0) scale(1);
  }
}  
footer
{
	display: flex;
	flex-direction: row;
	background-color: #c7b446;
	padding: 5px;
	justify-content: center;
}
body
{
	margin:0px;
	padding:0px;
	width:100%;
	font-family:Calibri;
	font-size:13px;
	color:#666666;
	background-color: #fff;
}
h1
{
	font-size:30px;
	font-weight:bold;
	margin-bottom:10px;
	color: #c7b446;
	animation-duration: 5s;
	animation-name: slidein;
}
/* Page index */
.News
{
	padding: 0px;
	font-size: 20px;
	font-weight: bold;
	color: rgb(199,180,70);
	background: linear-gradient(to right, #718caf, #17375e);
	margin: 0px;
}
h2
{
	font-size:18px;
	font-weight:bold;
	/*margin-bottom:5px;*/
}
img
{
	margin-top:5px;
	margin-bottom:5px;
	width:100px;
	text-decoration:none;
}
.Diaporama
{
	display: flex;
	flex-direction: column;
	/* align-items: center; */
}
.BtnDep
{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: -330px;
}
#precedent
{
	width:100px;
	height:100px;
	margin-left:-50px;
	z-index:3;
}

#precedent:hover
{
	cursor:pointer;
}

#centre
{
	display: flex;
	flex-direction: column;
	height: 580px;
	justify-content: space-between;
	margin-left: -60px;
	margin-top: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#barre
{
	height:100%;
	margin-top: 200px;
	margin-right: 20px;
}
#Lancer
{
	background: linear-gradient( rgb(64, 147, 78), rgb(9, 212, 104));
	margin-bottom:5px;
	border-color: #c7b446;
}
#Arreter
{
	background: linear-gradient( rgb(237, 78, 78), #f10c0c);
	margin-top:5px;
	border-color: #c7b446;
}
#suivant
{
	width:100px;
	height:100px;
	margin-right: -50px;
	z-index:2;
}

#suivant:hover
{
	cursor:pointer;
}
#nomdutableau
{
	width: 400px;
	height: 40px;
	border-radius: 5px;
	background-color: rgba(199,180,70,.7);
	margin-top: 150px;
	z-index: 100;
	font-size: 1.5em;
	font-weight: bold;
	color: #17375e;
	padding-top: 10px;
	margin-left: 90px;
}
#album
{
	width:580px;
	height:580px;
	border:#c7b446 2px solid;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 20px;
}
.masquer
{
	opacity: 0;
	transition: 1s ease;
}
.afficher
{
	opacity:100;
	transition: 1s ease;
}
.texte_photo
{
	border-color: #c7b646;
	border: 3px solid;
	z-index:10;
	width:20%;
	top:15px;
	height:580px;
	padding-top:8px;
	overflow:hidden;
	background:linear-gradient(to right, #718caf, #17375e);
	font-size:16px;
	color:#c7b446;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}
.texte_photo h3
{
	font-size: 20px;
	text-align: center;
	font-weight: bold;
}
.miniature
{

	z-index:4;	
}

.img_miniature
{
	width:67px;
	height:67px;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	border:#c7b446 1px solid;
	box-shadow: 2px 2px 0px #aaa;
}

.img_miniature
{
	cursor:pointer;
}

.div_conteneur_parent
{
	display: flex;
	flex-direction: row;
	width:100%;
	height:auto;
	text-align:center;
	margin-top:0px;
	justify-content: space-between;

}
.CV{
	border-radius: 10px;
	border: solid 3px; 
	border-color:#c7b646;
	margin-left: 10px;
	margin-top: 0px;
	width:20%;
	text-align:left;
	font-size: large;
	height:580px;
	display:inline-block;
	background: linear-gradient(to right, #718caf, #17375e);
}
.CV h3
{
	text-align: center;
	padding: 5px;
	color: #c7b446;
	font-size: 40px;
	text-shadow: 1px 1px rgba(255,255,255,0.3);
}
.CV p
{
	padding: 7px;
	color: #c7b446;
	font-weight: bold;
}
.CV li
{
	color: #c7b446;
	margin-left: 25px;
	font-size: 14px;
	margin-right: 5px;
}
.CV1{
	border-radius: 10px;
	border: solid 3px; 
	border-color:#c7b646;
	margin-left: 5px;
	margin-top: 0px;
	width:20%;
	text-align:left;
	font-size: large;
	height:80%;
	display:inline-block;
	background: linear-gradient(to right, #718caf, #17375e);
}
.CV1 h3
{
	text-align: center;
	padding: 3px;
	color: #c7b446;
	font-size: 10px;
	text-shadow: 1px 1px rgba(255,255,255,0.3);
}
.CV1 p
{
	padding: 2px;
	color: #c7b446;
	font-weight: bold;
	font-size:8px;
}
.CV1 li
{
	color: #c7b446;
	margin-left: 5px;
	font-size: 7px;
	margin-right: 2px;
}

/* page contact */
input
{
	width:60px;
	height:60px;
	/*Coins arrondis*/
	border:#c7b446 1px solid;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 50px;
	text-align:center;
	font-size:15px;
	background-color:#fff;
	color:#7030a0;
	font-weight:bold;
	text-decoration:none;
}

input[type="button"]
{
     color: #EDEEEE;
	 font-weight:bold;
     background:#c7b446;
     background: linear-gradient(#c7b446, #c7b646);
	 text-shadow: 0px 1px 0px white;
	 text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.5);
     box-shadow: 0 0 10px rgba( 0, 0, 0, 0.6),
                 0 -1px 0 rgba( 255, 255, 255, 1);
	text-decoration:none;
	background:rgba(199,180,70,.8);	
}

input[type="button"]:hover
{
	cursor:pointer;
	box-shadow: 2px 2px 0px #aaa;
}
#GTitre
{
	width:auto;
	display:block;
	height:50px;
	text-align:center;
	
    color: #EDEEEE;
	font-weight:bold;
    
	background: linear-gradient(to right, #718caf, #17375e);
	text-shadow: 0px 1px 0px white;
	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.4);
    box-shadow: 0 0 10px rgba( 0, 0, 0, 0.8),
                 0 -1px 0 rgba( 255, 255, 255, 0.6);	
	
	padding-top: 5px;
	box-shadow: 6px 6px 0px #aaa;
	color: #EDEEEE;
}
#GTitre h2{
	color: #c7b446;
	font-size: 40px;
	font-weight: bold;
	text-shadow: 2px 2px rgba(255,255,255,0.3);
}
#conteneur_contact
{
	display: flex;
	flex-direction: row;
	
}
#expedition
{
	border:#c7b446 3px solid;
	width: 400px;
	height: 400px;
	padding: 20px;
	background: linear-gradient(to right, #577fb3, #17375e);
	border-radius: 10px;
	color: #c7b446;
	font-weight: bold;
	font-size: 20px;
}
#expedition h3
{
	font-size: 30px;
}
#civilite
{
	border-radius: 5px;
    padding: 10px;
    border: none;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
	height: 40px;
	font-size: 15px;
	color:#7030a0;
	background-color: #fff;
	text-decoration: none;
	font-weight: bold;
}
#contact
{
    display: flex;
    flex-direction: column;
	align-items: center;
    width: 50%;
    border: none;
    border-radius: 10px;
    padding:10px;
    background: linear-gradient(to right, #718caf, #17375e);
	margin-left: 150px;
	margin-bottom: 10px;
	border:#c7b446 3px solid;
	margin-right: 10px;
 }
#identite
{
	display: flex;
	flex-direction: row;
	text-align: center;
	justify-content: space-between;
	width: 92%;
	margin-left: 0px;
	margin-right: 0px;
}
.Identity
{
	display: flex;
	flex-direction: column;
	padding: 0px;
	width: 30%;
	margin: 0px;
	align-items: center;
}
#contact input
{
    border-radius: 5px;
    padding: 10px;
    border: none;
    width: 90%;
    margin-left: 10px;
    margin-right: 10px;
	height: 20px;
}
#contact label
{
    color: #c7b446;
    font-weight: bold;
	text-align: center;
	font-size: 20px;
}
#contact textarea
{
    border-radius: 10px;
    padding: 10px;
    border: none;
    width: 90%;
	margin-left: 10px;
    margin-right: 10px;
	height: 80px;
}
#contact #Envoyer
{
    background-color: #c7b446;
    font-weight: bold;
    font-size: large;
    color: #17375e;
    width: 50%;
    text-align:  center;
	height: 40px;
}


/* Navigation */
a:link {
    color:#EDEEEE;
	text-decoration:none;
}
a:visited {
    color:#EDEEEE;
	text-decoration:none;
}
a:hover {
    color:#EDEEEE;
	text-decoration:none;
}
a:active {
    color:#EDEEEE;
	text-decoration:none;
}
.Navigation
{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0px;
	margin: 5px 5px 5px 5px;	
}
.Navigation ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Force anchor tags inside to behave like buttons */
.Navigation ul a {
  display: inline-block;
  padding: 10px 15px;
  background-color: #c7b446;
  color: #17375e;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  text-decoration: none;
  min-width: 150px;
}
#ancres a
{
	width: 85px;
	background: none;
	text-decoration: underline;
	font-size: 13px;
}
/* Page tableaux */
#Gtitre
{
	width:100%;
	margin: 10px;
}
.conteneur_tableaux h3
{
	font-size: 2em;
	color: #c7b446;
	background: linear-gradient(to right,#718caf,#17365e);
	text-align: center;
	padding: 5px;
}
.palette
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* width: 1330px; */
	justify-content: flex-start;
}
.cadre_image
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 150px; 
	height: 150px;
	background: #141533;
	border: #c7b446 3px solid;
	border-radius: 10px;

}
.image
{
	display: flex;
	flex-direction: row;
	align-items:flex-end;
	padding: 10px;
	margin-bottom: 0px;
}
.cadre_image img
{
	/* width: 200px;	
	height: 150px; */
	border: #c7b446 3px solid;
	cursor: pointer;
	max-height: 140px;
}
.texte
{
	width: 80px;
	font-size: 11px;
	/* font-weight: bold; */
	color: #17375e;
	padding: 3px;
}
.prixtab
{
	font-size: 15px;
	font-weight: bold;
}
.nomtab
{
	font-size: 15px;
	font-weight: bold;
}
.mes_tableaux
{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.mes_tableaux .Navigation
{
	margin-top: 70px;
}
.cadre_image img:hover
{
	transform: scale(2);
	/* animation: Blink 2s ease 0s 5 normal none; */
}

.liens 
{
	display: flex;
	flex-direction: row;
	margin-left: 5px;
	margin-right: 5px;
}
.liens a
{
	margin-top: 15px;
	font-size: 15px;
	font-weight: bold;
	color:#17375e;
	margin-right: 25px;
}
.CopyRight p
{
	margin-top: 10px;
	margin-left: 20px;
	font-size: 20px;
	font-weight: bold;
	color: #17365e;
	margin-right: 20px;
}
.liens img
{
	width: 30px;
	height: 30px;
	margin: 5px;
	margin-right: 5px;
}
.Affichage
{
	width: 50%;
	height: 50px;
	border-radius: 10px;
	border: #c7b446 3px solid;
	margin-top: 10px;
	margin-left: 305px;
	margin-bottom: 10px;
	text-align: center;
	color: #17375e;
	font-size: 1.5em;
	font-weight: bold;
}
/* Articles */
.all-browsers {
	margin: 0;
	padding: 5px;
	background : linear-gradient(to right,#718caf,#17365e);
  }
  
  .all-browsers > .browser {
	margin: 10px;
	padding: 5px;
  }
  
    .browser {
        background: white;
        height: 300px;
        width: 400px;
        border-radius: 10px;
        border: #c7b446 3px solid;
        padding: 10px;
        overflow-y: auto;
        scroll-snap-align: start;
        flex: 0 0 auto;
    }

.all-browsers h2
  {
	color: #c7b446;
	font-size: 2em;
  }
  .browser h3
  {
	color: #17375e;
	font-weight: bold;
	font-size: 1.5em;
  }
  .browser > p {
	margin: 4px;
	font-size: 100%;
  }
  #articles
  {
	
	text-align: center;
	font-size: 3em;
	color: #c7b446;
	font-weight: bold;
  }
.conteneur_articles {
    display: flex;
    flex-direction: row;
    padding: 10px;
    background: linear-gradient(to right, #718caf, #17365e);
    justify-content: flex-start; /* Changez de space-around à flex-start */
    overflow-x: auto; /* Ajout de la barre de défilement horizontale */
    scroll-snap-type: x mandatory; /* Permet le défilement par "snap" */
}
#titre_article
{
	display: flex;
	flex-direction: row;
	background : linear-gradient(to right,#718caf,#17365e);
	justify-content: space-evenly;
	padding-top: 5px;
}
#titre_article img
{
	width: 40px;
	height: 40px;
	cursor: pointer;
}
/* Pages Base */
#titre_tableau
{
	background: #17375e;
	border: #c7b446 3px solid;
	color: #c7b446;
	font-weight: bold;
	font-size: 15px;
}
#titre_tableau th
{
	padding: 10px;
}
.ligne td
{
	border: #c7b446 1px solid;
	color: #17375e;
	font-weight: bold;
}
#conteneur_base
{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
}
#modif_base
{
	border: #c7b446 3px solid;;
	border-radius: 10px;
	background: #17375e;
	width: 600px;
	margin-top: 10px;
	padding: 10px;
	height: 250px;
}
#modif_base input, #change_image input
{
	width: 200px;
	border-radius: 5px;
	border: #c7b446 3px solid;
	margin: 5px;
	height: 30px;
}
#modif_base label, #change_image label
{
	color: #c7b446;
	font-weight: bold;
	font-size: 17px;
	width: 70px;
}
#soumettre
{
	background-color: #c7b446;
	color: #17375e;
	font-weight: bold;
}
#change_image
{
	border: #c7b446 3px solid;;
	border-radius: 10px;
	background: #17375e;
	width: 600px;
	margin-top: 10px;
	padding: 10px;
	height: 100px;
}

@media screen and (max-width: 768px) {
  .div_conteneur_parent {
    flex-direction: column;
    align-items: center;
  }

  .CV,
  .texte_photo {
    width: 90% !important;
    height: auto;
    margin: 10px 0;
  }

  #centre {
    margin: 0;
    padding: 0;
    width: 90%;
    align-items: center;
  }

  #album {
    width: 100% !important;
    height: auto !important;
  }

  .BtnDep {
    margin-top: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  #barre {
    margin-top: 20px;
    margin-right: 0;
  }

  #nomdutableau {
    width: 90% !important;
    margin: 20px auto 10px auto;
    text-align: center;
  }

  #precedent,
  #suivant {
    width: 60px;
    height: 60px;
    margin: 0 10px;
  }
}

@media screen and (max-width: 768px) {
  #barre {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }

  #barre > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  #barre input {
    width: 60px;
    height: 60px;
    font-size: 12px;
    text-align: center;
  }

  #minutage {
    width: 60px;
    height: 60px;
    font-size: 18px;
    font-weight: bold;
    color: #17375e;
    background-color: #ffffff;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }
}

@media screen and (max-width: 768px) {
  #barre {
    background-color: rgb(253, 253, 253) !important;
  }

  #barre > div {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #barre input {
    background-color: green !important;
    width: 60px !important;
    height: 60px !important;
    font-size: 12px !important;
  }
}

@media screen and (max-width: 768px) {
  body, html {
    overflow-x: hidden !important;
    width: 100vw;
  }

  .EnTete2 h1,
  .EnTete2 h2,
  .Slogan {
    font-size: 7vw; /* Scales the large header text */
    word-break: break-word;
    text-align: center;
  }

  .EnTete2 {
    width: 100% !important;
    padding: 0 5px;
  }

  .EnTete1 {
    width: 100% !important;
    display: flex;
    justify-content: center;
  }

  .EnTete1 img {
    width: 100px;
    margin: 10px;
  }

  .entete {
    flex-direction: column;
    height: auto;
    background-size: cover;
    background-position: center;
  }

  .Navigation ul a {
    width: auto;
    max-width: 90vw;
    font-size: 4vw;
  }

  .Navigation {
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 768px) {
  .Navigation ul {
    flex-direction: column;
    align-items: center;
  }

  .Navigation ul a {
    width: 80%;
    font-size: 4vw;
  }
}

/* Ajout de styles pour le défilement horizontal sur mobile */
@media screen and (max-width: 768px) {
    .conteneur_articles {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Active le défilement tactile fluide sur iOS */
    }
}