@font-face {
    font-family: 'normal'; /*a name to be used later*/
    src: url('../fonts/Roboto-Regular.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'gras'; /*a name to be used later*/
    src: url('../fonts/Roboto-SemiBold.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'light'; /*a name to be used later*/
    src: url('../fonts/Roboto-Light.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'indispo'; /*a name to be used later*/
    src: url('../fonts/ArmyStamp.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'fin'; /*a name to be used later*/
    src: url('../fonts/Kiona-Regular.ttf'); /*URL to font*/
}
body {
    font-family: 'light';
    margin: 0;
    padding: 0;
    background-color: #232323; /* Fond principal très sombre */
    color: #e0e0e0;         /* Texte principal clair */
    font-size: 16px;
}

header {
    background-color: #1f1f1f;
    color: #ffffff;
    padding: 1em 15px;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #333;
    height: 50px;
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position: 6px center;
}

header span.menu_biais {
    font-size: 1.5em;
    transform: rotate(270deg);
    width: auto;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    line-height: 0;
}

main {
    padding: 0px;
    height: calc(100dvh - 92px);
    overflow: scroll;
    display: flex;
    flex-direction: column;

}

#categories-container{
    background-color: #2b2b2b;
    padding: 8px 0px;
    border-radius: 12px;
}

#categories-container h2{
margin-top: 0;
    margin-bottom: 0px;
    font-size: 1.3em;
    color: #ffffff;
    /* border-bottom: 1px solid #3a3a3a; */
    padding-bottom: 1px;
    font-size: 13px;
    text-indent: 10px;
}
/* Catégories en scroll horizontal */
#category-list-wrapper {
    overflow-x: auto;
    padding-bottom: 10px;
    margin-bottom: -10px; /* Compenser le padding pour l'alignement visuel */
}
/* Cacher la scrollbar (fonctionne sur Webkit/Blink, Firefox a besoin d'autres règles) */
#category-list-wrapper::-webkit-scrollbar {
    display: none; /* Pour Chrome, Safari, Edge */
}
#category-list-wrapper {
  scrollbar-width: none; /* Pour Firefox */
}


#category-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

#category-list li {
    margin-right: 10px;
    display: inline-block;
}
#category-list li:last-child {
    margin-right: 0;
}





.interactive-button {
    padding: 0px 52px 0px 9px;
    margin: 4px -2px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 50px;
    background-color: grey;
    color: #3f3f3f;
    transition: background-color 0.4s ease-in-out;
    line-height: 43px;
    background-size: 31px;
    background-repeat: no-repeat;
    background-position: bottom 7px right 15px;
}


.interactive-button.active {
    background-color: #ab1a1a; /* Couleur lorsque le bouton est actif */
    color: #c5c5c5;
    background-blend-mode: screen;

}

.interactive-button  img{
    width: 25px;
    float: right;
    margin: 8px;
}

.interactive-button  img{
    width: 25px;
    float: right;
    margin: 8px;
}

/* Optionnel: style au survol pour un meilleur feedback */
.interactive-button:not(.active):hover {
    background-color: #a0a0a0; /* Gris un peu plus foncé au survol */
}




/* GRILLE DE PRODUITS */
#product-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 17px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 80px;
}

/* Style des cartes de produit individuelles */
.product-item {
    background-color: #ffffff;
    /* border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); */
    /* border: 1px solid #383838; */
    padding: 0px;
    text-align: center;
    height: 110px;
    background-repeat: no-repeat;
    background-position: center right -20%;
    background-size: 60%;
    position: relative;
}
.product-item div.degrade_produit {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, seashell 50%, #eeeeee00 95%);
    /* border: 1px solid blue; */
    position: relative;
    border-radius: 0px;
}
.product-item div.degrade_produit span.nom-produit {
    display: block;
    text-align: left;
    padding: 2px 4px 2px 6px;
    font-size: 21px;
    line-height: 19px;
    width: 70%;
    /* text-shadow: 2px 1px 0px black; */
    color: #751717;
    padding-top: 6px;
    /* height: 50%; */
    /* display: -webkit-box; */
    /* -webkit-line-clamp: 2; */
    /* -webkit-box-orient: vertical; */
    /* overflow: hidden; */
    font-variant: all-petite-caps;
    font-family: light;
}

.product-item div.degrade_produit span.detail-produit {
    color: #a97272;
    font-size: 12px;
    /* position: absolute; */
    bottom: 0px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0px 0px 0px 6px;
    width: 53%;
    text-align: left;
    font-style: italic;
}

.product-item div.degrade_produit div.prix {
    /* text-shadow: 1px 1px 0px #551919; */
    text-align: right;
    margin-right: 0px;
    font-size: 17px;
    color: white;
    color: #936612;
    position: absolute;
    left: 7px;
    bottom: 4px;
    font-family: 'normal';
}
.product-item .img-placeholder { /* Si pas d'image */
    width: 100%;
    height: 120px;
    background-color: #3f3f3f;
    border-radius: 6px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    color: #888;
}


