/* ======================================================
   PALETTE DE COULEURS — variables CSS
   Même palette que style_FH.css : changez les valeurs ici
   pour que les deux fichiers restent synchronisés.
⬜ Lavande très clair	#F7F0FF
🩷 Rose pastel	#FCD5FF	
🩵 Cyan très clair	#D0FBFF	
💜 Lilas clair	#DDD2FF	
🌸 Rose fuchsia clair	#FEADF1	
🟣 Mauve moyen	#AF98BA	
🟤 Bordeaux/rosé foncé	#874A50	
⬛ Violet très foncé #291930	
🟣 Violet gris	#75658D
🔴 Corail/rouge	 #EA6A6F


  --creme: #F7F0FF;
  --beige: #FCD5FF;
  --accent: #D0FBFF;
  --accent-fonce: #FEADF1;
  --noir: #000000;
  --blanc: #FEFEFE;

  --creme: #f9f6f3;
  --beige: #f0e9e0;
  --accent: #d4ae44;
  --accent-fonce: #ba9539;
  --noir: #000000;
  --blanc: #FEFEFE;
   ====================================================== */
:root {
  --creme: #F7F0FF;
  --beige: #FCD5FF;
  --accent: #D0FBFF;
  --accent-fonce: #FEADF1;
  --noir: #000000;
  --blanc: #FEFEFE;
  --titre1: #291930;
  --titre2: #75658D;
  --titre3: #AF98BA;
  --titre4: #874A50;
  --font-titre: 'Bilbo Swash Caps', cursive;
  --font-texte: 'Cormorant Garamond', serif;
}

/* ======================================================
   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:var(--creme);
	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: var(--noir);
	text-align: center;
	font-family: var(--font-texte);
	font-size: clamp(16px, 2.2vw, 20px);
}

.Box
{
	color: var(--accent);
	text-align: center;
	font-family: var(--font-titre);
	font-size: clamp(16px, 2.2vw, 20px);
	float:center;
	
}

.Boxform
{
	color: var(--accent);
	text-align: center;
	font-family: var(--font-titre);
	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: var(--noir);
	font-family: var(--font-titre);
	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: var(--noir);
	font-size: clamp(18px, 3vw, 25px);
	text-align: center;
	font-family: var(--font-texte);
	text-decoration:none;
}

a:hover
{
	color: var(--noir);
	font-size: clamp(18px, 3vw, 25px);
	text-align: center;
	font-family: var(--font-texte);
	text-decoration:none;
	font-weight : bold;
}


.lienmail
{
	color: var(--noir);
	font-size: clamp(18px, 3vw, 25px);
	text-align: center;
	font-family: var(--font-titre);
	text-decoration:underline;
	text-shadow:5px 5px 10px var(--creme);
}

.lienmail:hover
{
	color: var(--noir);
	font-size: clamp(20px, 3.3vw, 28px);
	text-align: center;
	font-family: var(--font-titre);
	text-decoration:underline;
}

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

.lienaccueil:hover
{
	color: var(--noir);
	font-size: clamp(24px, 5vw, 40px);
	text-align: center;
	font-family: var(--font-titre);
	text-shadow:3px 3px 6px var(--creme);
	border : 6px groove var(--creme);  /* solid, dotted, dashed, double, groove, ridge, inset, outset*/
    	border-radius: 10px 0px;
	box-shadow: 0px 0px 30px 20px var(--creme);	
padding:10px;
	
}

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

li
{
	color: var(--noir);
	text-align: center;
}

h1
{
	font-family: var(--font-titre);
	text-align: center;
	font-size: clamp(32px, 7vw, 60px);
	color: var(--titre1);
	/*text-shadow: 3px 3px 4px black;*/
}

h2
{
	font-family: var(--font-titre);
	text-align: center;
	font-size: clamp(24px, 5vw, 40px);
	color: var(--titre2);
	/*text-shadow: 3px 3px 4px black;*/
}

h3
{
	font-family: var(--font-titre);
	text-align: center;
	font-size: clamp(20px, 4vw, 30px);
	color: var(--titre3);
	/*text-shadow: 3px 3px 4px black;*/
}

h4
{
	font-family: var(--font-titre);
	text-align: center;
	font-size: clamp(18px, 3.5vw, 27px);
	color: var(--titre4);
	text-shadow: 2px 2px 4px var(--creme);
}

header
{	
	width: 100%;
	margin: 0 0 10px 0;
	border-bottom : 2px outset var(--creme);
	background: linear-gradient(to right, var(--accent), var(--beige), var(--creme), var(--beige), var(--accent));
	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, var(--accent), var(--beige), var(--creme), var(--beige), var(--accent));
	background-size: 400% 400%;
	animation: animate-background 10s infinite ease-in-out;
	margin: 50px 0 0 0;
	border-top : 1px outset var(--beige);
	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: var(--font-titre);
    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 var(--accent);  /* solid, dotted, dashed, double, groove, ridge, inset, outset*/
    border-radius: 10px 0px;
    box-shadow: 5px 5px 5px var(--creme);
    text-align : center;
    text-decoration:none;
    font-size: clamp(16px, 2.6vw, 25px);
}

