@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");


*{
    margin: 0;
    padding:0;
}

:root{
    --clr: #9D8A57;
}
.accueil{
    position: relative; /* Positionnement relatif pour positionner les éléments enfants */
    display: flex; /* Afficher les éléments enfants en tant que flexbox */
    justify-content: center; /* Centrer horizontalement les éléments enfants */
    align-items: center; /* Centrer verticalement les éléments enfants */
    min-height: 100vh; /* Hauteur minimale de la vue à 100% de la hauteur de l'écran */
    height: 100%; /* Hauteur de l'élément à 100% de son conteneur */
    overflow: hidden; /* Cacher le contenu débordant */
    background-image: url('../Image/chemin_traverse.jpg'); /* Image de fond */
    background-position: bottom center; /* Position de l'image de fond */
    background-size: cover; /* Redimensionner l'image de fond pour couvrir complètement l'élément */
    background-repeat: no-repeat; /* Ne pas répéter l'image de fond */
}

header{
    position: absolute; /* Positionnement absolu pour positionner l'en-tête par rapport à son conteneur */
    top: 0; /* Positionner l'en-tête en haut de son conteneur */
    left: 0; /* Positionner l'en-tête à gauche de son conteneur */
    width: 100%; /* Largeur de l'en-tête à 100% de son conteneur */
    overflow: hidden; /* Cacher le contenu débordant */
    display: flex; /* Afficher les éléments enfants en tant que flexbox */
    justify-content: space-between; /* Espacer les éléments enfants horizontalement */
    align-items: center; /* Centrer verticalement les éléments enfants */
    height: 55px; /* Hauteur de l'en-tête */
    background-color: #1A2D40; /* Couleur de fond de l'en-tête */
    opacity: 0.9; /* Opacité de l'en-tête */
    padding-bottom: 5px; /* Espacement en bas de l'en-tête */
    font-family: 'Merriweather', serif; /* Police de caractères pour l'en-tête */
}
header .logo{
    position: relative;
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
}

header .logo img{ 
    max-width: 45%; 
    height: 100%;
}

header nav{
    position: relative;
    width: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
}

header nav .panneau{
    display: flex;
    flex-wrap: flex;
    align-items: center;
}

header nav .panneau .direction{
    margin: 15px;
    list-style: none;
}

header nav .panneau .direction a{
    color: #9d8a57;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    position: relative;
    transition: 0.5s;
}

header nav .panneau .direction a:hover{
    color: rgb(187, 187, 187);
    font-size: 15px;
}

header nav .panneau .direction a::before{
    position: absolute;
    bottom: -5px;
    content:"";
    width: 0%;
    height: 2px;
    border-radius: 5%;
    background-color: #9d8a57;
}

header nav .panneau .direction a:hover::before{
    width: 100%;
}
header nav .panneau #spanpannier{
position: absolute;
    top: -15px;
    right: -15px;
    background-color: #9d8a57;
    height: 19px;
    width: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    color: #1a2d40;
    font-family: 'EB+Garamond', serif;
}
header nav .panneau .direction a:hover #spanpannier{
    position: absolute;
        top: -15px;
        right: -15px;
        background-color: rgb(187, 187, 187);
        height: 19px;
        width: 19px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 15px;
        color: #1a2d40;
        font-family: 'EB+Garamond', serif;
}
header nav .panneau .direction li a #spanpannier:hover {
    top: -15px;
    right: -15px;
    background-color: rgb(187, 187, 187);
    height: 19px;
    width: 19px;
    color: #1a2d40;
}
.search-box{
    position: relative;
    display: flex;
    justify-content:center;
    align-items: center;
    border: 2px solid #9d8a57;
    width: 300px;
    padding: 5px 10px;
    border-radius: 60px;
}

.search-box img{
    width:18px;
    padding: 2px;
    background-color:#9d8a57;
    border-radius:50%;
}

.search-box input{
    background-color: transparent;
    color: rgb(187, 187, 187);
    width: calc(100% - 16px);
    padding-left: 5px;
    border: 0;
    outline: 0;
}

.loupe{
    position: absolute;
    top: 58px;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: inherit;
}

div#suggestions{
    display: flex; /* Afficher les éléments enfants en tant que flexbox */
    flex-wrap: nowrap; /* Empêcher le contenu de se retourner à la ligne */
    flex-direction: column; /* Disposer les éléments enfants en colonne */
    justify-content: center; /* Centrer verticalement les éléments enfants */
    align-items: center; /* Centrer horizontalement les éléments enfants */
    width: 280px; /* Largeur de l'élément */
    background-color: #1A2D40; /* Couleur de fond */
    border: 2px solid #9d8a57; /* Bordure de 2 pixels solide avec une couleur */
    border-radius: 20px; /* Bordure arrondie avec un rayon de 20 pixels */
    color:rgb(187, 187, 187); /* Couleur du texte */
    opacity: 0.9; /* Opacité de l'élément */
    overflow: hidden; /* Cacher le contenu débordant */
    font-family: 'Merriweather', serif; /* Police de caractères */
}


.suggestion{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #1A2D40;
    color:rgb(187, 187, 187);
    opacity: 0.9;
}

.suggestion a{
    text-decoration:  none;
    font-family: 'Merriweather', serif;
    font-size: 13px;
}

button.close-button:not([style*="display: none"]) {
    align-items: center;
    background-color: inherit;
    padding: 0 3px;
    border: none;
    border-radius: 2px;
    background-color:  #9D8A57;
    color:#1A2D40;
    font-family: 'Merriweather', serif;
    font-size: 13px;
    font-weight: bold;
}

.accueil .castel a::after {
    content: "";
    position: absolute;
    top: 32%;
    left: 51%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color:inherit;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
}

.accueil .bike a::after {
    content: "";
    position: absolute;
    top: 75%;
    left: 47%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color:inherit;/* transparent */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
}

.accueil .Poufsouffle::after {
    content: "";
    position: absolute;
    top: 32%;
    left: 93%;
    transform: translate(-50%, -50%);/* déplacement x et y */
    text-align: center;
    background-color:inherit;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: none;
}

.accueil .Serdaigle::after {
    content: "";
    position: absolute;
    top: 36%;
    left:12%;
    transform: translate(-50%, -50%);/* Déplace l'élément de -50% de sa largeur et -50% de sa hauteur par rapport à son propre centre */
    text-align: center;
    background-color:inherit;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: none;
}

.accueil .Gryffondor::after {
    content: "";
    position: absolute;
    top: 15%;
    left:32%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color:inherit;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: none;/* cursor pointer inactive */
}

.accueil .Serpentard::after {
    content: "";
    position: absolute;
    top: 30%;
    left: 66%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color:inherit;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: none;
}

.accueil .navigation{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.accueil .menuToggle{
    position: absolute;
    width: 50px;
    height: 50px;
    background: #1A2D40;
    opacity: 0.9;
    border: 2px solid var(--clr);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transform: translateY(-30px);
}

.accueil .menuToggle::before{
    content: "+";
    position: absolute;
    font-size: 3em;/* 1em = 16 pixels, 1 rem = 20 pixels */
    color: var(--clr);
    transition: 0.8s;
}

.accueil .menuToggle:hover::before{
    content: "+";
    position: absolute;
    font-size: 2em;
    color: rgb(187, 187, 187);
}

.accueil .menuToggle.active:before{
    transform: rotate(225deg);/* Rotation de l'icône du menu lorsqu'il est actif */
}

.accueil .menu{
    position: absolute;
    width: 360px;
    height: 50px;
    background:#1A2D40;
    opacity:0.9;
    border: 2px solid var(--clr);
    border-radius: 70px;
}

.accueil .menuToggle i{
    position:absolute;
    inset: 0;
}

.accueil .menu{
    position: absolute;
    width: 50px;
    height: 50px;
    background:#1A2D40;
    border: 2px solid #9d8a57;
    opacity: 0.9;
    border-radius: 70px;
    transform: translateY(-30px);
    transition: transform 0.5s, width 0.5s, height 0.5s;
    transition-delay: 1s,0.5s,0.5s;
}

.accueil .menuToggle.active ~ .menu{
    width: 750px;
    height: 55px;
    transform: translateY(0px);
    transition-delay: 0s, 0.5s, 0.5s;
}

.accueil .boutika{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;/* Espacement entre les éléments de 35px */
    line-height: 10px;
}

.accueil .boutika .btk{
    list-style: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: 0.25s;
    transition-delay: calc(0s + var(--i));
    transform: translateY(-30px);
}

.accueil .menuToggle.active ~ .boutika .btk{
    opacity: 1;
    visibility: visible;
    transition-delay: calc(0.75s + var(--i)); /* Ajoute un délai de transition calculé en fonction de la valeur de "--i" */
    transform: translateY(0px);

}

.accueil .boutika .btk:nth-child(6){
    width: 30px;
}

.accueil .boutika .btk a{
    display: block;
    font-size: 2em;
    text-decoration: none;/* lien rendu neutre*/
    color: #9D8A57;
}

.accueil .btk a ion-icon {
    pointer-events: none;
}

.accueil .boutika .btk:hover a{
    color:rgb(187, 187, 187);
}

.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%; 
    overflow: hidden; /* Cache tout contenu qui dépasse la limite de la boîte */
    display: flex; 
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; 
    height: auto;
    padding: 5px 0;
    background-color: #1A2D40;
    opacity: 0.9;
    font-family: 'Merriweather', serif;
    font-size: 15px;
}

.footer-copyright {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #9D8A57;
}
.footer a{
    padding-left: 50px;
    text-decoration:none;
    color: #9D8A57;
}

/*--------------- 1025px---------------*/
@media (max-width: 1025px) {
    .search-box {
        width: 200px;
    }
    div#suggestions {
        width: 225px;
    }
    
    .footer a{
        padding-left: 30px; /* Réduire le padding à gauche des liens du footer */
        
    }  
}

/*--------------- Ipad Mini ---------------*/
@media (max-width: 890px) {
    .search-box {
        width: 150px;
    }
    div#suggestions {
        width: 175px;
    }
    
    .footer a{
        padding-left: 20px;
    }
}
/*--------------- 835px ---------------*/
@media (max-width: 835px) {
    header .logo{
        display:none;
    }

    .search-box{
        display: none;
    }

    header nav {
        width: 100%;
    }

    .accueil .menuToggle.active ~ .menu{
        width: 560px;
        height: 55px;
        transform: translateY(0px);
        transition-delay: 0s, 0.5s, 0.5s;
    }
    
    .accueil .boutika{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        line-height: 10px;
    }
}

/*--------------- 600px ---------------*/
@media (max-width: 600px) {
    .accueil .navigation {
        position: absolute;
        bottom: 55%;
        left: 10%;
        transform: translateY(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .accueil .menuToggle {
        position: absolute;
        width: 50px;
        height: 50px;
        background: #1A2D40;
        opacity: 0.9;
        border: 2px solid var(--clr);
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        transform: translateX(0px);
    }
    
    .accueil .menu{
        position: absolute;
        width: 50px;
        height: 50px;
        background:#1A2D40;
        border: 2px solid #9d8a57;
        opacity: 0.9;
        border-radius: 70px;
        transform: translateY(0px);
        transition: transform 0.5s, width 0.5s, height 0.5s;
        transition-delay: 1s,0.5s,0.5s;
    }
    
    .accueil .menuToggle.active ~ .menu {
        width: 55px;
        height: 500px;
        transform: translateX(30px);
        transition-delay: 0s, 0.5s, 0.5s;
    }
    
    .accueil .boutika {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        line-height: 10px;
        flex-direction: column;
        transform: translateX(30px);
    }
    
    .accueil .boutika .btk{
        list-style: none;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: 0.25s;
        transition-delay: calc(0s + var(--i));
        transform: translateY(-30px);
    }
    
    .accueil .menuToggle.active ~ .boutika .btk {
        opacity: 1;
        visibility: visible;
        transition-delay: calc(0.75s + var(--i));
        transform: translateY(0px);
    }
    
    .accueil .boutika .btk:nth-child(6){
        height: 10px;
    }
}

/*--------------- samsung Galaxy S20 Ultra ---------------*/
@media (max-width: 450px) {
    .footer {
        flex-direction: column;
    }
    
    .footer-copyright {
        flex-direction: column;
        text-align: center;
        width: 100%;
    }
    .footer a {
        padding-left: 10px;
    }
}
/*--------------------------------------------------------------- popup lettre -------------------------------------------------------------------*/

.lettre .scenes {
    position: relative;
    aspect-ratio: 1.8 / 1;
    outline: 2px solid #9D8A57;
}

.lettre .scene-1, .scene-2 {
    position: absolute;
    inset: 0;
    background-size: cover;
}

.lettre .scene-1 {
    background-image: url(../Image/lettre.jpg);
}

.lettre .scene-2 {
    background-image: url(../Image/parchemin.jpg);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 47.5%,
        #9D8A57 52.5%
    );
    -webkit-mask-size: 210%;
    -webkit-mask-position: left;
}

.lettre .scenes:is(:hover, :focus) .scene-2 {
    -webkit-mask-position: right;
    transition: -webkit-mask-position 3s linear;
}
.lettre {
    display: grid;
    place-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: #9D8A57;
    background-image: radial-gradient(#9D8A57, #010438);
    font: clamp(0.75rem, 0.3rem + 1.9vw, 1.5rem)/1.1 'Koulen', sans-serif;
    letter-spacing: 0.1em;
    font-family: 'Merriweather', serif;
}
.lettre .suitebrique::after {
    content: "";
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color:inherit;
    width: 250px;
    height: 50px;    
    cursor: pointer;
} 

.lettre .wrapper {
    display: grid;
    gap: 10px;
    width: min(1100px, 100%);
}

.lettre .intro {
    text-align: center;
}

.lettre .heading {
    margin: 0;
    font-size: 2em;
    font-family: 'Merriweather', serif;
}

.lettre .heading::before, .heading::after {
    content: ' — ';
}

.lettre .nudge {
    margin: 0;
    color: rgb(187, 187, 187);
    font-size: 0.75em;
}

.lettre #container {
    width: 80%;
    margin: 20px auto;
    min-height: 400px;
}
.lettre #container svg {
    min-height: 400px;
}
.lettre .hidden {
    width: 0;
    opacity: 0;
    overflow: hidden;
    }

#popup {
    display: none; /* Cachez le popup par défaut */
    position: absolute; /*Positionnez le popup en haut de la page*/
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%); /*Centrez le popup */
    background-color: #1A2D40; 
    color: #9D8A57;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #9D8A57;
    z-index: 2;
    font-family: 'Merriweather', serif;
    font-size: 13px;
} 
    
.popuplettre .envoyecookie {
    padding: 0 3px;
    border: none;
    border-radius: 2px;
    background-color:  #9D8A57;
    color:#1A2D40;
    font-family: 'Merriweather', serif;
    font-size: 13px;
    font-weight: bold; 
}
    
.hidden {
    display: none;
}
.vara-container {
    font-size: 80px;
}

@media (max-width: 1199px) {
    .vara-container {
        font-size: 56px;
    }
}

@media (max-width: 699px) {
    .vara-container {
        font-size: 32px;
    }
}
/* Surface Pro 7 */
@media (max-width: 912px) and (max-height: 1368px) {
    .lettre .suitebrique::after {
        width: 200px;
        height: 40px;
    }

    .lettre .heading {
        font-size: 1.5em;
    }

    .lettre .nudge {
        font-size: 0.65em;
    }

    .lettre #container {
        width: 90%;
    }
}

/*-------------------------------------------------------------Mur de brique--------------------------------------------------------------*/
/* Définition d'une variable personnalisée pour le rayon des briques */
@property --radius {
    syntax: "<percentage>";
    inherits: true;
    initial-value: -5%;
}

