@font-face { font-family: "Dancerz"; src: url("./font/Dancerz.ttf") format("truetype")}
@font-face { font-family: "Aclonica"; src: url("./font/Aclonica.ttf") format("truetype")}
@font-face { font-family: "Gwendolyn-Regular"; src: url("./font/Gwendolyn-Regular.ttf") format("truetype")}
@font-face { font-family: "Gwendolyn-Bold"; src: url("./font/Gwendolyn-Bold.ttf") format("truetype")}


body {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: #f0f0f0;
    font-family: Arial, sans-serif;
    text-align: center;
}

//gemini
.flipper-container {
    width: 200px;
    height: 300px;
    perspective: 1000px; /* Important pour l'effet 3D */
}

/* 2. Configure le conteneur rotatif */
.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s; /* Durée de l'animation */
    transform-style: preserve-3d; /* Les enfants sont dans un espace 3D */
}

/* 3. Cache les faces non visibles */
.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Les faces cachées par la rotation doivent être invisibles */
    backface-visibility: hidden;
}

/* 4. Configuration initiale des faces */
.front {
    z-index: 2;
    /* La face avant est visible par défaut (rotation 0) */
    transform: rotateY(0deg);
    background-color: lightblue;
 background-image: url('./logos/carte_cadeau_r.jpg');
    background-size: cover;
}

.back {
    /* La face arrière est tournée de 180 degrés et cachée */
    transform: rotateY(180deg);
    background-color: lightgreen;
}

/* 5. L'état "flipped" (la classe que jQuery va basculer) */
.flipper-container.flipped .flipper {
    transform: rotateY(180deg); /* On fait pivoter le contenu */
}



/* Titre */
h1 {
    margin-bottom: 20px; 
    font-size: 2rem; 
    color: #333; 
    text-align: center;
}

/* Container de la carte */
.flip-card {
    background-color: transparent;
    width: 90%; 
    max-width: 90vh; 
    aspect-ratio: 1.5; 
    perspective: 1000px; /* 🌟 ESSENTIEL 3D */
    cursor: pointer;
    position: relative;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d; /* 🌟 ESSENTIEL 3D */
    /* translate3d retiré de l'inner pour éviter les conflits avec la transition */
}

/* Effet de flip */
.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg); /* 🌟 Rotation positive pour la compatibilité Safari */
}

/* Faces */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* 🌟 ESSENTIEL SAFARI */
    backface-visibility: hidden; /* 🌟 ESSENTIEL 3D */
    border-radius: 10px;
    overflow: hidden;
    
    /* 🚀 OPTIMISATION FINALE : Force l'accélération matérielle sur les faces individuelles pour éliminer le "slide" et les problèmes de Z-index 3D */
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0);
}

/* Recto */
.flip-card-front {
    background-image: url('./logos/carte_cadeau_r.jpg');
    background-size: cover;
    background-position: center;
}

/* Verso */
.flip-card-back {
    background-image: url('./logos/carte_cadeau_v.jpg');
    background-size: cover;
    background-position: center;
    /* 🌟 Assure la rotation initiale sur Safari, conservé ici malgré l'ajout sur le sélecteur commun */
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.3); 
    position: relative;
}

/* Positionner le select au tiers de la carte */
.flip-card-back select {
    width: 40%; 
    font-size: clamp(1rem, 4vw, 1.5rem); 
    padding: clamp(0.5rem, 2vw, 1rem); 
    border-radius: 5px;
    border: none;
    text-align: center;
    box-sizing: border-box; 
    position: absolute; 
    top: calc(24%); 
}

/* Positionner l'input au deux tiers de la carte */
.flip-card-back input {
    width: 30%; 
    font-size: clamp(1rem, 4vw, 1.5rem); 
    padding: clamp(0.5rem, 2vw, 1rem); 
    border-radius: 5px;
    left:20%;
    border: none;
    text-align: center;
    box-sizing: border-box; 
    position: absolute; 
    top: calc(30%); 
}