#onglets li:hover
{
    border : 3px inset var(--beige);
    box-shadow: 7px 7px 5px var(--creme);
    font-weight : bold;
    text-decoration:none;
   /* text-shadow: 3px 3px 10px var(--noir);*/
}

.image
{
	text-align : center ;
	margin:10px 10px -20px 10px;
	border : 3px inset var(--accent);  /* solid, dotted, dashed, double, groove, ridge, inset, outset*/
    	border-radius: 6px;
}
.image:hover
{
	text-align : center ;
	margin:10px 10px -20px 10px;
	border : 4px outset var(--creme);  /* solid, dotted, dashed, double, groove, ridge, inset, outset*/
    	border-radius: 6px;
}

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

.logoaccueil:hover
{
	border : 4px outset var(--beige);  /* 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);
}

.presentationequipe .role {
    display: block;
    text-align: center;
    margin-bottom: 4px;
}

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

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


.presentation
{
	color: var(--noir);
	text-align: center;
	font-family: var(--font-texte);
	font-size: clamp(16px, 2.5vw, 25px);
	padding: 5px clamp(15px, 8vw, 200px);
}
.warning
{
	color: var(--noir);
	text-align: center;
	font-family: var(--font-titre);
	font-size: clamp(28px, 6vw, 50px);
	padding: clamp(25px, 8vw, 65px) clamp(15px, 8vw, 200px) 5px clamp(15px, 8vw, 200px);
}
.cours
{
	color: var(--noir);
	text-align: center;
	font-family: var(--font-texte);
	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: var(--font-titre);
	font-weight: bold;
	font-size: clamp(27px, 4.5vw, 38px);
	color: var(--noir);
	/*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: var(--creme);
}

.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)));
    }
  }

/* ======================================================
   Galerie photos - Flying Harmony
   Complète style_FH.css, reprend la même palette :
   creme var(--creme) / beige var(--beige) / jaune var(--accent) / jaune foncé var(--accent-fonce)
   ====================================================== */

.sous-titre {
  color: var(--noir);
  text-align: center;
  font-family: var(--font-titre);
  font-size: 22px;
  margin-top: -10px;
  margin-bottom: 40px;
}

/* ---------- Page d'accueil galerie : grille de cartes ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 0 30px;
}

.gallery-card {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.gallery-card:hover {
  transform: translateY(-6px);
}

.gallery-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.gallery-card .card-label {
  display: block;
  text-align: center;
  font-family: var(--font-texte);
  font-weight: bold;
  font-size: 26px;
  color: var(--accent-fonce);
  background: var(--creme);
  padding: 10px 0 12px;
  text-shadow: 1px 1px 3px var(--beige);
}

/* ---------- Page de galerie : grille de miniatures ---------- */

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
  max-width: 1500px;
  margin: 0 auto 60px;
  padding: 0 30px;
}

.thumb-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  border: 3px inset var(--accent);
  border-radius: 6px;
}

.thumb-item:hover {
  border: 4px outset var(--creme);
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1400px) { .thumb-grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 1100px) { .thumb-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 780px)  { .thumb-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } }
@media (max-width: 480px)  { .thumb-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; } }

/* ---------- Visionneuse plein écran (lightbox) ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 6px;
  border: 4px solid var(--accent);
  box-shadow: 0 0 40px 10px rgba(212, 174, 68, 0.4);
}

.lightbox-close,
.lightbox-btn {
  position: absolute;
  border: 3px outset var(--accent);
  border-radius: 50%;
  background: var(--creme);
  color: var(--noir);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  font-family: var(--font-texte);
  font-weight: bold;
}

.lightbox-close:hover,
.lightbox-btn:hover {
  border: 3px inset var(--beige);
  color: var(--accent-fonce);
}

.lightbox-close {
  top: 20px;
  right: 24px;
  width: 46px;
  height: 46px;
  font-size: 1.6rem;
}

.lightbox-btn {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  font-size: 1.6rem;
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--creme);
  font-family: var(--font-texte);
  font-size: 20px;
  background: rgba(0,0,0,0.4);
  padding: 4px 16px;
  border-radius: 20px;
}



/* ======================================================
   BOUTON RETOUR EN HAUT
   Fixe en bas à droite, invisible par défaut,
   apparaît en fondu après un certain défilement
   (classe .visible ajoutée en JS dans menu.php)
   ====================================================== */
.btn-retour-haut
{
	position: fixed;
	right: 30px;
	bottom: 110px;
	width: 70px;
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	border: 3px outset var(--accent);
	background: var(--creme);
	color: var(--noir);
	font-size: 45px;
	text-decoration: none;
	box-shadow: 0px 0px 15px 3px var(--beige);
	cursor: pointer;
	z-index: 1000;

	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.btn-retour-haut.visible
{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.btn-retour-haut:hover
{
	border: 4px inset var(--beige);
	box-shadow: 0px 0px 20px 6px var(--creme);
}