.product-item .info {
    flex-grow: 1; /* Permet à cette section de grandir pour pousser les actions en bas */
    margin-bottom: 10px;
}

.product-item .info h3 {
    margin: 0 0 5px 0;
    font-size: 1.05em; /* Légèrement plus grand pour le nom du produit */
    color: #ffffff;
    line-height: 1.3;
}
.product-item .info p {
    margin: 0 0 8px 0;
    font-size: 0.8em;
    color: #b0b0b0; /* Texte de description plus clair */
    line-height: 1.4;
    min-height: 3.2em; /* Pour aligner les cartes si descriptions de longueurs variables (2-3 lignes) */
}

.product-item .actions {
    display: flex;
    justify-content: space-between; /* Prix à gauche, bouton à droite */
    align-items: center;
    margin-top: auto; /* Pousse cette section en bas de la carte */
    width: 100%;
}

.product-item .price {
    font-weight: bold;
    color: #e0e0e0;
    font-size: 1.1em;
}

.product-item button.add-to-cart {
    background-color: #f0ad4e; /* Orange conservé pour l'appel à l'action */
    color: #121212; /* Texte sombre sur bouton clair */
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.2s;
}

.product-item button.add-to-cart:hover {
    background-color: #ec971f;
}


footer {
    text-align: center;
    padding: 1.5em 15px; /* Plus de padding pour le footer */
    background-color: #1f1f1f;
    color: #a0a0a0;
    margin-top: 20px;
    font-size: 0.85em;
    border-top: 1px solid #333;
}

/* Message initial dans product-list */
#product-list > p { /* S'applique lorsque product-list contient uniquement le paragraphe */
    grid-column: 1 / -1; /* Pour que le message s'étende sur toutes les colonnes de la grille */
    text-align: center;
    color: #888;
    padding: 30px 0;
    font-size: 1em;
}


.produit_indispo{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000087;
    }
.produit_indispo span {
    position: absolute;
    top: 30%;
    right: 7%;
    rotate: 348deg;
    font-family: 'indispo';
    font-size: 30px;
    line-height: 20px;
    color: white;
    letter-spacing: 1px;
}












/* --- Sélecteur de langue --- */
.language-switcher {
    position: relative; /* Ancre pour le menu déroulant */
    /* Pour le positionner en haut à droite de la page et fixe :
    position: fixed;
    top: 15px;
    right: 20px;
    */
    z-index: 2000; /* Priorité maximale */
    float: right;
    margin-top: 7px;
}

.current-language {
    background-color: transparent;
    border: none;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px; /* Espace entre drapeau et texte/flèche optionnels */
}

.current-language img {
    width: 30px; /* Ajustez la taille du drapeau */
    height: auto;
    border-radius: 3px;
    display: block;
}

/* Optionnel: style pour la flèche (si vous l'utilisez) */
.current-language .arrow-down {
    transition: transform 0.3s ease;
}
.language-switcher.open .current-language .arrow-down {
    transform: rotate(180deg);
}


.dropdown-languages {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: calc(100% + 5px); /* Juste en dessous du bouton, avec un petit espace */
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px; /* Largeur minimale du menu déroulant */

    /* Styles pour l'animation */
    opacity: 0;
    visibility: hidden; /* Important pour cacher l'élément et le rendre non-interactif */
    transform: translateY(-10px); /* Départ légèrement au-dessus pour l'effet de "descente" */
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
    /* Le délai sur visibility assure qu'il devient 'hidden' APRES que l'opacité et transform soient à 0 */
}

.language-switcher.open .dropdown-languages {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s; /* Enlève le délai de visibility lors de l'ouverture */
}

.dropdown-languages li {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #333;
    transition: background-color 0.2s ease;
}

.dropdown-languages li:hover {
    background-color: #f0f0f0;
}

.dropdown-languages li img {
    width: 24px; /* Taille des drapeaux dans le menu */
    height: auto;
    border-radius: 2px;
}

.dropdown-languages li span {
    font-size: 0.9em;
}








/* Styles pour la Modal */
.modal-overlay {
    position: fixed; /* Reste en place même si on scrolle */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Noir avec 50% d'opacité */
    backdrop-filter: blur(3px); /* Effet de flou sur l'arrière-plan */
    -webkit-backdrop-filter: blur(3px); /* Pour Safari */
    display: flex; /* Pour centrer le contenu modal */
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Très haute priorité */

    opacity: 0;
    visibility: hidden; /* Important pour l'accessibilité et les interactions */
    transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
}