/* Définition d'une animation pour la transition de scène */
@keyframes scene-transition {
    to {
        --radius: 105%;
    }
}

.brique .scenes {
    position: relative;
    aspect-ratio: 1.8 / 1;/* L'aspect-ratio spécifie un rapport largeur/hauteur de 1.8 sur 1 */
    outline: 2px solid #9D8A57;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.brique .scene-1,
.brique .scene-2 {
    position: absolute;
    inset: 0;/* Utilisation de l'inset 0 pour positionner les éléments de manière réactive */
    background-size: cover;
}

.brique .scene-1 {
    background-image: url(../Image/brique1.png);
}

.brique .scene-2 {
    background-image: url(../Image/brique2.png);
    z-index: -1;/* position image en second plan */
    -webkit-mask-image: radial-gradient(
        circle,
        #9D8A57 calc(var(--radius) - 5%), /* Définit la couleur de l'arrière-plan à l'intérieur du rayon défini */
        transparent calc(var(--radius) + 5%) /* Définit la couleur transparente à l'extérieur du rayon défini */
    );
}

.brique .scenes:is(:hover, :focus) .scene-2 {
    z-index: 1;
    animation: scene-transition 5s linear forwards;/* Transition de la scène avec une durée de 5 secondes */
}

.brique .scene-title {
    position: absolute;
    max-width: 45%;
    margin: min(20px, 2vw);
    font-size: 1em;
}

.brique {
    display: grid;
    place-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: #9D8A57;
    background-image: radial-gradient(#9D8A57, #010438);
    font: clamp(0.75rem, 0.3rem + 1.9vw, 1.5rem) / 1.1 "Koulen", sans-serif;
    letter-spacing: 0.1em;
    font-family: 'Merriweather', serif;
}

.brique .wrapper {
    display: grid;
    gap: 10px;
    width: min(1100px, 100%);
}

.brique .intro {
    text-align: center;
}

.brique .heading {
    margin: 0;
    font-size: 2em;
}

.brique .heading::before,
.brique .heading::after {
    content: " — ";
}

.brique .nudge {
    margin: 0;
    color: rgb(187, 187, 187);
    font-size: 0.75em;
}

.brique .scene-2 a::after {
    content: "";
    position: absolute;
    top: 51%;
    left: 46%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color:inherit;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
/* -----------------------------------------Formulaire --------------------------------------------*/
/*---------------------------Connection, mot de passe oublié, contact, newpassword, new adresse && inscription------------------------------*/
.cobackground,
.npwbackground,
.pobackground,
.insbackground,
.nabackground,
.conbackground {
    position: relative; /* Position relative pour référence des éléments enfants */
    top: 0;
    left: 0;
    height:100vh; /* Hauteur de 100% de la hauteur de la fenêtre */
    width:100vw; /* Largeur de 100% de la largeur de la fenêtre */
    background-size: cover; /* Redimensionne l'image de fond pour couvrir l'élément */
    background-repeat: no-repeat; /* Empêche la répétition de l'image de fond */
    background-position: bottom; /* Positionne l'image de fond en bas */
    background-blend-mode: overlay; /* Mélange le fond avec d'autres éléments superposés */
    justify-content: center; /* Centre horizontalement les éléments fils */
    align-items: center; /* Centre verticalement les éléments fils */
    display: flex; /* Utilise Flexbox pour le positionnement des éléments fils */
    align-items: center; /* Centre verticalement les éléments fils */
    justify-content: center; /* Centre horizontalement les éléments fils */
    animation: back 5s ease-in-out; /* Animation de fond avec une durée de 5 secondes, une accélération progressive et une décélération progressive */
    animation-iteration-count: infinite; /* Répétition infinie de l'animation */
    animation-timing-function: linear; /* Fonction de temporisation linéaire pour l'animation */
    font-family: 'Merriweather', serif; /* Police de caractères utilisée */
}

.profbackground {
    position: relative;
    top: 0;
    left:0;
    height:100vh;
    width:100vw;
    background-color: #1B2633;
    background-image: radial-gradient( circle , white, transparent 100%);
    background-repeat: no-repeat;
    background-position: bottom;
    background-blend-mode: overlay;
    background-size: cover;
    justify-content: center;
    align-items: center;
    display: flex;
    align-items: center;
    justify-content: center;
} 
    
.cobackground,
.npwbackground,
.pobackground,
.insbackground,
.nabackground,
.conbackground {
    color: hsl(324, 70%, 45%); /* Définit la couleur du texte en utilisant la valeur HSL */
    animation: wheelHueColor 15s infinite; /* Applique une animation pour faire tourner la couleur de fond */
    background-color: currentColor; /* Définit la couleur de fond en utilisant la couleur courante du texte */
}
@supports (background-blend-mode: overlay) {
    /* Applique un effet de superposition d'image et de dégradé en arrière-plan */
    .cobackground,
    .npwbackground,
    .pobackground,
    .insbackground,
    .nabackground,
    .conbackground {
    background-image:  url(../Image/polygones.png), linear-gradient(45deg, white 10%, black 90%);
    background-blend-mode: overlay;
    }
}
@keyframes wheelHueColor {
    from, to { color: hsl(324, 70%, 45%); }  /* Couleur de départ et d'arrivée */
    10%      { color: hsl(360, 65%, 45%); } /* Changement de couleur à 10% de l'animation */
    20%      { color: rgb(149, 93, 10); }   /* Changement de couleur à 20% de l'animation */
    30%      { color: hsl( 72, 75%, 35%); } /* Changement de couleur à 30% de l'animation */
    40%      { color: hsl(108, 65%, 35%); } /* Changement de couleur à 40% de l'animation */
    50%      { color: hsl(144, 75%, 35%); } /* Changement de couleur à 50% de l'animation */
    60%      { color: hsl(180, 75%, 35%); } /* Changement de couleur à 60% de l'animation */
    70%      { color: hsl(216, 60%, 45%); } /* Changement de couleur à 70% de l'animation */
    80%      { color: hsl(252, 65%, 50%); } /* Changement de couleur à 80% de l'animation */
    90%      { color: hsl(288, 60%, 40%); } /* Changement de couleur à 90% de l'animation */
}
    
.cobackground .contini,
.npwbackground .contini,
.pobackground .contini,
.profbackground .contini,
.insbackground .contini,
.nabackground .contini,
.conbackground .contini {
        position: relative;
        top: 0;
        left: 0;
        z-index: 0;
}
    
.insbackground form,
.nabackground form,
.conbackground form {
    background: rgba(255, 255, 255, .3);
    width: 420px;
    height: auto;
    border-radius: 20px;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px); /* Applique un flou à l'arrière-plan */
    -webkit-backdrop-filter: blur(10px); /* Pour les navigateurs basés sur WebKit (Chrome, Safari) */
    -moz-backdrop-filter: blur(10px); /* Pour les navigateurs basés sur Gecko (Firefox) */
    box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, .2); /* Ajoute une ombre à la boîte */
    text-align: center;
    padding: 20px 0;
}

.cobackground form,
.npwbackground form,
.pobackground form,
.profbackground .profdiv {
    background: rgba(255, 255, 255, .3);
    width: 330px;
    height: auto;
    border-radius: 20px;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, .2);
    text-align: center;
    padding: 20px 0;
}
    
.cobackground h3,
.npwbackground h3,
.pobackground h3,
.profbackground h3 {
    color: white;
    font-weight: 500;
    opacity: .7;
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
    font-family: 'Merriweather', serif;
}

.insbackground h3,
.nabackground h3,
.conbackground h3{
    color: white;
    font-weight: 500;
    opacity: .7;
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
    font-family: 'Merriweather', serif;
}
        
.cobackground a,
.npwbackground a,
.pobackground a,
.insbackground a,
.nabackground a,
.conbackground a {
    text-decoration: none;
    color: #ddd;
    font-size: 1rem;
    font-family: 'Merriweather', serif;
}
    
.cobackground a:hover,
.npwbackground a:hover,
.pobackground a:hover,
.insbackground a:hover,
.nabackground a:hover,
.conbackground a:hover {
    text-shadow: 2px 2px 6px #00000040;
}
    
.cobackground a:active,
.npwbackground a:active, 
.pobackground a:active,
.insbackground a:active,
.nabackground a:active,
.conbackground a:active {
    text-shadow: none;
}

.profbackground a {
    text-decoration: none;
    color: #1a2d40;
    font-size: 1rem;
    font-family: 'Merriweather', serif;
}

.profbackground a:hover {
    text-shadow: 2px 2px 6px #00000040;
}

.pobackground a:active {
    text-shadow: none;
}

.profbackground button {
    background: #1a2d40;
    opacity: 0.9;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: 1rem;
    width: 205px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgba(0, 0, 0, .2);
    color: #9d8a57;
    font-size: 13px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
    transition: all .3s;
    margin-bottom: 20px;
    cursor: pointer;
    font-family: 'Merriweather', serif;
}

.profbackground button:hover .fly,
.profbackground button[type="text"]:focus .fly,
.profbackground button[type="password"]:focus .fly{
    background: rgba(255,255,255,0.15);
    box-shadow: 4px 4px 60px 8px rgba(0,0,0,0.2);
}
    
.profbackground button[type="submit"] .fly {
    margin-top: 10px;
    margin-bottom: 30px;
    width: 150px;
    font-size: 15px;
    cursor: pointer;
}
    
.cobackground input,
.npwbackground input,
.pobackground input {
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: 1rem;
    width: 200px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgba(0, 0, 0, .2);
    color: white;
    font-size: 13px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
    transition: all .3s;/* Définit la transition de tous les propriétés avec une durée de 0.3s */
    margin-bottom: 20px;
    font-family: 'Merriweather', serif;
}

.insbackground input,
.nabackground input,
.conbackground input {
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: 1rem;
    width: 160px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgba(0, 0, 0, .2);
    color: white;
    font-size: 13px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
    transition: all .3s;
    margin-bottom: 20px;
    font-family: 'Merriweather', serif;
}

.cobackground input:hover .fly,
.npwbackground input:hover .fly,
.pobackground input:hover .fly,
.insbackground input:hover .fly,
.nabackground input:hover .fly,
.conbackground input:hover .fly
.cobackground input[type="text"]:focus .fly,/* Sélectionne l'élément avec la classe "fly" à l'intérieur d'un input de type "text" qui est en état de focus */
.pobackground input[type="text"]:focus .fly,
.insbackground input[type="text"]:focus .fly,
.nabackground input[type="text"]:focus .fly,
.conbackground input[type="text"]:focus .fly,
.pobackground input[type="email"]:focus .fly,
.insbackground input[type="email"]:focus .fly,
.conbackground input[type="email"]:focus .fly,
.pobackground input[type="date"]:focus .fly,
.insbackground input[type="date"]:focus .fly,
.conbackground input[type="date"]:focus .fly,
.cobackground input[type="password"]:focus .fly,
.npwbackground input[type="password"]:focus .fly,
.pobackground input[type="password"]:focus .fly,
.insbackground input[type="password"]:focus .fly {
    background: rgba(255,255,255,0.15);
    box-shadow: 4px 4px 60px 8px rgba(0,0,0,0.2);
}
    
.cobackground input[type="submit"] .fly,
.npwbackground input[type="submit"] .fly,
.pobackground input[type="submit"] .fly,
.insbackground input[type="submit"] .fly,
.nabackground input[type="submit"] .fly,
.conbackground input[type="submit"] .fly{
    margin-top: 10px;
    margin-bottom: 30px;
    width: 150px;
    font-size: 15px;
    cursor: pointer;
}
    
.cobackground ::placeholder,
.npwbackground ::placeholder,
.pobackground ::placeholder,
.insbackground ::placeholder,
.nabackground ::placeholder,
.conbackground ::placeholder {
    color: #fff;
}

.pobackground p {
    color: white;
    opacity: .6;
    font-size: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
    margin-bottom: 30px;
}

.conbackground textarea {
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: 1rem;
    width: 80%;
    height: 200px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgba(0, 0, 0, .2);
    color: white;
    font-size: 13px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
    transition: all .3s;
    margin-bottom: 15px;
    font-family: 'Merriweather', serif;
}
    
.cobackground .drop,
.npwbackground .drop,
.pobackground .drop,
.profbackground .drop,
.insbackground .drop,
.nabackground .drop,
.conbackground .drop {
    position: absolute;
    background: rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    box-shadow: 10px 10px 60px -8px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

.cobackground .drop-1,
.npwbackground .drop-1,
.pobackground .drop-1,
.profbackground .drop-1,
.insbackground .drop-1,
.nabackground .drop-1,
.conbackground .drop-1 {
    animation: monter 2s ease-in-out infinite;
    height: 80px; 
    width: 80px;
    top: -20px; 
    left: -40px;
}
    
.cobackground .drop-2,
.npwbackground .drop-2,
.pobackground .drop-2,
.profbackground .drop-2,
.insbackground .drop-2,
.nabackground .drop-2,
.conbackground .drop-2 {
    animation: descendre 2s ease-in-out infinite;
    height: 80px; 
    width: 80px;
    bottom: -30px; 
    right: -10px;
    z-index: -1;
}
    
.cobackground .drop-3,
.npwbackground .drop-3,
.pobackground .drop-3,
.profbackground .drop-3,
.insbackground .drop-3,
.nabackground .drop-3,
.conbackground .drop-3 {
    animation: monter 2s ease-in-out infinite;
    height: 100px; 
    width: 100px;
    bottom: 120px; 
    right: -50px;
}
    
.cobackground .drop-4,
.npwbackground .drop-4,
.pobackground .drop-4,
.profbackground .drop-4,
.insbackground .drop-4,
.nabackground .drop-4,
.conbackground .drop-4 {
    animation: gauche 2s ease-in-out infinite;
    height: 120px;
    width: 120px;
    top: -60px; 
    right: -60px;
    z-index:-1;
}
    
.cobackground .drop-5,
.npwbackground .drop-5,
.pobackground .drop-5,
.profbackground .drop-5,
.insbackground .drop-5,
.nabackground .drop-5,
.conbackground .drop-5 {
    animation: droite 2s ease-in-out infinite;
    height: 60px;
    width: 60px;
    bottom: 60px;
    left: -60px;
}    
@keyframes monter {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-40px);
    }
    100% {
        transform: translateY(0);
    }
}
    
@keyframes descendre {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(40px);
    }
    100% {
        transform: translateY(0);
    }
}
    
@keyframes gauche {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-40px);
    }
    100% {
        transform: translateX(0);
    }
}
    
@keyframes droite{
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(70px);
    }
    100% {
        transform: translateX(0);
    }
}

@media (min-width: 1000px) {
    .cobackground,
    .npwbackground,
    .pobackground,
    .profbackground,
    .insbackground,
    .nabackground,
    .conbackground {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-y: hidden;
    }
}

@media (max-width: 903px){
    .cobackground .drop,
    .npwbackground .drop,
    .pobackground .drop,
    .profbackground .drop,
    .insbackground .drop,
    .nabackground .drop,
    .conbackground .drop {
        display: none;
    }
}

@media (max-width: 658px) {
    .cobackground form,
    .npwbackground form,
    .pobackground form,
    .profbackground .profdiv{
        width:320px;
    }

    .cobackground input,
    .npwbackground input,
    .pobackground input{
        width:150px;
    }

    .insbackground form,
    .nabackground form,
    .conbackground form{
        width:380px;
    }

    .insbackground input,
    .nabackground input,
    .conbackground input{
        width: 150px;
    }
}

@media (min-width: 658px) {
    .insbackground,
    .conbackground{
        height: 170vh !important;
        display: flex;
        align-items: flex-start;
    }

    .insbackground .contini,
    .conbackground .contini{
        margin-top: 60px;
    }
}