.flip-card-back textarea {
    width: 24%; 
    font-size: clamp(1.5rem, 2vw, 1.5rem); 
    border-radius: 5px;
    border: none;
    right:15%;
    height:6em;
    line-height: 1em;
    text-align: center;
    box-sizing: border-box; 
    position: absolute; 
    top: calc(30%);
}
  
.flip-card-back img {
    font-size: clamp(1.5rem, 2vw, 1.5rem); 
    border-radius: 5px;
    border: none;
    right:15%;
    height:6em;
    line-height: 1em;
    text-align: center;
    box-sizing: border-box; 
    position: absolute; 
}

.flip-card-back input::placeholder {
    color: #FF0000; 
    opacity: 1; 
}
.flip-card-back textarea::placeholder {
    color: #FF0000; 
    opacity: 1; 
}

/* Amélioration visuelle du select */
.flip-card-back select:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.zone {
    width: 40%;
    height: 30px;
    overflow: hidden;
    position: relative;
}

#marquee {
    position: absolute;
    white-space: nowrap;
}

.selectinscrit
{
	background-color:red;
	animation-duration: 0.5s;
	animation-name: animselectinscrit;
  	animation-iteration-count: 5;
}
@keyframes animselectinscrit {
  	100% {background-color:red;}
  	0% {background-color:transparent;}
}


.menunew
{
	margin:10px 0px 10px 0px;
	position:relative;
}
.menunew:hover
{
	animation-duration: 0.5s;
  	animation-name: animmenunew;
  	animation-iteration-count: 1;
  	transition-timing-function: ease-in;
}
@keyframes animmenunew {
 	0% {left:0px;font-size:100%}
  	50% {left:-20px;font-size:150%;color:red;}
  	100% {left:0px}
}


.vignette3 {
	border-style:solid;
	opacity:1;
	border-width:20px;
	border-color:rgba(40,40,40,1);
	border-radius:60px;
	font-size:130%;
	color:white;
	margin-top:10px;
	text-shadow:5px 5px 5px rgba(0,0,0,0.9);
	padding:20px;
}

.vignette {
	border-style:solid;
	opacity:0.6;
	border-width:20px;
	border-color:rgba(40,40,40,1);
	border-radius:60px;
	font-size:400%;
	margin-top:10px;
	text-shadow:5px 5px 5px rgba(0,0,0,0.9);
	padding:20px;
}

.vignette_selected {
	opacity:1;
	border-style:solid;
	border-width:20px;
	border-color:rgba(0,0,255,0.8);
	border-radius:60px;
	font-size:400%;
	margin-top:10px;
	text-shadow:5px 5px 5px rgba(0,0,0,0.9);
	padding:20px;
	animation-duration: 1s;
	animation-iteration-count: 1;
	transition-timing-function: ease-in;
	animation-name: vignette_on;
}

@keyframes vignette_on {
  	0% {border-color:rgba(255,255,255,1);}
  	100% {border-color:rgba(0,00,255,0.8);}
}
  
.bandeau0 {
	font-size:80%;
	color:grey;
}

.bandeau00 {
	font-size:80%;
	color:red;
}

.bandeau {
	font-size:300%;
	color:grey;
	text-shadow:3px 3px 3px rgba(255,255,255,1);
}

.bandeaui {
	font-size:250%;
	color:white;
	text-shadow:3px 3px 3px rgba(200,200,200,1);
}

.bandeauj {
	font-size:450%;
	color:white;
	border-radius:30px;
	border-style:solid;
	border-wiosdth:3px;
	vertical-align:middle;
	text-shadow:3px 3px 3px rgba(200,200,200,1);
}


.jour
{
	/* (La définition de police a été déplacée dans le @font-face) */
	font-size:9em;
}

.bandeau1 {
	font-size:200%;
	color:white;
}