.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 15px; /* Angles arrondis */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    position: relative; /* Pour positionner le bouton de fermeture */
    width: 80vw; /* 80% de la largeur de la vue */
    max-width: 500px; /* Limite la largeur sur des écrans plus larges (si jamais) */
    max-height: 80vh; /* 80% de la hauteur de la vue */
    overflow-y: auto; /* Permet le scroll si le contenu est trop long */
    color: #303030;  
    /* Animation d'apparition */
    opacity: 0;
    transform: scale(0.3); /* Commence petit */
    transform-origin: center center; /* Le point d'origine de l'agrandissement */
    transition: opacity 0.7s cubic-bezier(0.18, 0.89, 0.32, 1.28), transform 0.7s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    /* cubic-bezier pour un effet "ressort" ou "élastique" à l'ouverture */
}

.modal-overlay.visible .modal-content {
    opacity: 1;
    transform: scale(1); /* Taille finale */
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 28px; /* Taille de la croix */
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 5px; /* Zone cliquable plus grande */
}
.close-button:hover {
    color: #333;
}

#modalBodyContent {
    /* Styles pour le contenu à l'intérieur de la modal si besoin */
    margin-top: 20px; /* Espace sous la croix */
}

/* Placeholder images pour la démo */
img[src^="placeholder-"] {
    background-color: #ddd;
    border: 1px solid #ccc;
    display: inline-block;
}
/* ... (tout le CSS précédent) ... */

/* Style pour l'indicateur de chargement dans la modal */
.modal-loading {
    text-align: center;
    padding: 30px;
    font-style: italic;
    color: #777;
}

/* Style pour un message d'erreur dans la modal */
.modal-error {
    text-align: center;
    padding: 30px;
    color: red;
    font-weight: bold;
}

#modalBodyContent {
    margin-top: 20px; /* Espace sous la croix */
    min-height: 50px; /* Pour que la modal ait une taille même pendant le chargement */
}


/* Styles pour le formulaire dans la modal */
#modalBodyContentGlobal #form_change_prix { /* Ou #modalBodyContent si vous n'utilisez pas le suffixe Global */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espace entre les éléments du formulaire */
    margin-top: 20px; /* Espace au-dessus du formulaire */
    padding-top: 15px;
    border-top: 1px solid #eee; /* Ligne de séparation */
}



#modalBodyContentGlobal #form_change_prix label {
    font-weight: bold;
    min-width: 80px; /* Assure un minimum de largeur pour les labels */
}

#modalBodyContentGlobal #form_change_prix input[type="number"] {
    flex-grow: 1; /* Permet au champ input de prendre l'espace restant */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

#modalBodyContentGlobal #form_change_prix button[type="button"] {
    background-color: #5cb85c; /* Bouton vert de succès */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

#modalBodyContentGlobal #form_change_prix button[type="button"]:hover {
    background-color: #4cae4c;
}

#priceUpdateMessage {
    font-size: 0.9em;
    color: red; /* Couleur par défaut pour les erreurs */
    /* Peut devenir vert pour les succès si vous changez la couleur avec JS */
}














/* fiche produit */

.fiche-produit {
    width: 100%;
    padding: 0px;
    color: #535353;
}
.fiche-produit h2 {
    text-transform: uppercase;
    font-family: 'gras';
    line-height: 24px;
    font-weight: bold;
    /*text-shadow: 8px 6px 6px #00000052;*/
    color: #633131;
}
.fiche-produit div.img-prod {
    width: 100%;
    min-height: 309px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0px;
}
.fiche-produit span.detail-compo {
    font-size: 13px;
    line-height: 13px;
}
.fiche-produit div.prixficheprod {
    font-size: 30px;
    font-family: 'gras';
    text-align: right;
}






#menu_catgories {
    display: block;
    position: fixed;
    top: calc(100dvh - 71px);
    width: 100%;
    padding-bottom: 5px;
    transition-delay: 0s;
    transition: top 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    z-index: 500;
}
#menu_catgories.categ_visible {
    /*top: 50%;
    bottom: 0px;*/

}
#menu_catgories span#bouton_categorie {
    width: fit-content;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #ad0202;
    box-shadow: 0 0 8px 3px #00000057;
    height: 50px;
    line-height: 39px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 50px;
    margin-bottom: 22px;
    font-variant: all-small-caps;
    min-width: 40%;
    text-align: center;
    font-size: 22px;
    position: relative;

}
#menu_catgories span#bouton_categorie span{
    width: 100%;
    font-size: 10px;
    position: absolute;
    top: 32%;
    left: 0;
    opacity: 50%;
        font-family: 'normal';
}