@media (max-width: 415px) {   
    .cobackground form,
    .npwbackground form,
    .pobackground form,
    .insbackground form,
    .nabackground form,
    .conbackground form {
        width: 280px;
    }

    .profbackground .profdiv {
        width: 280px;
    }

    .insbackground input,
    .nabackground input,
    .conbackground input{
        width: 100px;
    }
}
/*-----------------------------------------verification password inscription/new password--------------------------------------*/
.npwbackground .box .inputBox #toggleBtn,
.insbackground .box .inputBox #toggleBtn {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    cursor: pointer;
    display:flex;
    justify-content: center;
    align-items: center;
}

.npwbackground .box.inputBox #toggleBtn::before,
.insbackground .box.inputBox #toggleBtn::before {
    content: '\f070';
    font-family: fontAwesome;
}

.npwbackground .validation,
.insbackground .validation {
    position: relative;
    display:flex;
    flex-direction: column;
    gap: 8px;
}
.npwbackground .validation,
.insbackground .validation {
    display: none;
}
.npwbackground .validation.active,
.insbackground .validation.active {
    display: block;
}

.npwbackground .validation ul li,
.insbackground .validation ul li{
    position: relative;
    list-style: none;
    color: #fff;
    font-size: 0.85em;
    transition: 0.5s;
}

.npwbackground .validation ul li.valid,
.insbackground .validation ul li.valid {
    color: rgba(255,255,255,0.5);
}

.npwbackground .validation ul li::before,
.insbackground .validation ul li::before {
    content: '\f192';
    width: 20px;
    height: 10px;
    font-family: fontAwesome;
    display: inline-flex;
}

.npwbackground .validation ul li.valid::before,
.insbackground .validation ul li.valid::before {
    content: '\f00c';
    color: "0f0";
}

.npwbackground .box,
.insbackground .box {
    position: relative;
    width: 300px;
}

.npwbackground .box .inputBox,
.insbackground .box .inputBox {
    position: relative;
    width: 100%;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 15 25px rgba(0,0,0,0.15);
}

.npwbackground .box .inputBox input,
.insbackground .box .inputBox input {
    position: relative;
    width: 90%;
    outline: none;
    border: none;
    padding: 10px 5px;
}

.npwbackground .box .inputBox #toggleBtn,
.insbackground .box .inputBox #toggleBtn {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    cursor: pointer;
    display:flex;
    justify-content: center;
    align-items: center;
}

.npwbackground .box .inputBox #toggleBtn::before,
.insbackground .box .inputBox #toggleBtn::before{
    content: '\f070';
    font-family: fontAwesome;
}

.npwbackground .box .inputBox #toggleBtn.hide::before,
.insbackground .box .inputBox #toggleBtn.hide::before {
    content: '\f06e';
    font-family: fontAwesome;
}

.npwbackground .validation,
.insbackground .validation {
    position: absolute;
    top: 5%;
    background: #1a2d40;
    width: 280px;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);
    z-index: 1;
}

.npwbackground .validation ul,
.insbackground .validation ul {
    position: relative;
    display:flex;
    flex-direction: column;
    gap: 8px;
}

.npwbackground .validation ul li,
.insbackground .validation ul li {
    position: relative;
    list-style: none;
    color: #9d8a57;
    font-size: 0.85em;
    transition: 0.5s;
}

.npwbackground .validation ul li.valid,
.insbackground .validation ul li.valid {
    color: rgba(187,187,187);
}

.npwbackground .validation ul li::before,
.insbackground .validation il li::before {
    content: '\f192';
    width: 20px;
    height: 10px;
    font-family: fontAwesome;
    display: inline-flex;
}

.npwbackground .validation ul li.valid::before,
.insbackground .validation ul li.valid::before {
    content: '\f00c';
    color: #0f0;
}

/*--------------- Surface Pro 7 ---------------*/
@media (max-width: 550px) {   
    .npwbackground form {
        padding: 1rem;
    }

    .npwbackground .drop {
        display: none;
    }
}


.lisadbackground{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1A2D40;
    background-size: cover;
}
.lisadbackground {
    color: hsl(324, 70%, 45%);
    animation: wheelHueColor 15s infinite;
    background-color: currentColor;
}
@supports (background-blend-mode: overlay) {
    .lisadbackground {
        background-image:  url(../Image/polygones.png), linear-gradient(45deg, white 10%, black 90%);
        background-blend-mode: overlay;
    }
}
@keyframes wheelHueColor {
    from, to { color: hsl(324, 70%, 45%); }
    10%      { color: hsl(360, 65%, 45%); }
    20%      { color: rgb(149, 93, 10); }
    30%      { color: hsl( 72, 75%, 35%); }
    40%      { color: hsl(108, 65%, 35%); }
    50%      { color: hsl(144, 75%, 35%); }
    60%      { color: hsl(180, 75%, 35%); }
    70%      { color: hsl(216, 60%, 45%); }
    80%      { color: hsl(252, 65%, 50%); }
    90%      { color: hsl(288, 60%, 40%); }
}
.lisadbackground .Administrateur {
    padding: 40px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .3);
    border-radius: 15px;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    box-shadow: 20px 20px 40px -6px rgb(0 0 0 / 20%);
    text-align: center;

}  

.lisadbackground .Administrateur {
    position: absolute;
    display: block;
    overflow: auto;
    max-height: 520px;
    width: calc(100% - 50px);
    max-width: 1155px;
    padding: 10px;
} 

.lisadbackground .Administrateur .admintitleh2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    font-size: 2em;
    letter-spacing: 0.1em;
}

.lisadbackground .Administrateur .inputBox {
    position: relative;
    width: 300px;
}

.lisadbackground .Administrateur .inputBox input {
    padding: 12px 10px;
    border: none;
    width: 92%;
    background: #1A2D40;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #fff;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    border-radius: 25px;
    font-size: 1em;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35); 
    transition: 0.5s;
    outline: none;
}

.lisadbackground .Administrateur .inputBox span {
    position: absolute;
    left: 0;
    font-size: 1em;
    font-weight: 300;
    padding: 12px 10px 12px 48px;
    pointer-events: none;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: rgba(187, 187, 187, 0.8);
}

.lisadbackground .Administrateur .inputBox input:valid ~ span,
.lisadbackground .Administrateur .inputBox input:focus ~ span{
    color: #9D8A57;
    border: 1px solid #9D8A57;
    background: #1A2D40;
    transform: translateX(25px ) translateY(-9px);
    font-size:0.9em;
    padding: 0 8px;
    border-radius: 10px;
    letter-spacing: 0.1em;
}

.lisadbackground .Administrateur .inputBox input:valid,
.lisadbackground .Administrateur .inputBox input:focus{
    border: 1px solid #9D8A57;
}

.lisadbackground .Administrateur .inputBox input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
    display: none;
}

.lisadbackground .Administrateur .inputBox i{
    position:absolute;
    top: 15px;
    left: 16px;
    width: 25px;
    padding: 2px 0;
    color: #9D8A57;
    border-right: 1px solid #9D8A57;
}

.lisadbackground .Administrateur .inputBox input[type="submit"]{
    width: 100%;
    padding: 12px 10px;
    background:#9D8A57;
    color: #1A2D40;
    padding: 10px 0;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    cursor: pointer;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
} 

.lisadbackground .Administrateur table thead {
    position: relative;
    width: 100%;
}

.lisadbackground .Administrateur table thead tr th {
    
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: 1rem;
    width: 200px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgb(0 0 0 / 20%);
    color: white;
    font-family: 'Merriweather', serif;
    font-size: 13px;
    text-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
    transition: all .3s;
    margin-bottom: 20px;
}
.lisadbackground .Administrateur th {
    width: 20%;
}
.lisadbackground .Administrateur table tbody tr td{
    position: relative;
    left: 0px;
    padding: 12px 10px;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: white;
}

.lisadbackground .Administrateur table tbody tr td a img{
    position: relative;
    width: 40px;
    padding: 5px;
    cursor: pointer;
}

.lisadbackground .Administrateur a.login{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: #9D8A57;
    padding: 10px 20px;
    margin: 8px 4px;
    text-decoration: none;
    border: 1px solid #9D8A57;
    border-radius: 10px;
}

.lisadbackground .Administrateur p{
    display: flex;
    justify-content: center;
    align-items: center;
}

.lisadbackground .Administrateur p a.login{
    cursor: pointer;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: white;
    padding: 10px 20px;
    margin: 8px 4px;
    text-decoration: none;
    border: 1px solid white;
    border-radius: 10px;
}
/*-------------------------------------------------------------------------- Liste commande -------------------------------------------------------------------------------------*/
.listedescommande {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1A2D40;
}

.listedescommande h1 {
    position: absolute;
    top: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    font-size: 2em;
    letter-spacing: 0.1em;
}

.listedescommande a.link {
    position: absolute;
    top: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: #9D8A57;
    padding: 10px 20px;
    margin: 8px 4px;
    text-decoration: none;
    border: 1px solid #9D8A57;
    border-radius: 10px;
}

.listedescommande .tabCommandes {
    position: absolute;
    top: 21%;
    display: block;
    overflow: auto;
    max-height: 520px;
    width: 100%;
    max-width: 1155px;
    padding: 10px;
}

.listedescommande .tabCommandes th {
    background: #9D8A57;
    color: #1A2D40;
    padding: 6px 5px;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35),
    inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35),
    inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
}

.listedescommande .tabCommandes td {
    position: relative;
    left: 0px;
    padding: 12px 10px;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: rgba(187, 187, 187, 0.8);
    max-width: 350px;
    overflow: hidden;
    text-align: center;
}

.listedescommande .tabCommandes::-webkit-scrollbar {
    width: 0.6em;
    background-color: #1A2D40;
}
.listedescommande .tabCommandes::-webkit-scrollbar {
    width: 0.6em;
    background-color: #1A2D40;
}

.listedescommande .tabCommandes::-webkit-scrollbar-thumb {
    background-color: #9D8A57;
    border-radius: 10px;
}

.listedescommande .tabCommandes::-webkit-scrollbar-thumb:hover {
    background-color: #6A5D3E;
}

/*------------------------------------------------------informations_personnelles------------------------------------------------------------------------------*/

.info_perso:root {
    --font: "EB Garamond", serif;
    --font-title: "Playfair Display", serif;
    --font-sans-serif: "Manrope", sans-serif;
    --black: #1c1f33;
    --black--acc: #222;
    --gray: #eee;
    --gray-1: #ededed;
}

@mixin double-border {
    border: 2px solid transparent;
    outline: 3px solid var(--black);
    box-shadow: inset 0 0 0 1px var(--black);/* Ajout d'une ombre pour créer l'effet de bordure double*/
}

.info_perso {
    font-size: 1.1rem;
    background: var(--preview-bg);
    font-family: var(--font);
    color: var(--black);
    background: url("https://img.freepik.com/free-photo/cardboard-sheet-paper-abstract-texture-background_7182-2105.jpg?size=626&ext=jpg");
    background-repeat: repeat;
    padding: 4rem 2rem;
    line-height: 1.3;
    text-align: left;
    column-break-inside: avoid;
}
.info_perso a {
    text-decoration: none;
    display: block;
    color: var(--black);
}
.info_perso a:hover,
.info_perso a:focus,
.info_perso a:active,
.info_perso a:visited {
    color: var(--black--acc);
}
.main__wrapper {
    max-width: 1135px;
    margin: auto;
}
.info_perso h1 {
    font: 50px/1 "Playfair Display SC";
    text-align: center;
}
@media (min-width: 700px) {
    .heading {
        font: 70px/1 "Playfair Display SC";
    }
}
.info_perso h3 {
    font: italic 20px var(--font-title);
    margin-bottom: 1rem;
}
.info_perso h4 {
    font: 20px/1.2 var(--font-title);
}
.info_perso h5 {
    font: 700 20px/1 var(--font);
    transition: 0.3s ease;
}
.info_perso p {
    line-height: 1.3;
}
.info_perso p a {
    display: inline;
}
.info_perso em {
    font-style: italic;
}
.info_perso .title--large {
    font-family: var(--font-title);
    font-size: 42px;
    font-style: italic;
    text-align: left;
    margin-bottom: 0.8rem;
}
@media (min-width: 700px) {
    .title--large {
    font-size: 42px;
    margin: 0;
    }
}
@media (min-width: 1160px) {
    main {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 23%;
    grid-template-rows: repeat(5, auto);
    grid-gap: 1.2rem;
    }
}
.info_perso main h1, main aside {
    grid-column: 1/-1;
}
@media (min-width: 700px) {
    main .main-title {
    grid-column: 1/-1;
    }
}
@media (min-width: 1024px) {
    main .main-title {
    grid-column: 1/-2;
    }
}
@media (min-width: 700px) {
    main .terrarium,
    .info_perso .terrarium1,
    .info_perso .terrarium2 {
    grid-column: 1/-1;
    }
}
@media (min-width: 1024px) {
    main .terrarium,
    .info_perso .terrarium1,
    .info_perso .terrarium2 {
    grid-column: 3/span 2;
    }
}
@media (min-width: 700px) {
    main .main-text {
    grid-column: span 5;
    }
}
@media (min-width: 1024px) {
    main .main-text {
    grid-column: span 2;
    }
}
@media (min-width: 700px) {
    main .sidebar {
    grid-column: 1/-1;
    }
}
@media (min-width: 1024px) {
    main .sidebar {
    grid-row: 3/9;
    grid-column: 5/6;
    }
}
.info_perso main .social {
    grid-column: 1/-2;
    grid-row: 8/9;
}
.info_perso main .article-bar-1 {
    grid-row: span 4;
}
@media (min-width: 700px) {
    main .hogwarts {
    grid-row: span 3;
    }
}
@media (min-width: 1024px) {
    main .hogwarts {
    grid-column: 3;
    grid-row: span 2;
    }
}
@media (min-width: 700px) {
    main .menu {
    grid-column: 1/-1;
    grid-row: 13;
    }
}
@media (min-width: 1024px) {
    main .menu {
    grid-row: 7/8;
    grid-column: 2/4;
    }
}
@media (min-width: 700px) and (max-width: 1024px) {
    main .toggles {
    grid-column: 3/6;
    grid-row: 10/13;
    }
}
@media (min-width: 700px) and (max-width: 1024px) {
    main .plan {
    grid-column: span 4;
    }
}
@media (min-width: 700px) and (max-width: 1024px) {
    main .style,
    main .magazine,
    main .pasta {
    grid-column: 1/3;
    }
}
.info_perso main .cssgrid-collection {
    grid-column: 1/-1;
    grid-row: 9;
}
.info_perso .span--2 {
    grid-column: span 2;
}
.info_perso .long--2 {
    grid-row: span 2;
}
.info_perso .long--4 {
    grid-row: span 4;
}
.info_perso .with-border {
    border-top: 1px solid;
    padding-top: 0.6rem;
}
.info_perso img {
    width: 100%;
    filter: grayscale(95%);
    margin-bottom: 0.5rem;
    border: 1px solid var(--black);
    transition: 0.3s ease;
}
.info_perso img.chateau {
    width: auto;
}
.info_perso figcaption {
    font-style: italic;
    font-size: 80%;
    text-align: center;
}