.tableau1 {
	font-size:100%;
	color:white;
	border-style:solid;
	border-width:3px;
  	border-radius:5px;
}

.select1 {
	font-size:150%;
	color:white;
	background-color:black;
	border-radius:3px;
}

.tourne {
	animation-duration: 2s;
  	animation-iteration-count: infinite;
	animation-name: tourne_anim;
	transition-timing-function:linear
}
 
@keyframes tourne_anim {
	0% { transform: rotate(0deg); } 
 	50% { transform: rotate(360deg); }
 	100% { transform: rotate(0deg); }
}
	

.saisie {
	font-size:200%;
	font-family:Aclonica;
	border-radius:2px;
	border-style:solid;
	border-width:2px;
	background-color:grey;
	color:rgba(255,255,255,1);
	padding:20px;
	margin:20px;
	animation-duration: 1.5s;
  	animation-iteration-count: 1;
	animation-name: saisie_blur;
}
.saisiemoins {
	font-size:100%;
	font-family:Aclonica;
	border-radius:2px;
	border-style:solid;
	border-width:2px;
	background-color:grey;
	color:rgba(255,255,255,1);
	padding:20px;
	margin:20px;
	animation-duration: 1.5s;
  	animation-iteration-count: 1;
	animation-name: saisie_blur;
}
.saisie_err {
	font-size:300%;
	font-family:Aclonica;
	border-radius:2px;
	border-style:solid;
	border-width:2px;
	background-color:grey;
	color:rgba(255,255,255,1);
	padding:20px;
	margin:20px;
}

.saisie label {color:red;}

@keyframes saisie_blur {
	0% {background-color:rgba(100,100,255,1);border-radius:40px;color:color:rgba(255,255,255,1);border-width:5px}
  	100% {background-color:grey;border-radius:2px;color:color:rgba(255,255,255,0.8);border-width:2px}
}


.saisie::placeholder {
  	color: black;
  	opacity: 0.7;
  	font-size:60%;
  	position:relative;
  	top:0px;
}
.saisie:focus::placeholder {
	color:white;
	top:-30px;
	animation: placeholder_anim 1s infinite;
}

@keyframes placeholder_anim {
  	0% {color: white;}
  	100% {color:red;}
}

.saisie:focus {
  	background-color:rgba(100,100,255,1);
  	border-radius:40px;
  	animation-duration: 0.5s;
  	animation-iteration-count: 1;
  	animation-name: saisie_focus;
  	border-width:5px;
}
  
@keyframes saisie_focus {
  	0% {background-color:grey;border-radius:2px;color:color:rgba(255,255,255,0.8);border-width:2px}
  	100% {background-color:rgba(100,100,255,1);border-radius:40px;color:color:rgba(255,255,255,1);border-width:5px;}
}

.pastille
{
	font-family:Aclonica;
	color:white;
	font-size:40%;
}

.recharge {
  	animation-duration: 1s;
  	animation-iteration-count: 1;
  	animation-name: recharge_anim;
  	transition-timing-function: ease-in;
}
  
@keyframes recharge_anim {
  	0% {color:white;font-size:120%}
  	50% {color:red;font-size:100%}
  	100% {color:white;font-size:100%;}
}

.caseacocher0
{
	transform: scale(3.5);
	background-color:red;
}

.caseacocher1
{
	transform: scale(3.5);
	animation-name: caseacocheranim;
	animation-duration: 3s;
  	animation-iteration-count: infinite;
}

@keyframes caseacocheranim {
  	0% {transform: scale(3.5);}
  	10% {transform: scale(5);}
  	48% {transform: scale(4.5);}
  	49% {transform: scale(5);}
  	50% {transform: scale(4.5);}
  	51% {transform: scale(5);}
  	52% {transform: scale(4.5);}
  	53% {transform: scale(5);}
  	90% {transform: scale(5);}
  	100% {transform: scale(3.5);}
}