#menu_catgories .quadrillage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px 5px;
    height: auto;
    padding-left: 5px;
    padding-right: 5px;
}
#menu_catgories .quadrillage > :last-child {
    grid-column: span 2;
    background-position: 25px center;
    background-repeat: no-repeat;
    background-size: 18%;
}
#menu_catgories .quadrillage > :last-child span {
    width: 100%;
    position: absolute;
    bottom: 50%;
    transform: translate(0px, 50%);
    /* text-align: center; */
    left: 9%;
    font-variant-caps: all-small-caps;
    color: #434343;
    /* line-height: 11px; */
    font-size: 24px;
    /* font-style: italic; */

}

#menu_catgories .quadrillage div {
    height: 26vw;
    text-align: center;
    font-size: 12px;
    position: relative;
    /* border-radius: 0px; */
    background-color: seashell;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 33%;
}
#menu_catgories .quadrillage div.categchoisi {
    background-color: #c14141;
    background-blend-mode: color-dodge;

}
#menu_catgories .quadrillage div span {
    width: 100%;
    position: absolute;
    bottom: 11px;
    text-align: center;
    left: 0px;
    font-variant-caps: all-small-caps;
    color: #434343;
    line-height: 11px;
} 
#menu_catgories .quadrillage div.categchoisi span{
    color: #fa5454;
}
#masque_liste_pour_menu {
    width: 100vw;
    height: 100vh;
    background-color: #0000008a;
    display: block;
    position: fixed;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    top: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#masque_liste_pour_menu.fond_visible{
    visibility: visible;
    opacity: 1;
    z-index: 499;
}

#info_click {
    padding-top: 17px;
    margin-bottom: 17px;
    color: grey;
    font-size: 10px;
    text-align: center;
}
#tout_accueil {
    position:absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.ImageAccueil {
    background-size: cover;
    background-position: center;
    background-image: url(../img/accueil.jpg);

    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.2;
}
.cadre_flou {
    position: absolute;
    width: 65%;
    padding: 15px;
    background-color: #ffffff21;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}










/*   PANNEAU D'ADMINISTRATION  */

       .category-section {
    margin-bottom: 40px; /* Espace entre les catégories */
    padding: 15px;
    background-color: #1e1e1e; /* Fond de section sombre */
    border-radius: 8px;
    border: 1px solid #2d2d2d;
}

.category-section h2 {
    color: #ffffff;
    border-bottom: 1px solid #3a3a3a;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 15px;
}

.product-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-admin {
    background-color: #2a2a2a; /* Fond de produit sombre */
    color: #e0e0e0;
    padding: 12px;
    margin-bottom: 8px; /* Espace entre les produits */
    border-radius: 4px;
    border: 1px solid #383838;
    cursor: grab; /* Indique que l'élément est déplaçable */
    display: flex;
    justify-content: space-between; /* Pour aligner le nom et le handle */
    align-items: center;
}

.product-admin:last-child {
    margin-bottom: 0;
}

.product-admin:active {
    cursor: grabbing; /* Indique que l'on est en train de glisser */
}

.product-name {
    flex-grow: 1; /* Permet au nom de prendre l'espace */
    margin-right: 10px;
}

.product-handle {
    font-size: 19px;
    letter-spacing: 3px;
    color: #888;
    cursor: grab;
    padding: 0 5px;
}

/* Style appliqué par SortableJS à l'élément fantôme (lorsqu'on le glisse) */
.sortable-ghost {
    opacity: 0.4;
    background-color:rgb(206, 90, 90); /* Couleur d'accentuation pour le fantôme */
    color: #121212;
}

/* Style appliqué par SortableJS à l'élément sélectionné (celui qu'on est en train de glisser) */
.sortable-chosen {
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    /* Peut-être pas de style particulier, le ghost suffit */
}

/* Style appliqué par SortableJS à l'élément en cours de drag */
.sortable-drag {
   /* background-color: #5cb85c; /* Par exemple */
   opacity: 0.9;

}




   /* ... (styles product-item existants) ... */

.product-admin[data-dispo="0"] { /* Sélectionne les éléments avec data-dispo="0" */
    background-color: #414141;
    color: #656565;
    /* Vous pouvez ajouter d'autres styles : */
    /* text-decoration: line-through; */
    /* background-color: #3a2a2a; */ /* Un fond légèrement différent */
}

/* Optionnel: Changer le curseur sur les éléments indisponibles si vous voulez indiquer
   qu'ils peuvent être réactivés (bien que la pression longue soit l'action) */
.product-admin[data-dispo="0"] {
    cursor: pointer; /* Change le curseur de 'grab' à 'pointer' */
}

/* Assurez-vous que le handle garde son curseur si vous l'utilisez */
.product-admin[data-dispo="0"] .product-handle {
     cursor: grab; /* Remet le curseur grab sur le handle */
}





.info_admin{
    font-size: 10px;
    font-family: 'light';
    color: #898989;
    font-style: italic;
    line-height: 17px;

}

.info_admin ul{

}
.info_admin ul li{
list-style-type: disclosure-open;
}