.info_perso figcaption .interview{
    font-weight: bold;
}
.info_perso aside {
    text-align: center;
    padding: 3px 0;
    border: solid #1A2D40;
    border-width: 2px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 1.5rem 0;
}
@media (min-width: 700px) {
    aside {
    margin: 0;
    }
}
.info_perso aside > div {
    display: flex;
    align-items: center;
    border: solid #1A2D40;
    border-width: 1px 0;
}
.info_perso aside > div > div {
    flex: 1;
    padding: 8px;
}
@media (min-width: 700px) {
    .multi-column {
    column-count: 2;
    column-gap: 1.3rem;
    margin-top: 0.75rem;
    }
    .multi-column-3 {
    column-count: 3;
    }
}
.info_perso .sidebar {
    margin-top: 3rem;
}
@media (min-width: 700px) and (max-width: 1024px) {
    .sidebar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0;
    }
    .sidebar h3 {
    width: 100%;
    text-align: center;
    }
    .sidebar > a {
    flex: 0 1 48%;
    margin: 1.5rem 0;
    padding: 0;
    }
    .sidebar .slack-ui {
    border-top: 0;
    }
    .sidebar .pie {
    order: 3;
    }
}
@media (min-width: 1024px) {
    .sidebar {
    display: block;
    border-left: 1px solid;
    /* padding-left: 1.2rem; */
    margin: 0;
    }
}
.info_perso .main-text.multi-column {
    margin: 0;
}
.info_perso .main-text.multi-column p {
    margin-bottom: 0.8rem;
}
.info_perso .hogwarts {
    text-align: center;
    height: 97.3%;
    border: 2px solid transparent;
    outline: 3px solid #1A2D40;
    box-shadow: inset 0 0 0 1px #1A2D40;
    width: calc(100% - 4px);
    margin: 1.5rem auto;
    overflow: hidden;
}

@include double-border;
@media (min-width: 700px) {
    .hogwarts {
    margin: 0;
    }
}
.info_perso .hogwarts__title {
    font: 800 24px/1 var(--font-sans-serif);
    text-transform: uppercase;
    background: var(--black);
    color: var(--gray);
    padding: 0.8rem 0.8rem 0.9rem;
    transition: 0.2s ease;
}
@media (min-width: 700px) and (max-width: 1024px) {
    .hogwarts__title {
    font: 800 21px/1.2 var(--font-sans-serif);
    padding: 1.5rem 0.5rem;
    }
}
.info_perso .hogwarts__image {
    height: 100%;
    position: relative;
}
.info_perso .hogwarts__image img {
    transform: rotate(60deg);
    height: 150%;
    position: absolute;
    border: 0;
    width: 250%;
    left: -70%;
    bottom: -35%;
}
@media (min-width: 700px) and (max-width: 1024px) {
    .hogwarts__image img {
    bottom: -20%;
    }
}
.info_perso .hogwarts__image span {
    font-style: italic;
    max-width: 110px;
    position: absolute;
    top: 7%;
    left: 18%;
    font-size: 22px;
    line-height: 0.9;
    transform: rotate(-5deg);
}
.info_perso .terrarium {
    position: relative;
    left:100px;
    bottom:53px;
}
.info_perso .terrarium1 {
    position: relative;
    left: 100px;
    top: 50px;
}
.info_perso .terrarium2{
    position: relative;
    left: 100px;

}
@media (min-width: 700px) {
    .terrarium,
    .terrarium1,
    .terrarium2 {
    margin: 0 0 1.5rem;
    }
}
.info_perso .terrarium figure {
    height: auto;
    width: 600px;
}
.info_perso .terrarium1 figure {
    height: auto;
    width: 600px;
}
.info_perso .terrarium2 figure {
    height: auto;
    width: 400px;
}
.info_perso .terrarium img {
    height: 94%;
    object-fit: cover;
    object-position: right;
}
.info_perso .terrarium1 img {
    height: 94%;
    object-fit: cover;
    object-position: right;
}
.info_perso .terrarium2 img {
    height: 100%;
    object-fit: cover;
    object-position: right;
    position: relative;
    top: 35px;
}
.info_perso .pie {
    line-height: 0;
    color: var(--gray);
    text-align: left;
}
.info_perso .pie__image {
    margin: 0;
    border: 0;
    max-height: 15rem;
    object-fit: cover;
}
.info_perso .pie__subtitle {
    background: #999;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.4rem 1rem;
    font: 14px var(--font-sans-serif);
    color: var(--gray);
}
.info_perso .pie__content {
    background: #666;
    padding: 1rem 1rem 1.2rem;
    color: var(--gray);
}
.info_perso .pie__content p {
    margin-top: 0.5rem;
}
.info_perso .sidebar-item {
    margin: 2rem 0;
    padding: 2rem 0 0;
}
.info_perso .sidebar-item h5 {
    text-align: center;
    width: 100%;
    padding: 0.5rem;
    margin: auto;
}
.info_perso .sidebar-item p {
    margin-top: 1rem;
}
.info_perso .sidebar-item:hover h5 {
    transition: 0.3s ease;
    background: var(--black);
    color: #fff;
}
.info_perso .item-with-image {
    margin-top: 1.5rem;
}
.info_perso .item-with-image h4 {
    font-size: 24px;
    text-align: left;
    margin-bottom: 0.5rem;
    transition: 0.2s ease;
}
@media (min-width: 700px) {
    .item-with-image {
    margin: 0;
    }
}
.info_perso .item-with-image:not(.cssgrid-collection):hover h4 {
    color: #fff !important;
    background: var(--black);
}
.info_perso .magazine {
    border: 1px solid;
    border-width: 1px 0;
    padding-bottom: 1rem;
}
.info_perso .menu {
    margin: 1.5rem 0;
}
@media (min-width: 1024px) {
    .menu {
    margin: 0;
    }
}
.info_perso .menu figure {
    height: 100%;
}
.info_perso .menu img {
    height: 90%;
    object-fit: cover;
    object-position: left;
}
.info_perso .cssgrid-collection {
    display: flex;
    align-content: stretch;
    border-top: 1px solid;
    padding-top: 1rem;
}
.info_perso .cssgrid-collection h4 {
    margin: 0 0 0.8rem;
}
.info_perso .cssgrid-collection__image {
    flex: 0 0 32%;
    margin-right: 1.5rem;
}
.info_perso .cssgrid-collection img {
    height: 100%;
    object-fit: cover;
    object-position: left;
}
.info_perso .cssgrid-collection p a {
    border-bottom: 1px dashed;
}
.info_perso .cssgrid-collection p a:hover {
    border-bottom: 1px solid;
}
@media (min-width: 1024px) {
    .captcha {
        margin-top: 0;
    }
}
.info_perso .workout {
    width: calc(100% - 4px);
    margin: 3rem auto 0.2rem;
}
@include double-border;
.workout__image {
    padding: 2px;
}
.info_perso .workout__image img {
    height: 16rem;
    object-fit: cover;
    object-position: left;
    border: none;
}
@media (min-width: 1024px) {
    .workout__image img {
    height: 25rem;
    }
}
.info_perso .workout__blurb {
    font: 22px/1.1 var(--font-sans-serif);
    text-align: center;
    padding: 0.5rem;
    color: var(--black);
    margin: -1rem 0.5rem 0.3rem;
}
.info_perso .workout__title {
    font: 18px/1.1 var(--font-sans-serif);
    text-transform: uppercase;
    text-align: center;
    padding: 1rem;
    background: var(--black);
    color: var(--gray);
    transition: 0.2s ease;
}
.info_perso .social {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: max-content auto;
    color: var(--gray);
    text-align: left;
}
.info_perso .social__image {
    margin: 0;
    border: 0;
    grid-row: span 2;
    height: 100%;
    object-fit: cover;
}
.info_perso .social__subtitle {
    background: #999;
    text-transform: uppercase;
    line-height: 1;
    padding: 0.4rem 1rem;
    color: var(--gray);
    font: 14px var(--font-sans-serif);
}
.info_perso .social__content {
    background: #666;
    padding: 1rem;
    color: var(--gray);
    grid-column: 2;
}
.info_perso .plan {
    padding-bottom: 1rem;
}
@media (min-width: 700px) and (max-width: 1024px) {
    .plan {
    grid-column: span 3;
    margin: 0 0 1.5rem;
    }
}
@media (min-width: 1024px) {
    .plan {
    border-bottom: 1px solid;
    }
}
.info_perso .pie:hover img,
.info_perso .social:hover img,
.info_perso .menu:hover img,
.info_perso .terrarium:hover img,
.info_perso .terrarium1:hover img,
.info_perso .terrarium2:hover img,
.info_perso .plan:hover img,
.info_perso .toggles:hover img,
.info_perso .workout:hover img,
.info_perso main .cssgrid-collection:hover img {
    filter: grayscale(0);
}
.info_perso .workout:hover .workout__title {
    background: transparent;
    color: var(--black);
}
.info_perso .hogwarts:hover .hogwarts__title {
    background: transparent;
    color: var(--black);
}
.info_perso .retourgazette{
cursor: pointer;
background: inherit;
font-family: 'EB+Garamond', serif;
font-weight: 300;
font-size: 1.1em;
transition: 0.5s;
letter-spacing: 0.05em;
padding: 10px 20px;
text-decoration: none;
border-radius: 10px;
}
.info_perso .jjba {
    filter: grayscale(40%) !important;
}
.info_perso .jjba :hover{
    filter: sepia(80%);
}
@media (max-width: 1150px){
    .info_perso .cssgrid-collection__image{
        display: none;
    }
}
/* ---------------------------------------------------------------------------------BOUTIQUE-------------------------------------------------------------------------------- */