.payer
{
  	font-size:500%;
  	color:rgba(0,255,255,1);
  	animation-name: bandeau2anim2;
  	animation-duration: 5s;
  	animation-iteration-count: infinite;
  	border-style:solid;
  	border-color:transparent;
  	text-shadow:0px 0px 0px rgba(0,0,0,1);
}

@keyframes bandeau2anim2 {
  	0% {font-size : 200%;background-color:rgba(0,0,0,1);border-color:transparent;}
  	20% {font-size:250%;background-color:rgba(255,0,0,1);}
  	80% {font-size:250%;background-color:rgba(255,0,0,1);border-color:transparent;}
  	100% {font-size : 200%;background-color:rgba(0,0,0,1);}
}

.plusdecours
{
	font-size:80%;
	color:rgba(0,255,255,1);
	animation-name: plusdecoursanim;
  	animation-duration: 3s;
  	animation-iteration-count: 1;
  	border-style:solid;
  	border-color:transparent;
  	text-shadow:0px 0px 0px rgba(0,0,0,1);
}

@keyframes plusdecoursanim {
	0% { color:white; } 
  	16% { color:red; font-size:160% }
  	18% { color:white; font-size:150% }
  	20% { color:red; font-size:160% }
  	22% { font-size:150%; color:white; }
  	24% { color:red; font-size:160% }
  	26% { font-size:150%; color:white; }
  	28% { color:red; font-size:160% }
  	30% { font-size:150%; color:white; }
  	32% { color:white; font-size:100% }
}
  
.bandeau22 {
	font-size:100%;
	color:rgba(0,255,255,1);
	animation-name: bandeau22anim;
  	animation-duration: 5s;
  	animation-iteration-count: 2;
  	border-style:solid;
  	border-color:transparent;
  	text-shadow:0px 0px 0px rgba(0,0,0,1);
  	background-color:rgba(0,0,0,1);
}

.bandeau2 {
	font-size:100%;
	color:rgba(0,255,255,1);
	animation-name: bandeau2anim;
  	animation-duration: 5s;
  	animation-iteration-count: infinite;
  	border-style:solid;
  	border-color:transparent;
  	text-shadow:0px 0px 0px rgba(0,0,0,1);
  	background-color:rgba(0,0,0,1);
}

@keyframes bandeau2anim {
  	0% {font-size : 100%;background-color:rgba(0,0,0,1);border-color:transparent;}
  	20% {font-size:120%;background-color:rgba(255,0,0,1);}
  	80% {font-size:120%;background-color:rgba(255,0,0,1);border-color:transparent;}
  	100% {font-size : 100%;background-color:rgba(0,0,0,1);}
}

@keyframes bandeau22anim {
  	0% {font-size : 100%;background-color:rgba(0,0,0,1);border-color:transparent;}
  	20% {font-size:120%;background-color:rgba(100,0,0,1);}
  	80% {font-size:120%;background-color:rgba(100,0,0,1);border-color:transparent;}
  	100% {font-size : 100%;background-color:rgba(0,0,0,1);}
}

.pannel{
	background-color:rgba(200,200,200,0.8);
	animation-name: animpannel;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	transition-timing-function: ease-in;
}

@keyframes animpannel {
  	0% {background-color: rgba(200,200,200,0.8);}
  	20% {background-color: rgba(0,255,0,1);}
  	80% {background-color: rgba(0,255,0,1);}
	100% {background-color: rgba(200,200,200,0.8);}
}

.cours {
	font-size:100%;
	color:rgba(0,255,255,0.5);
	text-shadow:7px 7px 5px rgba(0,0,0,0.6);
}

.cours_p {
	font-size:70%;
	color:rgba(0,255,255,0.5);
	text-shadow:7px 7px 5px rgba(0,0,0,0.6);
}

.menu55 {
	font-family:Dancerz;
	font-size:150%;
	background-color:rgba(40,40,40,0.8);
	color:grey;
	border-color:grey;
	border-width:3px;
	border-style:solid;
	border-radius:10px;
	margin:10px;
	padding:10px;
	cursor:pointer;
	text-decoration: none;
}

