/* Palette de couleur
CSS HEX 
--persian-pink: #f9f6f3; beige: #f0e9e0;
--light-cyan: #f0e9e0; creme: #f9f6f3;
--silver-chalice: #d4ae44; jaune: #d4ae44;
--white: #FEFEFEff; jaune foncé: #ba9539;
--black: #000000ff;*/

/* ======================================================
   RESET / BASE RESPONSIVE
   (remplace l'ancien hack "width:2000px + transform:scale()")
   ====================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
}

body
{
	margin: 0;
	background-color:#f9f6f3;
	background-size: 100% 100%;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

/* Toute image devient fluide par défaut : elle ne dépasse jamais son
   conteneur, quelle que soit la taille de l'écran. */
img {
	max-width: 100%;
	height: auto;
}

p
{
	color: #000000ff;
	text-align: center;
	font-family: 'Dancing Script', cursive;
	font-size: clamp(16px, 2.2vw, 20px);
}

.Box
{
	color: #d4ae44;
	text-align: center;
	font-family: 'Dancing Script', cursive;
	font-size: clamp(16px, 2.2vw, 20px);
	float:center;
	
}

.Boxform
{
	color: #d4ae44;
	text-align: center;
	font-family: 'Dancing Script', cursive;
	font-size: clamp(20px, 3vw, 30px);
	float:center;
	/*text-shadow: 3px 3px 6px black;*/
	border : 3px inset yellow;  /* solid, dotted, dashed, double, groove, ridge, inset, outset*/
    	border-radius: 10px;
    	margin-bottom:10px;
    	margin-left: clamp(10px, 30%, 400px);
    	margin-right: clamp(10px, 30%, 400px);
}

.bouton
{
	margin-top:10px;	
	color: #000000ff;
	font-family: 'Dancing Script', cursive;
	font-size: clamp(16px, 2.2vw, 20px);
	float:center;
}

.proflulu
{
	display:flex;
	flex-wrap: wrap;
	align-content:center;
	justify-content:left;
	align-items: center;
	margin-left:5%;
}

.proftiti
{
	clear:left;
	display:flex;
	flex-wrap: wrap;
	align-content:center;
	justify-content:right;
	align-items: center;
	margin-right:5%;
}

@media (max-width: 700px) {
	.proflulu,
	.proftiti {
		justify-content: center;
		margin-left: 0;
		margin-right: 0;
	}
}

a
{
	color: #000000ff;
	text-align: center;
	font-family: 'Dancing Script', cursive;
	text-decoration:none;
}

a:hover
{
	color: #000000ff;
	text-align: center;
	font-family: 'Dancing Script', cursive;
	text-decoration:none;
	font-weight : bold;
}


.lienmail
{
	color: #000000ff;
	font-size: clamp(18px, 3vw, 25px);
	text-align: center;
	font-family: 'Dancing Script', cursive;
	text-decoration:underline;
	text-shadow:5px 5px 10px #f9f6f3;
}

.lienmail:hover
{
	color: #000000ff;
	font-size: clamp(20px, 3.3vw, 28px);
	text-align: center;
	font-family: 'Dancing Script', cursive;
	text-decoration:underline;
}

.lienaccueil
{
	display: inline-block;
	color: #000000ff;
	font-size: clamp(24px, 5vw, 40px);
	text-align: center;
	font-family: 'Dancing Script', cursive;
	text-decoration:none;
	border : 5px ridge #d4ae44;  /* solid, dotted, dashed, double, groove, ridge, inset, outset*/
    	border-radius: 10px 0px;
	padding:10px;
	text-shadow:3px 3px 6px #d4ae44;
	box-shadow: 0px 0px 30px 10px #d4ae44;
	background : transparent;
	
}

.lienaccueil:hover
{
	color: #000000ff;
	font-size: clamp(24px, 5vw, 40px);
	text-align: center;
	font-family: 'Dancing Script', cursive;
	text-shadow:3px 3px 6px #f9f6f3;
	border : 6px groove #f9f6f3;  /* solid, dotted, dashed, double, groove, ridge, inset, outset*/
    	border-radius: 10px 0px;
	box-shadow: 0px 0px 30px 20px #f9f6f3;	
padding:10px;
	
}

ol
{
	color: blue;
	text-align: center;
}

li
{
	color: #000000ff;
	text-align: center;
}

h1
{
	font-family: 'Dancing Script', cursive;
	text-align: center;
	font-size: clamp(32px, 7vw, 60px);
	color: #d4ae44;
	/*text-shadow: 3px 3px 4px black;*/
}