/* -----------------------------------------Carte --------------------------------------------*/
.Artefacts_magiques{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../Image/bg_Artefacts_magiques.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

/* baguette */

.Baguette{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../Image/bg_Baguette.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

/* Balais */

.Balais{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../Image/bg_Balais.jpeg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

/* Bonbon */

.Bonbon{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../Image/bg_Bonbon.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

/* Brick_à_brack */

.Brick_à_brack{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../Image/bg_Brick_à_brack.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

/* Communication */

.Communication{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../Image/bg_Communication.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

/* Equipement_botanique */

.Equipement_botanique{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../Image/bg_Equipement_botanique.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

/* Farce_et_attrape */

.Farce_et_attrape{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../Image/bg_Farce_et_attrape.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

/* Livres */

.Livres{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../Image/bg_Livres.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

/* Magie_noire */

.Magie_noire{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../Image/bg_Magie_noire.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

/* Potion */

.Potion{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../Image/bg_Potion.png);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

/* Transport */

.Transport{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../Image/bg_Transport.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

.travel{
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

.link {
    position: relative;
    margin-right: 20px;
    width: fit-content;
    text-decoration: 0;
    background-color: #1a2d40;
    opacity: 0.9;
    color: #9d8a57;
    padding: 10px 25px;
    border-radius: 6px;
    border: 2px solid #9d8a57;
    font-size: 15px; 
}
#spanpannier {
    position: absolute;
    top: -9px;
    right: -9px;
    background-color: #9d8a57;
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px; 
    color: #1a2d40;
}
.products_list {
    position: relative;
    overflow: auto;
    max-height: 700px;
    width: 100%;
    display: grid; /* Utilisation de la grille pour disposer les éléments */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Définition des colonnes de la grille avec une largeur minimale de 300px et une largeur maximale de 1 fraction de l'espace disponible */
    grid-gap: 25px; /* Espacement entre les éléments de la grille */
    padding: 20px;
    max-width: 1250px; /* Largeur maximale du conteneur des éléments */
}


.container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 20px 0 20px;
    width: 350px;
    height: 100%;
    transform-style: preserve-3d;/* Définit le style de transformation en 3D */
}

.card{
    position: relative;
    padding: 0;
    margin:0;
    width: 350px;
    height: 500px;
    perspective: 1000px;
    border-radius: 25px;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0, 0.75, 0.25, 1);/* Transition de l'effet de transformation avec une durée de 1 seconde et une fonction de courbe personnalisée (cubic-bezier) */
}
.card_display_none{
    display: none;
}
.card_display{
    display: block;
}
.content-card{
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    transform: rotateX(30deg) rotateY(30 deg);
    transition: all 0.15s ease-out;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 25px;
    border: 0px;
    filter: brightness(1.8);/* Applique un filtre de luminosité de 1.8 */
}

.content-card img {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 88%;
    object-fit: cover;/* Utilisation de "cover" pour ajuster la taille de l'image pour couvrir complètement le conteneur tout en préservant son aspect ratio */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 0px;
    border-radius: 25px;
    z-index: 1;
}

.image_product {
    position: absolute;
    top: 0;
    left: 0;
    height: 440px;
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:-1;
}
.image_product img {
    position:absolute;
    top: 0;
    left: 0;
    height: 440px;
    width: 350px;
    object-fit: cover;
    z-index:-1;
}
.content {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    z-index:-1;
}

.side2 {
    display: none;
}  

.Artefacts_magiques .name,
.Brick_à_brack .name,
.Livres .name {
    position:absolute;
    display: flex;
    align-items: center;
    text-align:center;
    justify-content: center;
    width: 250px;
    top: 17%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size: 22px;
    color: #000;
    z-index:2;
}

.Artefacts_magiques .descript,
.Brick_à_brack .descript,
.Livres .descript {
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 200px;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size:17px;
    color: #000;
    z-index:2;
}

.Artefacts_magiques .prix,
.Brick_à_brack .prix,
.Livres .prix {
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size: 24px;
    color: #000;
    z-index:2;
    font-family: 'EB Garamond', serif;
}

.Artefacts_magiques .prixpromo,
.Brick_à_brack .prixpromo,
.Livres .prixpromo {
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    top: 76%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size: 24px;
    color: #000;
    z-index:2;
    font-family: 'EB Garamond', serif;
}
.Baguette .name,
.Balais .name,
.Communication .name,
.Potion .name,
.Magie_noire .name{
    position:absolute;
    display: flex;
    align-items: center;
    text-align:center;
    justify-content: center;
    width: 250px;
    top: 17%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size: 22px;
    color: #9D8A57;
    z-index:2;
}
.Baguette .descript,
.Balais .descript,
.Communication .descript,
.Potion .descript,
.Magie_noire .descript {
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 200px;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size:17px;
    color: #9D8A57;
    z-index:2;
}

.Baguette .prix,
.Balais .prix,
.Communication .prix,
.Potion .prix,
.Magie_noire .prix {
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size: 24px;
    color: #9D8A57;
    z-index:2;
    font-family: 'EB Garamond', serif;
}
.Baguette .prixpromo,
.Balais .prixpromo,
.Communication .prixpromo,
.Potion .prixpromo,
.Magie_noire .prixpromo {
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    top: 76%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size: 24px;
    color: #9D8A57;
    z-index:2;
    font-family: 'EB Garamond', serif;
}
.Bonbon .name,
.Equipement_botanique .name,
.Farce_et_attrape .name,
.Transport .name {
    position:absolute;
    display: flex;
    align-items: center;
    text-align:center;
    justify-content: center;
    width: 250px;
    top: 17%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size: 22px;
    color: #010438;
    z-index:2;
}
.Bonbon .descript,
.Equipement_botanique .descript,
.Farce_et_attrape .descript,
.Transport .descript {
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 200px;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size:17px;
    color: #010438;
    z-index:2;
}
.Bonbon .prix,
.Equipement_botanique .prix,
.Farce_et_attrape .prix,
.Transport .prix {
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size: 24px;
    color: #010438;
    z-index:2;
    font-family: 'EB Garamond', serif;
}
.Bonbon .prixpromo,
.Equipement_botanique .prixpromo,
.Farce_et_attrape .prixpromo,
.Transport .prixpromo {
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    top: 76%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    font-size: 24px;
    color: #010438;
    z-index:2;
    font-family: 'EB Garamond', serif;
}
.space a { 
    position: absolute;
    top: 73%;
    left: 12%;
    width: 50px; 
    height: 40px;
    border-radius: 0%;
    z-index: 3;
}

.space a img.panierbleu{ 
    position: absolute;
    width: 50px; 
    height: 40px;
    border-radius: 0%;
}
.space img.icones{
    position: absolute;
    top: 6%;
    left: 73%;
    width: 50px; 
    height: 50px;
    border-radius: 0%;
    z-index: 3;
}
.content-card::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 88%;
    border-radius: 25px;
    mix-blend-mode: hard-light;
    background: radial-gradient(circle at var(--mouse-x, 0.5) 
                var(--mouse-y, 0.5), rgba(255, 255, 255, 0.2),transparent);
    pointer-events: none;
    transition: all 0.15s ease-out;
    z-index:2;
}
.side1::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 88%;
    border-radius: 25px;
    background-image: url('https://assets.codepen.io/13471/sparkles.gif');
    background-size: cover;
    background-repeat: no-repeat;
    animation: haloSparkle 15s ease infinite;
    z-index: 2;
    opacity:0.5;
}
/* Cacher la scrollbar */
::-webkit-scrollbar {
    width: 0;
    background-color: inherit;
}

/* Couleur de fond de la scrollbar */
::-webkit-scrollbar-thumb {
    background-color: inherit;
}

/* Couleur de fond de la scrollbar au survol */
::-webkit-scrollbar-thumb:hover {
    background-color: inherit;
}

/*--------------- Surface Pro 7 ---------------*/
@media (max-width: 1150px) {
    .products_list {
        max-width: 945px;    
    }
}
/*--------------- Surface Pro 7 ---------------*/
@media (max-width: 770px) {
    .products_list {
        max-width: 400px;
        left: 0;
    }
}
/*---------------------------------------------------------------POPUP BOUTIQUE ---------------------------------------------------------------------*/
.popupboutique {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.4);
}
.popupboutique .popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1A2D40;
    padding: 20px;
    border: 1px solid #9D8A57;
    width: 80%;
    max-width: 400px;
    color: white;
    text-align: center;
    justify-content: center;
    border-radius: 6px;
}
.popupboutique .popuptitre{
    position:relative;
    top:-5px;
}
.popupboutique p{
    position:relative;
    top:5px;
    color: rgba(187, 187, 187, 0.8);
}
.popupboutique.btn-inscription,
.popupboutique.btn-retour {
    cursor: pointer;
    padding: 10px 20px;
    margin: 10px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition-duration: 0.4s;
    border-radius: 6px;
}

.popupboutique .btn-retour {
    background-color: #9D8A57;
    color: white;
    border: 2px solid #9D8A57;
    position: relative;
    margin: 10px 10px 10px 10px;
    text-align: center;
    top: 10px;
    padding:2px;
    font-size: 15px;
    border-radius: 5px;
}
.popupboutique .btn-retour:hover {
    background-color: white;
    color: #9D8A57;
}

.popupboutique .btn-retour a{ 
    text-decoration: none;
    color: white;
}
.popupboutique .btn-retour a:hover {
    color: #9D8A57;
}
/*Panier CSS*/
.panier{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(../Image/bg_panier.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

.panier .travel{
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

.panier .link {
    position: relative;
    width: fit-content;
    text-decoration: 0;
    background-color: #1a2d40;
    opacity: 0.9;
    color: #9d8a57;
    padding: 10px 25px;
    border-radius: 6px;
    border: 2px solid #9d8a57;
    font-size: 13px; 
}
.panier span {
    position: absolute;
    top: -9px;
    right: -9px;
    background-color: #9d8a57;
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    color: #1a2d40;
}
.panier .checkboxes {
    background-color: #9d8a57;
}
.panier img {
    width: 40px;
    padding: 8px 0;
}
.panier section {
    width: 70%;
    background-color: #1a2d40;
    opacity: 0.9;
    padding: 10px;
    border-radius: 6px;
    border: 2px solid #9d8a57;
    max-height: 500px;
    overflow: auto;
}
.panier table {
    border-collapse: collapse;
    width: 100%;
    letter-spacing: 1px;
    font-size: 13px;
}
.panier th {
    padding: 10px 0;
    font-size: 15px;
    color: rgb(187, 187, 187);
}
.panier td {
    font-size:15px;
    text-align: center;
    color: rgb(187, 187, 187);
}

.panier td a {
    font-size:15px;
    text-align: center;
    color: rgb(187, 187, 187);
    text-decoration: none;
}

.panier tr {
    border-bottom: 0.5px solid #9d8a57;
}

.panier .total {
    height: 30px;
    color: rgb(187, 187, 187);
    font-weight: bold;
}
/*--------------- 910px ---------------*/
@media (max-width: 910px) { 
    .panier section {
        width: 65%;
    }
}
/*--------------- 790px ---------------*/
@media (max-width: 790px) { 
    .panier section {
        width: 65%;
    }
    .panier .link {
        font-size: 13px;
        padding: 8px 15px;
    }
    .panier th, 
    .panier td,
    .panier td a {
        font-size: 10px;
        padding: 8px 0;
    }
}
@media (max-width: 640px) { 
    #rotate-device { 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 1.5em;
        z-index: 9999;
    }
    .panier .link {
        display: none;
    }
}

/* Samsung Galaxy S20 Ultra */
@media (max-width: 640px) and (orientation:landscape) {
    .panier section {
        width: 90%;
    }
    .panier .link {
        font-size: 12px;
        padding: 8px 15px;
    }
    .panier th, .panier td {
        font-size: 12px;
        padding: 8px 0;
    }
    .panier img {
        width: 30px;
        padding: 5px 0;
    }
    .panier .total {
        font-size: 12px;
    }
    #rotate-device { 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 1.5em;
        z-index: 9999;
    }
}
/*------------------------------------------------- Commande -------------------------------------------------------------*/

.achat{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    margin:0;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

.achat .sdb {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

.achat .sidebar {
    height: 100%;
    width: 23%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease-in-out;
}

.achat .sidebar > div {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.achat .sidebar .commandeslideh {
    font-size: 40px;
    margin-bottom: 10px;
    margin-top: -30px;
    text-align: center;
}

.achat .main-slide {
    height: 100%;
    position: absolute;
    top: 0;
    left: 23%;
    width: 77%;
    transition: transform 0.5s ease-in-out;
}

.achat .main-slide > div {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
}

.achat .down-button,
.achat .up-button{
    background-color: #fff;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 16px;
    padding: 15px;
}
.achat .down-button:hover,
.achat .up-button:hover{
    color: #222;
}
.achat .down-button:focus,
.achat .up-button:focus{
    outline: none;
}

.achat .sdb .controls button {
    position: absolute;
    left: 23%;
    top: 50%;
    z-index: 100;
}

.achat .sdb .controls .down-button {
    transform: translateX(-100%);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.achat .sdb .controls .up-button {
    transform: translateY(-100%);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.achat .sidebar .commandeslidep {
    text-align: center;
}

@media (max-width: 1460px) {
    .achat .down-button, .achat .up-button {
        background-color: #fff;
        border: none;
        color: #aaa;
        cursor: pointer;
        font-size: 16px;
        padding: 9px;
    }
    .achat .sdb .controls button {
        top: 21%;
    }
}

@media (max-width: 1020px) {
    .achat .sidebar .commandeslideh {
        font-size: 25px;
        margin-bottom: 10px;
        margin-top: -30px;
        text-align: center;
    }
    .achat .sidebar .commandeslidep {
        font-size: 15px;
    }
    .achat .down-button, .achat .up-button {
        background-color: #fff;
        border: none;
        color: #aaa;
        cursor: pointer;
        font-size: 16px;
        padding: 9px;
    }
}

@media (max-width: 870px) {
    .achat .sidebar .commandeslideh {
        font-size: 25px;
        margin-bottom: 10px;
        margin-top: -30px;
        text-align: center;
    }
    .achat .sidebar .commandeslidep {
        font-size: 15px;
    }
    .achat .down-button, .achat .up-button {
        background-color: #fff;
        border: none;
        color: #aaa;
        cursor: pointer;
        font-size: 16px;
        padding: 9px;
    }
}


@media (max-width: 640px) {
    .achat .sidebar .commandeslideh {
        font-size: 15px;

    }
    .achat .sidebar .commandeslidep {
        font-size: 10px;
    }
}

@media (max-width: 420px) {
    #rotate-device {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 1.5em;
        z-index: 9999;
    }
}
/* //////////////////slide1/////////////// */

.achat .Commande{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height:500px;
    background-image: linear-gradient(45deg, rgb(11,46,6) 0%, rgb(11,46,6) 28%,rgb(32,66,27) 28%, rgb(32,66,27) 31%,rgb(48,96,64) 31%, rgb(48,96,64) 59%,rgb(69,125,81) 59%, rgb(69,125,81) 66%,rgb(91,154,90) 66%, rgb(91,154,90) 68%,rgb(110,184,128) 68%, rgb(110,184,128) 94%,rgb(123,213,141) 94%, rgb(123,213,141) 100%),linear-gradient(112.5deg, rgb(11,46,6) 0%, rgb(11,46,6) 28%,rgb(32,66,27) 28%, rgb(32,66,27) 31%,rgb(48,96,64) 31%, rgb(48,96,64) 59%,rgb(69,125,81) 59%, rgb(69,125,81) 66%,rgb(91,154,90) 66%, rgb(91,154,90) 68%,rgb(110,184,128) 68%, rgb(110,184,128) 94%,rgb(123,213,141) 94%, rgb(123,213,141) 100%),linear-gradient(90deg, rgb(11,46,6) 0%, rgb(11,46,6) 28%,rgb(32,66,27) 28%, rgb(32,66,27) 31%,rgb(48,96,64) 31%, rgb(48,96,64) 59%,rgb(69,125,81) 59%, rgb(69,125,81) 66%,rgb(91,154,90) 66%, rgb(91,154,90) 68%,rgb(110,184,128) 68%, rgb(110,184,128) 94%,rgb(123,213,141) 94%, rgb(123,213,141) 100%),linear-gradient(135deg, rgb(11,46,6) 0%, rgb(11,46,6) 28%,rgb(32,66,27) 28%, rgb(32,66,27) 31%,rgb(48,96,64) 31%, rgb(48,96,64) 59%,rgb(69,125,81) 59%, rgb(69,125,81) 66%,rgb(91,154,90) 66%, rgb(91,154,90) 68%,rgb(110,184,128) 68%, rgb(110,184,128) 94%,rgb(123,213,141) 94%, rgb(123,213,141) 100%),linear-gradient(90deg, rgb(97,205,26),rgb(38,36,113)); background-blend-mode:overlay,overlay,overlay,overlay,normal;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

.achat .Commande .link {
    position: relative;
    margin: 10px;
    top: -40%;
    left: 0;
    width: fit-content;
    text-decoration: 0;
    background-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    color: white;
    padding: 10px 25px;
    border-radius: 6px;
    border: 2px solid #9d8a57;
    font-size: 15px;
    cursor: pointer;
}

.achat .Commande section {
    position: absolute;
    width: calc(100% - 20px);
    background: rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    border-radius: 6px;
    border: 2px solid #9d8a57;
    max-height: 300px;
    max-width: 1475px;
    overflow: auto;
}
.achat .Commande section::-webkit-scrollbar {
    width: 0.2em;
    background-color: inherit;
}

.achat .Commande section::-webkit-scrollbar-thumb {
background-color: inherit;
}

.achat .Commande section::-webkit-scrollbar-thumb:hover {
background-color: inherit;
}
.achat .Commande table {
    border-collapse: collapse;
    width: 100%;
    letter-spacing: 1px;
    font-size: 13px;
}
.achat .Commande th {
    padding: 15px 0;
    font-size: 15px;
    color: white;
}
.achat .Commande td {
    font-size: 12px;
    text-align: center;
    color: white;
    padding: 20px;
}

.achat .Commande tr {
    border-bottom: 0.5px solid #9d8a57;
}

.achat .Commande .total {
    height: 30px;
    color: white;
    font-weight: bold;
}

/* ////////////////slide2///////////////// */

.achat .sdb .main-slide .Facturationco{ 
    position: relative;
    background-image: linear-gradient(45deg, rgb(46,45,6) 0%, rgb(46,45,6) 28%,rgb(66,60,27) 28%, rgb(66,60,27) 31%,rgb(96,94,48) 31%, rgb(96,94,48) 59%,rgb(125,120,69) 59%, rgb(125,120,69) 66%,rgb(152,154,90) 66%, rgb(152,154,90) 68%,rgb(184,171,110) 68%, rgb(184,171,110) 94%,rgb(213,193,123) 94%, rgb(213,193,123) 100%),linear-gradient(112.5deg, rgb(46,45,6) 0%, rgb(46,45,6) 28%,rgb(66,60,27) 28%, rgb(66,60,27) 31%,rgb(96,94,48) 31%, rgb(96,94,48) 59%,rgb(125,120,69) 59%, rgb(125,120,69) 66%,rgb(152,154,90) 66%, rgb(152,154,90) 68%,rgb(184,171,110) 68%, rgb(184,171,110) 94%,rgb(213,193,123) 94%, rgb(213,193,123) 100%),linear-gradient(90deg, rgb(46,45,6) 0%, rgb(46,45,6) 28%,rgb(66,60,27) 28%, rgb(66,60,27) 31%,rgb(96,94,48) 31%, rgb(96,94,48) 59%,rgb(125,120,69) 59%, rgb(125,120,69) 66%,rgb(152,154,90) 66%, rgb(152,154,90) 68%,rgb(184,171,110) 68%, rgb(184,171,110) 94%,rgb(213,193,123) 94%, rgb(213,193,123) 100%),linear-gradient(135deg, rgb(46,45,6) 0%, rgb(46,45,6) 28%,rgb(66,60,27) 28%, rgb(66,60,27) 31%,rgb(96,94,48) 31%, rgb(96,94,48) 59%,rgb(125,120,69) 59%, rgb(125,120,69) 66%,rgb(152,154,90) 66%, rgb(152,154,90) 68%,rgb(184,171,110) 68%, rgb(184,171,110) 94%,rgb(213,193,123) 94%, rgb(213,193,123) 100%),linear-gradient(90deg, rgb(205,179,26),rgb(53,53,14)); background-blend-mode:overlay,overlay,overlay,overlay,normal;    background-attachment: fixed;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

.achat .sdb .main-slide .Facturationco .formco {
    position: absolute;
    top: 25%;
    left: 5%;
    width: 92%;
    background: rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    border-radius: 6px;
    border: 2px solid #9d8a57;
    max-height: 300px;
    overflow: auto;
    color: white;
    min-height: 185px;
    z-index: 0;
}
.achat .sdb .main-slide .Facturationco .link {
    position: relative;
    margin: 10px;
    top: 7%;
    left: 45%;
    width: fit-content;
    text-decoration: 0;
    background-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    color: white;
    padding: 10px 25px;
    border-radius: 6px;
    border: 2px solid #9d8a57;
    font-size: 15px;
    cursor: pointer;
}
.achat .sdb .main-slide .Facturationco h3 {
    margin:10px;
    display:flex;
    justify-content: center;
    opacity: .7;
    font-size: 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
}

.achat .sdb .main-slide .Facturationco section::-webkit-scrollbar {
    width: 0.2em; /* Largeur de la barre de défilement */
    background-color: inherit; /* Couleur de fond de la barre de défilement */
}

.achat .sdb .main-slide .Facturationco section::-webkit-scrollbar-thumb {
    background-color: inherit; /* Couleur de la poignée de la barre de défilement */
}

.achat .sdb .main-slide .Facturationco section::-webkit-scrollbar-thumb:hover {
    background-color: inherit; /* Couleur de la poignée de la barre de défilement au survol */
}

.achat .sdb .main-slide .Facturationco table {
    border-collapse: collapse;
    width: 100%;
    letter-spacing: 1px;
    font-size: 13px;
}
.achat .sdb .main-slide .Facturationco th {
    padding: 15px 0;
    font-size: 15px;
    color: white;
}
.achat .sdb .main-slide .Facturationco td {
    font-size:13px;
    text-align: center;
    color: white;
    padding: 20px;
}

.achat .sdb .main-slide .Facturationco tr {
    border-bottom: 0.5px solid #9d8a57;
}
/* popup */
.achat .sdb .main-slide .Facturationco #creerAdresseModal {
    display: none;
    position: absolute;
    top: 53%;
    left: 51%;
    width: 488px;
    height: 465px;
    transform: translate(-50%, -50%);
    background-color: #1A2D40;
    color: #9D8A57;
    padding: 20px;
    z-index: 2;
    min-height: 185px;
    font-family: 'Merriweather', serif;
    font-size: 13px;
    border-radius: 15px;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    box-shadow: 20px 20px 40px -6px rgb(0 0 0 / 20%);
    text-align: center;
} 

.achat .sdb .main-slide .Facturationco #creerAdresseModal input{
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: 1rem;
    width: 200px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgb(0 0 0 / 20%);
    color: white;
    font-family: 'Merriweather', serif;
    font-size: 13px;
    text-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
    transition: all .3s;
    margin: 0 4px 20px;
}
.achat .sdb .main-slide .Facturationco button.jauneferme{
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: 1rem;
    width: 200px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgb(0 0 0 / 20%);
    color: white;
    font-family: 'Merriweather', serif;
    font-size: 13px;
    text-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
    transition: all .3s;
    margin-bottom: 20px;
}


/* ////////////////slide3///////////////// */

.achat .sdb .main-slide .Livraisonco{ 
    position: relative;
    background-image: linear-gradient(45deg, rgb(37, 6, 46) 0%, rgb(37, 6, 46) 28%,rgb(66, 27, 59) 28%, rgb(66, 27, 59) 31%,rgb(96, 48, 72) 31%, rgb(96, 48, 72) 59%,rgb(125, 69, 85) 59%, rgb(125, 69, 85) 66%,rgb(154, 90, 97) 66%, rgb(154, 90, 97) 68%,rgb(184, 111, 110) 68%, rgb(184, 111, 110) 94%,rgb(213, 132, 123) 94%, rgb(213, 132, 123) 100%),linear-gradient(112.5deg, rgb(37, 6, 46) 0%, rgb(37, 6, 46) 28%,rgb(66, 27, 59) 28%, rgb(66, 27, 59) 31%,rgb(96, 48, 72) 31%, rgb(96, 48, 72) 59%,rgb(125, 69, 85) 59%, rgb(125, 69, 85) 66%,rgb(154, 90, 97) 66%, rgb(154, 90, 97) 68%,rgb(184, 111, 110) 68%, rgb(184, 111, 110) 94%,rgb(213, 132, 123) 94%, rgb(213, 132, 123) 100%),linear-gradient(90deg, rgb(37, 6, 46) 0%, rgb(37, 6, 46) 28%,rgb(66, 27, 59) 28%, rgb(66, 27, 59) 31%,rgb(96, 48, 72) 31%, rgb(96, 48, 72) 59%,rgb(125, 69, 85) 59%, rgb(125, 69, 85) 66%,rgb(154, 90, 97) 66%, rgb(154, 90, 97) 68%,rgb(184, 111, 110) 68%, rgb(184, 111, 110) 94%,rgb(213, 132, 123) 94%, rgb(213, 132, 123) 100%),linear-gradient(135deg, rgb(37, 6, 46) 0%, rgb(37, 6, 46) 28%,rgb(66, 27, 59) 28%, rgb(66, 27, 59) 31%,rgb(96, 48, 72) 31%, rgb(96, 48, 72) 59%,rgb(125, 69, 85) 59%, rgb(125, 69, 85) 66%,rgb(154, 90, 97) 66%, rgb(154, 90, 97) 68%,rgb(184, 111, 110) 68%, rgb(184, 111, 110) 94%,rgb(213, 132, 123) 94%, rgb(213, 132, 123) 100%),linear-gradient(90deg, rgb(100, 205, 26),rgb(46, 36, 113)); background-blend-mode:overlay,overlay,overlay,overlay,normal;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}
.achat .sdb .main-slide .Livraisonco .formco {
    position: absolute;
    top: 25%;
    left: 5%;
    width: 92%;
    background: rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    border-radius: 6px;
    border: 2px solid #9d8a57;
    max-height: 300px;
    overflow: auto;
    color: white;
    min-height: 185px;
    z-index: 0;
}
.achat .sdb .main-slide .Livraisonco .link {
    position: relative;
    margin: 10px;
    top: 7%;
    left: 45%;
    width: fit-content;
    text-decoration: 0;
    background-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    color: white;
    padding: 10px 25px;
    border-radius: 6px;
    border: 2px solid #9d8a57;
    font-size: 15px;
    cursor: pointer;
}
.achat .sdb .main-slide .Livraisonco h3 {
    margin:10px;
    display:flex;
    justify-content: center;
    opacity: .7;
    font-size: 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
}

.achat .sdb .main-slide .Livraisonco section::-webkit-scrollbar {
    width: 0.2em;
    background-color: inherit;
}

.achat .sdb .main-slide .Livraisonco section::-webkit-scrollbar-thumb {
background-color: inherit;
}

.achat .sdb .main-slide .Livraisonco section::-webkit-scrollbar-thumb:hover {
background-color: inherit;
}
.achat .sdb .main-slide .Livraisonco table {
    border-collapse: collapse;
    width: 100%;
    letter-spacing: 1px;
    font-size: 13px;
}
.achat .sdb .main-slide .Livraisonco th {
    padding: 15px 0;
    font-size: 15px;
    color: white;
}
.achat .sdb .main-slide .Livraisonco td {
    font-size:13px;
    text-align: center;
    color: white;
    padding: 20px;
}

.achat .sdb .main-slide .Livraisonco tr {
    border-bottom: 0.5px solid #9d8a57;
}

/* popup */
.achat .sdb .main-slide .Livraisonco #rougecreerAdresseModal {
    display: none;
    position: absolute;
    top: 53%;
    left: 51%;
    width: 488px;
    height: 465px;
    transform: translate(-50%, -50%);
    background-color: #1A2D40;
    color: #9D8A57;
    padding: 20px;
    z-index: 2;
    min-height: 185px;
    font-family: 'Merriweather', serif;
    font-size: 13px;
    border-radius: 15px;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    box-shadow: 20px 20px 40px -6px rgb(0 0 0 / 20%);
    text-align: center;
} 

.achat .sdb .main-slide .Livraisonco #rougecreerAdresseModal input{
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: 1rem;
    width: 200px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgb(0 0 0 / 20%);
    color: white;
    font-family: 'Merriweather', serif;
    font-size: 13px;
    text-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
    transition: all .3s;
    margin: 0 4px 20px;
}
.achat .sdb .main-slide .Livraisonco button.rougeferme{
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: 1rem;
    width: 200px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    box-shadow: 4px 4px 60px rgb(0 0 0 / 20%);
    color: white;
    font-family: 'Merriweather', serif;
    font-size: 13px;
    text-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
    transition: all .3s;
    margin-bottom: 20px;
}
/* ////////////////slide5///////////////// */

.achat .sdb .main-slide  .paiement{ 
    position: relative;
    background-image: linear-gradient(45deg, rgb(9,6,46) 0%, rgb(9,6,46) 28%,rgb(27,50,66) 28%, rgb(27,50,66) 31%,rgb(48,64,96) 31%, rgb(48,64,96) 59%,rgb(69,103,125) 59%, rgb(69,103,125) 66%,rgb(90,117,154) 66%, rgb(90,117,154) 68%,rgb(110,130,184) 68%, rgb(110,130,184) 94%,rgb(123,172,213) 94%, rgb(123,172,213) 100%),linear-gradient(112.5deg, rgb(9,6,46) 0%, rgb(9,6,46) 28%,rgb(27,50,66) 28%, rgb(27,50,66) 31%,rgb(48,64,96) 31%, rgb(48,64,96) 59%,rgb(69,103,125) 59%, rgb(69,103,125) 66%,rgb(90,117,154) 66%, rgb(90,117,154) 68%,rgb(110,130,184) 68%, rgb(110,130,184) 94%,rgb(123,172,213) 94%, rgb(123,172,213) 100%),linear-gradient(90deg, rgb(9,6,46) 0%, rgb(9,6,46) 28%,rgb(27,50,66) 28%, rgb(27,50,66) 31%,rgb(48,64,96) 31%, rgb(48,64,96) 59%,rgb(69,103,125) 59%, rgb(69,103,125) 66%,rgb(90,117,154) 66%, rgb(90,117,154) 68%,rgb(110,130,184) 68%, rgb(110,130,184) 94%,rgb(123,172,213) 94%, rgb(123,172,213) 100%),linear-gradient(135deg, rgb(9,6,46) 0%, rgb(9,6,46) 28%,rgb(27,50,66) 28%, rgb(27,50,66) 31%,rgb(48,64,96) 31%, rgb(48,64,96) 59%,rgb(69,103,125) 59%, rgb(69,103,125) 66%,rgb(90,117,154) 66%, rgb(90,117,154) 68%,rgb(110,130,184) 68%, rgb(110,130,184) 94%,rgb(123,172,213) 94%, rgb(123,172,213) 100%),linear-gradient(90deg, rgb(26,174,205),rgb(36,85,113)); background-blend-mode:overlay,overlay,overlay,overlay,normal;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}
.achat .sdb .main-slide  .paiement .formco {
    position:absolute;
    top:38%;
    left: 1%;
    width: calc(100% - 50px);
    background: rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 6px;
    border: 2px solid #9d8a57;
    max-height: 500px;
    overflow: auto;
    color: white;
    min-height: 185px;
}

.achat .sdb .main-slide  .paiement h3 {
    margin: 10px;
    display:flex;
    justify-content: center;
    opacity: .7;
    font-size: 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
}


.achat .sdb .main-slide .cartebleue{
    position: relative;
    display: flex;
    align-content: center;
    top: 65px;
    left: 0;
    margin: auto;
}
.achat .sdb .main-slide  .paiement .pasledroit{
    position:absolute;
    top:35%;
    left:5%;
    width:90%;
    background: rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 6px;
    border: 2px solid #9d8a57;
    max-height: 500px;
    overflow: auto;
    color: red;
    text-align: center;
}
@media (max-width: 1100px) {
    .achat .sdb .main-slide .paiement .pasledroit {
        left: 4%;
    }
}

@media (max-width: 685px) {
    .achat .sdb .main-slide .cartebleue {
        top: 90px;
    }
    .achat .sdb .main-slide .paiement h3 {
        font-size: 30px;
    }
    .achat .sdb .main-slide .paiement .pasledroit {
        left: 2%;
        top: 30%;
    }
}
@media (max-width: 500px) {
    .achat .sdb .main-slide .paiement h3 {
        font-size: 15px;
    }
    .achat .sdb .main-slide .paiement .pasledroit {
        top: 19%;
        left: 2%;
    }
}
@media (max-width: 440px) {
    .achat .sdb .main-slide .cartebleue {
        top: 100px;
    }
}
/* ////////////////slide6///////////////// */

.achat .sdb .main-slide  .checkout{ 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: linear-gradient(45deg, rgb(26,22,22) 0%, rgb(26,22,22) 28%,rgb(46,46,46) 28%, rgb(46,46,46) 31%,rgb(75,75,75) 31%, rgb(75,75,75) 59%,rgb(98,98,98) 59%, rgb(98,98,98) 66%,rgb(131,131,131) 66%, rgb(131,131,131) 68%,rgb(164,163,163) 68%, rgb(164,163,163) 94%,rgb(199,199,199) 94%, rgb(199,199,199) 100%),linear-gradient(112.5deg, rgb(26,22,22) 0%, rgb(26,22,22) 28%,rgb(46,46,46) 28%, rgb(46,46,46) 31%,rgb(75,75,75) 31%, rgb(75,75,75) 59%,rgb(98,98,98) 59%, rgb(98,98,98) 66%,rgb(131,131,131) 66%, rgb(131,131,131) 68%,rgb(164,163,163) 68%, rgb(164,163,163) 94%,rgb(199,199,199) 94%, rgb(199,199,199) 100%),linear-gradient(90deg, rgb(26,22,22) 0%, rgb(26,22,22) 28%,rgb(46,46,46) 28%, rgb(46,46,46) 31%,rgb(75,75,75) 31%, rgb(75,75,75) 59%,rgb(98,98,98) 59%, rgb(98,98,98) 66%,rgb(131,131,131) 66%, rgb(131,131,131) 68%,rgb(164,163,163) 68%, rgb(164,163,163) 94%,rgb(199,199,199) 94%, rgb(199,199,199) 100%),linear-gradient(135deg, rgb(26,22,22) 0%, rgb(26,22,22) 28%,rgb(46,46,46) 28%, rgb(46,46,46) 31%,rgb(75,75,75) 31%, rgb(75,75,75) 59%,rgb(98,98,98) 59%, rgb(98,98,98) 66%,rgb(131,131,131) 66%, rgb(131,131,131) 68%,rgb(164,163,163) 68%, rgb(164,163,163) 94%,rgb(199,199,199) 94%, rgb(199,199,199) 100%),linear-gradient(90deg, rgb(205,207,203),rgb(26,22,22)); background-blend-mode:overlay,overlay,overlay,overlay,normal;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    overflow:hidden;
    font-family: 'Merriweather', serif;
}

.achat .sdb .main-slide  .caddie {
    color: white;
    opacity: .7;
    font-size: 1rem;
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
    text-align: center;
}

.achat .sdb .main-slide  .ckt {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    display: flex;
    align-items: center;
    padding: 16px 20px 16px 15px;
    height: 56px;
    position: relative;
    font-family: inherit;
    font-size: 1em;
    line-height: 1em;
    font-weight: 500;
    background-color: #1a2d40;
    border:2px solid #9d8a57;
    cursor: pointer;
    border-radius: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 0.2s ease, background-color 150ms ease;
}

.achat .sdb .main-slide  .ckt span, #cart{
    color:#9d8a57
}

.achat .sdb .main-slide  .ckt span:hover,
.achat .sdb .main-slide  .ckt span:active{
    color:#1a2d40;
}

.achat .sdb .main-slide  .ckt:focus {
    box-shadow: 0 8px 64px 16px rgba(0, 0, 0, 0.5);
    outline: none;
}

.achat .sdb .main-slide  .ckt:hover,
.achat .sdb .main-slide  .ckt:active {
    background-color: rgb(187, 187, 187);
    border: 2px solid #1a2d40;
}

.achat .sdb .main-slide  #cart {
    margin-right: 12px;
    transform-origin: 20% 100%;
    opacity: 1;
}

/* Animation keyframes slide-up-fade */
@keyframes slide-up-fade {
    from {
        /* Définit l'état initial de l'animation */
        transform: translateY(0);
        opacity: 1;
    }
    to {
        /* Définit l'état final de l'animation */
        transform: translateY(-16px);
        opacity: 0;
    }
}

/* Animation keyframes roll-out */
@keyframes roll-out {
    0% {
        /* Définit l'état initial de l'animation */
        transform: translate(0) rotate(0);
    }
    20% {
        /* Définit une étape intermédiaire de l'animation */
        transform: translate(0) rotate(-70deg);
        opacity: 1;
    }
    50% {
        /* Définit une autre étape intermédiaire de l'animation */
        transform: translate(0) rotate(-45deg);
        opacity: 1;
    }
    100% {
        /* Définit l'état final de l'animation */
        transform: translate(140px) rotate(-47deg);
        opacity: 0;
    }
}

.achat .sdb .main-slide  .checked-out span {
    animation: slide-up-fade 150ms 1;
    animation-fill-mode: both;
}

.achat .sdb .main-slide  .checked-out #cart {
    animation: roll-out 1s 1 150ms;
    animation-timing-function: ease-in;
    animation-fill-mode: both;
    color: #1a2d40;
}

@keyframes checkmark {
    /* Définition de l'animation checkmark */
    from {
        stroke-dashoffset: 26px; /* Décalage du trait de contour au départ de l'animation */
    }
    to {
        stroke-dashoffset: 0; /* Décalage du trait de contour à la fin de l'animation */
    }
}

.achat .sdb .main-slide .checkout #check {
    position: absolute;
    transform: translate(0%, 100%);
}


.achat .sdb .main-slide  #check path {
    stroke-dasharray: 26px;
    stroke-dashoffset: 26px;
}

.achat .sdb .main-slide  .checked-out #check path {
    animation: checkmark 150ms 1 1150ms;
    animation-timing-function: ease-in;
    animation-fill-mode: both;
}

.achat .sdb .main-slide  .checked-out .ckt{
    background-color: #9d8a57;
    transition-delay: 1150ms;
}
/*-------------------------------------chateau------------------------------*/
.chateau{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    height: 100%;
    overflow: hidden;
    background-image: url('../Image/train4.jpg');
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}
.chateau p{
    position: absolute;
    font-size: 25px;
    background-color: #1A2D4A;
    color: #9D8A57;
    border: 2px solid #9D8A57;
    padding: 10px;
    border-radius: 6px;
    bottom: 30px;
    right: 30px;
}
.chateau .retouraccueil{
    position: absolute;
    font-size: 20px;
    background-color: inherit;
    color: #9D8A57;
    border: 2px solid #9D8A57;
    padding: 10px;
    border-radius: 6px;
    top: 30px;
    left: 30px;
    text-decoration: none;
}
.patronus{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    height: 100%;
    overflow: hidden;
    background-image: url('../Image/patro.jpg');
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Merriweather', serif;
}
.patronus h2{
    color: whitesmoke;
    position: absolute;
    bottom: 37%;
    left: 53%;
    font-size: 30px;
}
.patronus p{
    position: absolute;
    color: white;
    left: 53%;
    bottom: 29%;
    font-size: 20px;
}
/* ---------------------------------------------------------------------------------ADMIN-------------------------------------------------------------------------------- */
/*--------------------------------------Admin listing, créer, modifier( TVA )------------------------------------*/

.Panel_TVA{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1A2D40;
}

.Panel_TVA #rotate-device {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.5em;
    z-index: 9999;
}

.Panel_TVA .Administrateur {
    padding: 40px;
    border-radius: 20px;
    border: 8px solid #1A2D40;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
}  

.Panel_TVA .Administrateur .form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 25px;
} 