.menu {
	font-family:Dancerz;
	font-size:280%;
	background-color:rgba(0,0,0,0.8);
	color:grey;
	border-color:grey;
	border-width:3px;
	border-style:solid;
	border-radius:10px;
	margin:5px;
	padding:5px;
	cursor:pointer;
}

@keyframes menu {
  	0% {border-color: rgba(0,0,0,0);}
  	50% {border-color: rgba(40,40,40,1);}
	100% {border-color: rgba(0,0,0,0);}
}

.menu:hover {
	font-family:Dancerz;
	background-color:rgba(0,0,0,1);
	border-color:grey;
	border-width:3px;
	border-style:solid;
	border-radius:10px;
	margin:5px;
	padding:5px;
	cursor:pointer;
	animation-duration: 2s;
	animation-iteration-count: 1;
	transition-timing-function: ease-in;
	animation-name: menu_hover;
}

@keyframes menu_hover {
  	0% {border-color:grey}
  	100% {border-color:cyan;color:yellow}
}


.decaltext
{
	right:0%;
	position:relative;
	animation-iteration-count: 1;
	animation-name: decal_text_anim;
	animation-duration: 1s;
}

@keyframes decal_text_anim {
	0% {right:0%}
  	20% {right:5%}
  	40% {right:0%}
	60% {right:5%}
  	80% {right:0%}
}


.libea {
	color:white;
	font-size:200%;
	text-shadow:7px 7px 5px rgba(0,0,0,0.9);
}

.libec {
	color:rgba(200,200,200,1);
	font-size:180%;
	text-shadow:7px 7px 5px rgba(0,0,0,0.9);
}

.libed {
	color:rgba(250,0,0,1);
	font-size:180%;
	text-shadow:7px 7px 5px rgba(0,0,0,0.9);
}	
.bout_a {
	color:rgba(255,255,255,1);
	font-size:4em;
	background-color:grey;
}	
	
.libeb {
	color:yellow;
	font-size:250%;
	text-shadow:7px 7px 5px rgba(0,0,0,0.9);
}


.libe {
	color:white;
	text-shadow:7px 7px 5px rgba(0,0,0,0.9);
	animation-duration: 5s;
	animation-iteration-count: infinite;
	transition-timing-function: ease-in;
	animation-name: libe;
}

@keyframes libe {
  	0% {text-shadow:2px 2px 3px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:1px;font-size:200%;color:white}
  	15% {text-shadow:10px 10px 5px rgba(0,0,0,1);color:#AAAAAA;letter-spacing:10px;font-size:250%;color:red}
  	25% {text-shadow:10px 10px 5px rgba(0,0,0,1);color:#AAAAAA;letter-spacing:10px;font-size:250%;color:red}
	30% {text-shadow:2px 2px 3px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:1px;font-size:200%;color:white}
}

.libf {
	color:white;
	text-shadow:3px 3px 2px rgba(0,0,0,0.9);
	animation-duration: 10s;
	animation-iteration-count: 1;
	transition-timing-function: ease-in;
	animation-name: libfanim;
}

@keyframes libfanim {
 	10% {text-shadow:10px 10px 5px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:5px;rotate:360deg;top:50%;font-size:100%;color:white}
  	15% {text-shadow:10px 10px 5px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:30px;rotate:360deg;top:50%;font-size:100%;color:yellow}
  	85% {text-shadow:10px 10px 5px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:30px;rotate:360deg;top:50%;font-size:100%;color:yellow}
  	85% {text-shadow:10px 10px 5px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:30px;rotate:360deg;top:50%;font-size:100%;color:yellow;text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;opacity:0.5;}
  	95% {text-shadow:10px 10px 5px rgba(0,0,0,0.9);color:#FFFFFF;letter-spacing:5px;rotate:360deg;top:50%;font-size:100%;color:white}
}