h2
{
	font-family: 'Dancing Script', cursive;
	text-align: center;
	font-size: clamp(24px, 5vw, 40px);
	color: #ba9539;
	/*text-shadow: 3px 3px 4px black;*/
}

h3
{
	font-family: 'Dancing Script', cursive;
	text-align: center;
	font-size: clamp(20px, 4vw, 30px);
	color: #d4ae44;
	/*text-shadow: 3px 3px 4px black;*/
}

h4
{
	font-family: 'Dancing Script', cursive;
	text-align: center;
	font-size: clamp(18px, 3.5vw, 27px);
	color: #ba9539;
	text-shadow: 2px 2px 4px #f9f6f3;
}

header
{	
	width: 100%;
	margin: 0 0 10px 0;
	border-bottom : 2px outset #f9f6f3;
	background: linear-gradient(to right, #d4ae44, #f0e9e0, #f9f6f3, #f0e9e0, #d4ae44);
	background-size: 400% 400%;
	animation: animate-background 10s infinite ease-in-out;
}

@keyframes animate-background 
{
	0% {background-position:0 50%;}
	/*25% {background-position:20 80%;}*/
	50% {background-position:100% 50%;}
	/*75% {background-position:20 80%;}*/
	100% {background-position:0 50%;}
}

footer
{
	width: 100%;
	background: linear-gradient(to right, #d4ae44, #f0e9e0, #f9f6f3, #f0e9e0, #d4ae44);
	background-size: 400% 400%;
	animation: animate-background 10s infinite ease-in-out;
	margin: 50px 0 0 0;
	border-top : 1px outset #f0e9e0;
	clear:both;
	padding: 10px 10px;
	display:flex;
	flex-wrap: wrap;
	/*align-content:space-around;*/
	justify-content:center;
	align-items: center;
	gap: 12px;
}

/*MENU */

.menu
{
	display:flex;
	flex-wrap: wrap;
	/*direction flex-direction:row,column,row-reverse,column-reverse*/
	/*retour à la ligne flex-wrap:nowrap,wrap,wrap-reverse*/
	/*alignement sur axe principal*/justify-content:center;/*flex-start,flex-end,center,space-between,space-around*/
	/*alignement sur axe secondaire*/align-items: center;/*flex-start,flex-end,center,stretch,baseline*/
	/*comportement des éléments du bloc*/align-content:/*flex-start,flex-end,center,space-between,space-around,stretch*/
	text-decoration:none;
}

#onglets
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font : 25px "Impact";
    font-family: 'Dancing Script', cursive;
    font-weight : bold;
    list-style-type : none;
    margin: 0;
    padding-bottom : 0px; /* à modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */
    text-decoration:none;
}
    
#onglets li
{
    float: none;
    margin: clamp(4px, 1vw, 10px);
    padding: clamp(6px, 1.5vw, 10px);
    border : 3px outset #d4ae44;  /* solid, dotted, dashed, double, groove, ridge, inset, outset*/
    border-radius: 10px 0px;
    box-shadow: 5px 5px 5px #f9f6f3;
    text-align : center;
    text-decoration:none;
    font-size: clamp(16px, 2.6vw, 25px);
}

#onglets li:hover
{
    border : 3px inset #f0e9e0;
    box-shadow: 7px 7px 5px #f9f6f3;
    font-weight : bold;
    text-decoration:none;
   /* text-shadow: 3px 3px 10px #000000ff;*/
}

.image
{
	text-align : center ;
	margin:10px 10px -20px 10px;
	border : 3px inset #d4ae44;  /* solid, dotted, dashed, double, groove, ridge, inset, outset*/
    	border-radius: 6px;
}
.image:hover
{
	text-align : center ;
	margin:10px 10px -20px 10px;
	border : 4px outset #f9f6f3;  /* solid, dotted, dashed, double, groove, ridge, inset, outset*/
    	border-radius: 6px;
}

.logoaccueil
{
	padding:auto;
	border : 3px inset #d4ae44;  /* solid, dotted, dashed, double, groove, ridge, inset, outset*/
    	border-radius: 6px;	
    	
}

.logoaccueil:hover
{
	border : 4px outset #f0e9e0;  /* solid, dotted, dashed, double, groove, ridge, inset, outset*/
    	border-radius: 6px;
    		
}

.video
{
	text-align : center ;	
}

.video iframe {
	width: 100%;
	max-width: 560px;
	aspect-ratio: 16 / 9;
	height: auto;
}

.bigbox {
display: inline-block;
text-align : center ;
width: min(398px, 90vw);
height: auto;
aspect-ratio: 398 / 558;
transform-style:preserve-3d;
animation:rotate 10s linear infinite;
margin: 30px auto;
}

.smallbox {
display: flex;
flex-direction:column;
justify-content:center;
align-items: center;
align-content:center;/*flex-start,flex-end,center,space-between,space-around,stretch*/
width: 100%;
max-width: 375px;
height: auto;
min-height: 200px;
margin: 0 auto;
padding: 0px 10px 20px 10px;
}

#accueil
{
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items: center;	
}

.equipe
{	
	display:flex;
	flex-wrap: wrap;
	align-content:center;
	justify-content:center;
	align-items: flex-start;
	margin-left:auto;
	margin-right:auto;
	font-size: clamp(16px, 2.5vw, 25px);
}

.membre
{
width: 100%;
max-width: 380px;
display:flex;
justify-content:center;
align-items: center;
flex-direction:column;
}

.presentationequipe
{
text-align : justify;
margin: 6px 10px 6px 10px;
font-size: clamp(16px, 2.5vw, 25px);
}

.photomembre
{
	text-align : center ;
	margin: 6px 10px 6px 10px;
	
}

.photocours
{
	text-align : center ;
	margin: 6px 20px 6px 20px;
	
}


.presentation
{
	color: #000000ff;
	text-align: center;
	font-family: 'Dancing Script', cursive;
	font-size: clamp(16px, 2.5vw, 25px);
	padding: 5px clamp(15px, 8vw, 200px);
}
.warning
{
	color: #000000ff;
	text-align: center;
	font-family: 'Dancing Script', cursive;
	font-size: clamp(28px, 6vw, 50px);
	padding: clamp(25px, 8vw, 65px) clamp(15px, 8vw, 200px) 5px clamp(15px, 8vw, 200px);
}
.cours
{
	color: #000000ff;
	text-align: center;
	font-family: 'Dancing Script', cursive;
	font-size: clamp(16px, 2.5vw, 25px);
	padding: 5px clamp(15px, 8vw, 200px);
}
.photopresentation
{
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items: center;
}
.photostudio
{
	display:flex;
	justify-content:center;
	align-items: center;
	align-content:center;
	margin: auto;
	width: 100%;
	max-width: 512px ;
	height: auto;
	aspect-ratio: 512 / 327;
}
.photoequipe
{
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items: center;
	align-content:center;
	margin: auto;
	
}
/*Citation */

.citation
{
	clear:both;
	/*text-shadow: 5px 5px 5px black;*/
	font-family: 'Dancing Script', cursive;
	font-weight: bold;
	font-size: clamp(18px, 3vw, 25px);
	color: #000000ff;
	/*background: white;*/
	text-align: center;
	padding-top:10px;
	padding-bottom:10px;
	padding-left: clamp(20px, 15vw, 350px);
	padding-right: clamp(20px, 15vw, 350px);
	border-radius: 10px;
}


/* Gallerie d'accueil */

.gallery
{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-top: clamp(40px, 8vw, 100px);
	margin-bottom: clamp(50px, 10vw, 120px);
	width: min(230px, 55vw);
	height: min(346px, 82vw);
	transform-style:preserve-3d;
	animation:rotate 25s linear infinite;
}

@keyframes rotate
{
	from{transform:perspective(3200px) rotateY(0deg);}
	to{transform:perspective(3200px) rotateY(360deg);}
}

.gallery span
{
	position:absolute;
	width:100%;
	height:100%;
	transform-origin:center;
	transform-style:preserve-3d;
	transform:rotateY(calc(var(--i) * 45deg)) translateZ(min(350px, 82vw));
}

.gallery span img
{
	position:absolute;
	width:100%;
	height:100%;
	object-fit:cover;
}

.carousel {
  overflow: hidden;
  width: auto;
  margin: 0 auto;
  background: #f9f6f3;
}

.wrap {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(133px, 27vw, 333px);
  gap: 5px;
  justify-items: stretch;
  animation: slide 180s linear infinite;
}

.wrap img {
  width: clamp(133px, 27vw, 333px);
  height: clamp(200px, 40vw, 500px);
  border-radius: 10px;
 /* object-fit: cover; */
}

@keyframes slide {
  to {
    /* --slide-distance est calculée automatiquement par le JS :
       nombre d'images * largeur de colonne */
    transform: translateX(calc(-1 * var(--slide-distance)));
    }
  }