.Panel_TVA .Administrateur .form .admintitleh2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    font-size: 2em;
    letter-spacing: 0.1em;
}

.Panel_TVA .Administrateur .form .inputBox {
    position: relative;
    width: 300px;
}

.Panel_TVA .Administrateur .form .inputBox input {
    padding: 12px 0px 12px 40px;
    border: none;
    width: 92%;
    background: #1A2D40;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #fff;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    border-radius: 25px;
    font-size: 1em;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35); 
    transition: 0.5s;
    outline: none;
}

.Panel_TVA .Administrateur .form .inputBox span {
    position: absolute;
    top:0;
    left: 0;
    font-size: 1em;
    font-weight: 300;
    padding: 12px 10px 12px 48px;
    pointer-events: none;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: rgba(187, 187, 187, 0.8);
}

.Panel_TVA .Administrateur .form .inputBox input:valid ~ span,
.Panel_TVA .Administrateur .form .inputBox input:focus ~ span{
    color: #9D8A57;
    border: 1px solid #9D8A57;
    background: #1A2D40;
    transform: translateX(25px ) translateY(-9px);
    font-size:0.9em;
    padding: 0 8px;
    border-radius: 10px;
    letter-spacing: 0.1em;
}

.Panel_TVA .Administrateur .form .inputBox input:valid,
.Panel_TVA .Administrateur .form .inputBox input:focus{
    border: 1px solid #9D8A57;
}

.Panel_TVA .Administrateur .form .inputBox input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
    display: none;
}

.Panel_TVA .Administrateur .form .inputBox i{
    position:absolute;
    top: 15px;
    left: 16px;
    width: 25px;
    padding: 2px 0;
    color: #9D8A57;
    border-right: 1px solid #9D8A57;
}

.Panel_TVA .Administrateur .form .inputBox input[type="submit"]{
    width: 100%;
    padding: 12px 10px;
    background:#9D8A57;
    color: #1A2D40;
    padding: 10px 0;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    cursor: pointer;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
} 

.Panel_TVA .Administrateur .form table thead {
    position: relative;
    width: 100%;
}

.Panel_TVA .Administrateur .form table thead tr th {
    background:#9D8A57;
    color: #1A2D40;
    padding: 12px 10px;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
}

.Panel_TVA .Administrateur .form table tbody tr td{
    position: relative;
    left: 0px;
    padding: 12px 10px;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: rgba(187, 187, 187, 0.8);
}

.Panel_TVA .Administrateur .form table tbody tr td a img{
    position: relative;
    left: 25%;
    width: 40px;
    padding: 5px;
    cursor: pointer;
}

.Panel_TVA .Administrateur .form a.login{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: #9D8A57;
    padding: 10px 20px;
    margin: 8px 4px;
    text-decoration: none;
    border: 1px solid #9D8A57;
    border-radius: 10px;
}

.Panel_TVA .Administrateur .form p{
    display: flex;
    justify-content: center;
    align-items: center;
}

.Panel_TVA .Administrateur .form p a.login{
    cursor: pointer;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: #9D8A57;
    padding: 10px 20px;
    margin: 8px 4px;
    text-decoration: none;
    border: 1px solid #9D8A57;
    border-radius: 10px;
}

/*--------------------------------------Admin créer, modfier( fournisseur, produit, réduction )------------------------------------*/

.Panel_fournisseur{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1A2D40;
}

.Panel_fournisseur .Administrateur {
    padding: 40px;
    border-radius: 20px;
    border: 8px solid #1A2D40;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
}

.Panel_fournisseur .Administrateur .form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 25px;
    width:650px;
}

.Panel_fournisseur .Administrateur .form .admintitleh2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    font-size: 2em;
    letter-spacing: 0.1em;
    margin: 0 20px;
}

.Panel_fournisseur .Administrateur .form .inputBox {
    position: relative;
    width: 300px;
}

.Panel_fournisseur .Administrateur .form .inputBox input, select {
    padding: 12px 10px;
    border: none;
    width: 92%;
    background: #1A2D40;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #fff;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    border-radius: 25px;
    font-size: 1em;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35); 
    transition: 0.5s;
    outline: none;
}

.Panel_fournisseur .Administrateur .form .inputBox span {
    position: absolute;
    left: 0;
    font-size: 1em;
    font-weight: 300;
    padding: 12px 10px 12px 48px;
    pointer-events: none;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: rgba(187, 187, 187, 0.8);
}

.Panel_fournisseur .Administrateur .form .inputBox span.time{
    display: none;
}

.Panel_fournisseur .Administrateur .form .inputBox input:valid ~ span,
.Panel_fournisseur .Administrateur .form .inputBox input:focus ~ span,
.Panel_fournisseur .Administrateur .form .inputBox input:valid ~ span.time,
.Panel_fournisseur .Administrateur .form .inputBox input:focus ~ span.time,
.Panel_fournisseur .Administrateur .form .inputBox select:valid ~ span,
.Panel_fournisseur .Administrateur .form .inputBox select:focus ~ span{
    display:block;
    color: #9D8A57;
    border: 1px solid #9D8A57;
    background: #1A2D40;
    transform: translateX(25px ) translateY(-53px);
    font-size:0.9em;
    padding: 0 8px;
    border-radius: 10px;
    letter-spacing: 0.1em;
}

.Panel_fournisseur .Administrateur .form .inputBox input:valid,
.Panel_fournisseur .Administrateur .form .inputBox input:focus,
.Panel_fournisseur .Administrateur .form .inputBox select:valid,
.Panel_fournisseur .Administrateur .form .inputBox select:focus{
    border: 1px solid #9D8A57;
}

.Panel_fournisseur .Administrateur .form .inputBox i{
    position:absolute;
    top: 15px;
    left: 16px;
    width: 25px;
    padding: 2px 0;
    color: #9D8A57;
    border-right: 1px solid #9D8A57;
}

.Panel_fournisseur .Administrateur .form .inputBox input[type="submit"]{
    width: 100%;
    background:#9D8A57;
    color: #1A2D40;
    padding: 10px 0;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    cursor: pointer;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
}

.Panel_fournisseur .Administrateur .form table thead {
    position: relative;
    width: 100%;
}

.Panel_fournisseur .Administrateur .form table thead tr th {
    background:#9D8A57;
    color: #1A2D40;
    padding: 12px 10px;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
}

.Panel_fournisseur .Administrateur .form table tbody tr td{
    position: relative;
    left: 0px;
    padding: 12px 10px;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: rgba(187, 187, 187, 0.8);
}

.Panel_fournisseur .Administrateur .form table tbody tr td a img{
    position: relative;
    left: 25%;
    width: 40px;
    padding: 5px;
    cursor: pointer;
}

.Panel_fournisseur .Administrateur .form a.login{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: #9D8A57;
    padding: 10px 20px;
    margin: 0px 120px;
    text-decoration: none;
    border: 1px solid #9D8A57;
    border-radius: 10px;
}
.Panel_fournisseur .box .inputBox #toggleBtn{
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    cursor: pointer;
    display:flex;
    justify-content: center;
    align-items: center;
}

.Panel_fournisseur .box.inputBox #toggleBtn::before{
    content: '\f070';
    font-family: fontAwesome;
}

.Panel_fournisseur .validation{
    position: relative;
    display:flex;
    flex-direction: column;
    gap: 8px;
}
.Panel_fournisseur .validation {
    display: none;
}
.Panel_fournisseur .validation.active {
    display: block;
}

.Panel_fournisseur .validation ul li{
    position: relative;
    list-style: none;
    color: #fff;
    font-size: 0.85em;
    transition: 0.5s;
}

.Panel_fournisseur .validation ul li.valid{
    color: rgba(255,255,255,0.5);
}

.Panel_fournisseur .validation ul li::before{
    content: '\f192';
    width: 20px;
    height: 10px;
    font-family: fontAwesome;
    display: inline-flex;
}

.Panel_fournisseur .validation ul li.valid::before{
    content: '\f00c';
    color: "0f0";
}

.Panel_fournisseur .box{
    position: relative;
    width: 300px;
}

.Panel_fournisseur .box .inputBox{
    position: relative;
    width: 100%;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 15 25px rgba(0,0,0,0.15);
}

.Panel_fournisseur .box .inputBox input{
    position: relative;
    width: 90%;
    outline: none;
    border: none;
    padding: 10px 5px;
}

.Panel_fournisseur .box .inputBox #toggleBtn{
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    cursor: pointer;
    display:flex;
    justify-content: center;
    align-items: center;
}

.Panel_fournisseur .box .inputBox #toggleBtn::before{
    content: '\f070';
    font-family: fontAwesome;
}

.Panel_fournisseur .box .inputBox #toggleBtn.hide::before{
    content: '\f06e';
    font-family: fontAwesome;
}

.Panel_fournisseur .validation{
    position: absolute;
    top:35%;
    left:5%;
    background: #1a2d40;
    width: 15%;
    padding: 10px;
    margin: 30px;
    border-radius: 6px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}
.Panel_fournisseur .validation ul{
    position: relative;
    display:flex;
    flex-direction: column;
    gap: 8px;
}

.Panel_fournisseur .validation ul li{
    position: relative;
    list-style: none;
    color: #9d8a57;
    font-size: 0.85em;
    transition: 0.5s;
}

.Panel_fournisseur .validation ul li.valid{
    color: rgba(187,187,187);
}

.Panel_fournisseur .validation ul li::before{
    content: '\f192';
    width: 20px;
    height: 10px;
    font-family: fontAwesome;
    display: inline-flex;
}

.Panel_fournisseur .validation ul li.valid::before{
    content: '\f00c';
    color: #0f0;
}

/*----------------------------------------------Listing fournisseur, Produit, Reduction--------------------------------------------------*/

.admin-listing-fournisseur {
    position:relative;
    top:0;
    left:0;
    background: #1A2D40;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    }

.admin-listing-fournisseur .adminh2{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; 
    font-family: 'Merriweather', serif;
    font-weight: 500;
    font-size: 2em;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
}

.admin-listing-fournisseur table {
    position: relative;
    top:25%;
    left:0;
    display: block;
    overflow: auto;
    max-height: 500px;
    width: 100%;
    padding: 10px;
}
.admin-listing-fournisseur table::-webkit-scrollbar {
    width: 0.6em;
    background-color: inherit;
}

.admin-listing-fournisseur table::-webkit-scrollbar-thumb {
background-color: inherit;
}

.admin-listing-fournisseur table::-webkit-scrollbar-thumb:hover {
background-color: #9D8A57;
}

.admin-listing-fournisseur th{
    background:#9D8A57;
    color: #1A2D40;
    padding: 5px;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
}
.admin-listing-fournisseur td{
    position: relative;
    left: 0px;
    padding: 12px 10px;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: rgba(187, 187, 187, 0.8);
    max-width: 125px;
    overflow: hidden;
}
.admin-listing-fournisseur .bossu{
    position: relative;
    left: 0px;
    padding: 12px 10px;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: rgba(187, 187, 187, 0.8);
    max-width: 55px;
    overflow: hidden;
}
.admin-listing-fournisseur table tbody tr td a img{
    width: 40px;
    padding: 5px 5px 5px 15px;
    cursor: pointer;
}

.admin-listing-fournisseur p{
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin-listing-fournisseur p a.top-rectangle-button{
    cursor: pointer;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: #9D8A57;
    padding: 10px 20px;
    margin: 40px 8px 0 ;
    text-decoration: none;
    border: 1px solid #9D8A57;
    border-radius: 10px;
}

/*--------------------------------------Admin boss inscription------------------------------------*/

.Panel_boss_inscription{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1A2D40;
}

.Panel_boss_inscription .Administrateur {
    padding: 40px;
    border-radius: 20px;
    border: 8px solid #1A2D40;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
}

.Panel_boss_inscription .Administrateur .form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width:650px;
}

.Panel_boss_inscription .Administrateur .form .admintitleh2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    font-size: 2em;
    letter-spacing: 0.1em;
    margin: 0 100px;
}

.Panel_boss_inscription .Administrateur .form .inputBox {
    position: relative;
    width: 300px;
}

.Panel_boss_inscription .Administrateur .form .inputBox input, select {
    padding: 12px 0px 12px 40px;
    border: none;
    width: 85%;
    background: #1A2D40;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #fff;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    border-radius: 25px;
    font-size: 1em;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35); 
    transition: 0.5s;
    outline: none;
}

.Panel_boss_inscription .Administrateur .form .inputBox span {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1em;
    font-weight: 300;
    padding: 12px 10px 12px 48px;
    pointer-events: none;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: rgba(187, 187, 187, 0.8);
}

.Panel_boss_inscription .Administrateur .form .inputBox span.time{
    display: none;
}

.Panel_boss_inscription .Administrateur .form .inputBox input:valid ~ span,
.Panel_boss_inscription .Administrateur .form .inputBox input:focus ~ span,
.Panel_boss_inscription .Administrateur .form .inputBox input:valid ~ span.time,
.Panel_boss_inscription .Administrateur .form .inputBox input:focus ~ span.time,
.Panel_boss_inscription .Administrateur .form .inputBox select:valid ~ span,
.Panel_boss_inscription .Administrateur .form .inputBox select:focus ~ span{
    display:block;
    color: #9D8A57;
    border: 1px solid #9D8A57;
    background: #1A2D40;
    transform: translateX(25px ) translateY(-9px);
    font-size:0.9em;
    padding: 0 8px;
    border-radius: 10px;
    letter-spacing: 0.1em;
}

.Panel_boss_inscription .Administrateur .form .inputBox input:valid,
.Panel_boss_inscription .Administrateur .form .inputBox input:focus,
.Panel_boss_inscription .Administrateur .form .inputBox select:valid,
.Panel_boss_inscription .Administrateur .form .inputBox select:focus{
    border: 1px solid #9D8A57;
}

.Panel_boss_inscription .Administrateur .form .inputBox i{
    position:absolute;
    top: 15px;
    left: 16px;
    width: 25px;
    color: #9D8A57;
    border-right: 1px solid #9D8A57;
}

.Panel_boss_inscription .Administrateur .form .inputBox input[type="submit"]{
    width: 100%;
    background:#9D8A57;
    color: #1A2D40;
    padding: 10px 0;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    cursor: pointer;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
}

.Panel_boss_inscription .Administrateur .form table thead {
    position: relative;
    width: 100%;
}

.Panel_boss_inscription .Administrateur .form table thead tr th {
    background:#9D8A57;
    color: #1A2D40;
    padding: 12px 10px;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), 
        inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
}

.Panel_boss_inscription .Administrateur .form table tbody tr td{
    position: relative;
    left: 0px;
    padding: 12px 10px;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: rgba(187, 187, 187, 0.8);
}

.Panel_boss_inscription .Administrateur .form table tbody tr td a img{
    position: relative;
    left: 25%;
    width: 40px;
    padding: 5px;
    cursor: pointer;
}

.Panel_boss_inscription .Administrateur .form a.login{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-family: 'EB+Garamond', serif;
    font-weight: 300;
    font-size: 1.1em;
    transition: 0.5s;
    letter-spacing: 0.05em;
    color: #9D8A57;
    padding: 10px 20px;
    margin: 0px 120px;
    text-decoration: none;
    border: 1px solid #9D8A57;
    border-radius: 10px;
}
.Panel_boss_inscription .box .inputBox #toggleBtn{
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    cursor: pointer;
    display:flex;
    justify-content: center;
    align-items: center;
}

.Panel_boss_inscription .box.inputBox #toggleBtn::before{
    content: '\f070';
    font-family: fontAwesome;
}

.Panel_boss_inscription .validation{
    position: relative;
    display:flex;
    flex-direction: column;
    gap: 8px;
}
.Panel_boss_inscription .validation {
    display: none;
}
.Panel_boss_inscription .validation.active {
    display: block;
}

.Panel_boss_inscription .validation ul li{
    position: relative;
    list-style: none;
    color: #fff;
    font-size: 0.85em;
    transition: 0.5s;
}

.Panel_boss_inscription .validation ul li.valid{
    color: rgba(255,255,255,0.5);
}

.Panel_boss_inscription .validation ul li::before{
    content: '\f192';
    width: 20px;
    height: 10px;
    font-family: fontAwesome;
    display: inline-flex;
}

.Panel_boss_inscription .validation ul li.valid::before{
    content: '\f00c';
    color: "0f0";
}

.Panel_boss_inscription .box{
    position: relative;
    width: 300px;
}

.Panel_boss_inscription .box .inputBox{
    position: relative;
    width: 100%;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 15 25px rgba(0,0,0,0.15);
}

.Panel_boss_inscription .box .inputBox input{
    position: relative;
    width: 90%;
    outline: none;
    border: none;
    padding: 10px 5px;
}

.Panel_boss_inscription .box .inputBox #toggleBtn{
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    cursor: pointer;
    display:flex;
    justify-content: center;
    align-items: center;
}

.Panel_boss_inscription .box .inputBox #toggleBtn::before{
    content: '\f070';
    font-family: fontAwesome;
}

.Panel_boss_inscription .box .inputBox #toggleBtn.hide::before{
    content: '\f06e';
    font-family: fontAwesome;
}

.Panel_boss_inscription .validation{
    position: absolute;
    top:35%;
    left:5%;
    background: #1a2d40;
    padding: 10px;
    margin: 30px;
    border-radius: 6px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}
.Panel_boss_inscription .validation ul{
    position: relative;
    display:flex;
    flex-direction: column;
    gap: 8px;
}

.Panel_boss_inscription .validation ul li{
    position: relative;
    list-style: none;
    color: #9d8a57;
    font-size: 0.85em;
    transition: 0.5s;
}

.Panel_boss_inscription .validation ul li.valid{
    color: rgba(187,187,187);
}

.Panel_boss_inscription .validation ul li::before{
    content: '\f192';
    width: 20px;
    height: 10px;
    font-family: fontAwesome;
    display: inline-flex;
}

.Panel_boss_inscription .validation ul li.valid::before{
    content: '\f00c';
    color: #0f0;
}
/* ------------------------------------------------------------admin modification formulaires ------------------------------------------------- */
.modifier-produit {
background: linear-gradient(45deg, #BDC0BA, #3F5EFB);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modifier-produit .container {
    position: absolute;
    top: 10%;
    background-color: transparent;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    width: 700px;
    height: 650px;
}

.modifier-produit .titre-modif {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: bold;
}

.modifier-produit .modifier-produit .formulaire-admin-modification {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.modifier-produit .libererlesbrs {
    position: relative;
    left: 25px;
    width: 100%;
    text-align: start;
    margin-bottom: 20px;
}

.modifier-produit .formulaire-admin-modification label {
    font-size: 1.2rem;
    font-weight: bold;
    padding-top: 15px;
}

.modifier-produit .formulaire-admin-modification input[type="text"] {
    position: absolute;
    right: 50px;
    width: 50%;
    text-align: center;
    border: none;
    background-color: rgba(255, 255, 255, 0.22);
    font-size: 1.2rem;
}

.modifier-produit .formulaire-admin-modification input[type="submit"] {
    background-color: #1A2D40;
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    margin: 2rem 0;
    margin-right: 10px;
    align-self: center;
}

.modifier-produit .formulaire-admin-modification input[type="submit"]:hover {
    background-color: #9D8A57;
}

.modifier-produit .top-rectangle-button{
    position: absolute;
    top: 10px;
    right: 25px;
    background-color: #9D8A57;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 8px 4px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

/*------------------------- ACCUEIL -------------------------------*/

.Accueil_admin .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 86px;
    background: #1A2D40;
    padding: 6px 14px;
    z-index: 99;
    transition: all 0.5s ease;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
.Accueil_admin .sidebar .logo-details {
    height: 60px;
    display: flex;
    align-items: center;
    position: relative;
}
.Accueil_admin .sidebar .logo-details .icon {
    opacity: 0;
    transition: all 0.5s ease;
}
.Accueil_admin .sidebar .logo-details .logo_name {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    opacity: 0;
    transition: all 0.5s ease;
}
.Accueil_admin .sidebar .logo-details #btn {
    position: absolute;
    top: 50%;
    
    transform: translateY(-50%);
    font-size: 22px;
    transition: all 0.4s ease;
    font-size: 23px;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s ease;
}
.Accueil_admin .sidebar i {
    color: #fff;
    height: 60px;
    min-width: 50px;
    font-size: 28px;
    text-align: center;
    line-height: 60px;
}
.Accueil_admin .sidebar .nav-list {
    height: calc(100% - 140px);
}
.Accueil_admin .sidebar .scroll::-webkit-scrollbar {
    width: 8px;
    background: #262440;
    border-radius: 5px;
}
.Accueil_admin .sidebar .scroll::-webkit-scrollbar-thumb {
    background: #262440;
    border-radius: 5px;
}
.Accueil_admin .sidebar .scroll::-webkit-scrollbar-track {
    background: #171526;
    border-radius: 5px;
}
.Accueil_admin .sidebar li {
    position: relative;
    margin: 8px 8px 8px 0;
    list-style: none;
}
.Accueil_admin .sidebar li .tooltip {
    position: absolute;
    top: -20px;
    left: calc(100% + 15px);
    z-index: 3;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 400;
    opacity: 0;
    pointer-events: none;
    transition: 0s;
}
.Accueil_admin .sidebar li:hover .tooltip {
    opacity: 1;
    pointer-events: auto;
    transition: all 0.4s ease;
    top: 50%;
    transform: translateY(-50%);
}
.Accueil_admin .sidebar li a {
    display: flex;
    height: 100%;
    width: 100%;
    border-radius: 12px;
    align-items: center;
    text-decoration: none;
    transition: all 0.4s ease;
    background: #11101D;
}
.Accueil_admin .sidebar li a:hover {
    background: #9D8A57;
}
.Accueil_admin .sidebar li a .links_name {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.4s;
}
.Accueil_admin .sidebar li i {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    border-radius: 12px;
}
.Accueil_admin .sidebar .profile-details {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.Accueil_admin .sidebar img {
    height: 45px;
    width: 45px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 10px;
}
.Accueil_admin .sidebar input {
    font-size: 15px;
    color: #FFF;
    font-weight: 400;
    outline: none;
    height: 50px;
    width: 100%;
    width: 50px;
    border: none;
    border-radius: 12px;
    transition: all 0.5s ease;
    background: #1d1b31;
}
.Accueil_admin .sidebar .bx-search {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 22px;
    background: #1d1b31;
    color: #FFF;
}
.Accueil_admin .sidebar .bx-search:hover {
    background: #FFF;
    color: #11101d;
}
.Accueil_admin .sidebar li.profile {
    position: fixed;
    height: 60px;
    width: 77px;
    left: 1px;
    bottom: -8px;
    padding: 4px 4px;
    background: #11101D;
    transition: all 0.5s ease;
    overflow: hidden;
}
.Accueil_admin .sidebar li.profile .name {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
}
.Accueil_admin .sidebar li.profile .job {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
    font-size: 12px;
}
.Accueil_admin .sidebar .profile {
    position: relative;
}
.Accueil_admin .sidebar .profile #log_out {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: #11101D;
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-radius: 0px;
    transition: all 0.5s ease;
}
.Accueil_admin .sidebar.open {
    width: 250px;
}
.Accueil_admin .sidebar.open .logo-details .icon {
    opacity: 1;
}
.Accueil_admin .sidebar.open .logo-details .logo_name {
    opacity: 1;
}
.Accueil_admin .sidebar.open .logo-details #btn {
    text-align: right;
    position: absolute;
    top: 50%;
    right: 0;
}
.Accueil_admin .sidebar.open li .tooltip {
    display: none;
}
.Accueil_admin .sidebar.open li a .links_name {
    opacity: 1;
    pointer-events: auto;
}
.Accueil_admin .sidebar.open input {
    padding: 0 20px 0 50px;
    width: 100%;
}
.Accueil_admin .sidebar.open .bx-search:hover {
    background: #1d1b31;
    color: #FFF;
}
.Accueil_admin .sidebar.open li.profile {
    width: 241px;
}
.Accueil_admin .sidebar.open .profile .log_out {
    width: 50px;
    background: none;
}
.Accueil_admin .sidebar.open ~ .home-section {
    left: 250px;
    width: calc(100% - 250px);
}

/*-------------------------------------------------------Div centrale------------------------------------------------------*/
.Accueil_admin .home-section {
    position: absolute;
    top:0;
    background: #1d1b31;
    min-height: 100vh;
    left: 78px;
    width: calc(100% - 78px);
    transition: all 0.5s ease;
    overflow: hidden;
}

/*-------------------------------------------------------Horloge-----------------------------------------------------------*/

.Accueil_admin .station{
    position: absolute;
    top:0;
    left: 38%;
    width:350px;
    height: 100vh;
}
.Accueil_admin .station .digital-clock {
    position: absolute;
    display: flex;
    justify-content: center;
    left: 23%;
    background: #2d2f41;
    width: 100px;
    height: 40px;
    padding: 20px 45px;
    box-shadow: 0 5px 25px rgba(14, 21, 37, 08);
    border-radius: 12px;
}
.Accueil_admin .station .digital-clock::before {
    content: "";
    position: absolute;
    background: linear-gradient(45deg, #24ff6d, #2f93f1, #ff5e9a);
    background-size: 200%, 200%;
    top: -5px;
    left: -5px;
    bottom: -5px;
    right: -5px;
    z-index: 0;
    filter: blur(40px);
    animation: glowing 10s ease infinite;
}
@keyframes glowing {
    0% {
        /* Début de l'animation : position du fond à 0% en X et 50% en Y */
        background-position: 0 50%;
    }
    50% {
        /* Milieu de l'animation : position du fond à 100% en X et 50% en Y */
        background-position: 100% 50%;
    }
    100% {
        /* Fin de l'animation : retour à la position initiale du fond à 0% en X et 50% en Y */
        background-position: 0 50%;
    }
}

.Accueil_admin .station .time {
    position: absolute;
    top: -35px;
    display: flex;
}

.Accueil_admin .station .hours,
.dots,
.minutes {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    padding: 0 10px;
    line-height: 125px;
}

.Accueil_admin .station .hours,
.minutes {
    font-size: 3em;
    
}

.Accueil_admin .station .dots {
    font-size: 2.5em;
    color: #929292;
}

.Accueil_admin .station .hours {
    /* Dégradé linéaire pour l'arrière-plan du texte */
    background: -webkit-linear-gradient(90deg, #634dff, #5fd4ff);
    /* Couleur du texte transparente */
    -webkit-text-fill-color: transparent;
    /* Clip de fond du texte sur l'arrière-plan */
    -webkit-background-clip: text;
}

.Accueil_admin .station .minutes {
    /* Dégradé linéaire pour l'arrière-plan du texte */
    background: -webkit-linear-gradient(90deg, #ff5e9a, #ffb960);
    /* Couleur du texte transparente */
    -webkit-text-fill-color: transparent;
    /* Clip de fond du texte sur l'arrière-plan */
    -webkit-background-clip: text;
}

.Accueil_admin .station .calendari {
    position: absolute;
    top: 50px;
    display: flex;
    font-size: 1.2em;
    background: -webkit-linear-gradient(90deg, #ae4af6, #ff98d1);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.Accueil_admin .station .day-number,
.day-name,
.year {
    margin-left: 8px;
}

/*---------------------------------------------------------------Météo-----------------------------------------------------*/

.window {
    position: relative;
    top: 20%;
    left: 3%;
    width: 310px;
    height: 250px;
    border: 8px solid #2d2f41;
    -webkit-box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: -5px -5px 15px rgba(187, 187, 187, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.35), inset -5px -5px 15px rgba(187, 187, 187, 0.1), inset 5px 5px 15px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    background-color: #2d2f41;
    color:white;
}

.window input[type="text"] {
    position: relative;
    display: block;
    flex-wrap: wrap;
    padding: 5px;
    border-radius: 5px;
    border: none;
    font-size: 15px;
    width: 150px;
    top: 0;
    margin: 10px auto;
}

.window input[type="button"] {
    background-color: #9D8A57;
    color: #1A2D40;
    padding: 5px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: block;
    margin: 5px auto;
}

.window .two-per-line {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.window #zone_Icon {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    margin: 10px auto;
}

.Accueil_admin .didi {
    position:absolute;
    display: flex;
    top: 5px;
    right: 5px;
}


.crossed {
    text-decoration: line-through;
}

.calendriergg{
    position: absolute;
    left: 11px;
    top: 3px;
}